Skip to content

visualcloud / Vmatrix-template

Go to a project
Commit 99d7b6e3 by zhangmeng
Options

retail

parent c81dc7a4
Showing with 784 additions and 785 deletions
src/App.vue
......@@ -5,9 +5,9 @@
</template>
<script>
/*import page from './templates/helloworld/index'*/
import page from './templates/retail/index'
//import page from './templates/listingInformation/index'
/* import page from './templates/helloworld/index' */
import page from './templates/retail/index'
// import page from './templates/listingInformation/index'
window.getQuery = function (key) {
var url = location.search // 获取url中"?"符后的字串
var theRequest = new Object()
......
src/framework/components/BoxShadowSky/index.vue
......@@ -8,7 +8,7 @@
</template>
<script>
export default {};
export default {}
</script>
<style>
......
src/templates/companyCulture/index.vue
......@@ -29,17 +29,17 @@
</template>
<script>
import mixin from "./mixin";
import "swiper/dist/css/swiper.css";
import { getQuery } from "@/framework/utils";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { getFilmDetail } from "@/framework/templateApi/index";
import requireAllPage from "./pages/index.js";
import Message from "@/framework/tempalteMessage";
import Scene from "@/framework/utils/sence";
import { setTimeout, clearTimeout } from "timers";
import mixin from './mixin'
import 'swiper/dist/css/swiper.css'
import { getQuery } from '@/framework/utils'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { getFilmDetail } from '@/framework/templateApi/index'
import requireAllPage from './pages/index.js'
import Message from '@/framework/tempalteMessage'
import Scene from '@/framework/utils/sence'
import { setTimeout, clearTimeout } from 'timers'
export default {
name: "page",
name: 'page',
mixins: [mixin],
components: {
swiper,
......@@ -47,99 +47,99 @@ export default {
...requireAllPage
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
swiper () {
return this.$refs.mySwiper.swiper
}
},
data() {
data () {
return {
swiperOption: {
// some swiper options/callbacks
// 所有的参数同 swiper 官方 api 参数
// ...
}
};
}
},
methods: {
message(data) {
Message.send(data, "*");
message (data) {
Message.send(data, '*')
},
loaded(index) {
this.$refs["child" + this.sliderActiveIndex][0].enter();
loaded (index) {
this.$refs['child' + this.sliderActiveIndex][0].enter()
},
edit(index) {
if (getQuery("isEdit")) {
this.currentIndex = index;
var item = this.list[index];
edit (index) {
if (getQuery('isEdit')) {
this.currentIndex = index
var item = this.list[index]
this.message(
{
type: "edit",
type: 'edit',
item,
index
},
"*"
);
'*'
)
}
},
getList() {
getList () {
this.message(
{
type: "getList",
type: 'getList',
pages: this.pages
},
"*"
);
'*'
)
}
},
beforeDestroy() {},
mounted() {
Scene.EventBus.on("leaveBefore", e => {
console.log("leaveBefore");
this.$refs["child" + this.sliderActiveIndex][0].leave().then(() => {
console.log("leaveBefore then");
var index = this.sliderActiveIndex;
beforeDestroy () {},
mounted () {
Scene.EventBus.on('leaveBefore', e => {
console.log('leaveBefore')
this.$refs['child' + this.sliderActiveIndex][0].leave().then(() => {
console.log('leaveBefore then')
var index = this.sliderActiveIndex
if (index >= this.pages.length - 1) {
index = -1;
console.log(index);
index = -1
console.log(index)
}
this.swiper.slideTo(index + 1, 1000, false);
});
});
this.swiper.slideTo(index + 1, 1000, false)
})
})
// this.$refs['child'][0].enter().then(() => {
// })
},
created() {
var vm = this;
created () {
var vm = this
Message.init(e => {
var isObj = typeof e.data === "object";
if (isObj && e.data["type"] == "setData") {
vm.setEditData(e.data);
var isObj = typeof e.data === 'object'
if (isObj && e.data['type'] == 'setData') {
vm.setEditData(e.data)
}
if (isObj && e.data["type"] == "cancelEdit") {
vm.cancelEditAction();
if (isObj && e.data['type'] == 'cancelEdit') {
vm.cancelEditAction()
}
if (isObj && e.data["type"] == "edit") {
vm.currentIndex = e.data.index;
if (isObj && e.data['type'] == 'edit') {
vm.currentIndex = e.data.index
}
if (isObj && e.data["type"] == "setList") {
if (isObj && e.data['type'] == 'setList') {
// vm.list = JSON.parse(JSON.stringify(e.data.list))
this.setAllData(e.data);
this.setAllData(e.data)
}
if (isObj && e.data["type"] == "getList") {
vm.getAllData();
if (isObj && e.data['type'] == 'getList') {
vm.getAllData()
}
if (isObj && e.data["type"] == "goPage") {
vm.swiper.slideTo(parseInt(e.data.index), 500, false);
if (isObj && e.data['type'] == 'goPage') {
vm.swiper.slideTo(parseInt(e.data.index), 500, false)
}
});
})
this.swiperOption = {
effect: "fade",
effect: 'fade',
observer: true,
/* 将observe应用于Swiper的父元素。
当Swiper的父元素变化时，例如window.resize，Swiper更新。 */
observerParents: true,
allowTouchMove: !getQuery("isEdit"),
allowTouchMove: !getQuery('isEdit'),
slidesPerView: 1,
// autoplay: !getQuery("isEdit")
// ? {
......@@ -148,55 +148,55 @@ export default {
// : false,
loop: false,
on: {
init() {
init () {
if (!vm.isEditMode) {
// swiperAnimateCache(this); // 隐藏动画元素
// swiperAnimate(this); // 初始化完成开始动画
}
},
slideChange() {
vm.sliderActiveIndex = this.realIndex;
slideChange () {
vm.sliderActiveIndex = this.realIndex
if (vm.isEditMode) {
// $(".ani").css("visibility", "");
}
},
slideChangeTransitionEnd() {
slideChangeTransitionEnd () {
if (!vm.isEditMode) {
// swiperAnimate(this);
}
}
}
};
if (getQuery("isEdit")) {
this.isEditMode = true;
}
if (getQuery('isEdit')) {
this.isEditMode = true
} else {
this.isEditMode = false;
}
if (getQuery("filmId") && !this.isEditMode) {
getFilmDetail(getQuery("filmId")).then(result => {
console.log(result);
vm.pages = JSON.parse(result.data.filmData).pageList;
vm.filmId = result.filmId;
});
this.isEditMode = false
}
if (getQuery('filmId') && !this.isEditMode) {
getFilmDetail(getQuery('filmId')).then(result => {
console.log(result)
vm.pages = JSON.parse(result.data.filmData).pageList
vm.filmId = result.filmId
})
} else {
if (getQuery("isPreview")) {
if (getQuery('isPreview')) {
} else {
// vm.getDefaulted();
}
}
},
data() {
data () {
return {
date: "",
img: "",
date: '',
img: '',
currentIndex: "",
currentIndex: '',
isEditMode: true,
cancelEdit: false,
sliderActiveIndex: 0
};
}
};
}
}
</script>
<style lang="scss" scoped>
.glob-container {
......
src/templates/companyCulture/pages/notice.vue
......@@ -65,46 +65,46 @@
</template>
<script>
import methods from "../methods";
import Date from "@/framework/components/Date/index";
import Scene from "@/framework/utils/sence";
import { enter, leave } from "../keyframe";
import methods from '../methods'
import Date from '@/framework/components/Date/index'
import Scene from '@/framework/utils/sence'
import { enter, leave } from '../keyframe'
export default {
name: "notice",
props: ["schemaData", "page", "isEditMode", "cancelEdit"],
name: 'notice',
props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
mixins: [methods],
components: {
Date
},
created() {
created () {
// console.log(this.list);
},
methods: {
enter,
leave,
enterAfter() {
enterAfter () {
this.timer = setTimeout(() => {
Scene.leaveBefore();
clearTimeout(this.timer);
}, 10000);
Scene.leaveBefore()
clearTimeout(this.timer)
}, 10000)
}
},
mounted() {},
destroyed() {
clearTimeout(this.timer);
mounted () {},
destroyed () {
clearTimeout(this.timer)
},
data() {
data () {
return {
currentIndex: "",
date: "2019.07.04",
img: "",
currentIndex: "",
currentIndex: '',
date: '2019.07.04',
img: '',
currentIndex: '',
keyframes: [
{
el: ".sanjiaoBg",
el: '.sanjiaoBg',
style: {
opacity: 0,
translateX: "2000px"
translateX: '2000px'
},
options: {
delay: 0,
......@@ -113,7 +113,7 @@ export default {
enterBefore: {
style: {
opacity: 0,
translateX: "2000px"
translateX: '2000px'
},
options: {
delay: 0,
......@@ -123,7 +123,7 @@ export default {
enter: {
style: {
opacity: 1,
translateX: "0px"
translateX: '0px'
},
options: {
delay: 0,
......@@ -133,7 +133,7 @@ export default {
leave: {
style: {
opacity: 0,
translateX: "2000px"
translateX: '2000px'
},
options: {
delay: 1000,
......@@ -142,7 +142,7 @@ export default {
}
},
{
el: ".container-notice",
el: '.container-notice',
style: {
opacity: 0
},
......@@ -174,11 +174,11 @@ export default {
}
},
{
el: ".en_name .left-word",
el: '.en_name .left-word',
enterBefore: {
style: {
opacity: 0,
translateX: "-2000px"
translateX: '-2000px'
},
options: {
delay: 0,
......@@ -188,7 +188,7 @@ export default {
enter: {
style: {
opacity: 1,
translateX: "0px"
translateX: '0px'
},
options: {
delay: 1000,
......@@ -201,11 +201,11 @@ export default {
}
},
{
el: ".zh_name",
el: '.zh_name',
enterBefore: {
style: {
opacity: 0,
scale: "0.3"
scale: '0.3'
},
options: {
delay: 0,
......@@ -215,7 +215,7 @@ export default {
enter: {
style: {
opacity: 1,
scale: "1"
scale: '1'
},
options: {
delay: 2000,
......@@ -228,9 +228,9 @@ export default {
}
}
]
};
}
};
}
}
</script>
<style lang="scss" scoped>
......
src/templates/companyCulture/pages/schedule.vue
......@@ -100,80 +100,80 @@
</template>
<script>
import methods from "../methods";
import Date from "@/framework/components/Date/index";
import Scene from "@/framework/utils/sence";
import { enter, leave } from "../keyframe";
import methods from '../methods'
import Date from '@/framework/components/Date/index'
import Scene from '@/framework/utils/sence'
import { enter, leave } from '../keyframe'
export default {
name: "schedule",
props: ["schemaData", "page", "isEditMode", "cancelEdit", "activeIndex"],
name: 'schedule',
props: ['schemaData', 'page', 'isEditMode', 'cancelEdit', 'activeIndex'],
mixins: [methods],
components: {
Date
},
watch: {
schemaData: function() {
this.listData = this.schemaData.scheduleList;
schemaData: function () {
this.listData = this.schemaData.scheduleList
}
},
created() {
created () {
// console.log(this.list);
this.listData = this.schemaData.scheduleList;
this.listData = this.schemaData.scheduleList
setInterval(() => {
this.listData = this.schemaData.scheduleList;
this.listData = this.schemaData.scheduleList
if (this.activeIndex === this.page && !this.isEditMode) {
this.listData = JSON.parse(JSON.stringify(this.listData));
this.listData = JSON.parse(JSON.stringify(this.listData))
}
}, 8000);
}, 8000)
},
mounted() {
mounted () {
},
destroyed() {
destroyed () {
clearTimeout(this.timer)
},
data() {
data () {
return {
currentIndex: "",
date: "2019.07.04",
img: "",
currentIndex: "",
currentIndex: '',
date: '2019.07.04',
img: '',
currentIndex: '',
listData: [
{
content: "龙湖地产来访",
address: "22-1会议室",
department: "智慧营销",
time: "09:30 AM -12:00 AM",
content: '龙湖地产来访',
address: '22-1会议室',
department: '智慧营销',
time: '09:30 AM -12:00 AM',
index: 1
},
{
content: "Vmatrix研发进度",
address: "21-03会议室",
department: "数字理想",
time: "09:30 AM -10:00 AM",
content: 'Vmatrix研发进度',
address: '21-03会议室',
department: '数字理想',
time: '09:30 AM -10:00 AM',
index: 2
},
{
content: "数字理想前端面试",
address: "22-1会议室",
department: "数字理想",
time: "09:30 AM -12:00 AM",
content: '数字理想前端面试',
address: '22-1会议室',
department: '数字理想',
time: '09:30 AM -12:00 AM',
index: 3
},
{
content: "销售总监面试",
address: "22-1会议室",
department: "总经办",
time: "09:30 AM -12:00 AM",
content: '销售总监面试',
address: '22-1会议室',
department: '总经办',
time: '09:30 AM -12:00 AM',
index: 4
}
],
keyframes: [
{
el: ".sanjiaoBg",
el: '.sanjiaoBg',
style: {
opacity: 0,
translateX: "2000px"
translateX: '2000px'
},
options: {
delay: 0,
......@@ -182,7 +182,7 @@ export default {
enterBefore: {
style: {
opacity: 0,
translateX: "2000px"
translateX: '2000px'
},
options: {
delay: 0,
......@@ -192,7 +192,7 @@ export default {
enter: {
style: {
opacity: 1,
translateX: "0px"
translateX: '0px'
},
options: {
delay: 0,
......@@ -202,7 +202,7 @@ export default {
leave: {
style: {
opacity: 0,
translateX: "2000px"
translateX: '2000px'
},
options: {
delay: 1000,
......@@ -211,7 +211,7 @@ export default {
}
},
{
el: ".container-schedule",
el: '.container-schedule',
style: {
opacity: 0
},
......@@ -243,11 +243,11 @@ export default {
}
},
{
el: ".en_name .left-word",
el: '.en_name .left-word',
enterBefore: {
style: {
opacity: 0,
translateX: "-2000px"
translateX: '-2000px'
},
options: {
delay: 0,
......@@ -257,7 +257,7 @@ export default {
enter: {
style: {
opacity: 1,
translateX: "0px"
translateX: '0px'
},
options: {
delay: 500,
......@@ -297,11 +297,11 @@ export default {
// }
// },
{
el: ".zh_name",
el: '.zh_name',
enterBefore: {
style: {
opacity: 0,
scale: "0.3"
scale: '0.3'
},
options: {
delay: 0,
......@@ -311,7 +311,7 @@ export default {
enter: {
style: {
opacity: 1,
scale: "1"
scale: '1'
},
options: {
delay: 2000,
......@@ -324,61 +324,61 @@ export default {
}
}
]
};
}
},
computed: {
computeListData() {
computeListData () {
return this.listData.map((item, index) => {
var obj = {};
var random = parseInt(Math.random() * 1000);
var obj = {}
var random = parseInt(Math.random() * 1000)
// console.log(random);
obj.id = random;
obj.id = random
// console.log({...item,...obj})
return { ...item, ...obj };
});
return { ...item, ...obj }
})
}
},
methods: {
enter,
leave,
enterAfter() {
enterAfter () {
this.timer = setTimeout(() => {
Scene.leaveBefore();
Scene.leaveBefore()
clearTimeout(this.timer)
}, 10000);
}, 10000)
},
TbeforeEnter(el) {
el.style.opacity = 0;
TbeforeEnter (el) {
el.style.opacity = 0
$.Velocity(
el,
{
opacity: 0,
rotateX: "-180deg"
rotateX: '-180deg'
},
{
duration: 0
}
);
)
// el.style.transform = 'rotateX(-180deg)'
},
Tenter(el, done) {
Tenter (el, done) {
window.$.Velocity(
el,
{ opacity: 1, rotateX: "0deg" },
{ duration: 1000, delay: el.dataset.index * 250, easing: "easeInSine" }
);
{ opacity: 1, rotateX: '0deg' },
{ duration: 1000, delay: el.dataset.index * 250, easing: 'easeInSine' }
)
},
Tleave(el, done) {
Tleave (el, done) {
window.$.Velocity(
el,
{
opacity: 0
},
{ complete: done }
);
)
}
}
};
}
</script>
<style lang="scss" scoped>
......
src/templates/companyCulture/pages/welcome.vue
......@@ -42,21 +42,21 @@
</template>
<script>
import methods from "../methods";
import Date from "@/framework/components/Date/index";
import Scene from "@/framework/utils/sence";
import methods from '../methods'
import Date from '@/framework/components/Date/index'
import Scene from '@/framework/utils/sence'
import { enter, leave } from '../keyframe'
export default {
name: "welcome",
props: ["schemaData", "page", "isEditMode", "cancelEdit"],
name: 'welcome',
props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
mixins: [methods],
components: {
Date
},
created() {
created () {
// console.log(this.list);
},
mounted() {
mounted () {
// this.enter((countEnterTime) => {
// this.timer = setTimeout(() => {
// Scene.enterAfter({
......@@ -70,50 +70,49 @@ export default {
// console.log(err)
// } )
},
entering() {
entering () {
console.log(this)
$.velocity(this.$refs['abc'],)
return new promise();
$.velocity(this.$refs['abc'])
return new promise()
},
innerAnimationStart() {
innerAnimationStart () {
sence.eventBus.emit('pageDone')
},
innerAnimationEnd(){
innerAnimationEnd () {
},
leave(){
leave () {
},
destroyed() {
destroyed () {
clearTimeout(this.timer)
},
methods: {
eventChange() {
Scene.EventBus.emit("change", { aa: 12 });
eventChange () {
Scene.EventBus.emit('change', { aa: 12 })
// this.leave();
},
enter,
leave,
enterAfter() {
enterAfter () {
this.timer = setTimeout(() => {
Scene.leaveBefore();
Scene.leaveBefore()
clearTimeout(this.timer)
}, 10000);
}, 10000)
}
},
data() {
data () {
return {
currentIndex: "",
date: "2019.07.04",
img: "",
currentIndex: "",
currentIndex: '',
date: '2019.07.04',
img: '',
currentIndex: '',
keyframes: [
{
el: ".sanjiaoBg",
el: '.sanjiaoBg',
style: {
opacity: 0,
translateX: "2000px"
translateX: '2000px'
},
options: {
delay: 0,
......@@ -122,7 +121,7 @@ export default {
enterBefore: {
style: {
opacity: 0,
translateX: "2000px"
translateX: '2000px'
},
options: {
delay: 0,
......@@ -132,7 +131,7 @@ export default {
enter: {
style: {
opacity: 1,
translateX: "0px"
translateX: '0px'
},
options: {
delay: 0,
......@@ -142,7 +141,7 @@ export default {
leave: {
style: {
opacity: 0,
translateX: "2000px"
translateX: '2000px'
},
options: {
delay: 1000,
......@@ -151,10 +150,10 @@ export default {
}
},
{
el: ".en_name",
el: '.en_name',
style: {
opacity: 0,
scale: "0.3"
scale: '0.3'
},
options: {
delay: 2000,
......@@ -163,7 +162,7 @@ export default {
enterBefore: {
style: {
opacity: 0,
scale: "0.3"
scale: '0.3'
},
options: {
delay: 2000,
......@@ -187,10 +186,10 @@ export default {
}
},
{
el: ".en_name .left-word",
el: '.en_name .left-word',
style: {
opacity: 0,
translateX: "-2000px"
translateX: '-2000px'
},
options: {
delay: 0,
......@@ -199,7 +198,7 @@ export default {
enterBefore: {
style: {
opacity: 0,
translateX: "-2000px"
translateX: '-2000px'
},
options: {
delay: 0,
......@@ -209,7 +208,7 @@ export default {
enter: {
style: {
opacity: 1,
translateX: "0px"
translateX: '0px'
},
options: {
delay: 500,
......@@ -222,10 +221,10 @@ export default {
}
},
{
el: ".en_name .right-word",
el: '.en_name .right-word',
style: {
opacity: 0,
translateX: "2000px"
translateX: '2000px'
},
options: {
delay: 0,
......@@ -234,7 +233,7 @@ export default {
enterBefore: {
style: {
opacity: 0,
translateX: "2000px"
translateX: '2000px'
},
options: {
delay: 0,
......@@ -244,7 +243,7 @@ export default {
enter: {
style: {
opacity: 1,
translateX: "0px"
translateX: '0px'
},
options: {
delay: 500,
......@@ -257,10 +256,10 @@ export default {
}
},
{
el: ".zh_name",
el: '.zh_name',
style: {
opacity: 0,
scale: "0.3"
scale: '0.3'
},
options: {
delay: 0,
......@@ -269,7 +268,7 @@ export default {
enterBefore: {
style: {
opacity: 0,
scale: "0.3"
scale: '0.3'
},
options: {
delay: 0,
......@@ -279,7 +278,7 @@ export default {
enter: {
style: {
opacity: 1,
scale: "1"
scale: '1'
},
options: {
delay: 3000,
......@@ -292,9 +291,9 @@ export default {
}
}
]
};
}
};
}
}
</script>
<style lang="scss" scoped>
......
src/templates/listingInformation/index.vue
......@@ -56,17 +56,17 @@
</template>
<script>
import mixin from "./mixin";
import "swiper/dist/css/swiper.css";
import { getQuery } from "@/framework/utils";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { getFilmDetail } from "@/framework/templateApi/index";
import requireAllPage from "./pages/index.js";
import Message from "@/framework/tempalteMessage";
import Scene from "@/framework/utils/sence";
import { setTimeout } from "timers";
import mixin from './mixin'
import 'swiper/dist/css/swiper.css'
import { getQuery } from '@/framework/utils'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { getFilmDetail } from '@/framework/templateApi/index'
import requireAllPage from './pages/index.js'
import Message from '@/framework/tempalteMessage'
import Scene from '@/framework/utils/sence'
import { setTimeout } from 'timers'
export default {
name: "page",
name: 'page',
mixins: [mixin],
components: {
swiper,
......@@ -74,109 +74,109 @@ export default {
...requireAllPage
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
swiper () {
return this.$refs.mySwiper.swiper
}
},
data() {
data () {
return {
swiperOption: {
// some swiper options/callbacks
// 所有的参数同 swiper 官方 api 参数
// ...
}
};
}
},
methods: {
loaded(index) {
loaded (index) {
if (!this.isEditMode) {
setTimeout(() => {
this.$refs["child" + this.sliderActiveIndex][0].enter().then(() => {
console.log(index, "enter 完毕");
});
}, 1000);
this.$refs['child' + this.sliderActiveIndex][0].enter().then(() => {
console.log(index, 'enter 完毕')
})
}, 1000)
}
},
message(data) {
message (data) {
// 发送消息
Message.send(data, "*");
Message.send(data, '*')
},
edit(index) {
if (getQuery("isEdit")) {
this.currentIndex = index;
var item = this.list[index];
edit (index) {
if (getQuery('isEdit')) {
this.currentIndex = index
var item = this.list[index]
this.message(
{
type: "edit",
type: 'edit',
item,
index
},
"*"
);
'*'
)
}
},
getList() {
getList () {
this.message(
{
type: "getList",
type: 'getList',
pages: this.pages
},
"*"
);
'*'
)
}
},
beforeDestroy() {},
mounted() {
beforeDestroy () {},
mounted () {
},
created() {
if (getQuery("isEdit")) {
this.isEditMode = true;
created () {
if (getQuery('isEdit')) {
this.isEditMode = true
} else {
Scene.EventBus.on("leaveBefore", e => {
console.log("leaveBefore");
Scene.EventBus.on('leaveBefore', e => {
console.log('leaveBefore')
if (this.pages.length > 1) {
this.$refs["child" + this.sliderActiveIndex][0].leave().then(() => {
console.log("leaveBefore then");
var index = this.sliderActiveIndex;
this.$refs['child' + this.sliderActiveIndex][0].leave().then(() => {
console.log('leaveBefore then')
var index = this.sliderActiveIndex
if (index >= this.pages.length - 1) {
index = -1;
console.log(index);
index = -1
console.log(index)
}
this.swiper.slideTo(index + 1, 0, false);
});
this.swiper.slideTo(index + 1, 0, false)
})
}
});
this.isEditMode = false;
})
this.isEditMode = false
}
var vm = this;
var vm = this
Message.init(e => {
var isObj = typeof e.data === "object";
if (isObj && e.data["type"] == "setData") {
vm.setEditData(e.data);
var isObj = typeof e.data === 'object'
if (isObj && e.data['type'] == 'setData') {
vm.setEditData(e.data)
}
if (isObj && e.data["type"] == "cancelEdit") {
vm.cancelEditAction();
if (isObj && e.data['type'] == 'cancelEdit') {
vm.cancelEditAction()
}
if (isObj && e.data["type"] == "edit") {
vm.currentIndex = e.data.index;
if (isObj && e.data['type'] == 'edit') {
vm.currentIndex = e.data.index
}
if (isObj && e.data["type"] == "setList") {
if (isObj && e.data['type'] == 'setList') {
// vm.list = JSON.parse(JSON.stringify(e.data.list))
this.setAllData(e.data);
this.setAllData(e.data)
}
if (isObj && e.data["type"] == "getList") {
vm.getAllData();
if (isObj && e.data['type'] == 'getList') {
vm.getAllData()
}
if (isObj && e.data["type"] == "goPage") {
vm.swiper.slideTo(parseInt(e.data.index), 1000, false);
if (isObj && e.data['type'] == 'goPage') {
vm.swiper.slideTo(parseInt(e.data.index), 1000, false)
}
});
})
this.swiperOption = {
observer: true,
/* 将observe应用于Swiper的父元素。
当Swiper的父元素变化时，例如window.resize，Swiper更新。 */
observerParents: true,
allowTouchMove: !getQuery("isEdit"),
allowTouchMove: !getQuery('isEdit'),
slidesPerView: 1,
// autoplay: !getQuery("isEdit")
// ? {
......@@ -185,51 +185,51 @@ export default {
// : false,
loop: false,
on: {
init() {
init () {
if (!vm.isEditMode) {
// swiperAnimateCache(this); // 隐藏动画元素 todo
// swiperAnimate(this); // 初始化完成开始动画 todo
}
},
slideChange() {
vm.sliderActiveIndex = this.realIndex;
slideChange () {
vm.sliderActiveIndex = this.realIndex
if (vm.isEditMode) {
// $(".ani").css("visibility", "");
}
},
slideChangeTransitionEnd() {
slideChangeTransitionEnd () {
if (!vm.isEditMode) {
// swiperAnimate(this); // todo
}
}
}
};
if (getQuery("filmId") && !this.isEditMode) {
getFilmDetail(getQuery("filmId")).then(result => {
console.log(result);
const filmData = JSON.parse(result.data.filmData);
vm.pages = filmData && filmData.pageList ? filmData.pageList : [];
vm.filmId = result.filmId;
});
}
if (getQuery('filmId') && !this.isEditMode) {
getFilmDetail(getQuery('filmId')).then(result => {
console.log(result)
const filmData = JSON.parse(result.data.filmData)
vm.pages = filmData && filmData.pageList ? filmData.pageList : []
vm.filmId = result.filmId
})
} else {
if (getQuery("isPreview")) {
if (getQuery('isPreview')) {
} else {
// vm.getDefaulted();
}
}
},
data() {
data () {
return {
date: "",
img: "",
date: '',
img: '',
currentIndex: "",
currentIndex: '',
isEditMode: true,
cancelEdit: false,
sliderActiveIndex: 0
};
}
};
}
}
</script>
<style lang="scss" scoped>
.glob-container {
......
src/templates/listingInformation/pages/buyingHouse.vue
......@@ -52,29 +52,29 @@
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import StarSky from "@/framework/components/BoxShadowSky";
import methods from "../methods";
import anime from "animejs/lib/anime.es.js";
import Scene from "@/framework/utils/sence";
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import StarSky from '@/framework/components/BoxShadowSky'
import methods from '../methods'
import anime from 'animejs/lib/anime.es.js'
import Scene from '@/framework/utils/sence'
export default {
name: "welcome",
props: ["schemaData", "page", "isEditMode", "cancelEdit"],
name: 'welcome',
props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
mixins: [methods],
components: {
swiper,
swiperSlide,
StarSky
},
created() {
created () {
// console.log(this.list);
},
methods: {
reLeave() {
this.leave();
reLeave () {
this.leave()
},
leave() {
console.log("leave");
leave () {
console.log('leave')
// anime({
// targets: "#cd-image-1 circle",
// duration: 3000,
......@@ -83,168 +83,168 @@ export default {
// });
var PromiseAll = [
anime({
targets: "#cd-image-1 circle",
targets: '#cd-image-1 circle',
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
easing: 'easeOutQuad'
}).finished,
anime({
targets: "#mask-img-1 circle",
targets: '#mask-img-1 circle',
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
easing: 'easeOutQuad'
}).finished
];
var enPromise = Promise.all(PromiseAll);
return enPromise;
]
var enPromise = Promise.all(PromiseAll)
return enPromise
},
enter() {
console.log("enter anime");
enter () {
console.log('enter anime')
var PromiseAll = [
anime({
targets: this.$refs["house-list"],
targets: this.$refs['house-list'],
translateX: 0,
opacity: 1,
duration: 1000
}).finished,
anime({
targets: this.$refs["title"],
targets: this.$refs['title'],
translateX: 0,
opacity: 1,
delay: 1000,
duration: 500,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: this.$refs["price"],
targets: this.$refs['price'],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 1200,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: this.$refs["surrounding"],
targets: this.$refs['surrounding'],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 1800,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: this.$refs["feature-list"],
targets: this.$refs['feature-list'],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 2100,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: ".high-light",
targets: '.high-light',
translateX: 0,
opacity: 1,
duration: 1000,
// delay: anime.stagger(1000),
delay: 1500,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished
];
]
Promise.all(PromiseAll).then(() => {
this.enterAfter();
});
return Promise.all(PromiseAll);
this.enterAfter()
})
return Promise.all(PromiseAll)
},
enterBefore() {
enterBefore () {
var els = [
".house-list",
".center-v .title",
".price",
".surrounding",
".feature-list",
".high-light .high-light-item"
];
'.house-list',
'.center-v .title',
'.price',
'.surrounding',
'.feature-list',
'.high-light .high-light-item'
]
anime({
targets: "#cd-image-1 circle",
targets: '#cd-image-1 circle',
duration: 0,
r: [0, 2920]
});
})
anime({
targets: this.$refs["house-list"],
targets: this.$refs['house-list'],
translateX: -1500,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["title"],
targets: this.$refs['title'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["price"],
targets: this.$refs['price'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["surrounding"],
targets: this.$refs['surrounding'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["feature-list"],
targets: this.$refs['feature-list'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: ".high-light",
targets: '.high-light',
translateX: 1000,
opacity: 0,
duration: 0
});
})
// setTimeout(() => {
// this.enter();
// }, 1000);
},
enterAfter() {
enterAfter () {
this.timer = setTimeout(() => {
Scene.leaveBefore();
clearTimeout(this.timer);
}, 10000);
Scene.leaveBefore()
clearTimeout(this.timer)
}, 10000)
}
},
mounted() {
console.log(this.isEditMode);
mounted () {
console.log(this.isEditMode)
if (!this.isEditMode) {
console.log(this.isEditMode);
console.log(this.isEditMode)
this.enterBefore();
this.enterBefore()
}
},
data() {
data () {
return {
currentIndex: "",
date: "2019.07.04",
currentIndex: "",
currentIndex: '',
date: '2019.07.04',
currentIndex: '',
dataList: [
"http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png",
"http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg"
'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png',
'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg'
],
feutrueList: ["绿化率高", "有电梯", "精装修", "满五年", "近地铁"],
feutrueList: ['绿化率高', '有电梯', '精装修', '满五年', '近地铁'],
swiperOption: {
effect: "fade",
effect: 'fade',
speed: 1000,
loop: true,
autoplay: {
delay: 5000
}
}
};
}
};
}
}
</script>
<style lang="scss" scoped>
......
src/templates/listingInformation/pages/rentHouse.vue
......@@ -80,19 +80,19 @@
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import methods from "../methods";
import anime from "animejs/lib/anime.es.js";
import Scene from "@/framework/utils/sence";
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import methods from '../methods'
import anime from 'animejs/lib/anime.es.js'
import Scene from '@/framework/utils/sence'
export default {
name: "welcome",
props: ["schemaData", "page", "isEditMode", "cancelEdit"],
name: 'welcome',
props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
mixins: [methods],
components: {
swiper,
swiperSlide
},
created() {
created () {
// console.log(this.list);
},
filters: {
......@@ -101,11 +101,11 @@ export default {
}
},
methods: {
reLeave() {
this.leave();
reLeave () {
this.leave()
},
leave() {
console.log("leave");
leave () {
console.log('leave')
// anime({
// targets: "#cd-image-1 circle",
// duration: 3000,
......@@ -114,165 +114,165 @@ export default {
// });
var PromiseAll = [
anime({
targets: "#cd-image-1 circle",
targets: '#cd-image-1 circle',
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
easing: 'easeOutQuad'
}).finished,
anime({
targets: "#mask-img-1 circle",
targets: '#mask-img-1 circle',
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
easing: 'easeOutQuad'
}).finished
];
]
return Promise.all(PromiseAll);
return Promise.all(PromiseAll)
},
enter() {
console.log("enter anime");
enter () {
console.log('enter anime')
var PromiseAll = [
anime({
targets: this.$refs["house-list"],
targets: this.$refs['house-list'],
translateX: 0,
opacity: 1,
duration: 1000
}).finished,
anime({
targets: this.$refs["title"],
targets: this.$refs['title'],
translateX: 0,
opacity: 1,
delay: 1000,
duration: 500,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: this.$refs["price"],
targets: this.$refs['price'],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 1200,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: this.$refs["surrounding"],
targets: this.$refs['surrounding'],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 1800,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: this.$refs["feature-list"],
targets: this.$refs['feature-list'],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 2100,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: ".high-light",
targets: '.high-light',
translateX: 0,
opacity: 1,
duration: 1000,
// delay: anime.stagger(1000),
delay: 1500,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished
];
]
Promise.all(PromiseAll).then(() => {
this.enterAfter()
})
return Promise.all(PromiseAll);
return Promise.all(PromiseAll)
},
enterBefore() {
enterBefore () {
var els = [
".house-list",
".center-v .title",
".price",
".surrounding",
".feature-list",
".high-light .high-light-item"
];
'.house-list',
'.center-v .title',
'.price',
'.surrounding',
'.feature-list',
'.high-light .high-light-item'
]
anime({
targets: "#cd-image-1 circle",
targets: '#cd-image-1 circle',
duration: 0,
r: [0, 2920]
});
})
anime({
targets: this.$refs["house-list"],
targets: this.$refs['house-list'],
translateX: -1500,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["title"],
targets: this.$refs['title'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["price"],
targets: this.$refs['price'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["surrounding"],
targets: this.$refs['surrounding'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["feature-list"],
targets: this.$refs['feature-list'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: ".high-light",
targets: '.high-light',
translateX: 1000,
opacity: 0,
duration: 0
});
})
// setTimeout(() => {
// this.enter();
// }, 1000);
},
enterAfter() {
enterAfter () {
this.timer = setTimeout(() => {
Scene.leaveBefore();
clearTimeout(this.timer);
}, 10000);
Scene.leaveBefore()
clearTimeout(this.timer)
}, 10000)
}
},
mounted() {
mounted () {
if (!this.isEditMode) {
this.enterBefore();
this.enterBefore()
}
},
data() {
data () {
return {
currentIndex: "",
date: "2019.07.04",
currentIndex: "",
currentIndex: '',
date: '2019.07.04',
currentIndex: '',
dataList: [
"http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png",
"http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg"
'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png',
'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg'
],
swiperOption: {
effect: "fade",
effect: 'fade',
speed: 1000,
loop: true,
autoplay: {
delay: 5000
}
}
};
}
};
}
}
</script>
<style lang="scss" scoped>
......
src/templates/listingInformation/pages/rentHouse2.vue
......@@ -83,27 +83,27 @@ height:912px;">
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import methods from "../methods";
import anime from "animejs/lib/anime.es.js";
import Scene from "@/framework/utils/sence";
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import methods from '../methods'
import anime from 'animejs/lib/anime.es.js'
import Scene from '@/framework/utils/sence'
export default {
name: "welcome",
props: ["schemaData", "page", "isEditMode", "cancelEdit"],
name: 'welcome',
props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
mixins: [methods],
components: {
swiper,
swiperSlide
},
created() {
created () {
// console.log(this.list);
},
methods: {
reLeave() {
this.leave();
reLeave () {
this.leave()
},
leave() {
console.log("leave");
leave () {
console.log('leave')
// anime({
// targets: "#cd-image-1 circle",
// duration: 3000,
......@@ -112,164 +112,164 @@ export default {
// });
var PromiseAll = [
anime({
targets: "#cd-image-1 circle",
targets: '#cd-image-1 circle',
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
easing: 'easeOutQuad'
}).finished,
anime({
targets: "#mask-img-1 circle",
targets: '#mask-img-1 circle',
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
easing: 'easeOutQuad'
}).finished
];
return Promise.all(PromiseAll);
]
return Promise.all(PromiseAll)
},
enter() {
console.log("enter anime");
enter () {
console.log('enter anime')
var PromiseAll = [
anime({
targets: this.$refs["house-list"],
targets: this.$refs['house-list'],
translateX: 0,
opacity: 1,
duration: 1000
}).finished,
anime({
targets: this.$refs["title"],
targets: this.$refs['title'],
translateX: 0,
opacity: 1,
delay: 1000,
duration: 500,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: this.$refs["price"],
targets: this.$refs['price'],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 1200,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: this.$refs["surrounding"],
targets: this.$refs['surrounding'],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 1800,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: this.$refs["feature-list"],
targets: this.$refs['feature-list'],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 2100,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: ".high-light",
targets: '.high-light',
translateX: 0,
opacity: 1,
duration: 1000,
// delay: anime.stagger(1000),
delay: 1500,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished
];
]
Promise.all(PromiseAll).then(() => {
this.enterAfter();
});
return Promise.all(PromiseAll);
this.enterAfter()
})
return Promise.all(PromiseAll)
},
enterBefore() {
enterBefore () {
var els = [
".house-list",
".center-v .title",
".price",
".surrounding",
".feature-list",
".high-light .high-light-item"
];
'.house-list',
'.center-v .title',
'.price',
'.surrounding',
'.feature-list',
'.high-light .high-light-item'
]
anime({
targets: "#cd-image-1 circle",
targets: '#cd-image-1 circle',
duration: 0,
r: [0, 2920]
});
})
anime({
targets: this.$refs["house-list"],
targets: this.$refs['house-list'],
translateX: -1500,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["title"],
targets: this.$refs['title'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["price"],
targets: this.$refs['price'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["surrounding"],
targets: this.$refs['surrounding'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["feature-list"],
targets: this.$refs['feature-list'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: ".high-light",
targets: '.high-light',
translateX: 1000,
opacity: 0,
duration: 0
});
})
// setTimeout(() => {
// this.enter();
// }, 1000);
},
enterAfter() {
enterAfter () {
this.timer = setTimeout(() => {
Scene.leaveBefore();
clearTimeout(this.timer);
}, 10000);
Scene.leaveBefore()
clearTimeout(this.timer)
}, 10000)
}
},
mounted() {
mounted () {
if (!this.isEditMode) {
this.enterBefore();
this.enterBefore()
}
},
data() {
data () {
return {
currentIndex: "",
date: "2019.07.04",
currentIndex: "",
currentIndex: '',
date: '2019.07.04',
currentIndex: '',
dataList: [
"http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png",
"http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg"
'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png',
'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg'
],
swiperOption: {
effect: "fade",
effect: 'fade',
speed: 1000,
loop: true,
autoplay: {
delay: 5000
}
}
};
}
};
}
}
</script>
<style lang="scss" scoped>
......
src/templates/listingInformation/pages/rentHouse3.vue
......@@ -83,28 +83,28 @@
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import methods from "../methods";
import Scene from "@/framework/utils/sence";
import anime from "animejs/lib/anime.es.js";
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import methods from '../methods'
import Scene from '@/framework/utils/sence'
import anime from 'animejs/lib/anime.es.js'
export default {
name: "welcome",
props: ["schemaData", "page", "isEditMode", "cancelEdit"],
name: 'welcome',
props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
mixins: [methods],
components: {
swiper,
swiperSlide
},
created() {
created () {
// console.log(this.list);
window.test = this;
window.test = this
},
methods: {
reLeave() {
this.leave();
reLeave () {
this.leave()
},
leave() {
console.log("leave");
leave () {
console.log('leave')
// anime({
// targets: "#cd-image-1 circle",
// duration: 3000,
......@@ -113,126 +113,126 @@ export default {
// });
var PromiseAll = [
anime({
targets: "#cd-image-1 circle",
targets: '#cd-image-1 circle',
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
easing: 'easeOutQuad'
}).finished,
anime({
targets: "#mask-img-1 circle",
targets: '#mask-img-1 circle',
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
easing: 'easeOutQuad'
}).finished
];
return Promise.all(PromiseAll);
]
return Promise.all(PromiseAll)
},
enter() {
enter () {
var PromiseAll = [
anime({
targets: this.$refs["house-list"],
targets: this.$refs['house-list'],
translateX: 0,
opacity: 1,
duration: 1000
}).finished,
anime({
targets: this.$refs["title"],
targets: this.$refs['title'],
translateX: 0,
opacity: 1,
delay: 1000,
duration: 500,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: this.$refs["price"],
targets: this.$refs['price'],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 1200,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: this.$refs["surrounding"],
targets: this.$refs['surrounding'],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 1500,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: this.$refs["feature-list"],
targets: this.$refs['feature-list'],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 1800,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: ".high-light",
targets: '.high-light',
translateY: 0,
opacity: 1,
duration: 1000,
// delay: anime.stagger(1000),
delay: 2000,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished
];
]
Promise.all(PromiseAll).then(() => {
this.enterAfter();
});
return Promise.all(PromiseAll);
this.enterAfter()
})
return Promise.all(PromiseAll)
},
enterBefore() {
enterBefore () {
var els = [
".house-list",
".center-v .title",
".price",
".surrounding",
".feature-list",
".high-light .high-light-item"
];
'.house-list',
'.center-v .title',
'.price',
'.surrounding',
'.feature-list',
'.high-light .high-light-item'
]
anime({
targets: "#cd-image-1 circle",
targets: '#cd-image-1 circle',
duration: 0,
r: [0, 2920]
});
})
anime({
targets: this.$refs["house-list"],
targets: this.$refs['house-list'],
translateX: -1000,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["title"],
targets: this.$refs['title'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["price"],
targets: this.$refs['price'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["surrounding"],
targets: this.$refs['surrounding'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["feature-list"],
targets: this.$refs['feature-list'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: ".high-light",
targets: '.high-light',
translateY: 1000,
opacity: 0,
duration: 0
});
})
// setTimeout(() => {
// this.enter();
// }, 1000);
......@@ -259,29 +259,29 @@ export default {
// translateX: -1000
// })
},
enterAfter() {
enterAfter () {
this.timer = setTimeout(() => {
Scene.leaveBefore();
clearTimeout(this.timer);
}, 10000);
Scene.leaveBefore()
clearTimeout(this.timer)
}, 10000)
}
},
mounted() {
mounted () {
if (!this.isEditMode) {
this.enterBefore();
this.enterBefore()
}
},
data() {
data () {
return {
currentIndex: "",
date: "2019.07.04",
currentIndex: "",
currentIndex: '',
date: '2019.07.04',
currentIndex: '',
dataList: [
"http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png"
'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png'
],
swiperOption: {
effect: "fade",
effect: 'fade',
speed: 1000,
loop: true,
autoplay: {
......@@ -289,9 +289,9 @@ export default {
}
},
isLeave: false
};
}
};
}
}
</script>
<style lang="scss" scoped>
......
src/templates/retail/defaultData/welcome.js
......@@ -14,7 +14,7 @@ export default {
welcomeWordEn: {
value: 'WELCOME'
},
imgurl:{
value: require("../../../assets/code.png")
imgurl: {
value: require('../../../assets/code.png')
}
}
src/templates/retail/index.vue
......@@ -30,17 +30,17 @@
</template>
<script>
import mixin from "./mixin";
import "swiper/dist/css/swiper.css";
import { getQuery } from "@/framework/utils";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { getFilmDetail } from "@/framework/templateApi/index";
import requireAllPage from "./pages/index.js";
import Message from "@/framework/tempalteMessage";
import Scene from "@/framework/utils/sence";
import { setTimeout, clearTimeout } from "timers";
import mixin from './mixin'
import 'swiper/dist/css/swiper.css'
import { getQuery } from '@/framework/utils'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { getFilmDetail } from '@/framework/templateApi/index'
import requireAllPage from './pages/index.js'
import Message from '@/framework/tempalteMessage'
import Scene from '@/framework/utils/sence'
import { setTimeout, clearTimeout } from 'timers'
export default {
name: "page",
name: 'page',
mixins: [mixin],
components: {
swiper,
......@@ -48,53 +48,53 @@ export default {
...requireAllPage
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
swiper () {
return this.$refs.mySwiper.swiper
}
},
data() {
data () {
return {
swiperOption: {
// some swiper options/callbacks
// 所有的参数同 swiper 官方 api 参数
// ...
}
};
}
},
methods: {
message(data) {
Message.send(data, "*");
message (data) {
Message.send(data, '*')
},
loaded(index) {
this.$refs["child" + this.sliderActiveIndex][0].enter();
loaded (index) {
this.$refs['child' + this.sliderActiveIndex][0].enter()
},
edit(index) {
if (getQuery("isEdit")) {
this.currentIndex = index;
var item = this.list[index];
edit (index) {
if (getQuery('isEdit')) {
this.currentIndex = index
var item = this.list[index]
this.message(
{
type: "edit",
type: 'edit',
item,
index
},
"*"
);
'*'
)
}
},
getList() {
getList () {
this.message(
{
type: "getList",
type: 'getList',
pages: this.pages
},
"*"
);
'*'
)
}
},
beforeDestroy() {},
mounted() {
/*Scene.EventBus.on("leaveBefore", e => {
beforeDestroy () {},
mounted () {
/* Scene.EventBus.on("leaveBefore", e => {
console.log("leaveBefore");
this.$refs["child" + this.sliderActiveIndex][0].leave().then(() => {
console.log("leaveBefore then");
......@@ -108,96 +108,96 @@ export default {
});
// this.$refs['child'][0].enter().then(() => {
// })*/
// }) */
},
created() {
var vm = this;
created () {
var vm = this
Message.init(e => {
var isObj = typeof e.data === "object";
if (isObj && e.data["type"] == "setData") {
vm.setEditData(e.data);
var isObj = typeof e.data === 'object'
if (isObj && e.data['type'] == 'setData') {
vm.setEditData(e.data)
}
if (isObj && e.data["type"] == "cancelEdit") {
vm.cancelEditAction();
if (isObj && e.data['type'] == 'cancelEdit') {
vm.cancelEditAction()
}
if (isObj && e.data["type"] == "edit") {
vm.currentIndex = e.data.index;
if (isObj && e.data['type'] == 'edit') {
vm.currentIndex = e.data.index
}
if (isObj && e.data["type"] == "setList") {
if (isObj && e.data['type'] == 'setList') {
// vm.list = JSON.parse(JSON.stringify(e.data.list))
this.setAllData(e.data);
this.setAllData(e.data)
}
if (isObj && e.data["type"] == "getList") {
vm.getAllData();
if (isObj && e.data['type'] == 'getList') {
vm.getAllData()
}
if (isObj && e.data["type"] == "goPage") {
vm.swiper.slideTo(parseInt(e.data.index), 500, false);
if (isObj && e.data['type'] == 'goPage') {
vm.swiper.slideTo(parseInt(e.data.index), 500, false)
}
});
})
this.swiperOption = {
effect: "fade",
effect: 'fade',
observer: true,
/* 将observe应用于Swiper的父元素。
当Swiper的父元素变化时，例如window.resize，Swiper更新。 */
observerParents: true,
allowTouchMove: !getQuery("isEdit"),
/*slidesPerView: 1,
allowTouchMove: !getQuery('isEdit'),
/* slidesPerView: 1,
autoplay: !getQuery("isEdit")
? {
delay: 10000
}
: false,*/
: false, */
loop: false,
on: {
init() {
init () {
if (!vm.isEditMode) {
// swiperAnimateCache(this); // 隐藏动画元素
// swiperAnimate(this); // 初始化完成开始动画
}
},
slideChange() {
vm.sliderActiveIndex = this.realIndex;
slideChange () {
vm.sliderActiveIndex = this.realIndex
if (vm.isEditMode) {
// $(".ani").css("visibility", "");
}
},
slideChangeTransitionEnd() {
slideChangeTransitionEnd () {
if (!vm.isEditMode) {
// swiperAnimate(this);
}
}
}
};
if (getQuery("isEdit")) {
this.isEditMode = true;
} else {
this.isEditMode = false;
}
if (getQuery("filmId") && !this.isEditMode) {
getFilmDetail(getQuery("filmId")).then(result => {
console.log(result);
vm.pages = JSON.parse(result.data.filmData).pageList;
vm.filmId = result.filmId;
});
if (getQuery('isEdit')) {
this.isEditMode = true
} else {
if (getQuery("isPreview")) {
this.isEditMode = false
}
if (getQuery('filmId') && !this.isEditMode) {
getFilmDetail(getQuery('filmId')).then(result => {
console.log(result)
vm.pages = JSON.parse(result.data.filmData).pageList
vm.filmId = result.filmId
})
} else {
if (getQuery('isPreview')) {
} else {
// vm.getDefaulted();
}
}
},
data() {
data () {
return {
date: "",
img: "",
date: '',
img: '',
currentIndex: "",
currentIndex: '',
isEditMode: true,
cancelEdit: false,
sliderActiveIndex: 0
};
}
};
}
}
</script>
<style lang="scss" scoped>
.glob-container {
......
src/templates/retail/pages/retail1.vue
......@@ -12,22 +12,22 @@
</template>
<script>
import methods from "../methods";
import anime from "animejs/lib/anime.es.js";
import methods from '../methods'
import anime from 'animejs/lib/anime.es.js'
import Scene from '@/framework/utils/sence'
export default {
name: "welcome",
props: ["schemaData", "page", "isEditMode", "cancelEdit"],
name: 'welcome',
props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
mixins: [methods],
components: {
},
created() {
created () {
console.log(this.schemaData)
},
methods: {
leave() {
console.log("leave");
leave () {
console.log('leave')
// anime({
// targets: "#cd-image-1 circle",
// duration: 3000,
......@@ -36,142 +36,142 @@ export default {
// });
var PromiseAll = [
anime({
targets: "#cd-image-1 circle",
targets: '#cd-image-1 circle',
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
easing: 'easeOutQuad'
}).finished,
anime({
targets: "#mask-img-1 circle",
targets: '#mask-img-1 circle',
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
easing: 'easeOutQuad'
}).finished
];
]
var enPromise = Promise.all(PromiseAll)
return enPromise;
return enPromise
},
enter() {
enter () {
console.log('enter anime')
var PromiseAll = [
anime({
targets: this.$refs["mlxg"],
targets: this.$refs['mlxg'],
translateX: 0,
opacity: 1,
duration: 2000
}).finished,
anime({
targets: this.$refs["title"],
targets: this.$refs['title'],
translateX: 0,
opacity: 1,
delay: 1000,
duration: 500,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: this.$refs["decorate"],
targets: this.$refs['decorate'],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 1200,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: this.$refs["surrounding"],
targets: this.$refs['surrounding'],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 1800,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: this.$refs["feature-list"],
targets: this.$refs['feature-list'],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 2100,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: ".high-light",
targets: '.high-light',
translateX: 0,
opacity: 1,
duration: 1000,
// delay: anime.stagger(1000),
delay: 1500,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished
];
]
Promise.all(PromiseAll).then(() => {
this.enterAfter()
})
return Promise.all(PromiseAll);
return Promise.all(PromiseAll)
},
enterBefore() {
console.log('enterBefore');
enterBefore () {
console.log('enterBefore')
anime({
targets: "#cd-image-1 circle",
targets: '#cd-image-1 circle',
duration: 0,
r: [0, 2920]
});
})
anime({
targets: this.$refs["mlxg"],
targets: this.$refs['mlxg'],
translateX: -1500,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["decorate"],
targets: this.$refs['decorate'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["price"],
targets: this.$refs['price'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["surrounding"],
targets: this.$refs['surrounding'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["feature-list"],
targets: this.$refs['feature-list'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: ".high-light",
targets: '.high-light',
translateX: 1000,
opacity: 0,
duration: 0
});
})
// setTimeout(() => {
// this.enter();
// }, 1000);
},
enterAfter() {
enterAfter () {
this.timer = setTimeout(() => {
Scene.leaveBefore();
clearTimeout(this.timer);
}, 10000);
Scene.leaveBefore()
clearTimeout(this.timer)
}, 10000)
}
},
mounted() {
mounted () {
console.log('mounted')
this.enterBefore()
},
data() {
data () {
return {
currentIndex: "",
};
currentIndex: ''
}
}
};
}
</script>
<style>
.container{background: #FCD333;width: 1080px;height: 1920px;}
......
src/templates/retail/pages/retail2.vue
......@@ -11,21 +11,21 @@
</template>
<script>
import methods from "../methods";
import anime from "animejs/lib/anime.es.js";
import methods from '../methods'
import anime from 'animejs/lib/anime.es.js'
import Scene from '@/framework/utils/sence'
export default {
name: "welcome",
props: ["schemaData", "page", "isEditMode", "cancelEdit"],
name: 'welcome',
props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
mixins: [methods],
components: {
},
created() {
created () {
},
methods: {
leave() {
console.log("leave");
leave () {
console.log('leave')
// anime({
// targets: "#cd-image-1 circle",
// duration: 3000,
......@@ -34,142 +34,142 @@ export default {
// });
var PromiseAll = [
anime({
targets: "#cd-image-1 circle",
targets: '#cd-image-1 circle',
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
easing: 'easeOutQuad'
}).finished,
anime({
targets: "#mask-img-1 circle",
targets: '#mask-img-1 circle',
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
easing: 'easeOutQuad'
}).finished
];
]
var enPromise = Promise.all(PromiseAll)
return enPromise;
return enPromise
},
enter() {
console.log('enter anime');
enter () {
console.log('enter anime')
var PromiseAll = [
anime({
targets: this.$refs["newsummer"],
targets: this.$refs['newsummer'],
translateX: 0,
opacity: 1,
duration: 2000
}).finished,
anime({
targets: this.$refs["tableitem"],
targets: this.$refs['tableitem'],
translateY: 0,
opacity: 1,
delay: 500,
duration: 2000,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: this.$refs["decorate"],
targets: this.$refs['decorate'],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 1200,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: this.$refs["surrounding"],
targets: this.$refs['surrounding'],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 1800,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: this.$refs["feature-list"],
targets: this.$refs['feature-list'],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 2100,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished,
anime({
targets: ".high-light",
targets: '.high-light',
translateX: 0,
opacity: 1,
duration: 1000,
// delay: anime.stagger(1000),
delay: 1500,
easing: "easeInOutQuad"
easing: 'easeInOutQuad'
}).finished
];
]
Promise.all(PromiseAll).then(() => {
this.enterAfter()
})
return Promise.all(PromiseAll);
return Promise.all(PromiseAll)
},
enterBefore() {
console.log('enterBefore');
enterBefore () {
console.log('enterBefore')
anime({
targets: "#cd-image-1 circle",
targets: '#cd-image-1 circle',
duration: 0,
r: [0, 2920]
});
})
anime({
targets: this.$refs["newsummer"],
targets: this.$refs['newsummer'],
translateX: -1500,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["tableitem"],
targets: this.$refs['tableitem'],
translateY: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["price"],
targets: this.$refs['price'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["surrounding"],
targets: this.$refs['surrounding'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: this.$refs["feature-list"],
targets: this.$refs['feature-list'],
translateX: 2000,
opacity: 0,
duration: 0
});
})
anime({
targets: ".high-light",
targets: '.high-light',
translateX: 1000,
opacity: 0,
duration: 0
});
})
// setTimeout(() => {
// this.enter();
// }, 1000);
},
enterAfter() {
enterAfter () {
this.timer = setTimeout(() => {
Scene.leaveBefore();
clearTimeout(this.timer);
}, 10000);
Scene.leaveBefore()
clearTimeout(this.timer)
}, 10000)
}
},
mounted() {
mounted () {
console.log('mounted')
this.enterBefore()
},
data() {
data () {
return {
currentIndex: "",
};
currentIndex: ''
}
}
};
}
</script>
<style>
.container2{background: url(../../../assets/background.png) no-repeat;background-size: 100% 100%;width: 100%;height: 100%;}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment