From 8582e0c9b31945fa27783046a4975ecdc41a80ff Mon Sep 17 00:00:00 2001
From: woody <woody@gmail.com>
Date: Fri, 25 Apr 2025 18:07:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(product-list):=20=E4=B8=93=E5=8C=BA?=
 =?UTF-8?q?=E5=95=86=E5=93=81=E5=88=97=E8=A1=A8=E7=BB=84=E4=BB=B6=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/area-product-list/index.vue | 229 +++++++++++++++++++++++++
 pages/mine/index.vue                   |   2 +-
 pages/specialArea/index.vue            |  59 ++-----
 3 files changed, 248 insertions(+), 42 deletions(-)
 create mode 100644 components/area-product-list/index.vue

diff --git a/components/area-product-list/index.vue b/components/area-product-list/index.vue
new file mode 100644
index 0000000..0099b88
--- /dev/null
+++ b/components/area-product-list/index.vue
@@ -0,0 +1,229 @@
+<template>
+  <view class="area-product-list">
+    <view class="area-header">
+      <view class="header-bg"></view>
+      <text class="area-title">{{ title }}</text>
+      <u-button
+        type="primary"
+        size="mini"
+        shape="circle"
+        :custom-style="{ 
+          background: '#ffffff',
+          border: 'none',
+          position: 'relative', 
+          zIndex: 1,
+          height: '46rpx',
+          lineHeight: '46rpx',
+          width: 'fit-content',
+          padding: '0 24rpx',
+          margin: '0'
+        }"
+        @click="goToMore"
+      >
+        <view class="more-btn-content">
+          <text class="more-text">更多</text>
+          <u-icon name="arrow-right" color="#005bac" size="14"></u-icon>
+        </view>
+      </u-button>
+    </view>
+    <view class="product-container">
+      <view class="product-item" v-for="item in list" :key="item.pkWares" @click="handleProductClick(item)">
+        <image :src="item.cover1" class="product-image" mode="aspectFill" />
+        <view class="product-info">
+          <view class="product-name">{{ item.waresCode }}</view>
+          <view class="product-price-row">
+            <view class="product-price">
+              {{ formatPrice(item.waresPrice) }}
+            </view>
+            <u-button
+              type="primary"
+              size="mini"
+              shape="circle"
+              :custom-style="{ 
+                background: '#005bac', 
+                padding: 0, 
+                width: '48rpx', 
+                height: '48rpx', 
+                minWidth: '48rpx' 
+              }"
+              @click.stop="handleAddToCart(item)"
+            >
+              <u-icon name="plus" color="#ffffff" size="12"></u-icon>
+            </u-button>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { numberToCurrencyNo, isLocal, isLocaled } from '@/util/numberToCurrency'
+
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '热销专区'
+    },
+    list: {
+      type: Array,
+      default: () => [
+        {
+          pkWares: 17024,
+          cover1: "https://bd-qd.oss-cn-beijing.aliyuncs.com/test_01/20250406/c2aea04b-174d-4703-acab-c52d928371bd.jpg",
+          waresCode: "HZSLXSJ2",
+          waresPrice: "6000.0000",
+          specialArea: 25,
+          isSale: 0,
+          preSaleStatus: 0
+        },
+        {
+          pkWares: 17041,
+          cover1: "https://bd-qd.oss-cn-beijing.aliyuncs.com/test_01/20250406/c2aea04b-174d-4703-acab-c52d928371bd.jpg",
+          waresCode: "HZSLXSJ1",
+          waresPrice: "2000.0000",
+          specialArea: 25,
+          isSale: 0,
+          preSaleStatus: 0
+        },
+        {
+          pkWares: 17042,
+          cover1: "https://bd-qd.oss-cn-beijing.aliyuncs.com/test_01/20250406/c2aea04b-174d-4703-acab-c52d928371bd.jpg",
+          waresCode: "HZSLXSJ3",
+          waresPrice: "3999.0000",
+          specialArea: 25,
+          isSale: 0,
+          preSaleStatus: 0
+        }
+      ]
+    },
+    specialAreaId: {
+      type: [Number, String],
+      default: '25'
+    }
+  },
+  methods: {
+    isLocaled,
+    formatPrice(price) {
+      // 使用numberToCurrencyNo和isLocal函数来格式化价格
+      return isLocal(numberToCurrencyNo(price));
+    },
+    goToMore() {
+      // 跳转到专区详情页面
+      uni.navigateTo({
+        url: `/pages/specialArea/index?id=${this.specialAreaId}`
+      });
+    },
+    handleProductClick(item) {
+      // 商品点击事件，可根据需求实现跳转或其他逻辑
+      this.$emit('product-click', item);
+    },
+    handleAddToCart(item) {
+      // 添加到购物车事件
+      this.$emit('add-cart', item);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.area-product-list {
+  background-color: #ffffff;
+  padding: 30rpx;
+  padding-top: 0;
+  border-radius: 8px;
+  margin-bottom: 15px;
+}
+
+.area-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  position: relative;
+  padding: 20rpx 0;
+  height: 46rpx;
+}
+
+.header-bg {
+  position: absolute;
+  top: 0;
+  left: -30rpx;
+  right: -30rpx;
+  height: 100%;
+  background: linear-gradient(to bottom, #ADD8E6, #ffffff);
+  z-index: 0;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+.area-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333333;
+  position: relative;
+  z-index: 1;
+}
+
+.more-btn-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  flex-grow: 0;
+}
+
+.more-text {
+  font-size: 24rpx;
+  color: #005bac;
+  margin-right: 4rpx;
+}
+
+.product-container {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -10rpx;
+  padding-top: 15rpx;
+}
+
+.product-item {
+  width: 33.33%;
+  padding: 0 10rpx;
+  box-sizing: border-box;
+  margin-bottom: 30rpx;
+}
+
+.product-image {
+  width: 100%;
+  height: 200rpx;
+  border-radius: 8rpx;
+  background-color: #f5f5f5;
+}
+
+.product-info {
+  margin-top: 12rpx;
+  position: relative;
+}
+
+.product-name {
+  font-size: 28rpx;
+  color: #333;
+  margin-bottom: 8rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-price-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.product-price {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #005bac;
+}
+</style>
diff --git a/pages/mine/index.vue b/pages/mine/index.vue
index 06f183c..60344c9 100644
--- a/pages/mine/index.vue
+++ b/pages/mine/index.vue
@@ -275,7 +275,7 @@ export default {
           name: '数据查询',
           imgurl: "../../static/images/mark1.png",
           menuKey: "marketDynamics",
-          ifshow: false,
+          ifshow: true,
         },
         {
           url: "/pages/bonus/index",
diff --git a/pages/specialArea/index.vue b/pages/specialArea/index.vue
index f1a8808..985864f 100644
--- a/pages/specialArea/index.vue
+++ b/pages/specialArea/index.vue
@@ -6,44 +6,19 @@
 -->
 <template>
   <view class="content">
-    <!-- <view class="kuang">
-      <view class="kuang_i"
-            v-for="(item, index) in zoneList"
-            :key="index"
-            @tap="goGoodList(item)"
-            v-show="item.isShow">
-        <view>{{ item.label }}</view>
-        <img :src="item.img"
-             alt="">
-      </view>
-    </view> -->
     <view class="goods-sort">
       <view class="goods-flexs">
-        <view class="goods-view"
-              @click="navTap(item)"
-              v-for="item in goodsList.recommendSpecialAreaList "
-              v-if="item.waresList!=false">
+        <view 
+          class="goods-view"
+          @click="navTap(item)"
+          v-for="item in goodsList.recommendSpecialAreaList "
+          :key="item.pkWares"
+        >
           <view class="bg-color"></view>
-          <view class="goods-top">
+          <!-- <view class="goods-top">
             <view class="title">{{item.specialAreaName}}</view>
-            <!-- <view class="lables">限时抢</view> -->
-          </view>
-          <template v-if="item.waresList">
-            <view class="goods-cen">
-              <view class="goods-list"
-                    v-for="(items,indexs) in item.waresList"
-                    v-if="indexs<2">
-                <view class="goods-content">
-                  <view class="goods">
-                    <image :src="items.cover1"></image>
-                  </view>
-                  <!-- <view class="price">
-                    {{items.waresPrice  | numberToCurrency | isLocal}}
-                  </view> -->
-                </view>
-              </view>
-            </view>
-          </template>
+          </view> -->
+          <area-product-list v-if="item.waresList!=false" :list="item.waresList" :title="item.specialAreaName"></area-product-list>
         </view>
       </view>
     </view>
@@ -56,10 +31,11 @@ import * as api from '@/config/goods'
 import * as apis from '@/config/index.js'
 import clTabbar from '@/components/cl-tabbar.vue'
 import * as ban from '@/config/balance.js'
-
+import areaProductList from '@/components/area-product-list/index.vue'
 export default {
   components: {
     'cl-tabbar': clTabbar,
+    'area-product-list': areaProductList,
   },
   data() {
     return {
@@ -424,14 +400,15 @@ export default {
 .goods-sort {
   padding-bottom: 130rpx;
   .goods-flexs {
-    display: flex;
+    // display: flex;
     padding: 30rpx 30rpx 20rpx 35rpx;
     position: relative;
-    flex-wrap: wrap;
+    // flex-wrap: wrap;
     margin-left: -25rpx;
     .bg-color {
-      width: 335rpx;
-      height: 72rpx;
+      // width: 335rpx;
+      width: 100%;
+      // height: 72rpx;
       background: linear-gradient(
         -180deg,
         rgba(255, 226, 226, 0.85) 0%,
@@ -444,12 +421,12 @@ export default {
     }
     .goods-view {
       position: relative;
-      width: 295rpx;
+      // width: 295rpx;
       // height: 180rpx;
       margin-left: 20rpx;
       background: #ffffff;
       border-radius: 15rpx;
-      padding: 20rpx 20rpx 10rpx 20rpx;
+      // padding: 20rpx 20rpx 10rpx 20rpx;
       margin-bottom: 20rpx;
       .goods-top {
         z-index: 1;