From d6f00b5ee0a83a4089132e1aeecd297b1de9e037 Mon Sep 17 00:00:00 2001
From: lifizer <913626195@qq.com>
Date: Wed, 13 Mar 2024 21:43:26 +0800
Subject: [PATCH] =?UTF-8?q?Feat(=E7=89=B9=E8=89=B2=E7=A4=BC=E5=93=81):?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pkg_product/views/giftContent.vue |  7 ++-
 pkg_product/views/giftList.vue    | 84 +++++++++++++++++++++++++++++--
 2 files changed, 84 insertions(+), 7 deletions(-)

diff --git a/pkg_product/views/giftContent.vue b/pkg_product/views/giftContent.vue
index 1b73009..b48a49e 100644
--- a/pkg_product/views/giftContent.vue
+++ b/pkg_product/views/giftContent.vue
@@ -1,7 +1,8 @@
 <template>
   <view class="gift-page">
     <view class="page1-wrap">
-      <image :src="data.mainImage" class="bg" />
+      <!-- <image :src="data.mainImage" class="bg" /> -->
+      <rich-text :nodes="data.mainImageHtml" />
     </view>
     <view class="page2-wrap">
       <view class="bg-cont">
@@ -73,6 +74,7 @@ export default {
         if (success) {
           this.data = {
             ...data,
+            mainImageHtml: `<img src="${data.mainImage}" style="display: block;max-width: 100%;">`,
             backgroundImage1Html: `<img src="${data.backgroundImage1}" style="display: block;max-width: 100%;">`,
             backgroundImage2Html: `<img src="${data.backgroundImage2}" style="display: block;max-width: 100%;">`
           }
@@ -114,7 +116,8 @@ export default {
     z-index: 2;
   }
   .good-list {
-    top: 196px;
+    top: 0;
+    padding: 0;
     .good-item + .good-item {
       margin: 25px 0 0 0;
     }
diff --git a/pkg_product/views/giftList.vue b/pkg_product/views/giftList.vue
index 0c8f091..c563bd6 100644
--- a/pkg_product/views/giftList.vue
+++ b/pkg_product/views/giftList.vue
@@ -4,8 +4,13 @@
       <rich-text :nodes="topBannerHtml" />
     </view>
     <view class="province-enter-wrap">
-      <view class="scroll-x-wrap">
-        <view class="list-cont">
+      <view
+        class="scroll-x-wrap"
+      >
+        <view
+          :class="!toggleStatus ? '' : 'hide'"
+          class="list-cont"
+        >
           <view
             v-for="(item, index) in provinceList"
             :key="index"
@@ -16,6 +21,36 @@
             <view class="name">{{ item.provinceMergerName }}</view>
           </view>
         </view>
+        <view
+          :class="toggleStatus ? 'show' : ''"
+          class="list-cont list-show-all"
+        >
+          <view
+            v-for="(item, index) in provinceList"
+            :key="index"
+            class="item"
+            @click="provinceItemClick(item)"
+          >
+            <image :src="item.icon" class="img" />
+            <view class="name">{{ item.provinceMergerName }}</view>
+          </view>
+        </view>
+        <view
+          v-if="!toggleStatus && provinceList.length > 5"
+          class="toggle-btn"
+          @click="toggleHandle(true)"
+        >
+          <view>展</view>
+          <view>开</view>
+        </view>
+        <view
+          v-if="toggleStatus"
+          class="toggle-btn"
+          @click="toggleHandle(false)"
+        >
+          <view>收</view>
+          <view>起</view>
+        </view>
       </view>
     </view>
     <view class="province-bg-list">
@@ -61,7 +96,8 @@ export default {
     return {
       provinceList: [],
       topBannerHtml: '',
-      topBannerUrl: ''
+      topBannerUrl: '',
+      toggleStatus: false
     }
   },
   onLoad() {
@@ -114,6 +150,9 @@ export default {
       uni.navigateTo({
         url: `/pages/shop/GoodsCon/index?id=${productId}`
       })
+    },
+    toggleHandle(value) {
+      this.toggleStatus = value
     }
   }
 }
@@ -129,7 +168,9 @@ export default {
   margin-top: -80rpx;
   padding: 30rpx 30rpx 0 30rpx;
   .scroll-x-wrap {
-    padding: 24rpx 60rpx 16rpx 24rpx;
+    position: relative;
+    height: 140rpx;
+    padding: 24rpx 80rpx 16rpx 24rpx;
     border-radius: 24rpx;
     background-color: #fff;
     box-shadow: 0px 1px 4px rgba(0,0,0,0.16);
@@ -137,6 +178,9 @@ export default {
       display: flex;
       flex-wrap: nowrap;
       overflow-x: auto;
+      &.hide {
+        display: none;
+      }
       .item + .item {
         margin: 0 0 0 24rpx;
       }
@@ -154,6 +198,35 @@ export default {
         }
       }
     }
+    .list-show-all {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 2;
+      flex-wrap: wrap;
+      height: 0;
+      padding: 24rpx 80rpx 16rpx 24rpx;
+      border-radius: 24rpx;
+      box-sizing: border-box;
+      background-color: #fff;
+      opacity: 0;
+      &.show {
+        height: auto;
+        opacity: 1;
+        box-shadow: 0px 1px 4px rgba(0,0,0,0.16);
+      }
+      .item {
+        margin: 0 24rpx 24rpx 0 !important;
+      }
+    }
+    .toggle-btn {
+      position: absolute;
+      top: 24rpx;
+      right: 24rpx;
+      z-index: 5;
+      font-size: 14px;
+    }
   }
 }
 .province-bg-list {
@@ -192,7 +265,8 @@ export default {
         }
         .name {
           height: 28px;
-          padding: 5rpx 0;
+          margin: 3px 0;
+          box-sizing: border-box;
           line-height: 14px;
           display: -webkit-box;
           overflow: hidden;