Feat：甄选好礼

pages/home/newZone.vue

@@ -29,8 +29,31 @@
         </swiper>
       </view>
     </view>
-
-    <view class="v12-mt-2 v12-align-center">
+    <view class="v12-align-center tabs-wrap v1-py-1 v12-mt-2">
+      <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{