From e5c6da07bda55e0fa584ec220821ecb9604b7459 Mon Sep 17 00:00:00 2001
From: dzq <dzq@ys.com>
Date: Wed, 4 Jun 2025 16:45:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=99=BA=E8=83=BD=E6=9F=9C=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87):=20=E4=BC=98=E5=8C=96=E6=99=BA=E8=83=BD=E6=9F=9C?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E5=8F=8A=E5=8D=95=E5=85=83=E6=A0=BC=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在商品图片SVG中添加"小格"文字标识
- 将柜体名称从描述项移至详情按钮文本
- 优化单元格卡片布局，添加虚线分隔线和格口号显示
- 调整单元格操作按钮样式为链接样式并显示商品名称
- 改进单元格信息区域的间距和排版
---
 public/img/product-image.svg                  | 12 +++--
 .../cabinet/smart-cabinet-card/detail.vue     | 54 ++++++++++++++-----
 .../cabinet/smart-cabinet-card/index.vue      | 10 ++--
 3 files changed, 56 insertions(+), 20 deletions(-)

diff --git a/public/img/product-image.svg b/public/img/product-image.svg
index f12a898..568f6e0 100644
--- a/public/img/product-image.svg
+++ b/public/img/product-image.svg
@@ -1,6 +1,8 @@
 <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
+    <rect x="5" y="5" width="90" height="90" rx="10" fill="#E8F5E9" stroke="#81C784"
+        stroke-width="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="75" 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/views/cabinet/smart-cabinet-card/detail.vue b/src/views/cabinet/smart-cabinet-card/detail.vue
index 9d6aac8..1e11698 100644
--- a/src/views/cabinet/smart-cabinet-card/detail.vue
+++ b/src/views/cabinet/smart-cabinet-card/detail.vue
@@ -267,7 +267,7 @@ onMounted(() => {
           <el-descriptions-item label="名称">{{ cabinetInfo.cabinetName }}</el-descriptions-item>
           <el-descriptions-item label="模式">{{ getModeText(cabinetInfo.mode) }}</el-descriptions-item>
           <el-descriptions-item label="格式">{{ CabinetImgMap[cabinetInfo.templateNo]?.name || '-'
-          }}</el-descriptions-item>
+            }}</el-descriptions-item>
           <el-descriptions-item label="已用">{{ cabinetInfo.usedCells || '0' }}</el-descriptions-item>
           <el-descriptions-item label="未用">{{ cabinetInfo.availableCells || '0' }}</el-descriptions-item>
           <el-descriptions-item label="柜址">{{ cabinetInfo.shopName || '-' }}</el-descriptions-item>
@@ -293,7 +293,7 @@ onMounted(() => {
             <el-descriptions-item label="柜体名称">{{ cabinetInfo.cabinetName || '-' }}</el-descriptions-item>
             <el-descriptions-item label="运行模式">{{ getModeText(cabinetInfo.mode) }}</el-descriptions-item>
             <el-descriptions-item label="柜体格式">{{ CabinetImgMap[cabinetInfo.templateNo]?.name || '-'
-            }}</el-descriptions-item>
+              }}</el-descriptions-item>
             <el-descriptions-item label="柜体地址">{{ cabinetInfo.shopName || '-' }}
               <el-button type="success" link @click="shopConfigVisible = true">
                 配置
@@ -303,7 +303,7 @@ onMounted(() => {
                 配置
               </el-button></el-descriptions-item>
             <el-descriptions-item label="借呗支付">{{ getBalanceEnableText(cabinetInfo.balanceEnable)
-            }}</el-descriptions-item>
+              }}</el-descriptions-item>
             <!-- <el-descriptions-item label="归属类型">
               {{ cabinetInfo.belongType === 0 ? '借还柜' : '固资通' }}
             </el-descriptions-item> -->
@@ -331,24 +331,37 @@ onMounted(() => {
             <el-col v-for="(item, index) in cellList" :key="item.cellId" :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
               <el-card class="cell-card" :body-style="{ padding: '8px 10px' }">
                 <div class="card-content">
-                  <el-image :src="item.coverImg || `${IMG_PATH}img/product-image.svg`" class="cell-image"
-                    fit="contain" />
+                  <el-image v-if="item.coverImg" :src="item.coverImg" class="cell-image" fit="contain" />
+                  <svg v-if="!item.coverImg" 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">{{ switchCellType(item.cellType) }}</text>
+                  </svg>
                   <div class="cell-info">
                     <div class="cell-no">格口号: {{ item.cellNo }}</div>
-                    <div class="goods-name">{{ item.goodsId ? item.goodsName : '未配置商品' }}</div>
                     <div class="price">价格: {{ item.price }}</div>
                     <div class="stock">库存: {{ item.stock }}</div>
-                    <div class="cell-type">类型: {{ switchCellType(item.cellType) }}</div>
+                    <!-- <div class="cell-type">类型: {{ switchCellType(item.cellType) }}</div> -->
                   </div>
+                  <!-- <div class="goods-name">{{ item.goodsId ? item.goodsName : '未配置商品' }}</div> -->
+                </div>
+                <div class="line-num">
+                  <el-divider direction="horizontal" class="vertical-divider"/>
+                  <span class="line-number">{{ item.cellNo }}</span>
                 </div>
                 <div class="action-buttons">
-                  <el-button v-if="cabinetInfo.belongType === 0 && !item.goodsId" type="success"
+                  <el-button v-if="cabinetInfo.belongType === 0 && !item.goodsId" link type="success"
                     @click="handleConfigure(item)" class="cell-btn">
                     商品配置
                   </el-button>
-                  <el-button v-if="cabinetInfo.belongType === 1 || item.goodsId" type="primary"
+                  <el-button v-if="cabinetInfo.belongType === 1 || item.goodsId" link type="primary"
                     @click="handleEditCell(item)" class="cell-btn">
-                    编辑格口
+                    {{ item.goodsName }}
                   </el-button>
                   <!-- <el-button v-if="item.goodsId" type="warning" link :icon="useRenderIcon(EditPen)"
                     @click="handleStockConfig(item)">
@@ -441,7 +454,7 @@ onMounted(() => {
     }
 
     .cell-info {
-      padding: 8px 8px 0 8px;
+      padding: 18px 8px 0 8px;
 
       div {
         font-size: 13px;
@@ -460,12 +473,29 @@ onMounted(() => {
     }
   }
 
+  .line-num {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .vertical-divider {
+      margin: 0 0 0 0;
+      width: 85%;
+    }
+
+    .line-number {
+      font-size: 14px;
+      color: #606266;
+      font-weight: 600;
+    }
+  }
+
   .action-buttons {
     display: flex;
     justify-content: center;
     margin-top: auto;
     padding: 8px 0 0 0;
-    border-top: 1px solid var(--el-border-color-light);
+    /* border-top: 1px solid var(--el-border-color-light); */
 
     .cell-btn {
       margin-right: 8px;
diff --git a/src/views/cabinet/smart-cabinet-card/index.vue b/src/views/cabinet/smart-cabinet-card/index.vue
index 6a50c00..dda75ce 100644
--- a/src/views/cabinet/smart-cabinet-card/index.vue
+++ b/src/views/cabinet/smart-cabinet-card/index.vue
@@ -129,8 +129,6 @@ onMounted(() => {
                 <img :src="`${IMG_PATH}img/cabinet/${CabinetImgMap[item.templateNo]?.img || 'default.jpg'}`"
                   class="cabinet-image" />
                 <el-descriptions class="cabinet-info" :column="1">
-                  <el-descriptions-item class="name">名称：{{ item.cabinetName }}
-                  </el-descriptions-item>
                   <el-descriptions-item class="name">模式：{{ getModeText(item.mode) }}
                   </el-descriptions-item>
                   <!-- <div class="type">柜体类型：{{ item.cabinetType === 0 ? '主柜' : '副柜' }}</div> -->
@@ -145,7 +143,9 @@ onMounted(() => {
                 </el-descriptions>
               </div>
               <el-divider class="divider" />
-              <el-button class="detail-btn" :icon="useRenderIcon(View)" @click="handleViewDetail(item)" />
+              <el-button class="detail-btn" link @click="handleViewDetail(item)">
+                {{ item.cabinetName }}
+              </el-button>
             </el-card>
           </el-col>
         </el-row>
@@ -229,6 +229,10 @@ onMounted(() => {
     border: 0;
     margin-top: auto;
     padding: 8px 0;
+
+    &:hover {
+      color: var(--el-color-primary);
+    }
   }
 }