feat: 更新系统名称并优化智能柜功能

- 将系统名称从"智借还"更改为"智柜通"
- 在智能柜模块中添加运行模式和借呗支付功能
- 优化商品管理界面为卡片式布局
- 调整智能柜详情页展示信息
- 移除商品分类相关代码
- 修改部分对话框为抽屉式展示

index.html

@@ -7,7 +7,7 @@
   <meta name="renderer" content="webkit" />
   <meta name="viewport"
     content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
-  <title>智借还</title>
+  <title>智柜通</title>
   <link rel="icon" href="/favicon.ico" />
   <script>
     window.process = {};

public/serverConfig.json

@@ -1,6 +1,6 @@
 {
   "Version": "4.4.0",
-  "Title": "智借还",
+  "Title": "智柜通",
   "FixedHeader": true,
   "HiddenSideBar": false,
   "MultiTagsCache": false,

src/api/cabinet/smart-cabinet.ts

@@ -45,6 +45,10 @@ export interface SmartCabinetDTO {
   belongType?: number;
   usedCells?: number;
   availableCells?: number;
+  /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式） */
+  mode?: number;
+  /** 借呗支付（1-正常使用 0-禁止使用） */
+  balanceEnable?: number;
 }
 
 /**
@@ -69,6 +73,10 @@ export interface AddSmartCabinetCommand {
   location: number;
   /** 归属类型（0-借还柜 1-固资通） */
   belongType: number;
+  /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式） */
+  mode?: number;
+  /** 借呗支付（1-正常使用 0-禁止使用） */
+  balanceEnable?: number;
 }
 
 /**
@@ -95,6 +103,10 @@ export interface UpdateSmartCabinetCommand {
   location?: number;
   /** 归属类型（0-借还柜 1-固资通） */
   belongType?: number;
+  /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式） */
+  mode?: number;
+  /** 借呗支付（1-正常使用 0-禁止使用） */
+  balanceEnable?: number;
 }
 
 export interface AllCabinetDataDTO {
@@ -135,3 +147,38 @@ export const allCabinets = () => {
 export const getSmartCabinetDetailApi = (cabinetId: number) => {
   return http.request<ResponseData<SmartCabinetDTO>>("get", `/cabinet/smartCabinet/detail/${cabinetId}`);
 };
+
+
+/**
+ * 获取运行模式文字描述
+ * @param mode 运行模式数字
+ */
+export const getModeText = (mode?: number) => {
+  switch (mode) {
+    case 0:
+      return '支付模式';
+    case 1:
+      return '审批模式';
+    case 2:
+      return '借还模式';
+    case 3:
+      return '会员模式';
+    default:
+      return '未知模式';
+  }
+};
+
+/**
+ * 获取借呗支付状态文字描述
+ * @param balanceEnable 借呗支付状态数字
+ */
+export const getBalanceEnableText = (balanceEnable?: number) => {
+  switch (balanceEnable) {
+    case 0:
+      return '禁止使用';
+    case 1:
+      return '正常使用';
+    default:
+      return '未知状态';
+  }
+};

src/views/cabinet/smart-cabinet-card/detail.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { getSmartCabinetDetailApi, type SmartCabinetDTO } from "@/api/cabinet/smart-cabinet";
+import { getSmartCabinetDetailApi, type SmartCabinetDTO, getModeText, getBalanceEnableText } from "@/api/cabinet/smart-cabinet";
 import { CabinetCellQuery, changeGoodsCellsStock, clearGoodsCells, getCabinetCellList, type CabinetCellDTO } from "@/api/cabinet/cabinet-cell";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { CabinetImgMap } from "@/utils/cabinetImgMap";
@@ -257,32 +257,12 @@ onMounted(() => {
         <el-divider />
 
         <el-descriptions class="cabinet-details" :column="1" border>
-          <el-descriptions-item label="柜体ID">{{ cabinetInfo.cabinetId }}</el-descriptions-item>
-          <el-descriptions-item label="柜体类型">
-            {{ cabinetInfo.cabinetType === 0 ? '主柜' : '副柜' }}
-          </el-descriptions-item>
-          <el-descriptions-item label="模板">
-            {{ CabinetImgMap[cabinetInfo.templateNo]?.name || '-' }}
-          </el-descriptions-item>
-          <el-descriptions-item label="归属商店">
-            {{ cabinetInfo.shopName || '-' }}
-            <el-button type="success" link :icon="useRenderIcon('ep:shop')" @click="shopConfigVisible = true">
-              配置
-            </el-button>
-          </el-descriptions-item>
-          <el-descriptions-item label="MQTT网关">
-            {{ cabinetInfo.mqttServerId || '-' }}
-            <el-button type="warning" link :icon="useRenderIcon('ant-design:gateway-outlined')"
-              @click="gatewayConfigVisible = true">
-              配置
-            </el-button>
-          </el-descriptions-item>
-          <el-descriptions-item label="归属主柜" v-if="cabinetInfo.cabinetType === 1">
-            {{ cabinetInfo.mainCabinetName || '-' }}
-            <el-button type="primary" link :icon="useRenderIcon('ep:setting')" @click="mainCabinetConfigVisible = true">
-              配置
-            </el-button>
-          </el-descriptions-item>
+          <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 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>
         </el-descriptions>
       </el-card>
 
@@ -302,13 +282,23 @@ onMounted(() => {
             </el-button>
           </div>
           <el-descriptions :column="2" border>
-            <el-descriptions-item label="主柜ID">{{ cabinetInfo.mainCabinet || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="主柜名称">{{ cabinetInfo.mainCabinetName || '-' }}</el-descriptions-item>
+            <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 label="柜体地址">{{ cabinetInfo.shopName || '-' }}
+              <el-button type="success" link @click="shopConfigVisible = true">
+                配置
+              </el-button></el-descriptions-item>
+            <el-descriptions-item label="柜体网关">{{ cabinetInfo.mqttServerId || '-' }}
+              <el-button type="warning" link 
+                @click="gatewayConfigVisible = true">
+                配置
+              </el-button></el-descriptions-item>
+            <el-descriptions-item label="借呗支付">{{ getBalanceEnableText(cabinetInfo.balanceEnable) }}</el-descriptions-item>
             <!-- <el-descriptions-item label="归属类型">
               {{ cabinetInfo.belongType === 0 ? '借还柜' : '固资通' }}
             </el-descriptions-item> -->
-            <el-descriptions-item label="MQTT服务器ID">{{ cabinetInfo.mqttServerId || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="操作员">{{ cabinetInfo.operator || '-' }}</el-descriptions-item>
           </el-descriptions>
         </div>
 
@@ -421,21 +411,17 @@ onMounted(() => {
       <ShopConfigModal v-model="shopConfigVisible" :cabinet-id="cabinetId" @refresh="fetchCabinetDetail" />
       <MainCabinetConfigModal v-model="mainCabinetConfigVisible" :cabinet-id="cabinetId"
         @refresh="fetchCabinetDetail" />
-      <el-drawer v-model="editCabinetDrawerVisible"
-        title="编辑柜体" size="30%" direction="rtl">
+      <el-drawer v-model="editCabinetDrawerVisible" title="编辑柜体" size="30%" direction="rtl">
         <EditCabinetDrawer v-model="editCabinetDrawerVisible" :cabinet-info="cabinetInfo"
           @refresh="fetchCabinetDetail" />
       </el-drawer>
-      <el-drawer v-model="goodsConfigVisible" title="配置商品"
-        size="50%" direction="rtl">
+      <el-drawer v-model="goodsConfigVisible" title="配置商品" size="50%" direction="rtl">
         <CabinetGoodsConfigModal v-model="goodsConfigVisible" :cell-id="currentCellId" @refresh="fetchCellList" />
       </el-drawer>
-      <el-drawer v-model="cellFormVisible" title="新增格口"
-        size="30%" direction="rtl">
+      <el-drawer v-model="cellFormVisible" title="新增格口" size="30%" direction="rtl">
         <CellFormModal v-model="cellFormVisible" :initial-cabinet-id="cabinetId" @refresh="fetchCellList" />
       </el-drawer>
-      <el-drawer v-model="cellEditVisible" title="编辑格口"
-        size="30%" direction="rtl">
+      <el-drawer v-model="cellEditVisible" title="编辑格口" size="30%" direction="rtl">
         <CellEditModal v-model="cellEditVisible" :row="currentCell" @refresh="fetchCellList" />
       </el-drawer>
     </div>
@@ -489,7 +475,7 @@ onMounted(() => {
 
     .cabinet-image {
       width: 100%;
-      height: 420px;
+      height: 320px;
       object-fit: contain;
       margin-bottom: 15px;
     }

src/views/cabinet/smart-cabinet-card/edit-cabinet-drawer.vue

@@ -27,7 +27,9 @@ const formData = reactive({
   templateNo: "",
   lockControlNo: 0,
   location: 0,
-  belongType: 0
+  belongType: 0,
+  mode: 0,
+  balanceEnable: 1
 });
 
 const rules = reactive<FormRules>({
@@ -43,6 +45,12 @@ const rules = reactive<FormRules>({
   ],
   belongType: [
     { required: true, message: "请选择归属类型", trigger: "change" }
+  ],
+  mode: [
+    { required: true, message: "请选择运行模式", trigger: "change" }
+  ],
+  balanceEnable: [
+    { required: true, message: "请选择借呗支付状态", trigger: "change" }
   ]
 });
 
@@ -103,6 +111,22 @@ watch(() => props.cabinetInfo, (newVal) => {
       </el-select>
     </el-form-item> -->
 
+    <el-form-item label="运行模式" prop="mode">
+      <el-select v-model="formData.mode" placeholder="请选择运行模式">
+        <el-option label="支付模式" :value="0" />
+        <el-option label="审批模式" :value="1" />
+        <el-option label="借还模式" :value="2" />
+        <el-option label="会员模式" :value="3" />
+      </el-select>
+    </el-form-item>
+
+    <el-form-item label="借呗支付" prop="balanceEnable">
+      <el-select v-model="formData.balanceEnable" placeholder="请选择借呗支付状态">
+        <el-option label="正常使用" :value="1" />
+        <el-option label="禁止使用" :value="0" />
+      </el-select>
+    </el-form-item>
+
     <el-form-item>
       <el-button type="primary" :icon="useRenderIcon(Confirm)" @click="handleConfirm">
         确认

src/views/cabinet/smart-cabinet-card/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { getSmartCabinetList, type SmartCabinetDTO } from "@/api/cabinet/smart-cabinet";
+import { getSmartCabinetList, type SmartCabinetDTO, getModeText } from "@/api/cabinet/smart-cabinet";
 import { type PaginationProps } from "@pureadmin/table";
 import { CommonUtils } from "@/utils/common";
 import { useRouter } from "vue-router";
@@ -131,7 +131,7 @@ onMounted(() => {
                 <el-descriptions class="cabinet-info" :column="1">
                   <el-descriptions-item class="name">名称：{{ item.cabinetName }}
                   </el-descriptions-item>
-                  <el-descriptions-item class="name">模式：{{ '支付模式' }}
+                  <el-descriptions-item class="name">模式：{{ getModeText(item.mode) }}
                   </el-descriptions-item>
                   <!-- <div class="type">柜体类型：{{ item.cabinetType === 0 ? '主柜' : '副柜' }}</div> -->
                   <el-descriptions-item class="template">格式：{{ CabinetImgMap[item.templateNo]?.name || '-' }}

src/views/cabinet/smart-cabinet-card/smart-cabinet-card-form-modal.vue

@@ -14,6 +14,8 @@ export interface FormDTO {
   lockControlNo: number;
   location: number;
   belongType: number;
+  mode: number;
+  balanceEnable: number;
 }
 
 const props = defineProps({
@@ -28,11 +30,13 @@ const emit = defineEmits(["update:modelValue", "refresh"]);
 const formRef = ref();
 const formData = reactive<FormDTO>({
   cabinetName: "",
-  cabinetType: 1,
+  cabinetType: 0,
   templateNo: "",
   lockControlNo: 0,
   location: 0,
-  belongType: 0
+  belongType: 0,
+  mode: 0,
+  balanceEnable: 1
 });
 
 const rules = reactive<FormRules>({
@@ -48,6 +52,12 @@ const rules = reactive<FormRules>({
   ],
   belongType: [
     { required: true, message: "请选择归属类型", trigger: "change" }
+  ],
+  mode: [
+    { required: true, message: "请选择运行模式", trigger: "change" }
+  ],
+  balanceEnable: [
+    { required: true, message: "请选择借呗支付状态", trigger: "change" }
   ]
 });
 
@@ -80,12 +90,12 @@ const templateOptions = Object.entries(CabinetImgMap).map(([value, item]) => ({
       <el-input v-model="formData.cabinetName" placeholder="请输入柜体名称" />
     </el-form-item>
 
-    <el-form-item label="柜体类型" prop="cabinetType">
+    <!-- <el-form-item label="柜体类型" prop="cabinetType">
       <el-select v-model="formData.cabinetType" placeholder="请选择类型">
         <el-option label="主柜" :value="0" />
         <el-option label="副柜" :value="1" />
       </el-select>
-    </el-form-item>
+    </el-form-item> -->
 
     <el-form-item label="模板编号" prop="templateNo">
       <el-select v-model="formData.templateNo" placeholder="请选择模板编号">
@@ -100,6 +110,22 @@ const templateOptions = Object.entries(CabinetImgMap).map(([value, item]) => ({
       </el-select>
     </el-form-item> -->
 
+    <el-form-item label="运行模式" prop="mode">
+      <el-select v-model="formData.mode" placeholder="请选择运行模式">
+        <el-option label="支付模式" :value="0" />
+        <el-option label="审批模式" :value="1" />
+        <el-option label="借还模式" :value="2" />
+        <el-option label="会员模式" :value="3" />
+      </el-select>
+    </el-form-item>
+
+    <el-form-item label="借呗支付" prop="balanceEnable">
+      <el-select v-model="formData.balanceEnable" placeholder="请选择借呗支付状态">
+        <el-option label="正常使用" :value="1" />
+        <el-option label="禁止使用" :value="0" />
+      </el-select>
+    </el-form-item>
+
     <el-form-item>
       <el-button type="primary" :icon="useRenderIcon(Confirm)" @click="handleConfirm">
         确认

src/views/cabinet/smart-cabinet/ShopConfigModal.vue

@@ -1,8 +1,8 @@
 <template>
-  <el-dialog v-model="visible" title="商店配置" width="800px">
+  <el-dialog v-model="visible" title="地址配置" width="800px">
     <el-table :data="shopList" v-loading="loading" border>
-      <el-table-column prop="shopId" label="商店ID" width="100" />
-      <el-table-column prop="shopName" label="商店名称" />
+      <el-table-column prop="shopId" label="地址ID" width="100" />
+      <el-table-column prop="shopName" label="地址名称" />
       <el-table-column label="操作" width="80" fixed="right">
         <template #default="{ row }">
           <el-button link type="primary" @click="handleConfig(row)">配置</el-button>

src/views/shop/goods/goods-edit-modal.vue

@@ -160,12 +160,12 @@ const handleDelete = async () => {
         <el-input-number v-model="formData.stock" :min="0" controls-position="right" />
       </el-form-item>
 
-      <el-form-item label="商品分类" prop="categoryId">
+      <!-- <el-form-item label="商品分类" prop="categoryId">
         <el-select v-model="formData.categoryId" placeholder="请选择商品分类" clearable class="w-full">
           <el-option v-for="category in categoryOptions" :key="category.categoryId" :label="category.categoryName"
             :value="category.categoryId" />
         </el-select>
-      </el-form-item>
+      </el-form-item> -->
 
       <el-form-item label="自动审批" prop="autoApproval">
         <el-switch v-model="formData.autoApproval" :active-value="1" :inactive-value="0" active-text="启用"
@@ -192,7 +192,6 @@ const handleDelete = async () => {
     </el-form>
 
     <template #footer>
-      <el-button @click="closeDialog">取消</el-button>
       <el-button type="primary" :icon="useRenderIcon(Confirm)" @click="handleConfirm">
         确认
       </el-button>

src/views/shop/goods/goods-form-modal.vue

@@ -96,7 +96,7 @@ const beforeAvatarUpload = (rawFile) => {
 </script>
 
 <template>
-  <el-dialog title="新增商品" :model-value="visible" width="600px" @close="closeDialog" @open="loadCategories">
+  <el-drawer :title="'新增商品'" :model-value="visible" size="50%" direction="rtl" @close="closeDialog">
     <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px" label-position="right">
       <el-form-item label="商品名称" prop="goodsName">
         <el-input v-model="formData.goodsName" placeholder="请输入商品名称" clearable />
@@ -118,12 +118,12 @@ const beforeAvatarUpload = (rawFile) => {
       </el-form-item>
 
       <!-- 在状态表单项前添加分类选择 -->
-      <el-form-item label="商品分类" prop="categoryId">
+      <!-- <el-form-item label="商品分类" prop="categoryId">
         <el-select v-model="formData.categoryId" placeholder="请选择商品分类" clearable class="w-full">
           <el-option v-for="category in categoryOptions" :key="category.categoryId" :label="category.categoryName"
             :value="category.categoryId" />
         </el-select>
-      </el-form-item>
+      </el-form-item> -->
 
       <el-form-item label="自动审批" prop="autoApproval">
         <el-switch v-model="formData.autoApproval" :active-value="1" :inactive-value="0" active-text="启用"
@@ -142,15 +142,23 @@ const beforeAvatarUpload = (rawFile) => {
     </el-form>
 
     <template #footer>
-      <el-button @click="closeDialog">取消</el-button>
+      <div class="drawer-footer">
         <el-button type="primary" :icon="useRenderIcon(Confirm)" @click="handleConfirm">
           确认
         </el-button>
+      </div>
     </template>
-  </el-dialog>
+  </el-drawer>
 </template>
 
 <style scoped>
+.drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px;
+}
+
 .avatar-uploader {
   :deep(.el-upload) {
     border: 1px dashed var(--el-border-color);

src/views/shop/goods/index.vue

@@ -9,6 +9,7 @@ import AddFill from "@iconify-icons/ri/add-circle-line";
 import Search from "@iconify-icons/ep/search";
 import Refresh from "@iconify-icons/ep/refresh";
 import Setting from "@iconify-icons/ep/setting";
+import View from "@iconify-icons/ep/view";
 import GoodsFormModal from "./goods-form-modal.vue";
 import GoodsEditModal from "./goods-edit-modal.vue";
 import { ElMessage, ElMessageBox } from "element-plus";
@@ -30,7 +31,7 @@ const searchFormParams = ref({
 
 // 分页参数
 const pagination = ref({
-  pageSize: 6,
+  pageSize: 12,
   currentPage: 1,
   total: 0
 });
@@ -156,60 +157,27 @@ const handleEdit = (row: GoodsDTO) => {
       </el-form-item>
     </el-form>
 
-    <div class="table-container">
-      <el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="id"
-        @selection-change="handleSelectionChange" border>
-        <el-table-column type="selection" width="55" />
-        <el-table-column label="商品图片" width="120">
-          <template #default="{ row }">
-            <el-image :src="row.coverImg" :preview-src-list="[row.coverImg]" :z-index="9999" :preview-teleported="true"
-              :hide-on-click-modal="true" fit="cover" class="rounded" width="60" height="60" />
-          </template>
-        </el-table-column>
-        <el-table-column label="商品名称" prop="goodsName" />
-        <el-table-column label="价格" prop="price" width="120" />
-        <el-table-column label="库存" prop="stock" width="120" />
-        <el-table-column label="状态" prop="status" width="120">
-          <template #default="{ row }">
-            <el-tag :type="row.status === 1 ? 'success' : 'danger'">
-              {{ row.status === 1 ? '已上架' : '已下架' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="自动审批" prop="autoApproval" width="120">
-          <template #default="{ row }">
-            <el-tag :type="row.autoApproval === 1 ? 'success' : 'info'">
-              {{ row.autoApproval === 1 ? '启用' : '关闭' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="柜口" prop="cellNo" width="120">
-          <template #default="{ row }">
-            {{ !row.cellNoStr ? '未配置' : row.cabinetName + ' 格口' + row.cellNoStr }}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="150" fixed="right">
-          <template #default="{ row }">
-            <el-button type="primary" link :icon="useRenderIcon(EditPen)" @click="handleEdit(row)" class="right-btn">
-              编辑
-            </el-button>
-            <!-- <el-button type="warning" link :icon="useRenderIcon(Setting)" class="right-btn"
-              @click="currentRow = row; configVisible = true">
-              配置格口
-            </el-button> -->
-            <!-- <el-popconfirm :title="`确认删除【${row.goodsName}】？`" @confirm="handleDelete(row)">
-              <template #reference>
-                <el-button type="danger" link :icon="useRenderIcon(Delete)" class="right-btn">
-                  删除
-                </el-button>
-              </template>
-  </el-popconfirm> -->
-          </template>
-        </el-table-column>
-      </el-table>
+    <div class="grid-container">
+      <el-row :gutter="12">
+        <el-col v-for="(item, index) in dataList" :key="item.goodsId" :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
+          <el-card class="goods-card" :body-style="{ padding: '8px 10px' }">
+            <div class="card-content">
+              <el-image :src="item.coverImg" :preview-src-list="[item.coverImg]" class="goods-image" fit="contain" />
+              <div class="goods-info">
+                <div class="name">名称：{{ item.goodsName }}</div>
+                <div class="price">价格：{{ item.price }}</div>
+                <div class="stock">库存：{{ item.stock }}</div>
+                <div class="info-item">状态：{{ item.status === 1 ? '已上架' : '已下架' }}</div>
+              </div>
+            </div>
+            <el-divider class="divider" />
+            <el-button class="detail-btn" :icon="useRenderIcon(View)" @click="handleEdit(item)" />
+          </el-card>
+        </el-col>
+      </el-row>
       <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
-        :page-sizes="[6, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
-        @size-change="onSizeChange" @current-change="onCurrentChange" class="pagination" />
+        :page-sizes="[12, 18, 24, 30, 36, 42]" layout="total, sizes, prev, pager, next, jumper"
+        :total="pagination.total" @size-change="onSizeChange" @current-change="onCurrentChange" class="pagination" />
     </div>
     <!-- 新增商品弹窗 -->
     <goods-form-modal v-model:visible="modalVisible" @refresh="getList" />
@@ -226,6 +194,7 @@ const handleEdit = (row: GoodsDTO) => {
   opacity: 1;
   background-color: rgba(0, 0, 0, 0.8);
 }
+
 .search-form {
   :deep(.el-form-item) {
     margin-bottom: 12px;
@@ -237,26 +206,82 @@ const handleEdit = (row: GoodsDTO) => {
   flex: 1;
   width: 100%;
 }
-.right-btn {
+
+.pagination {
+  margin-top: 10px;
+  text-align: center;
+
+  :deep(.el-pagination) {
     margin: 0;
+    padding: 4px 0;
+  }
 }
 
-.table-container {
+.goods-card {
+  margin-bottom: 12px;
+  min-height: 210px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .card-content {
+    display: flex;
+    flex-direction: row;
+    margin: 0px;
+
+    .goods-image {
+      width: 55%;
+      height: 200px;
+      object-fit: contain;
+      border-radius: 4px;
+      margin-right: 10px;
+    }
+
+    .goods-info {
+      flex: 1;
+      padding: 16px 0;
+
+      .name,
+      .info-item,
+      .price,
+      .stock  {
+        font-size: 14px;
+        font-weight: 500;
+        margin-bottom: 6px;
+        color: #606266;
+      }
+
+      /* .price,
+      .info-item,
+      .stock {
+        color: #909399;
+      } */
+    }
+  }
+
+  .divider {
+    margin: 5px 0px;
+  }
+
+  .detail-btn {
+    width: 100%;
+    border: 0;
+    margin-top: auto;
+    padding: 8px 0;
+  }
+}
+
+.grid-container {
   margin-top: 8px;
   background-color: var(--el-bg-color);
   border-radius: 4px;
   padding: 16px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
-  display: flex;
-  flex-direction: column;
+  margin-bottom: 12px;
+  min-height: 300px;
 
-  .el-table {
-    flex: 1;
-    overflow: hidden;
-  }
-
-  .pagination {
-    margin-top: 10px;
+  .el-row {
+    margin-bottom: -12px;
   }
 }
 </style>

src/views/user/qy/index.vue

@@ -257,7 +257,7 @@ watch(
 .pagination-wrapper {
   position: relative;
   background: var(--el-bg-color);
-  padding: 8px 12px;
+  padding: 12px 12px 13px 12px;
   margin-top: 20px;
   text-align: center;