han

hanfei / VueSharedPrinting

Browse code han master
1 parent df84b08 commit e6bde1d097bf2df6ce1abea88b3ea726d716e9d8 hanfei authored on 23 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 class="tkTip flex-center" v-if="state.sta"> <div>{{ state.name }}</div> </div> <!-- 小程序支付--> <div class="dyzTip" v-if="zfShow"> <div class="curtain"></div> <div class="content content2"> <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> <p> <img @click="onChange('zfShow',false)" class="icon" src="../assets/demo10.png" alt=""> </p> </div> </div> </div> </template> <script> import mqtt from "mqtt/dist/mqtt" import {getAdvertisement, getDeviceByCode} from "@/api/resultApi"; import VueQr from 'vue-qr' import {apiPrint, getDeviceCode, readDownload} from "@/api/bdResultApi"; export default { name: "global", components: { VueQr }, data() { return { client: null, code: '', listData: '', DYZshow: false, // 是否显示打印中 downloadPath: 'D:\\TZDYSHARE\\TEMPFILES\\', state: '', src: '', zfShow: false, }; }, created() { this.toLoad() }, methods: { onChange(name,val){ this[name] = val }, toLoad() { // this.cite.code = 'SNJ-XX-EPSON-X001-00001' // this.code = 'SNJ-XX-EPSON-X001-00001' // this.load() getDeviceCode().then(res =>{ this.cite.code = res.data this.code = res.data this.load() }) }, 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() setInterval(()=>{ if(!this.state.sta&&this.cite.state.sta) { setTimeout(()=>{ this.cite.state.sta = false },3000) } this.state = this.cite.state },1000) } }, 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=='ORDER_INFO') { //小程序支付 this.cite.url = data.payCodeUrl if(this.cite.selectedFile.length<1) { this.src = data.payCodeUrl this.zfShow=true } }else if(data.cmd=='LOGIN') { //登录 if(this.cite.memberLoginVo=='') { this.cite.memberLoginVo = data this.cite.state = { name: '登录设备成功！', sta: true } } }else if(data.cmd=='LOGOUT'){ //登出 this.cite.memberLoginVo = '' }else if(data.cmd=='PRINT'){ //打印任务 this.listData = data this.dayin() }else if(data.cmd=='PRINT_STATUS'){ //打印任务完成 console.log(this.cite.selectedFile.length,this.cite.selectedFile) if(data.taskStatus=='COMPLETE') { if(this.cite.selectedFile.length>1) { this.cite.selectedFile.splice(0, 1) // this.cite.selectedFile.forEach((item,index)=>{ // if(item.code == data.taskCode) { // this.cite.selectedFile.splice(index, 1) // } // }) }else{ this.DYZshow = false this.$router.push({ name: 'complete' }) getDeviceByCode({ code: this.code }).then((res) => { this.cite.facility = res; }); } } } }) }, //订阅多个主题 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) => { console.log(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(() => { // }) let data = { destUrl: this.downloadPath+name,//下载路径 downloadUrl: 'https://mps.xlmalls.com/api/file/download?id='+id,//名称 } readDownload(data).then(res =>{ console.log(res,id,name) }) }, async dayin() { let _this = this _this.DYZshow = true _this.zfShow = false // let {listData} = _this // await this.downloadPDF(listData.printFileId,listData.printFileName) // setTimeout(() =>{ // _this.DYZshow = true // _this.zfShow = false // _this.setDy(listData,listData.copies) // },4000) }, 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' } let PrintColor = '' if(listData.printingColor == 'BW') { PrintColor = '黑白' } let DblPrt = '' if(listData.printingFaces == 'DOUBLE') { DblPrt = '双面打印' } console.log('设备名称',name,type,PrintColor,DblPrt) let res = apiPrint({ "PrinterName": name, "SourceFile": this.downloadPath+listData.printFileName, "FileType": type, "PrintColor": PrintColor, "DblPrt": DblPrt }) console.log(res) if(res) { num = num-1 if(num>0) { this.setDy(listData,num) }else{ setTimeout(()=>{ this.DYZshow = false this.$router.push({ name: 'complete' }) },2000) } }else{ setTimeout(() =>{ this.setDy(listData,num) },2000) } }, } } </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; } } .content2 { background: transparent; height: auto; img { width: 18rem; } .icon { width: 3rem; margin-top: 3rem; } } } .tkTip { position: fixed; top: 5%; width: 100%; div { background: rgba(51, 51, 51, 0.5); color: #fff; padding: 1rem 2rem; border-radius: 1rem; } } </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 class="tkTip flex-center" v-if="state.sta"> <div>{{ state.name }}</div> </div> <!-- 小程序支付--> <div class="dyzTip" v-if="zfShow"> <div class="curtain"></div> <div class="content content2"> <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> <p> <img @click="onChange('zfShow',false)" class="icon" src="../assets/demo10.png" alt=""> </p> </div> </div> </div> </template> <script> import mqtt from "mqtt/dist/mqtt" import {getAdvertisement, getDeviceByCode} from "@/api/resultApi"; import VueQr from 'vue-qr' import {apiPrint, getDeviceCode, readDownload} from "@/api/bdResultApi"; export default { name: "global", components: { VueQr }, data() { return { client: null, code: '', listData: '', DYZshow: false, // 是否显示打印中 downloadPath: 'D:\\TZDYSHARE\\TEMPFILES\\', state: '', src: '', zfShow: false, }; }, created() { this.toLoad() }, methods: { onChange(name,val){ this[name] = val }, toLoad() { // this.cite.code = 'SNJ-XX-EPSON-X001-00001' // this.code = 'SNJ-XX-EPSON-X001-00001' // this.load() getDeviceCode().then(res =>{ this.cite.code = res.data this.code = res.data this.load() }) }, 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() setInterval(()=>{ if(!this.state.sta&&this.cite.state.sta) { setTimeout(()=>{ this.cite.state.sta = false },3000) } this.state = this.cite.state },1000) } }, 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=='ORDER_INFO') { //小程序支付 this.cite.url = data.payCodeUrl if(this.cite.selectedFile.length<1) { this.src = data.payCodeUrl this.zfShow=true } }else if(data.cmd=='LOGIN') { //登录 if(this.cite.memberLoginVo=='') { this.cite.memberLoginVo = data this.cite.state = { name: '登录设备成功！', sta: true } } }else if(data.cmd=='LOGOUT'){ //登出 this.cite.memberLoginVo = '' }else if(data.cmd=='PRINT'){ //打印任务 this.listData = data this.dayin() }else if(data.cmd=='PRINT_STATUS'){ //打印任务完成 console.log(this.cite.selectedFile.length,this.cite.selectedFile) if(data.taskStatus=='COMPLETE') { if(this.cite.selectedFile.length>1) { this.cite.selectedFile.forEach((item,index)=>{ if(item.code == data.taskCode) { this.cite.selectedFile.splice(index, 1) } }) }else{ this.DYZshow = false this.$router.push({ name: 'complete' }) getDeviceByCode({ code: this.code }).then((res) => { this.cite.facility = res; }); } } } }) }, //订阅多个主题 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) => { console.log(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(() => { // }) let data = { destUrl: this.downloadPath+name,//下载路径 downloadUrl: 'https://mps.xlmalls.com/api/file/download?id='+id,//名称 } readDownload(data).then(res =>{ console.log(res,id,name) }) }, async dayin() { let _this = this _this.DYZshow = true _this.zfShow = false // let {listData} = _this // await this.downloadPDF(listData.printFileId,listData.printFileName) // setTimeout(() =>{ // _this.DYZshow = true // _this.zfShow = false // _this.setDy(listData,listData.copies) // },4000) }, 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' } let PrintColor = '' if(listData.printingColor == 'BW') { PrintColor = '黑白' } let DblPrt = '' if(listData.printingFaces == 'DOUBLE') { DblPrt = '双面打印' } console.log('设备名称',name,type,PrintColor,DblPrt) let res = apiPrint({ "PrinterName": name, "SourceFile": this.downloadPath+listData.printFileName, "FileType": type, "PrintColor": PrintColor, "DblPrt": DblPrt }) console.log(res) if(res) { num = num-1 if(num>0) { this.setDy(listData,num) }else{ setTimeout(()=>{ this.DYZshow = false this.$router.push({ name: 'complete' }) },2000) } }else{ setTimeout(() =>{ this.setDy(listData,num) },2000) } }, } } </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; } } .content2 { background: transparent; height: auto; img { width: 18rem; } .icon { width: 3rem; margin-top: 3rem; } } } .tkTip { position: fixed; top: 5%; width: 100%; div { background: rgba(51, 51, 51, 0.5); color: #fff; padding: 1rem 2rem; border-radius: 1rem; } } </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">{{ cite.selectedFile.length||1 }}/{{ cite.fileNum||1 }}</div>
      </div>
    </div>

<div class="tkTip flex-center" v-if="state.sta">
      <div>{{ state.name }}</div>
    </div>

<div class="dyzTip" v-if="zfShow">
      <div class="curtain"></div>
      <div class="content content2">
        <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>
        <p>
          <img @click="onChange('zfShow',false)" class="icon" src="../assets/demo10.png" alt="">
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import mqtt from "mqtt/dist/mqtt"
import {getAdvertisement, getDeviceByCode} from "@/api/resultApi";
import VueQr from 'vue-qr'
import {apiPrint, getDeviceCode, readDownload} from "@/api/bdResultApi";

export default {
  name: "global",
  components: {
    VueQr
  },
  data() {
    return {
      client: null,
      code: '',
      listData: '',

DYZshow: false, // 是否显示打印中
      downloadPath: 'D:\\TZDYSHARE\\TEMPFILES\\',

state: '',

src: '',
      zfShow: false,
    };
  },
  created() {
    this.toLoad()
  },
  methods: {
    onChange(name,val){
      this[name] = val
    },
    toLoad() {
      // this.cite.code = 'SNJ-XX-EPSON-X001-00001'
      // this.code = 'SNJ-XX-EPSON-X001-00001'
      // this.load()
      getDeviceCode().then(res =>{
        this.cite.code = res.data
        this.code = res.data
        this.load()
      })
    },
    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()
        setInterval(()=>{
          if(!this.state.sta&&this.cite.state.sta) {
            setTimeout(()=>{
              this.cite.state.sta = false
            },3000)
          }
          this.state = this.cite.state
        },1000)
      }
    },
    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=='ORDER_INFO') {
          //小程序支付
          this.cite.url = data.payCodeUrl
          if(this.cite.selectedFile.length<1) {
            this.src = data.payCodeUrl
            this.zfShow=true
          }
        }else if(data.cmd=='LOGIN') {
          //登录
          if(this.cite.memberLoginVo=='') {
            this.cite.memberLoginVo = data
            this.cite.state = {
              name: '登录设备成功！',
              sta: true
            }
          }
        }else if(data.cmd=='LOGOUT'){
          //登出
          this.cite.memberLoginVo = ''
        }else if(data.cmd=='PRINT'){
          //打印任务
          this.listData = data
          this.dayin()
        }else if(data.cmd=='PRINT_STATUS'){
          //打印任务完成
          console.log(this.cite.selectedFile.length,this.cite.selectedFile)
          if(data.taskStatus=='COMPLETE') {
            if(this.cite.selectedFile.length>1) {
              this.cite.selectedFile.splice(0, 1)
              // this.cite.selectedFile.forEach((item,index)=>{
              //   if(item.code == data.taskCode) {
              //     this.cite.selectedFile.splice(index, 1)
              //   }
              // })
            }else{
              this.DYZshow = false
              this.$router.push({
                name: 'complete'
              })
              getDeviceByCode({ code: this.code }).then((res) => {
                this.cite.facility = res;
              });
            }
          }
        }
      })
    },
    //订阅多个主题
    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) => {
        console.log(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(() => {
      // })
      let data = {
        destUrl: this.downloadPath+name,//下载路径
        downloadUrl: 'https://mps.xlmalls.com/api/file/download?id='+id,//名称
      }
      readDownload(data).then(res =>{
        console.log(res,id,name)
      })
    },
    async dayin() {
      let _this = this

_this.DYZshow = true
      _this.zfShow = false
      // let {listData} = _this
      // await this.downloadPDF(listData.printFileId,listData.printFileName)

// setTimeout(() =>{
      //   _this.DYZshow = true
      //   _this.zfShow = false
      //   _this.setDy(listData,listData.copies)
      // },4000)

},
    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'
      }
      let PrintColor = ''
      if(listData.printingColor == 'BW') {
        PrintColor = '黑白'
      }
      let DblPrt = ''
      if(listData.printingFaces == 'DOUBLE') {
        DblPrt = '双面打印'
      }
      console.log('设备名称',name,type,PrintColor,DblPrt)
      let res = apiPrint({
        "PrinterName": name,
        "SourceFile": this.downloadPath+listData.printFileName,
        "FileType": type,
        "PrintColor": PrintColor,
        "DblPrt": DblPrt
      })
      console.log(res)
      if(res) {
        num = num-1
        if(num>0) {
          this.setDy(listData,num)
        }else{
          setTimeout(()=>{
            this.DYZshow = false
            this.$router.push({
              name: 'complete'
            })
          },2000)
        }
      }else{
        setTimeout(() =>{
          this.setDy(listData,num)
        },2000)
      }

},
  }
}
</script>

<div class="tkTip flex-center" v-if="state.sta">
      <div>{{ state.name }}</div>
    </div>

export default {
  name: "global",
  components: {
    VueQr
  },
  data() {
    return {
      client: null,
      code: '',
      listData: '',

DYZshow: false, // 是否显示打印中
      downloadPath: 'D:\\TZDYSHARE\\TEMPFILES\\',

state: '',

if (this.cite.facility === "") {
        this.getDeviceByCode();
      }
      // 判断是否是广告屏
      // console.log(this.cite)
      if(this.cite.name != 'advertising') {
        this.initMqtt()
        setInterval(()=>{
          if(!this.state.sta&&this.cite.state.sta) {
            setTimeout(()=>{
              this.cite.state.sta = false
            },3000)
          }
          this.state = this.cite.state
        },1000)
      }
    },
    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=='ORDER_INFO') {
          //小程序支付
          this.cite.url = data.payCodeUrl
          if(this.cite.selectedFile.length<1) {
            this.src = data.payCodeUrl
            this.zfShow=true
          }
        }else if(data.cmd=='LOGIN') {
          //登录
          if(this.cite.memberLoginVo=='') {
            this.cite.memberLoginVo = data
            this.cite.state = {
              name: '登录设备成功！',
              sta: true
            }
          }
        }else if(data.cmd=='LOGOUT'){
          //登出
          this.cite.memberLoginVo = ''
        }else if(data.cmd=='PRINT'){
          //打印任务
          this.listData = data
          this.dayin()
        }else if(data.cmd=='PRINT_STATUS'){
          //打印任务完成
          console.log(this.cite.selectedFile.length,this.cite.selectedFile)
          if(data.taskStatus=='COMPLETE') {
            if(this.cite.selectedFile.length>1) {
              this.cite.selectedFile.forEach((item,index)=>{
                if(item.code == data.taskCode) {
                  this.cite.selectedFile.splice(index, 1)
                }
              })
            }else{
              this.DYZshow = false
              this.$router.push({
                name: 'complete'
              })
              getDeviceByCode({ code: this.code }).then((res) => {
                this.cite.facility = res;
              });
            }
          }
        }
      })
    },
    //订阅多个主题
    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) => {
        console.log(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(() => {
      // })
      let data = {
        destUrl: this.downloadPath+name,//下载路径
        downloadUrl: 'https://mps.xlmalls.com/api/file/download?id='+id,//名称
      }
      readDownload(data).then(res =>{
        console.log(res,id,name)
      })
    },
    async dayin() {
      let _this = this

_this.DYZshow = true
      _this.zfShow = false
      // let {listData} = _this
      // await this.downloadPDF(listData.printFileId,listData.printFileName)

// setTimeout(() =>{
      //   _this.DYZshow = true
      //   _this.zfShow = false
      //   _this.setDy(listData,listData.copies)
      // },4000)

},
  }
}
</script>

Ignore Space Show notes View src/views/argument.vue
<template> <!-- 参数设定--> <div class="transcoding"> <navbar :name="name" /> <div class="box flex-center"> <div class="left"> <div class="title">温馨提示</div> <div class="content">请根据您具体的需要选择打印需要的颜色、单双面、份数等。</div> <div class="content">打印参数确认好之后，即可点击/轻按“下一步”按钮完成打印任务的提交</div> </div> <div class="right"> <!-- <div class="flex-between name">{{ pageData.name }}</div> --> <div class="flex-between"> <div>纸张规格</div> <div>{{ pageData.specification }}</div> </div> <div class="flex-between"> <div>颜色</div> <div class="only flex-center"> <div class="flex-center" :class="pageData.printingColor == 'BW' ? 'act' : ''" @click="onChange('printingColor', 'BW')">黑白</div> <div class="flex-center" :class="pageData.printingColor == 'COLOR' ? 'act' : ''" @click="onChange('printingColor', 'COLOR')">彩色</div> </div> </div> <div class="flex-between" v-show="name=='U盘打印'"> <div>单双面</div> <div class="only flex-center"> <div class="flex-center" :class="pageData.printingFaces == 'SINGLE' ? 'act' : ''" @click="onChange('printingFaces', 'SINGLE')">单面</div> <div class="flex-center" :class="pageData.printingFaces == 'DOUBLE' ? 'act' : ''" @click="onChange('printingFaces', 'DOUBLE')">双面</div> </div> </div> <div class="flex-between"> <div>份数</div> <div class="import flex-center"> <img src="../assets/demo14.png" alt="" @click="variable(pageData.copies < 2 ? 1 : pageData.copies - 1)" /> <input :value="pageData.copies" type="number" min="1" disabled/> <img src="../assets/demo15.png" alt="" @click="variable(pageData.copies + 1)" /> </div> </div> <div class="btn flex-center" @click="skip('pay', name)">下一步</div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' export default { name: 'argument', components: { navbar }, provide() { return { title: '', type: this.name } }, data() { return { name: this.cite.modeName, pageData: { name: '文件名称……文件名称.doc', //文件名称 specification: 'A4', //纸张规格 printingColor: 'BW', //颜色 printingFaces: 'SINGLE', //单双面 copies: 1, //份数 } } }, methods: { skip(href, name) { let {pageData} = this this.cite.parameter = pageData this.$router.push({ name: href, params: { name: name } }) }, onChange(name, val) { this.pageData[name] = val }, variable(num) { this.pageData.copies = num } }, mounted() { // console.log('打印文件',this.cite.selectedFile) this.cite.fileNum = this.cite.selectedFile.length } } </script> <style scoped lang="less"> .box { height: 42.13rem; .css1 { height: 100%; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; } .left { width: 46.44rem; margin-right: 1.88rem; .css1(); .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; padding: 4.13rem 0 2.44rem; } .content { width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; margin: 0 auto; text-align: left; text-indent: 2em; } } .right { display: flex; flex-direction: column; justify-content: center; width: 53.19rem; .css1(); padding: 0 4.81rem; font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 3.75rem; .name { margin-top: 3.19rem; } .only { width: 17.25rem; height: 3.19rem; background: #ffffff; border-radius: 0.63rem; border: 0.06rem solid #707070; overflow: hidden; div { width: 50%; font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 2.63rem; height: 100%; cursor: pointer; } .act { background: #61aa8f; color: #ffffff; } } .import { img { width: 2.75rem; height: 2.75rem; cursor: pointer; } } input { width: 6.38rem; height: 3.19rem; background: #ffffff; border-radius: 0.63rem; border: 0.06rem solid #707070; font-size: 1.88rem; font-weight: 400; color: #323232; text-align: center; margin: 0 0.94rem; } .optionBox { select { width: 13.69rem; height: 3.19rem; padding-right: 3.56rem; border-radius: 0.63rem; border: 0.06rem solid #707070; font-size: 1.88rem; font-weight: 400; color: #323232; text-align: center; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: url('../assets/demo16.png') no-repeat scroll right center transparent; background-position-x: 11rem; } select::-ms-expand { display: none; } } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #ffffff; line-height: 2.63rem; margin-top: 2.25rem; cursor: pointer; } } } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; } </style> <template> <!-- 参数设定--> <div class="transcoding"> <navbar :name="name" /> <div class="box flex-center"> <div class="left"> <div class="title">温馨提示</div> <div class="content">请根据您具体的需要选择打印需要的颜色、单双面、份数等。</div> <div class="content">打印参数确认好之后，即可点击/轻按“下一步”按钮完成打印任务的提交</div> </div> <div class="right"> <!-- <div class="flex-between name">{{ pageData.name }}</div> --> <div class="flex-between"> <div>纸张规格</div> <div>{{ pageData.specification }}</div> </div> <div class="flex-between"> <div>颜色</div> <div class="only flex-center"> <div class="flex-center" :class="pageData.printingColor == 'BW' ? 'act' : ''" @click="onChange('printingColor', 'BW')">黑白</div> <div class="flex-center" :class="pageData.printingColor == 'COLOR' ? 'act' : ''" @click="onChange('printingColor', 'COLOR')">彩色</div> </div> </div> <div class="flex-between" v-show="name!='身份证打印'"> <div>单双面</div> <div class="only flex-center"> <div class="flex-center" :class="pageData.printingFaces == 'SINGLE' ? 'act' : ''" @click="onChange('printingFaces', 'SINGLE')">单面</div> <div class="flex-center" :class="pageData.printingFaces == 'DOUBLE' ? 'act' : ''" @click="onChange('printingFaces', 'DOUBLE')">双面</div> </div> </div> <div class="flex-between"> <div>份数</div> <div class="import flex-center"> <img src="../assets/demo14.png" alt="" @click="variable(pageData.copies < 2 ? 1 : pageData.copies - 1)" /> <input :value="pageData.copies" type="number" min="1" disabled/> <img src="../assets/demo15.png" alt="" @click="variable(pageData.copies + 1)" /> </div> </div> <div class="btn flex-center" @click="skip('pay', name)">下一步</div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' export default { name: 'argument', components: { navbar }, provide() { return { title: '', type: this.name } }, data() { return { name: this.cite.modeName, pageData: { name: '文件名称……文件名称.doc', //文件名称 specification: 'A4', //纸张规格 printingColor: 'BW', //颜色 printingFaces: 'SINGLE', //单双面 copies: 1, //份数 } } }, methods: { skip(href, name) { let {pageData} = this this.cite.parameter = pageData this.$router.push({ name: href, params: { name: name } }) }, onChange(name, val) { this.pageData[name] = val }, variable(num) { this.pageData.copies = num } }, mounted() { // console.log('打印文件',this.cite.selectedFile) this.cite.fileNum = this.cite.selectedFile.length } } </script> <style scoped lang="less"> .box { height: 42.13rem; .css1 { height: 100%; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; } .left { width: 46.44rem; margin-right: 1.88rem; .css1(); .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; padding: 4.13rem 0 2.44rem; } .content { width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; margin: 0 auto; text-align: left; text-indent: 2em; } } .right { display: flex; flex-direction: column; justify-content: center; width: 53.19rem; .css1(); padding: 0 4.81rem; font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 3.75rem; .name { margin-top: 3.19rem; } .only { width: 17.25rem; height: 3.19rem; background: #ffffff; border-radius: 0.63rem; border: 0.06rem solid #707070; overflow: hidden; div { width: 50%; font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 2.63rem; height: 100%; cursor: pointer; } .act { background: #61aa8f; color: #ffffff; } } .import { img { width: 2.75rem; height: 2.75rem; cursor: pointer; } } input { width: 6.38rem; height: 3.19rem; background: #ffffff; border-radius: 0.63rem; border: 0.06rem solid #707070; font-size: 1.88rem; font-weight: 400; color: #323232; text-align: center; margin: 0 0.94rem; } .optionBox { select { width: 13.69rem; height: 3.19rem; padding-right: 3.56rem; border-radius: 0.63rem; border: 0.06rem solid #707070; font-size: 1.88rem; font-weight: 400; color: #323232; text-align: center; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: url('../assets/demo16.png') no-repeat scroll right center transparent; background-position-x: 11rem; } select::-ms-expand { display: none; } } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #ffffff; line-height: 2.63rem; margin-top: 2.25rem; cursor: pointer; } } } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; } </style>

Ignore Space Show notes View

src/views/argument.vue

<template>
  
  <div class="transcoding">
    <navbar :name="name" />
    <div class="box flex-center">
      <div class="left">
        <div class="title">温馨提示</div>
        <div class="content">请根据您具体的需要选择打印需要的颜色、单双面、份数等。</div>
        <div class="content">打印参数确认好之后，即可点击/轻按“下一步”按钮完成打印任务的提交</div>
      </div>
      <div class="right">
        
        <div class="flex-between">
          <div>纸张规格</div>
          <div>{{ pageData.specification }}</div>
        </div>
        <div class="flex-between">
          <div>颜色</div>
          <div class="only flex-center">
            <div class="flex-center" :class="pageData.printingColor == 'BW' ? 'act' : ''" @click="onChange('printingColor', 'BW')">黑白</div>
            <div class="flex-center" :class="pageData.printingColor == 'COLOR' ? 'act' : ''" @click="onChange('printingColor', 'COLOR')">彩色</div>
          </div>
        </div>
        <div class="flex-between" v-show="name=='U盘打印'">
          <div>单双面</div>
          <div class="only flex-center">
            <div class="flex-center" :class="pageData.printingFaces == 'SINGLE' ? 'act' : ''" @click="onChange('printingFaces', 'SINGLE')">单面</div>
            <div class="flex-center" :class="pageData.printingFaces == 'DOUBLE' ? 'act' : ''" @click="onChange('printingFaces', 'DOUBLE')">双面</div>
          </div>
        </div>
        <div class="flex-between">
          <div>份数</div>
          <div class="import flex-center">
            <img src="../assets/demo14.png" alt="" @click="variable(pageData.copies < 2 ? 1 : pageData.copies - 1)" />
            <input :value="pageData.copies" type="number" min="1" disabled/>
            <img src="../assets/demo15.png" alt="" @click="variable(pageData.copies + 1)" />
          </div>
        </div>
        <div class="btn flex-center" @click="skip('pay', name)">下一步</div>
      </div>
    </div>
  </div>
</template>

export default {
  name: 'argument',
  components: {
    navbar
  },
  provide() {
    return {
      title: '',
      type: this.name
    }
  },
  data() {
    return {
      name: this.cite.modeName,
      pageData: {
        name: '文件名称……文件名称.doc', //文件名称
        specification: 'A4', //纸张规格
        printingColor: 'BW', //颜色
        printingFaces: 'SINGLE', //单双面
        copies: 1, //份数
      }
    }
  },
  methods: {
    skip(href, name) {
      let {pageData} = this
      this.cite.parameter = pageData

this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    onChange(name, val) {
      this.pageData[name] = val
    },
    variable(num) {
      this.pageData.copies = num
    }
  },
  mounted() {
    // console.log('打印文件',this.cite.selectedFile)
    this.cite.fileNum = this.cite.selectedFile.length
  }
}
</script>

.css1 {
    height: 100%;
    background: #ffffff;
    box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14);
    border-radius: 1.63rem;
  }

.left {
    width: 46.44rem;
    margin-right: 1.88rem;
    .css1();

.title {
      font-size: 2.88rem;
      font-weight: bold;
      color: #d41212;
      line-height: 4.06rem;
      padding: 4.13rem 0 2.44rem;
    }

.content {
      width: 37rem;
      font-size: 2.25rem;
      font-weight: bold;
      color: #323232;
      line-height: 3rem;
      margin: 0 auto;
      text-align: left;
      text-indent: 2em;
    }
  }

.right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 53.19rem;
    .css1();
    padding: 0 4.81rem;
    font-size: 1.88rem;
    font-weight: 400;
    color: #323232;
    line-height: 3.75rem;

.name {
      margin-top: 3.19rem;
    }

.only {
      width: 17.25rem;
      height: 3.19rem;
      background: #ffffff;
      border-radius: 0.63rem;
      border: 0.06rem solid #707070;
      overflow: hidden;

div {
        width: 50%;
        font-size: 1.88rem;
        font-weight: 400;
        color: #323232;
        line-height: 2.63rem;
        height: 100%;
        cursor: pointer;
      }

.act {
        background: #61aa8f;
        color: #ffffff;
      }
    }

.import {
      img {
        width: 2.75rem;
        height: 2.75rem;
        cursor: pointer;
      }
    }

input {
      width: 6.38rem;
      height: 3.19rem;
      background: #ffffff;
      border-radius: 0.63rem;
      border: 0.06rem solid #707070;
      font-size: 1.88rem;
      font-weight: 400;
      color: #323232;
      text-align: center;
      margin: 0 0.94rem;
    }

.optionBox {
      select {
        width: 13.69rem;
        height: 3.19rem;
        padding-right: 3.56rem;
        border-radius: 0.63rem;
        border: 0.06rem solid #707070;
        font-size: 1.88rem;
        font-weight: 400;
        color: #323232;
        text-align: center;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        background: url('../assets/demo16.png') no-repeat scroll right center transparent;
        background-position-x: 11rem;
      }

select::-ms-expand {
        display: none;
      }
    }

.btn {
      width: 100%;
      height: 5.5rem;
      background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%);
      border-radius: 1.25rem;
      font-size: 1.88rem;
      font-weight: 400;
      color: #ffffff;
      line-height: 2.63rem;
      margin-top: 2.25rem;
      cursor: pointer;
    }
  }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
</style>

<template>
  
  <div class="transcoding">
    <navbar :name="name" />
    <div class="box flex-center">
      <div class="left">
        <div class="title">温馨提示</div>
        <div class="content">请根据您具体的需要选择打印需要的颜色、单双面、份数等。</div>
        <div class="content">打印参数确认好之后，即可点击/轻按“下一步”按钮完成打印任务的提交</div>
      </div>
      <div class="right">
        
        <div class="flex-between">
          <div>纸张规格</div>
          <div>{{ pageData.specification }}</div>
        </div>
        <div class="flex-between">
          <div>颜色</div>
          <div class="only flex-center">
            <div class="flex-center" :class="pageData.printingColor == 'BW' ? 'act' : ''" @click="onChange('printingColor', 'BW')">黑白</div>
            <div class="flex-center" :class="pageData.printingColor == 'COLOR' ? 'act' : ''" @click="onChange('printingColor', 'COLOR')">彩色</div>
          </div>
        </div>
        <div class="flex-between" v-show="name!='身份证打印'">
          <div>单双面</div>
          <div class="only flex-center">
            <div class="flex-center" :class="pageData.printingFaces == 'SINGLE' ? 'act' : ''" @click="onChange('printingFaces', 'SINGLE')">单面</div>
            <div class="flex-center" :class="pageData.printingFaces == 'DOUBLE' ? 'act' : ''" @click="onChange('printingFaces', 'DOUBLE')">双面</div>
          </div>
        </div>
        <div class="flex-between">
          <div>份数</div>
          <div class="import flex-center">
            <img src="../assets/demo14.png" alt="" @click="variable(pageData.copies < 2 ? 1 : pageData.copies - 1)" />
            <input :value="pageData.copies" type="number" min="1" disabled/>
            <img src="../assets/demo15.png" alt="" @click="variable(pageData.copies + 1)" />
          </div>
        </div>
        <div class="btn flex-center" @click="skip('pay', name)">下一步</div>
      </div>
    </div>
  </div>
</template>

.css1 {
    height: 100%;
    background: #ffffff;
    box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14);
    border-radius: 1.63rem;
  }

.left {
    width: 46.44rem;
    margin-right: 1.88rem;
    .css1();

.title {
      font-size: 2.88rem;
      font-weight: bold;
      color: #d41212;
      line-height: 4.06rem;
      padding: 4.13rem 0 2.44rem;
    }

.name {
      margin-top: 3.19rem;
    }

.only {
      width: 17.25rem;
      height: 3.19rem;
      background: #ffffff;
      border-radius: 0.63rem;
      border: 0.06rem solid #707070;
      overflow: hidden;

div {
        width: 50%;
        font-size: 1.88rem;
        font-weight: 400;
        color: #323232;
        line-height: 2.63rem;
        height: 100%;
        cursor: pointer;
      }

.act {
        background: #61aa8f;
        color: #ffffff;
      }
    }

.import {
      img {
        width: 2.75rem;
        height: 2.75rem;
        cursor: pointer;
      }
    }

select::-ms-expand {
        display: none;
      }
    }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
</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" v-show="false"> <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 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> </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>客服电话：{{facility.servicePhone}}</div> </div> </div> </div> </template> <script> import VueQr from 'vue-qr' export default { name: "device", components: { VueQr }, data() { return { appSrc: '', 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) } }, }, mounted() { this.load() setInterval(()=>{ if(this.cite.advertisement != this.advertisement) { this.advertisement = this.cite.advertisement } if(this.cite.facility != this.facility) { this.facility = this.cite.facility } if(this.appSrc==''&&this.cite.code!='') { this.appSrc = 'https://mps.xlmalls.com/web/'+this.cite.code console.log(this.appSrc) } },300) } }; </script> <style scoped lang="less"> .device { margin: 2rem 2rem 0; .box { align-items: flex-start; .left { width: 92.5rem; .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; 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="box2 flex-between" v-show="false"> <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 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> </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>客服电话：{{facility.servicePhone}}</div> </div> </div> </div> </template> <script> import VueQr from 'vue-qr' export default { name: "device", components: { VueQr }, data() { return { appSrc: '', advertisement: '', facility: '', src: '' }; }, methods: { skip(href, name) { 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) } }, }, mounted() { this.load() setInterval(()=>{ if(this.cite.advertisement != this.advertisement) { this.advertisement = this.cite.advertisement } if(this.cite.facility != this.facility) { this.facility = this.cite.facility } if(this.appSrc==''&&this.cite.code!='') { this.appSrc = 'https://mps.xlmalls.com/web/'+this.cite.code console.log(this.appSrc) } },300) } }; </script> <style scoped lang="less"> .device { margin: 2rem 2rem 0; .box { align-items: flex-start; .left { width: 92.5rem; .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; 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>

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" v-show="false">
          <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 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>
          </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>客服电话：{{facility.servicePhone}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import VueQr from 'vue-qr'

export default {
  name: "device",
  components: {
    VueQr
  },
  data() {
    return {
      appSrc: '',
      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)
      }
    },
  },
  mounted() {
    this.load()

setInterval(()=>{
      if(this.cite.advertisement != this.advertisement) {
        this.advertisement = this.cite.advertisement
      }
      if(this.cite.facility != this.facility) {
        this.facility = this.cite.facility
      }

if(this.appSrc==''&&this.cite.code!='') {
        this.appSrc = 'https://mps.xlmalls.com/web/'+this.cite.code
        console.log(this.appSrc)
      }
    },300)
  }
};
</script>

export default {
  name: "device",
  components: {
    VueQr
  },
  data() {
    return {
      appSrc: '',
      advertisement: '',
      facility: '',
      src: ''
    };
  },
  methods: {
    skip(href, name) {
      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)
      }
    },
  },
  mounted() {
    this.load()

if(this.appSrc==''&&this.cite.code!='') {
        this.appSrc = 'https://mps.xlmalls.com/web/'+this.cite.code
        console.log(this.appSrc)
      }
    },300)
  }
};
</script>

Ignore Space Show notes View src/views/pay.vue
<template> <!--支付确认--> <div class="pay"> <navbar :name="name"/> <div class="box"> <div class="flex-start name"> <img src="../assets/demo11.png" alt=""> <span>文件 x{{selectedFile.length}}</span> </div> <div class="info flex-start">{{ parameter.specification }}，{{ parameter.printingColor=='BW'?'黑白':'彩色' }}，{{ parameter.printingFaces=='SINGLE'?'单面':'双面' }}，{{ parameter.copies }}份</div> </div> <div class="box2 flex-between"> <div class="flex-start price"> <span>费用合计：</span> <div>￥{{ price }}</div> </div> <div class="flex-center btn" @click="skip('expense',name)">确认支付</div> </div> </div> </template> <script> import navbar from "@/components/nav"; import {getPrintPrice,submitPrintingTask} from "../api/resultApi"; export default { name: "pay", components: { navbar }, provide() { return { title: '支付', type: this.name } }, data() { return { name: this.cite.modeName, facility: this.cite.facility, selectedFile: this.cite.selectedFile, parameter: this.cite.parameter, price: 0, } }, methods: { async submitPrintingTask() { let _this = this let {parameter,facility,selectedFile} = _this let taskList = [] selectedFile.forEach(item => { taskList.push({ printType: 'DocumentPrinting', copies: parameter.copies, printDirection: 'VERTICAL', printingColor: parameter.printingColor, printingFaces: parameter.printingFaces, fileId: item.id, }) }) let data = { deviceId: facility.id, payMode: 'WX_NATIVE_PAY', taskList: taskList, } let res = await submitPrintingTask(data) _this.cite.orderId = res }, async skip(href,name) { await this.submitPrintingTask() this.$router.push({ name: href, params: { name: name } }) }, async getPrintPrice(id) { let _this = this let {parameter,facility} = _this let data = { deviceId: facility.id, printType: 'DocumentPrinting', copies: parameter.copies, printDirection: 'VERTICAL', printingColor: parameter.printingColor, printingFaces: parameter.printingFaces, fileId: id, } let res = await getPrintPrice(data) _this.price = (parseFloat(res)100+_this.price100)/100 }, load() { let {selectedFile} = this selectedFile.forEach(item => { this.getPrintPrice(item.id) }) }, }, mounted() { this.load() } } </script> <style scoped lang="less"> .pay { .css1 { width: 105.43rem; background: #FFFFFF; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; margin: 0 auto; padding: 0 2.69rem; } .box { height: 23rem; .css1(); margin-bottom: 2.5rem; .name { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; padding: 3.25rem 0 2.56rem; img { width: 3.66rem; margin-right: 1.63rem; } } .info { width: 97.94rem; height: 9.44rem; background: #F6F6F6; border-radius: 1.63rem; font-size: 2.13rem; font-weight: bold; color: #989898; line-height: 3rem; padding: 0 3.75rem; } } .box2 { height: 12.44rem; .css1(); .price { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; align-items: flex-end; div { font-size: 4.13rem; font-weight: bold; color: #D51919; line-height: 5rem; margin-left: 3rem; } } .btn { width: 51.13rem; height: 5.5rem; background: linear-gradient(132deg, #52A39D 0%, #A1C553 50%, #81D012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #FFFFFF; line-height: 2.63rem; } } } </style> <template> <!--支付确认--> <div class="pay"> <navbar :name="name"/> <div class="box"> <div class="flex-start name"> <img src="../assets/demo11.png" alt=""> <span>文件 x{{selectedFile.length}}</span> </div> <div class="info flex-start">{{ parameter.specification }}，{{ parameter.printingColor=='BW'?'黑白':'彩色' }}，{{ parameter.printingFaces=='SINGLE'?'单面':'双面' }}，{{ parameter.copies }}份</div> </div> <div class="box2 flex-between"> <div class="flex-start price"> <span>费用合计：</span> <div>￥{{ price }}</div> </div> <div class="flex-center btn" @click="skip('expense',name)">确认支付</div> </div> </div> </template> <script> import navbar from "@/components/nav"; import {getPrintPrice,submitPrintingTask} from "../api/resultApi"; export default { name: "pay", components: { navbar }, provide() { return { title: '支付', type: this.name } }, data() { return { name: this.cite.modeName, facility: this.cite.facility, selectedFile: this.cite.selectedFile, parameter: this.cite.parameter, price: 0, } }, methods: { async submitPrintingTask() { let _this = this let {parameter,facility,selectedFile} = _this let taskList = [] selectedFile.forEach(item => { taskList.push({ printType: 'DocumentPrinting', copies: parameter.copies, printDirection: 'VERTICAL', printingColor: parameter.printingColor, printingFaces: parameter.printingFaces, fileId: item.id, }) }) let data = { deviceId: facility.id, payMode: 'WX_NATIVE_PAY', taskList: taskList, } let res = await submitPrintingTask(data) _this.cite.orderId = res }, async skip(href,name) { await this.submitPrintingTask() this.$router.push({ name: href, params: { name: name } }) }, async getPrintPrice(id) { let _this = this let {parameter,facility} = _this let data = { deviceId: facility.id, printType: 'DocumentPrinting', copies: parameter.copies, printDirection: 'VERTICAL', printingColor: parameter.printingColor, printingFaces: parameter.printingFaces, fileId: id, } let res = await getPrintPrice(data) _this.price = parseFloat(res)+_this.price }, load() { let {selectedFile} = this selectedFile.forEach(item => { this.getPrintPrice(item.id) }) }, }, mounted() { this.load() } } </script> <style scoped lang="less"> .pay { .css1 { width: 105.43rem; background: #FFFFFF; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; margin: 0 auto; padding: 0 2.69rem; } .box { height: 23rem; .css1(); margin-bottom: 2.5rem; .name { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; padding: 3.25rem 0 2.56rem; img { width: 3.66rem; margin-right: 1.63rem; } } .info { width: 97.94rem; height: 9.44rem; background: #F6F6F6; border-radius: 1.63rem; font-size: 2.13rem; font-weight: bold; color: #989898; line-height: 3rem; padding: 0 3.75rem; } } .box2 { height: 12.44rem; .css1(); .price { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; align-items: flex-end; div { font-size: 4.13rem; font-weight: bold; color: #D51919; line-height: 5rem; margin-left: 3rem; } } .btn { width: 51.13rem; height: 5.5rem; background: linear-gradient(132deg, #52A39D 0%, #A1C553 50%, #81D012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #FFFFFF; line-height: 2.63rem; } } } </style>

Ignore Space Show notes View

src/views/pay.vue

<template>

  <div class="pay">
    <navbar :name="name"/>
    <div class="box">
      <div class="flex-start name">
        <img src="../assets/demo11.png" alt="">
        <span>文件 x{{selectedFile.length}}</span>
      </div>
      <div class="info flex-start">{{ parameter.specification }}，{{ parameter.printingColor=='BW'?'黑白':'彩色' }}，{{ parameter.printingFaces=='SINGLE'?'单面':'双面' }}，{{ parameter.copies }}份</div>
    </div>
    <div class="box2 flex-between">
      <div class="flex-start price">
        <span>费用合计：</span>
        <div>￥{{ price }}</div>
      </div>
      <div class="flex-center btn" @click="skip('expense',name)">确认支付</div>
    </div>
  </div>
</template>

export default {
  name: "pay",
  components: {
    navbar
  },
  provide() {
    return {
      title: '支付',
      type: this.name
    }
  },
  data() {
    return {
      name: this.cite.modeName,
      facility: this.cite.facility,
      selectedFile: this.cite.selectedFile,
      parameter: this.cite.parameter,
      price: 0,
    }
  },
  methods: {
    async submitPrintingTask() {
      let _this = this
      let {parameter,facility,selectedFile} = _this
      let taskList = []
      selectedFile.forEach(item => {
        taskList.push({
          printType: 'DocumentPrinting',
          copies: parameter.copies,
          printDirection: 'VERTICAL',
          printingColor: parameter.printingColor,
          printingFaces: parameter.printingFaces,
          fileId: item.id,
        })
      })
      let data = {
        deviceId: facility.id,
        payMode: 'WX_NATIVE_PAY',
        taskList: taskList,
      }
      let res = await submitPrintingTask(data)
      _this.cite.orderId = res
    },
    async skip(href,name) {
      await this.submitPrintingTask()
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    async getPrintPrice(id) {
      let _this = this
      let {parameter,facility} = _this
      let data = {
        deviceId: facility.id,
        printType: 'DocumentPrinting',
        copies: parameter.copies,
        printDirection: 'VERTICAL',
        printingColor: parameter.printingColor,
        printingFaces: parameter.printingFaces,
        fileId: id,
      }
      let res = await getPrintPrice(data)
      _this.price = (parseFloat(res)*100+_this.price*100)/100
    },
    load() {
      let {selectedFile} = this
      selectedFile.forEach(item => {
        this.getPrintPrice(item.id)
      })
    },
  },
  mounted() {
    this.load()
  }
}
</script>

export default {
  name: "pay",
  components: {
    navbar
  },
  provide() {
    return {
      title: '支付',
      type: this.name
    }
  },
  data() {
    return {
      name: this.cite.modeName,
      facility: this.cite.facility,
      selectedFile: this.cite.selectedFile,
      parameter: this.cite.parameter,
      price: 0,
    }
  },
  methods: {
    async submitPrintingTask() {
      let _this = this
      let {parameter,facility,selectedFile} = _this
      let taskList = []
      selectedFile.forEach(item => {
        taskList.push({
          printType: 'DocumentPrinting',
          copies: parameter.copies,
          printDirection: 'VERTICAL',
          printingColor: parameter.printingColor,
          printingFaces: parameter.printingFaces,
          fileId: item.id,
        })
      })
      let data = {
        deviceId: facility.id,
        payMode: 'WX_NATIVE_PAY',
        taskList: taskList,
      }
      let res = await submitPrintingTask(data)
      _this.cite.orderId = res
    },
    async skip(href,name) {
      await this.submitPrintingTask()
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    async getPrintPrice(id) {
      let _this = this
      let {parameter,facility} = _this
      let data = {
        deviceId: facility.id,
        printType: 'DocumentPrinting',
        copies: parameter.copies,
        printDirection: 'VERTICAL',
        printingColor: parameter.printingColor,
        printingFaces: parameter.printingFaces,
        fileId: id,
      }
      let res = await getPrintPrice(data)
      _this.price = parseFloat(res)+_this.price
    },
    load() {
      let {selectedFile} = this
      selectedFile.forEach(item => {
        this.getPrintPrice(item.id)
      })
    },
  },
  mounted() {
    this.load()
  }
}
</script>

Show line notes below