han

hanfei / VueSharedPrinting

Browse code han master
1 parent fc14ba5 commit 15de343aeeeb500e99d763a262d1e24e2493d51f hanfei authored on 6 Sep

Patch

Showing 2 changed files

Ignore Space Show notes View src/views/codeExtract.vue
<template> <div class="codeExtract"> <navbar :name="name"/> <!-- 提取码打印--> <div :class="['box', 'flex-center',{ 'screenPortrait': isVertical }]"> <div class="main"> <!-- <div class="tit">取件码提取打印</div>--> <div class="flex-center"> <input v-model="qjmData" class="myInput" disabled placeholder="请输入取件码" type="text"> </div> <div class="numjp flex-between"> <div v-for="item in numL" :key="item" class="li flex-center" @click="onImport(item)">{{ item }}</div> </div> <div class="btn flex-center" @click="open()">提取打印</div> </div> <div class="tip"> <div class="title">温馨提示</div> <div class="content"> 请在左边的取件码输入框中输入需要打印订单的取件码，然后点按下面的“提取打印”按钮开始打印。取件码可从小程序的个人中心-打印记录中对应的打印订单信息中获取。取件码作为取件一次性使用有效，如无法提取打印时，请核对改取件码是否已经使用过并已失效。 </div> </div> </div> <!-- 预约文件选择--> <div v-if="listSta"> <div class="curtain" @click="listSta=false"></div> <div class="onPopup"> <div class="list"> <div v-for="(item,index) in list" class="flex-between li" :key="item" @click="xzwj(index)"> <div class="flex-start"> <div v-show="item.sta===true" class="yuanIcon flex-center act"><div></div></div> <div v-show="!(item.sta===true)" class="yuanIcon flex-center"></div> <div> <div class="name ellipsis-1">{{ item.printTaskVoList[0].fileName }}</div> <div>{{ item.printTaskVoList.length }}个文件</div> </div> </div> <div class="time">{{ item.createTime }}</div> </div> </div> <div class="flex-center btn" @click="printAll()">确认打印</div> <!-- <div class="flex-center btn" @click="listSta=false">取消</div>--> </div> </div> </div> </template> <script> import navbar from '@/components/nav' import {orderGetReservationPrintOrderByPickupCode, orderSubmitPickupCodePrintingTaskByDevice} from "@/api/resultApi"; import alert from "@/utils/alert"; export default { name: 'codeExtract', components: { navbar }, provide() { return { title: this.tit, type: this.name } }, data() { return { tit: '取件码打印', name: '取件码打印', qjmData: '', numL: [1, 2, 3, 4, 5, 6, 7, 8, 9, '清除', '0', '删除'], list: [], listSta: false, isVertical: false } }, created() { this.isVertical = this.cite.isVertical }, methods: { onImport(num) { let _this = this if (num === '清除') { _this.qjmData = '' return } else if (num === '删除') { _this.qjmData = _this.qjmData.slice(0, _this.qjmData.length - 1) return } else if (_this.qjmData.length > 12) { return } _this.qjmData = _this.qjmData + num }, open() { let _this = this // let data = { // deviceCode: _this.cite.code, // pickupCode: _this.qjmData // } if (_this.qjmData.length < 6) { this.cite.state = { name: '请最少输入6位取件码！', sta: true } return } _this.printList() // orderSubmitPrintingTask(data).then(res => { // if(res.code) { // this.cite.state = { // name: res.msg, // sta: true // } // } // }).catch(error => { // alert(error, this) // }) }, printList() { let _this = this let data = { pickupCode: _this.qjmData } orderGetReservationPrintOrderByPickupCode(data).then(res => { if(res.code) { _this.cite.state = { name: res.msg, sta: true } }else{ console.log('printList', res) if (res.length < 1) { _this.cite.state = { name: '该取件码没有打印文件！', sta: true } } else if (res.length === 1) { _this.printAll(res[0].code) } else { res.forEach(item => { item.sta= false }) _this.list = res \|\| [] _this.xzwj(0) _this.listSta = true } } }).catch(error => { alert(error, this) }) }, // 打印 printAll(code) { let _this = this if(!code) { this.list.forEach(item=>{ if(item.sta) { code = item.code } }) } if(!code) { this.cite.state = { name: '请选择打印文件！', sta: true } return } let data = { code: code, deviceCode: _this.cite.code, pickupCode: _this.qjmData } orderSubmitPickupCodePrintingTaskByDevice(data).then(res => { if(res.code) { this.cite.state = { name: res.msg, sta: true } }else{ this.listSta = false } }).catch(error => { alert(error, this) }) }, xzwj(ind) { let re = this.list re.forEach((item, i) => { if (i === ind) { item.sta = true } else { item.sta = false } }) this.list = re }, } } </script> <style lang="less" scoped> @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'); //定义好文件的相对地址 } .codeExtract { .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; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; .main { width: 32.6875rem; margin-right: 18.75rem; .myInput { width: 100%; padding: 0 1.5rem; height: 5.625rem; font-size: 1.875rem; margin: 1.25rem 0 0; border-radius: 1.25rem; border: 0.0625rem solid #C9C7C0; } } .tip { width: 40rem; .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; } .content { margin: 3rem auto; 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; } .numjp { flex-wrap: wrap; width: 25rem; font-size: 1.75rem; margin: 1.25rem auto 0.625rem; .li { width: 6.875rem; height: 3.125rem; margin-bottom: 1.25rem; border: 0.0625rem solid #ccc; border-radius: 0.625rem; cursor: pointer; } } } .curtain { position: fixed; top: 0; left: 0; background: #000; width: 100%; height: 100%; opacity: 0.3; z-index: 10; } .onPopup { width: 320px; background: #FFFFFF; border-radius: 10px; position: fixed; top: 50%; left: 50%; margin-top: -230px; margin-left: -185px; padding: 0 25px 30px; z-index: 20; .list { max-height: 300px; overflow: auto; } .li { font-weight: 400; font-size: 14px; color: #666666; border-bottom: 1px solid #E8E8E8; padding: 20px 0 15px; text-align: left; .name { font-size: 18px; color: #333333; width: 180px; } .yuanIcon { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #C3C3C3; margin-right: 10px; } .act { border: 1px solid #7DB575; div { width: 18px; height: 18px; background: linear-gradient(-90deg, #52A39D 0%, #A1C553 100%); border-radius: 50%; } } } .btn { font-weight: bold; font-size: 18px; color: #FFFFFF; width: 100%; height: 48px; background: linear-gradient(-90deg, #52A39D 0%, #A1C553 100%); border-radius: 24px; margin-top: 25px; cursor: pointer; } } .screenPortrait { width: auto; margin: 0 3rem; height: auto; padding: 3rem; flex-wrap: wrap; .main { margin: 8rem 0 10rem; } } } </style> <template> <div class="codeExtract"> <navbar :name="name"/> <!-- 提取码打印--> <div class="box flex-center"> <div class="main"> <!-- <div class="tit">取件码提取打印</div>--> <div class="flex-center"> <input v-model="qjmData" class="myInput" disabled placeholder="请输入取件码" type="text"> </div> <div class="numjp flex-between"> <div v-for="item in numL" :key="item" class="li flex-center" @click="onImport(item)">{{ item }}</div> </div> <div class="btn flex-center" @click="open()">提取打印</div> </div> <div class="tip"> <div class="title">温馨提示</div> <div class="content"> 请在左边的取件码输入框中输入需要打印订单的取件码，然后点按下面的“提取打印”按钮开始打印。取件码可从小程序的个人中心-打印记录中对应的打印订单信息中获取。取件码作为取件一次性使用有效，如无法提取打印时，请核对改取件码是否已经使用过并已失效。 </div> </div> </div> <!-- 预约文件选择--> <div v-if="listSta"> <div class="curtain"></div> <div class="onPopup"> <div class="list"> <div v-for="(item,index) in list" class="flex-between li" :key="item" @click="xzwj(index)"> <div class="flex-start"> <div v-show="item.sta===true" class="yuanIcon flex-center act"><div></div></div> <div v-show="!(item.sta===true)" class="yuanIcon flex-center"></div> <div> <div class="name ellipsis-1">{{ item.printTaskVoList[0].fileName }}</div> <div>{{ item.printTaskVoList.length }}个文件</div> </div> </div> <div class="time">{{ item.createTime }}</div> </div> </div> <div class="flex-center btn" @click="printAll()">确认打印</div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' import {orderGetReservationPrintOrderByPickupCode, orderSubmitPickupCodePrintingTaskByDevice} from "@/api/resultApi"; import alert from "@/utils/alert"; export default { name: 'codeExtract', components: { navbar }, provide() { return { title: this.tit, type: this.name } }, data() { return { tit: '取件码打印', name: '取件码打印', qjmData: '', numL: [1, 2, 3, 4, 5, 6, 7, 8, 9, '清除', '0', '删除'], list: [], listSta: false, } }, methods: { onImport(num) { let _this = this if (num === '清除') { _this.qjmData = '' return } else if (num === '删除') { _this.qjmData = _this.qjmData.slice(0, _this.qjmData.length - 1) return } else if (_this.qjmData.length > 12) { return } _this.qjmData = _this.qjmData + num }, open() { let _this = this // let data = { // deviceCode: _this.cite.code, // pickupCode: _this.qjmData // } if (_this.qjmData.length < 6) { this.cite.state = { name: '请最少输入6位取件码！', sta: true } return } _this.printList() // orderSubmitPrintingTask(data).then(res => { // if(res.code) { // this.cite.state = { // name: res.msg, // sta: true // } // } // }).catch(error => { // alert(error, this) // }) }, printList() { let _this = this let data = { pickupCode: _this.qjmData } orderGetReservationPrintOrderByPickupCode(data).then(res => { if(res.code) { _this.cite.state = { name: res.msg, sta: true } }else{ console.log('printList', res) if (res.length < 1) { _this.cite.state = { name: '该取件码没有打印文件！', sta: true } } else if (res.length === 1) { _this.printAll(res[0].code) } else { res.forEach(item => { item.sta= false }) _this.list = res \|\| [] _this.xzwj(0) _this.listSta = true } } }).catch(error => { alert(error, this) }) }, // 打印 printAll(code) { let _this = this if(!code) { this.list.forEach(item=>{ if(item.sta) { code = item.code } }) } if(!code) { this.cite.state = { name: '请选择打印文件！', sta: true } return } let data = { code: code, deviceCode: _this.cite.code, pickupCode: _this.qjmData } orderSubmitPickupCodePrintingTaskByDevice(data).then(res => { if(res.code) { this.cite.state = { name: res.msg, sta: true } }else{ this.listSta = false } }).catch(error => { alert(error, this) }) }, xzwj(ind) { let re = this.list re.forEach((item, i) => { if (i === ind) { item.sta = true } else { item.sta = false } }) this.list = re }, } } </script> <style lang="less" scoped> @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'); //定义好文件的相对地址 } .codeExtract { .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; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; .main { width: 32.6875rem; margin-right: 18.75rem; .myInput { width: 100%; padding: 0 1.5rem; height: 5.625rem; font-size: 1.875rem; margin: 1.25rem 0 0; border-radius: 1.25rem; border: 0.0625rem solid #C9C7C0; } } .tip { width: 40rem; .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; } .content { margin: 3rem auto; 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; } .numjp { flex-wrap: wrap; width: 25rem; font-size: 1.75rem; margin: 1.25rem auto 0.625rem; .li { width: 6.875rem; height: 3.125rem; margin-bottom: 1.25rem; border: 0.0625rem solid #ccc; border-radius: 0.625rem; cursor: pointer; } } } .curtain { position: fixed; top: 0; left: 0; background: #000; width: 100%; height: 100%; opacity: 0.3; z-index: 10; } .onPopup { width: 320px; background: #FFFFFF; border-radius: 10px; position: fixed; top: 50%; left: 50%; margin-top: -230px; margin-left: -185px; padding: 0 25px 30px; z-index: 20; .list { max-height: 300px; overflow: auto; } .li { font-weight: 400; font-size: 14px; color: #666666; border-bottom: 1px solid #E8E8E8; padding: 20px 0 15px; text-align: left; .name { font-size: 18px; color: #333333; width: 180px; } .yuanIcon { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #C3C3C3; margin-right: 10px; } .act { border: 1px solid #7DB575; div { width: 18px; height: 18px; background: linear-gradient(-90deg, #52A39D 0%, #A1C553 100%); border-radius: 50%; } } } .btn { font-weight: bold; font-size: 18px; color: #FFFFFF; width: 100%; height: 48px; background: linear-gradient(-90deg, #52A39D 0%, #A1C553 100%); border-radius: 24px; margin-top: 25px; cursor: pointer; } } } </style>

Ignore Space Show notes View

src/views/codeExtract.vue

<template>
  <div class="codeExtract">
    <navbar :name="name"/>
    
    <div :class="['box', 'flex-center',{ 'screenPortrait': isVertical }]">
      <div class="main">
        
        <div class="flex-center">
          <input v-model="qjmData" class="myInput" disabled placeholder="请输入取件码" type="text">
        </div>
        <div class="numjp flex-between">
          <div v-for="item in numL" :key="item" class="li flex-center" @click="onImport(item)">{{ item }}</div>
        </div>
        <div class="btn flex-center" @click="open()">提取打印</div>
      </div>
      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">
          请在左边的取件码输入框中输入需要打印订单的取件码，然后点按下面的“提取打印”按钮开始打印。取件码可从小程序的个人中心-打印记录中对应的打印订单信息中获取。取件码作为取件一次性使用有效，如无法提取打印时，请核对改取件码是否已经使用过并已失效。
        </div>
      </div>
    </div>

<div v-if="listSta">
      <div class="curtain" @click="listSta=false"></div>
      <div class="onPopup">
        <div class="list">
          <div v-for="(item,index) in list" class="flex-between li" :key="item" @click="xzwj(index)">
            <div class="flex-start">
              <div v-show="item.sta===true" class="yuanIcon flex-center act"><div></div></div>
              <div v-show="!(item.sta===true)" class="yuanIcon flex-center"></div>
              <div>
                <div class="name ellipsis-1">{{ item.printTaskVoList[0].fileName }}</div>
                <div>{{ item.printTaskVoList.length }}个文件</div>
              </div>
            </div>
            <div class="time">{{ item.createTime }}</div>
          </div>
        </div>
        <div class="flex-center btn" @click="printAll()">确认打印</div>

      </div>
    </div>
  </div>
</template>

export default {
  name: 'codeExtract',
  components: {
    navbar
  },
  provide() {
    return {
      title: this.tit,
      type: this.name
    }
  },
  data() {
    return {
      tit: '取件码打印',
      name: '取件码打印',
      qjmData: '',
      numL: [1, 2, 3, 4, 5, 6, 7, 8, 9, '清除', '0', '删除'],
      list: [],
      listSta: false,
      isVertical: false
    }
  },
  created() {
    this.isVertical = this.cite.isVertical
  },
  methods: {
    onImport(num) {
      let _this = this
      if (num === '清除') {
        _this.qjmData = ''
        return
      } else if (num === '删除') {
        _this.qjmData = _this.qjmData.slice(0, _this.qjmData.length - 1)
        return
      } else if (_this.qjmData.length > 12) {
        return
      }
      _this.qjmData = _this.qjmData + num
    },
    open() {
      let _this = this
      // let data = {
      //   deviceCode: _this.cite.code,
      //   pickupCode: _this.qjmData
      // }
      if (_this.qjmData.length < 6) {
        this.cite.state = {
          name: '请最少输入6位取件码！',
          sta: true
        }
        return
      }
      _this.printList()
      // orderSubmitPrintingTask(data).then(res => {
      //   if(res.code) {
      //     this.cite.state = {
      //       name: res.msg,
      //       sta: true
      //     }
      //   }
      // }).catch(error => {
      //   alert(error, this)
      // })
    },
    printList() {
      let _this = this
      let data = {
        pickupCode: _this.qjmData
      }
      orderGetReservationPrintOrderByPickupCode(data).then(res => {
        if(res.code) {
          _this.cite.state = {
            name: res.msg,
            sta: true
          }
        }else{
          console.log('printList', res)
          if (res.length < 1) {
            _this.cite.state = {
              name: '该取件码没有打印文件！',
              sta: true
            }
          } else if (res.length === 1) {
            _this.printAll(res[0].code)
          } else {
            res.forEach(item => {
              item.sta= false
            })
            _this.list = res || []
            _this.xzwj(0)
            _this.listSta = true
          }
        }
      }).catch(error => {
        alert(error, this)
      })
    },
    // 打印
    printAll(code) {
      let _this = this
      if(!code) {
        this.list.forEach(item=>{
          if(item.sta) {
            code = item.code
          }
        })
      }
      if(!code) {
        this.cite.state = {
          name: '请选择打印文件！',
          sta: true
        }
        return
      }
        let data = {
        code: code,
        deviceCode: _this.cite.code,
        pickupCode: _this.qjmData
      }
      orderSubmitPickupCodePrintingTaskByDevice(data).then(res => {
        if(res.code) {
          this.cite.state = {
            name: res.msg,
            sta: true
          }
        }else{
          this.listSta = false
        }
      }).catch(error => {
        alert(error, this)
      })
    },
    xzwj(ind) {
      let re = this.list
      re.forEach((item, i) => {
        if (i === ind) {
          item.sta = true
        } else {
          item.sta = false
        }
      })
      this.list = re
    },
  }
}
</script>

@font-face {
  font-family: 'OCR'; //自定义字体名字
  src: url('../assets/typeface/OCR-B-10-BT.ttf') format('truetype'); //定义好文件的相对地址
}

.codeExtract {
  .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;
    font-size: 2.25rem;
    font-weight: bold;
    color: #323232;
    line-height: 3rem;

.main {
      width: 32.6875rem;
      margin-right: 18.75rem;

.myInput {
        width: 100%;
        padding: 0 1.5rem;
        height: 5.625rem;
        font-size: 1.875rem;
        margin: 1.25rem 0 0;
        border-radius: 1.25rem;
        border: 0.0625rem solid #C9C7C0;
      }
    }

.tip {
      width: 40rem;

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

.content {
        margin: 3rem auto;
        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;
    }

.numjp {
      flex-wrap: wrap;
      width: 25rem;
      font-size: 1.75rem;
      margin: 1.25rem auto 0.625rem;

.li {
        width: 6.875rem;
        height: 3.125rem;
        margin-bottom: 1.25rem;
        border: 0.0625rem solid #ccc;
        border-radius: 0.625rem;
        cursor: pointer;
      }
    }
  }
  .curtain {
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    z-index: 10;
  }
  .onPopup {
    width: 320px;
    background: #FFFFFF;
    border-radius: 10px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -230px;
    margin-left: -185px;
    padding: 0 25px 30px;
    z-index: 20;
    .list {
      max-height: 300px;
      overflow: auto;
    }
    .li {
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      border-bottom: 1px solid #E8E8E8;
      padding: 20px 0 15px;
      text-align: left;
      .name {
        font-size: 18px;
        color: #333333;
        width: 180px;
      }
      .yuanIcon {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid #C3C3C3;
        margin-right: 10px;
      }
      .act {
        border: 1px solid #7DB575;
        div {
          width: 18px;
          height: 18px;
          background: linear-gradient(-90deg, #52A39D 0%, #A1C553 100%);
          border-radius: 50%;
        }
      }
    }
    .btn {
      font-weight: bold;
      font-size: 18px;
      color: #FFFFFF;
      width: 100%;
      height: 48px;
      background: linear-gradient(-90deg, #52A39D 0%, #A1C553 100%);
      border-radius: 24px;
      margin-top: 25px;
      cursor: pointer;
    }
  }
  .screenPortrait {
    width: auto;
    margin: 0 3rem;
    height: auto;
    padding: 3rem;
    flex-wrap: wrap;
    .main {
      margin: 8rem 0 10rem;
    }
  }
}
</style>

<template>
  <div class="codeExtract">
    <navbar :name="name"/>
    
    <div class="box flex-center">
      <div class="main">
        
        <div class="flex-center">
          <input v-model="qjmData" class="myInput" disabled placeholder="请输入取件码" type="text">
        </div>
        <div class="numjp flex-between">
          <div v-for="item in numL" :key="item" class="li flex-center" @click="onImport(item)">{{ item }}</div>
        </div>
        <div class="btn flex-center" @click="open()">提取打印</div>
      </div>
      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">
          请在左边的取件码输入框中输入需要打印订单的取件码，然后点按下面的“提取打印”按钮开始打印。取件码可从小程序的个人中心-打印记录中对应的打印订单信息中获取。取件码作为取件一次性使用有效，如无法提取打印时，请核对改取件码是否已经使用过并已失效。
        </div>
      </div>
    </div>

<div v-if="listSta">
      <div class="curtain"></div>
      <div class="onPopup">
        <div class="list">
          <div v-for="(item,index) in list" class="flex-between li" :key="item" @click="xzwj(index)">
            <div class="flex-start">
              <div v-show="item.sta===true" class="yuanIcon flex-center act"><div></div></div>
              <div v-show="!(item.sta===true)" class="yuanIcon flex-center"></div>
              <div>
                <div class="name ellipsis-1">{{ item.printTaskVoList[0].fileName }}</div>
                <div>{{ item.printTaskVoList.length }}个文件</div>
              </div>
            </div>
            <div class="time">{{ item.createTime }}</div>
          </div>
        </div>
        <div class="flex-center btn" @click="printAll()">确认打印</div>
      </div>
    </div>
  </div>
</template>

export default {
  name: 'codeExtract',
  components: {
    navbar
  },
  provide() {
    return {
      title: this.tit,
      type: this.name
    }
  },
  data() {
    return {
      tit: '取件码打印',
      name: '取件码打印',
      qjmData: '',
      numL: [1, 2, 3, 4, 5, 6, 7, 8, 9, '清除', '0', '删除'],
      list: [],
      listSta: false,
    }
  },
  methods: {
    onImport(num) {
      let _this = this
      if (num === '清除') {
        _this.qjmData = ''
        return
      } else if (num === '删除') {
        _this.qjmData = _this.qjmData.slice(0, _this.qjmData.length - 1)
        return
      } else if (_this.qjmData.length > 12) {
        return
      }
      _this.qjmData = _this.qjmData + num
    },
    open() {
      let _this = this
      // let data = {
      //   deviceCode: _this.cite.code,
      //   pickupCode: _this.qjmData
      // }
      if (_this.qjmData.length < 6) {
        this.cite.state = {
          name: '请最少输入6位取件码！',
          sta: true
        }
        return
      }
      _this.printList()
      // orderSubmitPrintingTask(data).then(res => {
      //   if(res.code) {
      //     this.cite.state = {
      //       name: res.msg,
      //       sta: true
      //     }
      //   }
      // }).catch(error => {
      //   alert(error, this)
      // })
    },
    printList() {
      let _this = this
      let data = {
        pickupCode: _this.qjmData
      }
      orderGetReservationPrintOrderByPickupCode(data).then(res => {
        if(res.code) {
          _this.cite.state = {
            name: res.msg,
            sta: true
          }
        }else{
          console.log('printList', res)
          if (res.length < 1) {
            _this.cite.state = {
              name: '该取件码没有打印文件！',
              sta: true
            }
          } else if (res.length === 1) {
            _this.printAll(res[0].code)
          } else {
            res.forEach(item => {
              item.sta= false
            })
            _this.list = res || []
            _this.xzwj(0)
            _this.listSta = true
          }
        }
      }).catch(error => {
        alert(error, this)
      })
    },
    // 打印
    printAll(code) {
      let _this = this
      if(!code) {
        this.list.forEach(item=>{
          if(item.sta) {
            code = item.code
          }
        })
      }
      if(!code) {
        this.cite.state = {
          name: '请选择打印文件！',
          sta: true
        }
        return
      }
        let data = {
        code: code,
        deviceCode: _this.cite.code,
        pickupCode: _this.qjmData
      }
      orderSubmitPickupCodePrintingTaskByDevice(data).then(res => {
        if(res.code) {
          this.cite.state = {
            name: res.msg,
            sta: true
          }
        }else{
          this.listSta = false
        }
      }).catch(error => {
        alert(error, this)
      })
    },
    xzwj(ind) {
      let re = this.list
      re.forEach((item, i) => {
        if (i === ind) {
          item.sta = true
        } else {
          item.sta = false
        }
      })
      this.list = re
    },
  }
}
</script>

@font-face {
  font-family: 'OCR'; //自定义字体名字
  src: url('../assets/typeface/OCR-B-10-BT.ttf') format('truetype'); //定义好文件的相对地址
}

.main {
      width: 32.6875rem;
      margin-right: 18.75rem;

.tip {
      width: 40rem;

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

.content {
        margin: 3rem auto;
        text-align: center;
      }
    }

.numjp {
      flex-wrap: wrap;
      width: 25rem;
      font-size: 1.75rem;
      margin: 1.25rem auto 0.625rem;

Ignore Space Show notes View src/views/device.vue
<template> <div class="device"> <div :class="['box', 'flex-between', { 'vertical-width-direction': isVertical }]"> <div v-if="false" class="left"> <div v-if="advertisement == []" class="advertising icon1 flex-center">广告位招租</div> <div v-else class="advertising flex-center"> <img :src="advertisement[0].previewPath" model="scaleToFill" /> </div> </div> <div :class="['left', { 'vertical-width': isVertical }]"> <!-- <div class="zzc"></div> --> <div class="swiper-container"> <div class="swiper-wrapper"> <div v-for="(item, index) in advertisement" :key="index" class="swiper-slide"> <!-- 图片--> <div v-if="item.fileType == 'image/jpeg'" :class="['advertising', 'flex-center', { 'vertical-height': isVertical }]"> <img :src="item.previewPath" model="scaleToFill" /> </div> <div v-else-if="item.fileType == 'image/png'" :class="['advertising', 'flex-center', { 'vertical-height': isVertical }]"> <img :src="item.previewPath" model="scaleToFill" /> </div> <!-- 视频--> <div v-else :class="['advertising', 'flex-center', { 'vertical-height': isVertical }]"> <video v-if="index == swIndex" @pause="onPause" @timeupdate="onTimeupdate" @loadedmetadata="loadEdmetadata" :src="item.previewPath" autoplay muted style="width: 100%; height: 100%" ></video> </div> </div> </div> <div class="swiper-pagination"></div> </div> </div> <div v-if="false" class="left"> <!-- 广告--> <div v-if="advertisement == ''" class="advertising icon1 flex-center">广告位招租</div> <!-- 图片--> <div v-else-if="advertisement.fileType == 'image/png'" class="advertising icon1 flex-center"> <img :src="advertisement.previewPath" model="scaleToFill" /> </div> <!-- 视频--> <div v-else class="advertising icon1 flex-center"> <video :src="advertisement.outerChainPath" autoplay loop muted style="width: 100%; height: 100%"></video> </div> <div v-show="false" class="box2 flex-between"> <div class="main2 flex-center" @click="skip('explain', '联系客服')"> <img src="../assets/demo7.png" /> 联系客服 </div> <div class="main2 flex-center" @click="skip('explain', '价格查询')"> <img src="../assets/demo5.png" /> 价格查询 </div> </div> </div> <div class="right" v-if="!isVertical"> <div class="main4 flex-center"> <div> <!-- <div class="flex-center ewm" v-if="memberLoginVo!=''">--> <!-- <div class="zzc flex-center"></div>--> <!-- <VueQr :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"--> <!-- :logoMargin="0"--> <!-- :logoScale=".2" :margin="0" :size="300" :text="''" logoBackgroundColor="white">--> <!-- </VueQr>--> <!-- </div>--> <div class="flex-center ewm" @click="play"> <VueQr v-if="appSrc" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0" :logoScale="0.2" :margin="0" :size="300" :text="appSrc" logoBackgroundColor="white" ></VueQr> </div> <div class="flex-center tip"> <img src="../assets/demo9.png" /> 扫码打印手机文件 </div> </div> </div> <!-- 功能--> <div class="feature"> <div class="main icon2 flex-start" @click="skip('operationGuide', 'U盘打印')"> <img src="../assets/demo2.png" /> <div>U盘打印</div> </div> <div class="main icon3 flex-start" :style="smdysta?'background: #ccc;':''" @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 class="main icon5 flex-start" @click="skip('codeExtract', '取件码打印')"> <img class="qjmIcon" src="../assets/demo17.png" /> <div>取件码打印</div> </div> </div> </div> <!-- 竖版 --> <div class="right vertical-bottom vertical-width" v-if="isVertical"> <div class="main4 flex-center vertical-width50"> <div> <!-- <div class="flex-center ewm" v-if="memberLoginVo!=''">--> <!-- <div class="zzc flex-center"></div>--> <!-- <VueQr :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"--> <!-- :logoMargin="0"--> <!-- :logoScale=".2" :margin="0" :size="300" :text="''" logoBackgroundColor="white">--> <!-- </VueQr>--> <!-- </div>--> <div class="flex-center ewm"> <VueQr v-if="appSrc" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0" :logoScale="0.2" :margin="0" :size="300" :text="appSrc" logoBackgroundColor="white" ></VueQr> </div> <div class="flex-center tip"> <img src="../assets/demo9.png" /> 扫码打印手机文件 </div> </div> </div> <!-- 功能--> <div class="vertical-bottom-right"> <div class="main icon2 flex-start vertical-width" style="height: 8rem !important" @click="skip('operationGuide', 'U盘打印')"> <img src="../assets/demo2.png" /> <div>U盘打印</div> </div> <!-- <div class="main icon3 flex-start vertical-width50" @click="skip('operationGuide', '扫描打印')"> <img src="../assets/demo3.png" /> <div>扫描打印</div> </div> --> <div class="main icon4 flex-start vertical-width" style="height: 8rem !important" @click="skip('operationGuide', '身份证打印')"> <img src="../assets/demo4.png" /> <div>身份证打印</div> </div> <div class="main icon5 flex-start" style="height: 8rem !important" @click="skip('codeExtract', '取件码打印')"> <img class="qjmIcon" src="../assets/demo17.png" /> <div>取件码打印</div> </div> </div> </div> <div class="dbTip flex-between"> <div>机器编号：{{ cite.code }}</div> <div>客服电话：{{ facility.servicePhone }}</div> </div> </div> <audio ref="audio" class="aud"> <source src="../assets/audio/ConnectingRemind.mp3" /> </audio> </div> </template> <script> import VueQr from 'vue-qr' import {gpyError} from "@/api/bdResultApi"; export default { name: 'device', components: { VueQr }, data() { return { swIndex: 0, mySwiper: '', appSrc: '', memberLoginVo: '', advertisement: '', facility: '', src: '', isVertical: false, playTimer: '', //播放的定时任务 errTimer: null, //异常的定时器 smdysta: false, } }, methods: { skip(href, name) { let { facility } = this let { sta, name2 } = '' facility.paperNumber.forEach(item => { if (item.name.indexOf('A4') != -1) { if (item.residue < 1) { name2 = '请联系管理员添加' + item.name sta = true } } }) if (sta == true) { this.cite.state = { name: name2, sta: true } return } // if (this.cite.memberLoginVo == '') { // this.cite.state = { // name: '请扫码登录设备再操作！', // sta: true // } // return // } if (href == 'operationGuide') { if(this.smdysta) { this.cite.state = { name: '高拍仪异常暂停使用，请联系客服维修！', sta: true } return; } this.cite.modeName = name } this.$router.push({ name: href, params: { name: name } }) }, gpyError() { let _this = this gpyError().then(res => { _this.smdysta = res }) }, load() { if (this.src == '') { this.src = this.cite.url setTimeout(() => { this.load() }, 1000) } }, GGT(T) { let _this = this this.mySwiper = new this.Swiper('.swiper-container', { // allowSlidePrev: false, // allowSlideNext: false, // 改变swiper样式时，自动初始化swiper observer: true, // 监测swiper父元素，如果有变化则初始化swiper observeParents: true, loop: true, autoplay: { delay: T, disableOnInteraction: false }, pagination: { el: '.swiper-pagination' }, on: { slideChangeTransitionEnd: function () { // console.log(this.realIndex); _this.swIndex = this.realIndex if (_this.advertisement[this.realIndex].fileType == 'video/mp4') { _this.bannerLoop(false) } } } }) }, bannerLoop(sta, n) { let _this = this if (sta) { _this.mySwiper.slideTo(n) _this.mySwiper.autoplay.start() } else { _this.mySwiper.autoplay.stop() } }, onPause() { let n = this.swIndex + 1 if (n == this.advertisement.length) { n = 1 } this.bannerLoop(true, n) }, onTimeupdate() { // console.log(123,e) }, // 正在加载中 loadEdmetadata() { // console.log(456,e) }, play(addr) { let music = new Audio() music = addr this.$refs.audio.src = music this.$refs.audio.play() } }, created() {}, mounted() { this.gpyError() this.load() if (window.outerWidth === 1080 \|\| window.outerWidth === 1064) { this.cite.isVertical = true this.isVertical = true } else { this.cite.isVertical = false this.isVertical = false } // 判断是不是设备是不是异常 this.playTimer = setInterval(() => { console.log(this.cite.serveError) if (this.cite.serveError) { const addr = require('../assets/audio/ExceptionNotice.mp3') this.play(addr) } }, 60000) setInterval(() => { if (this.cite.advertisement != this.advertisement) { this.advertisement = this.cite.advertisement setTimeout(() => { this.GGT(this.advertisement[0].intervalTime * 1000) }, 500) } if (this.cite.facility != this.facility) { this.facility = this.cite.facility } if (this.cite.memberLoginVo != this.memberLoginVo) { this.memberLoginVo = this.cite.memberLoginVo } if (this.appSrc == '' && this.cite.code != '') { this.appSrc = 'https://mps.xlmalls.com/web/code/' + this.cite.code // this.appSrc = 'https://mps.xlmalls.com/web/payment/' + this.cite.code // this.appSrc = 'https://mps.xlmalls.com/web/' + this.cite.code // console.log(this.appSrc) } }, 300) }, destroyed() { clearInterval(this.playTimer) } } </script> <style lang="less" scoped> .device { margin: 2rem 2rem 0; .box { align-items: flex-start; position: relative; .left { width: 92.5rem; margin: 0; position: relative; z-index: 1; .advertising { width: 100%; height: 52rem; border-radius: 1.63rem; //margin-bottom: 1.88rem; cursor: pointer; overflow: hidden; font-size: 8rem; font-weight: 400; color: #ffffff; line-height: 8rem; img { width: 100%; height: 100%; } } .zzc { position: absolute; width: 100%; height: 100%; z-index: 99; left: 0; right: 0; } } .right { width: 22rem; } } .main { width: 100%; //height: 8rem; height: 6rem; border-radius: 1.63rem; //font-size: 1.8rem; font-size: 1.6rem; font-weight: 400; color: #ffffff; line-height: 1.8rem; margin-top: 1rem; img { width: 8rem; margin-top: -1rem; } } .icon1 { background: linear-gradient(359deg, #3dbf51 0%, #47d1a9 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(120, 229, 217, 0.45); } .icon2 { background: linear-gradient(180deg, #f2c952 0%, #db572b 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(255, 147, 128, 0.57); } .icon3 { background: linear-gradient(180deg, #84b2f7 0%, #8774d2 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(150, 135, 232, 0.3); } .icon4 { background: linear-gradient(180deg, #5be7ff 0%, #309fd8 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(104, 202, 253, 0.42); } .icon5 { background: linear-gradient(0deg, #F95555 0%, #DE2F2F 100%); box-shadow: 0 0 0.75rem 0 rgba(233, 63, 63, 0.53); } .feature { padding: 0 1.25rem; } .qjmIcon { width: 2.875rem!important; height: 4.5rem; margin: 0 41px!important; } .css1 { background: #ffffff; box-shadow: 0rem 0.63rem 1.25rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; cursor: pointer; } .main2 { width: 100%; height: 6.44rem; .css1(); font-size: 1.88rem; font-weight: bold; color: #323232; line-height: 2.63rem; img { width: 3.75rem; margin-right: 0.38rem; } } .main3 { width: 100%; height: 9.94rem; .css1(); font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; img { width: 4.25rem; margin-right: 0.88rem; } } .main4 { width: 100%; height: 25rem; .css1(); font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 2rem; .ewm { width: 18rem; height: 18rem; background: #ffffff; border: 0.06rem solid #707070; position: relative; img { width: 100%; margin: 0; } } .tip { margin-top: 1rem; } img { width: 2.31rem; margin-right: 1.19rem; } .zzc { position: absolute; background: #333; opacity: 0.5; top: 0; left: 0; width: 100%; height: 100%; } } .dbTip { position: fixed; bottom: 0; left: 0; right: 0; font-size: 1.2rem; font-weight: 400; color: #323232; height: 3rem; padding: 0 3rem; } } // 广告高度 .vertical-height { height: 72rem !important; } .vertical-width-direction { width: 100%; flex-direction: column; } .vertical-width { width: 100% !important; } .vertical-width50 { width: 48% !important; } .vertical-bottom { display: flex; // align-items: center; justify-content: space-between; flex-direction: row-reverse; margin-top: 2rem; } .vertical-bottom-right { width: 60%; margin-right: 2rem; display: flex; flex-direction: column; justify-content: space-around; } </style> <template> <div class="device"> <div :class="['box', 'flex-between', { 'vertical-width-direction': isVertical }]"> <div v-if="false" class="left"> <div v-if="advertisement == []" class="advertising icon1 flex-center">广告位招租</div> <div v-else class="advertising flex-center"> <img :src="advertisement[0].previewPath" model="scaleToFill" /> </div> </div> <div :class="['left', { 'vertical-width': isVertical }]"> <!-- <div class="zzc"></div> --> <div class="swiper-container"> <div class="swiper-wrapper"> <div v-for="(item, index) in advertisement" :key="index" class="swiper-slide"> <!-- 图片--> <div v-if="item.fileType == 'image/jpeg'" :class="['advertising', 'flex-center', { 'vertical-height': isVertical }]"> <img :src="item.previewPath" model="scaleToFill" /> </div> <div v-else-if="item.fileType == 'image/png'" :class="['advertising', 'flex-center', { 'vertical-height': isVertical }]"> <img :src="item.previewPath" model="scaleToFill" /> </div> <!-- 视频--> <div v-else :class="['advertising', 'flex-center', { 'vertical-height': isVertical }]"> <video v-if="index == swIndex" @pause="onPause" @timeupdate="onTimeupdate" @loadedmetadata="loadEdmetadata" :src="item.previewPath" autoplay muted style="width: 100%; height: 100%" ></video> </div> </div> </div> <div class="swiper-pagination"></div> </div> </div> <div v-if="false" class="left"> <!-- 广告--> <div v-if="advertisement == ''" class="advertising icon1 flex-center">广告位招租</div> <!-- 图片--> <div v-else-if="advertisement.fileType == 'image/png'" class="advertising icon1 flex-center"> <img :src="advertisement.previewPath" model="scaleToFill" /> </div> <!-- 视频--> <div v-else class="advertising icon1 flex-center"> <video :src="advertisement.outerChainPath" autoplay loop muted style="width: 100%; height: 100%"></video> </div> <div v-show="false" class="box2 flex-between"> <div class="main2 flex-center" @click="skip('explain', '联系客服')"> <img src="../assets/demo7.png" /> 联系客服 </div> <div class="main2 flex-center" @click="skip('explain', '价格查询')"> <img src="../assets/demo5.png" /> 价格查询 </div> </div> </div> <div class="right" v-if="!isVertical"> <div class="main4 flex-center"> <div> <!-- <div class="flex-center ewm" v-if="memberLoginVo!=''">--> <!-- <div class="zzc flex-center"></div>--> <!-- <VueQr :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"--> <!-- :logoMargin="0"--> <!-- :logoScale=".2" :margin="0" :size="300" :text="''" logoBackgroundColor="white">--> <!-- </VueQr>--> <!-- </div>--> <div class="flex-center ewm" @click="play"> <VueQr v-if="appSrc" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0" :logoScale="0.2" :margin="0" :size="300" :text="appSrc" logoBackgroundColor="white" ></VueQr> </div> <div class="flex-center tip"> <img src="../assets/demo9.png" /> 扫码打印手机文件 </div> </div> </div> <!-- 功能--> <div class="feature"> <div class="main icon2 flex-start" @click="skip('operationGuide', 'U盘打印')"> <img src="../assets/demo2.png" /> <div>U盘打印</div> </div> <div class="main icon3 flex-start" :style="smdysta?'background: #ccc;':''" @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 class="main icon5 flex-start" @click="skip('codeExtract', '取件码打印')"> <img class="qjmIcon" src="../assets/demo17.png" /> <div>取件码打印</div> </div> </div> </div> <!-- 竖版 --> <div class="right vertical-bottom vertical-width" v-if="isVertical"> <div class="main4 flex-center vertical-width50"> <div> <!-- <div class="flex-center ewm" v-if="memberLoginVo!=''">--> <!-- <div class="zzc flex-center"></div>--> <!-- <VueQr :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"--> <!-- :logoMargin="0"--> <!-- :logoScale=".2" :margin="0" :size="300" :text="''" logoBackgroundColor="white">--> <!-- </VueQr>--> <!-- </div>--> <div class="flex-center ewm"> <VueQr v-if="appSrc" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0" :logoScale="0.2" :margin="0" :size="300" :text="appSrc" logoBackgroundColor="white" ></VueQr> </div> <div class="flex-center tip"> <img src="../assets/demo9.png" /> 扫码打印手机文件 </div> </div> </div> <!-- 功能--> <div class="vertical-bottom-right"> <div class="main icon2 flex-start vertical-width" style="height: 10rem !important" @click="skip('operationGuide', 'U盘打印')"> <img src="../assets/demo2.png" /> <div>U盘打印</div> </div> <!-- <div class="main icon3 flex-start vertical-width50" @click="skip('operationGuide', '扫描打印')"> <img src="../assets/demo3.png" /> <div>扫描打印</div> </div> --> <div class="main icon4 flex-start vertical-width" style="height: 10rem !important" @click="skip('operationGuide', '身份证打印')"> <img src="../assets/demo4.png" /> <div>身份证打印</div> </div> </div> </div> <div class="dbTip flex-between"> <div>机器编号：{{ cite.code }}</div> <div>客服电话：{{ facility.servicePhone }}</div> </div> </div> <audio ref="audio" class="aud"> <source src="../assets/audio/ConnectingRemind.mp3" /> </audio> </div> </template> <script> import VueQr from 'vue-qr' import {gpyError} from "@/api/bdResultApi"; export default { name: 'device', components: { VueQr }, data() { return { swIndex: 0, mySwiper: '', appSrc: '', memberLoginVo: '', advertisement: '', facility: '', src: '', isVertical: false, playTimer: '', //播放的定时任务 errTimer: null, //异常的定时器 smdysta: false, } }, methods: { skip(href, name) { let { facility } = this let { sta, name2 } = '' facility.paperNumber.forEach(item => { if (item.name.indexOf('A4') != -1) { if (item.residue < 1) { name2 = '请联系管理员添加' + item.name sta = true } } }) if (sta == true) { this.cite.state = { name: name2, sta: true } return } // if (this.cite.memberLoginVo == '') { // this.cite.state = { // name: '请扫码登录设备再操作！', // sta: true // } // return // } if (href == 'operationGuide') { if(this.smdysta) { this.cite.state = { name: '高拍仪异常暂停使用，请联系客服维修！', sta: true } return; } this.cite.modeName = name } this.$router.push({ name: href, params: { name: name } }) }, gpyError() { let _this = this gpyError().then(res => { _this.smdysta = res }) }, load() { if (this.src == '') { this.src = this.cite.url setTimeout(() => { this.load() }, 1000) } }, GGT(T) { let _this = this this.mySwiper = new this.Swiper('.swiper-container', { // allowSlidePrev: false, // allowSlideNext: false, // 改变swiper样式时，自动初始化swiper observer: true, // 监测swiper父元素，如果有变化则初始化swiper observeParents: true, loop: true, autoplay: { delay: T, disableOnInteraction: false }, pagination: { el: '.swiper-pagination' }, on: { slideChangeTransitionEnd: function () { // console.log(this.realIndex); _this.swIndex = this.realIndex if (_this.advertisement[this.realIndex].fileType == 'video/mp4') { _this.bannerLoop(false) } } } }) }, bannerLoop(sta, n) { let _this = this if (sta) { _this.mySwiper.slideTo(n) _this.mySwiper.autoplay.start() } else { _this.mySwiper.autoplay.stop() } }, onPause() { let n = this.swIndex + 1 if (n == this.advertisement.length) { n = 1 } this.bannerLoop(true, n) }, onTimeupdate() { // console.log(123,e) }, // 正在加载中 loadEdmetadata() { // console.log(456,e) }, play(addr) { let music = new Audio() music = addr this.$refs.audio.src = music this.$refs.audio.play() } }, created() {}, mounted() { this.gpyError() this.load() if (window.outerWidth === 1080 \|\| window.outerWidth === 1064) { this.cite.isVertical = true this.isVertical = true } else { this.cite.isVertical = false this.isVertical = false } // 判断是不是设备是不是异常 this.playTimer = setInterval(() => { console.log(this.cite.serveError) if (this.cite.serveError) { const addr = require('../assets/audio/ExceptionNotice.mp3') this.play(addr) } }, 60000) setInterval(() => { if (this.cite.advertisement != this.advertisement) { this.advertisement = this.cite.advertisement setTimeout(() => { this.GGT(this.advertisement[0].intervalTime * 1000) }, 500) } if (this.cite.facility != this.facility) { this.facility = this.cite.facility } if (this.cite.memberLoginVo != this.memberLoginVo) { this.memberLoginVo = this.cite.memberLoginVo } if (this.appSrc == '' && this.cite.code != '') { this.appSrc = 'https://mps.xlmalls.com/web/code/' + this.cite.code // this.appSrc = 'https://mps.xlmalls.com/web/payment/' + this.cite.code // this.appSrc = 'https://mps.xlmalls.com/web/' + this.cite.code // console.log(this.appSrc) } }, 300) }, destroyed() { clearInterval(this.playTimer) } } </script> <style lang="less" scoped> .device { margin: 2rem 2rem 0; .box { align-items: flex-start; position: relative; .left { width: 92.5rem; margin: 0; position: relative; z-index: 1; .advertising { width: 100%; height: 52rem; border-radius: 1.63rem; //margin-bottom: 1.88rem; cursor: pointer; overflow: hidden; font-size: 8rem; font-weight: 400; color: #ffffff; line-height: 8rem; img { width: 100%; height: 100%; } } .zzc { position: absolute; width: 100%; height: 100%; z-index: 99; left: 0; right: 0; } } .right { width: 22rem; } } .main { width: 100%; //height: 8rem; height: 6rem; border-radius: 1.63rem; //font-size: 1.8rem; font-size: 1.6rem; font-weight: 400; color: #ffffff; line-height: 1.8rem; margin-top: 1rem; img { width: 8rem; margin-top: -1rem; } } .icon1 { background: linear-gradient(359deg, #3dbf51 0%, #47d1a9 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(120, 229, 217, 0.45); } .icon2 { background: linear-gradient(180deg, #f2c952 0%, #db572b 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(255, 147, 128, 0.57); } .icon3 { background: linear-gradient(180deg, #84b2f7 0%, #8774d2 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(150, 135, 232, 0.3); } .icon4 { background: linear-gradient(180deg, #5be7ff 0%, #309fd8 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(104, 202, 253, 0.42); } .icon5 { background: linear-gradient(0deg, #F95555 0%, #DE2F2F 100%); box-shadow: 0 0 0.75rem 0 rgba(233, 63, 63, 0.53); } .feature { padding: 0 1.25rem; } .qjmIcon { width: 2.875rem!important; height: 4.5rem; margin: 0 41px!important; } .css1 { background: #ffffff; box-shadow: 0rem 0.63rem 1.25rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; cursor: pointer; } .main2 { width: 100%; height: 6.44rem; .css1(); font-size: 1.88rem; font-weight: bold; color: #323232; line-height: 2.63rem; img { width: 3.75rem; margin-right: 0.38rem; } } .main3 { width: 100%; height: 9.94rem; .css1(); font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; img { width: 4.25rem; margin-right: 0.88rem; } } .main4 { width: 100%; height: 25rem; .css1(); font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 2rem; .ewm { width: 18rem; height: 18rem; background: #ffffff; border: 0.06rem solid #707070; position: relative; img { width: 100%; margin: 0; } } .tip { margin-top: 1rem; } img { width: 2.31rem; margin-right: 1.19rem; } .zzc { position: absolute; background: #333; opacity: 0.5; top: 0; left: 0; width: 100%; height: 100%; } } .dbTip { position: fixed; bottom: 0; left: 0; right: 0; font-size: 1.2rem; font-weight: 400; color: #323232; height: 3rem; padding: 0 3rem; } } // 广告高度 .vertical-height { height: 72rem !important; } .vertical-width-direction { width: 100%; flex-direction: column; } .vertical-width { width: 100% !important; } .vertical-width50 { width: 48% !important; } .vertical-bottom { display: flex; // align-items: center; justify-content: space-between; flex-direction: row-reverse; margin-top: 2rem; } .vertical-bottom-right { width: 60%; margin-right: 2rem; display: flex; flex-direction: column; justify-content: space-around; } </style>

Ignore Space Show notes View

src/views/device.vue

<template>
  <div class="device">
    <div :class="['box', 'flex-between', { 'vertical-width-direction': isVertical }]">
      <div v-if="false" class="left">
        <div v-if="advertisement == []" class="advertising icon1 flex-center">广告位招租</div>
        <div v-else class="advertising flex-center">
          <img :src="advertisement[0].previewPath" model="scaleToFill" />
        </div>
      </div>
      <div :class="['left', { 'vertical-width': isVertical }]">
        
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div v-for="(item, index) in advertisement" :key="index" class="swiper-slide">
              
              <div v-if="item.fileType == 'image/jpeg'" :class="['advertising', 'flex-center', { 'vertical-height': isVertical }]">
                <img :src="item.previewPath" model="scaleToFill" />
              </div>
              <div v-else-if="item.fileType == 'image/png'" :class="['advertising', 'flex-center', { 'vertical-height': isVertical }]">
                <img :src="item.previewPath" model="scaleToFill" />
              </div>
              
              <div v-else :class="['advertising', 'flex-center', { 'vertical-height': isVertical }]">
                <video
                  v-if="index == swIndex"
                  @pause="onPause"
                  @timeupdate="onTimeupdate"
                  @loadedmetadata="loadEdmetadata"
                  :src="item.previewPath"
                  autoplay
                  muted
                  style="width: 100%; height: 100%"
                ></video>
              </div>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <div v-if="false" class="left">
        
        <div v-if="advertisement == ''" class="advertising icon1 flex-center">广告位招租</div>
        
        <div v-else-if="advertisement.fileType == 'image/png'" class="advertising icon1 flex-center">
          <img :src="advertisement.previewPath" model="scaleToFill" />
        </div>
        
        <div v-else class="advertising icon1 flex-center">
          <video :src="advertisement.outerChainPath" autoplay loop muted style="width: 100%; height: 100%"></video>
        </div>

<div v-show="false" class="box2 flex-between">
          <div class="main2 flex-center" @click="skip('explain', '联系客服')">
            <img src="../assets/demo7.png" />
            联系客服
          </div>
          <div class="main2 flex-center" @click="skip('explain', '价格查询')">
            <img src="../assets/demo5.png" />
            价格查询
          </div>
        </div>
      </div>
      <div class="right" v-if="!isVertical">
        <div class="main4 flex-center">
          <div>
            
            
            
            
            
            
            
            <div class="flex-center ewm" @click="play">
              <VueQr
                v-if="appSrc"
                :auto-color="true"
                :dot-scale="1"
                :logo-src="require('@/assets/logo.png')"
                :logoMargin="0"
                :logoScale="0.2"
                :margin="0"
                :size="300"
                :text="appSrc"
                logoBackgroundColor="white"
              ></VueQr>
            </div>
            <div class="flex-center tip">
              <img src="../assets/demo9.png" />
              扫码打印手机文件
            </div>
          </div>
        </div>

<div class="feature">
          <div class="main icon2 flex-start" @click="skip('operationGuide', 'U盘打印')">
            <img src="../assets/demo2.png" />
            <div>U盘打印</div>
          </div>
          <div class="main icon3 flex-start" :style="smdysta?'background: #ccc;':''" @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 class="main icon5 flex-start" @click="skip('codeExtract', '取件码打印')">
            <img class="qjmIcon" src="../assets/demo17.png" />
            <div>取件码打印</div>
          </div>
        </div>
      </div>
      
      <div class="right vertical-bottom vertical-width" v-if="isVertical">
        <div class="main4 flex-center vertical-width50">
          <div>
            
            
            
            
            
            
            
            <div class="flex-center ewm">
              <VueQr
                v-if="appSrc"
                :auto-color="true"
                :dot-scale="1"
                :logo-src="require('@/assets/logo.png')"
                :logoMargin="0"
                :logoScale="0.2"
                :margin="0"
                :size="300"
                :text="appSrc"
                logoBackgroundColor="white"
              ></VueQr>
            </div>
            <div class="flex-center tip">
              <img src="../assets/demo9.png" />
              扫码打印手机文件
            </div>
          </div>
        </div>

<div class="vertical-bottom-right">
          <div class="main icon2 flex-start vertical-width" style="height: 8rem !important" @click="skip('operationGuide', 'U盘打印')">
            <img src="../assets/demo2.png" />
            <div>U盘打印</div>
          </div>
          
          <div class="main icon4 flex-start vertical-width" style="height: 8rem !important" @click="skip('operationGuide', '身份证打印')">
            <img src="../assets/demo4.png" />
            <div>身份证打印</div>
          </div>
          <div class="main icon5 flex-start" style="height: 8rem !important" @click="skip('codeExtract', '取件码打印')">
            <img class="qjmIcon" src="../assets/demo17.png" />
            <div>取件码打印</div>
          </div>
        </div>
      </div>
      <div class="dbTip flex-between">
        <div>机器编号：{{ cite.code }}</div>
        <div>客服电话：{{ facility.servicePhone }}</div>
      </div>
    </div>
    <audio ref="audio" class="aud">
      <source src="../assets/audio/ConnectingRemind.mp3" />
    </audio>
  </div>
</template>
<script>
import VueQr from 'vue-qr'
import {gpyError} from "@/api/bdResultApi";
export default {
  name: 'device',
  components: {
    VueQr
  },
  data() {
    return {
      swIndex: 0,
      mySwiper: '',
      appSrc: '',
      memberLoginVo: '',
      advertisement: '',
      facility: '',
      src: '',
      isVertical: false,
      playTimer: '', //播放的定时任务
      errTimer: null, //异常的定时器

smdysta: false,
    }
  },
  methods: {
    skip(href, name) {
      let { facility } = this
      let { sta, name2 } = ''
      facility.paperNumber.forEach(item => {
        if (item.name.indexOf('A4') != -1) {
          if (item.residue < 1) {
            name2 = '请联系管理员添加' + item.name
            sta = true
          }
        }
      })
      if (sta == true) {
        this.cite.state = {
          name: name2,
          sta: true
        }
        return
      }
      // if (this.cite.memberLoginVo == '') {
      //   this.cite.state = {
      //     name: '请扫码登录设备再操作！',
      //     sta: true
      //   }
      //   return
      // }
      if (href == 'operationGuide') {
        if(this.smdysta) {
          this.cite.state = {
            name: '高拍仪异常暂停使用，请联系客服维修！',
            sta: true
          }
          return;
        }
        this.cite.modeName = name
      }
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    gpyError() {
      let _this = this
      gpyError().then(res => {
        _this.smdysta = res
      })
    },
    load() {
      if (this.src == '') {
        this.src = this.cite.url
        setTimeout(() => {
          this.load()
        }, 1000)
      }
    },
    GGT(T) {
      let _this = this
      this.mySwiper = new this.Swiper('.swiper-container', {
        // allowSlidePrev: false,
        // allowSlideNext: false,
        // 改变swiper样式时，自动初始化swiper
        observer: true,
        // 监测swiper父元素，如果有变化则初始化swiper
        observeParents: true,
        loop: true,
        autoplay: {
          delay: T,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination'
        },
        on: {
          slideChangeTransitionEnd: function () {
            // console.log(this.realIndex);
            _this.swIndex = this.realIndex
            if (_this.advertisement[this.realIndex].fileType == 'video/mp4') {
              _this.bannerLoop(false)
            }
          }
        }
      })
    },
    bannerLoop(sta, n) {
      let _this = this
      if (sta) {
        _this.mySwiper.slideTo(n)
        _this.mySwiper.autoplay.start()
      } else {
        _this.mySwiper.autoplay.stop()
      }
    },
    onPause() {
      let n = this.swIndex + 1
      if (n == this.advertisement.length) {
        n = 1
      }
      this.bannerLoop(true, n)
    },
    onTimeupdate() {
      // console.log(123,e)
    },
    // 正在加载中
    loadEdmetadata() {
      // console.log(456,e)
    },
    play(addr) {
      let music = new Audio()
      music = addr
      this.$refs.audio.src = music
      this.$refs.audio.play()
    }
  },
  created() {},
  mounted() {
    this.gpyError()
    this.load()
    if (window.outerWidth === 1080 || window.outerWidth === 1064) {
      this.cite.isVertical = true
      this.isVertical = true
    } else {
      this.cite.isVertical = false
      this.isVertical = false
    }
    // 判断是不是设备是不是异常
    this.playTimer = setInterval(() => {
      console.log(this.cite.serveError)
      if (this.cite.serveError) {
        const addr = require('../assets/audio/ExceptionNotice.mp3')
        this.play(addr)
      }
    }, 60000)
    setInterval(() => {
      if (this.cite.advertisement != this.advertisement) {
        this.advertisement = this.cite.advertisement
        setTimeout(() => {
          this.GGT(this.advertisement[0].intervalTime * 1000)
        }, 500)
      }
      if (this.cite.facility != this.facility) {
        this.facility = this.cite.facility
      }
      if (this.cite.memberLoginVo != this.memberLoginVo) {
        this.memberLoginVo = this.cite.memberLoginVo
      }

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

.box {
    align-items: flex-start;
    position: relative;

.left {
      width: 92.5rem;
      margin: 0;
      position: relative;
      z-index: 1;

.advertising {
        width: 100%;
        height: 52rem;
        border-radius: 1.63rem;
        //margin-bottom: 1.88rem;
        cursor: pointer;
        overflow: hidden;
        font-size: 8rem;
        font-weight: 400;
        color: #ffffff;
        line-height: 8rem;

img {
          width: 100%;
          height: 100%;
        }
      }

.zzc {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 99;
        left: 0;
        right: 0;
      }
    }
    .right {
      width: 22rem;
    }
  }

.main {
    width: 100%;
    //height: 8rem;
    height: 6rem;
    border-radius: 1.63rem;
    //font-size: 1.8rem;
    font-size: 1.6rem;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.8rem;
    margin-top: 1rem;

img {
      width: 8rem;
      margin-top: -1rem;
    }
  }

.icon1 {
    background: linear-gradient(359deg, #3dbf51 0%, #47d1a9 100%);
    box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(120, 229, 217, 0.45);
  }

.icon2 {
    background: linear-gradient(180deg, #f2c952 0%, #db572b 100%);
    box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(255, 147, 128, 0.57);
  }

.icon3 {
    background: linear-gradient(180deg, #84b2f7 0%, #8774d2 100%);
    box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(150, 135, 232, 0.3);
  }

.icon4 {
    background: linear-gradient(180deg, #5be7ff 0%, #309fd8 100%);
    box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(104, 202, 253, 0.42);
  }
  .icon5 {
    background: linear-gradient(0deg, #F95555 0%, #DE2F2F 100%);
    box-shadow: 0 0 0.75rem 0 rgba(233, 63, 63, 0.53);
  }
  .feature {
    padding: 0 1.25rem;
  }
  .qjmIcon {
    width: 2.875rem!important;
    height: 4.5rem;
    margin: 0 41px!important;
  }
  .css1 {
    background: #ffffff;
    box-shadow: 0rem 0.63rem 1.25rem 0.06rem rgba(0, 0, 0, 0.14);
    border-radius: 1.63rem;
    cursor: pointer;
  }

.main2 {
    width: 100%;
    height: 6.44rem;
    .css1();
    font-size: 1.88rem;
    font-weight: bold;
    color: #323232;
    line-height: 2.63rem;

img {
      width: 3.75rem;
      margin-right: 0.38rem;
    }
  }

.main3 {
    width: 100%;
    height: 9.94rem;
    .css1();
    font-size: 2.13rem;
    font-weight: bold;
    color: #323232;
    line-height: 3rem;

img {
      width: 4.25rem;
      margin-right: 0.88rem;
    }
  }

.main4 {
    width: 100%;
    height: 25rem;
    .css1();
    font-size: 1.88rem;
    font-weight: 400;
    color: #323232;
    line-height: 2rem;

.ewm {
      width: 18rem;
      height: 18rem;
      background: #ffffff;
      border: 0.06rem solid #707070;
      position: relative;
      img {
        width: 100%;
        margin: 0;
      }
    }

.tip {
      margin-top: 1rem;
    }

img {
      width: 2.31rem;
      margin-right: 1.19rem;
    }
    .zzc {
      position: absolute;
      background: #333;
      opacity: 0.5;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

.dbTip {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 1.2rem;
    font-weight: 400;
    color: #323232;
    height: 3rem;
    padding: 0 3rem;
  }
}
// 广告高度
.vertical-height {
  height: 72rem !important;
}

.vertical-width-direction {
  width: 100%;
  flex-direction: column;
}
.vertical-width {
  width: 100% !important;
}
.vertical-width50 {
  width: 48% !important;
}
.vertical-bottom {
  display: flex;
  // align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-top: 2rem;
}
.vertical-bottom-right {
  width: 60%;
  margin-right: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
</style>

<div class="vertical-bottom-right">
          <div class="main icon2 flex-start vertical-width" style="height: 10rem !important" @click="skip('operationGuide', 'U盘打印')">
            <img src="../assets/demo2.png" />
            <div>U盘打印</div>
          </div>
          
          <div class="main icon4 flex-start vertical-width" style="height: 10rem !important" @click="skip('operationGuide', '身份证打印')">
            <img src="../assets/demo4.png" />
            <div>身份证打印</div>
          </div>
        </div>
      </div>
      <div class="dbTip flex-between">
        <div>机器编号：{{ cite.code }}</div>
        <div>客服电话：{{ facility.servicePhone }}</div>
      </div>
    </div>
    <audio ref="audio" class="aud">
      <source src="../assets/audio/ConnectingRemind.mp3" />
    </audio>
  </div>
</template>
<script>
import VueQr from 'vue-qr'
import {gpyError} from "@/api/bdResultApi";
export default {
  name: 'device',
  components: {
    VueQr
  },
  data() {
    return {
      swIndex: 0,
      mySwiper: '',
      appSrc: '',
      memberLoginVo: '',
      advertisement: '',
      facility: '',
      src: '',
      isVertical: false,
      playTimer: '', //播放的定时任务
      errTimer: null, //异常的定时器