| <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> |