han

hanfei / VueSharedPrinting

Browse code han master
1 parent 20486b9 commit f7993fbb99f2272654095fb0418215aaa0e06623 hanfei authored on 10 Jan 2024

Patch

Showing 7 changed files

Ignore Space Show notes View src/App.vue
<template> <div id="app"> <top/> <router-view/> </div> </template> <script> import top from '@/components/top.vue' import mqtt from "mqtt/dist/mqtt" import {getDeviceByCode} from "@/api/resultApi"; export default { name: 'Home', components: { top }, data() { return { client: null, code: '' }; }, mounted() { this.load() }, methods: { load() { // 获取名为code的查询参数值 console.log(this.$route.query.code) if (this.cite.code === "") { this.code = this.$route.query.code; this.cite.code = this.code; }else{ this.code = this.cite.code; } // 判断是否是广告屏 if(this.$route.name != 'advertising') { this.initMqtt() } if (this.cite.facility === "") { this.getDeviceByCode(); } }, initMqtt() { // 连接配置选项 let options = { connectTimeout: 4000, // 超时时间 // 认证信息 clientId: '', //不填默认随机生成一个ID username: 'admin', //用户名 password: 'public' //密码 } this.client = mqtt.connect('ws://114.67.196.224:8083/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.login) { this.cite.memberLoginVo = data.memberLoginVo }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; }); }, } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } * { margin: 0; padding: 0; } body { background: #FAFAFA; } .flex-center{ display:flex; flex-direction: row; align-items:center; justify-content:center; } .flex-start{ display:flex; flex-direction: row; align-items:center; justify-content:flex-start; } .flex-end{ display:flex; flex-direction: row; align-items:center; justify-content:flex-end; } .flex-between{ display:flex; flex-direction: row; align-items:center; justify-content:space-between; } </style> <template> <div id="app"> <top/> <router-view/> </div> </template> <script> import top from '@/components/top.vue' import mqtt from "mqtt/dist/mqtt" import {getDeviceByCode} from "@/api/resultApi"; export default { name: 'Home', components: { top }, data() { return { client: null, code: '' }; }, created() { this.load() }, methods: { load() { // 获取名为id的查询参数值 if (this.cite.code === "") { this.code = this.$route.query.code; this.cite.code = this.code; }else{ this.code = this.cite.code; } console.log(this.code); // 输出查询参数的值 this.initMqtt() if (this.cite.facility === "") { this.getDeviceByCode(); } }, initMqtt() { // 连接配置选项 let options = { connectTimeout: 4000, // 超时时间 // 认证信息 clientId: '', //不填默认随机生成一个ID username: 'admin', //用户名 password: 'public' //密码 } this.client = mqtt.connect('tcp://192.168.250.29:8083/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.login) { this.cite.memberLoginVo = data.memberLoginVo }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.data; }); }, } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } * { margin: 0; padding: 0; } body { background: #FAFAFA; } .flex-center{ display:flex; flex-direction: row; align-items:center; justify-content:center; } .flex-start{ display:flex; flex-direction: row; align-items:center; justify-content:flex-start; } .flex-end{ display:flex; flex-direction: row; align-items:center; justify-content:flex-end; } .flex-between{ display:flex; flex-direction: row; align-items:center; justify-content:space-between; } </style>

Ignore Space Show notes View

src/App.vue

export default {
  name: 'Home',
  components: {
    top
  },
  data() {
    return {
      client: null,
      code: ''
    };
  },
  mounted() {
    this.load()
  },
  methods: {
    load() {
      // 获取名为code的查询参数值
      console.log(this.$route.query.code)
      if (this.cite.code === "") {
        this.code = this.$route.query.code;
        this.cite.code = this.code;
      }else{
        this.code = this.cite.code;
      }
      // 判断是否是广告屏
      if(this.$route.name != 'advertising') {
        this.initMqtt()
      }
      if (this.cite.facility === "") {
        this.getDeviceByCode();
      }

},
    initMqtt() {
      // 连接配置选项
      let options = {
        connectTimeout: 4000, // 超时时间
        // 认证信息
        clientId: '', //不填默认随机生成一个ID
        username: 'admin', //用户名
        password: 'public' //密码
      }
      this.client = mqtt.connect('ws://114.67.196.224:8083/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.login) {
          this.cite.memberLoginVo = data.memberLoginVo
        }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;
      });
    },
  }
}
</script>

* {
  margin: 0;
  padding: 0;
}
body {
  background: #FAFAFA;
}
.flex-center{
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content:center;
}
.flex-start{
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content:flex-start;
}
.flex-end{
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content:flex-end;
}
.flex-between{
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content:space-between;
}
</style>

export default {
  name: 'Home',
  components: {
    top
  },
  data() {
    return {
      client: null,
      code: ''
    };
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      // 获取名为id的查询参数值
      if (this.cite.code === "") {
        this.code = this.$route.query.code;
        this.cite.code = this.code;
      }else{
        this.code = this.cite.code;
      }

console.log(this.code); // 输出查询参数的值
      this.initMqtt()
      if (this.cite.facility === "") {
        this.getDeviceByCode();
      }

},
    initMqtt() {
      // 连接配置选项
      let options = {
        connectTimeout: 4000, // 超时时间
        // 认证信息
        clientId: '', //不填默认随机生成一个ID
        username: 'admin', //用户名
        password: 'public' //密码
      }
      this.client = mqtt.connect('tcp://192.168.250.29:8083/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.login) {
          this.cite.memberLoginVo = data.memberLoginVo
        }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.data;
      });
    },
  }
}
</script>

Ignore Space Show notes View src/api/resultApi.js
import request from '../utils/request' // 打印价格 export const getPrintPriceList = params => { return request({ url: '/device/getPrintPriceList', params }) } // 获取设备ID export const getDeviceByCode = params => { return request({ url: '/device/getDeviceByCode', params }) } // 文件上传 export const upload2Pdf = data => { return request({ method: 'POST', url: '/file/upload2Pdf', data }) } // 设备-获取打印价格 export const getPrintPrice = data => { return request({ url: '/device/getPrintPrice', params: data }) } // 设备-提交打印任务 export const submitPrintingTask = data => { return request({ method: 'POST', url: '/device/submitPrintingTask', data }) } // 订单-获取支付二维码 export const getPayQrCode = data => { return request({ url: '/order/getPayQrCode', params: data }) } export const downloadPDF = data => { return request({ url: '/file/download', timeout: 2 * 60 * 1000, responseType: 'blob', params: data }) } // 订单-获取打印任务进度 export const getPrintTask = data => { return request({ url: '/device/getPrintTask', params: data }) } // 获取广告链接 export const getAdvertisement = data => { return request({ url: '/placement/getAdvertisement', params: data }) } import request from '../utils/request' // 打印价格 export const getPrintPriceList = params => { return request({ url: '/device/getPrintPriceList', params }) } // 获取设备ID export const getDeviceByCode = params => { return request({ url: '/device/getDeviceByCode', params }) } // 文件上传 export const upload2Pdf = data => { return request({ method: 'POST', url: '/file/upload2Pdf', data }) } // 设备-获取打印价格 export const getPrintPrice = data => { return request({ url: '/device/getPrintPrice', params: data }) } // 设备-提交打印任务 export const submitPrintingTask = data => { return request({ method: 'POST', url: '/device/submitPrintingTask', data }) } // 订单-获取支付二维码 export const getPayQrCode = data => { return request({ url: '/order/getPayQrCode', params: data }) } export const downloadPDF = data => { return request({ url: '/file/download', timeout: 2 * 60 * 1000, responseType: 'blob', params: data }) } // 订单-获取打印任务进度 export const getPrintTask = data => { return request({ url: '/device/getPrintTask', params: data }) }

Ignore Space Show notes View

src/api/resultApi.js

import request from '../utils/request'

// 打印价格
export const getPrintPriceList = params => {
  return request({
    url: '/device/getPrintPriceList',
    params
  })
}

// 获取设备ID
export const getDeviceByCode = params => {
  return request({
    url: '/device/getDeviceByCode',
    params
  })
}

// 文件上传
export const upload2Pdf = data => {
  return request({
    method: 'POST',
    url: '/file/upload2Pdf',
    data
  })
}

// 设备-获取打印价格
export const getPrintPrice = data => {
  return request({
    url: '/device/getPrintPrice',
    params: data
  })
}
// 设备-提交打印任务
export const submitPrintingTask = data => {
  return request({
    method: 'POST',
    url: '/device/submitPrintingTask',
    data
  })
}
// 订单-获取支付二维码
export const getPayQrCode = data => {
  return request({
    url: '/order/getPayQrCode',
    params: data
  })
}

export const downloadPDF = data => {
  return request({
    url: '/file/download',
    timeout: 2 * 60 * 1000,
    responseType: 'blob',
    params: data
  })
}

// 订单-获取打印任务进度
export const getPrintTask = data => {
  return request({
    url: '/device/getPrintTask',
    params: data
  })
}

// 获取广告链接
export const getAdvertisement = data => {
  return request({
    url: '/placement/getAdvertisement',
    params: data
  })
}

import request from '../utils/request'

// 打印价格
export const getPrintPriceList = params => {
  return request({
    url: '/device/getPrintPriceList',
    params
  })
}

// 获取设备ID
export const getDeviceByCode = params => {
  return request({
    url: '/device/getDeviceByCode',
    params
  })
}

// 文件上传
export const upload2Pdf = data => {
  return request({
    method: 'POST',
    url: '/file/upload2Pdf',
    data
  })
}

export const downloadPDF = data => {
  return request({
    url: '/file/download',
    timeout: 2 * 60 * 1000,
    responseType: 'blob',
    params: data
  })
}

// 订单-获取打印任务进度
export const getPrintTask = data => {
  return request({
    url: '/device/getPrintTask',
    params: data
  })
}

Ignore Space Show notes View src/router/index.js
import Vue from 'vue' import VueRouter from 'vue-router' import device from '../views/device.vue' Vue.use(VueRouter) const routes = [ { path: '*', name: 'device', component: device }, { //广告页 path: '/advertising', name: 'advertising', component: () => import('../views/advertising.vue') }, { path: '/operationGuide', name: 'operationGuide', component: () => import('../views/operationGuide.vue') }, { path: '/selectFile', name: 'selectFile', component: () => import('../views/selectFile.vue') }, { path: '/transcoding', name: 'transcoding', component: () => import('../views/transcoding.vue') }, { path: '/argument', name: 'argument', component: () => import('../views/argument.vue') }, { path: '/expense', name: 'expense', component: () => import('../views/expense.vue') }, { path: '/pay', name: 'pay', component: () => import('../views/pay.vue') }, { path: '/complete', name: 'complete', component: () => import('../views/complete.vue') }, { path: '/explain', name: 'explain', component: () => import('../views/explain.vue') } ] const router = new VueRouter({ routes }) export default router import Vue from 'vue' import VueRouter from 'vue-router' import device from '../views/device.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'device', component: device }, { path: '/operationGuide', name: 'operationGuide', component: () => import('../views/operationGuide.vue') }, { path: '/selectFile', name: 'selectFile', component: () => import('../views/selectFile.vue') }, { path: '/transcoding', name: 'transcoding', component: () => import('../views/transcoding.vue') }, { path: '/argument', name: 'argument', component: () => import('../views/argument.vue') }, { path: '/expense', name: 'expense', component: () => import('../views/expense.vue') }, { path: '/pay', name: 'pay', component: () => import('../views/pay.vue') }, { path: '/complete', name: 'complete', component: () => import('../views/complete.vue') }, { path: '/explain', name: 'explain', component: () => import('../views/explain.vue') }, { //广告页 path: '/advertising', name: 'advertising', component: () => import('../views/advertising.vue') } ] const router = new VueRouter({ routes }) export default router

Ignore Space Show notes View

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import device from '../views/device.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '*',
    name: 'device',
    component: device
  },
  {
    //广告页
    path: '/advertising',
    name: 'advertising',
    component: () => import('../views/advertising.vue')
  },
  {
    path: '/operationGuide',
    name: 'operationGuide',
    component: () => import('../views/operationGuide.vue')
  },
  {
    path: '/selectFile',
    name: 'selectFile',
    component: () => import('../views/selectFile.vue')
  },
  {
    path: '/transcoding',
    name: 'transcoding',
    component: () => import('../views/transcoding.vue')
  },
  {
    path: '/argument',
    name: 'argument',
    component: () => import('../views/argument.vue')
  },
  {
    path: '/expense',
    name: 'expense',
    component: () => import('../views/expense.vue')
  },
  {
    path: '/pay',
    name: 'pay',
    component: () => import('../views/pay.vue')
  },
  {
    path: '/complete',
    name: 'complete',
    component: () => import('../views/complete.vue')
  },
  {
    path: '/explain',
    name: 'explain',
    component: () => import('../views/explain.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

import Vue from 'vue'
import VueRouter from 'vue-router'
import device from '../views/device.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'device',
    component: device
  },
  {
    path: '/operationGuide',
    name: 'operationGuide',
    component: () => import('../views/operationGuide.vue')
  },
  {
    path: '/selectFile',
    name: 'selectFile',
    component: () => import('../views/selectFile.vue')
  },
  {
    path: '/transcoding',
    name: 'transcoding',
    component: () => import('../views/transcoding.vue')
  },
  {
    path: '/argument',
    name: 'argument',
    component: () => import('../views/argument.vue')
  },
  {
    path: '/expense',
    name: 'expense',
    component: () => import('../views/expense.vue')
  },
  {
    path: '/pay',
    name: 'pay',
    component: () => import('../views/pay.vue')
  },
  {
    path: '/complete',
    name: 'complete',
    component: () => import('../views/complete.vue')
  },
  {
    path: '/explain',
    name: 'explain',
    component: () => import('../views/explain.vue')
  },
  {
    //广告页
    path: '/advertising',
    name: 'advertising',
    component: () => import('../views/advertising.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

Ignore Space Show notes View src/utils/request.js
import axios from 'axios' // 调用服务器接口 const request = axios.create({ baseURL: window.location.origin + '/api', timeout: 15000, // request timeout }) request.interceptors.request.use(config => { return config }) request.interceptors.response.use(res => { res = res.data if(res.code==200) { return res.data }else{ alert(res.msg) } console.log(res) }) export default request import axios from 'axios' // 调用服务器接口 const request = axios.create({ baseURL: window.location.origin + '/tzdy', // baseURL: 'http://221.4.217.75:50000/tzdy', timeout: 15000, // request timeout }) request.interceptors.request.use(config => { return config }) request.interceptors.response.use(res => { res = res.data if(res.code==200) { return res.data }else{ alert(res.msg) } console.log(res) }) export default request

Ignore Space Show notes View

src/utils/request.js

Ignore Space Show notes View src/views/advertising.vue
<template> <div class="advertising flex-center" :style="advertisement==''?'':'background: #000'"> <div v-show="advertisement==''">广告位招租</div> <img v-show="advertisement.type=='img'" :src="advertisement.src" model="scaleToFill" style="width: 100%;height: 100%;"/> <img v-show="advertisement.type=='img'" :src="advertisement.src" model="scaleToFill" style="width: 100%;height: 100%;"/> <video v-show="advertisement.type=='video'" autoplay loop muted :src="advertisement.src" style="width: 100%;height: 100%;"></video> </div> </template> <script> import {getAdvertisement} from "@/api/resultApi"; export default { name: "advertising", data() { return { advertisement: '' }; }, mounted() { setTimeout(()=>{ this.getAdvertisement() },1000) }, methods: { // 获取广告链接 getAdvertisement() { getAdvertisement({deviceId:this.cite.facility.id,screen: 'AdvertisingScreen'}).then((res) =>{ // console.log(res) this.advertisement = res \|\| '' }) }, }, } </script> <style> #app .top { display: none; } .advertising { background: linear-gradient(359deg, #3dbf51 0%, #47d1a9 100%); width: 100%; height: 100%; position: fixed; font-size: 10rem; font-weight: bold; color: #ffffff; line-height: 10rem; } </style> <template> <div class="advertising flex-center"> 广告位招租 </div> </template> <script> export default { name: "advertising" } </script> <style> #app .top { display: none; } .advertising { background: linear-gradient(359deg, #3dbf51 0%, #47d1a9 100%); width: 100%; height: 100%; position: fixed; font-size: 10rem; font-weight: bold; color: #ffffff; line-height: 10rem; } </style>

Ignore Space Show notes View

src/views/advertising.vue

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

export default {
  name: "advertising",
  data() {
    return {
      advertisement: ''
    };
  },
  mounted() {
    setTimeout(()=>{
      this.getAdvertisement()
    },1000)
  },
  methods: {
    // 获取广告链接
    getAdvertisement() {
      getAdvertisement({deviceId:this.cite.facility.id,screen: 'AdvertisingScreen'}).then((res) =>{
        // console.log(res)
        this.advertisement = res || ''
      })
    },
  },
}
</script>

Ignore Space Show notes View src/views/device.vue
<template> <div class="device"> <div class="box flex-between"> <div class="left"> <!-- 广告--> <div class="advertising icon1 flex-center" v-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"> <!-- <img src="@/assets/ewm.jpg" alt="">--> <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"> 支付宝小程序码 </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' import {getAdvertisement} from "@/api/resultApi" 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: '' }; }, mounted() { setTimeout(()=>{ this.getAdvertisement() },1000) }, 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, }, }); }, // 获取广告链接 getAdvertisement() { getAdvertisement({deviceId:this.cite.facility.id,screen: 'DeviceScreen'}).then((res) =>{ // console.log(res) this.advertisement = res \|\| '' }) }, }, }; </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"> <!-- <img src="../assets/demo1.png" />--> 广告位招租 </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"> <img src="@/assets/ewm.jpg" alt=""> </span> <span class="flex-center"> 支付宝小程序码 </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> export default { name: "device", data() { return { appSrc:'' }; }, methods: { skip(href, name) { if(this.cite.memberLoginVo=='') { alert('请扫码登录再操作') return } this.$router.push({ name: href, params: { name: name, }, }); }, }, }; </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: 40rem; margin-top: -5rem; } } } .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">
            支付宝小程序码
          </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'
import {getAdvertisement} from "@/api/resultApi"

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: ''
    };
  },
  mounted() {
    setTimeout(()=>{
      this.getAdvertisement()
    },1000)
  },
  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,
        },
      });
    },
    // 获取广告链接
    getAdvertisement() {
      getAdvertisement({deviceId:this.cite.facility.id,screen: 'DeviceScreen'}).then((res) =>{
        // console.log(res)
        this.advertisement = res || ''
      })
    },
  },
};
</script>

<template>
  <div class="device">
    <div class="box flex-between">
      <div class="left">
        
        <div class="advertising icon1 flex-center">
          
          广告位招租
        </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">
            <img src="@/assets/ewm.jpg" alt="">
          </span>
          <span class="flex-center">
            支付宝小程序码
          </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>
export default {
  name: "device",
  data() {
    return {
      appSrc:''
    };
  },
  methods: {
    skip(href, name) {
      if(this.cite.memberLoginVo=='') {
        alert('请扫码登录再操作')
        return
      }
      this.$router.push({
        name: href,
        params: {
          name: name,
        },
      });
    },
  },
};
</script>

Ignore Space Show notes View vue.config.js
// 引入等比适配插件 const px2rem = require('postcss-px2rem') // 配置基本大小 const postcss = px2rem({ // 基准大小 baseSize，需要和rem.js中相同 remUnit: 16 }) // 使用等比适配插件 module.exports = { css: { loaderOptions: { postcss: { plugins: [ postcss ] } } }, devServer: { // post: 8888, proxy: { //配置跨域 "/api": { //url识别符 // target: "http://192.168.250.29:8888", // 后端本地地址 target: "https://mps.xlmalls.com/api/", // 正式 // target: "http://221.4.217.75:60000/tzdy", // 测试 changOrigin: true, //允许跨域 pathRewrite: { "^/api": "", }, }, "/bd": { //url识别符 target: "http://127.0.0.1", // server地址 changOrigin: true, //允许跨域 pathRewrite: { "^/bd": "", }, }, }, }, } // 引入等比适配插件 const px2rem = require('postcss-px2rem') // 配置基本大小 const postcss = px2rem({ // 基准大小 baseSize，需要和rem.js中相同 remUnit: 16 }) // 使用等比适配插件 module.exports = { css: { loaderOptions: { postcss: { plugins: [ postcss ] } } }, devServer: { // post: 8888, proxy: { //配置跨域 "/tzdy": { //url识别符 target: "http://192.168.250.29:8888", // server地址 // target: "http://localhost:8888", // target: "http://221.4.217.75:60000/tzdy", changOrigin: true, //允许跨域 pathRewrite: { "^/tzdy": "", }, }, "/bd": { //url识别符 target: "http://127.0.0.1", // server地址 changOrigin: true, //允许跨域 pathRewrite: { "^/bd": "", }, }, }, }, }

Ignore Space Show notes View

vue.config.js

Show line notes below