Wheba 5 years ago
parent
commit
b36e4eaa3a
20 changed files with 326 additions and 49 deletions
  1. +5
    -1
      public/index.html
  2. +72
    -3
      src/App.vue
  3. BIN
      src/assets/appliances/high/outside.png
  4. BIN
      src/assets/phone/high/outside.png
  5. +42
    -0
      src/plugins/slide.js
  6. +30
    -4
      src/router/index.js
  7. +6
    -6
      src/store/index.js
  8. +25
    -0
      src/views/appliances_high_compliance.vue
  9. +1
    -1
      src/views/appliances_high_outside.vue
  10. +25
    -0
      src/views/appliances_standard_compliance.vue
  11. +25
    -0
      src/views/phone_high_compliance.vue
  12. +1
    -1
      src/views/phone_high_outside.vue
  13. +25
    -0
      src/views/phone_standard_compliance.vue
  14. +1
    -2
      src/views/twoCart/compliance.vue
  15. +9
    -0
      src/views/twoCart/criterion-allDetails.vue
  16. +10
    -0
      src/views/twoCart/criterion-compliance.vue
  17. +23
    -14
      src/views/twoCart/criterion-money.vue
  18. +13
    -16
      src/views/twoCart/criterion-shop.vue
  19. +3
    -1
      src/views/twoCart/criterion-showarea.vue
  20. +10
    -0
      src/views/twoCart/high-compliance.vue

+ 5
- 1
public/index.html View File

(function() { (function() {
var hm = document.createElement("script"); var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?cd4c9c7c4b623d553db69cccba0dd6c5"; 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); s.parentNode.insertBefore(hm, s);
})(); })();
</script> </script>
<source src="http://static.jiyou-tech.com/2020/561/audio/bg.mp3" type="audio/mpeg"> <source src="http://static.jiyou-tech.com/2020/561/audio/bg.mp3" type="audio/mpeg">
</audio> </audio>
<script> <script>
document.body.addEventListener('touchmove', function (e) {
e.preventDefault();
}, {passive: false});

var bgAudio=document.getElementById('bgAudio'); var bgAudio=document.getElementById('bgAudio');
bgAudio.loop=true; bgAudio.loop=true;
bgLoop=false; bgLoop=false;

+ 72
- 3
src/App.vue View File

<template> <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> <btn-music :bgLoop="bgLoop"></btn-music>
<!-- <sidebar style="position: absolute;top: 20vw;left: 10vw;"></sidebar> --> <!-- <sidebar style="position: absolute;top: 20vw;left: 10vw;"></sidebar> -->
</div> </div>
</template> </template>
<script> <script>
let allPage = [];//所有可滑动的页面
let stopSliding = [];//仅可向上或向下滑动的页面
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'
export default { export default {
mounted() { mounted() {
var that = this; var that = this;
this.bgAudio=window['bgAudio']; this.bgAudio=window['bgAudio'];
this.bgLoop=window['bgLoop']
this.bgLoop=window['bgLoop'];
if(!this.bgLoop){ if(!this.bgLoop){
this.bgAudio.removeEventListener('play',window['openLoop']); this.bgAudio.removeEventListener('play',window['openLoop']);
} }
this.bgAudio.addEventListener('pause', function() { this.bgAudio.addEventListener('pause', function() {
that.bgLoop = false; that.bgLoop = false;
}) })
this.calculateJumpRules();
}, },
methods: { methods: {
playMusic() { playMusic() {
} else { //播放 } else { //播放
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("下一页");
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"});
}
}
} }
} }
} }
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to{
opacity: 0;
}
</style> </style>

BIN
src/assets/appliances/high/outside.png View File

Before After
Width: 815  |  Height: 1163  |  Size: 168KB Width: 750  |  Height: 1163  |  Size: 389KB

BIN
src/assets/phone/high/outside.png View File

Before After
Width: 815  |  Height: 1163  |  Size: 164KB Width: 750  |  Height: 1163  |  Size: 398KB

+ 42
- 0
src/plugins/slide.js View File

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

+ 30
- 4
src/router/index.js View File

component: () => import('../views/twoCart/high-shop.vue') 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', path: '/criterion-allDetails',
name: 'criterion-allDetails', name: 'criterion-allDetails',
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({

+ 6
- 6
src/store/index.js View File

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','合规物料':'/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'},//高产
], //二轮车 ], //二轮车
] ]
}, },

+ 25
- 0
src/views/appliances_high_compliance.vue View File

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

+ 1
- 1
src/views/appliances_high_outside.vue View File

overflow: hidden; overflow: hidden;
} }
.contentImg{ .contentImg{
width: 8.15rem;
width: 7.5rem;
height: 11.63rem; height: 11.63rem;
} }
.pageRedDot{ .pageRedDot{

+ 25
- 0
src/views/appliances_standard_compliance.vue View File

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

+ 25
- 0
src/views/phone_high_compliance.vue View File

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

+ 1
- 1
src/views/phone_high_outside.vue View File

overflow: hidden; overflow: hidden;
} }
.contentImg{ .contentImg{
width: 8.15rem;
width: 7.5rem;
height: 11.63rem; height: 11.63rem;
} }
.pageRedDot{ .pageRedDot{

+ 25
- 0
src/views/phone_standard_compliance.vue View File

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

+ 1
- 2
src/views/twoCart/compliance.vue View File

<img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt=""> <img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt="">
<div class="content"> <div class="content">
<img class="imgWord1" src="../../assets/vehicle/complianceWord1.png" alt=""> <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"> <div class="contPic">
<img class="bigImg" src="../../assets/vehicle/complianceContImg.png" alt=""> <img class="bigImg" src="../../assets/vehicle/complianceContImg.png" alt="">
<img @click="showMaskfn()" class="imgLeft" src="../../assets/vehicle/complianceClick1.png" alt=""> <img @click="showMaskfn()" class="imgLeft" src="../../assets/vehicle/complianceClick1.png" alt="">
</div> </div>
<img class="imgWord4" src="../../assets/vehicle/complianceWord2.png" alt=""> <img class="imgWord4" src="../../assets/vehicle/complianceWord2.png" alt="">
</div> </div>

<!-- 弹框 --> <!-- 弹框 -->
<div class="maskAll" v-if="showMask"> <div class="maskAll" v-if="showMask">
<img class="mask1_1" src="../../assets/vehicle/maskCompliance.jpg" alt=""> <img class="mask1_1" src="../../assets/vehicle/maskCompliance.jpg" alt="">

+ 9
- 0
src/views/twoCart/criterion-allDetails.vue View File

return{ 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> </script>

+ 10
- 0
src/views/twoCart/criterion-compliance.vue View File

<template>
<compliance></compliance>
</template>
<script>
import compliance from "./compliance"
export default {
name:"criterionCompliance",
components:{compliance}
}
</script>

+ 23
- 14
src/views/twoCart/criterion-money.vue View File

<template> <template>
<div class="all"> <div class="all">
<!-- <img class="showBg" src="../../assets/vehicle/showBg.jpg" alt=""> --> <!-- <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> </div>
<img class="imgWord4" src="../../assets/vehicle/imgWord4.png" alt="">
</div>
<!-- </div>-->
<!-- 弹框 --> <!-- 弹框 -->
<div class="maskAll" v-if="showMask"> <div class="maskAll" v-if="showMask">
<img v-if="showMaskNum==1" class="mask1_1" src="../../assets/vehicle/mask1_1.jpg" alt=""> <img v-if="showMaskNum==1" class="mask1_1" src="../../assets/vehicle/mask1_1.jpg" alt="">


<script> <script>
import Sidebar from '../../components/sidebar' import Sidebar from '../../components/sidebar'
// import {data,touchstart,touchend} from '../../plugins/slide'
export default{ export default{
name:"criterionMoney", name:"criterionMoney",
components:{Sidebar}, components:{Sidebar},
showMaskNum:null, showMaskNum:null,
} }
}, },
// mounted(){
// data([2,0,2]);
// this.$refs.contentAll.addEventListener("touchstart",touchstart)
// this.$refs.contentAll.addEventListener("touchend",touchend)
// },
methods:{ methods:{
showMaskfn(e){ showMaskfn(e){
this.showMask = true; this.showMask = true;
}else{ }else{
this.showMaskNum = 2; this.showMaskNum = 2;
} }
}
},
} }
} }
</script> </script>

+ 13
- 16
src/views/twoCart/criterion-shop.vue View File

<template> <template>
<div class="all" ref="contentAll">
<div class="all">
<!-- <img class="showBg" src="../../assets/vehicle/showBg.jpg" alt=""> --> <!-- <img class="showBg" src="../../assets/vehicle/showBg.jpg" alt=""> -->
<img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt=""> <img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt="">
<div class="content"> <div class="content">
</div> </div>
<img class="imgWord4" src="../../assets/vehicle/imgWord1_3_3.png" alt=""> <img class="imgWord4" src="../../assets/vehicle/imgWord1_3_3.png" alt="">
</div> </div>

<!-- 弹框 --> <!-- 弹框 -->
<div class="maskAll" v-if="showMask"> <div class="maskAll" v-if="showMask">
<img v-if="showMaskNum==1" class="mask1_1" src="../../assets/vehicle/mask1_5.jpg" alt=""> <img v-if="showMaskNum==1" class="mask1_1" src="../../assets/vehicle/mask1_5.jpg" alt="">
touchstartY:0, touchstartY:0,
} }
}, },

// mounted(){
// window.addEventListener("touchstart",this.touchstart)
// window.addEventListener("touchend",this.touchend)
// },
methods:{ methods:{
showMaskfn(e){ showMaskfn(e){
this.showMask = true; this.showMask = true;
this.showMaskNum = 3; 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> </script>

+ 3
- 1
src/views/twoCart/criterion-showarea.vue View File

</div> </div>
<img class="imgWord4" src="../../assets/vehicle/imgWord1_2_3.png" alt=""> <img class="imgWord4" src="../../assets/vehicle/imgWord1_2_3.png" alt="">
</div> </div>

<!-- 弹框 --> <!-- 弹框 -->
<div class="maskAll" v-if="showMask"> <div class="maskAll" v-if="showMask">
<img v-if="showMaskNum==1" class="mask1_1" src="../../assets/vehicle/mask1_3.jpg" alt=""> <img v-if="showMaskNum==1" class="mask1_1" src="../../assets/vehicle/mask1_3.jpg" alt="">
}else{ }else{
this.showMaskNum = 2; this.showMaskNum = 2;
} }
}
},

} }
} }
</script> </script>

+ 10
- 0
src/views/twoCart/high-compliance.vue View File

<template>
<compliance></compliance>
</template>
<script>
import compliance from "./compliance"
export default {
name:"highCompliance",
components:{compliance}
}
</script>

Loading…
Cancel
Save