han

hanfei / VueSharedPrinting

Browse code han master
1 parent 4643798 commit 3638e86f6a0daee14f0ae311a13d0bbd2714459c hanfei authored on 16 Jan 2024

Patch

Showing 4 changed files

Ignore Space Show notes View src/components/global.vue
<template> <div> <!-- 打印中提示--> <div class="dyzTip" v-show="DYZshow"> <div class="curtain"></div> <div class="content"> <img src="../assets/printing.png" alt=""> <div class="name">正在进行{{ listData.printFileType=='PDF'?'文档':'照片' }}打印...</div> <div class="flex-center">{{ listData.printFileName }}</div> <div class="flex-center">{{ cite.selectedFile.length\|\|1 }}/{{ cite.fileNum\|\|1 }}</div> </div> </div> </div> </template> <script> import mqtt from "mqtt/dist/mqtt" import {downloadPDF, getAdvertisement, getDeviceByCode} from "@/api/resultApi"; import bdRequest from "@/utils/bdRequest"; export default { name: "global", data() { return { client: null, code: '', listData: '', listData2: { code: "20240115143608553416-0", copies: 2, printFileId: 404, printFileName: "2177370079086126.pdf", printFileType: "PDF", printingColor: "BW", printingFaces: "DOUBLE", }, DYZshow: false, // 是否显示打印中 }; }, created() { this.load() }, methods: { load() { // 获取名为code的查询参数值 if (this.cite.code === "") { this.code = this.$route.query.code; this.cite.code = this.code; }else{ this.code = this.cite.code; } if (this.cite.facility === "") { this.getDeviceByCode(); } // 判断是否是广告屏 console.log(this.cite) if(this.cite.name != 'advertising') { this.initMqtt() } }, initMqtt() { // 连接配置选项 let options = { connectTimeout: 4000, // 超时时间 // 认证信息 clientId: '', //不填默认随机生成一个ID username: 'admin', //用户名 password: 'public' //密码 } this.client = mqtt.connect('wss://mps.xlmalls.com:8084/mqtt', options) //调用连接的api //连接成功 this.client.on('connect', (e) => { console.log('连接成功', e) this.subscribes() }) //重连提醒 this.client.on('reconnect', (error) => { console.log('正在重连', error) }) //连接失败提醒 this.client.on('error', (error) => { console.log('连接失败', error) }) //接收消息 this.client.on('message', (topic, message) => { const data = JSON.parse(message) //接受到控制信号的数据 console.log('接收消息',data) if(data.cmd=='pay') { //小程序支付 this.cite.url = data.payCodeUrl }else if(data.login) { //登录 this.cite.memberLoginVo = data.memberLoginVo }else if(data.code){ //打印任务 this.listData = data this.dayin() }else{ //登出 this.cite.memberLoginVo = '' } }) }, //订阅多个主题 subscribes() { const arr = ['/tzdy/send/device/'+this.code] this.client.subscribe(arr, { qos: 0 }, (err) => { if (!err) { console.log(`消息订阅成功`) } else { console.log('消息订阅失败') } }) }, //获取设备信息 getDeviceByCode() { getDeviceByCode({ code: this.code }).then((res) => { this.cite.facility = res; this.getAdvertisement() }); }, // 获取广告链接 getAdvertisement() { let name = 'DeviceScreen' if(this.cite.name=='advertising') { name = 'AdvertisingScreen' } getAdvertisement({deviceId:this.cite.facility.id,screen: name}).then((res) =>{ // console.log(res) this.cite.advertisement = res \|\| '' }) }, // 小程序下载 downloadPDF(id,name) { downloadPDF({id: id}).then(res => { console.log(res) const fileName = name const blob = new Blob([res], {type: 'application/octet-stream'}) if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, fileName) } else { let link = document.createElement('a') link.href = window.URL.createObjectURL(blob) link.download = fileName link.click() window.URL.revokeObjectURL(link.href) } }).catch(() => { }) }, async dayin() { let _this = this let {listData} = _this await this.downloadPDF(listData.printFileId,listData.printFileName) setTimeout(() =>{ _this.DYZshow = true _this.setDy(listData,listData.copies) },2000) }, setDy(listData,num) { let name = this.cite.memberLoginVo.printerGlossy \|\| 'EPSON WF-C5890 Series3' let type = 'img' if(listData.printFileType=='PDF') { name = this.cite.memberLoginVo.printerA4 \|\| 'EPSON WF-C5890 Series2' type = 'pdf' } console.log('设备名称',name,type) let res = bdRequest({ method: 'post', url: '/api/Printer/Print', post: '8080', data: { "PrinterName": name, "SourceFile": 'D:\\TZDYSHARE\\TEMPFILES\\'+listData.printFileName, // "SourceFile": 'C:\\datasource\\'+listData.printFileName, "FileType": type, "PrintColor": listData.printingColor \|\| "", "DblPrt": listData.printingFaces \|\| "" } }) console.log(res) num = num-1 if(num>0) { this.setDy(listData,num) }else{ setTimeout(()=>{ this.$router.push({ name: 'complete' }) this.DYZshow = false },1000) } }, } } </script> <style scoped lang="less"> .dyzTip { position: fixed; width: 100%; height: 100%; top: 0; left: 0; .curtain { background: #000; width: 100%; height: 100%; opacity: .3; } .content { position: absolute; left: 50%; margin-left: -19rem; top: 50%; margin-top: -14.5rem; width: 38.56rem; height: 29rem; background: #FFFFFF; border-radius: 1.25rem; overflow: hidden; img { width: 100%; } div { font-size: 1.38rem; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #323232; line-height: 1.88rem; margin-top: 1.3rem; } .name { font-size: 1rem; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #323232; line-height: 1.38rem; text-align: left; padding: 0 3rem; } } } </style> <template> <div> <!-- 打印中提示--> <div class="dyzTip" v-show="DYZshow"> <div class="curtain"></div> <div class="content"> <img src="../assets/printing.png" alt=""> <div class="name">正在进行{{ listData.printFileType=='PDF'?'文档':'照片' }}打印...</div> <div class="flex-center">{{ listData.printFileName }}</div> <div class="flex-center">{{ cite.selectedFile.length\|\|1 }}/{{ cite.fileNum\|\|1 }}</div> </div> </div> </div> </template> <script> import mqtt from "mqtt/dist/mqtt" import {downloadPDF, getAdvertisement, getDeviceByCode} from "@/api/resultApi"; import bdRequest from "@/utils/bdRequest"; export default { name: "global", data() { return { client: null, code: '', listData: '', listData2: { code: "20240115143608553416-0", copies: 2, printFileId: 404, printFileName: "2177370079086126.pdf", printFileType: "PDF", printingColor: "BW", printingFaces: "DOUBLE", }, DYZshow: false, // 是否显示打印中 }; }, created() { this.load() }, methods: { load() { // 获取名为code的查询参数值 if (this.cite.code === "") { this.code = this.$route.query.code; this.cite.code = this.code; }else{ this.code = this.cite.code; } if (this.cite.facility === "") { this.getDeviceByCode(); } // 判断是否是广告屏 console.log(this.cite) if(this.cite.name != 'advertising') { this.initMqtt() } }, initMqtt() { // 连接配置选项 let options = { connectTimeout: 4000, // 超时时间 // 认证信息 clientId: '', //不填默认随机生成一个ID username: 'admin', //用户名 password: 'public' //密码 } this.client = mqtt.connect('wss://mps.xlmalls.com:8084/mqtt', options) //调用连接的api //连接成功 this.client.on('connect', (e) => { console.log('连接成功', e) this.subscribes() }) //重连提醒 this.client.on('reconnect', (error) => { console.log('正在重连', error) }) //连接失败提醒 this.client.on('error', (error) => { console.log('连接失败', error) }) //接收消息 this.client.on('message', (topic, message) => { const data = JSON.parse(message) //接受到控制信号的数据 console.log('接收消息',data) if(data.cmd=='pay') { //小程序支付 this.cite.url = data.payCodeUrl }else if(data.login) { //登录 this.cite.memberLoginVo = data.memberLoginVo }else if(data.code){ //打印任务 this.listData = data this.dayin() }else{ //登出 this.cite.memberLoginVo = '' } }) }, //订阅多个主题 subscribes() { const arr = ['/tzdy/send/device/'+this.code] this.client.subscribe(arr, { qos: 0 }, (err) => { if (!err) { console.log(`消息订阅成功`) } else { console.log('消息订阅失败') } }) }, //获取设备信息 getDeviceByCode() { getDeviceByCode({ code: this.code }).then((res) => { this.cite.facility = res; this.getAdvertisement() }); }, // 获取广告链接 getAdvertisement() { let name = 'DeviceScreen' if(this.cite.name=='advertising') { name = 'AdvertisingScreen' } getAdvertisement({deviceId:this.cite.facility.id,screen: name}).then((res) =>{ // console.log(res) this.cite.advertisement = res \|\| '' }) }, // 小程序下载 downloadPDF(id,name) { downloadPDF({id: id}).then(res => { console.log(res) const fileName = name const blob = new Blob([res], {type: 'application/octet-stream'}) if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, fileName) } else { let link = document.createElement('a') link.href = window.URL.createObjectURL(blob) link.download = fileName link.click() window.URL.revokeObjectURL(link.href) } }).catch(() => { }) }, async dayin() { let _this = this let {listData} = _this await this.downloadPDF(listData.printFileId,listData.printFileName) setTimeout(() =>{ _this.DYZshow = true _this.setDy(listData,listData.copies) },2000) }, setDy(listData,num) { let name = this.cite.memberLoginVo.printerGlossy \|\| 'EPSON WF-C5890 Series2' if(listData.printFileType=='PDF') { name = this.cite.memberLoginVo.printerA4 \|\| 'EPSON WF-C5890 Series' } console.log('设备名称',name) let res = bdRequest({ method: 'post', url: '/api/Printer/Print', post: '8080', data: { "PrinterName": name, // "SourceFile": 'D:\\TZDYSHARE\\TEMPFILES\\'+listData.printFileName, "SourceFile": 'C:\\datasource\\'+listData.printFileName, "FileType": "pdf", "PrintColor": listData.printingColor \|\| "", "DblPrt": listData.printingFaces \|\| "" } }) console.log(res) num = num-1 if(num>0) { this.setDy(listData,num) }else{ setTimeout(()=>{ this.$router.push({ name: 'complete' }) this.DYZshow = false },1000) } }, } } </script> <style scoped lang="less"> .dyzTip { position: fixed; width: 100%; height: 100%; top: 0; left: 0; .curtain { background: #000; width: 100%; height: 100%; opacity: .3; } .content { position: absolute; left: 50%; margin-left: -19rem; top: 50%; margin-top: -14.5rem; width: 38.56rem; height: 29rem; background: #FFFFFF; border-radius: 1.25rem; overflow: hidden; img { width: 100%; } div { font-size: 1.38rem; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #323232; line-height: 1.88rem; margin-top: 1.3rem; } .name { font-size: 1rem; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #323232; line-height: 1.38rem; text-align: left; padding: 0 3rem; } } } </style>

Ignore Space Show notes View

src/components/global.vue

<template>
  <div>
    
    <div class="dyzTip" v-show="DYZshow">
      <div class="curtain"></div>
      <div class="content">
        <img src="../assets/printing.png" alt="">
        <div class="name">正在进行{{ listData.printFileType=='PDF'?'文档':'照片' }}打印...</div>
        <div class="flex-center">{{ listData.printFileName }}</div>
        <div class="flex-center">{{ cite.selectedFile.length||1 }}/{{ cite.fileNum||1 }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import mqtt from "mqtt/dist/mqtt"
import {downloadPDF, getAdvertisement, getDeviceByCode} from "@/api/resultApi";
import bdRequest from "@/utils/bdRequest";

export default {
  name: "global",
  data() {
    return {
      client: null,
      code: '',
      listData: '',
      listData2: {
        code: "20240115143608553416-0",
        copies: 2,
        printFileId: 404,
        printFileName: "2177370079086126.pdf",
        printFileType: "PDF",
        printingColor: "BW",
        printingFaces: "DOUBLE",
      },

DYZshow: false, // 是否显示打印中
    };
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      // 获取名为code的查询参数值
      if (this.cite.code === "") {
        this.code = this.$route.query.code;
        this.cite.code = this.code;
      }else{
        this.code = this.cite.code;
      }

if (this.cite.facility === "") {
        this.getDeviceByCode();
      }
      // 判断是否是广告屏
      console.log(this.cite)
      if(this.cite.name != 'advertising') {
        this.initMqtt()
      }
    },
    initMqtt() {
      // 连接配置选项
      let options = {
        connectTimeout: 4000, // 超时时间
        // 认证信息
        clientId: '', //不填默认随机生成一个ID
        username: 'admin', //用户名
        password: 'public' //密码
      }
      this.client = mqtt.connect('wss://mps.xlmalls.com:8084/mqtt', options) //调用连接的api
      //连接成功
      this.client.on('connect', (e) => {
        console.log('连接成功', e)
        this.subscribes()
      })
      //重连提醒
      this.client.on('reconnect', (error) => {
        console.log('正在重连', error)
      })
      //连接失败提醒
      this.client.on('error', (error) => {
        console.log('连接失败', error)
      })
      //接收消息
      this.client.on('message', (topic, message) => {
        const data = JSON.parse(message) //接受到控制信号的数据
        console.log('接收消息',data)
        if(data.cmd=='pay') {
          //小程序支付
          this.cite.url = data.payCodeUrl
        }else if(data.login) {
          //登录
          this.cite.memberLoginVo = data.memberLoginVo
        }else if(data.code){
          //打印任务
          this.listData = data
          this.dayin()
        }else{
          //登出
          this.cite.memberLoginVo = ''
        }
      })
    },
    //订阅多个主题
    subscribes() {
      const arr = ['/tzdy/send/device/'+this.code]
      this.client.subscribe(arr, { qos: 0 }, (err) => {
        if (!err) {
          console.log(`消息订阅成功`)
        } else {
          console.log('消息订阅失败')
        }
      })
    },
    //获取设备信息
    getDeviceByCode() {
      getDeviceByCode({ code: this.code }).then((res) => {
        this.cite.facility = res;
        this.getAdvertisement()
      });
    },
    // 获取广告链接
    getAdvertisement() {
      let name = 'DeviceScreen'
      if(this.cite.name=='advertising') {
        name = 'AdvertisingScreen'
      }
      getAdvertisement({deviceId:this.cite.facility.id,screen: name}).then((res) =>{
        // console.log(res)
        this.cite.advertisement = res || ''
      })
    },
    // 小程序下载
    downloadPDF(id,name) {
      downloadPDF({id: id}).then(res => {
        console.log(res)
        const fileName = name
        const blob = new Blob([res], {type: 'application/octet-stream'})
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName)
        } else {
          let link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = fileName
          link.click()
          window.URL.revokeObjectURL(link.href)
        }
      }).catch(() => {
      })
    },
    async dayin() {
      let _this = this
      let {listData} = _this
      await this.downloadPDF(listData.printFileId,listData.printFileName)

setTimeout(() =>{
        _this.DYZshow = true
        _this.setDy(listData,listData.copies)
      },2000)

},
    setDy(listData,num) {
      let name = this.cite.memberLoginVo.printerGlossy || 'EPSON WF-C5890 Series3'
      let type = 'img'
      if(listData.printFileType=='PDF') {
        name = this.cite.memberLoginVo.printerA4 || 'EPSON WF-C5890 Series2'
        type = 'pdf'
      }
      console.log('设备名称',name,type)
      let res = bdRequest({
        method: 'post',
        url: '/api/Printer/Print',
        post: '8080',
        data: {
          "PrinterName": name,
          "SourceFile": 'D:\\TZDYSHARE\\TEMPFILES\\'+listData.printFileName,
          // "SourceFile": 'C:\\datasource\\'+listData.printFileName,
          "FileType": type,
          "PrintColor": listData.printingColor || "",
          "DblPrt": listData.printingFaces || ""
        }
      })
      console.log(res)
      num = num-1
      if(num>0) {
        this.setDy(listData,num)
      }else{
        setTimeout(()=>{
          this.$router.push({
            name: 'complete'
          })
          this.DYZshow = false
        },1000)
      }
    },
  }
}
</script>

setTimeout(() =>{
        _this.DYZshow = true
        _this.setDy(listData,listData.copies)
      },2000)

},
    setDy(listData,num) {
      let name = this.cite.memberLoginVo.printerGlossy || 'EPSON WF-C5890 Series2'
      if(listData.printFileType=='PDF') {
        name = this.cite.memberLoginVo.printerA4 || 'EPSON WF-C5890 Series'
      }
      console.log('设备名称',name)
      let res = bdRequest({
        method: 'post',
        url: '/api/Printer/Print',
        post: '8080',
        data: {
          "PrinterName": name,
          // "SourceFile": 'D:\\TZDYSHARE\\TEMPFILES\\'+listData.printFileName,
          "SourceFile": 'C:\\datasource\\'+listData.printFileName,
          "FileType": "pdf",
          "PrintColor": listData.printingColor || "",
          "DblPrt": listData.printingFaces || ""
        }
      })
      console.log(res)
      num = num-1
      if(num>0) {
        this.setDy(listData,num)
      }else{
        setTimeout(()=>{
          this.$router.push({
            name: 'complete'
          })
          this.DYZshow = false
        },1000)
      }
    },
  }
}
</script>

Ignore Space Show notes View src/components/top.vue
<template> <div class="top flex-between"> <div class="logo flex-start" @click="_goHome()"> <img src="../assets/logo.png" /> <span></span> <div>天章自助打印</div> </div> <div class="time flex-start"> <div> <div>{{ time.week }}</div> <div>{{ time.y }}/{{ time.M }}/{{ time.d }}</div> </div> <div class="info">{{ time.h }}:{{ time.m }}</div> </div> <div class="tip flex-start"> <div>A4纸299张</div> <div>A6纸18张</div> </div> </div> </template> <script> export default { name: "top", data() { return { time: {} } }, mounted() { this.format() }, methods: { add(t) { if(t<10) { return '0' + t } return t }, format() { let date = new Date(); let o = { "y": date.getFullYear(), //年 "M": this.add(date.getMonth() + 1), //月份 "d": this.add(date.getDate()), //日 "h": this.add(date.getHours()), //小时 "m": this.add(date.getMinutes()), //分 "week": '', }; let str = "星期"; switch (date.getDay()) { case 0 : str += "日"; break; case 1 : str += "一"; break; case 2 : str += "二"; break; case 3 : str += "三"; break; case 4 : str += "四"; break; case 5 : str += "五"; break; case 6 : str += "六"; break; } o.week = str this.time = o setTimeout(() =>{ this.format() },1000) }, _goHome() { // this.quit() this.$router.push({ name: 'device' }) } } } </script> <style scoped lang="less"> .top { width: 100%; height: 9.81rem; background: #52A39D; position: relative; .logo { padding-left: 5.5rem; font-size: 3.5rem; font-weight: 400; color: #FFFFFF; line-height: 3.69rem; img { width: 5.56rem; height: 5.56rem; } span { width: 0; height: 4.43rem; border-left: 1px solid #FFFFFF; margin: 0 1.94rem; } } .time { padding-right: 3.88rem; font-size: 1.38rem; font-weight: 400; color: #FFFFFF; line-height: 1.94rem; text-align: right; .info { font-weight: bold; color: #FFFFFF; margin-left: 1.13rem; font-size: 3.69rem; line-height: 5.2rem; } } .tip { position: absolute; bottom: .5rem; right: 3.88rem; font-size: 1.2rem; color: #fff; div { margin-left: 2rem; } } } </style> <template> <div class="top flex-between"> <div class="logo flex-start" @click="_goHome()"> <img src="../assets/logo.png" /> <span></span> <div>天章自助打印</div> </div> <div class="time flex-start"> <div> <div>{{ time.week }}</div> <div>{{ time.y }}/{{ time.M }}/{{ time.d }}</div> </div> <div class="info">{{ time.h }}:{{ time.m }}</div> </div> </div> </template> <script> export default { name: "top", data() { return { time: {} } }, mounted() { this.format() }, methods: { add(t) { if(t<10) { return '0' + t } return t }, format() { let date = new Date(); let o = { "y": date.getFullYear(), //年 "M": this.add(date.getMonth() + 1), //月份 "d": this.add(date.getDate()), //日 "h": this.add(date.getHours()), //小时 "m": this.add(date.getMinutes()), //分 "week": '', }; let str = "星期"; switch (date.getDay()) { case 0 : str += "日"; break; case 1 : str += "一"; break; case 2 : str += "二"; break; case 3 : str += "三"; break; case 4 : str += "四"; break; case 5 : str += "五"; break; case 6 : str += "六"; break; } o.week = str this.time = o setTimeout(() =>{ this.format() },1000) }, _goHome() { // this.quit() this.$router.push({ name: 'device' }) } } } </script> <style scoped lang="less"> .top { width: 100%; height: 9.81rem; background: #52A39D; .logo { padding-left: 5.5rem; font-size: 3.5rem; font-weight: 400; color: #FFFFFF; line-height: 3.69rem; img { width: 5.56rem; height: 5.56rem; } span { width: 0; height: 4.43rem; border-left: 1px solid #FFFFFF; margin: 0 1.94rem; } } .time { padding-right: 3.88rem; font-size: 1.38rem; font-weight: 400; color: #FFFFFF; line-height: 1.94rem; text-align: right; .info { font-weight: bold; color: #FFFFFF; margin-left: 1.13rem; font-size: 3.69rem; line-height: 5.2rem; } } } </style>

Ignore Space Show notes View

src/components/top.vue

<template>
  <div class="top flex-between">
    <div class="logo flex-start" @click="_goHome()">
      <img src="../assets/logo.png" />
      <span></span>
      <div>天章自助打印</div>
    </div>
    <div class="time flex-start">
      <div>
        <div>{{ time.week }}</div>
        <div>{{ time.y }}/{{ time.M }}/{{ time.d }}</div>
      </div>
      <div class="info">{{ time.h }}:{{ time.m }}</div>
    </div>
    <div class="tip flex-start">
      <div>A4纸*299张</div>
      <div>A6纸*18张</div>
    </div>
  </div>
</template>

setTimeout(() =>{
        this.format()
      },1000)
    },
    _goHome() {
      // this.quit()
      this.$router.push({
        name: 'device'
      })
    }
  }
}
</script>

setTimeout(() =>{
        this.format()
      },1000)
    },
    _goHome() {
      // this.quit()
      this.$router.push({
        name: 'device'
      })
    }
  }
}
</script>

Ignore Space Show notes View src/views/advertising.vue
<template> <div class="advertising flex-center" :style="advertisement==''?'':'background: #000'"> <div v-if="advertisement==''">广告位招租</div> <img v-else-if="advertisement.fileType=='image/png'" :src="advertisement.previewPath" model="scaleToFill"/> <video v-else autoplay loop muted :src="advertisement.outerChainPath" style="width: 100%;height: 100%;"></video> </div> </template> <script> export default { name: "advertising", data() { return { advertisement: '' }; }, mounted() { setInterval(()=>{ if(this.cite.advertisement != this.advertisement) { this.advertisement = this.cite.advertisement } },300) }, } </script> <style> #app .top { display: none; } .advertising { background: linear-gradient(359deg, #3dbf51 0%, #47d1a9 100%); width: 100%; height: 100%; position: fixed; font-size: 10rem; font-weight: bold; color: #ffffff; line-height: 10rem; } .advertising img { max-width: 100%; max-height: 100%; } </style> <template> <div class="advertising flex-center" :style="advertisement==''?'':'background: #000'"> <div v-if="advertisement==''">广告位招租</div> <img v-else-if="advertisement.fileType=='image/png'" :src="advertisement.previewPath" model="scaleToFill"/> <video v-else autoplay loop muted :src="advertisement.outerChainPath" style="width: 100%;height: 100%;"></video> </div> </template> <script> export default { name: "advertising", data() { return { advertisement: '' }; }, mounted() { setInterval(()=>{ if(this.cite.advertisement != this.advertisement) this.advertisement = this.cite.advertisement },300) }, } </script> <style> #app .top { display: none; } .advertising { background: linear-gradient(359deg, #3dbf51 0%, #47d1a9 100%); width: 100%; height: 100%; position: fixed; font-size: 10rem; font-weight: bold; color: #ffffff; line-height: 10rem; } .advertising img { max-width: 100%; max-height: 100%; } </style>

Ignore Space Show notes View

src/views/advertising.vue

<template>
<div class="advertising flex-center" :style="advertisement==''?'':'background: #000'">
  <div v-if="advertisement==''">广告位招租</div>
  <img v-else-if="advertisement.fileType=='image/png'" :src="advertisement.previewPath" model="scaleToFill"/>
  <video v-else autoplay loop muted :src="advertisement.outerChainPath" style="width: 100%;height: 100%;"></video>
</div>
</template>

export default {
  name: "advertising",
  data() {
    return {
      advertisement: ''
    };
  },
  mounted() {
    setInterval(()=>{
      if(this.cite.advertisement != this.advertisement) {
        this.advertisement = this.cite.advertisement
      }
    },300)
  },
}
</script>

Ignore Space Show notes View src/views/device.vue
<template> <div class="device"> <div class="box flex-between"> <div class="left"> <!-- 广告--> <div class="advertising icon1 flex-center" v-if="advertisement==''">广告位招租</div> <!-- 图片--> <div class="advertising icon1 flex-center" v-else-if="advertisement.fileType=='image/png'"> <img :src="advertisement.previewPath" model="scaleToFill"/> </div> <!-- 视频--> <div class="advertising icon1 flex-center" v-else> <video autoplay loop muted :src="advertisement.outerChainPath" style="width: 100%;height: 100%;"></video> </div> <div 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> <span class="flex-center"> <VueQr :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> </span> <span v-show="false" class="flex-center"> <div v-show="!src">支付宝小程序码</div> <VueQr v-show="src" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0" :logoScale=".2" :margin="0" :size="300" :text="src" logoBackgroundColor="white"></VueQr> </span> <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>位置：{{cite.facility.detailAddress}}</div> </div> </div> </div> </template> <script> import VueQr from 'vue-qr' export default { name: "device", components: { VueQr }, data() { return { appSrc:'https://mps.xlmalls.com/web/'+this.cite.code, advertisement: '', src: '' }; }, methods: { skip(href, name) { // navigator.usb.requestDevice({ // filters: [{ // vendorId: 0xABCD, // classCode: 0xFF, // vendor-specific // protocolCode: 0x01 // }] // }).then(device => { // // 连接成功后进行通信操作 // // 执行数据传输操作 // console.log('连接成功后进行通信操作',device) // return device.open(); // }).catch(error => { // // 捕获异常 // console.log(error); // }); // if(this.cite.memberLoginVo=='') { // alert('请扫码登录再操作') // 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) } }, }, mounted() { this.load() setInterval(()=>{ if(this.cite.advertisement != this.advertisement) { this.advertisement = this.cite.advertisement } },300) } }; </script> <style scoped lang="less"> .device { margin: 2.5rem 4.13rem 0; .box { align-items: flex-start; .left { width: 76.88rem; .advertising { width: 100%; height: 43rem; border-radius: 1.63rem; margin-bottom: 1.88rem; cursor: pointer; overflow: hidden; font-size: 8rem; font-weight: 400; color: #ffffff; line-height: 8rem; img { max-width: 100%; max-height: 100%; } } } .right { width: 33rem; } } .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; cursor: pointer; img { width: 12rem; 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: 49%; 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; span { width: 18rem; height: 18rem; background: #ffffff; border: 0.06rem solid #707070; //margin: 1rem auto 0; img { width: 100%; margin: 0; } } .tip { margin-top: 1rem; } img { width: 2.31rem; margin-right: 1.19rem; } } .dbTip { position: fixed; bottom: 0; left: 0; right: 0; font-size: 1.2rem; font-weight: 400; color: #323232; height: 3rem; padding: 0 3rem; } } </style> <template> <div class="device"> <div class="box flex-between"> <div class="left"> <!-- 广告--> <div class="advertising icon1 flex-center" v-if="advertisement==''">广告位招租</div> <!-- 图片--> <div class="advertising icon1 flex-center" v-else-if="advertisement.fileType=='image/png'"> <img :src="advertisement.previewPath" model="scaleToFill"/> </div> <!-- 视频--> <div class="advertising icon1 flex-center" v-else> <video autoplay loop muted :src="advertisement.outerChainPath" style="width: 100%;height: 100%;"></video> </div> <!-- 功能--> <div class="feature flex-between"> <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="right"> <div class="main4"> <span class="flex-center"> <VueQr :logo-src="require('@/assets/logo.png')" :logoScale=".2" :logoMargin="0" logoBackgroundColor="white" :size="300" :margin="0" :auto-color="true" :dot-scale="1" :text="appSrc"></VueQr> </span> <span class="flex-center"> <div v-show="!src">支付宝小程序码</div> <VueQr v-show="src" :logo-src="require('@/assets/logo.png')" :logoScale=".2" :logoMargin="0" logoBackgroundColor="white" :size="300" :margin="0" :auto-color="true" :dot-scale="1" :text="src"></VueQr> </span> <div class="flex-center"> <img src="../assets/demo9.png" />扫码打印手机文件 </div> </div> </div> </div> <div class="box2 flex-between"> <!-- <div class="main2 flex-center" @click="skip('explain', '使用教程')">--> <!-- <img src="../assets/demo6.png" />使用教程--> <!-- </div>--> <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> </template> <script> import VueQr from 'vue-qr' export default { name: "device", components: { VueQr }, data() { return { appSrc:'https://mps.xlmalls.com/web/'+this.cite.code, // advertisement: { // type: 'video', // src: 'https://cdn2.cheduoh.com/liCPtMuqo1P8NdHoM7VdTpY6Ffcz' // }, advertisement: '', src: '' }; }, methods: { skip(href, name) { // navigator.usb.requestDevice({ // filters: [{ // vendorId: 0xABCD, // classCode: 0xFF, // vendor-specific // protocolCode: 0x01 // }] // }).then(device => { // // 连接成功后进行通信操作 // // 执行数据传输操作 // console.log('连接成功后进行通信操作',device) // return device.open(); // }).catch(error => { // // 捕获异常 // console.log(error); // }); // if(this.cite.memberLoginVo=='') { // alert('请扫码登录再操作') // 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) } }, }, mounted() { this.load() setInterval(()=>{ if(this.cite.advertisement != this.advertisement) this.advertisement = this.cite.advertisement },300) } }; </script> <style scoped lang="less"> .device { margin: 2.5rem 4.13rem 0; .box { .left { width: 76.88rem; .advertising { width: 100%; height: 32.5rem; 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: 33rem; } } .main { width: 32%; height: 10rem; border-radius: 1.63rem; font-size: 1.8rem; font-weight: 400; color: #ffffff; line-height: 1.8rem; margin-bottom: 1.88rem; cursor: pointer; img { width: 12rem; 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: 49%; 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 { display: inline-block; width: 100%; height: 44.38rem; .css1(); font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 2rem; margin-bottom: 1.88rem; span { width: 18rem; height: 18rem; background: #ffffff; border: 0.06rem solid #707070; margin: 1rem auto 0; img { width: 100%; margin: 0; } } div { margin-top: 1rem; } img { width: 2.31rem; margin-right: 1.19rem; } } } </style>

Ignore Space Show notes View

src/views/device.vue

<template>
  <div class="device">
    <div class="box flex-between">
      <div class="left">
        
        <div class="advertising icon1 flex-center" v-if="advertisement==''">广告位招租</div>
        
        <div class="advertising icon1 flex-center" v-else-if="advertisement.fileType=='image/png'">
          <img :src="advertisement.previewPath" model="scaleToFill"/>
        </div>
        
        <div class="advertising icon1 flex-center" v-else>
          <video autoplay loop muted :src="advertisement.outerChainPath" style="width: 100%;height: 100%;"></video>
        </div>

<div 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>
            <span class="flex-center">
            <VueQr :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>
          </span>
            <span v-show="false" class="flex-center">
            <div v-show="!src">支付宝小程序码</div>
            <VueQr v-show="src" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"
                   :logoMargin="0" :logoScale=".2" :margin="0" :size="300" :text="src"
                   logoBackgroundColor="white"></VueQr>
          </span>
            <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>位置：{{cite.facility.detailAddress}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import VueQr from 'vue-qr'

export default {
  name: "device",
  components: {
    VueQr
  },
  data() {
    return {
      appSrc:'https://mps.xlmalls.com/web/'+this.cite.code,
      advertisement: '',
      src: ''
    };
  },
  methods: {
    skip(href, name) {
      // navigator.usb.requestDevice({
      //   filters: [{
      //     vendorId: 0xABCD,
      //     classCode: 0xFF, // vendor-specific
      //     protocolCode: 0x01
      //   }]
      // }).then(device => {
      //   // 连接成功后进行通信操作
      //   // 执行数据传输操作
      //   console.log('连接成功后进行通信操作',device)
      //   return device.open();
      // }).catch(error => {
      //   // 捕获异常
      //   console.log(error);
      // });
      // if(this.cite.memberLoginVo=='') {
      //   alert('请扫码登录再操作')
      //   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)
      }
    },
  },
  mounted() {
    this.load()

setInterval(()=>{
      if(this.cite.advertisement != this.advertisement) {
        this.advertisement = this.cite.advertisement
      }
    },300)
  }
};
</script>

<div class="feature flex-between">
          <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="right">
        <div class="main4">
          <span class="flex-center">
            <VueQr :logo-src="require('@/assets/logo.png')" :logoScale=".2" :logoMargin="0" logoBackgroundColor="white" :size="300" :margin="0" :auto-color="true" :dot-scale="1" :text="appSrc"></VueQr>
          </span>
          <span class="flex-center">
            <div v-show="!src">支付宝小程序码</div>
            <VueQr v-show="src" :logo-src="require('@/assets/logo.png')" :logoScale=".2" :logoMargin="0" logoBackgroundColor="white" :size="300" :margin="0" :auto-color="true" :dot-scale="1" :text="src"></VueQr>
          </span>
          <div class="flex-center">
            <img src="../assets/demo9.png" />扫码打印手机文件
          </div>
        </div>
      </div>
    </div>
    <div 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>
</template>
<script>
import VueQr from 'vue-qr'

export default {
  name: "device",
  components: {
    VueQr
  },
  data() {
    return {
      appSrc:'https://mps.xlmalls.com/web/'+this.cite.code,
      // advertisement: {
      //   type: 'video',
      //   src: 'https://cdn2.cheduoh.com/liCPtMuqo1P8NdHoM7VdTpY6Ffcz'
      // },
      advertisement: '',
      src: ''
    };
  },
  methods: {
    skip(href, name) {
      // navigator.usb.requestDevice({
      //   filters: [{
      //     vendorId: 0xABCD,
      //     classCode: 0xFF, // vendor-specific
      //     protocolCode: 0x01
      //   }]
      // }).then(device => {
      //   // 连接成功后进行通信操作
      //   // 执行数据传输操作
      //   console.log('连接成功后进行通信操作',device)
      //   return device.open();
      // }).catch(error => {
      //   // 捕获异常
      //   console.log(error);
      // });
      // if(this.cite.memberLoginVo=='') {
      //   alert('请扫码登录再操作')
      //   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)
      }
    },
  },
  mounted() {
    this.load()

setInterval(()=>{
      if(this.cite.advertisement != this.advertisement)
        this.advertisement = this.cite.advertisement
    },300)
  }
};
</script>

Show line notes below