二维码组件修改

src/components/qrcode/club-qrcode.vue → src/components/QrcodeClub/index.vue

@@ -20,7 +20,7 @@ import QRCode from 'qrcode'
 import downImage from '@/assets/img/qrcode-bg-club-down.png'
 import { mapGetters } from 'vuex'
 export default {
-  name: 'Qrcode',
+  name: 'QrcodeClub',
   props: {
     qrcodeData: {
       type: Object,

src/components/qrcode/index.vue → src/components/QrcodeDevice/index.vue

@@ -1,239 +1,239 @@
-<template>
-  <div class="code-container">
-    <div class="qrcode">
-      <div class="title">{{ productInfo.productName }}</div>
-      <div class="sncode"><span>仪器SN码：</span>{{ hanldeSNcode(productInfo.snCode) }}</div>
-      <div class="content">
-        <img :src="imgUrl" alt="">
-      </div>
-      <div class="btn down-btn" @click="handleDown">下载二维码</div>
-      <div class="btn close-btn" @click="handleClose">关闭</div>
-    </div>
-    <canvas id="canvas" style="display: none" />
-    <div v-if="isVisible" class="mask" @click="handleClose" />
-    <a id="downloadLink" href="#" style="display: none" />
-  </div>
-</template>
-
-<script>
-import QRCode from 'qrcode'
-import downImage from '@/assets/img/qrcode-bg-down.jpg'
-import { mapGetters } from 'vuex'
-export default {
-  name: 'Qrcode',
-  props: {
-    productInfo: {
-      type: Object,
-      default: () => {}
-    },
-    isVisible: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      imgUrl: '',
-      wwwServer: process.env.VUE_APP_BASE_SERVER,
-      wwwHost: process.env.VUE_APP_WWW_HOST,
-      qrcodePath: ''
-    }
-  },
-  computed: {
-    ...mapGetters(['authUserId'])
-  },
-  created() {
-    this.initQrcode()
-  },
-  methods: {
-    // 关闭二维码
-    handleClose() {
-      this.$emit('close')
-    },
-    // 下载二维码
-    handleDown() {
-      this.createDownFile((downCanvas) => {
-        // 构造url
-        var url = downCanvas.toDataURL('image/jpg')
-        // 构造a标签并模拟点击
-        var downloadLink = document.getElementById('downloadLink')
-        downloadLink.setAttribute('href', url)
-        downloadLink.setAttribute('download', '二维码.jpg')
-        downloadLink.click()
-      })
-    },
-    // 初始化二维码
-    async initQrcode() {
-      console.log(this.productInfo)
-      if (this.authUserId === 12) {
-        this.qrcodePath = `${this.wwwHost}/12/ross/approve/device/detail?id=${this.productInfo?.productId}`
-      } else {
-        this.qrcodePath = `${this.wwwServer}/product/auth/product-${this.productInfo?.productId}.html`
-      }
-      // 二维码配置
-      const options = {
-        width: 192,
-        height: 192,
-        margin: 1
-      }
-      try {
-        this.imgUrl = await QRCode.toDataURL(this.qrcodePath, options)
-      } catch (err) {
-        console.error(err)
-      }
-    },
-    // 生成下载的文件
-    async createDownFile(callback) {
-      if (this.authUserId === 12) {
-        this.qrcodePath = `${this.wwwHost}/12/ross/approve/device/detail?id=${this.productInfo?.productId}`
-      } else {
-        this.qrcodePath = `${this.wwwServer}/product/auth/product-${this.productInfo?.productId}.html`
-      }
-      const strHeader = this.productInfo.productName
-      const strFooter1 = '仪器SN码：'
-      const strFooter2 = this.hanldeSNcode(this.productInfo.snCode)
-      // 生成二维码参数信息
-      const options = {
-        width: 720,
-        height: 720,
-        margin: 1
-      }
-      // 生成二维码dataURL
-      const downDataURL = await QRCode.toDataURL(this.qrcodePath, options)
-
-      // 设置下载二维码
-      const downCanvas = document.getElementById('canvas')
-      const downImg = new Image()
-      const downBgImg = new Image()
-      downImg.src = downDataURL
-      downBgImg.src = downImage
-      downBgImg.onload = function() {
-        // 重新绘制画布
-        const w = this.width
-        const h = this.height
-        downCanvas.width = w
-        downCanvas.height = h
-        const ctx = downCanvas.getContext('2d')
-        // 设置画布背景
-        ctx.fillStyle = '#ffffff'
-        ctx.fillRect(0, 0, downCanvas.width, downCanvas.height)
-        // 设置文字样式
-        ctx.fillStyle = '#ffffff'
-        ctx.font = 'bold 52px MicrosoftYaHei'
-        ctx.textAlign = 'center'
-        // 绘制背景
-        ctx.drawImage(this, 0, 0)
-        // 绘制二维码
-        ctx.drawImage(downImg, 185, 372)
-        // 绘制顶部文字描述
-        const chr = strHeader.split('')
-        let temp = ''
-        const row = []
-        for (let a = 0; a < chr.length; a++) {
-          if (ctx.measureText(temp).width >= w - 290) {
-            row.push(temp)
-            temp = ''
-          }
-          temp += chr[a]
-        }
-        row.push(temp)
-        if (row.length === 1) {
-          ctx.fillText(row[0], w / 2, 122)
-        } else {
-          for (var b = 0; b < row.length; b++) {
-            ctx.fillText(row[b], w / 2, 160 - (row.length - b - 1) * 65)
-          }
-        }
-        // 绘制底部文字
-        ctx.fillStyle = '#42aaff'
-        ctx.font = 'bold 33px MicrosoftYaHei'
-        ctx.textAlign = 'center'
-        ctx.fillText(strFooter1 + strFooter2, w / 2, 238)
-        // 绘制完成后的回调
-        callback(downCanvas)
-      }
-    },
-    hanldeSNcode(code) {
-      const start = code.slice(0, 2)
-      const end = code.slice(code.length - 5, code.length - 1)
-      return start + '*'.repeat(6) + end
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.code-container {
-  position: relative;
-  z-index: 999999;
-}
-.mask {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 999998;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(0, 0, 0, 0.5);
-}
-.qrcode {
-  z-index: 999999;
-  position: fixed;
-  left: 50%;
-  top: 20%;
-  transform: translateX(-50%);
-  width: 300px;
-  height: 400px;
-  background: url(../../assets/img/qrcode-bg-show.png) no-repeat center;
-  .content {
-    width: 192px;
-    height: 192px;
-    position: absolute;
-    left: 54px;
-    bottom: 46px;
-  }
-  .down-btn {
-    left: 0;
-  }
-  .close-btn {
-    right: 0;
-  }
-  .title {
-    position: absolute;
-    top: 32px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 256px;
-    text-align: center;
-    font-size: 16px;
-    color: #fff;
-    font-weight: bold;
-  }
-  .sncode {
-    position: absolute;
-    top: 78px;
-    left: 50%;
-    transform: translateX(-50%);
-    text-align: center;
-    width: 192px;
-    color: #0e9ef0;
-    font-size: 14px;
-    span {
-      font-weight: bold;
-    }
-  }
-}
-.btn {
-  position: absolute;
-  bottom: -60px;
-  width: 108px;
-  height: 32px;
-  background-image: linear-gradient(-90deg, #50c0ff 0%, #0e90dc 100%);
-  border-radius: 4px;
-  text-align: center;
-  line-height: 32px;
-  color: #fff;
-  font-size: 14px;
-  cursor: pointer;
-}
-</style>
+<template>
+  <div class="code-container">
+    <div class="qrcode">
+      <div class="title">{{ productInfo.productName }}</div>
+      <div class="sncode"><span>仪器SN码：</span>{{ hanldeSNcode(productInfo.snCode) }}</div>
+      <div class="content">
+        <img :src="imgUrl" alt="">
+      </div>
+      <div class="btn down-btn" @click="handleDown">下载二维码</div>
+      <div class="btn close-btn" @click="handleClose">关闭</div>
+    </div>
+    <canvas id="canvas" style="display: none" />
+    <div v-if="isVisible" class="mask" @click="handleClose" />
+    <a id="downloadLink" href="#" style="display: none" />
+  </div>
+</template>
+
+<script>
+import QRCode from 'qrcode'
+import downImage from '@/assets/img/qrcode-bg-down.jpg'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'QrcodeDevice',
+  props: {
+    productInfo: {
+      type: Object,
+      default: () => {}
+    },
+    isVisible: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      imgUrl: '',
+      wwwServer: process.env.VUE_APP_BASE_SERVER,
+      wwwHost: process.env.VUE_APP_WWW_HOST,
+      qrcodePath: ''
+    }
+  },
+  computed: {
+    ...mapGetters(['authUserId'])
+  },
+  created() {
+    this.initQrcode()
+  },
+  methods: {
+    // 关闭二维码
+    handleClose() {
+      this.$emit('close')
+    },
+    // 下载二维码
+    handleDown() {
+      this.createDownFile((downCanvas) => {
+        // 构造url
+        var url = downCanvas.toDataURL('image/jpg')
+        // 构造a标签并模拟点击
+        var downloadLink = document.getElementById('downloadLink')
+        downloadLink.setAttribute('href', url)
+        downloadLink.setAttribute('download', '二维码.jpg')
+        downloadLink.click()
+      })
+    },
+    // 初始化二维码
+    async initQrcode() {
+      console.log(this.productInfo)
+      if (this.authUserId === 12) {
+        this.qrcodePath = `${this.wwwHost}/12/ross/approve/device/detail?id=${this.productInfo?.productId}`
+      } else {
+        this.qrcodePath = `${this.wwwServer}/product/auth/product-${this.productInfo?.productId}.html`
+      }
+      // 二维码配置
+      const options = {
+        width: 192,
+        height: 192,
+        margin: 1
+      }
+      try {
+        this.imgUrl = await QRCode.toDataURL(this.qrcodePath, options)
+      } catch (err) {
+        console.error(err)
+      }
+    },
+    // 生成下载的文件
+    async createDownFile(callback) {
+      if (this.authUserId === 12) {
+        this.qrcodePath = `${this.wwwHost}/12/ross/approve/device/detail?id=${this.productInfo?.productId}`
+      } else {
+        this.qrcodePath = `${this.wwwServer}/product/auth/product-${this.productInfo?.productId}.html`
+      }
+      const strHeader = this.productInfo.productName
+      const strFooter1 = '仪器SN码：'
+      const strFooter2 = this.hanldeSNcode(this.productInfo.snCode)
+      // 生成二维码参数信息
+      const options = {
+        width: 720,
+        height: 720,
+        margin: 1
+      }
+      // 生成二维码dataURL
+      const downDataURL = await QRCode.toDataURL(this.qrcodePath, options)
+
+      // 设置下载二维码
+      const downCanvas = document.getElementById('canvas')
+      const downImg = new Image()
+      const downBgImg = new Image()
+      downImg.src = downDataURL
+      downBgImg.src = downImage
+      downBgImg.onload = function() {
+        // 重新绘制画布
+        const w = this.width
+        const h = this.height
+        downCanvas.width = w
+        downCanvas.height = h
+        const ctx = downCanvas.getContext('2d')
+        // 设置画布背景
+        ctx.fillStyle = '#ffffff'
+        ctx.fillRect(0, 0, downCanvas.width, downCanvas.height)
+        // 设置文字样式
+        ctx.fillStyle = '#ffffff'
+        ctx.font = 'bold 52px MicrosoftYaHei'
+        ctx.textAlign = 'center'
+        // 绘制背景
+        ctx.drawImage(this, 0, 0)
+        // 绘制二维码
+        ctx.drawImage(downImg, 185, 372)
+        // 绘制顶部文字描述
+        const chr = strHeader.split('')
+        let temp = ''
+        const row = []
+        for (let a = 0; a < chr.length; a++) {
+          if (ctx.measureText(temp).width >= w - 290) {
+            row.push(temp)
+            temp = ''
+          }
+          temp += chr[a]
+        }
+        row.push(temp)
+        if (row.length === 1) {
+          ctx.fillText(row[0], w / 2, 122)
+        } else {
+          for (var b = 0; b < row.length; b++) {
+            ctx.fillText(row[b], w / 2, 160 - (row.length - b - 1) * 65)
+          }
+        }
+        // 绘制底部文字
+        ctx.fillStyle = '#42aaff'
+        ctx.font = 'bold 33px MicrosoftYaHei'
+        ctx.textAlign = 'center'
+        ctx.fillText(strFooter1 + strFooter2, w / 2, 238)
+        // 绘制完成后的回调
+        callback(downCanvas)
+      }
+    },
+    hanldeSNcode(code) {
+      const start = code.slice(0, 2)
+      const end = code.slice(code.length - 5, code.length - 1)
+      return start + '*'.repeat(6) + end
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.code-container {
+  position: relative;
+  z-index: 999999;
+}
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999998;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+}
+.qrcode {
+  z-index: 999999;
+  position: fixed;
+  left: 50%;
+  top: 20%;
+  transform: translateX(-50%);
+  width: 300px;
+  height: 400px;
+  background: url(../../assets/img/qrcode-bg-show.png) no-repeat center;
+  .content {
+    width: 192px;
+    height: 192px;
+    position: absolute;
+    left: 54px;
+    bottom: 46px;
+  }
+  .down-btn {
+    left: 0;
+  }
+  .close-btn {
+    right: 0;
+  }
+  .title {
+    position: absolute;
+    top: 32px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 256px;
+    text-align: center;
+    font-size: 16px;
+    color: #fff;
+    font-weight: bold;
+  }
+  .sncode {
+    position: absolute;
+    top: 78px;
+    left: 50%;
+    transform: translateX(-50%);
+    text-align: center;
+    width: 192px;
+    color: #0e9ef0;
+    font-size: 14px;
+    span {
+      font-weight: bold;
+    }
+  }
+}
+.btn {
+  position: absolute;
+  bottom: -60px;
+  width: 108px;
+  height: 32px;
+  background-image: linear-gradient(-90deg, #50c0ff 0%, #0e90dc 100%);
+  border-radius: 4px;
+  text-align: center;
+  line-height: 32px;
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+}
+</style>

src/views/admin/logistics-licensed/club/device/index.vue

@@ -50,19 +50,19 @@
 
     <!-- 二维码 -->
     <transition name="fade">
-      <qrcode v-if="showQRcode" :product-info="productInfo" @close="showQRcode = false" />
+      <qrcode-device v-if="showQRcode" :product-info="productInfo" @close="showQRcode = false" />
     </transition>
   </div>
 </template>
 
 <script>
 import { getProdList } from '@/api/product'
-import Qrcode from '@/components/qrcode'
+import QrcodeDevice from '@/components/QrcodeDevice'
 import { mapGetters } from 'vuex'
 import { setStorage } from '@/utils/storage'
 export default {
   name: 'ComplexTable',
-  components: { Qrcode },
+  components: { QrcodeDevice },
 
   data() {
     return {

src/views/admin/supplier/club/device/index.vue

@@ -132,18 +132,18 @@
 
     <!-- 二维码 -->
     <transition name="fade">
-      <qrcode v-if="showQRcode" :product-info="productInfo" @close="showQRcode = false" />
+      <qrcode-device v-if="showQRcode" :product-info="productInfo" @close="showQRcode = false" />
     </transition>
   </div>
 </template>
 
 <script>
 import { getProdList } from '@/api/product'
-import Qrcode from '@/components/qrcode'
+import QrcodeDevice from '@/components/QrcodeDevice'
 import { mapGetters } from 'vuex'
 export default {
   name: 'ComplexTable',
-  components: { Qrcode },
+  components: { QrcodeDevice },
 
   data() {
     return {

src/views/normal/club/device/index.vue

@@ -101,19 +101,19 @@
 
     <!-- 二维码 -->
     <transition name="fade">
-      <qrcode v-if="showQRcode" :product-info="productInfo" @close="showQRcode = false" />
+      <qrcode-device v-if="showQRcode" :product-info="productInfo" @close="showQRcode = false" />
     </transition>
   </div>
 </template>
 
 <script>
 import { getProdList, setProductStatus, removeProduct } from '@/api/product'
-import Qrcode from '@/components/qrcode'
+import QrcodeDevice from '@/components/QrcodeDevice'
 import { mapGetters } from 'vuex'
 import { setStorage } from '@/utils/storage'
 export default {
   name: 'ComplexTable',
-  components: { Qrcode },
+  components: { QrcodeDevice },
   data() {
     return {
       authParty: '',

src/views/normal/club/index.vue

@@ -136,21 +136,21 @@
 
     <!-- 二维码 -->
     <transition name="fade">
-      <qrcode v-if="showQRcode" :qrcode-data="clubInfo" @close="showQRcode = false" />
+      <qrcode-club v-if="showQRcode" :qrcode-data="clubInfo" @close="showQRcode = false" />
     </transition>
   </div>
 </template>
 
 <script>
 import FileUpload from '@/components/FileUpload'
-import Qrcode from '@/components/qrcode/club-qrcode.vue'
+import QrcodeClub from '@/components/QrcodeClub'
 import { fecthAuthList, changeAuthStatus, removeAuth, authImportExcel } from '@/api/auth'
 import { mapGetters } from 'vuex'
 import { debounce, downloadWithUrl } from '@/utils/tools'
 import handleClipboard from '@/utils/clipboard'
 export default {
   name: 'ComplexTable',
-  components: { FileUpload, Qrcode },
+  components: { FileUpload, QrcodeClub },
   data() {
     return {
       showQRcode: false,