From e7182902bad013814073b67e7b78424f383d3b5d Mon Sep 17 00:00:00 2001
From: LinCyJang <linxi957440651@163.com>
Date: Mon, 1 Jun 2026 01:27:22 +0800
Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=E7=89=B9=E8=89=B2=E7=A4=BC?=
 =?UTF-8?q?=E5=93=81=E5=8A=A0=E8=BD=BD=E4=BC=98=E5=8C=96=EF=BC=8C=E4=B8=8D?=
 =?UTF-8?q?=E5=9C=A8=E5=85=88=E6=8C=A4=E5=9C=A8=E4=B8=80=E8=B5=B7=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pkg_product/views/giftList.vue | 51 ++++++++++++++++++++++++++++++----
 1 file changed, 45 insertions(+), 6 deletions(-)

diff --git a/pkg_product/views/giftList.vue b/pkg_product/views/giftList.vue
index 279c9b3..2915887 100644
--- a/pkg_product/views/giftList.vue
+++ b/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;