Merge branch 'master' of http://www.jiyou-tech.com:3000/chenming/561_jiexin

public/index.html

@@ -29,7 +29,7 @@
 		(function() {
 		  var hm = document.createElement("script");
 		  hm.src = "https://hm.baidu.com/hm.js?cd4c9c7c4b623d553db69cccba0dd6c5";
-		  var s = document.getElementsByTagName("script")[0]; 
+		  var s = document.getElementsByTagName("script")[0];
 		  s.parentNode.insertBefore(hm, s);
 		})();
 		</script>
@@ -45,6 +45,10 @@
 			<source src="http://static.jiyou-tech.com/2020/561/audio/bg.mp3" type="audio/mpeg">
 		</audio>
 		<script>
+			document.body.addEventListener('touchmove', function (e) {
+				e.preventDefault();
+			}, {passive: false});
+
 			var bgAudio=document.getElementById('bgAudio');
 			bgAudio.loop=true;
 			bgLoop=false;

src/App.vue

@@ -1,11 +1,16 @@
 <template>
-	<div id="app">
-		<router-view />
+	<div id="app"  @touchstart="startEvent" @touchend="endEvent">
+		<transition name="fade">
+			<router-view />
+		</transition>
 		<btn-music :bgLoop="bgLoop"></btn-music>
 		<!-- <sidebar style="position: absolute;top: 20vw;left: 10vw;"></sidebar> -->
 	</div>
 </template>
 <script>
+	let allPage = [];//所有可滑动的页面
+	let stopSliding = [];//仅可向上或向下滑动的页面
+	let siteRecord = 0;
 	import BtnMusic from './components/music.vue'
 	// import Sidebar from './components/sidebar.vue'
 	export default {
@@ -22,7 +27,7 @@
 		mounted() {
 			var that = this;
 			this.bgAudio=window['bgAudio'];
-			this.bgLoop=window['bgLoop']
+			this.bgLoop=window['bgLoop'];
 			if(!this.bgLoop){
 				this.bgAudio.removeEventListener('play',window['openLoop']);
 			}
@@ -32,6 +37,7 @@
 			this.bgAudio.addEventListener('pause', function() {
 				that.bgLoop = false;
 			})
+			this.calculateJumpRules();
 		},
 		methods: {
 			playMusic() {
@@ -40,6 +46,63 @@
 				} else { //播放
 					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("下一页");
+						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++){
+					for(let j=0;j<pagePath[i].length;j++){
+						for(let key in pagePath[i][j]){
+							if(pagePath[i][j][key]){
+								allPage.push(pagePath[i][j][key]);
+							}
+						}
+						stopSliding.push({page:pagePath[i][j]['店外'],direction:"next"});
+						stopSliding.push({page:pagePath[i][j]['浏览全部物料'],direction:"prev"});
+					}
+				}
 			}
 		}
 	}
@@ -94,4 +157,10 @@
 		top: 50%;
 		transform: translate(-50%, -50%);
 	}
+	.fade-enter-active, .fade-leave-active {
+		transition: opacity .5s;
+	}
+	.fade-enter, .fade-leave-to{
+		opacity: 0;
+	}
 </style>

src/plugins/slide.js

@@ -0,0 +1,42 @@
+var touchstartY;
+var getData = [];
+var pageArr = [
+  [
+    [],
+    []
+  ],//手机门店
+  [
+    [],
+    []
+  ],//家电门店
+  [
+    ["criterion-shop","criterion-showarea","criterion-money","compliance","criterion-allDetails"],
+    []
+  ],//二轮车门店
+]
+export function data(e){
+  console.log(e)
+  getData = e;
+}
+export function touchstart(e){
+    // console.log(e)
+    touchstartY = e.changedTouches[0].clientY;
+  console.log(touchstartY)
+}
+export function touchend(e){
+  // console.log(pageArr[getData[0]][getData[1]][getData[2]])
+  if(e.changedTouches[0].clientY-touchstartY>=50){
+    console.log("下滑");
+    if(getData[2]>0){
+      console.log("上一页")
+      window.location.href = "http://localhost:8080/#/"+pageArr[getData[0]][getData[1]][getData[2]-1]
+    }
+  }else if(touchstartY-e.changedTouches[0].clientY>=50){
+    console.log("上滑");
+    var len = pageArr[getData[0]][getData[1]].length-1;
+    if(getData[2]<len){
+      console.log("下一页")
+      window.location.href = "http://localhost:8080/#/"+pageArr[getData[0]][getData[1]][getData[2]+1]
+    }
+  }
+}

src/router/index.js

@@ -141,10 +141,16 @@ Vue.use(VueRouter)
           component: () => import('../views/twoCart/high-shop.vue')
       },//二轮车-高产-店外
       {
-          path: '/compliance',
-          name: 'compliance',
-          component: () => import('../views/twoCart/compliance.vue')
-      },//合规
+          path: '/criterion-compliance',
+          name: 'criterion-compliance',
+          component: () => import('../views/twoCart/criterion-compliance.vue')
+      },//二轮车-标准-合规
+
+      {
+          path: '/high-compliance',
+          name: 'high-compliance',
+          component: () => import('../views/twoCart/high-compliance.vue')
+      },//二轮车-高产-合规
       {
           path: '/criterion-allDetails',
           name: 'criterion-allDetails',
@@ -155,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,16 +8,16 @@ 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','合规物料':'/compliance','浏览全部物料':'/criterion-allDetails'},//标准
-				{'店外':'/high-shop','店内':'','柜台':'','展示区':'/high-showarea','收银台':'/high-money','合规物料':'/compliance','浏览全部物料':'/high-allDetails'},//高产
+				{'店外':'/criterion-shop','店内':'','柜台':'','展示区':'/criterion-showarea','收银台':'/criterion-money','合规物料':'/criterion-compliance','浏览全部物料':'/criterion-allDetails'},//标准
+				{'店外':'/high-shop','店内':'','柜台':'','展示区':'/high-showarea','收银台':'/high-money','合规物料':'/high-compliance','浏览全部物料':'/high-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_high_outside.vue

@@ -62,7 +62,7 @@
         overflow: hidden;
     }
     .contentImg{
-        width: 8.15rem;
+        width: 7.5rem;
         height: 11.63rem;
     }
     .pageRedDot{

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_high_outside.vue

@@ -62,7 +62,7 @@
         overflow: hidden;
     }
     .contentImg{
-        width: 8.15rem;
+        width: 7.5rem;
         height: 11.63rem;
     }
     .pageRedDot{

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>

src/views/twoCart/compliance.vue

@@ -4,8 +4,6 @@
         <img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt="">
         <div class="content">
             <img class="imgWord1" src="../../assets/vehicle/complianceWord1.png" alt="">
-<!--            <img class="imgWord2" src="../../assets/vehicle/imgWord2_2_1.png" alt="">-->
-<!--            <img class="imgWord3" src="../../assets/vehicle/imgWord2_3_1.png" alt="">-->
             <div class="contPic">
                 <img class="bigImg" src="../../assets/vehicle/complianceContImg.png" alt="">
                 <img @click="showMaskfn()" class="imgLeft" src="../../assets/vehicle/complianceClick1.png" alt="">
@@ -15,6 +13,7 @@
             </div>
             <img class="imgWord4" src="../../assets/vehicle/complianceWord2.png" alt="">
         </div>
+
         <!-- 弹框 -->
         <div class="maskAll" v-if="showMask">
             <img class="mask1_1" src="../../assets/vehicle/maskCompliance.jpg" alt="">

src/views/twoCart/criterion-allDetails.vue

@@ -14,6 +14,15 @@
         return{
 
         }
+      },
+      methods:{
+        scrollFn(){
+          var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+          // console.log(scrollTop)
+          if(scrollTop===0 || scrollTop===document.body.clientHeight){
+            this.$refs.contentAll.addEventListener("touchend",touchend)
+          }
+        }
       }
     }
 </script>

src/views/twoCart/criterion-compliance.vue

@@ -0,0 +1,10 @@
+<template>
+    <compliance></compliance>
+</template>
+<script>
+    import compliance from "./compliance"
+      export default {
+        name:"criterionCompliance",
+        components:{compliance}
+      }
+</script>

src/views/twoCart/criterion-money.vue

@@ -1,20 +1,23 @@
 <template>
 	<div class="all">
 		<!-- <img class="showBg" src="../../assets/vehicle/showBg.jpg" alt=""> -->
-		<img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt="">
-		<div class="content">
-			<img class="imgWord1" src="../../assets/vehicle/imgWord1.png" alt="">
-			<img class="imgWord2" src="../../assets/vehicle/imgWord2.png" alt="">
-			<img class="imgWord3" src="../../assets/vehicle/imgWord3.png" alt="">
-			<div class="contPic">
-				<img class="bigImg" src="../../assets/vehicle/contImg1_1.png" alt="">
-				<img @click="showMaskfn(1)" class="imgLeft" src="../../assets/vehicle/click1.png" alt="">
-				<img @click="showMaskfn(2)" class="imgRight" src="../../assets/vehicle/click2.png" alt="">
-				<img class="click1" src="../../assets/pageRedDot.png" alt="">
-				<img class="click2" src="../../assets/pageRedDot.png" alt="">
+<!--		<div ref="contentAll" style="width: 100%;height:100%">-->
+			<img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt="">
+			<div class="content">
+				<img class="imgWord1" src="../../assets/vehicle/imgWord1.png" alt="">
+				<img class="imgWord2" src="../../assets/vehicle/imgWord2.png" alt="">
+				<img class="imgWord3" src="../../assets/vehicle/imgWord3.png" alt="">
+				<div class="contPic">
+					<img class="bigImg" src="../../assets/vehicle/contImg1_1.png" alt="">
+					<img @click="showMaskfn(1)" class="imgLeft" src="../../assets/vehicle/click1.png" alt="">
+					<img @click="showMaskfn(2)" class="imgRight" src="../../assets/vehicle/click2.png" alt="">
+					<img class="click1" src="../../assets/pageRedDot.png" alt="">
+					<img class="click2" src="../../assets/pageRedDot.png" alt="">
+				</div>
+				<img class="imgWord4" src="../../assets/vehicle/imgWord4.png" alt="">
 			</div>
-			<img class="imgWord4" src="../../assets/vehicle/imgWord4.png" alt="">
-		</div>
+<!--		</div>-->
+
 		<!-- 弹框 -->
 		<div class="maskAll" v-if="showMask">
 			<img v-if="showMaskNum==1" class="mask1_1" src="../../assets/vehicle/mask1_1.jpg" alt="">
@@ -28,6 +31,7 @@
 
 <script>
 	import Sidebar from '../../components/sidebar'
+	// import {data,touchstart,touchend} from '../../plugins/slide'
 	export default{
 		name:"criterionMoney",
 		components:{Sidebar},
@@ -37,6 +41,11 @@
 				showMaskNum:null,
 			}
 		},
+		// mounted(){
+		// 	data([2,0,2]);
+		// 	this.$refs.contentAll.addEventListener("touchstart",touchstart)
+		// 	this.$refs.contentAll.addEventListener("touchend",touchend)
+		// },
 		methods:{
 			showMaskfn(e){
 				this.showMask = true;
@@ -45,7 +54,7 @@
 				}else{
 					this.showMaskNum = 2;
 				}
-			}
+			},
 		}
 	}
 </script>

src/views/twoCart/criterion-shop.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="all" ref="contentAll">
+	<div class="all">
 		<!-- <img class="showBg" src="../../assets/vehicle/showBg.jpg" alt=""> -->
 		<img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt="">
 		<div class="content">
@@ -17,6 +17,7 @@
 			</div>
 			<img class="imgWord4" src="../../assets/vehicle/imgWord1_3_3.png" alt="">
 		</div>
+
 		<!-- 弹框 -->
 		<div class="maskAll" v-if="showMask">
 			<img v-if="showMaskNum==1" class="mask1_1" src="../../assets/vehicle/mask1_5.jpg" alt="">
@@ -40,11 +41,6 @@
 				touchstartY:0,
 			}
 		},
-
-		// mounted(){
-		// 	window.addEventListener("touchstart",this.touchstart)
-		// 	window.addEventListener("touchend",this.touchend)
-		// },
 		methods:{
 			showMaskfn(e){
 				this.showMask = true;
@@ -56,16 +52,17 @@
 					this.showMaskNum = 3;
 				}
 			},
-			touchstart(e){
-				this.touchstartY = e.changedTouches[0].clientY;
-			},
-			touchend(e){
-				if(e.changedTouches[0].clientY-this.touchstartY>=50){
-					console.log("下滑")
-				}else if(this.touchstartY-e.changedTouches[0].clientY>=50){
-					console.log("上滑")
-				}
-			},
+			// touchstart(e){
+			// 	this.touchstartY = e.changedTouches[0].clientY;
+			// },
+			// touchend(e){
+			// 	if(e.changedTouches[0].clientY-this.touchstartY>=50){
+			// 		console.log("下滑")
+			// 	}else if(this.touchstartY-e.changedTouches[0].clientY>=50){
+			// 		console.log("上滑")
+			// 		this.$router.push("./criterion-showarea")
+			// 	}
+			// },
 		}
 	}
 </script>

src/views/twoCart/criterion-showarea.vue

@@ -15,6 +15,7 @@
 			</div>
 			<img class="imgWord4" src="../../assets/vehicle/imgWord1_2_3.png" alt="">
 		</div>
+
 		<!-- 弹框 -->
 		<div class="maskAll" v-if="showMask">
 			<img v-if="showMaskNum==1" class="mask1_1" src="../../assets/vehicle/mask1_3.jpg" alt="">
@@ -44,7 +45,8 @@
 				}else{
 					this.showMaskNum = 2;
 				}
-			}
+			},
+
 		}
 	}
 </script>

src/views/twoCart/high-compliance.vue

@@ -0,0 +1,10 @@
+<template>
+    <compliance></compliance>
+</template>
+<script>
+  import compliance from "./compliance"
+  export default {
+    name:"highCompliance",
+    components:{compliance}
+  }
+</script>