Feat(特色礼品):界面调整

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;
     }

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;