From 2f1a31d349d69627351ff69f43032b5a01b4edeb Mon Sep 17 00:00:00 2001
From: woody <woody@163>
Date: Tue, 3 Jun 2025 16:40:49 +0800
Subject: [PATCH] =?UTF-8?q?feat(inde):=20=E9=A6=96=E9=A1=B5=E6=94=B9?=
 =?UTF-8?q?=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/simple-vertical-swiper.vue | 415 +++++++++++--------
 config/index.js                       |   4 +
 pages/index/index.vue                 | 572 ++++++++++++++++++++++----
 pages/mall/index.vue                  |  46 ++-
 util/specialAreaMap.js                |  14 +
 5 files changed, 801 insertions(+), 250 deletions(-)

diff --git a/components/simple-vertical-swiper.vue b/components/simple-vertical-swiper.vue
index 088d5f7..1e06be0 100644
--- a/components/simple-vertical-swiper.vue
+++ b/components/simple-vertical-swiper.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="simple-vertical-swiper" :style="{ height: height + 'px' }">
+  <view class="simple-vertical-swiper" :style="{ height: height + 'rpx' }">
     <view
       class="swiper-wrapper"
       @touchstart.stop="onTouchStart"
@@ -7,10 +7,10 @@
       @touchend.stop="onTouchEnd"
     >
       <view
-        v-for="(item, index) in items"
+        v-for="(item, index) in displayItems"
         :key="index"
         class="swiper-slide"
-        :class="{ 'swiper-slide-active': index === currentIndex }"
+        :class="{ 'swiper-slide-active': index === virtualCurrentIndex }"
         :style="getSlideStyle(index)"
       >
         <!-- 公告类型 -->
@@ -44,7 +44,7 @@
         </view>
 
         <!-- 自定义插槽 -->
-        <slot v-else :item="item" :index="index">
+        <slot v-else :item="item" :index="getOriginalIndex(index)">
           <view class="default-item">
             <text>{{ item.text || item.content || item }}</text>
           </view>
@@ -55,10 +55,10 @@
     <!-- 指示器 -->
     <view v-if="showIndicators && items.length > 1" class="indicators">
       <view
-        v-for="(item, index) in items"
-        :key="index"
+        v-for="(_item, originalItemIndex) in items"
+        :key="originalItemIndex"
         class="indicator"
-        :class="{ active: index === currentIndex }"
+        :class="{ active: originalItemIndex === currentIndex }"
       ></view>
     </view>
   </view>
@@ -111,100 +111,145 @@ export default {
   },
   data() {
     return {
-      currentIndex: 0,
+      currentIndex: 0, // Index in original items array
+      virtualCurrentIndex: 0, // Index in displayItems array
       timer: null,
       isTransitioning: false,
-      // 触摸相关
+      isJumping: false, // Flag for instant jumps, to disable CSS transition
       touchStartY: 0,
       touchStartTime: 0,
       isTouching: false,
     }
   },
   computed: {
-    itemsLength() {
+    originalItemsLength() {
       return this.items.length
     },
+    displayItems() {
+      if (!this.items || this.originalItemsLength === 0) {
+        return []
+      }
+      if (!this.circular) {
+        return this.items
+      }
+
+      if (this.originalItemsLength === 1) {
+        return [this.items[0], this.items[0], this.items[0]]
+      }
+
+      const lastItem = this.items[this.originalItemsLength - 1]
+      const firstItem = this.items[0]
+      return [lastItem, ...this.items, firstItem]
+    },
   },
   watch: {
     items: {
       handler() {
-        this.initSwiper()
+        this.initSwiperState()
       },
       immediate: true,
     },
     autoplay(newVal) {
+      if (this.originalItemsLength === 0) return
       if (newVal) {
         this.startAutoplay()
       } else {
         this.clearTimer()
       }
     },
+    circular() {
+      this.initSwiperState()
+    },
+    virtualCurrentIndex() {
+      // This watcher can be used for debugging or complex state reactions if needed
+    },
   },
   mounted() {
-    this.initSwiper()
+    // Initialization is handled by immediate watch on items
   },
   beforeDestroy() {
     this.clearTimer()
   },
   // uniapp 生命周期
   onReady() {
-    this.initSwiper()
+    this.initSwiperState()
   },
   onUnload() {
     this.clearTimer()
   },
   methods: {
-    // 获取滑块样式 - 解决循环轮播动画连续性问题
-    getSlideStyle(index) {
-      if (this.itemsLength <= 1) {
-        return {
-          transform: 'translateY(0px)',
-          opacity: 1,
-          zIndex: 1,
-        }
+    getOriginalIndex(displayIndex) {
+      if (this.originalItemsLength === 0) return 0
+      if (!this.circular) {
+        return displayIndex
+      }
+      if (this.originalItemsLength === 1) {
+        return 0
+      }
+      if (displayIndex === 0) return this.originalItemsLength - 1
+      if (displayIndex === this.displayItems.length - 1) return 0
+      if (displayIndex > 0 && displayIndex <= this.originalItemsLength) {
+        return displayIndex - 1
+      }
+      return 0 // Fallback, should ideally not be reached with correct logic
+    },
+    initSwiperState() {
+      this.clearTimer()
+      if (this.originalItemsLength === 0) {
+        this.currentIndex = 0
+        this.virtualCurrentIndex = 0
+        if (this.autoplay) this.startAutoplay() // Try to start autoplay even if no items initially
+        return
       }
 
-      let translateY = 0
+      if (this.circular) {
+        if (this.originalItemsLength === 1) {
+          this.virtualCurrentIndex = 1
+          this.currentIndex = 0
+        } else {
+          this.virtualCurrentIndex = 1
+          this.currentIndex = 0
+        }
+      } else {
+        this.virtualCurrentIndex = 0
+        this.currentIndex = 0
+      }
+
+      // Ensure DOM is updated if items change, then start autoplay
+      this.$nextTick(() => {
+        if (this.autoplay) {
+          this.startAutoplay()
+        }
+      })
+    },
+    getSlideStyle(indexInDisplayItems) {
+      const offset = indexInDisplayItems - this.virtualCurrentIndex
+      const translateY = offset * this.height
+
       let opacity = 0.6
       let zIndex = 1
 
-      if (index === this.currentIndex) {
-        // 当前激活项
-        translateY = 0
+      if (offset === 0) {
+        // Active slide
         opacity = 1
         zIndex = 10
+      } else if (Math.abs(offset) === 1) {
+        // Adjacent slides
+        opacity = 0.3
+        zIndex = 5
       } else {
-        // 计算偏移量
-        let offset = index - this.currentIndex
-
-        // 循环轮播的关键：选择最短路径
-        if (this.circular && this.itemsLength > 2) {
-          const halfLength = this.itemsLength / 2
-
-          // 如果偏移量的绝对值大于一半，说明走相反方向更近
-          if (offset > halfLength) {
-            offset = offset - this.itemsLength // 从负方向走
-          } else if (offset < -halfLength) {
-            offset = offset + this.itemsLength // 从正方向走
-          }
-        }
-
-        translateY = offset * this.height
-
-        // 控制可见性，只显示相邻的项目
-        const absOffset = Math.abs(offset)
-        if (absOffset <= 1) {
-          opacity = absOffset === 1 ? 0.3 : 0.6
-          zIndex = absOffset === 1 ? 5 : 1
-        } else {
-          opacity = 0
-          zIndex = 0
-        }
+        // Far away slides
+        opacity = 0
+        zIndex = 0
       }
 
       const transition =
-        this.isTransitioning && !this.isTouching
-          ? `all ${this.duration}ms cubic-bezier(0.25, 0.46, 0.45, 0.94)`
+        (this.isTransitioning || this.isJumping) &&
+        !this.isTouching &&
+        !(this.isJumping && !this.isTransitioning) // Allow transition if only isTransitioning is true
+          ? this.isJumping
+            ? 'none'
+            : `all ${this.duration}ms cubic-bezier(0.25, 0.46, 0.45, 0.94)`
           : 'none'
 
       return {
@@ -214,168 +259,196 @@ export default {
         transition: transition,
       }
     },
-
-    // 初始化轮播
-    initSwiper() {
-      console.log(
-        '初始化轮播, items数量:',
-        this.itemsLength,
-        'autoplay:',
-        this.autoplay
-      )
-
-      if (this.itemsLength === 0) return
-
-      this.currentIndex = 0
-
-      if (this.autoplay && this.itemsLength > 1) {
-        this.startAutoplay()
-      }
-    },
-
-    // 开始自动轮播
     startAutoplay() {
       this.clearTimer()
-      if (this.autoplay && this.itemsLength > 1) {
-        console.log('开始自动轮播，间隔:', this.interval)
+      // Condition for autoplay: must have items, and if not circular, must have more than 1 item.
+      const canAutoplay =
+        this.originalItemsLength > 0 &&
+        (this.circular || this.originalItemsLength > 1)
+      if (this.autoplay && canAutoplay) {
         this.timer = setInterval(() => {
           this.next()
         }, this.interval)
       }
     },
-
-    // 清除定时器
     clearTimer() {
       if (this.timer) {
         clearInterval(this.timer)
         this.timer = null
       }
     },
+    updateCurrentIndex(currentVirtualIdx, isMidJump = false) {
+      const oldOriginalIndex = this.currentIndex
+      let newOriginalIndex = 0
 
-    // 下一页
+      if (this.originalItemsLength === 0) {
+        this.currentIndex = 0
+        return
+      }
+
+      if (!this.circular) {
+        newOriginalIndex = currentVirtualIdx
+      } else if (this.originalItemsLength === 1) {
+        newOriginalIndex = 0
+      } else {
+        if (currentVirtualIdx === 0) {
+          newOriginalIndex = this.originalItemsLength - 1
+        } else if (currentVirtualIdx === this.displayItems.length - 1) {
+          newOriginalIndex = 0
+        } else {
+          newOriginalIndex = currentVirtualIdx - 1
+        }
+      }
+
+      this.currentIndex = newOriginalIndex
+      // Emit change only if it's not a mid-jump correction that results in the same original index visually
+      // Or if the original index actually changed.
+      if (oldOriginalIndex !== newOriginalIndex || !isMidJump) {
+        this.$emit('change', {
+          current: this.currentIndex,
+          currentItem: this.items[this.currentIndex],
+        })
+      }
+    },
+    moveTo(targetVirtualIndex, direction) {
+      // direction can be 'next' or 'prev', used to emit correct original index during transition
+      if (this.isTransitioning && !this.isJumping) return
+      if (this.originalItemsLength === 0) return
+
+      this.isTransitioning = true
+      this.virtualCurrentIndex = targetVirtualIndex
+
+      // Emit change based on where we are going (even if it's a clone)
+      this.updateCurrentIndex(targetVirtualIndex)
+
+      setTimeout(() => {
+        this.isTransitioning = false
+        if (this.circular) {
+          this.checkAndCorrectLoopBoundary()
+        }
+      }, this.duration)
+    },
+    checkAndCorrectLoopBoundary() {
+      if (this.originalItemsLength <= 1 && this.circular) {
+        // Special handling for 1 item circular
+        // displayItems = [item, item, item], virtualCurrentIndex can be 0, 1, 2
+        if (this.virtualCurrentIndex !== 1) {
+          this.isJumping = true
+          this.virtualCurrentIndex = 1 // Jump to the middle "real" one
+          this.updateCurrentIndex(1, true)
+          this.$nextTick(() => {
+            this.isJumping = false
+          })
+        }
+        return
+      }
+      if (this.originalItemsLength < 2 || !this.circular) return // Only for 2+ items circular
+
+      const firstRealItemVirtualIdx = 1
+      const lastRealItemVirtualIdx = this.originalItemsLength
+
+      let jumpToVirtualIndex = -1
+
+      if (this.virtualCurrentIndex === 0) {
+        jumpToVirtualIndex = lastRealItemVirtualIdx
+      } else if (this.virtualCurrentIndex === this.displayItems.length - 1) {
+        jumpToVirtualIndex = firstRealItemVirtualIdx
+      }
+
+      if (jumpToVirtualIndex !== -1) {
+        this.isJumping = true
+        this.virtualCurrentIndex = jumpToVirtualIndex
+        this.updateCurrentIndex(jumpToVirtualIndex, true) // Update original index reflecting the jump destination
+        this.$nextTick(() => {
+          this.isJumping = false
+        })
+      }
+    },
     next() {
-      if (this.isTransitioning || this.itemsLength <= 1) return
+      if (this.originalItemsLength === 0) return
+      if (
+        !this.circular &&
+        this.virtualCurrentIndex >= this.originalItemsLength - 1
+      )
+        return
 
-      console.log('切换到下一页，当前:', this.currentIndex)
-
-      this.isTransitioning = true
-
-      const nextIndex = this.circular
-        ? (this.currentIndex + 1) % this.itemsLength
-        : Math.min(this.currentIndex + 1, this.itemsLength - 1)
-
-      this.currentIndex = nextIndex
-
-      setTimeout(() => {
-        this.isTransitioning = false
-        this.$emit('change', {
-          current: this.currentIndex,
-          currentItem: this.items[this.currentIndex],
-        })
-      }, this.duration)
+      let targetVirtualIndex = this.virtualCurrentIndex + 1
+      this.moveTo(targetVirtualIndex, 'next')
     },
-
-    // 上一页
     prev() {
-      if (this.isTransitioning || this.itemsLength <= 1) return
+      if (this.originalItemsLength === 0) return
+      if (!this.circular && this.virtualCurrentIndex <= 0) return
 
-      this.isTransitioning = true
-
-      const prevIndex = this.circular
-        ? (this.currentIndex - 1 + this.itemsLength) % this.itemsLength
-        : Math.max(this.currentIndex - 1, 0)
-
-      this.currentIndex = prevIndex
-
-      setTimeout(() => {
-        this.isTransitioning = false
-        this.$emit('change', {
-          current: this.currentIndex,
-          currentItem: this.items[this.currentIndex],
-        })
-      }, this.duration)
+      let targetVirtualIndex = this.virtualCurrentIndex - 1
+      this.moveTo(targetVirtualIndex, 'prev')
     },
+    goToSlide(originalIndex) {
+      if (originalIndex < 0 || originalIndex >= this.originalItemsLength) return
+      // if (originalIndex === this.currentIndex && !this.isTransitioning && !this.isJumping) return;
 
-    // 跳转到指定页
-    goToSlide(index) {
-      if (index === this.currentIndex || this.isTransitioning) return
-      if (index < 0 || index >= this.itemsLength) return
-
-      this.isTransitioning = true
-      this.currentIndex = index
-
-      setTimeout(() => {
-        this.isTransitioning = false
-        this.$emit('change', {
-          current: this.currentIndex,
-          currentItem: this.items[this.currentIndex],
-        })
-      }, this.duration)
+      let targetVirtualIndex
+      if (!this.circular) {
+        targetVirtualIndex = originalIndex
+      } else {
+        if (this.originalItemsLength === 1) targetVirtualIndex = 1
+        else targetVirtualIndex = originalIndex + 1
+      }
+      this.clearTimer()
+      this.moveTo(targetVirtualIndex)
+      if (this.autoplay) {
+        setTimeout(() => this.startAutoplay(), this.duration + 100)
+      }
     },
-
-    // 触摸开始
     onTouchStart(e) {
-      if (this.itemsLength <= 1) return
+      if (this.originalItemsLength === 0) return
+      if (!this.circular && this.originalItemsLength <= 1) return // No swipe for single non-circular item
 
-      console.log('触摸开始')
-
-      this.clearTimer() // 停止自动轮播
+      this.clearTimer()
       this.touchStartY = e.touches[0].clientY
       this.touchStartTime = Date.now()
       this.isTouching = true
+      this.isJumping = false
     },
-
-    // 触摸移动
     onTouchMove(e) {
-      if (this.isTransitioning || !this.isTouching || this.itemsLength <= 1)
-        return
-
-      const deltaY = e.touches[0].clientY - this.touchStartY
-      console.log('触摸移动, deltaY:', deltaY)
-
-      // 事件已通过修饰符处理，这里只做逻辑判断
-      // 可以在这里添加实时跟随手指的效果
+      if (!this.isTouching) return
     },
-
-    // 触摸结束
     onTouchEnd(e) {
-      if (!this.isTouching || this.itemsLength <= 1) return
-
+      if (!this.isTouching || this.originalItemsLength === 0) {
+        this.isTouching = false // Ensure isTouching is reset
+        return
+      }
       this.isTouching = false
 
       const currentY = e.changedTouches[0].clientY
       const deltaY = currentY - this.touchStartY
       const deltaTime = Date.now() - this.touchStartTime
-      const velocity = Math.abs(deltaY) / deltaTime
 
-      console.log('触摸结束, deltaY:', deltaY, 'velocity:', velocity)
-
-      // 判断是否需要切换
-      const threshold = this.height * 0.25 // 降低阈值，更容易触发
+      const threshold = this.height * 0.2
       const velocityThreshold = 0.3
-      const shouldSwitch =
-        Math.abs(deltaY) > threshold || velocity > velocityThreshold
+      const velocity = deltaTime > 0 ? Math.abs(deltaY) / deltaTime : 0
 
-      if (shouldSwitch) {
-        if (deltaY > 0) {
-          // 向下滑动，显示上一项
-          console.log('手势触发：上一页')
-          this.prev()
-        } else {
-          // 向上滑动，显示下一项
-          console.log('手势触发：下一页')
+      if (Math.abs(deltaY) > threshold || velocity > velocityThreshold) {
+        if (deltaY < 0) {
           this.next()
+        } else if (deltaY > 0) {
+          this.prev()
         }
       } else {
-        console.log('手势未达到切换阈值，不切换')
-      }
-
-      // 重新开始自动轮播
-      setTimeout(() => {
+        // No swipe, or too small. Potentially restart autoplay if it was interrupted.
         if (this.autoplay) {
           this.startAutoplay()
         }
-      }, 1000)
+      }
+      // Autoplay restart is handled within next/prev through moveTo or if no swipe occurs
+      // If a swipe occurs, next/prev call moveTo, which stops autoplay via clearTimer. Then this onTouchEnd may restart.
+      // If no swipe, this onTouchEnd directly restarts.
+      // Consider a more unified autoplay restart logic after touch interaction concludes.
+      // For now, let's consolidate: if autoplay was on, restart it after a delay.
+      if (this.autoplay) {
+        setTimeout(() => {
+          if (!this.timer) this.startAutoplay() // Restart only if not already restarted by a quick succession
+        }, this.duration + 200) // Delay after potential transition
+      }
     },
   },
 }
@@ -396,7 +469,7 @@ export default {
     width: 100%;
     height: 100%;
     // uniapp App端触摸控制
-    touch-action: none;
+    touch-action: pan-y; /* More specific touch action */
     // 防止触摸时的默认行为
     -webkit-touch-callout: none;
     -webkit-tap-highlight-color: transparent;
diff --git a/config/index.js b/config/index.js
index 44cef67..a26deed 100644
--- a/config/index.js
+++ b/config/index.js
@@ -20,3 +20,7 @@ export const pickLogList = params =>
 
 export const getBanners = params =>
   http.get('/system/api/banner/list', { params })
+
+// 首页商品列表
+export const getIndexGoodsList = params =>
+  http.get('/sale/api/order/index-wares-list', { params })
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 6786d3e..4c6d7cd 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -30,7 +30,7 @@
         <simple-vertical-swiper
           :items="noticeList"
           type="custom"
-          :height="40"
+          :height="80"
           :autoplay="true"
           :interval="3000"
           :show-indicators="false"
@@ -46,80 +46,104 @@
           </template>
         </simple-vertical-swiper>
       </view>
-      <view class="goods-sort">
-        <view class="goods-flexs">
-          <view v-for="(item, index) in recommendSpecialAreaList" :key="index">
-            <view
-              class="goods-view"
-              @click="navTap(item)"
-              v-if="item.waresList && (index < 8 || moreFlag == true)"
-            >
-              <area-product-list
-                :list="item.waresList"
-                :title="item.specialAreaName"
-                size="small"
-              />
+      <view class="recommend-goods-list">
+        <view
+          v-if="isEmpty(recommendGoodsList) == false"
+          class="recommend-section"
+        >
+          <view class="recommend-header">
+            <view class="recommend-title">
+              <!-- <text class="title-icon">⭐</text> -->
+              <text class="title-text">精选推荐</text>
             </view>
           </view>
-        </view>
-        <view v-if="isEmpty(goodsList.recommendSpecialAreaList) == false">
-          <view
-            class="more"
-            @click="more"
-            v-if="!moreFlag && goodsList.recommendSpecialAreaList.length > 6"
-          >
-            {{ '查看更多' }}
+          <view class="recommend-swiper-container">
+            <simple-vertical-swiper
+              :items="recommendGoodsList"
+              type="custom"
+              :height="450"
+              autoplay
+              :interval="4000"
+              :show-indicators="false"
+            >
+              <template #default="{ item }">
+                <view @click="goDetails(item)" class="recommend-item">
+                  <view class="recommend-item-image">
+                    <image :src="item.cover" mode="aspectFill"></image>
+                    <view class="recommend-badge">推荐</view>
+                  </view>
+                  <view class="recommend-item-content">
+                    <view class="recommend-item-name">{{
+                      item.waresName
+                    }}</view>
+                    <view class="recommend-item-price">
+                      <text class="price-symbol" v-if="priceSymbolVisible">{{
+                        priceSymbol
+                      }}</text>
+                      <text class="price-value">{{
+                        formatCurrency(item.waresPrice)
+                      }}</text>
+                    </view>
+                  </view>
+                  <view class="recommend-arrow">›</view>
+                </view>
+              </template>
+            </simple-vertical-swiper>
           </view>
         </view>
-        <view class="goods_content">
-          <view
-            class="goods-center-lists"
-            v-for="item in goodsList.waresVoList"
-            :key="item.waresId"
-            @click="goDetails(item)"
-          >
+      </view>
+      <!-- New Product List Section Wrapper -->
+      <view class="hot-sellers-card-wrapper">
+        <view
+          class="main-product-list-section"
+          v-if="displayedGoodsList.length > 0"
+        >
+          <!-- <view class="section-title">热销甄选</view> -->
+          <view class="product-grid">
             <view
-              class="fly"
-              v-show="item.preSaleStatus == 3 || item.isSale == 1"
-            ></view>
-            <view class="goods-flex-s">
-              <view class="goods-img">
-                <image :src="item.cover1"></image>
-              </view>
-              <view class="padding_s goods-info">
-                <view class="goods-name">{{ item.waresName }}</view>
-                <view class="goods-sales-wrapper">
-                  <!-- <view class="goods-sales">累计销量{{ formatSales(item.sales) }}</view> -->
-                  <view
-                    class="goods-price"
-                    v-if="item.specialArea == 31 && userInfo.isMakerSpace == 1"
-                  >
+              class="product-card"
+              v-for="item in displayedGoodsList"
+              :key="item.waresId"
+              @click="goDetails(item)"
+            >
+              <view
+                class="fly"
+                v-show="item.preSaleStatus == 3 || item.isSale == 1"
+              ></view>
+              <image
+                class="product-image"
+                :src="item.cover"
+                mode="aspectFill"
+              ></image>
+              <view class="product-info">
+                <text class="product-name">{{ item.waresName }}</text>
+                <text class="product-tagline"></text>
+                <view class="product-price-row">
+                  <view class="product-price">
                     <span v-if="priceSymbolVisible" class="price-symbol">
                       {{ priceSymbol }}
                     </span>
-                    <span>{{ formatCurrency(item.vipPrice) }}</span>
-                  </view>
-                  <view class="goods-price" v-if="item.specialArea != 31">
-                    <span v-if="priceSymbolVisible" class="price-symbol">
-                      {{ priceSymbol }}
-                    </span>
-                    <span>{{ formatCurrency(item.waresPrice) }}</span>
-                  </view>
-                  <view
-                    class="goods-price"
-                    v-if="item.specialArea == 31 && userInfo.isMakerSpace == 0"
-                  >
-                    <span v-if="priceSymbolVisible" class="price-symbol">
-                      {{ priceSymbol }}
-                    </span>
-                    <span>{{ formatCurrency(item.waresPrice) }}</span>
+                    <span
+                      v-if="
+                        item.specialArea == 31 && userInfo.isMakerSpace == 1
+                      "
+                      >{{ formatCurrency(item.vipPrice) }}</span
+                    >
+                    <span v-else>{{ formatCurrency(item.waresPrice) }}</span>
                   </view>
+                  <view class="buy-now-button">立即购买</view>
                 </view>
               </view>
             </view>
           </view>
+          <view class="load-more-container" v-if="hasMoreGoods">
+            <button @click="loadMoreGoods" class="load-more-button">
+              加载更多
+            </button>
+          </view>
         </view>
       </view>
+      <!-- End of New Product List Section Wrapper -->
       <cl-tabbar :current="0"></cl-tabbar>
       <div>
         <!-- 公告弹窗 -->
@@ -204,10 +228,15 @@ export default {
       interval: 5000,
       autoplay: true,
       duration: 500,
-      goodsList: [],
       recommendSpecialAreaList: [],
       banners: [],
       noticeList: [],
+      recommendGoodsList: [],
+      goodsList: [],
+      displayedGoodsList: [],
+      goodsListPage: 1,
+      goodsListPageSize: 4,
+      hasMoreGoods: true,
       zoneList: [
         {
           label: '注册专区',
@@ -403,10 +432,11 @@ export default {
       uni.getStorageSync('showInfo') == 0
     ) {
     }
-    this.getGoodsInfo()
-    this.getAreaGoods()
+    // this.getAreaGoods()
     this.getBanners()
     this.getNoticeList()
+    this.getRecommendGoodsList()
+    this.getGoodsList()
     // this.getLanguage();
     this.getService()
   },
@@ -416,7 +446,6 @@ export default {
   onPullDownRefresh() {
     let that = this
     setTimeout(() => {
-      that.getGoodsInfo()
       uni.stopPullDownRefresh() //停止刷新
     }, 1000)
   },
@@ -440,10 +469,8 @@ export default {
       })
     },
     goNotice(item) {
-      console.log(item, '....item')
-      return
       uni.navigateTo({
-        url: '/pages/notice/index?id=' + item.id,
+        url: '/pages/email/noticeDetail?index=1&pkId=' + item.pkId,
       })
     },
     goAreaUrl() {
@@ -470,11 +497,44 @@ export default {
         }
       })
     },
-    getAreaGoods() {
-      getAreaGoods().then(res => {
-        this.recommendSpecialAreaList = res.data?.recommendSpecialAreaList || []
+    getRecommendGoodsList() {
+      indexApi.getIndexGoodsList({ isRecommend: 0 }).then(res => {
+        if (res.code == 200) {
+          this.recommendGoodsList = res.rows || []
+        }
       })
     },
+    getGoodsList() {
+      indexApi.getIndexGoodsList().then(res => {
+        if (res.code == 200) {
+          this.goodsList = res.rows || []
+          this.goodsListPage = 1
+          this.displayedGoodsList = []
+          this.loadMoreGoods()
+        }
+      })
+    },
+    loadMoreGoods() {
+      if (!this.goodsList || this.goodsList.length === 0) {
+        this.hasMoreGoods = false
+        return
+      }
+
+      const start = (this.goodsListPage - 1) * this.goodsListPageSize
+      const end = start + this.goodsListPageSize
+      const newGoods = this.goodsList.slice(start, end)
+
+      if (newGoods.length > 0) {
+        this.displayedGoodsList = [...this.displayedGoodsList, ...newGoods]
+        this.goodsListPage++
+      }
+
+      if (this.displayedGoodsList.length >= this.goodsList.length) {
+        this.hasMoreGoods = false
+      } else {
+        this.hasMoreGoods = true
+      }
+    },
     toDel() {
       this.promptFlag = false
       if (this.jumpPage == 1) {
@@ -555,11 +615,6 @@ export default {
         window.location.href = urls
       }
     },
-    getGoodsInfo() {
-      indexApi.userIndex().then(res => {
-        this.goodsList = res.data
-      })
-    },
 
     goUrl(item) {
       ban.agreementName().then(res => {
@@ -671,6 +726,8 @@ export default {
   .content_a {
     overflow: auto;
     height: 100%;
+    padding-bottom: 120rpx;
+    box-sizing: border-box;
   }
 }
 .content1 {
@@ -680,6 +737,8 @@ export default {
   .content_a {
     overflow: auto;
     height: 100%;
+    padding-bottom: 120rpx;
+    box-sizing: border-box;
   }
 }
 .more {
@@ -1204,4 +1263,367 @@ page {
     transform: rotate(360deg);
   }
 }
+
+.recommend-header {
+  padding: 0rpx;
+  .recommend-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8rpx;
+
+    .title-icon {
+      font-size: 28rpx;
+      // margin-right: 12rpx;
+      color: #ff6b6b;
+    }
+
+    .title-text {
+      color: #333;
+      font-size: 28rpx;
+      font-weight: bold;
+    }
+  }
+
+  .recommend-subtitle {
+    color: #999;
+    font-size: 24rpx;
+    margin-left: 40rpx;
+  }
+}
+
+.recommend-swiper-container {
+  background: #fff;
+}
+
+.recommend-item {
+  display: block;
+  padding: 8px 0;
+  background-color: #fff;
+  border-bottom: 1px solid #f0f0f0;
+  transition: background-color 0.2s ease;
+  width: 100%;
+}
+.recommend-item:last-child {
+  border-bottom: none;
+}
+.recommend-item:active {
+  background-color: #f8f9fa;
+}
+
+.recommend-item-image {
+  width: 100%;
+  height: 160px;
+  object-fit: cover;
+  border-radius: 6px;
+  overflow: hidden;
+  margin-right: 0;
+  margin-bottom: 10px;
+  position: relative;
+  background-color: #f0f0f0;
+}
+.recommend-item-image image {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.recommend-badge {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  background-color: #de3932;
+  color: #ffffff;
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 6px;
+  z-index: 1;
+}
+
+.recommend-item-content {
+  padding: 0 4px;
+}
+
+.recommend-item-name {
+  color: #333333;
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.recommend-item-price {
+  display: flex;
+  align-items: baseline;
+}
+.recommend-item-price .price-symbol {
+  color: #de3932;
+  font-size: 12px;
+  margin-right: 2px;
+}
+.recommend-item-price .price-value {
+  color: #de3932;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.recommend-arrow {
+  display: none;
+}
+
+// Styles for New Product List
+.main-product-list-section {
+  margin: 20rpx;
+  padding-bottom: 20rpx;
+}
+
+.section-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  padding: 18rpx 24rpx;
+  text-align: left;
+  // background: #f8f9fa;
+  border-bottom: 1rpx solid #e9ecef;
+}
+
+.product-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.product-card {
+  background: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .product-image {
+    display: block;
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    background-color: #f0f0f0;
+  }
+
+  .product-info {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    background-color: #f7f8fa;
+  }
+
+  .product-name {
+    font-size: 15px;
+    color: #2d3748;
+    font-weight: 600;
+    line-height: 1.4;
+    margin-bottom: 6px;
+    min-height: calc(15px * 1.4 * 2);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .product-tagline {
+    font-size: 22rpx;
+    color: #999;
+    margin-bottom: 8rpx;
+    line-height: 1.3;
+  }
+
+  .product-price-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: auto;
+  }
+
+  .product-price {
+    color: #de3932;
+    font-size: 32rpx;
+    font-weight: bold;
+    .price-symbol {
+      font-size: 22rpx;
+      margin-right: 2rpx;
+    }
+  }
+
+  .buy-now-button {
+    background-color: transparent;
+    color: #005bac;
+    border: 1px solid #005bac;
+    padding: 7px 12px;
+    border-radius: 20px;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    text-align: center;
+    transition:
+      background-color 0.2s,
+      color 0.2s;
+  }
+  .buy-now-button:active {
+    background-color: #e6f0fa;
+    color: #005bac;
+  }
+}
+
+.load-more-container {
+  margin-top: 30rpx;
+  text-align: center;
+  .load-more-button {
+    background-color: #fff;
+    color: #333;
+    border: 1px solid #eee;
+    padding: 16rpx 40rpx;
+    font-size: 28rpx;
+    border-radius: 40rpx;
+    display: inline-block;
+    transition: background-color 0.2s;
+    &:active {
+      background-color: #f0f0f0;
+    }
+  }
+}
+
+.hot-sellers-card-wrapper {
+  margin-top: 20rpx;
+  background: #fff;
+  // border-radius: 16rpx;
+  overflow: hidden;
+  // box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
+}
+
+/* --- 精选推荐模块样式 --- */
+
+/* 模块容器 */
+.recommend-section {
+  background-color: #ffffff;
+  padding: 20rpx;
+}
+
+/* 模块标题 */
+.recommend-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0;
+}
+
+.recommend-title .title-icon {
+  font-size: 16px;
+  color: #005bac;
+  margin-right: 6px;
+}
+
+.recommend-title .title-text {
+  color: #222222;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+/* 副标题 (如果存在且需要调整) */
+.recommend-subtitle {
+  color: #777777;
+  font-size: 13px;
+  margin-left: 0;
+  padding-left: 22px;
+}
+
+/* 单个推荐商品项 */
+.recommend-item {
+  display: block;
+  padding: 8px 0;
+  background-color: #fff;
+  border-bottom: 1px solid #f0f0f0;
+  transition: background-color 0.2s ease;
+}
+.recommend-item:last-child {
+  border-bottom: none;
+}
+.recommend-item:active {
+  background-color: #f8f9fa;
+}
+
+.recommend-item-image {
+  width: 100%;
+  height: 160px;
+  object-fit: cover;
+  border-radius: 6px;
+  overflow: hidden;
+  margin-right: 0;
+  margin-bottom: 10px;
+  position: relative;
+  background-color: #f0f0f0;
+}
+.recommend-item-image image {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.recommend-badge {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  background-color: #de3932;
+  color: #ffffff;
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 6px;
+  z-index: 1;
+}
+
+.recommend-item-content {
+  padding: 0 4px;
+}
+
+.recommend-item-name {
+  color: #333333;
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.recommend-item-price {
+  display: flex;
+  align-items: baseline;
+}
+.recommend-item-price .price-symbol {
+  color: #de3932;
+  font-size: 12px;
+  margin-right: 2px;
+}
+.recommend-item-price .price-value {
+  color: #de3932;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.recommend-arrow {
+  display: none;
+}
+
+/* 如果 simple-vertical-swiper 的高度需要适配内容 */
+.recommend-swiper-container {
+  /* 如果 simple-vertical-swiper 高度是固定的，比如 :height="140" (rpx/px?)
+     那么内部 recommend-item 的数量和padding需要仔细计算以避免显示问题。
+     这里假设 simple-vertical-swiper 内部可以正确处理其子项的布局。
+     如果swiper高度导致内容显示不全，可能需要调整swiper的height参数，
+     或者调整recommend-item的padding/margin。
+  */
+}
 </style>
diff --git a/pages/mall/index.vue b/pages/mall/index.vue
index 190f7da..bb1c171 100644
--- a/pages/mall/index.vue
+++ b/pages/mall/index.vue
@@ -1,18 +1,56 @@
 <template>
   <view>
-    <view> 123321 </view>
+    <AreaWrapper v-if="!loading" :areaSpecialAreaList="areaSpecialAreaList" />
     <cl-tabbar :current="1"></cl-tabbar>
   </view>
 </template>
 
 <script>
 import clTabbar from '@/components/cl-tabbar.vue'
+import AreaWrapper from '@/components/area-wrapper/index.vue'
+import { REPEAT_PURCHASE, RESCISSION } from '@/util/specialAreaMap'
+import { mapActions } from 'vuex'
 export default {
-  name: 'Mall',
   components: {
     'cl-tabbar': clTabbar,
+    AreaWrapper,
+  },
+  computed: {},
+  data() {
+    return {
+      areaSpecialAreaList: [],
+      visible: false,
+      loading: true,
+    }
+  },
+  onLoad(options) {
+    this.init()
+  },
+  onShow() {},
+  onHide() {},
+  beforeDestroy() {},
+  methods: {
+    ...mapActions(['getSpecialAreaAuth']),
+    init() {
+      uni.showLoading({
+        title: '加载中...',
+      })
+      this.getSpecialAreaAuth()
+        .then(specialAreaList => {
+          if (specialAreaList.includes(REPEAT_PURCHASE.menuKey)) {
+            this.areaSpecialAreaList.push(REPEAT_PURCHASE)
+          }
+          if (specialAreaList.includes(RESCISSION.menuKey)) {
+            this.areaSpecialAreaList.push(RESCISSION)
+          }
+        })
+        .finally(() => {
+          this.loading = false
+          this.$nextTick(() => {
+            uni.hideLoading()
+          })
+        })
+    },
   },
 }
 </script>
-
-<style></style>
diff --git a/util/specialAreaMap.js b/util/specialAreaMap.js
index 2b1063e..b0dc083 100644
--- a/util/specialAreaMap.js
+++ b/util/specialAreaMap.js
@@ -11,6 +11,20 @@ export const UPGRADE = {
   specialArea: 2,
   menuKey: 'upgrade',
 }
+// 复购专区
+export const REPEAT_PURCHASE = {
+  label: '复购专区',
+  specialArea: 3,
+  menuKey: 'repurchase',
+}
+
+// 重消专区
+export const RESCISSION = {
+  label: '重消专区',
+  specialArea: 10,
+  menuKey: 'rescission',
+}
+
 export const specialAreaMap = {
   regiest: REGIEST,
   upgrade: UPGRADE,