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

api/activity.js

@@ -151,3 +151,13 @@ export function getBargainUserList(data) {
 export function getBargainUserCancel(data) {
   return request.post("/bargain/user/cancel", data);
 }
+
+/**
+ * 新品专区
+ * @param {*} data 
+ * @returns 
+ */
+
+export function queryNewZone() {
+  return request.get("/newGoods");
+}

pages.json

@@ -42,6 +42,13 @@
         "navigationBarTitleText": "地标好物"
       }
     },
+    {
+      "path": "pages/home/newZone",
+      "style": {
+        "navigationBarTitleText": "新品专区",
+        "navigationBarBackgroundColor": "#FFFFFF"
+      }
+    },
     {
       "path": "pages/chose-city/chose-city",
       "style": {

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>

pages/home/newZone.vue

@@ -0,0 +1,148 @@
+<template>
+  <view class="new-zone-page">
+    <view class="zone-title">
+      <rich-text :nodes="details.title"></rich-text>
+    </view>
+    <view class="banner-zone v12-mt-2">
+      <image class="banner-zone" :src="details.banners[0] || ''" mode="heightFix|widthFix"></image>
+      <view class="swiper-wrap">
+        <swiper style="height: 100%;" :autoplay=" details.newProducts.length > 2" circular next-margin="460rpx" interval="3000">
+          <swiper-item v-for="(item, index) in details.newProducts" :key="index" @click="toGoods(item)">
+            <view class="new-card">
+              <image :src="item.productImage" class="new-card-img" mode="heightFix|widthFix"></image>
+              <view class="box-emp"></view>
+              <view class="new-info">
+                <view class="v12-font-30 one-t" style="width: 100px;text-align:center">{{ item.productTitle }}</view>
+                <view class="v12-font-bold">
+                  <text>￥</text>
+                  <text class=" v12-font-40">{{ item.productPrice }}</text>
+                </view>
+                <view class="buy-btn">即刻选购</view>
+              </view>
+            </view>
+          </swiper-item>
+        </swiper>
+      </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>
+      </view>
+      <view class="secondary-title v12-ml-2" v-if="details.contentSubTitle">
+        —
+        {{ details.contentSubTitle }}
+      </view>
+    </view>
+    <view class="cover-img v12-mt-2" v-for="(item, index) in details.contents" @click="toGoods(item)">
+      <image :src="item.contentImage" class="cover-img" mode="heightFix|widthFix"></image>
+    </view>
+  </view>
+</template>
+<script>
+import { queryNewZone } from '@/api/activity'
+export default{
+  data() {
+    return {
+      details: {}
+    }
+  },
+  onLoad() {
+    queryNewZone().then(res => {
+      console.log(res);
+      this.details = res.data 
+    })
+  },
+  methods: {
+    toGoods(item) {
+      uni.navigateTo({
+        url: `/pages/shop/GoodsCon/index?id=${item.productId}`
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.new-info{
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.box-emp{
+  width: 100%;
+  height: 85rpx;
+}
+.buy-btn{
+  border-radius: 100px;
+  width: fit-content;
+  color: #fff;
+  background: #C52733;
+  font-size: 28rpx;
+  padding: 4rpx 20rpx;
+}
+.swiper-wrap{
+  position: absolute;
+  width: 100%;
+  height: 400rpx;
+  left: 20rpx;
+  bottom: 40rpx;
+}
+.new-card{
+  width: 220rpx;
+  height: 240rpx;
+  background: #fff;
+  border-radius: 20rpx;
+  position: absolute;
+  bottom: 0;
+}
+.cover-img{
+  width: 706rpx;
+  height: 400rpx;
+  border-radius: 20rpx;
+}
+.new-card-img{
+  position: absolute;
+  width: 150rpx;
+  height: 150rpx;
+  top: -75rpx;
+  left: 0;
+  right: 0;
+  margin: auto;
+  border-radius: 50%;
+  
+}
+.primary-title{
+  width: fit-content;
+  position: relative;
+  font-size: 34rpx;
+  color: #333333;
+  font-weight: 800;
+}
+.secondary-title{
+  font-family: Source Han Sans SC;
+  font-weight: 500;
+  font-size: 28rpx;
+  color: #999999;
+  line-height: 40rpx;
+}
+.title-line{
+  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;
+  position: absolute;
+  bottom: 3rpx;
+}
+  .new-zone-page{
+    min-height: 100vh;
+    background-color: #fff;
+    padding: 20rpx;
+  }
+  .banner-zone{
+    width: 706rpx;
+    height: 760rpx;
+    border-radius: 20rpx;
+    position: relative;
+  }
+</style>