Feat：特色礼品加载优化，不在先挤在一起了

pkg_product/views/giftList.vue

@@ -1,7 +1,13 @@
 <template>
   <view class="gift-page">
     <view class="banner" @click="linkTo">
-      <rich-text :nodes="topBannerHtml" />
+      <view v-if="topBannerImage" class="banner-image-wrap">
+        <image
+          :src="topBannerImage"
+          class="banner-img"
+          mode="aspectFill"
+        />
+      </view>
     </view>
     <view class="province-enter-wrap">
       <view
@@ -60,7 +66,12 @@
         class="item"
       >
         <view class="bg" @click="provinceItemClick(item)">
-          <rich-text :nodes="item.bgHtml" />
+          <image
+            :src="item.backgroundImage"
+            class="bg-img"
+            mode="aspectFill"
+            lazy-load
+          />
         </view>
         <view class="good-list">
           <view
@@ -70,7 +81,7 @@
             @click.stop="goodItemClick(goodItem)"
           >
             <view class="good-img">
-              <image :src="goodItem.productImage" class="img" />
+              <image :src="goodItem.productImage" class="img" lazy-load />
             </view>
             <view class="name">
               {{ goodItem.productName }}
@@ -97,7 +108,7 @@ export default {
   data() {
     return {
       provinceList: [],
-      topBannerHtml: '',
+      topBannerImage: '',
       topBannerUrl: '',
       toggleStatus: false,
       pageKeyId: Object.freeze('customizedGiftIndex')
@@ -111,7 +122,7 @@ export default {
       customizedGift().then(res => {
         const { success, data } = res
         if (success) {
-          this.topBannerHtml = `<img src="${data.topBanner.image}" style="display: block;max-width: 100%;">`
+          this.topBannerImage = data.topBanner.image || ''
           this.topBannerUrl = data.topBanner.appUrl || ''
           const list = data.cities || []
           if (list.length > 0) {
@@ -120,7 +131,7 @@ export default {
               if (backgroundImage && item.productList.length > 0) {
                 this.provinceList.push({
                   ...item,
-                  bgHtml: `<img src="${item.backgroundImage}" style="display: block;max-width: 100%;">`
+                  backgroundImage
                 })
               }
             })
@@ -164,6 +175,21 @@ export default {
 .banner {
   position: relative;
   z-index: 1;
+  .banner-image-wrap {
+    position: relative;
+    width: 100%;
+    padding-top: 46%;
+    overflow: hidden;
+    background-color: #f6f6f6;
+  }
+  .banner-img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
 }
 .province-enter-wrap {
   position: relative;
@@ -243,6 +269,19 @@ export default {
     .bg {
       position: relative;
       z-index: 2;
+      width: 100%;
+      padding-top: 62%;
+      overflow: hidden;
+      border-radius: 20rpx;
+      background-color: #f6f6f6;
+      .bg-img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
     }
     .good-list {
       position: absolute;