<template>
<div class="device">
<div class="box flex-between">
<div class="left swiper-container" v-if="false">
<div class="swiper-wrapper">
<div v-for="(item,index) in advertisement" :key="index" class="swiper-slide">
<!-- 图片-->
<div v-if="item.fileType=='image/png'" class="advertising flex-center">
<img :src="item.previewPath" model="scaleToFill"/>
</div>
<!-- 视频-->
<div v-else class="advertising flex-center">
<video :src="item.outerChainPath" autoplay loop muted style="width: 100%;height: 100%;"></video>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="left">
<!-- 广告-->
<div class="advertising icon1 flex-center">广告位招租</div>
<!-- 图片-->
<!-- <div v-else-if="advertisement.fileType=='image/png'" class="advertising icon1 flex-center">-->
<!-- <img :src="advertisement.previewPath" model="scaleToFill"/>-->
<!-- </div>-->
<!-- <!– 视频–>-->
<!-- <div v-else class="advertising icon1 flex-center">-->
<!-- <video :src="advertisement.outerChainPath" autoplay loop muted style="width: 100%;height: 100%;"></video>-->
<!-- </div>-->
<div v-show="false" class="box2 flex-between">
<div class="main2 flex-center" @click="skip('explain', '联系客服')">
<img src="../assets/demo7.png"/>联系客服
</div>
<div class="main2 flex-center" @click="skip('explain', '价格查询')">
<img src="../assets/demo5.png"/>价格查询
</div>
</div>
</div>
<div class="right">
<div class="main4 flex-center">
<div>
<div class="flex-center ewm" v-if="memberLoginVo!=''">
<div class="zzc flex-center"></div>
<VueQr :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"
:logoMargin="0"
:logoScale=".2" :margin="0" :size="300" :text="''" logoBackgroundColor="white">
</VueQr>
</div>
<div class="flex-center ewm" v-else>
<VueQr v-if="appSrc" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"
:logoMargin="0"
:logoScale=".2" :margin="0" :size="300" :text="appSrc" logoBackgroundColor="white">
</VueQr>
</div>
<div class="flex-center tip">
<img src="../assets/demo9.png"/>扫码打印手机文件
</div>
</div>
</div>
<!-- 功能-->
<div class="feature">
<div
class="main icon2 flex-start"
@click="skip('operationGuide', 'U盘打印')"
>
<img src="../assets/demo2.png"/>
<div>U盘打印</div>
</div>
<div
class="main icon3 flex-start"
@click="skip('operationGuide', '扫描打印')"
>
<img src="../assets/demo3.png"/>
<div>扫描打印</div>
</div>
<div
class="main icon4 flex-start"
@click="skip('operationGuide', '身份证打印')"
>
<img src="../assets/demo4.png"/>
<div>身份证打印</div>
</div>
</div>
</div>
<div class="dbTip flex-between">
<div>机器编号：{{ cite.code }}</div>
<div>客服电话：{{ facility.servicePhone }}</div>
</div>
</div>
</div>
</template>
<script>
import VueQr from 'vue-qr'
export default {
name: "device",
components: {
VueQr
},
data() {
return {
mySwiper: '',
appSrc: '',
memberLoginVo: '',
advertisement: '',
facility: '',
src: ''
};
},
methods: {
skip(href, name) {
let {facility} = this
let {sta, name2} = ''
facility.paperNumber.forEach(item => {
if (item.residue < 1) {
name2 = '请联系管理员添加' + item.name
sta = true
}
})
if (sta == true) {
this.cite.state = {
name: name2,
sta: true
}
return
}
if (this.cite.memberLoginVo == '') {
this.cite.state = {
name: '请扫码登录设备再操作！',
sta: true
}
return
}
if (href == 'operationGuide') {
this.cite.modeName = name
}
this.$router.push({
name: href,
params: {
name: name,
},
});
},
load() {
if (this.src == '') {
this.src = this.cite.url
setTimeout(() => {
this.load()
}, 1000)
}
},
GGT() {
this.mySwiper = new this.Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
},
// 改变swiper样式时，自动初始化swiper
observer: true,
// 监测swiper父元素，如果有变化则初始化swiper
observeParents: true,
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false
}
})
},
},
mounted() {
this.load()
setInterval(() => {
if (this.cite.advertisement != this.advertisement) {
this.advertisement = this.cite.advertisement
setTimeout(() => {
this.GGT()
}, 500)
}
if (this.cite.facility != this.facility) {
this.facility = this.cite.facility
}
if (this.cite.memberLoginVo != this.memberLoginVo) {
this.memberLoginVo = this.cite.memberLoginVo
}
if (this.appSrc == '' && this.cite.code != '') {
this.appSrc = 'https://mps.xlmalls.com/web/' + this.cite.code
console.log(this.appSrc)
}
}, 300)
}
};
</script>
<style lang="less" scoped>
.device {
margin: 2rem 2rem 0;
.box {
align-items: flex-start;
.left {
width: 92.5rem;
margin: 0;
position: relative;
z-index: 1;
.advertising {
width: 100%;
height: 52rem;
border-radius: 1.63rem;
//margin-bottom: 1.88rem;
cursor: pointer;
overflow: hidden;
font-size: 8rem;
font-weight: 400;
color: #ffffff;
line-height: 8rem;
img {
width: 100%;
height: 100%;
}
}
}
.right {
width: 22rem;
}
}
.main {
width: 100%;
height: 8rem;
border-radius: 1.63rem;
font-size: 1.8rem;
font-weight: 400;
color: #ffffff;
line-height: 1.8rem;
margin-top: 1rem;
img {
width: 8rem;
margin-top: -1rem;
}
}
.icon1 {
background: linear-gradient(359deg, #3dbf51 0%, #47d1a9 100%);
box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(120, 229, 217, 0.45);
}
.icon2 {
background: linear-gradient(180deg, #f2c952 0%, #db572b 100%);
box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(255, 147, 128, 0.57);
}
.icon3 {
background: linear-gradient(180deg, #84b2f7 0%, #8774d2 100%);
box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(150, 135, 232, 0.3);
}
.icon4 {
background: linear-gradient(180deg, #5be7ff 0%, #309fd8 100%);
box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(104, 202, 253, 0.42);
}
.css1 {
background: #ffffff;
box-shadow: 0rem 0.63rem 1.25rem 0.06rem rgba(0, 0, 0, 0.14);
border-radius: 1.63rem;
cursor: pointer;
}
.main2 {
width: 100%;
height: 6.44rem;
.css1();
font-size: 1.88rem;
font-weight: bold;
color: #323232;
line-height: 2.63rem;
img {
width: 3.75rem;
margin-right: 0.38rem;
}
}
.main3 {
width: 100%;
height: 9.94rem;
.css1();
font-size: 2.13rem;
font-weight: bold;
color: #323232;
line-height: 3rem;
img {
width: 4.25rem;
margin-right: 0.88rem;
}
}
.main4 {
width: 100%;
height: 25rem;
.css1();
font-size: 1.88rem;
font-weight: 400;
color: #323232;
line-height: 2rem;
.ewm {
width: 18rem;
height: 18rem;
background: #ffffff;
border: 0.06rem solid #707070;
position: relative;
img {
width: 100%;
margin: 0;
}
}
.tip {
margin-top: 1rem;
}
img {
width: 2.31rem;
margin-right: 1.19rem;
}
.zzc {
position: absolute;
background: #333;
opacity: .5;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.dbTip {
position: fixed;
bottom: 0;
left: 0;
right: 0;
font-size: 1.2rem;
font-weight: 400;
color: #323232;
height: 3rem;
padding: 0 3rem;
}
}
</style>
