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">性别  ：</span>
- <span class="value">{{ userInfo.sex }}</span>
- </div>
- <div class="detail-item">
- <span class="label">手机号 ：</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">住址  ：</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>