用户详情

src/api/menduner/system/enterprise/userBind/index.ts

@@ -41,5 +41,25 @@ export const EnterpriseUserBindApi = {
   // 导出门墩儿-企业登录用户 Excel
   exportEnterpriseUserBind: async (params) => {
     return await request.download({ url: `/menduner/system/enterprise-user-bind/export-excel`, params })
+  },
+
+  // 获得企业登录用户
+  getEnterpriseUserDetails: async (id: string) => {
+    return await request.get({ url: `/menduner/system/enterprise-user-bind/get?id=${id}` })
+  },
+
+  // 获得企业用户账户信息
+  getEnterpriseUserAccount: async (userId: string, dataId: string) => {
+    return await request.get({ url: `/pay/currency/get?userId=${userId}&dataId=${dataId}` })
+  },
+
+  // 获得企业用户交易订单分页
+  getEnterpriseUserTradeOrderPage: async (params) => {
+    return await request.get({ url: `/menduner/system/trade/order/page`, params })
+  },
+
+  // 获得企业用户充值订单分页
+  getEnterpriseUserRechargeOrderPage: async (params) => {
+    return await request.get({ url: `/pay/currency-recharge/page`, params })
   }
 }

src/router/modules/remaining.ts

@@ -127,7 +127,6 @@ const remainingRouter: AppRouteRecordRaw[] = [
       }
     ]
   },
-
   {
     path: '/codegen',
     component: Layout,
@@ -473,6 +472,16 @@ const remainingRouter: AppRouteRecordRaw[] = [
           hidden: true
         },
         component: () => import('@/views/menduner/system/enterprise/message/details/index.vue')
+      },
+      {
+        path: 'enterprise/user/detail',
+        name: 'EnterpriseUserDetail',
+        meta: {
+          title: '用户详情',
+          noCache: true,
+          hidden: true
+        },
+        component: () => import('@/views/menduner/system/enterprise/userbind/details/index.vue')
       }
     ]
   },

src/views/menduner/system/enterprise/userbind/details/components/account.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <el-descriptions class="margin-top" :column="2" border>
+      <!-- <template #extra>
+        <el-button type="primary">Operation</el-button>
+      </template> -->
+    <el-descriptions-item label="用户类型">{{ info.userType === '1' ? '管理员' : '普通用户' }}</el-descriptions-item>
+    <el-descriptions-item label="创建时间">{{ formatDate(info.createTime) }}</el-descriptions-item>
+    <el-descriptions-item label="账户余额">{{ info.balance }}</el-descriptions-item>
+    <el-descriptions-item label="累计支出">{{ info.totalExpense }}</el-descriptions-item>
+    <el-descriptions-item label="累计充值">{{ info.totalRecharge }}</el-descriptions-item>
+    <el-descriptions-item label="冻结金额">{{ info.freezePrice }}</el-descriptions-item>
+  </el-descriptions>
+  </div>
+</template>
+
+<script setup>
+/* 账户详情 */
+defineOptions({ name: 'EnterpriseUserAccount'})
+import { EnterpriseUserBindApi } from '@/api/menduner/system/enterprise/userBind'
+import { formatDate } from '@/utils/formatTime'
+import { DICT_TYPE } from '@/utils/dict'
+
+const props = defineProps({
+  userId: String,
+  enterpriseId: String
+})
+
+const info = ref({})
+const getInfo = async () => {
+  const data = await EnterpriseUserBindApi.getEnterpriseUserAccount(props.userId, props.enterpriseId)
+  info.value = data
+}
+getInfo()
+</script>

src/views/menduner/system/enterprise/userbind/details/components/rechargeOrder.vue

@@ -0,0 +1,78 @@
+<template>
+  <el-table v-loading="loading" :data="tableData" :stripe="true" class="m-t-20px">
+    <el-table-column label="充值点数" align="center" prop="id">
+      <template #default="scope">
+        {{ payCalculation(scope.row.payPrice, true) }}
+      </template>
+    </el-table-column>
+    <el-table-column label="支付金额" align="center" prop="payPrice">
+      <template #default="scope">
+        {{ payCalculation(scope.row.payPrice) }}
+      </template>
+    </el-table-column>
+    <el-table-column label="支付渠道" align="center" prop="payChannelName" />
+    <el-table-column label="支付订单编号" align="center" prop="payOrderId" />
+    <el-table-column label="支付成功的外部订单号" align="center" prop="payOrderChannelOrderNo" />
+    <el-table-column label="是否已支付" align="center" prop="payStatus">
+      <template #default="scope">
+        {{ scope.row.payStatus ? "已支付" : "未支付"}}
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="订单支付时间"
+      align="center"
+      prop="payTime"
+      :formatter="dateFormatter"
+      width="180px"
+    />
+  </el-table>
+
+  <Pagination
+    :total="total"
+    v-model:page="queryParams.pageNo"
+    v-model:limit="queryParams.pageSize"
+    @pagination="getList"
+  />
+</template>
+
+<script setup>
+/* 充值订单 */
+defineOptions({ name: 'EnterpriseUserRechargeOrderList'})
+import { EnterpriseUserBindApi } from '@/api/menduner/system/enterprise/userBind'
+import { DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+
+const props = defineProps({
+  userId: String,
+  enterpriseId: String
+})
+
+const loading = ref(false)
+const tableData = ref([])
+const total = ref(0)
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userId: props.userId,
+  enterpriseId: props.enterpriseId
+})
+
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await EnterpriseUserBindApi.getEnterpriseUserRechargeOrderPage(queryParams)
+    tableData.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+getList()
+
+const payCalculation = (count, status) => {
+  if ((count - 0) === 0) return 0
+  if (!count) return ''
+  const Magnification = 1 / 100 
+  return status ? 10 * ((count - 0) * Magnification).toFixed(2) : ((count - 0) * Magnification).toFixed(2)
+}
+</script>

src/views/menduner/system/enterprise/userbind/details/components/tradingOrder.vue

@@ -0,0 +1,61 @@
+<template>
+  <el-table v-loading="loading" :data="tableData" :stripe="true" class="m-t-20px">
+    <el-table-column label="商品名称" align="center" prop="spuName" />
+    <el-table-column label="点数" align="center" prop="price" />
+    <el-table-column label="是否已支付" align="center" prop="payStatus">
+      <template #default="scope">
+        {{ scope.row.payStatus ? "已支付" : "未支付"}}
+      </template>
+    </el-table-column>
+    <el-table-column label="支付订单编号" align="center" prop="payOrderId" />
+    <el-table-column
+      label="订单支付时间"
+      align="center"
+      prop="payTime"
+      :formatter="dateFormatter"
+      width="180px"
+    />
+  </el-table>
+
+  <Pagination
+    :total="total"
+    v-model:page="queryParams.pageNo"
+    v-model:limit="queryParams.pageSize"
+    @pagination="getList"
+  />
+</template>
+
+<script setup>
+/* 交易订单 */
+defineOptions({ name: 'EnterpriseUserTradeOrderList'})
+import { EnterpriseUserBindApi } from '@/api/menduner/system/enterprise/userBind'
+import { DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+
+const props = defineProps({
+  userId: String,
+  enterpriseId: String
+})
+
+const loading = ref(false)
+const tableData = ref([])
+const total = ref(0)
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userId: props.userId,
+  enterpriseId: props.enterpriseId
+})
+
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await EnterpriseUserBindApi.getEnterpriseUserTradeOrderPage(queryParams)
+    tableData.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+getList()
+</script>

src/views/menduner/system/enterprise/userbind/details/components/user.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <el-descriptions class="margin-top" :column="2" border>
+      <!-- <template #extra>
+        <el-button type="primary">Operation</el-button>
+      </template> -->
+    <el-descriptions-item label="用户头像">
+      <el-image v-if="info.avatar" style="width: 100px; height: 100px" :src="info.avatar" fit="contain" hide-on-click-modal :preview-src-list="[info.avatar]"/>
+    </el-descriptions-item>
+    <el-descriptions-item label="用户名称">{{ info.name }}</el-descriptions-item>
+    <el-descriptions-item label="性别">
+      <dict-tag :type="DICT_TYPE.MENDUNER_SEX" :value="info.sex" />
+    </el-descriptions-item>
+    <el-descriptions-item label="联系电话">{{ info.phone }}</el-descriptions-item>
+    <el-descriptions-item label="邮箱">{{ info.email }}</el-descriptions-item>
+    <el-descriptions-item label="企业姓名">{{ info.enterpriseName }}</el-descriptions-item>
+    <el-descriptions-item label="岗位名称">{{ info.postName }}</el-descriptions-item>
+    <el-descriptions-item label="账号状态">
+      <dict-tag :type="DICT_TYPE.MENDUNER_STATUS" :value="info.status" />
+    </el-descriptions-item>
+    <el-descriptions-item label="用户类型">{{ info.userType === '1' ? '管理员' : '普通用户' }}</el-descriptions-item>
+    <el-descriptions-item label="最后登录IP">{{ info.loginIp }}</el-descriptions-item>
+    <el-descriptions-item label="最后登录时间">{{ formatDate(info.loginDate) }}</el-descriptions-item>
+  </el-descriptions>
+  </div>
+</template>
+
+<script setup>
+/* 企业用户详情 */
+defineOptions({ name: 'EnterpriseUserDetails'})
+import { EnterpriseUserBindApi } from '@/api/menduner/system/enterprise/userBind'
+import { formatDate } from '@/utils/formatTime'
+import { DICT_TYPE } from '@/utils/dict'
+
+const props = defineProps({
+  id: String
+})
+
+const info = ref({})
+const getInfo = async () => {
+  const data = await EnterpriseUserBindApi.getEnterpriseUserDetails(props.id)
+  info.value = data
+}
+getInfo()
+</script>

src/views/menduner/system/enterprise/userbind/details/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <el-card shadow="never">
+          <template #header>
+            <CardTitle title="企业用户详情" />
+          </template>
+          <User :id="id"/>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card shadow="never">
+          <template #header>
+            <CardTitle title="账户详情" />
+          </template>
+          <Account :user-id="userId" :enterprise-id="enterpriseId" />
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row class="m-t-20px">
+      <el-col :span="24">
+        <el-card shadow="never">
+          <el-tabs>
+            <el-tab-pane label="交易订单">
+              <TradeOrder :user-id="userId" :enterprise-id="enterpriseId" />
+            </el-tab-pane>
+            <el-tab-pane label="充值订单">
+              <RechargeOrder :user-id="userId" :enterprise-id="enterpriseId" />
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'EnterpriseDetails'})
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { ElMessage } from 'element-plus'
+import User from './components/user.vue'
+import Account from './components/account.vue'
+import TradeOrder from './components/tradingOrder.vue'
+import RechargeOrder from './components/rechargeOrder.vue'
+
+/** 初始化 */
+const { currentRoute } = useRouter() // 路由
+const { delView } = useTagsViewStore() // 视图操作
+const route = useRoute()
+const { id, enterpriseId, userId } = route.query
+onMounted(() => {
+  if (!id || !enterpriseId || !userId) {
+    ElMessage.warning('参数错误，用户编号不能为空！')
+    delView(unref(currentRoute))
+    return
+  }
+})
+</script>

src/views/menduner/system/enterprise/userbind/index.vue

@@ -60,38 +60,43 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="id" align="center" prop="id" />
-      <el-table-column label="企业id" align="center" prop="enterpriseId" />
-      <el-table-column label="用户id" align="center" prop="userId" />
+    <el-table v-loading="loading" :data="list" :stripe="true">
+      <el-table-column label="企业名称" align="center" prop="enterpriseName" />
+      <el-table-column label="姓名" align="center" prop="name" />
+      <el-table-column label="用户头像" align="center" prop="avatar">
+        <template #default="scope">
+          <el-image v-if="scope.row.avatar" style="width: 60px; height: 60px" :src="scope.row.avatar" fit="contain" />
+        </template>
+      </el-table-column>
+      <el-table-column label="性别" align="center" prop="sex">
+        <template #default="scope">
+          <dict-tag v-if="scope.row.sex !== '0'" :type="DICT_TYPE.MENDUNER_SEX" :value="scope.row.sex" />
+          <span v-else></span>
+        </template>
+      </el-table-column>
+      <el-table-column label="联系电话" align="center" prop="phone" />
+      <el-table-column label="邮箱" align="center" prop="email" />
       <el-table-column label="帐号状态" align="center" prop="status">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.MENDUNER_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
-      <el-table-column label="最后登录IP" align="center" prop="loginIp" />
-      <el-table-column
-        label="最后登录时间"
-        align="center"
-        prop="loginDate"
-        :formatter="dateFormatter"
-        width="180px"
-      />
       <el-table-column label="用户类型" align="center" prop="userType">
         <template #default="scope">
-          <dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
+          {{ scope.row.userType === '1' ? '管理员': '普通用户' }}
         </template>
       </el-table-column>
+      <el-table-column label="最后登录IP" align="center" prop="loginIp" />
       <el-table-column
-        label="创建时间"
+        label="最后登录时间"
         align="center"
-        prop="createTime"
+        prop="loginDate"
         :formatter="dateFormatter"
         width="180px"
       />
       <el-table-column label="操作" align="center">
         <template #default="scope">
-          <el-button
+          <!-- <el-button
             link
             type="primary"
             @click="openForm('update', scope.row.id)"
@@ -106,6 +111,13 @@
             v-hasPermi="['menduner:system:enterprise-user-bind:delete']"
           >
             删除
+          </el-button> -->
+          <el-button
+            link
+            type="primary"
+            @click="openDetail(scope.row.id, scope.row.enterpriseId, scope.row.userId)"
+          >
+            详情
           </el-button>
         </template>
       </el-table-column>
@@ -166,6 +178,12 @@ const handleQuery = () => {
   getList()
 }
 
+/** 打开企业详情 */
+const { push } = useRouter()
+const openDetail = (id: string, enterpriseId: string, userId: string) => {
+  push({ name: 'EnterpriseUserDetail', query: { id, enterpriseId, userId } })
+}
+
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value.resetFields()