From e895e5619cd408342886c750c5cb2bd2179894b9 Mon Sep 17 00:00:00 2001
From: dzq <dzq@ys.com>
Date: Tue, 13 May 2025 10:42:26 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=82=A8=E7=89=A9=E6=9F=9C):=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=BA=93=E5=AD=98=E6=98=BE=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在储物柜列表中新增库存显示功能，当库存为0时，图片会变为灰度显示，并在图片右下角显示库存数量。此功能帮助用户更直观地了解储物柜的库存情况。
---
 src/common/apis/cabinet/type.ts |  1 +
 src/pages/cabinet/index.vue     | 33 +++++++++++++++++++++++++++++----
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/common/apis/cabinet/type.ts b/src/common/apis/cabinet/type.ts
index 831fcd4..ea7c74e 100644
--- a/src/common/apis/cabinet/type.ts
+++ b/src/common/apis/cabinet/type.ts
@@ -8,6 +8,7 @@ export interface CabinetDetailDTO {
 export interface CellInfoDTO {
   cellId: number
   pinNo: number
+  stock: number
   product?: ProductInfoDTO
 }
 
diff --git a/src/pages/cabinet/index.vue b/src/pages/cabinet/index.vue
index 60221fd..30997b0 100644
--- a/src/pages/cabinet/index.vue
+++ b/src/pages/cabinet/index.vue
@@ -7,10 +7,15 @@
         <div class="product-list">
             <van-cell v-for="locker in lockerList" :key="locker.lockerId" class="product-item">
                 <template #icon>
-                    <van-image width="80" height="80"
-                        :src="locker.coverImg ? locker.coverImg : `${publicPath}` + 'img/product-image.svg'" fit="cover"
-                        radius="4" class="product-image">
-                    </van-image>
+                    <div class="image-container">
+                        <van-image width="80" height="80"
+                            :src="locker.coverImg ? locker.coverImg : `${publicPath}` + 'img/product-image.svg'" fit="cover"
+                            radius="4" class="product-image" :style="{ filter: locker.stock === 0 ? 'grayscale(100%)' : 'none' }">
+                        </van-image>
+                        <div v-if="locker.stock >= 0" class="stock-overlay">
+                            库存: {{ locker.stock }}
+                        </div>
+                    </div>
                     <!-- <div v-else class="status-overlay">
                         <svg width="80" height="80" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                             <rect x="5" y="5" width="90" height="90" rx="10" fill="#E8F5E9" stroke="#81C784"
@@ -77,6 +82,7 @@ interface CabinetItem {
 interface LockerItem {
     lockerId: number
     lockerNumber: number
+    stock: number
     status: 0 | 1
     statusClass: 'available' | 'occupied'
     goodsName?: string
@@ -109,6 +115,7 @@ const updateLockerList = (cabinet: CabinetDetailDTO) => {
     lockerList.value = cabinet.cells.map(cell => ({
         lockerId: cell.cellId,
         lockerNumber: cell.pinNo,
+        stock: cell.stock,
         status: cell.product ? 1 : 0,
         statusClass: cell.product ? 'occupied' : 'available',
         goodsName: cell.product?.goodsName,
@@ -152,6 +159,24 @@ loadCabinetDetail()
 </script>
 
 <style lang="scss" scoped>
+.image-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.stock-overlay {
+    position: absolute;
+    right: 4px;
+    bottom: 4px;
+    background-color: rgba(0, 0, 0, 0.6);
+    color: white;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 12px;
+}
+
 .cabinet-container {
     display: flex;
     height: calc(100vh - var(--van-tabbar-height));