<template> | <template> | ||||
<div id="app"> | |||||
<div id="app" @touchstart="startEvent" @touchend="endEvent"> | |||||
<transition name="fade"> | <transition name="fade"> | ||||
<router-view /> | <router-view /> | ||||
</transition> | </transition> | ||||
<script> | <script> | ||||
let allPage = [];//所有可滑动的页面 | let allPage = [];//所有可滑动的页面 | ||||
let stopSliding = [];//仅可向上或向下滑动的页面 | let stopSliding = [];//仅可向上或向下滑动的页面 | ||||
let startPage=[]; | |||||
let endPage=[]; | |||||
let siteRecord = 0; | let siteRecord = 0; | ||||
import BtnMusic from './components/music.vue' | import BtnMusic from './components/music.vue' | ||||
// import Sidebar from './components/sidebar.vue' | // import Sidebar from './components/sidebar.vue' | ||||
this.bgAudio.addEventListener('pause', function() { | this.bgAudio.addEventListener('pause', function() { | ||||
that.bgLoop = false; | that.bgLoop = false; | ||||
}) | }) | ||||
// this.calculateJumpRules(); | |||||
this.calculateJumpRules(); | |||||
}, | }, | ||||
methods: { | methods: { | ||||
playMusic() { | playMusic() { | ||||
this.bgAudio.play(); | this.bgAudio.play(); | ||||
} | } | ||||
}, | }, | ||||
// startEvent(e){ | |||||
// siteRecord=0; | |||||
// var _y= e.changedTouches[0].clientY; | |||||
// siteRecord=_y; | |||||
// var type = e.target.dataset.type; | |||||
// }, | |||||
// endEvent(e){//抬起事件 | |||||
// var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; | |||||
// let direction = "";//可滑动的方向 | |||||
// //获取当前页面路径 | |||||
// let path = this.$route.path; | |||||
// //判断是否在可滑动切换页面的列表中 | |||||
// if(allPage.indexOf(path)==-1 || scrollTop){ | |||||
// return; | |||||
// } | |||||
// //判断是否只可向一个方向滑动 | |||||
// for(let i=0;i<stopSliding.length;i++){ | |||||
// if(stopSliding[i]["page"]==path){ | |||||
// direction = stopSliding[i]['direction']; | |||||
// break; | |||||
// } | |||||
// } | |||||
// var _y= e.changedTouches[0].clientY; | |||||
// if(direction=="next"){ | |||||
// if(siteRecord-_y>=50){ | |||||
// console.log("只能换到下一页"); | |||||
// this.$router.replace(allPage[allPage.indexOf(path)+1]); | |||||
// } | |||||
// }else if(direction=="prev"){ | |||||
// if(siteRecord-_y<-50){ | |||||
// console.log("只能换到上一页"); | |||||
// this.$router.replace(allPage[allPage.indexOf(path)-1]); | |||||
// } | |||||
// }else{ | |||||
// if(siteRecord-_y>=50){ | |||||
// console.log("下一页"); | |||||
// console.log(allPage) | |||||
// console.log(path) | |||||
// console.log(allPage[allPage.indexOf(path)-1]) | |||||
// // return; | |||||
// this.$router.replace(allPage[allPage.indexOf(path)+1]); | |||||
// }else if(siteRecord-_y<-50){ | |||||
// console.log("上一页"); | |||||
// this.$router.replace(allPage[allPage.indexOf(path)-1]); | |||||
// } | |||||
// } | |||||
// }, | |||||
startEvent(e){ | |||||
siteRecord=0; | |||||
var _y= e.changedTouches[0].clientY; | |||||
siteRecord=_y; | |||||
var type = e.target.dataset.type; | |||||
}, | |||||
endEvent(e){//抬起事件 | |||||
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; | |||||
let direction = "";//可滑动的方向 | |||||
//获取当前页面路径 | |||||
let path = this.$route.path; | |||||
//判断是否在可滑动切换页面的列表中 | |||||
if(allPage.indexOf(path)==-1 || scrollTop){ | |||||
return; | |||||
} | |||||
//判断是否只可向一个方向滑动 | |||||
for(let i=0;i<stopSliding.length;i++){ | |||||
if(stopSliding[i]["page"]==path){ | |||||
direction = stopSliding[i]['direction']; | |||||
break; | |||||
} | |||||
} | |||||
var _y= e.changedTouches[0].clientY; | |||||
if(direction=="next"){ | |||||
if(siteRecord-_y>=50){ | |||||
console.log("只能换到下一页"); | |||||
this.$router.replace(allPage[allPage.indexOf(path)+1]); | |||||
} | |||||
}else if(direction=="prev"){ | |||||
if(siteRecord-_y<-50){ | |||||
console.log("只能换到上一页"); | |||||
this.$router.replace(allPage[allPage.indexOf(path)-1]); | |||||
} | |||||
}else{ | |||||
if(siteRecord-_y>=50){ | |||||
console.log("下一页"); | |||||
this.$router.replace(allPage[allPage.indexOf(path)+1]); | |||||
}else if(siteRecord-_y<-50){ | |||||
console.log("上一页"); | |||||
this.$router.replace(allPage[allPage.indexOf(path)-1]); | |||||
} | |||||
} | |||||
}, | |||||
calculateJumpRules(){ | calculateJumpRules(){ | ||||
let pagePath = this.$store.state.pagePath; | let pagePath = this.$store.state.pagePath; | ||||
for(let i=0;i<pagePath.length;i++){ | for(let i=0;i<pagePath.length;i++){ | ||||
} | } | ||||
stopSliding.push({page:pagePath[i][j]['店外'],direction:"next"}); | stopSliding.push({page:pagePath[i][j]['店外'],direction:"next"}); | ||||
stopSliding.push({page:pagePath[i][j]['浏览全部物料'],direction:"prev"}); | stopSliding.push({page:pagePath[i][j]['浏览全部物料'],direction:"prev"}); | ||||
endPage.push({page:pagePath[i][j]['浏览全部物料'],direction:"prev"}); | |||||
} | } | ||||
} | } | ||||
} | } |
name: 'high-allDetails', | name: 'high-allDetails', | ||||
component: () => import('../views/twoCart/high-allDetails.vue') | component: () => import('../views/twoCart/high-allDetails.vue') | ||||
},//二轮车-高产-全部物料 | },//二轮车-高产-全部物料 | ||||
{ | |||||
path: '/appliances_high_compliance', | |||||
name: 'appliances_high_compliance', | |||||
component: () => import('../views/appliances_high_compliance.vue') | |||||
},//家电-高产-合规物料 | |||||
{ | |||||
path: '/appliances_standard_compliance', | |||||
name: 'appliances_standard_compliance', | |||||
component: () => import('../views/appliances_standard_compliance.vue') | |||||
},//家电-标准-合规物料 | |||||
{ | |||||
path: '/phone_standard_compliance', | |||||
name: 'phone_standard_compliance', | |||||
component: () => import('../views/phone_standard_compliance.vue') | |||||
},//手机-标准-合规物料 | |||||
{ | |||||
path: '/phone_high_compliance', | |||||
name: 'phone_high_compliance', | |||||
component: () => import('../views/phone_high_compliance.vue') | |||||
},//手机-高产-合规物料 | |||||
] | ] | ||||
const router = new VueRouter({ | const router = new VueRouter({ |
imgBaseUrl: '', | imgBaseUrl: '', | ||||
pagePath: [ | pagePath: [ | ||||
[ | [ | ||||
{'店外':'/phone_standard_outside','店内':'/phone_standard_within','柜台':'/phone_standard_counter','展示区':'','收银台':'/phone_standard_pay','合规物料':'/compliance','浏览全部物料':'/allMaterials_phone_standard'},//标准 | |||||
{'店外':'/phone_high_outside','店内':'/phone_high_within','柜台':'/phone_high_counter','展示区':'','收银台':'/phone_high_pay','合规物料':'/compliance','浏览全部物料':'/allMaterials_phone_high'},//高产 | |||||
{'店外':'/phone_standard_outside','店内':'/phone_standard_within','柜台':'/phone_standard_counter','展示区':'','收银台':'/phone_standard_pay','合规物料':'/phone_standard_compliance','浏览全部物料':'/allMaterials_phone_standard'},//标准 | |||||
{'店外':'/phone_high_outside','店内':'/phone_high_within','柜台':'/phone_high_counter','展示区':'','收银台':'/phone_high_pay','合规物料':'/phone_high_compliance','浏览全部物料':'/allMaterials_phone_high'},//高产 | |||||
], //手机店 | ], //手机店 | ||||
[ | [ | ||||
{'店外':'/appliances_standard_outside','店内':'','柜台':'','展示区':'/appliances_standard_exhibition','收银台':'/appliances_standard_pay','合规物料':'/compliance','浏览全部物料':'/allMaterials_appliances_standard'},//标准 | |||||
{'店外':'/appliances_high_outside','店内':'','柜台':'','展示区':'/appliances_high_exhibition','收银台':'/appliances_high_pay','合规物料':'/compliance','浏览全部物料':'/allMaterials_appliances_high'},//高产 | |||||
{'店外':'/appliances_standard_outside','店内':'','柜台':'','展示区':'/appliances_standard_exhibition','收银台':'/appliances_standard_pay','合规物料':'/appliances_standard_compliance','浏览全部物料':'/allMaterials_appliances_standard'},//标准 | |||||
{'店外':'/appliances_high_outside','店内':'','柜台':'','展示区':'/appliances_high_exhibition','收银台':'/appliances_high_pay','合规物料':'/appliances_high_compliance','浏览全部物料':'/allMaterials_appliances_high'},//高产 | |||||
], //家电 | ], //家电 | ||||
[ | [ | ||||
{'店外':'/criterion-shop','店内':'','柜台':'','展示区':'/criterion-showarea','收银台':'/criterion-money','合规物料':'/criterion-compliance','浏览全部物料':'/criterion-allDetails'},//标准 | {'店外':'/criterion-shop','店内':'','柜台':'','展示区':'/criterion-showarea','收银台':'/criterion-money','合规物料':'/criterion-compliance','浏览全部物料':'/criterion-allDetails'},//标准 |
<template> | |||||
<compliance></compliance> | |||||
</template> | |||||
<style scoped> | |||||
</style> | |||||
<script> | |||||
import compliance from './twoCart/compliance' | |||||
export default { | |||||
name: 'appliances_high_compliance', | |||||
props: [], | |||||
components: { | |||||
compliance | |||||
}, | |||||
data() { | |||||
return {} | |||||
}, | |||||
created() { | |||||
}, | |||||
mounted() { | |||||
} | |||||
} | |||||
</script> |
<template> | |||||
<compliance></compliance> | |||||
</template> | |||||
<style scoped> | |||||
</style> | |||||
<script> | |||||
import compliance from './twoCart/compliance' | |||||
export default { | |||||
name: 'appliances_standard_compliance', | |||||
props: [], | |||||
components: { | |||||
compliance | |||||
}, | |||||
data() { | |||||
return {} | |||||
}, | |||||
created() { | |||||
}, | |||||
mounted() { | |||||
} | |||||
} | |||||
</script> |
<template> | |||||
<compliance></compliance> | |||||
</template> | |||||
<style scoped> | |||||
</style> | |||||
<script> | |||||
import compliance from './twoCart/compliance' | |||||
export default { | |||||
name: 'phone_high_compliance', | |||||
props: [], | |||||
components: { | |||||
compliance | |||||
}, | |||||
data() { | |||||
return {} | |||||
}, | |||||
created() { | |||||
}, | |||||
mounted() { | |||||
} | |||||
} | |||||
</script> |
<template> | |||||
<compliance></compliance> | |||||
</template> | |||||
<style scoped> | |||||
</style> | |||||
<script> | |||||
import compliance from './twoCart/compliance' | |||||
export default { | |||||
name: 'phone_standard_compliance', | |||||
props: [], | |||||
components: { | |||||
compliance | |||||
}, | |||||
data() { | |||||
return {} | |||||
}, | |||||
created() { | |||||
}, | |||||
mounted() { | |||||
} | |||||
} | |||||
</script> |