Feat(首页)：新品专区（完成）

pages/home/index.vue

@@ -109,12 +109,47 @@
               />
             </swiper-item>
           </swiper>
-          <image
+          <!-- <image
             v-if="contentFestival.indexImage"
             :src="contentFestival.indexImage"
             mode="scaleToFill"
             @click="goFestival"
-          />
+          /> -->
+          <view class="new-zone-wrap">
+            <view class="kd" @click="toKD">
+              <view class="img-wrap">
+                <image  style="width: 112rpx; height:26rpx" :src="webUrl + '/orderIcon/kd.png'" mode="heightFix|widthFix"></image>
+              </view>
+              <view class="tip-img">
+                <image style="width: 142rpx; height:66.11rpx;border-radius: 0" :src="webUrl + '/orderIcon/dot.png'" mode="heightFix|widthFix"></image>
+              </view>
+              <view class="kd-cover">
+                <video v-if="indexVideo" class="kd-cover v12-mt-0" :src="indexVideo" controls :poster="indexVideo + '?vframe/jpg/offset/1'"></video>
+                <view class="enter-btn">点击进入</view>
+              </view>
+            </view>
+            <view class="xpsx">
+              <view class="img-wrap">
+                <image style="width: 140rpx; height:26.44rpx" :src="webUrl + '/orderIcon/xp.png'" mode="heightFix|widthFix"></image>
+              </view>
+              <view class="new-zone v12-mt-2" @click="toNewZone">
+                <swiper autoplay circular style="width: 100%;" interval="3000" next-margin="40rpx">
+                  <swiper-item v-for="(item, index) in newZone" :key="index">
+                    <view  class="new-item">
+                      <image :src="item.productImage" style="width: 120rpx; height: 120rpx; border-radius:10rpx"></image>
+                      <view class="goods-info">
+                        <view class="v12-font-22 more-t">{{ item.productTitle }}</view>
+                        <view class="v12-primary-text v12-font-bold price-wrap">
+                          <text class="v12-font-16">￥</text>
+                          <text class="v12-font-24">{{ item.productPrice }}</text>
+                        </view>
+                      </view>
+                    </view>
+                  </swiper-item>
+                </swiper>
+              </view>
+            </view>
+          </view>
         </view>
       </view>
       <!-- 2022/6/20 add 尖货推荐 -->
@@ -291,6 +326,9 @@ export default {
       oldUserPopup: {},
       // 民宿专题轮播
       contentHomestay: [],
+      // 新品推荐
+      newZone: [],
+      indexVideo: '',
       // 节日专题
       contentFestival: {},
       pageKeyId: Object.freeze('appIndex'),
@@ -329,6 +367,12 @@ export default {
     this.scrollTop = e.scrollTop
   },
   methods: {
+    toKD() {
+      this.$yrouter.push('/pages/VideoPlayBackList/VideoPlayBackList')
+    },
+    toNewZone() {
+      this.$yrouter.push('/pages/home/newZone')
+    },
     init() {
       getShareImage().then(({ data }) => this.shareAppImg = data)
       sharpBannar().then(res => {
@@ -370,6 +414,8 @@ export default {
         _this.$set(_this, 'oldUserPopup', data.oldUserPopup)
         _this.$set(_this, 'contentHomestay', data.contentHomestayV2)
         _this.$set(_this, 'contentFestival', data.contentFestivalV2)
+        _this.$set(_this, 'newZone', data.newGoods)
+        _this.indexVideo = data.indexVideo.videoUrl
         _this.bastLeftList = []
         _this.bastRightList = []
         _this.lotteryCanDraw = data.lotteryCanDraw
@@ -796,5 +842,87 @@ export default {
       margin: 0 0 0 20rpx;
     }
   }
+}
+.new-zone-wrap{
+  width: 336rpx;
+  height: 480rpx;
+  background: rgba(240,240,240,0.8);
+  border-radius: 16rpx;
+  padding: 10rpx;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .kd{
+    width: 100%;
+    height: 266rpx;
+    background: #fff;
+    border-radius: 16rpx;
+    padding: 10rpx;
+    box-sizing: border-box;
+    position: relative;
+  }
+  .xpsx{
+    width: 100%;
+    height: 180rpx;
+    background: #fff;
+    border-radius: 16rpx;
+    padding: 10rpx;
+    box-sizing: border-box;
+  }
+}
+.img-wrap{
+  height: 27rpx;
+  width: 140rpx;
+  image{
+    border-radius: 0 !important;
+    vertical-align: text-top !important
+  }
+}
+.tip-img{
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.kd-cover{
+  width: 100%;
+  height: 180rpx;
+  border-radius: 20rpx;
+  margin-top: 20rpx;
+}
+.enter-btn{
+  color: #333;
+  background-color: rgba(255,255,255,0.6);
+  font-size: 28rpx;
+  width: fit-content;
+  padding: 6rpx 20rpx;
+  border-radius: 100rpx;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 40rpx;
+  margin: auto;
+}
+.new-zone{
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  overflow: scroll;
+}
+.new-item{
+  display: flex;
+  margin-right: 20rpx;
+  align-items: center;
+}
+.goods-info{
+  width: 122rpx;
+  height: 110rpx;
+  background: rgba(240,240,240,0.8);
+  border-radius: 0rpx 20rpx 20rpx 0rpx;
+  box-sizing: border-box;
+  padding: 10rpx;
+}
+.price-wrap{
+ 
 }
 </style>