Feat：甄选好礼

pages.json

@@ -51,7 +51,7 @@
     {
       "path": "pages/home/newZone",
       "style": {
-        "navigationBarTitleText": "新品专区",
+        "navigationBarTitleText": "甄选好礼",
         "navigationBarBackgroundColor": "#FFFFFF"
       }
     },

pages/home/index.vue

@@ -183,7 +183,24 @@
             </swiper-item>
           </swiper> -->
           <view class="new-zone-wrap">
-            <view v-if="indexVideo" class="kd" id="xkd">
+            <image class="bg-img" :src="newZone.indexBackgroundImage" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image>
+            <view class="swiper-wrap-zx v12-mt-2" @click="toNewZone">
+                <swiper autoplay @change="changeIndex"  :current="currentIndex" next-margin="40rpx" previous-margin="80rpx" circular style="width: 100%;height: 400rpx;" interval="3000">
+                  <swiper-item style="position: absolute; width: 100%; transform: translate(200%, 0px) translateZ(0px);" v-for="(item, index) in newZone.indexProducts" :key="index" class="s-item" :class="{'n-actived': currentIndex !== index}">
+                    <view class="zx-item">
+                      <image :src="item.productImage" style="width: 192rpx; height: 192rpx; border-radius:10rpx"></image>
+                      <view class="v12-pa-2">
+                        <view class="v12-font-28 more-t v12-font-bold" style="text-align: center;">{{ item.productName }}</view>
+                        <view class="v12-primary-text v12-font-bold price-wrap" style="text-align: center;">
+                          <text class="v12-font-16">￥</text>
+                          <text class="v12-font-24">{{ item.productPrice }}</text>
+                        </view>
+                      </view>
+                    </view>
+                  </swiper-item>
+                </swiper>
+              </view>
+            <!-- <view v-if="indexVideo" class="kd" id="xkd">
               <view class="img-wrap" style="padding-top: 10rpx; box-sizing:border-box">
                 <image  style="width: 112rpx; height:26rpx" :src="webUrl + '/orderIcon/kd.png'" mode="heightFix|widthFix"></image>
               </view>
@@ -215,7 +232,7 @@
                   </swiper-item>
                 </swiper>
               </view>
-            </view>
+            </view> -->
           </view>
         </view>
       </view>
@@ -433,7 +450,8 @@ export default {
       messageIcon: {},
       recommendKeyword: [],
       keywordIndex: 0,
-      shareData: {}
+      shareData: {},
+      currentIndex: 0
     }
   },
   onLoad() {
@@ -479,6 +497,9 @@ export default {
     }
   },
   methods: {
+    changeIndex(e) {
+      this.currentIndex = e.detail.current
+    },
     changeRecommendKeyword(e) {
       this.keywordIndex = e
     },
@@ -1550,6 +1571,27 @@ export default {
 </script>
 
 <style scoped lang="less">
+.n-actived{
+  bottom: 20rpx !important;
+}
+.s-item{
+  height: fit-content !important;
+   bottom: 0rpx;
+}
+.zx-item{
+  width: 192rpx;
+  background: #fff;
+  border-radius: 16rpx;
+  height: 346rpx;
+}
+.swiper-wrap-zx{
+  position: absolute;
+  bottom: 20rpx;
+  z-index: 2;
+  /* height: 50%; */
+  width: 100%;
+  left: 0;
+}
 .swiper-item {
   height: 100%;
 }
@@ -1833,6 +1875,14 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  position: relative;
+  .bg-img{
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
   .kd{
     width: 100%;
     height: 266rpx;

pages/home/newZone.vue

@@ -29,8 +29,31 @@
         </swiper>
       </view>
     </view>
-
+    <view class="v12-align-center tabs-wrap v1-py-1 v12-mt-2">
-    <view class="v12-mt-2 v12-align-center">
+      <view class="tab-item v12-font-bold" v-for="(tab, index) in tabs" :key="index" @click="handleClick(index, tab)">
+        {{ tab.cateName }}
+        <view class="tab-line" v-if="activeIndex == index"></view>
+      </view>
+    
+    </view>
+    <view class="product-wrap v12-mt-3">
+      <view class="product-card" v-for="(item, index) in products" :key="index" @click="toGoods(item)">
+        <image :src="item.productImage" class="product-card-img" mode="heightFix|widthFix"></image>
+        <view class="new-info">
+          <view class="v12-font-26 more-t" style="width: 100%;">{{ item.productName }}</view>
+          <view style="width: 100%;" class="v12-font-bold v12-primary-text v12-align-center v12-justify-between">
+            <view>
+              <text>￥</text>
+                <text class=" v12-font-36">{{ item.productPrice }}</text>
+            </view>
+            <view>
+              <u-icon :name="webUrl + '/home/icon-cart.png'" size="24"></u-icon>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- <view class="v12-mt-2 v12-align-center">
       <view class="primary-title" v-if="details.contentTitle">
         {{ details.contentTitle }}
         <view class="title-line"></view>
@@ -42,7 +65,7 @@
     </view>
     <view class="cover-img v12-mt-2" v-for="(item, index) in details.contents" :key="index" @click="toGoods(item)">
       <image :src="item.contentImage" class="cover-img" mode="heightFix|widthFix"></image>
-    </view>
+    </view> -->
   </view>
 </template>
 <script>
@@ -50,13 +73,19 @@ import { queryNewZone } from '@/api/activity'
 export default{
   data() {
     return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
       details: {},
       current: 0,
+      tabs: [],
+      activeIndex: 0,
+      products: []
     }
   },
   onLoad() {
     queryNewZone().then(res => {
       this.details = res.data 
+      this.tabs = res.data.categories
+      this.handleClick(0, this.tabs[0])
     })
   },
   computed: {
@@ -66,6 +95,10 @@ export default{
 
   },
   methods: {
+    handleClick(index, tab) {
+      this.activeIndex = index
+      this.products = tab.products
+    },
     handleChange(e) {
       this.current = e.detail.current
     },
@@ -78,10 +111,50 @@ export default{
 }
 </script>
 <style lang="scss" scoped>
+.product-card{
+  width: 342rpx;
+  height: 520rpx;
+  background: #fff;
+  border-radius: 20rpx;
+  margin-bottom: 20rpx;
+}
+.product-card-img{
+  width: 344rpx;
+  height: 344rpx;
+  background: rgba(169,56,56,0.39);
+  border-radius: 20rpx;
+}
+.product-wrap{
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.tab-line{
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 6rpx;
+  background: linear-gradient(to right, #C52733 0%, rgba(202,56,67,0.92) 51%, rgba(255,255,255,0) 100%);
+  border-radius: 6rpx;
+}
+.tabs-wrap{
+  overflow: auto;
+  justify-content: space-around;
+}
+.tab-item{
+  margin-right: 20rpx;
+  white-space: nowrap;
+  position: relative;
+  &:last-child{
+    margin-right: 0;
+  }
+}
 .new-info{
   display: flex;
   align-items: center;
   flex-direction: column;
+  padding: 20rpx 20rpx 0 20rpx;
 }
 .box-emp{
   width: 100%;
@@ -160,7 +233,7 @@ export default{
 }
   .new-zone-page{
     min-height: 100vh;
-    background-color: #fff;
+    // background-color: #fff;
     padding: 20rpx;
   }
   .banner-zone{