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

2024-11-19 00:38:58 +08:00
parent 655bb7e7e3
commit 0edbbfcdf5
4 changed files with 295 additions and 2 deletions
@@ -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>