1. 优化

src/views/distribution/personnelMr/index.vue

@@ -159,20 +159,24 @@
     <el-dialog
       title="推广码"
       :visible.sync="visibleStatus"
-      width="500px"
+      width="400px"
       :destroy-on-close="true"
       :close-on-click-modal="false"
     >
-      <div id="capture" style="width: 400px; height: 500px; position: relative;background-size: cover;background-repeat: no-repeat" :style="{backgroundImage:'url('+newObj.posterImg+')'}">
-        <el-image
-          style="width: 180px; height: 180px; position: absolute; bottom: 0; right: 0;"
-          :src="newObj.url"
-          fit="cover"
-        />
-      </div>
+      <div style="display: flex;justify-content: center;">
+        <div id="capture" style="width: 300px; height: 544px; position: relative;background-size: cover;background-repeat: no-repeat;box-shadow: 0px 0px 20px 2px rgba(221,221,221,0.5);border-radius: 10px;" :style="{backgroundImage:'url('+newObj.posterImg+')'}">
+          <el-image
+            style="width: 80px; height: 80px; position: absolute; bottom: 10px; right: 10px;"
+            :src="newObj.url"
+            fit="fill"
+          />
+        </div>
+      </div>  
+    
       <div slot="footer" class="dialog-footer">
         <el-button @click="visibleStatus = false">取 消</el-button>
-        <el-button type="primary" @click="getShareImgBase64(newObj)">下 载</el-button>
+        <el-button :loading="getShareImgBase64Loading" type="primary" @click="getShareImgBase64(newObj)">
+          {{ getShareImgBase64Loading ? '下载中':'下 载' }}</el-button>
       </div>
     </el-dialog>
 
@@ -332,6 +336,7 @@ export default {
       },
       setRules: [],
       setLoading: false,
+      getShareImgBase64Loading: false,
     };
   },
   created() {
@@ -515,6 +520,7 @@ export default {
     // 推广码 base64
     getShareImgBase64() {
       return new Promise((resolve) => {
+        this.getShareImgBase64Loading = true
         setTimeout(() => {
           // #capture 就是我们要获取截图对应的 DOM 元素选择器
           html2canvas(document.querySelector('#capture'), {
@@ -525,7 +531,10 @@ export default {
             const imgData = canvas.toDataURL('image/jpeg', 1.0);
             this.codeDownload(imgData);
             resolve(imgData);
-          });
+            this.getShareImgBase64Loading = false
+          }).catch(()=>{
+            this.getShareImgBase64Loading = false
+          })
         }, 300); // 这里加上 300ms 的延迟是为了让 DOM 元素完全渲染完成后再进行图片的生成
       });
     },