部署测试环境

H5/src/plugins/vant-ui.js

@@ -22,7 +22,8 @@ import {
   Toast,
   Uploader,
   Progress,
-  Loading
+  Loading,
+  Lazyload
 } from "vant";
 
 Vue.use(ActionSheet)
@@ -47,4 +48,5 @@ Vue.use(ActionSheet)
   .use(Uploader)
   .use(Progress)
   .use(Toast)
-  .use(Loading);
+  .use(Loading)
+  .use(Lazyload);

H5/src/views/invite.vue

 <template>
+  <!-- background-image: url(${imgSrc}) -->
   <div
     class="invite-code"
-    :style="
-      `background-image: url(${imgSrc});background-size: 100% 100%;background-repeat: no-repeat;`
-    "
+    v-lazy:background-image="imgSrc"
+    :style="`;background-size: 100% 100%;background-repeat: no-repeat;`"
   >
     <div class="nav">
       <van-icon
@@ -15,7 +15,7 @@
       />
       <!-- <img :src="imgSrc" alt="" class="imgCode" /> -->
     </div>
-    <van-button type @click="onSave">保存</van-button>
+    <van-button v-if="showBtn" type @click="onSave">保存</van-button>
   </div>
 </template>
 <script>
@@ -24,11 +24,14 @@ export default {
   name: "Invite",
   data() {
     return {
-      imgSrc: ""
+      imgSrc: "",
+      showBtn: false,
+      btnTimer: null,
+      timer: null
     };
   },
   mounted() {
-    setTimeout(() => {
+    this.timer = setTimeout(() => {
       this.inviteCode();
     }, 200);
   },
@@ -57,6 +60,9 @@ export default {
       //   _this.imgSrc = _this.getUserPhoto(res);
       // });
       this.imgSrc = `${process.env.VUE_APP_BASE_URL}/shop-mall/api/user/registerByQrCode?height=150&userId=${userId}&width=150`;
+      this.btnTimer = setTimeout(() => {
+        this.showBtn = true;
+      }, 800);
     },
     getUserPhoto(res) {
       let uInt8Array = new Uint8Array(res);
@@ -70,6 +76,10 @@ export default {
       let imageUrl = "data:" + imageType + ";base64," + data;
       return imageUrl;
     }
+  },
+  destoryed() {
+    clearTimeout(this.timer);
+    clearTimeout(this.btnTimer);
   }
 };
 </script>

H5/src/views/settings.vue

@@ -3,7 +3,7 @@
     <van-cell-group class="group-1">
       <van-cell title="用户名" :value="userName" />
       <!--is-link @click="onModefy" -->
-      <van-cell center title="头像">
+      <van-cell center title="头像" is-link @click="onModefy">
         <img class="avatar-img" :src="imageBaseUrl + avatar" alt="头像" />
       </van-cell>
       <van-cell title="我的邀请码" :value="myInviteCode" />