From 4ec292edb357ba779bd332d5333f9642d9ca2839 Mon Sep 17 00:00:00 2001
From: dzq <dzq@ys.com>
Date: Mon, 15 Dec 2025 16:05:38 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=A7=9F=E7=94=A8=E6=9F=9C=E6=A0=BC):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=B8=8D=E5=90=8C=E5=B0=BA=E5=AF=B8=E6=A0=BC?=
 =?UTF-8?q?=E5=8F=A3=E7=9A=84SVG=E5=9B=BE=E6=A0=87=E5=B9=B6=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

替换原有单一格口图标为不同尺寸的专用图标
添加格口类型判断函数switchCellImage
更新搜索框提示文本和不可租用状态的显示
---
 .../components/renting-cabinet-container.vue  | 19 +++++++++++++++----
 src/static/svg/product-image-large.svg        | 10 ++++++++++
 src/static/svg/product-image-medium.svg       | 10 ++++++++++
 src/static/svg/product-image-small.svg        | 10 ++++++++++
 src/static/svg/product-image-super-large.svg  | 10 ++++++++++
 src/static/svg/product-image-unknow.svg       | 10 ++++++++++
 src/static/svg/product-image.svg              |  6 ------
 7 files changed, 65 insertions(+), 10 deletions(-)
 create mode 100644 src/static/svg/product-image-large.svg
 create mode 100644 src/static/svg/product-image-medium.svg
 create mode 100644 src/static/svg/product-image-small.svg
 create mode 100644 src/static/svg/product-image-super-large.svg
 create mode 100644 src/static/svg/product-image-unknow.svg
 delete mode 100644 src/static/svg/product-image.svg

diff --git a/src/pages/index/components/renting-cabinet-container.vue b/src/pages/index/components/renting-cabinet-container.vue
index 2a86d26..c6c59c7 100644
--- a/src/pages/index/components/renting-cabinet-container.vue
+++ b/src/pages/index/components/renting-cabinet-container.vue
@@ -99,6 +99,15 @@ function handleCheckout() {
 function showCartDetail() {
   showCartPopup.value = true;
 }
+function switchCellImage(cellType: number) {
+  switch (cellType) {
+    case 1: return '/static/svg/product-image-small.svg';
+    case 2: return '/static/svg/product-image-medium.svg';
+    case 3: return '/static/svg/product-image-large.svg';
+    case 4: return '/static/svg/product-image-super-large.svg';
+    default: return '/static/svg/product-image-unknow.svg';
+  }
+}
 </script>
 
 <template>
@@ -116,13 +125,13 @@ function showCartDetail() {
     <!-- 右侧可租用格口列表 -->
     <view class="product-list">
       <view class="search-wrapper">
-        <input v-model="searchQuery" placeholder="搜索格口号或柜机名称" class="search-box" />
+        <input v-model="searchQuery" placeholder="搜索格口号" class="search-box" />
       </view>
       <scroll-view scroll-y class="category-section">
         <view v-for="cell in filteredRentingCells" :key="cell.cellId" class="product-item">
           <view class="product-info-wrapper">
             <view class="product-image-wrapper">
-              <image :src="PLACEHOLDER_IMAGE_URL" class="product-image">
+              <image :src="switchCellImage(cell.cellType)" class="product-image">
                 <!-- 已被占用或故障的格口显示 '不可租用' -->
                 <view v-if="cell.isRented === 1 || cell.usageStatus === 2 || cell.availableStatus === 2" class="sold-out-overlay">
                   <text class="sold-out-text">不可租用</text>
@@ -140,7 +149,10 @@ function showCartDetail() {
                 <view v-if="cell.isRented === 0 && cell.usageStatus === 1 && cell.availableStatus === 1" class="stock-count">
                   可租用
                 </view>
-                <view class="cart-actions">
+                <view v-else class="stock-count">
+                  不可租用
+                </view>
+                <view v-if="cell.isRented === 0 && cell.usageStatus === 1 && cell.availableStatus === 1" class="cart-actions">
                   <!-- 数量减按钮：如果已在购物车，则显示 -->
                   <button v-if="getRentingCartItemCount(cell.cellId) > 0" size="mini" class="cart-btn minus-btn" @click.stop="handleRemoveFromCart(cell.cellId)">-</button>
                   <!-- 数量显示：0或1 -->
@@ -239,7 +251,6 @@ function showCartDetail() {
 }
 
 .search-box {
-  width: 100%;
   padding: 8px 12px;
   background: #f5f5f5;
   border-radius: 20px;
diff --git a/src/static/svg/product-image-large.svg b/src/static/svg/product-image-large.svg
new file mode 100644
index 0000000..08f47e7
--- /dev/null
+++ b/src/static/svg/product-image-large.svg
@@ -0,0 +1,10 @@
+<svg width="80" height="80" viewBox="0 0 100 100"
+    xmlns="http://www.w3.org/2000/svg" class="cell-image">
+    <rect x="5" y="5" width="90" height="90" rx="10" fill="#E8F5E9" stroke="#81C784" stroke-width="2" />
+    <!-- 添加在矩形和文本之间的虚线 -->
+    <line x1="20" y1="70" x2="80" y2="70" stroke="#2E7D32" stroke-width="1" stroke-dasharray="4,2" />
+    <text x="50" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#2E7D32"
+        text-anchor="middle">空闲</text>
+    <text x="50" y="85" font-family="Arial, sans-serif" font-size="12" fill="#2E7D32"
+        text-anchor="middle">大格</text>
+</svg>
\ No newline at end of file
diff --git a/src/static/svg/product-image-medium.svg b/src/static/svg/product-image-medium.svg
new file mode 100644
index 0000000..9c7abd2
--- /dev/null
+++ b/src/static/svg/product-image-medium.svg
@@ -0,0 +1,10 @@
+<svg width="80" height="80" viewBox="0 0 100 100"
+    xmlns="http://www.w3.org/2000/svg" class="cell-image">
+    <rect x="5" y="5" width="90" height="90" rx="10" fill="#E8F5E9" stroke="#81C784" stroke-width="2" />
+    <!-- 添加在矩形和文本之间的虚线 -->
+    <line x1="20" y1="70" x2="80" y2="70" stroke="#2E7D32" stroke-width="1" stroke-dasharray="4,2" />
+    <text x="50" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#2E7D32"
+        text-anchor="middle">空闲</text>
+    <text x="50" y="85" font-family="Arial, sans-serif" font-size="12" fill="#2E7D32"
+        text-anchor="middle">中格</text>
+</svg>
\ No newline at end of file
diff --git a/src/static/svg/product-image-small.svg b/src/static/svg/product-image-small.svg
new file mode 100644
index 0000000..5b20d81
--- /dev/null
+++ b/src/static/svg/product-image-small.svg
@@ -0,0 +1,10 @@
+<svg width="80" height="80" viewBox="0 0 100 100"
+    xmlns="http://www.w3.org/2000/svg" class="cell-image">
+    <rect x="5" y="5" width="90" height="90" rx="10" fill="#E8F5E9" stroke="#81C784" stroke-width="2" />
+    <!-- 添加在矩形和文本之间的虚线 -->
+    <line x1="20" y1="70" x2="80" y2="70" stroke="#2E7D32" stroke-width="1" stroke-dasharray="4,2" />
+    <text x="50" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#2E7D32"
+        text-anchor="middle">空闲</text>
+    <text x="50" y="85" font-family="Arial, sans-serif" font-size="12" fill="#2E7D32"
+        text-anchor="middle">小格</text>
+</svg>
\ No newline at end of file
diff --git a/src/static/svg/product-image-super-large.svg b/src/static/svg/product-image-super-large.svg
new file mode 100644
index 0000000..5b5e921
--- /dev/null
+++ b/src/static/svg/product-image-super-large.svg
@@ -0,0 +1,10 @@
+<svg width="80" height="80" viewBox="0 0 100 100"
+    xmlns="http://www.w3.org/2000/svg" class="cell-image">
+    <rect x="5" y="5" width="90" height="90" rx="10" fill="#E8F5E9" stroke="#81C784" stroke-width="2" />
+    <!-- 添加在矩形和文本之间的虚线 -->
+    <line x1="20" y1="70" x2="80" y2="70" stroke="#2E7D32" stroke-width="1" stroke-dasharray="4,2" />
+    <text x="50" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#2E7D32"
+        text-anchor="middle">空闲</text>
+    <text x="50" y="85" font-family="Arial, sans-serif" font-size="12" fill="#2E7D32"
+        text-anchor="middle">超大格</text>
+</svg>
\ No newline at end of file
diff --git a/src/static/svg/product-image-unknow.svg b/src/static/svg/product-image-unknow.svg
new file mode 100644
index 0000000..8492e40
--- /dev/null
+++ b/src/static/svg/product-image-unknow.svg
@@ -0,0 +1,10 @@
+<svg width="80" height="80" viewBox="0 0 100 100"
+    xmlns="http://www.w3.org/2000/svg" class="cell-image">
+    <rect x="5" y="5" width="90" height="90" rx="10" fill="#E8F5E9" stroke="#81C784" stroke-width="2" />
+    <!-- 添加在矩形和文本之间的虚线 -->
+    <line x1="20" y1="70" x2="80" y2="70" stroke="#2E7D32" stroke-width="1" stroke-dasharray="4,2" />
+    <text x="50" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#2E7D32"
+        text-anchor="middle">空闲</text>
+    <text x="50" y="85" font-family="Arial, sans-serif" font-size="12" fill="#2E7D32"
+        text-anchor="middle"></text>
+</svg>
\ No newline at end of file
diff --git a/src/static/svg/product-image.svg b/src/static/svg/product-image.svg
deleted file mode 100644
index f12a898..0000000
--- a/src/static/svg/product-image.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<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"
-                                stroke-width="2" />
-                            <text x="50" y="60" font-family="Arial, sans-serif" font-size="24" font-weight="bold"
-                                fill="#2E7D32" text-anchor="middle">空闲</text>
-                        </svg>
\ No newline at end of file