feat(用户管理): 添加企业用户详情页功能

新增企业用户详情页，支持查看用户基本信息，优化用户列表展示样式，并添加路由和API接口

src/api/qy/qyUser.ts

@@ -10,6 +10,7 @@ export interface QyUserDTO {
   openUserid?: string;
   /** 企业用户ID（导出列：企业用户ID） */
   userid?: string;
+  openid?: string;
   /** 用户姓名（导出列：用户姓名） */
   name?: string;
   /** 手机号码（导出列：手机号码） */
@@ -114,3 +115,7 @@ export const syncQyUserApi = (params: { corpid: string; code: string }) => {
 export const exportQyUserExcelApi = (params: QyUserQuery, fileName: string) => {
   return http.download("/qywx/users/excel", fileName, { params });
 };
+
+export const getQyUserDetailApi = (id: number) => {
+  return http.request<ResponseData<QyUserDTO>>("get", `/qywx/users/detail/${id}`);
+};

src/router/modules/global.ts

@@ -31,6 +31,14 @@ export default {
       meta: {
         title: "柜机详情"
       }
+    },
+    {
+      path: "/user/qy/detail",
+      name: "QyUserDetail",
+      component: () => import("@/views/user/qy/detail.vue"),
+      meta: {
+        title: "用户详情"
+      }
     }
   ]
 } as RouteConfigsTable;

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

@@ -32,7 +32,7 @@ const cabinetInfo = ref<SmartCabinetDTO>({
   location: 0
 });
 const loading = ref(false);
-const activeTab = ref('basic');
+const activeTab = ref('cells');
 const cabinetId = ref<number>(0);
 const gatewayConfigVisible = ref(false);
 const shopConfigVisible = ref(false);
@@ -198,8 +198,8 @@ onMounted(() => {
       <el-card class="info-card">
         <div class="tab-header">
           <el-tabs type="card" v-model="activeTab">
-            <el-tab-pane label="基本信息" name="basic"></el-tab-pane>
             <el-tab-pane label="格口管理" name="cells"></el-tab-pane>
+            <el-tab-pane label="基本信息" name="basic"></el-tab-pane>
           </el-tabs>
         </div>
 
@@ -262,8 +262,9 @@ onMounted(() => {
             </el-table-column>
           </el-table>
           <el-pagination v-model:current-page="cellPagination.currentPage" v-model:page-size="cellPagination.pageSize"
-            :page-sizes="[5, 8, 16, 24, 32]" layout="total, sizes, prev, pager, next, jumper" :total="cellPagination.total"
+            :page-sizes="[5, 8, 16, 24, 32]" layout="total, sizes, prev, pager, next, jumper"
-            @size-change="handleCellSizeChange" @current-change="handleCellPageChange" class="pagination" />
+            :total="cellPagination.total" @size-change="handleCellSizeChange" @current-change="handleCellPageChange"
+            class="pagination" />
         </div>
       </el-card>
       <GatewayConfigModal v-model="gatewayConfigVisible" :cabinet-id="cabinetId" @refresh="fetchCabinetDetail" />

src/views/user/qy/UserDetail.vue

@@ -1,50 +0,0 @@
-<template>
-  <el-form ref="formRef" label-width="120px" :model="formInline" :disabled="true">
-    <el-form-item label="用户ID">
-      <el-input v-model="formInline.userId" clearable />
-    </el-form-item>
-    <el-form-item label="用户名">
-      <el-input v-model="formInline.username" />
-    </el-form-item>
-    <el-form-item label="用户昵称">
-      <el-input v-model="formInline.nickname" />
-    </el-form-item>
-    <el-form-item label="性别">
-      <el-select v-model="formInline.sex">
-        <el-option label="男" :value="1" />
-        <el-option label="女" :value="0" />
-      </el-select>
-    </el-form-item>
-    <el-form-item label="手机号码">
-      <el-input v-model="formInline.phoneNumber" />
-    </el-form-item>
-    <el-form-item label="所属部门">
-      <el-input v-model="formInline.deptId" />
-    </el-form-item>
-    <el-form-item label="状态">
-      <el-switch v-model="formInline.status" :active-value="1" :inactive-value="0" active-text="启用"
-        inactive-text="停用" />
-    </el-form-item>
-  </el-form>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-
-defineProps({
-  formInline: {
-    type: Object,
-    default: () => ({
-      userId: null,
-      username: "",
-      nickname: "",
-      sex: 1,
-      phoneNumber: "",
-      deptId: null,
-      status: 1
-    })
-  }
-});
-
-const formRef = ref();
-</script>

src/views/user/qy/detail.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { type QyUserDTO, getQyUserDetailApi } from "@/api/qy/qyUser";
+import { getOrderListApi, type OrderDTO } from "@/api/shop/order";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+
+defineOptions({
+  name: "QyUserDetail"
+});
+
+const route = useRoute();
+const router = useRouter();
+const userInfo = ref<QyUserDTO>({});
+const loading = ref(false);
+
+// 基础信息
+const basicInfo = ref({
+  registerTime: "",
+  lastLogin: "",
+  loginCount: 0,
+  device: ""
+});
+
+// 订单记录
+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;
+    const userId = route.query.id;
+    const { data } = await getQyUserDetailApi(Number(userId));
+    userInfo.value = data;
+    basicInfo.value.registerTime = data.createTimeStr || "";
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  fetchUserDetail();
+});
+</script>
+
+<template>
+  <div class="detail-container">
+    <div class="flex-container">
+      <el-card class="user-info-card">
+        <div class="user-header">
+          <el-avatar :size="100" :src="userInfo.avatar" fit="cover" shape="square">
+            <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+              <circle cx="50" cy="50" r="48" fill="#f5f5f5" stroke="#e0e0e0" stroke-width="1" />
+              <circle cx="50" cy="40" r="12" fill="#9e9e9e" />
+              <rect x="40" y="52" width="20" height="30" rx="2" fill="#9e9e9e" />
+            </svg>
+          </el-avatar>
+          <div class="user-name">{{ userInfo.name }}</div>
+        </div>
+
+        <el-divider />
+
+        <el-descriptions class="user-details" :column="1" border>
+          <el-descriptions-item label="姓名">{{ userInfo.name }}</el-descriptions-item>
+          <el-descriptions-item label="手机号">{{ userInfo.mobile }}</el-descriptions-item>
+          <el-descriptions-item label="余额">¥{{ userInfo.balance?.toFixed(2) }}</el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+      <el-card class="info-card">
+        <div class="tab-header">
+          <el-tabs type="card" v-model="activeTab">
+            <el-tab-pane label="基础信息" name="basic"></el-tab-pane>
+            <!-- <el-tab-pane label="订单记录" name="orders"></el-tab-pane> -->
+          </el-tabs>
+        </div>
+
+        <el-descriptions class="info-details" v-if="activeTab === 'basic'" :column="2" border>
+          <el-descriptions-item label="用户ID">{{ userInfo.userid }}</el-descriptions-item>
+          <el-descriptions-item label="企业ID">{{ userInfo.corpid }}</el-descriptions-item>
+          <el-descriptions-item label="注册时间">{{ basicInfo.registerTime }}</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'">
+          <el-table 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" />
+            <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="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" />
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.detail-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .flex-container {
+    display: flex;
+    flex: 1;
+    gap: 20px;
+    min-height: 0;
+
+    .user-info-card {
+      width: 20%;
+    }
+
+    .info-card {
+      width: 80%;
+    }
+  }
+
+  .user-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .user-name {
+      margin-top: 15px;
+      font-size: 20px;
+      font-weight: bold;
+    }
+  }
+
+  .tab-header {
+    margin-bottom: 20px;
+  }
+}
+</style>

src/views/user/qy/hook.tsx

@@ -13,6 +13,8 @@ import { getQyDeptListApi } from "@/api/system/dept";
 import { getPostListApi } from "@/api/system/post";
 import { getRoleListApi } from "@/api/system/role";
 import { useWxStore } from "@/store/modules/wx";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import { useRouter } from "vue-router";
 
 /**
  * 企业用户管理页面的组合式函数
@@ -20,6 +22,7 @@ import { useWxStore } from "@/store/modules/wx";
  */
 export function useHook() {
   const wxStore = useWxStore(); // 微信相关状态管理
+  const router = useRouter();
 
   // 搜索表单参数
   const searchFormParams = reactive<QyUserQuery>({
@@ -34,7 +37,7 @@ export function useHook() {
   const timeRange = ref<[string, string]>(); // 时间范围选择
 
   // 列表相关状态
-  const dataList = ref([]); // 用户列表数据
+  const dataList = ref<QyUserDTO[]>([]); // 用户列表数据
   const pageLoading = ref(true); // 加载状态
   const pagination = reactive<PaginationProps>({ // 分页配置
     total: 0,
@@ -117,8 +120,23 @@ export function useHook() {
    * 查看用户详情
    * @param row 用户数据行
    */
-  const handleViewDetail = (row: any) => {
+  const handleViewDetail = (row: QyUserDTO) => {
-    // TODO: 实现查看详情逻辑
+    // 保存信息到标签页
+    useMultiTagsStoreHook().handleTags("push", {
+      path: `/user/qy/detail`,
+      name: "qyDetail",
+      query: { id: row.id },
+      meta: {
+        title: `${row.name}`,
+        dynamicLevel: 3
+      }
+    });
+    router.push({
+      path: '/user/qy/detail',
+      query: {
+        id: row.id
+      }
+    });
   };
 
   /**

src/views/user/qy/index.vue

@@ -7,6 +7,7 @@ import BalanceEditModal from "./BalanceEditModal.vue";
 
 import Search from "@iconify-icons/ep/search";
 import Refresh from "@iconify-icons/ep/refresh";
+import View from "@iconify-icons/ep/view";
 
 defineOptions({
   name: "QyUser"
@@ -57,40 +58,31 @@ watch(
 
       <div class="grid-container">
         <el-row :gutter="20">
-          <el-col v-for="(item, index) in dataList" :key="item.id" :xs="24" :sm="12" :md="8" :lg="6">
+          <el-col v-for="(item, index) in dataList" :key="index" :xs="24" :sm="12" :md="8" :lg="6">
-            <el-card class="user-card">
+            <el-card class="user-card" :body-style="{ padding: '8px 20px' }">
-              <div class="card-content">
+              <div class="card-wrapper">
-                <el-avatar :size="60" :src="item.avatar" fit="cover" shape="square" class="avatar">
+                <div class="card-content">
-                  <template v-if="!item.avatar">
+                  <el-avatar :size="80" :src="item.avatar" fit="cover" shape="square" class="avatar">
-                    <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                    <template v-if="!item.avatar">
-                      <!-- 浅灰圆形背景 -->
+                      <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-                      <circle cx="50" cy="50" r="48" fill="#f5f5f5" stroke="#e0e0e0" stroke-width="1" />
+                        <circle cx="50" cy="50" r="48" fill="#f5f5f5" stroke="#e0e0e0" stroke-width="1" />
-                      <!-- 中灰人形图标 -->
+                        <circle cx="50" cy="40" r="12" fill="#9e9e9e" />
-                      <circle cx="50" cy="40" r="12" fill="#9e9e9e" />
+                        <rect x="40" y="52" width="20" height="30" rx="2" fill="#9e9e9e" />
-                      <!-- 修改后的身体部分 - 矩形躯干 -->
+                      </svg>
-                      <rect x="40" y="52" width="20" height="30" rx="2" fill="#9e9e9e" />
+                    </template>
-                    </svg>
+                  </el-avatar>
-                  </template>
+                  <div class="user-info">
-                </el-avatar>
+                    <div class="name">姓名：{{ item.name }}</div>
-                <div class="user-info">
+                    <div class="tel">电话：{{ item.mobile }}</div>
-                  <div class="name">{{ item.name }}</div>
+                    <div class="balance">余额：{{ item.balance }}</div>
-                  <!-- <div class="gender">性别：{{ item.gender === '1' ? '男' : item.gender === '2' ? '女' : '' }}</div> -->
+                  </div>
-                  <div class="create-time">创建时间：{{ item.createTimeStr }}</div>
+                </div>
-                  <div class="balance">余额：¥{{ item.balance?.toFixed(2) }}</div>
+                <div class="card-gap"></div>
+                <div class="card-footer">
+                  <el-divider class="divider" />
+                  <el-button class="detail-btn" :icon="useRenderIcon(View)" @click="handleViewDetail(item)" />
                 </div>
               </div>
-              <el-row :gutter="10">
-                <el-col :span="12">
-                  <el-button type="primary" size="small" class="detail-btn" @click="handleViewDetail(item)">
-                    查看详情
-                  </el-button>
-                </el-col>
-                <el-col :span="12">
-                  <el-button type="warning" size="small" class="detail-btn" @click="handleModifyBalance(item)">
-                    修改余额
-                  </el-button>
-                </el-col>
-              </el-row>
             </el-card>
           </el-col>
         </el-row>
@@ -117,47 +109,64 @@ watch(
 
 .user-card {
   margin-bottom: 20px;
-  min-height: 180px;
+  min-height: 210px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 
   .card-content {
+    flex: 1;
     display: flex;
-    align-items: center;
+    flex-direction: row;
-    margin-bottom: 15px;
+    margin: 15px 0px;
+    gap: 15px;
 
     .avatar {
-      margin-right: 15px;
+      align-self: flex-start;
-      flex-shrink: 0;
     }
 
     .user-info {
-      .name {
+      text-align: left;
-        font-size: 16px;
+      flex: 1;
-        font-weight: 500;
+
+      .name,
+      .tel,
+      .balance {
+        font-size: 14px;
+        color: #606266;
         margin-bottom: 6px;
+        line-height: 1.5;
       }
 
-      .gender,
+      .name {
-      .create-time {
+        font-weight: 500;
-        font-size: 12px;
+        color: #303133;
-        color: #909399;
-        line-height: 1.5;
       }
 
       .balance {
         font-family: monospace;
-        font-size: 14px;
         color: #67c23a;
-        margin-bottom: 6px;
-        line-height: 1.5;
       }
     }
   }
 
-  .detail-btn {
+  .card-footer {
-    width: 100%;
+    margin-top: auto;
+
+    .divider {
+      margin: 2px 0px;
+    }
+
+    .detail-btn {
+      width: 100%;
+      border: 0;
+      padding: 12px 0;
+    }
+  }
+
+  .card-gap {
+    flex-grow: 1;
+    min-height: 40px;
     margin-top: auto;
   }
 }
@@ -184,4 +193,9 @@ watch(
     padding: 8px 0;
   }
 }
+
+.card-wrapper {
+  display: flex;
+  flex-direction: column;
+}
 </style>