更新

src/views/tenantAllData/index.module.less

@@ -345,82 +345,104 @@
     right: -9px;
   }
 
-  .qrcodeBg {
-    // position: absolute;
-    // left: 0;
-    // right: 0;
-    // top: -40px;
+  .image {
     width: 310px;
-    // margin-top: -40px;
   }
 
-  .shareContaienr {
-    width: 310px;
-    position: relative;
-    text-align: center;
-    border-radius: 16px;
+  .btnText {
     text-align: center;
-    line-height: 0;
-    font-size: 0;
-    // margin-top: 40px;
-    overflow: hidden;
+    padding-top: 30px;
+    font-size: 16px;
+    color: #fff;
+    font-weight: 600;
+  }
 
-    .qrcodeSection {
-      width: 155px;
-      height: 155px;
-      margin: 0 auto;
-      position: relative;
-      overflow: hidden;
+}
 
-      .qrbg {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-      }
+.qrcodeBg {
+  // position: absolute;
+  // left: 0;
+  // right: 0;
+  // top: -40px;
+  width: 310px;
+  // margin-top: -40px;
+}
 
-      .mqrcode {
-        width: 136px !important;
-        height: 136px !important;
-        margin: 12px;
-      }
-    }
+.templateSection {
+  position: absolute;
+  z-index: -10;
+  top: 0;
+  left: 0;
+  transform: translateX(9999px);
+}
 
-    .sectionGroup {
-      padding: 0 28px 40px;
-      background: linear-gradient(90deg, #C5ECF8 0%, #D9F9DC 100%);
-      margin-top: -45px;
-      position: relative;
-      z-index: 9;
-    }
+.shareContaienr {
+  width: 310px;
+  position: relative;
+  text-align: center;
+  border-radius: 16px;
+  text-align: center;
+  line-height: 0;
+  font-size: 0;
+  // margin-top: 40px;
+  overflow: hidden;
+
+
+  .qrcodeSection {
+    width: 155px;
+    height: 155px;
+    margin: 0 auto;
+    position: relative;
+    overflow: hidden;
 
-    .section {
-      border-radius: 12px;
-      background-color: #fff;
-      padding-bottom: 30px;
+    .qrbg {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
 
+    .mqrcode {
+      width: 136px !important;
+      height: 136px !important;
+      margin: 12px;
     }
   }
 
-  .memo {
-    padding: 20px 15px;
-    font-size: 14px;
-    margin: 0 auto;
-    font-weight: 500;
-    font-size: 15px;
-    color: #000000;
-    line-height: 21px;
-    word-break: break-all;
+  .sectionGroup {
+    padding: 0 28px 40px;
+    background: linear-gradient(90deg, #C5ECF8 0%, #D9F9DC 100%);
+    margin-top: -45px;
+    position: relative;
+    z-index: 9;
   }
 
-  .downloadBtn {
-    margin-top: 29px;
-    background: linear-gradient(73deg, #5BECFF 0%, #259CFE 100%);
-    border: none;
-    border-radius: 10px;
-    height: 47px;
-    max-width: 264px;
-    margin: 29px auto 0;
+  .section {
+    border-radius: 12px;
+    background-color: #fff;
+    padding-bottom: 30px;
+
   }
 }
+
+.memo {
+  padding: 20px 15px;
+  font-size: 14px;
+  margin: 0 auto;
+  font-weight: 500;
+  font-size: 15px;
+  color: #000000;
+  line-height: 21px;
+  word-break: break-all;
+}
+
+.downloadBtn {
+  margin-top: 29px;
+  background: linear-gradient(73deg, #5BECFF 0%, #259CFE 100%);
+  border: none;
+  border-radius: 10px;
+  height: 47px;
+  max-width: 264px;
+  margin: 29px auto 0;
+}

src/views/tenantAllData/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, reactive, ref } from 'vue';
+import { defineComponent, onMounted, reactive, ref, nextTick } from 'vue';
 import styles from './index.module.less';
 import {
   Cell,
@@ -65,7 +65,7 @@ export default defineComponent({
       rows: 20,
       isClick: false,
       qrcodeStatus: false,
-      url: '', // 二维码
+      url: '1', // 二维码
       urlItem: {} as any
     });
 
@@ -164,25 +164,28 @@ export default defineComponent({
       }
       imgs.saveLoading = true;
       // 判断是否已经生成图片
-      if (imgs.image) {
-        saveImg();
-      } else {
-        const container: any = document.getElementById(`preview-container`);
-
-        html2canvas(container, {
-          allowTaint: true,
-          useCORS: true,
-          backgroundColor: null
+      // if (imgs.image) {
+      //   saveImg();
+      // } else {
+      const container: any = document.getElementById(`preview-container`);
+      console.log('1212121');
+      html2canvas(container, {
+        allowTaint: true,
+        useCORS: true,
+        backgroundColor: null
+      })
+        .then(async canvas => {
+          const url = canvas.toDataURL('image/png');
+          imgs.image = url;
+          // saveImg();
+          forms.qrcodeStatus = true;
+          imgs.saveLoading = false;
         })
-          .then(async canvas => {
-            const url = canvas.toDataURL('image/png');
-            imgs.image = url;
-            saveImg();
-          })
-          .catch(() => {
-            imgs.saveLoading = false;
-          });
-      }
+        .catch(() => {
+          imgs.saveLoading = false;
+          console.log('222');
+        });
+      // }
     };
 
     const saveImg = async () => {
@@ -346,9 +349,12 @@ export default defineComponent({
                       </div>
                       <div
                         onClick={() => {
-                          forms.qrcodeStatus = true;
                           forms.urlItem = item;
                           forms.url = `${location.origin}/classroom-app/#/tenantDataShool?id=${item.schoolId}&name=${item.schoolName}`;
+
+                          nextTick(() => {
+                            downImg();
+                          });
                         }}>
                         <p class={styles.personNum}>
                           <img src={iconQrcode} />
@@ -433,6 +439,22 @@ export default defineComponent({
           <i
             class={styles.iconClose}
             onClick={() => (forms.qrcodeStatus = false)}></i>
+
+          <img src={imgs.image} class={styles.image} />
+          {/*
+
+          <Button
+            type="primary"
+            round
+            block
+            class={styles.downloadBtn}
+            onClick={downImg}>
+            下载二维码
+          </Button> */}
+          <p class={styles.btnText}>长按或截图保存二维码</p>
+        </Popup>
+
+        <div class={styles.templateSection}>
           <div class={[styles.shareContaienr]} id="preview-container">
             <img src={qrcodeBg} class={styles.qrcodeBg} />
             <div class={styles.sectionGroup}>
@@ -450,16 +472,7 @@ export default defineComponent({
               </div>
             </div>
           </div>
-
-          <Button
-            type="primary"
-            round
-            block
-            class={styles.downloadBtn}
-            onClick={downImg}>
-            下载二维码
-          </Button>
-        </Popup>
+        </div>
       </div>
     );
   }