分享海报

src/components/CollectionList.vue

@@ -1,7 +1,11 @@
 <template>
     <div class="current_recommendation_con" :key="index" @click="goDetail">
         <!-- <img :src="info.pic[0].url" alt="" class="current_recommendation_img"> -->
-        <van-image width="100%" height="calc(100vw/2 - 22.2px)" :radius="18" :src="getImg(info.pic[0].url)" fit="cover" />
+        <van-image width="100%" height="calc(100vw/2 - 22.2px)" :radius="18" :src="getImg(info.pic[0].url)" fit="cover">
+            <template v-slot:loading>
+                <van-loading type="spinner" size="20" />
+            </template>
+        </van-image>
         <!-- <van-image width="100%" height="calc(50vw - 24px)" :src="getImg(changeImgs(info.pic, 600))" fit="cover" class="current_recommendation_img"/> -->
         <div class="current_recommendation_title">{{ info.name }}</div>
         <div class="information_display">
@@ -13,7 +17,8 @@
                 <div v-else class="showOnly">仅展示</div>
             </div>
             <div class="information_display_con">
-                <span>{{ Math.max(Math.min(info.sale, info.total), 0) }}</span>&nbsp;/&nbsp;<span>{{ info.total }}</span> 
+                <span>{{ Math.max(Math.min(info.sale, info.total), 0) }}</span
+                >&nbsp;/&nbsp;<span>{{ info.total }}</span>
             </div>
         </div>
         <div class="current_recommendation_bottom">
@@ -23,11 +28,16 @@
                 <div class="current_recommendation_name">{{ info.owner }}</div>
             </div>
             <div class="current_recommendation_bottom_right">
-                <img :src="info.liked ? likes : noLikes" @click.stop="likeProduct"  alt="" class="current_recommendation_bottom_right_img" />
-                <div class="give_number">{{info.likes}}</div>
+                <img
+                    :src="info.liked ? likes : noLikes"
+                    @click.stop="likeProduct"
+                    alt=""
+                    class="current_recommendation_bottom_right_img"
+                />
+                <div class="give_number">{{ info.likes }}</div>
             </div>
         </div>
-        <img :src="require('@assets/dibuwenli.png')" alt="" class="bottom_texture">
+        <img :src="require('@assets/dibuwenli.png')" alt="" class="bottom_texture" />
     </div>
     <!-- <div class="sold xianliang" v-if="time && info.salable">
                 <img src="@assets/shizhong.png" alt="" />
@@ -123,7 +133,7 @@ export default {
     margin-bottom: 17px;
     overflow: hidden;
     position: relative;
-    .bottom_texture{
+    .bottom_texture {
         width: 100px;
         height: 100px;
         position: absolute;
@@ -158,14 +168,14 @@ export default {
             font-weight: 600;
             color: #ffffff;
             position: relative;
-            .current_recommendation_price_one{
+            .current_recommendation_price_one {
                 font-size: 12px;
                 line-height: 20px;
                 position: absolute;
                 bottom: 1px;
                 left: 0px;
             }
-            .current_recommendation_price_two{
+            .current_recommendation_price_two {
                 font-size: 16px;
                 line-height: 24px;
             }
@@ -177,12 +187,12 @@ export default {
                 line-height: 24px;
             }
         }
-        .information_display_con{
+        .information_display_con {
             height: 18px;
             font-size: 11px;
             font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
-            color: #FFFFFF;
+            color: #ffffff;
             opacity: 0.5;
             line-height: 18px;
         }
@@ -216,7 +226,7 @@ export default {
             font-size: 12px;
             font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
-            color: #FFFFFF;
+            color: #ffffff;
             opacity: 0.5;
             overflow: hidden;
             text-overflow: ellipsis;

src/components/Post.vue

@@ -16,7 +16,11 @@
                     <div class="content" v-else ref="post">
                         <!-- @load="loadImg" -->
                         <!-- <img crossOrigin="anonymous" :src="banners" class="detailImg" /> -->
-                        <van-image :src="detailImg" class="detailImg" fit="cover" />
+                        <van-image :src="detailImg" class="detailImg" fit="cover">
+                            <template v-slot:loading>
+                                <van-loading type="spinner" size="20" />
+                            </template>
+                        </van-image>
                         <div class="info">
                             <div class="name van-multi-ellipsis--l2">
                                 {{ info.name }}
@@ -181,22 +185,35 @@ export default {
     components: {
         vueQrcode
     },
+    watch: {
+        info() {
+            this.$nextTick(() => {
+                this.getImgBase64(require('@assets/icon@3x.png'), 'logoImg');
+                if (this.assignment && this.pageUrl === 'productDetail') {
+                    this.getImgBase64(this.info.shareBg, 'shareBg');
+                } else {
+                    this.getImgBase64(this.banners, 'detailImg');
+                    this.getImgBase64(this.info.minterAvatar, 'userImg');
+                }
+            });
+        }
+    },
     methods: {
         init(value) {
             this.show = true;
             if (!this.img) {
-                this.$toast.loading({
-                    message: '加载中...',
-                    forbidClick: true
-                });
+                // this.$toast.loading({
+                //     message: '加载中...',
+                //     forbidClick: true
+                // });
                 this.$nextTick(() => {
                     this.getImgBase64(require('@assets/icon@3x.png'), 'logoImg');
-                    if (this.assignment && this.pageUrl === 'productDetail') {
-                        this.getImgBase64(this.info.shareBg, 'shareBg');
-                    } else {
-                        this.getImgBase64(this.banners, 'detailImg');
-                        this.getImgBase64(this.info.minterAvatar, 'userImg');
-                    }
+                    // if (this.assignment && this.pageUrl === 'productDetail') {
+                    //     this.getImgBase64(this.info.shareBg, 'shareBg');
+                    // } else {
+                    //     this.getImgBase64(this.banners, 'detailImg');
+                    //     this.getImgBase64(this.info.minterAvatar, 'userImg');
+                    // }
                     setTimeout(() => {
                         this.loadImg();
                     }, 1000);

src/components/asset/assetInfo.vue

@@ -19,17 +19,25 @@
             :src="getImg(changeImgs(info.pic))"
             fit="cover"
             class="data_display_con_img"
-        />
+        >
+            <template v-slot:loading>
+                <van-loading type="spinner" size="20" />
+            </template>
+        </van-image>
         <div class="data_display_con_title">{{ info.name }}</div>
         <div class="blockchain">
             <img :src="require('@assets/blockchain@3x.png')" alt="" class="blockchain_img" />
-            <div class="blockchain_title">{{info.tokenId}}</div>
+            <div class="blockchain_title">{{ info.tokenId }}</div>
         </div>
         <div class="data_display_con_collection">
-            <div class="data_display_con_collection_title">{{info.minter}}</div>
-            <img :src="!!info.model3d ? require('@assets/3d@3x.png') : require('@assets/tupian@3x.png')" alt="" class="shop_title_img" />
+            <div class="data_display_con_collection_title">{{ info.minter }}</div>
+            <img
+                :src="!!info.model3d ? require('@assets/3d@3x.png') : require('@assets/tupian@3x.png')"
+                alt=""
+                class="shop_title_img"
+            />
         </div>
-        <img :src="require('@assets/dibuwenli.png')" alt="" class="bottom_texture">
+        <img :src="require('@assets/dibuwenli.png')" alt="" class="bottom_texture" />
     </div>
     <!-- <van-image
             v-if="opened === false"
@@ -134,7 +142,7 @@ export default {
     border-radius: 18px;
     margin-bottom: 15px;
     position: relative;
-    .bottom_texture{
+    .bottom_texture {
         width: 85px;
         height: 100px;
         position: absolute;
@@ -221,20 +229,20 @@ export default {
         justify-content: space-between;
         padding: 0px 10px 14px;
         box-sizing: border-box;
-        .data_display_con_collection_title{
+        .data_display_con_collection_title {
             margin-right: 21px;
             width: calc(100% - 39px);
             font-size: 12px;
             font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
-            color: #FFFFFF;
+            color: #ffffff;
             line-height: 18px;
             opacity: 0.5;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
         }
-        .shop_title_img{
+        .shop_title_img {
             width: 18px;
             height: 18px;
         }

src/components/product/ProductBanner.vue

@@ -34,17 +34,21 @@
                         width="calc(100vw - 110px)"
                         height="calc(100vw - 110px)"
                         fit="contain"
-                    />
+                    >
+                        <template v-slot:loading>
+                            <van-loading type="spinner" size="20" />
+                        </template>
+                    </van-image>
                 </swiper-slide>
             </swiper>
-            <div :class="!!info.model3d?'share-content':'share-content-one'">
+            <div :class="!!info.model3d ? 'share-content' : 'share-content-one'">
                 <!-- <div class="setAvatar" @click="setAvatar" v-if="pageType == 'asset' && onlyImg">
                     <img src="../../assets/icon-sheweitouxiang.png" alt="" />
                     <span>设为头像</span>
                 </div> -->
 
                 <like-button v-if="pageType == 'product'" :isLike="info.liked" @click="likeProduct">
-                    {{ info.likes||'收藏' }}
+                    {{ info.likes || '收藏' }}
                 </like-button>
 
                 <div class="share-icon shareLeft" @click="share" v-if="isShare && !startTime && !assignment">
@@ -244,7 +248,7 @@ export default {
     // position: absolute;
     // bottom: 0;
 }
-.share-content-one{
+.share-content-one {
     display: flex;
     // margin-top: 30px;
 }

src/components/product/productLarge.vue

@@ -27,7 +27,11 @@
                 :radius="30"
                 :src="getImg(changeImgs(info.pic))"
                 fit="cover"
-            />
+            >
+                <template v-slot:loading>
+                    <van-loading type="spinner" size="20" />
+                </template>
+            </van-image>
             <div class="shop_title">
                 <div>{{ info.name }}</div>
                 <img v-if="!!info.model3d" :src="require('@assets/3d@3x.png')" alt="" class="shop_title_img" />