增加滑动

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="app">
+	<div id="app"  @touchstart="startEvent" @touchend="endEvent">
 		<transition name="fade">
 			<router-view />
 		</transition>
@@ -10,8 +10,6 @@
 <script>
 	let allPage = [];//所有可滑动的页面
 	let stopSliding = [];//仅可向上或向下滑动的页面
-	let startPage=[];
-	let endPage=[];
 	let siteRecord = 0;
 	import BtnMusic from './components/music.vue'
 	// import Sidebar from './components/sidebar.vue'
@@ -39,7 +37,7 @@
 			this.bgAudio.addEventListener('pause', function() {
 				that.bgLoop = false;
 			})
-			// this.calculateJumpRules();
+			this.calculateJumpRules();
 		},
 		methods: {
 			playMusic() {
@@ -49,53 +47,49 @@
 					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(){
 				let pagePath = this.$store.state.pagePath;
 				for(let i=0;i<pagePath.length;i++){
@@ -107,7 +101,6 @@
 						}
 						stopSliding.push({page:pagePath[i][j]['店外'],direction:"next"});
 						stopSliding.push({page:pagePath[i][j]['浏览全部物料'],direction:"prev"});
-						endPage.push({page:pagePath[i][j]['浏览全部物料'],direction:"prev"});
 					}
 				}
 			}

src/router/index.js

@@ -161,6 +161,26 @@ Vue.use(VueRouter)
           name: 'high-allDetails',
           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({

src/store/index.js

@@ -8,12 +8,12 @@ export default new Vuex.Store({
 		imgBaseUrl: '',
 		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'},//标准

src/views/appliances_high_compliance.vue

@@ -0,0 +1,25 @@
+<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>

src/views/appliances_standard_compliance.vue

@@ -0,0 +1,25 @@
+<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>

src/views/phone_high_compliance.vue

@@ -0,0 +1,25 @@
+<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>

src/views/phone_standard_compliance.vue

@@ -0,0 +1,25 @@
+<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>