From 8c8f65be7f4cb87a33a3e7ff8d4fedc58219f26a Mon Sep 17 00:00:00 2001
From: dzq <dzq@ys.com>
Date: Tue, 3 Jun 2025 17:34:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=95=86=E5=93=81=E8=AF=A6=E6=83=85):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=95=86=E5=93=81=E8=AE=A2=E5=8D=95=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95=E5=92=8C=E7=BC=96=E8=BE=91=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在商品详情页添加订单记录分页表格，展示关联订单信息
- 新增商品编辑按钮和编辑模态框功能
- 扩展OrderQuery接口添加goodsId字段用于订单查询
- 修复商品详情页点击商品名称跳转错误的问题
---
 src/api/shop/order.ts                     |   1 +
 src/views/shop/goods/detail.vue           | 127 +++++++++++++++++++++-
 src/views/shop/goods/goods-edit-modal.vue |   1 +
 src/views/shop/goods/index.vue            |   2 +-
 4 files changed, 124 insertions(+), 7 deletions(-)

diff --git a/src/api/shop/order.ts b/src/api/shop/order.ts
index 99fa120..de5dc56 100644
--- a/src/api/shop/order.ts
+++ b/src/api/shop/order.ts
@@ -15,6 +15,7 @@ export interface OrderQuery extends BasePageQuery {
   cabinetId?: number;
   /** 格口id */
   cellId?: number;
+  goodsId?: number;
   /** 
    * 订单状态
    * @remarks 
diff --git a/src/views/shop/goods/detail.vue b/src/views/shop/goods/detail.vue
index a8c688f..21da73e 100644
--- a/src/views/shop/goods/detail.vue
+++ b/src/views/shop/goods/detail.vue
@@ -1,8 +1,18 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { getGoodsInfo, GoodsDTO } from "@/api/shop/goods";
+import { getOrderListApi, type OrderDTO, OrderQuery } from "@/api/shop/order";
 import { ElMessage } from "element-plus";
+import { useRenderIcon } from '@/components/ReIcon/src/hooks';
+import EditPen from '@iconify-icons/ep/edit-pen';
+import GoodsEditModal from "./goods-edit-modal.vue";
+
+const handleEdit = (row: GoodsDTO) => {
+  goodsInfo.value = row;
+  editModalVisible.value = true;
+};
+
 const { VITE_PUBLIC_IMG_PATH: IMG_PATH } = import.meta.env;
 
 defineOptions({
@@ -12,6 +22,7 @@ defineOptions({
 const router = useRouter();
 const route = useRoute();
 const goodsInfo = ref<GoodsDTO>({
+  goodsId: 0,
   goodsName: "",
   categoryId: 0,
   price: 0,
@@ -24,6 +35,7 @@ const goodsInfo = ref<GoodsDTO>({
 const loading = ref(false);
 const activeTab = ref('basic');
 const goodsId = ref<number>(0);
+const editModalVisible = ref(false);
 
 async function fetchGoodsDetail() {
   try {
@@ -39,10 +51,48 @@ onMounted(() => {
   goodsId.value = Number(route.query.id);
   fetchGoodsDetail();
 });
+
+const orderList = ref<OrderDTO[]>([]);
+const orderLoading = ref(false);
+const orderPagination = ref({
+  pageSize: 8,
+  currentPage: 1,
+  total: 0
+});
+
+const fetchOrderList = async () => {
+  try {
+    orderLoading.value = true;
+    const { data } = await getOrderListApi({
+      goodsId: goodsId.value,
+      pageSize: orderPagination.value.pageSize,
+      pageNum: orderPagination.value.currentPage
+    });
+    orderList.value = data.rows;
+    orderPagination.value.total = data.total;
+  } finally {
+    orderLoading.value = false;
+  }
+};
+
+const onOrderSizeChange = (val: number) => {
+  orderPagination.value.pageSize = val;
+  fetchOrderList();
+};
+
+const onOrderCurrentChange = (val: number) => {
+  orderPagination.value.currentPage = val;
+  fetchOrderList();
+};
+
+watch(goodsId, () => {
+  fetchOrderList();
+}, { immediate: true });
 </script>
 
 <template>
   <div class="detail-container">
+    <goods-edit-modal v-model:visible="editModalVisible" :row="goodsInfo" @refresh="fetchGoodsDetail" />
     <div class="flex-container">
       <el-card class="goods-info-card">
         <div class="goods-header">
@@ -62,11 +112,13 @@ onMounted(() => {
 
       <el-card class="info-card">
         <div class="tab-header">
-          <el-tabs type="card" v-model="activeTab">
+          <el-tabs type="card" v-model="activeTab" class="tab-header-card">
             <el-tab-pane label="基本信息" name="basic"></el-tab-pane>
-            <el-tab-pane label="库存记录" name="stock"></el-tab-pane>
-            <el-tab-pane label="销售记录" name="sales"></el-tab-pane>
+            <el-tab-pane label="购买记录" name="order"></el-tab-pane>
           </el-tabs>
+          <el-button type="primary" @click="handleEdit(goodsInfo)" style="margin-bottom: 12px" :size="'default'">
+            编辑商品
+          </el-button>
         </div>
 
         <div class="info-details" v-if="activeTab === 'basic'">
@@ -86,8 +138,51 @@ onMounted(() => {
           </el-descriptions>
         </div>
 
-        <div class="stock-details" v-if="activeTab === 'stock'">
-          <!-- 库存记录表格 -->
+        <div class="order-details" v-if="activeTab === 'order'">
+          <el-table v-loading="orderLoading" :data="orderList" row-key="orderId" border>
+            <el-table-column label="订单ID" prop="orderId" width="120" />
+            <el-table-column label="商品名称" prop="goodsNames">
+              <template #default="{ row }">
+                <span v-if="row.goodsNames">
+                  {{ row.goodsNames.split(',').join(', ') }}
+                </span>
+                <span v-else>-</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="姓名" prop="name" width="120" />
+            <el-table-column label="手机号" prop="mobile" width="120" />
+            <el-table-column label="订单金额" prop="totalAmount" width="120">
+              <template #default="{ row }">{{ row.totalAmount }}元</template>
+            </el-table-column>
+            <el-table-column label="订单状态" prop="status" width="120">
+              <template #default="{ row }">
+                <el-tag :type="row.status === 2 ? 'success' : row.status === 5 ? 'danger' : 'info'">
+                  {{ { 1: '待付款', 2: '已付款', 3: '已发货', 4: '已完成', 5: '已取消' }[row.status] }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="支付状态" prop="payStatus" width="120">
+              <template #default="{ row }">
+                <el-tag :type="row.payStatus === 2 ? 'success' : 'info'">
+                  {{ { 1: '未支付', 2: '已支付', 3: '退款中', 4: '已退款' }[row.payStatus] }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="支付方式" prop="paymentMethod" width="120">
+              <template #default="{ row }">
+                {{ { wechat: '微信支付', balance: '余额支付' }[row.paymentMethod] || row.paymentMethod }}
+              </template>
+            </el-table-column>
+            <el-table-column label="支付时间" prop="payTime" width="180">
+              <template #default="{ row }">
+                {{ row.payTime ? new Date(row.payTime).toLocaleString() : '-' }}
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination v-model:current-page="orderPagination.currentPage" v-model:page-size="orderPagination.pageSize"
+            :page-sizes="[8, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper"
+            :total="orderPagination.total" @size-change="onOrderSizeChange" @current-change="onOrderCurrentChange"
+            class="pagination" />
         </div>
 
         <div class="sales-details" v-if="activeTab === 'sales'">
@@ -142,7 +237,27 @@ onMounted(() => {
   }
 
   .tab-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     margin-bottom: 0px;
+
+    .tab-header-card {
+      flex: 1;
+      margin-right: 10px;
+    }
+  }
+}
+
+.order-details {
+  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);
+
+  .pagination {
+    margin-top: 10px;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/shop/goods/goods-edit-modal.vue b/src/views/shop/goods/goods-edit-modal.vue
index 7a4d38b..d4012fa 100644
--- a/src/views/shop/goods/goods-edit-modal.vue
+++ b/src/views/shop/goods/goods-edit-modal.vue
@@ -84,6 +84,7 @@ const initForm = async () => {
     categoryOptions.value = data;
 
     // 初始化表单数据
+    console.log("初始化表单数据", props.row);
     if (props.row?.goodsId) {
       isEdit.value = true;
       Object.assign(formData, props.row);
diff --git a/src/views/shop/goods/index.vue b/src/views/shop/goods/index.vue
index eda86ca..da83e57 100644
--- a/src/views/shop/goods/index.vue
+++ b/src/views/shop/goods/index.vue
@@ -191,7 +191,7 @@ const handleViewDetail = (row: GoodsDTO) => {
                 <div class="info-item">状态：{{ item.status === 1 ? '已上架' : '已下架' }}</div>
               </div>
             </div>
-            <div class="detail-btn" @click="handleEdit(item)">
+            <div class="detail-btn" @click="handleViewDetail(item)">
               {{ item.goodsName }}
             </div>
           </el-card>