From 5eb7ae6f0000e996b26ef51a58636acf6fc689c1 Mon Sep 17 00:00:00 2001
From: dzq <dzq@ys.com>
Date: Tue, 13 May 2025 15:34:05 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=AE=A2=E5=8D=95=E6=A8=A1=E5=9D=97):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=BE=AE=E4=BF=A1openid=E6=9F=A5=E8=AF=A2?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=B9=B6=E4=BC=98=E5=8C=96=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E8=AE=A2=E5=8D=95=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在订单查询接口中添加微信openid字段，支持通过openid查询订单
- 重构用户详情页，使用el-descriptions组件优化基本信息展示
- 添加订单列表展示功能，支持分页、加载状态及订单详情查看
---
 src/api/shop/order.ts          |   4 +
 src/views/user/ab98/detail.vue | 155 +++++++++++++++++++++------------
 2 files changed, 104 insertions(+), 55 deletions(-)

diff --git a/src/api/shop/order.ts b/src/api/shop/order.ts
index 4eee8e7..4c4ad7e 100644
--- a/src/api/shop/order.ts
+++ b/src/api/shop/order.ts
@@ -3,6 +3,10 @@ import { http } from "@/utils/http";
 export interface OrderQuery extends BasePageQuery {
   /** 订单编号 */
   orderId?: number;
+  /**
+   * 微信openid
+   */
+  openid?: string;
   /** 柜机id */
   cabinetId?: number;
   /** 格口id */
diff --git a/src/views/user/ab98/detail.vue b/src/views/user/ab98/detail.vue
index 3a6c882..927b99a 100644
--- a/src/views/user/ab98/detail.vue
+++ b/src/views/user/ab98/detail.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useRoute } from "vue-router";
-import { Ab98UserDetailDTO, type Ab98UserDTO, getAb98UserDetailApi } from "@/api/ab98/user";
+import { type Ab98UserDetailDTO, getAb98UserDetailApi } from "@/api/ab98/user";
+import { getOrderListApi, type OrderDTO } from "@/api/shop/order";
 
 defineOptions({
   name: "Ab98UserDetail"
@@ -19,14 +20,37 @@ const basicInfo = ref({
   device: "iPhone 13"
 });
 
-
-
 // 订单记录
-const orderRecords = ref([
-]);
-
+const orderRecords = ref<OrderDTO[]>([]);
+const pagination = ref({
+  pageSize: 5,
+  currentPage: 1,
+  total: 0
+});
+const orderLoading = ref(false);
 const activeTab = ref('basic');
 
+async function fetchOrders() {
+  try {
+    orderLoading.value = true;
+    const { data } = await getOrderListApi({
+      openid: userInfo.value.openid,
+      pageSize: pagination.value.pageSize,
+      pageNum: pagination.value.currentPage
+    });
+    orderRecords.value = data.rows;
+    pagination.value.total = data.total;
+  } finally {
+    orderLoading.value = false;
+  }
+}
+
+watch(activeTab, (newVal) => {
+  if (newVal === 'orders') {
+    fetchOrders();
+  }
+});
+
 async function fetchUserDetail() {
   try {
     loading.value = true;
@@ -60,24 +84,12 @@ onMounted(() => {
 
         <el-divider />
 
-        <div class="user-details">
-          <div class="detail-item">
-            <span class="label">性别&emsp;&emsp;：</span>
-            <span class="value">{{ userInfo.sex }}</span>
-          </div>
-          <div class="detail-item">
-            <span class="label">手机号&emsp;：</span>
-            <span class="value">{{ userInfo.tel }}</span>
-          </div>
-          <div class="detail-item">
-            <span class="label">身份证号：</span>
-            <span class="value">{{ userInfo.idnum }}</span>
-          </div>
-          <div class="detail-item">
-            <span class="label">住址&emsp;&emsp;：</span>
-            <span class="value">{{ userInfo.address }}</span>
-          </div>
-        </div>
+        <el-descriptions class="user-details" :column="1" border>
+          <el-descriptions-item label="性别">{{ userInfo.sex }}</el-descriptions-item>
+          <el-descriptions-item label="手机号">{{ userInfo.tel }}</el-descriptions-item>
+          <el-descriptions-item label="身份证号">{{ userInfo.idnum }}</el-descriptions-item>
+          <el-descriptions-item label="住址">{{ userInfo.address }}</el-descriptions-item>
+        </el-descriptions>
       </el-card>
       <el-card class="info-card">
         <div class="tab-header">
@@ -88,40 +100,73 @@ onMounted(() => {
           </el-tabs>
         </div>
 
-        <div class="info-details" v-if="activeTab === 'basic'">
-          <div class="detail-item">
-            <span class="label">微信openid：</span>
-            <span class="value">{{ userInfo.openid }}</span>
-          </div>
-          <div class="detail-item">
-            <span class="label">注册时间：</span>
-            <span class="value">{{ userInfo.createTime }}</span>
-          </div>
-          <div class="detail-item">
-            <span class="label">最后登录：</span>
-            <span class="value">{{ basicInfo.lastLogin }}</span>
-          </div>
-          <div class="detail-item">
-            <span class="label">登录次数：</span>
-            <span class="value">{{ basicInfo.loginCount }}</span>
-          </div>
-          <div class="detail-item">
-            <span class="label">常用设备：</span>
-            <span class="value">{{ basicInfo.device }}</span>
-          </div>
-        </div>
+        <el-descriptions class="info-details" v-if="activeTab === 'basic'" :column="2" border>
+          <el-descriptions-item label="会员ID">{{ userInfo.ab98UserId }}</el-descriptions-item>
+          <el-descriptions-item label="微信openid">{{ userInfo.openid }}</el-descriptions-item>
+          <el-descriptions-item label="注册时间">{{ userInfo.createTime }}</el-descriptions-item>
+          <el-descriptions-item label="最后登录">{{ basicInfo.lastLogin }}</el-descriptions-item>
+          <el-descriptions-item label="登录次数">{{ basicInfo.loginCount }}</el-descriptions-item>
+          <el-descriptions-item label="常用设备">{{ basicInfo.device }}</el-descriptions-item>
+        </el-descriptions>
 
 
 
         <div class="info-details" v-if="activeTab === 'orders'">
-          <div class="order-item" v-for="order in orderRecords" :key="order.id">
-            <div class="order-id">订单号：{{ order.id }}</div>
-            <div class="order-detail">
-              <span>日期：{{ order.date }}</span>
-              <span>金额：¥{{ order.amount.toFixed(2) }}</span>
-              <span>状态：{{ order.status }}</span>
-            </div>
-          </div>
+          <PureTableBar title="订单列表" @refresh="fetchOrders">
+            <el-table ref="tableRef" v-loading="orderLoading" :data="orderRecords" row-key="orderId" border>
+              <el-table-column label="订单ID" prop="orderId" width="120" />
+              <el-table-column label="商品名称" prop="goodsNames" width="180">
+                <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="coverImgs" width="100">
+                <template #default="{ row }">
+                  <div v-if="row.coverImgs" class="flex gap-2">
+                    <el-image v-for="(img, index) in row.coverImgs.split(',')" :key="index" :src="img"
+                      :preview-src-list="row.coverImgs.split(',')" :z-index="9999" :preview-teleported="true"
+                      :hide-on-click-modal="true" fit="cover" class="rounded" width="60" height="60" />
+                  </div>
+                  <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="pagination.currentPage" v-model:page-size="pagination.pageSize"
+              :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
+              @size-change="fetchOrders" @current-change="fetchOrders" />
+          </PureTableBar>
         </div>
       </el-card>
     </div>