From 7491582f9b0092e944d53e14c7a4fbd0cfcbdf9b Mon Sep 17 00:00:00 2001
From: woody <woody@163>
Date: Tue, 5 Aug 2025 17:28:19 +0800
Subject: [PATCH] =?UTF-8?q?feat(specialAreaList):=20=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/specialArea/index.vue |   8 +-
 pages/specialArea/list.vue  | 288 ++++++++++++++++++------------------
 2 files changed, 155 insertions(+), 141 deletions(-)

diff --git a/pages/specialArea/index.vue b/pages/specialArea/index.vue
index a6bd015..6dec249 100644
--- a/pages/specialArea/index.vue
+++ b/pages/specialArea/index.vue
@@ -91,7 +91,13 @@ export default {
             },
           ],
         },
-
+        {
+          label: '秒杀专区',
+          value: 14,
+          name: 'live',
+          isShow: true,
+          children: [],
+        },
         {
           label: '复购专区',
           value: 3,
diff --git a/pages/specialArea/list.vue b/pages/specialArea/list.vue
index 7f572f3..8ba0a0b 100644
--- a/pages/specialArea/list.vue
+++ b/pages/specialArea/list.vue
@@ -78,129 +78,133 @@
             class="goodList_i"
             @tap="goDetails(item)"
           >
-            <view
-              class="fly"
-              v-show="item.preSaleStatus == 3 || item.isSale == 1"
-            ></view>
-            <view class="image-container">
-              <img :src="item.cover || item.cover1" class="cover" alt="" />
-              <!-- 三角形角标 -->
-              <view class="triangle-badge" v-if="item.warnMessage">
-                <view
-                  class="triangle-badge-text"
-                  :class="{
-                    'text-2': item.warnMessage.length === 2,
-                    'text-3': item.warnMessage.length === 3,
-                    'text-4': item.warnMessage.length === 4,
-                  }"
-                >
-                  {{ item.warnMessage }}
-                </view>
-              </view>
-            </view>
-            <view class="goodList_ir">
-              <view>
-                <span class="qzbq" v-if="item.prefixLabelTarget != undefined">{{
-                  item.prefixLabelTarget.label
-                }}</span>
-                <span style="font-weight: 500">{{ item.waresName }}</span>
-              </view>
-
-              <!-- 库存进度条 -->
+            <view style="display: flex; flex: 1">
               <view
-                class="inventory-progress-container"
-                v-if="item.useRatio && item.inventory !== undefined"
-              >
-                <view class="inventory-header">
-                  <view class="inventory-label">
-                    <text class="inventory-status">库存剩余</text>
-                  </view>
+                class="fly"
+                v-show="item.preSaleStatus == 3 || item.isSale == 1"
+              ></view>
+              <view class="image-container">
+                <img :src="item.cover || item.cover1" class="cover" alt="" />
+                <!-- 三角形角标 -->
+                <view class="triangle-badge" v-if="item.warnMessage">
                   <view
-                    class="inventory-percentage"
-                    :class="getPercentageClass(item.inventory)"
-                  >
-                    {{ getInventoryPercentage(item.inventory) }}%
-                  </view>
-                </view>
-                <view class="inventory-progress-bar">
-                  <view
-                    class="inventory-progress-fill"
-                    :style="{
-                      width: getInventoryPercentage(item.inventory) + '%',
+                    class="triangle-badge-text"
+                    :class="{
+                      'text-2': item.warnMessage.length === 2,
+                      'text-3': item.warnMessage.length === 3,
+                      'text-4': item.warnMessage.length === 4,
                     }"
-                    :class="getProgressClass(item.inventory)"
                   >
-                    <!-- 添加流动光效 -->
-                    <view
-                      class="progress-shine"
-                      v-if="getInventoryPercentage(item.inventory) <= 30"
-                    ></view>
+                    {{ item.warnMessage }}
                   </view>
                 </view>
               </view>
 
-              <view
-                class="pv"
-                v-if="
-                  specialArea != 18 &&
-                  specialArea != 13 &&
-                  specialArea != 31 &&
-                  specialArea != 10
-                "
-              >
-                业绩:{{ item.waresAchieve | numberToCurrency }}
-              </view>
-              <view class="pv" v-if="specialArea == 10">
-                积分可抵扣:{{ item.deductMoney | numberToCurrency }}
-              </view>
-              <view
-                class="pv"
-                v-if="specialArea == 31 && userInfo.isMakerSpace == 0"
-              >
-                业绩:{{ item.waresAchieve | numberToCurrency }}
-              </view>
-              <view class="pv" v-if="specialArea == 13">
-                BV:{{ item.assAchieve | numberToCurrency }}
-              </view>
-              <!-- <view class="pv"> 销量:{{ item.sales | seles }} </view> -->
-              <view class="goodList_ib">
-                <view v-if="specialArea == 31 && userInfo.isMakerSpace == 1">
-                  {{ item.vipPrice | numberToCurrency }}
+              <view class="goodList_ir">
+                <view>
+                  <view>
+                    <span
+                      class="qzbq"
+                      v-if="item.prefixLabelTarget != undefined"
+                      >{{ item.prefixLabelTarget.label }}</span
+                    >
+                    <span style="font-weight: 500">{{ item.waresName }}</span>
+                  </view>
                 </view>
-                <view
-                  v-if="
-                    (specialArea == 31 && userInfo.isMakerSpace == 0) ||
-                    specialArea != 31
-                  "
-                >
-                  {{ item.waresPrice | numberToCurrency }}
+                <view>
+                  <view
+                    class="inventory-progress-container"
+                    v-if="item.useRatio && item.inventory !== undefined"
+                  >
+                    <view class="inventory-progress-bar">
+                      <view
+                        class="inventory-progress-fill"
+                        :style="{
+                          width: getInventoryPercentage(item.inventory) + '%',
+                        }"
+                        :class="getProgressClass(item.inventory)"
+                      >
+                        <!-- 添加流动光效 -->
+                        <view
+                          class="progress-shine"
+                          v-if="getInventoryPercentage(item.inventory) <= 30"
+                        ></view>
+                      </view>
+                    </view>
+                    <view
+                      class="inventory-percentage"
+                      :class="getPercentageClass(item.inventory)"
+                    >
+                      剩余{{ getInventoryPercentage(item.inventory) }}%
+                    </view>
+                  </view>
+
+                  <view class="goodList_ib">
+                    <view>
+                      <view
+                        class="pv"
+                        v-if="
+                          specialArea != 18 &&
+                          specialArea != 13 &&
+                          specialArea != 31 &&
+                          specialArea != 10
+                        "
+                      >
+                        业绩:{{ item.waresAchieve | numberToCurrency }}
+                      </view>
+                      <view class="pv" v-if="specialArea == 10">
+                        积分可抵扣:{{ item.deductMoney | numberToCurrency }}
+                      </view>
+                      <view
+                        class="pv"
+                        v-if="specialArea == 31 && userInfo.isMakerSpace == 0"
+                      >
+                        业绩:{{ item.waresAchieve | numberToCurrency }}
+                      </view>
+                      <view class="pv" v-if="specialArea == 13">
+                        BV:{{ item.assAchieve | numberToCurrency }}
+                      </view>
+                      <view
+                        v-if="specialArea == 31 && userInfo.isMakerSpace == 1"
+                      >
+                        {{ item.vipPrice | numberToCurrency }}
+                      </view>
+                      <view
+                        v-if="
+                          (specialArea == 31 && userInfo.isMakerSpace == 0) ||
+                          specialArea != 31
+                        "
+                      >
+                        {{ item.waresPrice | numberToCurrency }}
+                      </view>
+                    </view>
+
+                    <img
+                      @click.stop="addCar(item)"
+                      v-show="
+                        item.preSaleStatus != 3 &&
+                        item.isSale != 1 &&
+                        specialArea != 31
+                      "
+                      src="@/static/images/cart.png"
+                      alt=""
+                    />
+                    <img
+                      @click.stop="addCar(item)"
+                      v-show="
+                        item.preSaleStatus != 3 &&
+                        item.isSale != 1 &&
+                        specialArea == 31 &&
+                        userInfo.isMakerSpace == 0
+                      "
+                      src="@/static/images/cart.png"
+                      alt=""
+                    />
+                  </view>
                 </view>
-                <img
-                  @click.stop="addCar(item)"
-                  v-show="
-                    item.preSaleStatus != 3 &&
-                    item.isSale != 1 &&
-                    specialArea != 31
-                  "
-                  src="@/static/images/cart.png"
-                  alt=""
-                />
-                <img
-                  @click.stop="addCar(item)"
-                  v-show="
-                    item.preSaleStatus != 3 &&
-                    item.isSale != 1 &&
-                    specialArea == 31 &&
-                    userInfo.isMakerSpace == 0
-                  "
-                  src="@/static/images/cart.png"
-                  alt=""
-                />
               </view>
-              <!-- <view class="pv" v-show="specialArea == 31"> 统一零售价:{{ item.retailPrice| numberToCurrency | isLocal}} </view> -->
             </view>
           </view>
-          <!-- <view class="zhan"></view> -->
         </view>
       </view>
     </view>
@@ -730,22 +734,21 @@ export default {
   overflow-y: auto;
 
   .goodList_i {
-    display: flex;
+    // display: flex;
     border-bottom: 1px solid #eee;
-    padding: 30rpx 0;
+    padding: 20rpx 0 10rpx;
     position: relative;
 
     .goodList_ir {
-      margin-left: 24rpx;
       flex: 1;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      font-size: 28rpx;
+      font-size: 30rpx;
       font-family: Microsoft YaHei;
       font-weight: 400;
       color: #333333;
-
+      margin-left: 24rpx;
       .goodList_ib {
         display: flex;
         align-items: center;
@@ -880,12 +883,16 @@ export default {
 
 /* 库存进度条样式 - 升级版 */
 .inventory-progress-container {
-  margin-top: 10rpx;
+  // margin-bottom: 10rpx;
+  display: flex;
+  align-items: center;
+  width: 100%;
   .inventory-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 12rpx;
+    margin-right: 10rpx;
+    // margin-bottom: 12rpx;
 
     .inventory-label {
       display: flex;
@@ -903,37 +910,38 @@ export default {
         color: #333;
       }
     }
+  }
+  .inventory-percentage {
+    font-size: 24rpx;
+    font-weight: 700;
+    font-family:
+      DIN Alternate,
+      Arial,
+      sans-serif;
 
-    .inventory-percentage {
-      font-size: 24rpx;
-      font-weight: 700;
-      font-family:
-        DIN Alternate,
-        Arial,
-        sans-serif;
+    &.percentage-critical {
+      color: #ff3742;
+      animation: percentageBlink 1s ease-in-out infinite;
+      text-shadow: 0 0 10rpx rgba(255, 55, 66, 0.3);
+    }
 
-      &.percentage-critical {
-        color: #ff3742;
-        animation: percentageBlink 1s ease-in-out infinite;
-        text-shadow: 0 0 10rpx rgba(255, 55, 66, 0.3);
-      }
+    &.percentage-urgent {
+      color: #ff5252;
+      animation: percentageGlow 2s ease-in-out infinite;
+    }
 
-      &.percentage-urgent {
-        color: #ff5252;
-        animation: percentageGlow 2s ease-in-out infinite;
-      }
-
-      &.percentage-normal {
-        color: #005bac;
-      }
+    &.percentage-normal {
+      color: #005bac;
     }
   }
 
   .inventory-progress-bar {
-    width: 100%;
-    height: 16rpx;
+    width: 0;
+    flex: 1;
+    height: 18rpx;
+    margin-right: 10rpx;
     background: rgba(0, 0, 0, 0.08);
-    border-radius: 8rpx;
+    border-radius: 12rpx;
     overflow: hidden;
     position: relative;
     box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.1);