fix:将填写弹窗修改为选择弹窗

src/views/user/UserDetail.vue

@@ -173,15 +173,116 @@
                  </div>
                  <el-empty v-else description="暂无操作记录" :image-size="100" />
               </el-tab-pane>
+              <el-tab-pane label="订单列表" name="3">
+                 <el-table :data="userOrderList" v-loading="orderListLoading" stripe style="width: 100%">
+                    <el-table-column prop="order_id" label="订单ID" width="100" />
+                    <el-table-column prop="good_name" label="商品名称" min-width="150" show-overflow-tooltip />
+                    <el-table-column prop="price" label="金额" width="100">
+                      <template #default="{row}">¥{{ (row.price / 100).toFixed(2) }}</template>
+                    </el-table-column>
+                    <el-table-column prop="status" label="状态" width="100">
+                      <template #default="{row}">
+                        <el-tag :type="getOrderStatusType(row.status)" size="small">{{ getOrderStatusText(row.status) }}</el-tag>
+                      </template>
+                    </el-table-column>
+                    <el-table-column prop="created_at" label="创建时间" width="160">
+                      <template #default="{row}">{{ formatDate(row.created_at) }}</template>
+                    </el-table-column>
+                    <el-table-column label="操作" width="80" fixed="right">
+                      <template #default="scope">
+                        <el-button type="primary" link size="small" @click="handleViewOrder(scope.row)">详情</el-button>
+                      </template>
+                    </el-table-column>
+                 </el-table>
+                 <div class="pagination-wrapper" v-if="orderListTotal > 0">
+                    <el-pagination 
+                      v-model:current-page="orderListPage"
+                      v-model:page-size="orderListPageSize"
+                      :total="orderListTotal"
+                      :page-sizes="[10, 20, 50]"
+                      layout="total, prev, pager, next"
+                      @size-change="handleOrderListSizeChange"
+                      @current-change="handleOrderListPageChange"
+                    />
+                 </div>
+                 <el-empty v-else description="暂无订单记录" :image-size="100" />
+              </el-tab-pane>
+              <el-tab-pane label="工单列表" name="4">
+                 <el-table :data="userTicketList" v-loading="ticketListLoading" stripe style="width: 100%">
+                    <el-table-column prop="work_id" label="工单ID" width="100" />
+                    <el-table-column prop="title" label="标题" min-width="150" show-overflow-tooltip />
+                    <el-table-column prop="status" label="状态" width="100">
+                      <template #default="{row}">
+                        <el-tag :type="getTicketStatusType(row.status)" size="small">{{ getTicketStatusText(row.status) }}</el-tag>
+                      </template>
+                    </el-table-column>
+                    <el-table-column prop="created_at" label="创建时间" width="160">
+                      <template #default="{row}">{{ formatDate(row.created_at) }}</template>
+                    </el-table-column>
+                    <el-table-column label="操作" width="80" fixed="right">
+                      <template #default="scope">
+                        <el-button type="primary" link size="small" @click="handleViewTicket(scope.row)">详情</el-button>
+                      </template>
+                    </el-table-column>
+                 </el-table>
+                 <div class="pagination-wrapper" v-if="ticketListTotal > 0">
+                    <el-pagination 
+                      v-model:current-page="ticketListPage"
+                      v-model:page-size="ticketListPageSize"
+                      :total="ticketListTotal"
+                      :page-sizes="[10, 20, 50]"
+                      layout="total, prev, pager, next"
+                      @size-change="handleTicketListSizeChange"
+                      @current-change="handleTicketListPageChange"
+                    />
+                 </div>
+                 <el-empty v-else description="暂无工单记录" :image-size="100" />
+              </el-tab-pane>
             </el-tabs>
           </el-card>
         </div>
       </div>
+
+      <!-- 余额管理区域 -->
+      <el-card class="balance-card" shadow="never" style="margin-top: 24px;">
+        <template #header>
+          <div class="card-header">
+            <span class="title"><el-icon><Wallet /></el-icon> 余额管理</span>
+            <el-button type="primary" size="small" @click="handleBalanceManage">前往余额管理</el-button>
+          </div>
+        </template>
+        <div class="balance-content">
+          <div class="balance-overview">
+            <div class="balance-item">
+              <div class="balance-label">账户余额</div>
+              <div class="balance-value primary">¥{{ (userBalance.balance / 100).toFixed(2) }}</div>
+            </div>
+            <div class="balance-item">
+              <div class="balance-label">冻结余额</div>
+              <div class="balance-value warning">¥{{ (userBalance.frozen_balance / 100).toFixed(2) }}</div>
+            </div>
+            <div class="balance-item">
+              <div class="balance-label">累计充值</div>
+              <div class="balance-value success">¥{{ (userBalance.total_recharge / 100).toFixed(2) }}</div>
+            </div>
+            <div class="balance-item">
+              <div class="balance-label">累计消费</div>
+              <div class="balance-value danger">¥{{ (userBalance.total_consume / 100).toFixed(2) }}</div>
+            </div>
+          </div>
+          <el-divider />
+          <div class="balance-actions">
+            <el-button type="success" plain @click="handleRecharge">充值</el-button>
+            <el-button type="warning" plain @click="handleDeduct">扣款</el-button>
+            <el-button type="info" plain @click="handleViewBalanceHistory">余额记录</el-button>
+          </div>
+        </div>
+      </el-card>
     </div>
 
     <!-- 编辑用户对话框 -->
-    <el-dialog v-model="editDialogVisible" title="编辑用户信息" width="500px" append-to-body destroy-on-close>
-      <el-form ref="editFormRef" :model="editForm" :rules="editRules" label-width="80px">
+    <el-dialog v-model="editDialogVisible" title="编辑用户信息" width="600px" append-to-body destroy-on-close>
+      <el-form ref="editFormRef" :model="editForm" :rules="editRules" label-width="100px">
         <el-form-item label="用户名" prop="UserName">
           <el-input v-model="editForm.UserName" placeholder="请输入用户名" />
         </el-form-item>
@@ -200,8 +301,20 @@
             <el-option label="女" value="false" />
           </el-select>
         </el-form-item>
-        <el-form-item label="推荐人ID">
-          <el-input-number v-model="editForm.RecommendUserId" :min="0" style="width: 100%" />
+        <el-form-item label="推荐人">
+          <div class="recommend-user-selector">
+            <div class="selected-user" v-if="recommendUserInfo.UserId">
+              <el-avatar :size="32" :src="recommendUserInfo.Avatar" />
+              <span class="user-name">{{ recommendUserInfo.UserName }}</span>
+              <span class="user-id">(ID: {{ recommendUserInfo.UserId }})</span>
+              <el-button type="danger" link size="small" @click="clearRecommendUser">
+                <el-icon><Close /></el-icon>
+              </el-button>
+            </div>
+            <el-button v-else type="primary" plain @click="showUserSelectorDialog = true">
+              <el-icon><User /></el-icon> 选择推荐人
+            </el-button>
+          </div>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -212,6 +325,13 @@
       </template>
     </el-dialog>
 
+    <!-- 用户选择器（推荐人选择） -->
+    <UserListSelector
+      v-model="showUserSelectorDialog"
+      :current-user-id="editForm.RecommendUserId"
+      @confirm="handleRecommendUserSelect"
+    />
+
     <!-- 头像选择对话框 -->
     <AvatarSelector
       v-model="showAvatarSelector"
@@ -375,19 +495,22 @@ import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { baseURL } from '@/utils/request'
 import AvatarSelector from '@/components/admin/AvatarSelector.vue'
+import UserListSelector from '@/components/admin/UserListSelector.vue'
 import { 
   ArrowLeft, Refresh, Edit as EditIcon, Delete, Wallet, Avatar, Lock, 
   UserFilled, Document, Clock, List, Switch, User, Camera, Upload, 
-  UploadFilled, Key, Monitor, Setting 
+  UploadFilled, Key, Monitor, Setting, Close 
 } from '@element-plus/icons-vue'
-import { getUserGroupList } from '@/api/admin/user'
-import { getFileDetail, getFileList, getFile, uploadFile } from '@/api/admin/file'
+import { getUserGroupList, getUserBalanceCount } from '@/api/admin/user'
+import { getFileDetail } from '@/api/admin/file'
 import { 
   getUserInfo, updateUserInfo, updateUserAvatar, updateUserPassword, 
   updateUserGroup, updateUserRealName, getUserLoginRecord, 
   getUserOperationRecord, mockUserLogin, deleteUser, updateUserAdmin 
 } from '@/api/admin/user'
 import { getAdminGroupList } from '@/api/admin/group'
+import { getOrderList } from '@/api/admin/order'
+import { getTickerList } from '@/api/ticket'
 
 const Edit = EditIcon
 const route = useRoute()
@@ -418,6 +541,28 @@ const operationHistoryTotal = ref(0)
 const operationHistoryPage = ref(1)
 const operationHistoryPageSize = ref(10)
 
+// 订单列表相关
+const userOrderList = ref([])
+const orderListLoading = ref(false)
+const orderListTotal = ref(0)
+const orderListPage = ref(1)
+const orderListPageSize = ref(10)
+
+// 工单列表相关
+const userTicketList = ref([])
+const ticketListLoading = ref(false)
+const ticketListTotal = ref(0)
+const ticketListPage = ref(1)
+const ticketListPageSize = ref(10)
+
+// 用户余额相关
+const userBalance = ref({
+  balance: 0,
+  frozen_balance: 0,
+  total_recharge: 0,
+  total_consume: 0
+})
+
 // 编辑用户相关
 const editDialogVisible = ref(false)
 const editForm = reactive({
@@ -455,6 +600,15 @@ const showAvatarSelector = ref(false)
 const selectedAvatarId = ref('')
 const currentAvatarUrl = ref('')
 
+// 推荐人选择相关
+const showUserSelectorDialog = ref(false)
+const recommendUserInfo = ref({
+  UserId: '',
+  UserName: '',
+  Avatar: ''
+})
+
+
 // 密码管理相关
 const passwordDialogVisible = ref(false)
 const passwordForm = reactive({
@@ -509,6 +663,10 @@ const handleTabClick = (tab) => {
     fetchLoginHistory()
   } else if (tab.props.name === '2') {
     fetchOperationHistory()
+  } else if (tab.props.name === '3') {
+    fetchUserOrderList()
+  } else if (tab.props.name === '4') {
+    fetchUserTicketList()
   }
 };
 
@@ -567,9 +725,51 @@ const handleEditUser = async () => {
   editForm.RecommendUserId = userInfo.value.RecommendUserId || ''
   editForm.CoverID = userInfo.value.CoverID || ''
   
+  // 初始化推荐人信息
+  if (userInfo.value.RecommendUserId) {
+    await fetchRecommendUserInfo(userInfo.value.RecommendUserId)
+  } else {
+    recommendUserInfo.value = { UserId: '', UserName: '', Avatar: '' }
+  }
+  
   editDialogVisible.value = true
 }
 
+// 获取推荐人信息
+const fetchRecommendUserInfo = async (userId) => {
+  try {
+    const res = await getUserInfo({ user_id: userId })
+    if (res.data.code === 200) {
+      const user = res.data.data
+      recommendUserInfo.value = {
+        UserId: user.UserId || user.user_id,
+        UserName: user.UserName || user.user_name,
+        Avatar: user.Avatar || user.cover || ''
+      }
+    }
+  } catch (error) {
+    console.error('获取推荐人信息失败:', error)
+  }
+}
+
+
+// 推荐人选择处理
+const handleRecommendUserSelect = (user) => {
+  recommendUserInfo.value = {
+    UserId: user.user_id || user.UserId,
+    UserName: user.user_name || user.UserName,
+    Avatar: user.cover || user.Avatar || ''
+  }
+  editForm.RecommendUserId = user.user_id || user.UserId
+}
+
+// 清除推荐人
+const clearRecommendUser = () => {
+  recommendUserInfo.value = { UserId: '', UserName: '', Avatar: '' }
+  editForm.RecommendUserId = ''
+}
+
+
 // 提交编辑表单
 const submitEditForm = async () => {
   try {
@@ -729,6 +929,144 @@ const handleDeleteOperationRecord = async (record) => {
   ElMessage.info('功能开发中')
 }
 
+// 获取用户订单列表
+const fetchUserOrderList = async () => {
+  if (!route.query.user_id) return
+  orderListLoading.value = true
+  try {
+    const res = await getOrderList({ 
+      user_id: route.query.user_id, 
+      page: orderListPage.value, 
+      count: orderListPageSize.value 
+    })
+    if (res.data.code === 200) {
+      userOrderList.value = res.data.data.data || []
+      orderListTotal.value = res.data.data.all_count || 0
+    }
+  } catch (error) {
+    ElMessage.error('获取订单列表失败')
+  } finally {
+    orderListLoading.value = false
+  }
+}
+
+const handleOrderListSizeChange = (size) => {
+  orderListPageSize.value = size
+  orderListPage.value = 1
+  fetchUserOrderList()
+}
+
+const handleOrderListPageChange = (page) => {
+  orderListPage.value = page
+  fetchUserOrderList()
+}
+
+// 获取用户工单列表
+const fetchUserTicketList = async () => {
+  if (!route.query.user_id) return
+  ticketListLoading.value = true
+  try {
+    const res = await getTickerList(ticketListPageSize.value, ticketListPage.value, undefined, undefined, undefined, route.query.user_id)
+    if (res.code === 200) {
+      userTicketList.value = res.data.data || []
+      ticketListTotal.value = res.data.all_count || 0
+    }
+  } catch (error) {
+    ElMessage.error('获取工单列表失败')
+  } finally {
+    ticketListLoading.value = false
+  }
+}
+
+const handleTicketListSizeChange = (size) => {
+  ticketListPageSize.value = size
+  ticketListPage.value = 1
+  fetchUserTicketList()
+}
+
+const handleTicketListPageChange = (page) => {
+  ticketListPage.value = page
+  fetchUserTicketList()
+}
+
+// 获取用户余额信息
+const fetchUserBalance = async () => {
+  if (!route.query.user_id) return
+  try {
+    const res = await getUserBalanceCount({ user_id: route.query.user_id })
+    if (res.data.code === 200) {
+      userBalance.value = {
+        balance: res.data.data.balance || 0,
+        frozen_balance: res.data.data.frozen_balance || 0,
+        total_recharge: res.data.data.total_recharge || 0,
+        total_consume: res.data.data.total_consume || 0
+      }
+    }
+  } catch (error) {
+    console.error('获取用户余额失败:', error)
+  }
+}
+
+// 订单状态
+const getOrderStatusText = (status) => {
+  const map = { 0: '待支付', 1: '已支付', 2: '已取消', 3: '已退款', 4: '已完成' }
+  return map[status] || '未知'
+}
+
+const getOrderStatusType = (status) => {
+  const map = { 0: 'warning', 1: 'success', 2: 'info', 3: 'danger', 4: 'success' }
+  return map[status] || 'info'
+}
+
+// 工单状态
+const getTicketStatusText = (status) => {
+  const map = { 0: '待处理', 1: '处理中', 2: '已回复', 3: '已关闭' }
+  return map[status] || '未知'
+}
+
+const getTicketStatusType = (status) => {
+  const map = { 0: 'warning', 1: 'primary', 2: 'success', 3: 'info' }
+  return map[status] || 'info'
+}
+
+// 查看订单详情
+const handleViewOrder = (row) => {
+  router.push({
+    path: '/order/list',
+    query: { order_id: row.order_id }
+  })
+}
+
+// 查看工单详情
+const handleViewTicket = (row) => {
+  router.push({
+    path: '/ticket/detail',
+    query: { work_id: row.work_id }
+  })
+}
+
+// 余额操作
+const handleRecharge = () => {
+  router.push({
+    path: '/user/balance',
+    query: { user_id: userInfo.value.UserId, action: 'recharge' }
+  })
+}
+
+const handleDeduct = () => {
+  router.push({
+    path: '/user/balance',
+    query: { user_id: userInfo.value.UserId, action: 'deduct' }
+  })
+}
+
+const handleViewBalanceHistory = () => {
+  router.push({
+    path: '/user/balance',
+    query: { user_id: userInfo.value.UserId }
+  })
+}
+
 // 删除用户
 const handleDeleteUser = async () => {
   try {
@@ -958,8 +1296,11 @@ const loadUserData = async () => {
     return;
   }
   await fetchUserInfo();
+  await fetchUserBalance();
   await fetchLoginHistory();
   await fetchOperationHistory();
+  await fetchUserOrderList();
+  await fetchUserTicketList();
 }
 
 // 初始化
@@ -1201,6 +1542,32 @@ onActivated(() => {
   font-size: 13px;
 }
 
+/* 推荐人选择器 */
+.recommend-user-selector {
+  width: 100%;
+}
+
+.selected-user {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  background: #f5f7fa;
+  border-radius: 6px;
+  border: 1px solid #e4e7ed;
+}
+
+.selected-user .user-name {
+  font-weight: 500;
+  color: #303133;
+}
+
+.selected-user .user-id {
+  color: #909399;
+  font-size: 12px;
+}
+
+
 /* Token Dialog */
 .token-container {
   padding: 20px 0;
@@ -1223,6 +1590,78 @@ onActivated(() => {
   color: #909399;
 }
 
+/* Balance Card */
+.balance-card {
+  border-radius: 12px;
+  border: none;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
+}
+
+.balance-card .card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.balance-card .card-header .title {
+  font-weight: 600;
+  font-size: 16px;
+  color: #303133;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.balance-content {
+  padding: 10px 0;
+}
+
+.balance-overview {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+
+.balance-item {
+  text-align: center;
+  padding: 16px;
+  background: #f9fafc;
+  border-radius: 8px;
+}
+
+.balance-label {
+  font-size: 13px;
+  color: #909399;
+  margin-bottom: 8px;
+}
+
+.balance-value {
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.balance-value.primary {
+  color: #409eff;
+}
+
+.balance-value.warning {
+  color: #e6a23c;
+}
+
+.balance-value.success {
+  color: #67c23a;
+}
+
+.balance-value.danger {
+  color: #f56c6c;
+}
+
+.balance-actions {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+}
+
 /* Responsive */
 @media (max-width: 1024px) {
   .detail-grid {
@@ -1242,5 +1681,15 @@ onActivated(() => {
     padding: 16px;
     border-radius: 8px;
   }
+  
+  .balance-overview {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 600px) {
+  .balance-overview {
+    grid-template-columns: 1fr;
+  }
 }
 </style>