update: 预览图片

src/views/game/common/links.vue

@@ -19,7 +19,7 @@
       <div class="links__qr">
         <!-- <vue-qr id="qrWrap" :text="qcText" :size="102" :margin="0" :logoMargin="10"></vue-qr> -->
         <div style="text-align:center">
-          <el-image style="width:102px;height:102px;border:4px solid #fff" lazy :src="miniprogram.url">
+          <el-image style="width:102px;height:102px;border:4px solid #fff;cursor: pointer;" lazy :src="miniprogram.url" @click.native="onView(false)">
             <!-- <img slot="placeholder" style="width:102px;height:102px" src="@/assets/img/loaderror.png" /> -->
             <div slot="placeholder" style="display:flex;align-items:center;justify-content:center;width:100%;height:100%;">
               <i class="el-icon-picture-outline" style="font-size:30px"></i>
@@ -42,7 +42,7 @@
       </div>
       <div class="link__divider"></div>
       <div class="links__qr">
-        <vue-qr id="qrWrap" :text="qcText" :size="102" :margin="0" :logoMargin="10"></vue-qr>
+        <vue-qr id="qrWrap" :text="qcText" :size="510" :logoScale="5" :margin="0" :logoMargin="10" @click.native="onView(true)"></vue-qr>
         <el-button class="links__qr--btn" type="text" icon="iconfont icon-icon_yunxiazai fz14 mr4" @click="downloadImg">服务号二维码下载</el-button>
       </div>
     </div>
@@ -52,6 +52,8 @@
 import VueQr from 'vue-qr';
 import { formatDateTimeByType, downloadFile } from '@/utils/index.js';
 import { generateMiniProgramLink } from '@/service/api/gameApi.js';
+import { api as viewerApi } from 'v-viewer';
+import 'viewerjs/dist/viewer.css';
 export default {
   name: 'links',
   components: {
@@ -135,6 +137,16 @@ export default {
       const qrImg = qrWrap && qrWrap.childNodes[0].src;
       downloadFile(this.gameTypeName + '-' + this.obj.gameName + '-服务号-' + formatDateTimeByType(this.obj.gameStartTime, 'yyyy-MM-dd-HH-mm-ss') || '游戏链接', qrImg);
     },
+    onView(isH5) {
+      let qrImg = '';
+      if (isH5) {
+        const qrWrap = document.getElementById('qrWrap');
+        qrImg = qrWrap && qrWrap.childNodes[0].src;
+      } else {
+        qrImg = this.miniprogram.url;
+      }
+      viewerApi({ images: [qrImg] });
+    },
     downloadMiniporgramImg() {
       const downloadFile = (fileName, content) => {
         const url = content;
@@ -226,6 +238,9 @@ export default {
 #qrWrap {
   /deep/ img {
     border: 4px solid #fff;
+    width: 102px;
+    height: 102px;
+    cursor: pointer;
   }
 }
 </style>