han

hanfei / VueSharedPrinting

Browse code han master
1 parent 25378ea commit 33d4f8ce7fcb12a7e8b3764e67f3a021e8039742 hanfei authored on 15 Jan 2024

Patch

Showing 12 changed files

Ignore Space Show notes View src/assets/printing.png 0 → 100644

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 Series' if(listData.printFileType=='PDF') { name = this.cite.memberLoginVo.printerA4 \|\| 'EPSON WF-C5890 Series 副本1' } 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' }) },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> </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: '' }; }, 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(() =>{ let res = bdRequest({ method: 'post', url: '/api/Printer/Print', post: '8080', data: { "PrinterName": "EPSON WF-C5890 Series", // "SourceFile": 'D:\\TZDYSHARE\\TEMPFILES\\'+listData.printFileName, "SourceFile": 'C:\\datasource\\'+listData.printFileName, "FileType": "pdf", "PrintColor": listData.printingColor \|\| "", "DblPrt": listData.printingFaces \|\| "" } }) console.log(res) },2000) }, } } </script>

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 Series'
      if(listData.printFileType=='PDF') {
        name = this.cite.memberLoginVo.printerA4 || 'EPSON WF-C5890 Series 副本1'
      }
      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'
          })
        },1000)
      }
    },
  }
}
</script>

<template>
  <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: ''
    };
  },
  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(() =>{
        let res = bdRequest({
          method: 'post',
          url: '/api/Printer/Print',
          post: '8080',
          data: {
            "PrinterName": "EPSON WF-C5890 Series",
            // "SourceFile": 'D:\\TZDYSHARE\\TEMPFILES\\'+listData.printFileName,
            "SourceFile": 'C:\\datasource\\'+listData.printFileName,
            "FileType": "pdf",
            "PrintColor": listData.printingColor || "",
            "DblPrt": listData.printingFaces || ""
          }
        })
        console.log(res)
      },2000)
    },
  }
}
</script>

Ignore Space Show notes View src/components/nav.vue
<template> <div class="nav flex-between"> <div class="back flex-center" @click="_goHome()"> <img src="../assets/demo10.png" alt=""> 返回上一页 </div> <div class="name flex-center">{{ title }}</div> <div class="type" v-if="type">【{{ type }}】</div> </div> </template> <script> export default { name: "nav", inject: ['title','type'], methods: { _goHome() { window.history.back() // this.quit() // this.$router.push({ // name: 'device' // }) } } } </script> <style scoped lang="less"> .nav { height: 10.88rem; padding: 0 5.56rem 0 2.06rem; position: relative; font-size: 34px; font-weight: bold; color: #323232; line-height: 48px; .back { width: 21.88rem; height: 6.44rem; background: #FFFFFF; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; cursor: pointer; img { width: 2.65rem; margin-right: 1.25rem; } } .name { position: absolute; height: 100%; font-size: 3.5rem; font-weight: 400; color: #323232; line-height: 3.69rem; left: 50%; width: 30rem; margin-left: -15rem; } } </style> <template> <div class="nav flex-between"> <div class="back flex-center" @click="_goHome()"> <img src="../assets/demo10.png" alt=""> 返回首页 </div> <div class="name flex-center">{{ title }}</div> <div class="type" v-if="type">【{{ type }}】</div> </div> </template> <script> export default { name: "nav", inject: ['title','type'], methods: { _goHome() { this.quit() // this.$router.push({ // name: 'device' // }) } } } </script> <style scoped lang="less"> .nav { height: 10.88rem; padding: 0 5.56rem 0 2.06rem; position: relative; font-size: 34px; font-weight: bold; color: #323232; line-height: 48px; .back { width: 21.88rem; height: 6.44rem; background: #FFFFFF; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; cursor: pointer; img { width: 2.65rem; margin-right: 1.25rem; } } .name { position: absolute; height: 100%; font-size: 3.5rem; font-weight: 400; color: #323232; line-height: 3.69rem; left: 50%; width: 30rem; margin-left: -15rem; } } </style>

Ignore Space Show notes View

src/components/nav.vue

<template>
  <div class="nav flex-between">
    <div class="back flex-center" @click="_goHome()">
      <img src="../assets/demo10.png" alt="">
      返回上一页
    </div>
    <div class="name flex-center">{{ title }}</div>
    <div class="type" v-if="type">【{{ type }}】</div>
  </div>
</template>

<template>
  <div class="nav flex-between">
    <div class="back flex-center" @click="_goHome()">
      <img src="../assets/demo10.png" alt="">
      返回首页
    </div>
    <div class="name flex-center">{{ title }}</div>
    <div class="type" v-if="type">【{{ type }}】</div>
  </div>
</template>

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> </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> <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>
</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/utils/cite.js
// 引用地址 let inWebURL = "ws://127.0.0.1:7000/"; let baseURL = "http://127.0.0.1"; // 记录首页名称 let name = "" // 设备编号 let code = "" // 用户信息 let memberLoginVo = '' // 设备信息 let facility = ""; // 选中的文件 let selectedFile = []; // 选中的文件数 let fileNum = 25 // 打印的参数 let parameter = '' // 订单id let orderId = '' // 广告位 let advertisement = '' // 页面停留时间(秒) let tlTime = { djs: 1060,//倒计时时间 mrT: 1060,//默认时间 } let url = '' // 打印方式名称 let modeName = '' export default { modeName, url, inWebURL, baseURL, facility, selectedFile, fileNum, parameter, orderId, code, memberLoginVo, name, advertisement, tlTime }; // 引用地址 let inWebURL = "ws://127.0.0.1:7000/"; let baseURL = "http://127.0.0.1"; // 记录首页名称 let name = "" // 设备编号 let code = "" // 用户信息 let memberLoginVo = '' // 设备信息 let facility = ""; // 选中的文件 let selectedFile = []; // 打印的参数 let parameter = '' // 订单id let orderId = '' // 广告位 let advertisement = '' // 页面停留时间(秒) let tlTime = { djs: 1060,//倒计时时间 mrT: 1060,//默认时间 } let url = '' export default { url, inWebURL, baseURL, facility, selectedFile, parameter, orderId, code, memberLoginVo, name, advertisement, tlTime };

Ignore Space Show notes View

src/utils/cite.js

Ignore Space Show notes View src/utils/quit.js
// 退出登录 function quit(){ this.cite.memberLoginVo = '' this.cite.fileNum = 0 this.$router.push({ name: 'device' }) } export default quit // 退出登录 function quit(){ this.cite.memberLoginVo = '' this.$router.push({ name: 'device' }) } export default quit

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"> <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) } } </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"> <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.$route.params.name, 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) } } </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">
          <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)
  }
}
</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>

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

.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-show="advertisement==''">广告位招租</div> <!-- 图片--> <div class="advertising icon1 flex-center" v-show="advertisement.type=='img'"> <img :src="advertisement.src" model="scaleToFill"/> </div> <!-- 视频--> <div class="advertising icon1 flex-center" v-show="advertisement.type=='video'"> <!-- controls--> <video autoplay loop muted :src="advertisement.src" 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: this.cite.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() } }; </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> <template> <div class="device"> <div class="box flex-between"> <div class="left"> <!-- 广告--> <div class="advertising icon1 flex-center" v-show="advertisement==''">广告位招租</div> <!-- 图片--> <div class="advertising icon1 flex-center" v-show="advertisement.type=='img'"> <img :src="advertisement.src" model="scaleToFill"/> </div> <!-- 视频--> <div class="advertising icon1 flex-center" v-show="advertisement.type=='video'"> <!-- controls--> <video autoplay loop muted :src="advertisement.src" 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: this.cite.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 // } this.$router.push({ name: href, params: { name: name, }, }); }, load() { if(this.src == '') { this.src = this.cite.url setTimeout(()=>{ this.load() },1000) } }, }, mounted() { this.load() } }; </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-show="advertisement==''">广告位招租</div>
        
        <div class="advertising icon1 flex-center" v-show="advertisement.type=='img'">
          <img :src="advertisement.src" model="scaleToFill"/>
        </div>
        
        <div class="advertising icon1 flex-center" v-show="advertisement.type=='video'">

          <video autoplay loop muted :src="advertisement.src" 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/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: this.cite.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()
  }
};
</script>

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: this.cite.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
      // }
      this.$router.push({
        name: href,
        params: {
          name: name,
        },
      });
    },
    load() {
      if(this.src == '') {
        this.src = this.cite.url
        setTimeout(()=>{
          this.load()
        },1000)
      }
    },
  },
  mounted() {
    this.load()
  }
};
</script>

Ignore Space Show notes View src/views/expense.vue
<template> <!-- 费用支付--> <div class="expense"> <navbar :name="name"/> <div class="box flex-center"> <div class="left"> <div class="title">温馨提示</div> <div class="content">请在建议时限内尽快完成支付，如果操作超时本次打印业务可能需要重新提交。</div> </div> <div class="right"> <div class="code" @click="skip('complete',name)"> <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> </div> <div class="flex-center tip">提示：请在 {{num}} 秒内完成扫码支付</div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' import {getPayQrCode, downloadPDF, getPrintTask} from "../api/resultApi"; import VueQr from 'vue-qr' import bdRequest from "../utils/bdRequest"; export default { name: "expense", components: { navbar,VueQr }, provide() { return { title: '', type: this.name } }, data() { return { name: this.cite.modeName, appSrc: '', client: '', num: 120, selectedFile: this.cite.selectedFile, listData: { "code":"20240104231724631239-0", "copies":1, "printFileId":112, "printFileType":"PDF", "printingColor":"BW", "printingFaces":"SINGLE" } } }, methods: { skip(href,name) { this.$router.push({ name: href, params: { name: name } }) }, downloadPDF(id,name) { downloadPDF({id: id}).then(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,selectedFile} = _this let i = '', deta='' selectedFile.forEach((item,index) => { if(listData.printFileId == item.id) { i=index deta = item } }) await this.downloadPDF(listData.printFileId,listData.printFileName) console.log('打印',deta,listData.copies) setTimeout(() =>{ _this.selectedFile.splice(i, 1) // 按份数循环打印 // for(let i=0;i<listData.copies;i++) { // } let res = bdRequest({ method: 'post', url: '/api/Printer/Print', post: '8080', data: { "PrinterName": "EPSON WF-C5890 Series", // "SourceFile": 'D:\\TZDYSHARE\\TEMPFILES\\'+listData.printFileName, "SourceFile": 'C:\\datasource\\'+listData.printFileName, "FileType": "pdf", "PrintColor": listData.printingColor \|\| "", "DblPrt": listData.printingFaces \|\| "" } }) console.log(res) setTimeout(()=>{ if(_this.selectedFile.length>0) { _this.getPrintTask() }else{ _this.cite.orderId = '' _this.skip('complete',_this.name) } },1000) },2000) }, async getPrintTask() { let _this = this if(_this.cite.orderId) { let res = await getPrintTask({orderId: _this.cite.orderId}) console.log(res,'getPrintTask数据') if(res) { _this.listData = res _this.dayin() }else{ setTimeout(()=>{ _this.getPrintTask() },1000) } } }, load() { let _this = this getPayQrCode({orderId: _this.cite.orderId}).then(res => { // console.log(res.data.qrCode) if(res.qrCode) { _this.appSrc = res.qrCode // 循环查询是否需要调打印 // setTimeout(() =>{ // // _this.dayin() // _this.getPrintTask() // },1000) } }) }, countDown(num) { if(num<1) { this.quit() return } setTimeout(()=>{ this.num = num-1 this.countDown(this.num) },1000) }, }, destroyed() { // 销毁监听 // clearTimeout() }, mounted() { this.countDown(120) this.load() } } </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; } } .right { width: 62.81rem; .css1(); font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3.13rem; .code { display: inline-block; width: 23.25rem; height: 22.88rem; background: #FFFFFF; //border: 0.06rem solid #707070; margin: 2.94rem auto 1.19rem; img { width: 100%; height: auto; } } } } </style> <template> <!-- 费用支付--> <div class="expense"> <navbar :name="name"/> <div class="box flex-center"> <div class="left"> <div class="title">温馨提示</div> <div class="content">请在建议时限内尽快完成支付，如果操作超时本次打印业务可能需要重新提交。</div> </div> <div class="right"> <div class="code" @click="skip('complete',name)"> <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> </div> <div class="flex-center tip">提示：请在 {{num}} 秒内完成扫码支付</div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' import {getPayQrCode, downloadPDF, getPrintTask} from "../api/resultApi"; import VueQr from 'vue-qr' import bdRequest from "../utils/bdRequest"; export default { name: "expense", components: { navbar,VueQr }, provide() { return { title: '', type: this.name } }, data() { return { name: this.$route.params.name, appSrc: '', client: '', num: 120, selectedFile: this.cite.selectedFile, listData: { "code":"20240104231724631239-0", "copies":1, "printFileId":112, "printFileType":"PDF", "printingColor":"BW", "printingFaces":"SINGLE" } } }, methods: { skip(href,name) { this.$router.push({ name: href, params: { name: name } }) }, downloadPDF(id,name) { downloadPDF({id: id}).then(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,selectedFile} = _this let i = '', deta='' selectedFile.forEach((item,index) => { if(listData.printFileId == item.id) { i=index deta = item } }) await this.downloadPDF(listData.printFileId,listData.printFileName) console.log('打印',deta,listData.copies) setTimeout(() =>{ _this.selectedFile.splice(i, 1) // 按份数循环打印 // for(let i=0;i<listData.copies;i++) { // } let res = bdRequest({ method: 'post', url: '/api/Printer/Print', post: '8080', data: { "PrinterName": "EPSON WF-C5890 Series", // "SourceFile": 'D:\\TZDYSHARE\\TEMPFILES\\'+listData.printFileName, "SourceFile": 'C:\\datasource\\'+listData.printFileName, "FileType": "pdf", "PrintColor": listData.printingColor \|\| "", "DblPrt": listData.printingFaces \|\| "" } }) console.log(res) setTimeout(()=>{ if(_this.selectedFile.length>0) { _this.getPrintTask() }else{ _this.cite.orderId = '' _this.skip('complete',_this.name) } },1000) },2000) }, async getPrintTask() { let _this = this if(_this.cite.orderId) { let res = await getPrintTask({orderId: _this.cite.orderId}) console.log(res,'getPrintTask数据') if(res) { _this.listData = res _this.dayin() }else{ setTimeout(()=>{ _this.getPrintTask() },1000) } } }, load() { let _this = this getPayQrCode({orderId: _this.cite.orderId}).then(res => { // console.log(res.data.qrCode) if(res.qrCode) { _this.appSrc = res.qrCode setTimeout(() =>{ // _this.dayin() _this.getPrintTask() },1000) } }) }, countDown(num) { if(num<1) { this.quit() return } setTimeout(()=>{ this.num = num-1 this.countDown(this.num) },1000) }, }, destroyed() { // 销毁监听 // clearTimeout() }, mounted() { this.countDown(120) this.load() } } </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; } } .right { width: 62.81rem; .css1(); font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3.13rem; .code { display: inline-block; width: 23.25rem; height: 22.88rem; background: #FFFFFF; //border: 0.06rem solid #707070; margin: 2.94rem auto 1.19rem; img { width: 100%; height: auto; } } } } </style>

Ignore Space Show notes View

src/views/expense.vue

<template>

<div class="expense">
  <navbar :name="name"/>
  <div class="box flex-center">
    <div class="left">
      <div class="title">温馨提示</div>
      <div class="content">请在建议时限内尽快完成支付，如果操作超时本次打印业务可能需要重新提交。</div>
    </div>
    <div class="right">
      <div class="code" @click="skip('complete',name)">
        <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>
      </div>
      <div class="flex-center tip">提示：请在 {{num}} 秒内完成扫码支付</div>
    </div>
  </div>
</div>
</template>

export default {
  name: "expense",
  components: {
    navbar,VueQr
  },
  provide() {
    return {
      title: '',
      type: this.name
    }
  },
  data() {
    return {
      name: this.cite.modeName,
      appSrc: '',
      client: '',
      num: 120,

selectedFile: this.cite.selectedFile,
      listData: {
        "code":"20240104231724631239-0",
        "copies":1,
        "printFileId":112,
        "printFileType":"PDF",
        "printingColor":"BW",
        "printingFaces":"SINGLE"
      }
    }
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    downloadPDF(id,name) {
      downloadPDF({id: id}).then(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,selectedFile} = _this
      let i = '', deta=''
      selectedFile.forEach((item,index) => {
        if(listData.printFileId == item.id) {
          i=index
          deta = item
        }
      })
      await this.downloadPDF(listData.printFileId,listData.printFileName)
      console.log('打印',deta,listData.copies)
      setTimeout(() =>{
        _this.selectedFile.splice(i, 1)
        // 按份数循环打印
        // for(let i=0;i<listData.copies;i++) {
        // }

let res = bdRequest({
            method: 'post',
            url: '/api/Printer/Print',
            post: '8080',
            data: {
              "PrinterName": "EPSON WF-C5890 Series",
              // "SourceFile": 'D:\\TZDYSHARE\\TEMPFILES\\'+listData.printFileName,
              "SourceFile": 'C:\\datasource\\'+listData.printFileName,
              "FileType": "pdf",
              "PrintColor": listData.printingColor || "",
              "DblPrt": listData.printingFaces || ""
            }
          })
          console.log(res)

setTimeout(()=>{
          if(_this.selectedFile.length>0) {
            _this.getPrintTask()
          }else{
            _this.cite.orderId = ''
            _this.skip('complete',_this.name)
          }
        },1000)

},2000)
    },
    async getPrintTask() {
      let _this = this
      if(_this.cite.orderId) {
        let res = await getPrintTask({orderId: _this.cite.orderId})
        console.log(res,'getPrintTask数据')
        if(res) {
          _this.listData = res
          _this.dayin()
        }else{
          setTimeout(()=>{
            _this.getPrintTask()
          },1000)
        }
      }
    },
    load() {
      let _this = this
      getPayQrCode({orderId: _this.cite.orderId}).then(res => {
        // console.log(res.data.qrCode)
        if(res.qrCode) {
          _this.appSrc = res.qrCode
          // 循环查询是否需要调打印
          // setTimeout(() =>{
          //   // _this.dayin()
          //   _this.getPrintTask()
          // },1000)
        }
      })
    },
    countDown(num) {
      if(num<1) {
        this.quit()
        return
      }
      setTimeout(()=>{
        this.num = num-1
        this.countDown(this.num)
      },1000)
    },
  },
  destroyed() {
    // 销毁监听
    // clearTimeout()
  },
  mounted() {
    this.countDown(120)
    this.load()
  }
}
</script>

export default {
  name: "expense",
  components: {
    navbar,VueQr
  },
  provide() {
    return {
      title: '',
      type: this.name
    }
  },
  data() {
    return {
      name: this.$route.params.name,
      appSrc: '',
      client: '',
      num: 120,

},2000)
    },
    async getPrintTask() {
      let _this = this
      if(_this.cite.orderId) {
        let res = await getPrintTask({orderId: _this.cite.orderId})
        console.log(res,'getPrintTask数据')
        if(res) {
          _this.listData = res
          _this.dayin()
        }else{
          setTimeout(()=>{
            _this.getPrintTask()
          },1000)
        }
      }
    },
    load() {
      let _this = this
      getPayQrCode({orderId: _this.cite.orderId}).then(res => {
        // console.log(res.data.qrCode)
        if(res.qrCode) {
          _this.appSrc = res.qrCode
          setTimeout(() =>{
            // _this.dayin()
            _this.getPrintTask()
          },1000)
        }
      })
    },
    countDown(num) {
      if(num<1) {
        this.quit()
        return
      }
      setTimeout(()=>{
        this.num = num-1
        this.countDown(this.num)
      },1000)
    },
  },
  destroyed() {
    // 销毁监听
    // clearTimeout()
  },
  mounted() {
    this.countDown(120)
    this.load()
  }
}
</script>

Ignore Space Show notes View src/views/operationGuide.vue
<template> <!-- 操作指南--> <div class="operationGuide"> <navbar :name="name"/> <div class="box flex-between"> <div class="picture" v-show="name=='U盘打印'"> <img class="icon" src="../assets/typeUp.png" /> <div class="flex-between name"> <div>U盘</div> <div>USB接口</div> </div> </div> <div class="picture flex-center" v-show="name=='扫描打印'"> <img src="../assets/typeSMFY.png" /> </div> <div class="picture" v-show="name=='身份证打印'"> <img src="../assets/typeSFZ.png" /> </div> <div class="tip"> <div class="title">温馨提示</div> <div class="content">{{ content }}</div> <div class="btn flex-center" @click="skip('selectFile',name)">{{ btnName }}</div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' export default { name: "operationGuide", components: { navbar }, provide() { return { title: this.tit, type: this.name } }, data() { return { tit: this.cite.modeName=='U盘打印'?'资料选取提交':'资料扫描提交', name: this.cite.modeName, content: '', btnName: '', } }, methods: { skip(href,name) { this.$router.push({ name: href, params: { name: name } }) }, }, mounted() { let name = this.cite.modeName if(name=='U盘打印') { this.content='如作图所示，请先将储存有打印资料的U盘插入到USB接口中，确认正确插入后，请按下面“选取文件”按钮进行需要打印资料的选择' this.btnName='选取文件' }else if(name=='扫描打印') { this.content='如左图所示，请先将需要扫描的资料页面展开，并且需要的版面朝上放置在机器的“扫描复印”口中央（也就是说放好之后，自己是可以看到你需要的那个版面内容的。）准备就绪后，请按下面的“开始扫描”开始资料扫描。' this.btnName='开始扫描' }else if(name=='身份证打印') { this.content='如左图所示，请先将身份证水平放置在机器的“身份证”读取卡口中，准备就绪后，请按下面的“开始读卡”开始身份证信息读取。' this.btnName='开始扫描' } } } </script> <style scoped lang="less"> .operationGuide { .box { width: 114.06rem; height: 42.13rem; background: #FFFFFF; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; margin: 0 auto; .picture { margin-left: 4.75rem; img { width: 29.06rem; margin-left: 11.81rem; } .icon { margin-left: 0; width: 56rem; margin-bottom: 2.69rem; } .name { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; div { width: 30%; text-align: center; } } } .tip { margin-right: 7.81rem; width: 40rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; .title { font-size: 2.88rem; font-weight: bold; color: #D41212; line-height: 4.06rem; } .content { margin: 3rem auto 3.69rem; text-align: center; } .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; cursor: pointer; } } } } </style> <template> <!-- 操作指南--> <div class="operationGuide"> <navbar :name="name"/> <div class="box flex-between"> <div class="picture" v-show="name=='U盘打印'"> <img class="icon" src="../assets/typeUp.png" /> <div class="flex-between name"> <div>U盘</div> <div>USB接口</div> </div> </div> <div class="picture flex-center" v-show="name=='扫描打印'"> <img src="../assets/typeSMFY.png" /> </div> <div class="picture" v-show="name=='身份证打印'"> <img src="../assets/typeSFZ.png" /> </div> <div class="tip"> <div class="title">温馨提示</div> <div class="content">{{ content }}</div> <div class="btn flex-center" @click="skip('selectFile',name)">{{ btnName }}</div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' export default { name: "operationGuide", components: { navbar }, provide() { return { title: this.tit, type: this.name } }, data() { return { tit: this.$route.params.name=='U盘打印'?'资料选取提交':'资料扫描提交', name: this.$route.params.name, content: '', btnName: '', } }, methods: { skip(href,name) { this.$router.push({ name: href, params: { name: name } }) }, }, mounted() { let name = this.$route.params.name if(name=='U盘打印') { this.content='如作图所示，请先将储存有打印资料的U盘插入到USB接口中，确认正确插入后，请按下面“选取文件”按钮进行需要打印资料的选择' this.btnName='选取文件' }else if(name=='扫描打印') { this.content='如左图所示，请先将需要扫描的资料页面展开，并且需要的版面朝上放置在机器的“扫描复印”口中央（也就是说放好之后，自己是可以看到你需要的那个版面内容的。）准备就绪后，请按下面的“开始扫描”开始资料扫描。' this.btnName='开始扫描' }else if(name=='身份证打印') { this.content='如左图所示，请先将身份证水平放置在机器的“身份证”读取卡口中，准备就绪后，请按下面的“开始读卡”开始身份证信息读取。' this.btnName='开始扫描' } } } </script> <style scoped lang="less"> .operationGuide { .box { width: 114.06rem; height: 42.13rem; background: #FFFFFF; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; margin: 0 auto; .picture { margin-left: 4.75rem; img { width: 29.06rem; margin-left: 11.81rem; } .icon { margin-left: 0; width: 56rem; margin-bottom: 2.69rem; } .name { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; div { width: 30%; text-align: center; } } } .tip { margin-right: 7.81rem; width: 40rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; .title { font-size: 2.88rem; font-weight: bold; color: #D41212; line-height: 4.06rem; } .content { margin: 3rem auto 3.69rem; text-align: center; } .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; cursor: pointer; } } } } </style>

Ignore Space Show notes View

src/views/operationGuide.vue

<template>

  <div class="operationGuide">
    <navbar :name="name"/>
    <div class="box flex-between">
      <div class="picture" v-show="name=='U盘打印'">
        <img class="icon" src="../assets/typeUp.png" />
        <div class="flex-between name">
          <div>U盘</div>
          <div>USB接口</div>
        </div>
      </div>
      <div class="picture flex-center" v-show="name=='扫描打印'">
        <img src="../assets/typeSMFY.png" />
      </div>
      <div class="picture" v-show="name=='身份证打印'">
        <img src="../assets/typeSFZ.png" />
      </div>
      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">{{ content }}</div>
        <div class="btn flex-center" @click="skip('selectFile',name)">{{ btnName }}</div>
      </div>
    </div>
  </div>
</template>

export default {
  name: "operationGuide",
  components: {
    navbar
  },
  provide() {
    return {
      title: this.tit,
      type: this.name
    }
  },
  data() {
    return {
      tit: this.cite.modeName=='U盘打印'?'资料选取提交':'资料扫描提交',
      name: this.cite.modeName,
      content: '',
      btnName: '',
    }
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
  },
  mounted() {
    let name = this.cite.modeName
    if(name=='U盘打印') {
      this.content='如作图所示，请先将储存有打印资料的U盘插入到USB接口中，确认正确插入后，请按下面“选取文件”按钮进行需要打印资料的选择'
      this.btnName='选取文件'
    }else if(name=='扫描打印') {
      this.content='如左图所示，请先将需要扫描的资料页面展开，并且需要的版面朝上放置在机器的“扫描复印”口中央（也就是说放好之后，自己是可以看到你需要的那个版面内容的。）准备就绪后，请按下面的“开始扫描”开始资料扫描。'
      this.btnName='开始扫描'
    }else if(name=='身份证打印') {
      this.content='如左图所示，请先将身份证水平放置在机器的“身份证”读取卡口中，准备就绪后，请按下面的“开始读卡”开始身份证信息读取。'
      this.btnName='开始扫描'
    }
  }
}
</script>

export default {
  name: "operationGuide",
  components: {
    navbar
  },
  provide() {
    return {
      title: this.tit,
      type: this.name
    }
  },
  data() {
    return {
      tit: this.$route.params.name=='U盘打印'?'资料选取提交':'资料扫描提交',
      name: this.$route.params.name,
      content: '',
      btnName: '',
    }
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
  },
  mounted() {
    let name = this.$route.params.name
    if(name=='U盘打印') {
      this.content='如作图所示，请先将储存有打印资料的U盘插入到USB接口中，确认正确插入后，请按下面“选取文件”按钮进行需要打印资料的选择'
      this.btnName='选取文件'
    }else if(name=='扫描打印') {
      this.content='如左图所示，请先将需要扫描的资料页面展开，并且需要的版面朝上放置在机器的“扫描复印”口中央（也就是说放好之后，自己是可以看到你需要的那个版面内容的。）准备就绪后，请按下面的“开始扫描”开始资料扫描。'
      this.btnName='开始扫描'
    }else if(name=='身份证打印') {
      this.content='如左图所示，请先将身份证水平放置在机器的“身份证”读取卡口中，准备就绪后，请按下面的“开始读卡”开始身份证信息读取。'
      this.btnName='开始扫描'
    }
  }
}
</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, 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> <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.$route.params.name, 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, 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,
        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>

export default {
  name: "pay",
  components: {
    navbar
  },
  provide() {
    return {
      title: '支付',
      type: this.name
    }
  },
  data() {
    return {
      name: this.$route.params.name,
      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,
        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>

Ignore Space Show notes View src/views/selectFile.vue
<template> <!-- 选取资料--> <div class="selectFile"> <navbar :name="name" /> <!-- U盘打印--> <div class="box flex-center" v-if="name == 'U盘打印'"> <div class="tip"> <div class="title">温馨提示</div> <div class="content">请在右侧文件浏览区，找到文件存放的目录/文件夹，然后点选您要打印的文件，之后按下“确认资料”按钮。</div> </div> <div class="file tip2"> <div class="main"> <div v-for="(item, index) in UpFile" v-bind:key="index" class="flex-between li"> <div class="name">{{ item.name }}</div> <span @click="onCancel(index, 'UpFile')">删除</span> </div> </div> <div class="flex-between but"> <div class="btn flex-center"> 选择文件 <input type="file" @change="handleFileChange" /> </div> <div class="btn flex-center" @click="skip('argument', name)">确认资料</div> </div> </div> </div> <!-- 扫描打印--> <div class="box flex-center" v-if="name == '扫描打印'"> <div class="file2"> <div class="title flex-between">已完成扫描的版面 <span :class="[{ act: smfyIndex == -1 }]" @click="onChange(-1, 'smfyIndex')">预览</span></div> <div class="main flex-between"> <div class="smfyData"> <div v-for="(item, index) in imgList" v-bind:key="index" :class="['flex-center', { act: smfyIndex == index }]" @click="onChange(index, 'smfyIndex')"> <div class="name">{{ index + 1 }}</div> <span @click="onCancel(index, 'imgList')">删除</span> </div> </div> <img v-show="smfyIndex!=-1" :src="imgList[smfyIndex]" alt="" style="width: 25rem; height: 100%" /> <img v-show="smfyIndex==-1" id="myCanvas" style="width: 25rem; height: 100%" /> </div> </div> <div class="tip tip2"> <div class="title">温馨提示</div> <div class="content"> 已经扫描好的页面显示在左边的列表中，您可以点击列表中的缩略图进行核对，有不满意的请点旁边的“X”进行移除并重新扫描。如果有文件需要继续扫描，请按要求放置好资料后，按“继续扫描”。按照刚才的方法，重复扫描过程，直到完成了所有需要的页面。核对无误后，可以按“完成扫描”结束资料扫描过程。 </div> <div class="flex-between but"> <div class="btn flex-center" @click="paiz()">继续扫描</div> <div class="btn flex-center" @click="skip('argument', name)">完成扫描</div> </div> </div> </div> <!-- 身份证打印--> <div class="box flex-center" v-if="name == '身份证打印'"> <div class="file2 file3" style="margin-right: 20rem"> <div class="title">请核对您的信息</div> <div class="card" ref="captureArea" v-if="cardInfo!=''"> <div class="card-box2"> <img src="../assets/card2.png" alt="身份证正面" /> <div class="diamond"> <div class="name">{{ cardInfo.name }}</div> <div class="gender flex-start">{{ cardInfo.xbmc }} <div>{{ cardInfo.mzmc }}</div></div> <div class="birth flex-start"> <span>{{ cardInfo.birthday \| joinYear }}</span> <div>{{ cardInfo.birthday \| joinMonth }}</div> <div>{{ cardInfo.birthday \| joinDay }}</div> </div> <div class="addr">{{ cardInfo.address }}</div> <div class="idNum">{{ cardInfo.idNum }}</div> <div class="avatar"><img :src="photo" alt=""></div> </div> </div> <div class="card-box2"> <img src="../assets/card1.png" alt="身份证反面" /> <div class="diamond diamond2"> <div class="sign">{{ cardInfo.issueOrg }}</div> <div class="date">{{ cardInfo.effectDate \| joinRq}} - {{ cardInfo.expireDate \| joinRq}}</div> </div> </div> <div class="card-box" v-show="false"> <img src="../assets/card2.png" alt="身份证反面" /> <div class="card-name">{{ cardInfo.name }}</div> <div class="card-gender"> {{ cardInfo.xbmc }}<span>{{ cardInfo.mzmc }}</span> </div> <div class="card-birth"> {{ cardInfo.birthday \| joinYear }} <span class="month">{{ cardInfo.birthday \| joinMonth }}</span> <span class="day">{{ cardInfo.birthday \| joinDay }}</span> </div> <div class="card-addr"> {{ cardInfo.address }} </div> <div class="card-id">{{ cardInfo.idNum }}</div> <div class="card-avatar"> <!-- <img :src="'data:image/png;base64,'+cardInfo.photo" alt="" />--> <img :src="photo" alt=""> </div> </div> <div class="card-box" v-show="false"> <img src="../assets/card1.png"/> <div class="card-sign">{{ cardInfo.issueOrg }}</div> <div class="card-date"> {{ cardInfo.effectDate \| joinRq}} - {{ cardInfo.expireDate \| joinRq}} </div> </div> </div> </div> <div class="tip"> <div class="title">温馨提示</div> <div class="content">身份证件信息读取成功，请您核对个人信息无误后，按“信息无误，继续”按钮进行后续操作。此时您可以取回您的身份证卡片并妥善保存。</div> <div class="btn flex-center" @click="skip('argument', name)">信息无误，继续</div> </div> </div> </div> </template> <script> import navbar from "@/components/nav"; import html2canvas from "html2canvas"; import bdRequest from "../utils/bdRequest"; import { upload2Pdf,changeIdPhotoBgc } from '@/api/resultApi' import parseCardWzxx from "../utils/mz"; export default { name: 'selectFile', components: { navbar }, provide() { return { title: this.tit, type: this.name } }, filters: { joinYear(val) { return val.substring(0, 4) }, joinMonth(val) { if(val.substring(4, 5)==0) { return val.substring(5, 6) } return val.substring(4, 6) }, joinDay(val) { if(val.substring(6, 7)==0) { return val.substring(7, 8) } return val.substring(6, 8) }, joinRq(val) { return val.substring(0, 4)+'.'+val.substring(4, 6)+'.'+val.substring(6, 8) } }, data() { return { tit: this.cite.modeName == 'U盘打印' ? '资料选取提交' : '资料扫描提交', name: this.cite.modeName, path: this.cite.inWebURL, socket: '', imgList: [], smfyIndex: -1, photo: '', UpFile: [], cardInfo: '', }; }, methods: { async uploadImg(data,sta) { let _this= this for (let i = 0; i < data.length; i++) { let formData = new FormData() let file = data[i] if(sta){ // let dataURL = file.toDataURL('image/png') let name = i+'.png' file = _this.dataURLtoFile(file, name) } formData.append('file', file) // 使用数组语法添加多个文件 let res = await upload2Pdf(formData) _this.cite.selectedFile.push(res) console.log('打印文件',this.cite.selectedFile,res) } }, async skip(href, name) { if(this.UpFile.length>0) { await this.uploadImg(this.UpFile,false) }else if(this.imgList.length>0) { await this.uploadImg(this.imgList,true) }else if(this.cardInfo) { await this.captureAndDownload() } this.$router.push({ name: href, params: { name: name } }) }, async captureAndDownload() { const captureArea = this.$refs.captureArea // 使用 html2canvas 将区域内容生成为图片 const canvas = await html2canvas(captureArea) // 将 canvas 转为图片 URL const dataURL = canvas.toDataURL('image/png') const name = 'sfz.png' const file = this.dataURLtoFile(dataURL, name) this.uploadImg([file],false) }, dataURLtoFile(dataURL, filename) { const arr = dataURL.split(',') const mime = arr[0].match(/:(.?);/)[1] const bstr = atob(arr[1]) let n = bstr.length const u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], filename, { type: mime }) }, onChange(index, name) { this[name] = index }, onCancel(index, name) { if(name == 'imgList') { this.smfyIndex = -1 } this[name].splice(index, 1) }, paiz() { this.socket.send('Capture@2') }, init: function () { if (typeof WebSocket === 'undefined') { alert('您的浏览器不支持socket') } else { // 实例化socket this.socket = new WebSocket(this.path) // 监听socket连接 this.socket.onopen = this.open // 监听socket错误信息 this.socket.onerror = this.error // 监听socket消息 this.socket.onmessage = this.getMessage } }, open: function () { // console.log("socket连接成功") this.socket.send('OpenIdCardEx@0') this.socket.send('OpenDevice@1') this.socket.send('SetResolution@2@2592@1944') this.socket.send('OpenVideo') this.socket.send('RotateRight') this.socket.send('Deskew') }, error: function () { console.log('连接错误') }, getMessage: function (msg) { if (typeof msg.data == 'string') { if (msg.data.indexOf('GetDevCount') == 0) { let s = msg.data.substring(12) if ('1' == s \|\| '2' == s) { //如果是双摄像头那就需要判断 s = 2;表示当前是连接了2个设备 alert('检测到已经连接上摄像头') } } else if (msg.data.indexOf('Capture') == 0) { let s = msg.data.substring(8) if (s) { this.imgList.push('data:image/jpeg;base64,' + s) } } else if (msg.data.indexOf('MoveDetectEvent') == 0) { this.socket.send('Capture@2') } else if (msg.data.indexOf('IdCardEvent') == 0) { this.socket.send('UnFaceDetect') } else if (msg.data.indexOf('ReadIdCard') == 0) { let s = msg.data.substring(11) if ('1' == s) { this.socket.send('GetIdCardResult@\|\|') this.socket.send('GetIdCardImage@2') } } else if (msg.data.indexOf('GetIdCardResult') == 0) { let s = msg.data.substring(16) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetBarcode') == 0) { // alert(msg.data); let s = msg.data.substring(11) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetIdCardImage') == 0) { let s = msg.data.substring(15) let arr = s.split('#') let faceImg = arr[0] let myimg = document.getElementById('myCanvas3') myimg.src = 'data:image/jpeg;base64,' + faceImg } else if (msg.data.indexOf('GetBase64') == 0) { let s = msg.data.substring(10) let myimg = document.getElementById('myCanvas2') myimg.src = 'data:image/jpeg;base64,' + s alert(s) } else if (msg.data.indexOf('GetRecognitionFromFileName') == 0) { let s = msg.data.substring(27) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetOcrFromFileName') == 0) { let s = msg.data.substring(19) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetDogSN') == 0) { let s = msg.data.substring(11) let info = document.getElementById('info') info.value = s } } else { let reader = new FileReader() reader.onload = function (msg) { if (msg.target.readyState == FileReader.DONE) { let url = msg.target.result; document.getElementById('myCanvas').src = url; } } reader.readAsDataURL(msg.data) } }, close: function () { // console.log("socket已经关闭") this.socket.close() this.socket = '' }, handleFileChange(event) { let file = event.target.files[0] if (file) { this.UpFile.push(file) } }, // 获取身份证信息 async sfzCard() { let _this = this let res = await bdRequest({ method: 'get', url: '/api/readCard', post: '7846' }) if (res.errorMsg == 'OK') { // console.log(res.resultContent) _this.imgDeals(res.resultContent.photo) _this.cardInfo = parseCardWzxx(res.resultContent) }else{ setTimeout(() => { this.sfzCard() },1000) } }, // 图片处理 imgDeals(re) { let file = this.dataURLtoFile('data:image/png;base64,'+re, 'sfzTx.png') let formData = new FormData() formData.append('file', file) formData.append('colorEnum', 'CLEAR') changeIdPhotoBgc(formData).then((res)=>{ console.log(res) this.photo = res.previewPath }) }, }, destroyed() { // 销毁监听 if(this.socket) { this.close() } }, mounted() { this.cite.selectedFile = [] if (this.cite.modeName == "扫描打印") { this.init(); }else if(this.cite.modeName == "身份证打印") { this.sfzCard() } } } </script> <style scoped lang="less"> @font-face { font-family: 'STHeiti';//自定义字体名字 src: url('../assets/typeface/STHeiti.ttf') format('truetype');//定义好文件的相对地址 } @font-face { font-family: 'OCR';//自定义字体名字 src: url('../assets/typeface/OCR-B-10-BT.ttf') format('truetype');//定义好文件的相对地址 } .selectFile { .box { width: 114.06rem; height: 42.13rem; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 0 auto; .tip { //margin-right: 15.31rem; width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; } .content { margin: 3rem auto 59px; text-align: center; } } .file { margin-left: 9.69rem; .main { width: 31.63rem; height: 26.56rem; background: #ffffff; border: 0.06rem solid #707070; margin: 0 auto 2.81rem; padding: 2rem 0; overflow-y: scroll; .li { width: 80%; margin: 0 auto; padding-bottom: 1rem; span { text-decoration: underline; cursor: pointer; } } } } .tip2 { width: 52rem; .but { .btn { width: 24.44rem; position: relative; input { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; } } } } .file2 { margin-right: 9.69rem; .title { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; //text-align: left; span { text-decoration: underline; font-size: 1.5rem; font-weight: bold; color: #323232; line-height: 2rem; } .act { color: #52a39d; } } .main { width: 39.81rem; height: 31.31rem; background: #eeeeee; margin: 1.38rem auto 0; } .card { width: 42.81rem; height: 35.31rem; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-end; .card-box { width: 25rem; height: 15rem; margin-right: 5rem; position: relative; font-weight: 500; font-size: .9rem; line-height: 1rem; .card-title { padding: 1rem 0; } img { width: 25rem; } .card-sign { position: absolute; bottom: 2.6rem; left: 10.5rem; } .card-date { position: absolute; bottom: 0.5rem; left: 10.5rem; } .card-name { position: absolute; top: 2.2rem; left: 4.5rem; } .card-gender { position: absolute; top: 4.1rem; left: 4.5rem; span { margin-left: 5rem; } } .card-birth { position: absolute; top: 6.15rem; left: 4.5rem; .month { margin-left: 1.7rem; } .day { margin-left: 1.2rem; } } .card-addr { width: 11rem; position: absolute; top: 8.1rem; left: 4.5rem; text-align: left; line-height: 1.3rem; } .card-id { position: absolute; bottom: .8rem; left: 8rem; letter-spacing: .2rem; } .card-avatar { position: absolute; top: 3.2rem; right: 2rem; width: 7rem; height: 9rem; img { width: 7rem; height: 9rem; background-size: contain; } } } .card-box2 { position: relative; font-family: 'STHeiti'; margin: 0 auto; img { width: 320px; } .diamond { position: absolute; top: 0; left: 60px; right: 0; height: 100%; font-size: 12px; text-align: left; .name { font-size: 14px; font-family: 'OCR'; margin: 23px 0 10px; } .gender { div { margin-left: 50px; } } .birth { margin: 12px 0; span { margin-right: 3px; } div { width: 20px; margin-left: 11px; text-align: center; } } .addr { width: 150px; line-height: 18px; } .idNum { position: absolute; bottom: 26px; left: 46px; letter-spacing: 2px; font-family: 'OCR'; font-size: 14px; font-weight: 600; } .avatar { position: absolute; right: 20px; top: 40px; width: 82px; img { width: 100%; } } } .diamond2 { left: 130px; height: auto; top: auto; bottom: 21px; .sign { margin-bottom: 14px; } } } } } .file3 { margin-right: 28.13rem; .main { width: 20.75rem; height: 28.88rem; border: 0.06rem solid #707070; margin: 1.06rem 0 0 13.38rem; } } .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; cursor: pointer; } } .smfyData { height: 90%; width: 14.81rem; font-size: 1rem; font-weight: bold; color: #323232; line-height: 2rem; overflow: auto; cursor: pointer; .act { color: #52a39d; } .name { text-decoration: underline; } span { margin-left: 5rem; } } } </style> <template> <!-- 选取资料--> <div class="selectFile"> <navbar :name="name" /> <!-- U盘打印--> <div class="box flex-center" v-if="name == 'U盘打印'"> <div class="tip"> <div class="title">温馨提示</div> <div class="content">请在右侧文件浏览区，找到文件存放的目录/文件夹，然后点选您要打印的文件，之后按下“确认资料”按钮。</div> </div> <div class="file tip2"> <div class="main"> <div v-for="(item, index) in UpFile" v-bind:key="index" class="flex-between li"> <div class="name">{{ item.name }}</div> <span @click="onCancel(index, 'UpFile')">删除</span> </div> </div> <div class="flex-between but"> <div class="btn flex-center"> 选择文件 <input type="file" @change="handleFileChange" /> </div> <div class="btn flex-center" @click="skip('argument', name)">确认资料</div> </div> </div> </div> <!-- 扫描打印--> <div class="box flex-center" v-if="name == '扫描打印'"> <div class="file2"> <div class="title flex-between">已完成扫描的版面 <span :class="[{ act: smfyIndex == -1 }]" @click="onChange(-1, 'smfyIndex')">预览</span></div> <div class="main flex-between"> <div class="smfyData"> <div v-for="(item, index) in imgList" v-bind:key="index" :class="['flex-center', { act: smfyIndex == index }]" @click="onChange(index, 'smfyIndex')"> <div class="name">{{ index + 1 }}</div> <span @click="onCancel(index, 'imgList')">删除</span> </div> </div> <img v-show="smfyIndex!=-1" :src="imgList[smfyIndex]" alt="" style="width: 25rem; height: 100%" /> <img v-show="smfyIndex==-1" id="myCanvas" style="width: 25rem; height: 100%" /> </div> </div> <div class="tip tip2"> <div class="title">温馨提示</div> <div class="content"> 已经扫描好的页面显示在左边的列表中，您可以点击列表中的缩略图进行核对，有不满意的请点旁边的“X”进行移除并重新扫描。如果有文件需要继续扫描，请按要求放置好资料后，按“继续扫描”。按照刚才的方法，重复扫描过程，直到完成了所有需要的页面。核对无误后，可以按“完成扫描”结束资料扫描过程。 </div> <div class="flex-between but"> <div class="btn flex-center" @click="paiz()">继续扫描</div> <div class="btn flex-center" @click="skip('argument', name)">完成扫描</div> </div> </div> </div> <!-- 身份证打印--> <div class="box flex-center" v-if="name == '身份证打印'"> <div class="file2 file3" style="margin-right: 20rem"> <div class="title">请核对您的信息</div> <div class="card" ref="captureArea" v-if="cardInfo!=''"> <div class="card-box2"> <img src="../assets/card2.png" alt="身份证正面" /> <div class="diamond"> <div class="name">{{ cardInfo.name }}</div> <div class="gender flex-start">{{ cardInfo.xbmc }} <div>{{ cardInfo.mzmc }}</div></div> <div class="birth flex-start"> <span>{{ cardInfo.birthday \| joinYear }}</span> <div>{{ cardInfo.birthday \| joinMonth }}</div> <div>{{ cardInfo.birthday \| joinDay }}</div> </div> <div class="addr">{{ cardInfo.address }}</div> <div class="idNum">{{ cardInfo.idNum }}</div> <div class="avatar"><img :src="photo" alt=""></div> </div> </div> <div class="card-box2"> <img src="../assets/card1.png" alt="身份证反面" /> <div class="diamond diamond2"> <div class="sign">{{ cardInfo.issueOrg }}</div> <div class="date">{{ cardInfo.effectDate \| joinRq}} - {{ cardInfo.expireDate \| joinRq}}</div> </div> </div> <div class="card-box" v-show="false"> <img src="../assets/card2.png" alt="身份证反面" /> <div class="card-name">{{ cardInfo.name }}</div> <div class="card-gender"> {{ cardInfo.xbmc }}<span>{{ cardInfo.mzmc }}</span> </div> <div class="card-birth"> {{ cardInfo.birthday \| joinYear }} <span class="month">{{ cardInfo.birthday \| joinMonth }}</span> <span class="day">{{ cardInfo.birthday \| joinDay }}</span> </div> <div class="card-addr"> {{ cardInfo.address }} </div> <div class="card-id">{{ cardInfo.idNum }}</div> <div class="card-avatar"> <!-- <img :src="'data:image/png;base64,'+cardInfo.photo" alt="" />--> <img :src="photo" alt=""> </div> </div> <div class="card-box" v-show="false"> <img src="../assets/card1.png"/> <div class="card-sign">{{ cardInfo.issueOrg }}</div> <div class="card-date"> {{ cardInfo.effectDate \| joinRq}} - {{ cardInfo.expireDate \| joinRq}} </div> </div> </div> </div> <div class="tip"> <div class="title">温馨提示</div> <div class="content">身份证件信息读取成功，请您核对个人信息无误后，按“信息无误，继续”按钮进行后续操作。此时您可以取回您的身份证卡片并妥善保存。</div> <div class="btn flex-center" @click="skip('argument', name)">信息无误，继续</div> </div> </div> </div> </template> <script> import navbar from "@/components/nav"; import html2canvas from "html2canvas"; import bdRequest from "../utils/bdRequest"; import { upload2Pdf,changeIdPhotoBgc } from '@/api/resultApi' import parseCardWzxx from "../utils/mz"; export default { name: 'selectFile', components: { navbar }, provide() { return { title: this.tit, type: this.name } }, filters: { joinYear(val) { return val.substring(0, 4) }, joinMonth(val) { if(val.substring(4, 5)==0) { return val.substring(5, 6) } return val.substring(4, 6) }, joinDay(val) { if(val.substring(6, 7)==0) { return val.substring(7, 8) } return val.substring(6, 8) }, joinRq(val) { return val.substring(0, 4)+'.'+val.substring(4, 6)+'.'+val.substring(6, 8) } }, data() { return { tit: this.$route.params.name == 'U盘打印' ? '资料选取提交' : '资料扫描提交', name: this.$route.params.name, path: this.cite.inWebURL, socket: '', imgList: [], smfyIndex: -1, photo: '', UpFile: [], cardInfo: '', }; }, methods: { async uploadImg(data,sta) { let _this= this for (let i = 0; i < data.length; i++) { let formData = new FormData() let file = data[i] if(sta){ // let dataURL = file.toDataURL('image/png') let name = i+'.png' file = _this.dataURLtoFile(file, name) } formData.append('file', file) // 使用数组语法添加多个文件 let res = await upload2Pdf(formData) _this.cite.selectedFile.push(res) console.log('打印文件',this.cite.selectedFile,res) } }, async skip(href, name) { if(this.UpFile.length>0) { await this.uploadImg(this.UpFile,false) }else if(this.imgList.length>0) { await this.uploadImg(this.imgList,true) }else if(this.cardInfo) { await this.captureAndDownload() } this.$router.push({ name: href, params: { name: name } }) }, async captureAndDownload() { const captureArea = this.$refs.captureArea // 使用 html2canvas 将区域内容生成为图片 const canvas = await html2canvas(captureArea) // 将 canvas 转为图片 URL const dataURL = canvas.toDataURL('image/png') const name = 'sfz.png' const file = this.dataURLtoFile(dataURL, name) this.uploadImg([file],false) }, dataURLtoFile(dataURL, filename) { const arr = dataURL.split(',') const mime = arr[0].match(/:(.?);/)[1] const bstr = atob(arr[1]) let n = bstr.length const u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], filename, { type: mime }) }, onChange(index, name) { this[name] = index }, onCancel(index, name) { if(name == 'imgList') { this.smfyIndex = -1 } this[name].splice(index, 1) }, paiz() { this.socket.send('Capture@2') }, init: function () { if (typeof WebSocket === 'undefined') { alert('您的浏览器不支持socket') } else { // 实例化socket this.socket = new WebSocket(this.path) // 监听socket连接 this.socket.onopen = this.open // 监听socket错误信息 this.socket.onerror = this.error // 监听socket消息 this.socket.onmessage = this.getMessage } }, open: function () { // console.log("socket连接成功") this.socket.send('OpenIdCardEx@0') this.socket.send('OpenDevice@1') this.socket.send('SetResolution@2@2592@1944') this.socket.send('OpenVideo') this.socket.send('RotateRight') this.socket.send('Deskew') }, error: function () { console.log('连接错误') }, getMessage: function (msg) { if (typeof msg.data == 'string') { if (msg.data.indexOf('GetDevCount') == 0) { let s = msg.data.substring(12) if ('1' == s \|\| '2' == s) { //如果是双摄像头那就需要判断 s = 2;表示当前是连接了2个设备 alert('检测到已经连接上摄像头') } } else if (msg.data.indexOf('Capture') == 0) { let s = msg.data.substring(8) if (s) { this.imgList.push('data:image/jpeg;base64,' + s) } } else if (msg.data.indexOf('MoveDetectEvent') == 0) { this.socket.send('Capture@2') } else if (msg.data.indexOf('IdCardEvent') == 0) { this.socket.send('UnFaceDetect') } else if (msg.data.indexOf('ReadIdCard') == 0) { let s = msg.data.substring(11) if ('1' == s) { this.socket.send('GetIdCardResult@\|\|') this.socket.send('GetIdCardImage@2') } } else if (msg.data.indexOf('GetIdCardResult') == 0) { let s = msg.data.substring(16) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetBarcode') == 0) { // alert(msg.data); let s = msg.data.substring(11) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetIdCardImage') == 0) { let s = msg.data.substring(15) let arr = s.split('#') let faceImg = arr[0] let myimg = document.getElementById('myCanvas3') myimg.src = 'data:image/jpeg;base64,' + faceImg } else if (msg.data.indexOf('GetBase64') == 0) { let s = msg.data.substring(10) let myimg = document.getElementById('myCanvas2') myimg.src = 'data:image/jpeg;base64,' + s alert(s) } else if (msg.data.indexOf('GetRecognitionFromFileName') == 0) { let s = msg.data.substring(27) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetOcrFromFileName') == 0) { let s = msg.data.substring(19) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetDogSN') == 0) { let s = msg.data.substring(11) let info = document.getElementById('info') info.value = s } } else { let reader = new FileReader() reader.onload = function (msg) { if (msg.target.readyState == FileReader.DONE) { let url = msg.target.result; document.getElementById('myCanvas').src = url; } } reader.readAsDataURL(msg.data) } }, close: function () { // console.log("socket已经关闭") this.socket.close() this.socket = '' }, handleFileChange(event) { let file = event.target.files[0] if (file) { this.UpFile.push(file) } }, // 获取身份证信息 async sfzCard() { let _this = this let res = await bdRequest({ method: 'get', url: '/api/readCard', post: '7846' }) if (res.errorMsg == 'OK') { // console.log(res.resultContent) _this.imgDeals(res.resultContent.photo) _this.cardInfo = parseCardWzxx(res.resultContent) }else{ setTimeout(() => { this.sfzCard() },1000) } }, // 图片处理 imgDeals(re) { let file = this.dataURLtoFile('data:image/png;base64,'+re, 'sfzTx.png') let formData = new FormData() formData.append('file', file) formData.append('colorEnum', 'CLEAR') changeIdPhotoBgc(formData).then((res)=>{ console.log(res) this.photo = res.previewPath }) }, }, destroyed() { // 销毁监听 if(this.socket) { this.close() } }, mounted() { this.cite.selectedFile = [] if (this.$route.params.name == "扫描打印") { this.init(); }else if(this.$route.params.name == "身份证打印") { this.sfzCard() } } } </script> <style scoped lang="less"> @font-face { font-family: 'STHeiti';//自定义字体名字 src: url('../assets/typeface/STHeiti.ttf') format('truetype');//定义好文件的相对地址 } @font-face { font-family: 'OCR';//自定义字体名字 src: url('../assets/typeface/OCR-B-10-BT.ttf') format('truetype');//定义好文件的相对地址 } .selectFile { .box { width: 114.06rem; height: 42.13rem; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 0 auto; .tip { //margin-right: 15.31rem; width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; } .content { margin: 3rem auto 59px; text-align: center; } } .file { margin-left: 9.69rem; .main { width: 31.63rem; height: 26.56rem; background: #ffffff; border: 0.06rem solid #707070; margin: 0 auto 2.81rem; padding: 2rem 0; overflow-y: scroll; .li { width: 80%; margin: 0 auto; padding-bottom: 1rem; span { text-decoration: underline; cursor: pointer; } } } } .tip2 { width: 52rem; .but { .btn { width: 24.44rem; position: relative; input { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; } } } } .file2 { margin-right: 9.69rem; .title { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; //text-align: left; span { text-decoration: underline; font-size: 1.5rem; font-weight: bold; color: #323232; line-height: 2rem; } .act { color: #52a39d; } } .main { width: 39.81rem; height: 31.31rem; background: #eeeeee; margin: 1.38rem auto 0; } .card { width: 42.81rem; height: 35.31rem; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-end; .card-box { width: 25rem; height: 15rem; margin-right: 5rem; position: relative; font-weight: 500; font-size: .9rem; line-height: 1rem; .card-title { padding: 1rem 0; } img { width: 25rem; } .card-sign { position: absolute; bottom: 2.6rem; left: 10.5rem; } .card-date { position: absolute; bottom: 0.5rem; left: 10.5rem; } .card-name { position: absolute; top: 2.2rem; left: 4.5rem; } .card-gender { position: absolute; top: 4.1rem; left: 4.5rem; span { margin-left: 5rem; } } .card-birth { position: absolute; top: 6.15rem; left: 4.5rem; .month { margin-left: 1.7rem; } .day { margin-left: 1.2rem; } } .card-addr { width: 11rem; position: absolute; top: 8.1rem; left: 4.5rem; text-align: left; line-height: 1.3rem; } .card-id { position: absolute; bottom: .8rem; left: 8rem; letter-spacing: .2rem; } .card-avatar { position: absolute; top: 3.2rem; right: 2rem; width: 7rem; height: 9rem; img { width: 7rem; height: 9rem; background-size: contain; } } } .card-box2 { position: relative; font-family: 'STHeiti'; margin: 0 auto; img { width: 320px; } .diamond { position: absolute; top: 0; left: 60px; right: 0; height: 100%; font-size: 12px; text-align: left; .name { font-size: 14px; font-family: 'OCR'; margin: 23px 0 10px; } .gender { div { margin-left: 50px; } } .birth { margin: 12px 0; span { margin-right: 3px; } div { width: 20px; margin-left: 11px; text-align: center; } } .addr { width: 150px; line-height: 18px; } .idNum { position: absolute; bottom: 26px; left: 46px; letter-spacing: 2px; font-family: 'OCR'; font-size: 14px; font-weight: 600; } .avatar { position: absolute; right: 20px; top: 40px; width: 82px; img { width: 100%; } } } .diamond2 { left: 130px; height: auto; top: auto; bottom: 21px; .sign { margin-bottom: 14px; } } } } } .file3 { margin-right: 28.13rem; .main { width: 20.75rem; height: 28.88rem; border: 0.06rem solid #707070; margin: 1.06rem 0 0 13.38rem; } } .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; cursor: pointer; } } .smfyData { height: 90%; width: 14.81rem; font-size: 1rem; font-weight: bold; color: #323232; line-height: 2rem; overflow: auto; cursor: pointer; .act { color: #52a39d; } .name { text-decoration: underline; } span { margin-left: 5rem; } } } </style>

Ignore Space Show notes View

src/views/selectFile.vue

<template>
  
  <div class="selectFile">
    <navbar :name="name" />
    
    <div class="box flex-center" v-if="name == 'U盘打印'">
      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">请在右侧文件浏览区，找到文件存放的目录/文件夹，然后点选您要打印的文件，之后按下“确认资料”按钮。</div>
      </div>
      <div class="file tip2">
        <div class="main">
          <div v-for="(item, index) in UpFile" v-bind:key="index" class="flex-between li">
            <div class="name">{{ item.name }}</div>
            <span @click="onCancel(index, 'UpFile')">删除</span>
          </div>
        </div>
        <div class="flex-between but">
          <div class="btn flex-center">
            选择文件
            <input type="file" @change="handleFileChange" />
          </div>
          <div class="btn flex-center" @click="skip('argument', name)">确认资料</div>
        </div>
      </div>
    </div>
    
    <div class="box flex-center" v-if="name == '扫描打印'">
      <div class="file2">
        <div class="title flex-between">已完成扫描的版面 <span :class="[{ act: smfyIndex == -1 }]" @click="onChange(-1, 'smfyIndex')">预览</span></div>
        <div class="main flex-between">
          <div class="smfyData">
            <div v-for="(item, index) in imgList" v-bind:key="index" :class="['flex-center', { act: smfyIndex == index }]" @click="onChange(index, 'smfyIndex')">
              <div class="name">{{ index + 1 }}</div>
              <span @click="onCancel(index, 'imgList')">删除</span>
            </div>
          </div>
          <img v-show="smfyIndex!=-1" :src="imgList[smfyIndex]" alt="" style="width: 25rem; height: 100%" />
          <img v-show="smfyIndex==-1" id="myCanvas" style="width: 25rem; height: 100%" />
        </div>
      </div>
      <div class="tip tip2">
        <div class="title">温馨提示</div>
        <div class="content">
          已经扫描好的页面显示在左边的列表中，您可以点击列表中的缩略图进行核对，有不满意的请点旁边的“X”进行移除并重新扫描。如果有文件需要继续扫描，请按要求放置好资料后，按“继续扫描”。
          按照刚才的方法，重复扫描过程，直到完成了所有需要的页面。核对无误后，可以按“完成扫描”结束资料扫描过程。
        </div>
        <div class="flex-between but">
          <div class="btn flex-center" @click="paiz()">继续扫描</div>
          <div class="btn flex-center" @click="skip('argument', name)">完成扫描</div>
        </div>
      </div>
    </div>
    
    <div class="box flex-center" v-if="name == '身份证打印'">
      <div class="file2 file3" style="margin-right: 20rem">
        <div class="title">请核对您的信息</div>
        <div class="card" ref="captureArea" v-if="cardInfo!=''">
          <div class="card-box2">
            <img src="../assets/card2.png" alt="身份证正面" />
            <div class="diamond">
              <div class="name">{{ cardInfo.name }}</div>
              <div class="gender flex-start">{{ cardInfo.xbmc }} <div>{{ cardInfo.mzmc }}</div></div>
              <div class="birth flex-start">
                <span>{{ cardInfo.birthday | joinYear }}</span>
                <div>{{ cardInfo.birthday | joinMonth }}</div>
                <div>{{ cardInfo.birthday | joinDay }}</div>
              </div>
              <div class="addr">{{ cardInfo.address }}</div>
              <div class="idNum">{{ cardInfo.idNum }}</div>
              <div class="avatar"><img :src="photo" alt=""></div>
            </div>
          </div>
          <div class="card-box2">
            <img src="../assets/card1.png" alt="身份证反面" />
            <div class="diamond diamond2">
              <div class="sign">{{ cardInfo.issueOrg }}</div>
              <div class="date">{{ cardInfo.effectDate | joinRq}} - {{ cardInfo.expireDate | joinRq}}</div>
            </div>
          </div>
          <div class="card-box" v-show="false">
            <img src="../assets/card2.png" alt="身份证反面" />
            <div class="card-name">{{ cardInfo.name }}</div>
            <div class="card-gender">
              {{ cardInfo.xbmc }}<span>{{ cardInfo.mzmc }}</span>
            </div>
            <div class="card-birth">
              {{ cardInfo.birthday | joinYear }}
              <span class="month">{{ cardInfo.birthday | joinMonth }}</span>
              <span class="day">{{ cardInfo.birthday | joinDay }}</span>
            </div>
            <div class="card-addr">
              {{ cardInfo.address }}
            </div>
            <div class="card-id">{{ cardInfo.idNum }}</div>
            <div class="card-avatar">

              <img :src="photo" alt="">
            </div>
          </div>
          <div class="card-box" v-show="false">
            <img src="../assets/card1.png"/>
            <div class="card-sign">{{ cardInfo.issueOrg  }}</div>
            <div class="card-date">
              {{ cardInfo.effectDate | joinRq}} - {{ cardInfo.expireDate | joinRq}}
            </div>
          </div>
        </div>
      </div>
      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">身份证件信息读取成功，请您核对个人信息无误后，按“信息无误，继续”按钮进行后续操作。此时您可以取回您的身份证卡片并妥善保存。</div>
        <div class="btn flex-center" @click="skip('argument', name)">信息无误，继续</div>
      </div>
    </div>
  </div>
</template>

UpFile: [],

cardInfo: '',
    };
  },
  methods: {
    async uploadImg(data,sta) {
      let _this= this
      for (let i = 0; i < data.length; i++) {
        let formData = new FormData()
        let file = data[i]
        if(sta){
          // let dataURL = file.toDataURL('image/png')
          let name = i+'.png'
          file = _this.dataURLtoFile(file, name)
        }
        formData.append('file', file) // 使用数组语法添加多个文件
        let res = await upload2Pdf(formData)
        _this.cite.selectedFile.push(res)
        console.log('打印文件',this.cite.selectedFile,res)
      }

},
    async skip(href, name) {
      if(this.UpFile.length>0) {
        await this.uploadImg(this.UpFile,false)
      }else if(this.imgList.length>0) {
        await this.uploadImg(this.imgList,true)
      }else if(this.cardInfo) {
        await this.captureAndDownload()
      }
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    async captureAndDownload() {
      const captureArea = this.$refs.captureArea

// 使用 html2canvas 将区域内容生成为图片
      const canvas = await html2canvas(captureArea)

// 将 canvas 转为图片 URL
      const dataURL = canvas.toDataURL('image/png')
      const name = 'sfz.png'
      const file = this.dataURLtoFile(dataURL, name)
      this.uploadImg([file],false)
    },
    dataURLtoFile(dataURL, filename) {
      const arr = dataURL.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, { type: mime })
    },
    onChange(index, name) {
      this[name] = index
    },
    onCancel(index, name) {
      if(name == 'imgList') {
        this.smfyIndex = -1
      }
      this[name].splice(index, 1)
    },
    paiz() {
      this.socket.send('Capture@2')
    },
    init: function () {
      if (typeof WebSocket === 'undefined') {
        alert('您的浏览器不支持socket')
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path)
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage
      }
    },
    open: function () {
      // console.log("socket连接成功")
      this.socket.send('OpenIdCardEx@0')
      this.socket.send('OpenDevice@1')
      this.socket.send('SetResolution@2@2592@1944')
      this.socket.send('OpenVideo')
      this.socket.send('RotateRight')
      this.socket.send('Deskew')
    },
    error: function () {
      console.log('连接错误')
    },
    getMessage: function (msg) {
      if (typeof msg.data == 'string') {
        if (msg.data.indexOf('GetDevCount') == 0) {
          let s = msg.data.substring(12)
          if ('1' == s || '2' == s) {
            //如果是双摄像头 那就需要判断 s = 2;表示当前是连接了2个设备
            alert('检测到已经连接上摄像头')
          }
        } else if (msg.data.indexOf('Capture') == 0) {
          let s = msg.data.substring(8)
          if (s) {
            this.imgList.push('data:image/jpeg;base64,' + s)
          }
        } else if (msg.data.indexOf('MoveDetectEvent') == 0) {
          this.socket.send('Capture@2')
        } else if (msg.data.indexOf('IdCardEvent') == 0) {
          this.socket.send('UnFaceDetect')
        } else if (msg.data.indexOf('ReadIdCard') == 0) {
          let s = msg.data.substring(11)
          if ('1' == s) {
            this.socket.send('GetIdCardResult@||')
            this.socket.send('GetIdCardImage@2')
          }
        } else if (msg.data.indexOf('GetIdCardResult') == 0) {
          let s = msg.data.substring(16)

let info = document.getElementById('info')
          info.value = s
        } else if (msg.data.indexOf('GetBarcode') == 0) {
          // alert(msg.data);
          let s = msg.data.substring(11)

let info = document.getElementById('info')
          info.value = s
        } else if (msg.data.indexOf('GetIdCardImage') == 0) {
          let s = msg.data.substring(15)
          let arr = s.split('#')
          let faceImg = arr[0]

let myimg = document.getElementById('myCanvas3')
          myimg.src = 'data:image/jpeg;base64,' + faceImg
        } else if (msg.data.indexOf('GetBase64') == 0) {
          let s = msg.data.substring(10)

let myimg = document.getElementById('myCanvas2')
          myimg.src = 'data:image/jpeg;base64,' + s
          alert(s)
        } else if (msg.data.indexOf('GetRecognitionFromFileName') == 0) {
          let s = msg.data.substring(27)

let info = document.getElementById('info')
          info.value = s
        } else if (msg.data.indexOf('GetOcrFromFileName') == 0) {
          let s = msg.data.substring(19)

let info = document.getElementById('info')
          info.value = s
        } else if (msg.data.indexOf('GetDogSN') == 0) {
          let s = msg.data.substring(11)

let info = document.getElementById('info')
          info.value = s
        }
      } else {
        let reader = new FileReader()

reader.onload = function (msg) {
          if (msg.target.readyState == FileReader.DONE) {
            let url = msg.target.result;
            document.getElementById('myCanvas').src = url;
          }
        }

reader.readAsDataURL(msg.data)
      }
    },
    close: function () {
      // console.log("socket已经关闭")
      this.socket.close()
      this.socket = ''
    },

handleFileChange(event) {
      let file = event.target.files[0]
      if (file) {
        this.UpFile.push(file)
      }
    },

// 获取身份证信息
    async sfzCard() {
      let _this = this
      let res = await bdRequest({
        method: 'get',
        url: '/api/readCard',
        post: '7846'
      })
      if (res.errorMsg == 'OK') {
        // console.log(res.resultContent)
        _this.imgDeals(res.resultContent.photo)
        _this.cardInfo = parseCardWzxx(res.resultContent)

}else{
        setTimeout(() => {
          this.sfzCard()
        },1000)
      }
    },
    // 图片处理
    imgDeals(re) {
      let file = this.dataURLtoFile('data:image/png;base64,'+re, 'sfzTx.png')
      let formData = new FormData()
      formData.append('file', file)
      formData.append('colorEnum', 'CLEAR')
      changeIdPhotoBgc(formData).then((res)=>{
        console.log(res)
        this.photo = res.previewPath
      })
    },
  },
  destroyed() {
    // 销毁监听
    if(this.socket) {
      this.close()
    }
  },
  mounted() {
    this.cite.selectedFile = []
    if (this.cite.modeName == "扫描打印") {
      this.init();
    }else if(this.cite.modeName == "身份证打印") {
      this.sfzCard()
    }
  }
}
</script>

UpFile: [],

// 使用 html2canvas 将区域内容生成为图片
      const canvas = await html2canvas(captureArea)

let info = document.getElementById('info')
          info.value = s
        } else if (msg.data.indexOf('GetBarcode') == 0) {
          // alert(msg.data);
          let s = msg.data.substring(11)

let info = document.getElementById('info')
          info.value = s
        } else if (msg.data.indexOf('GetOcrFromFileName') == 0) {
          let s = msg.data.substring(19)

let info = document.getElementById('info')
          info.value = s
        } else if (msg.data.indexOf('GetDogSN') == 0) {
          let s = msg.data.substring(11)

let info = document.getElementById('info')
          info.value = s
        }
      } else {
        let reader = new FileReader()

reader.readAsDataURL(msg.data)
      }
    },
    close: function () {
      // console.log("socket已经关闭")
      this.socket.close()
      this.socket = ''
    },

handleFileChange(event) {
      let file = event.target.files[0]
      if (file) {
        this.UpFile.push(file)
      }
    },

}else{
        setTimeout(() => {
          this.sfzCard()
        },1000)
      }
    },
    // 图片处理
    imgDeals(re) {
      let file = this.dataURLtoFile('data:image/png;base64,'+re, 'sfzTx.png')
      let formData = new FormData()
      formData.append('file', file)
      formData.append('colorEnum', 'CLEAR')
      changeIdPhotoBgc(formData).then((res)=>{
        console.log(res)
        this.photo = res.previewPath
      })
    },
  },
  destroyed() {
    // 销毁监听
    if(this.socket) {
      this.close()
    }
  },
  mounted() {
    this.cite.selectedFile = []
    if (this.$route.params.name == "扫描打印") {
      this.init();
    }else if(this.$route.params.name == "身份证打印") {
      this.sfzCard()
    }
  }
}
</script>

Show line notes below