chenming
/
561_jiexin
ウォッチ 1
スター 0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki アクティビティ
ソースを参照

合规

master
ljc 5年前
親
2ad0cf971c
コミット
08a317aeb1
11個のファイルの変更、175行の追加、84行の削除
分割表示 差分情報を表示
  1. +52
    -45
      src/App.vue
  2. +42
    -0
      src/plugins/slide.js
  3. +10
    -4
      src/router/index.js
  4. +2
    -2
      src/store/index.js
  5. +1
    -2
      src/views/twoCart/compliance.vue
  6. +9
    -0
      src/views/twoCart/criterion-allDetails.vue
  7. +10
    -0
      src/views/twoCart/criterion-compliance.vue
  8. +23
    -14
      src/views/twoCart/criterion-money.vue
  9. +13
    -16
      src/views/twoCart/criterion-shop.vue
  10. +3
    -1
      src/views/twoCart/criterion-showarea.vue
  11. +10
    -0
      src/views/twoCart/high-compliance.vue

+ 52
- 45
src/App.vue ファイルの表示

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

+ 42
- 0
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]
}
}
}

+ 10
- 4
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',

+ 2
- 2
src/store/index.js ファイルの表示

@@ -16,8 +16,8 @@ export default new Vuex.Store({
{'店外':'/appliances_high_outside','店内':'','柜台':'','展示区':'/appliances_high_exhibition','收银台':'/appliances_high_pay','合规物料':'/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'},//高产
], //二轮车
]
},

+ 1
- 2
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="">

+ 9
- 0
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>

+ 10
- 0
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>

+ 23
- 14
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>

+ 13
- 16
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>

+ 3
- 1
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>

+ 10
- 0
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>

書き込み プレビュー
読み込み中…
キャンセル
保存