|
@@ -0,0 +1,217 @@
|
|
|
|
+<template>
|
|
|
|
+ <div v-loading="loading">
|
|
|
|
+ <el-row :gutter="10" class="detail-info-warp">
|
|
|
|
+ <el-col :span="14" class="detail-info-item">
|
|
|
|
+ <el-card shadow="never">
|
|
|
|
+ <template #header>
|
|
|
|
+ <div class="card-header">
|
|
|
|
+ <CardTitle title="基本信息" />
|
|
|
|
+ <el-button
|
|
|
|
+ v-if="userInfo.id"
|
|
|
|
+ type="primary"
|
|
|
|
+ text
|
|
|
|
+ @click="openForm('update', userInfo.id)"
|
|
|
|
+ >编辑</el-button
|
|
|
|
+ >
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <el-row>
|
|
|
|
+ <el-col :span="4">
|
|
|
|
+ <ElAvatar shape="square" :size="140" :src="userInfo.avatar || undefined" />
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="20">
|
|
|
|
+ <el-descriptions :column="2">
|
|
|
|
+ <el-descriptions-item>
|
|
|
|
+ <template #label>
|
|
|
|
+ <div class="cell-item">
|
|
|
|
+ <Icon icon="ep:user" />
|
|
|
|
+ 用户名
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ {{ userInfo.name || '空' }}
|
|
|
|
+ </el-descriptions-item>
|
|
|
|
+ <el-descriptions-item>
|
|
|
|
+ <template #label>
|
|
|
|
+ <div class="cell-item">
|
|
|
|
+ <Icon icon="ep:user" />
|
|
|
|
+ 昵称
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ {{ userInfo.nickname }}</el-descriptions-item
|
|
|
|
+ >
|
|
|
|
+ <el-descriptions-item label="手机号">
|
|
|
|
+ <template #label>
|
|
|
|
+ <div class="cell-item">
|
|
|
|
+ <Icon icon="ep:phone" />
|
|
|
|
+ 手机号
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ {{ userInfo.mobile }}</el-descriptions-item
|
|
|
|
+ >
|
|
|
|
+ <el-descriptions-item>
|
|
|
|
+ <template #label>
|
|
|
|
+ <div class="cell-item">
|
|
|
|
+ <Icon icon="fa:mars-double" />
|
|
|
|
+ 性别
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="userInfo.sex" />
|
|
|
|
+ </el-descriptions-item>
|
|
|
|
+ <el-descriptions-item>
|
|
|
|
+ <template #label>
|
|
|
|
+ <div class="cell-item">
|
|
|
|
+ <Icon icon="ep:location" />
|
|
|
|
+ 所在地
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ {{ userInfo.areaId }}
|
|
|
|
+ </el-descriptions-item>
|
|
|
|
+ <el-descriptions-item>
|
|
|
|
+ <template #label>
|
|
|
|
+ <div class="cell-item">
|
|
|
|
+ <Icon icon="ep:position" />
|
|
|
|
+ 注册IP
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ {{ userInfo.registerIp }}
|
|
|
|
+ </el-descriptions-item>
|
|
|
|
+ <el-descriptions-item>
|
|
|
|
+ <template #label>
|
|
|
|
+ <div class="cell-item">
|
|
|
|
+ <Icon icon="fa:birthday-cake" />
|
|
|
|
+ 生日
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ {{ userInfo.birthday ? formatDate(userInfo.birthday) : '空' }}
|
|
|
|
+ </el-descriptions-item>
|
|
|
|
+ <el-descriptions-item>
|
|
|
|
+ <template #label>
|
|
|
|
+ <div class="cell-item">
|
|
|
|
+ <Icon icon="ep:calendar" />
|
|
|
|
+ 注册时间
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ {{ userInfo.createTime ? formatDate(userInfo.createTime) : '空' }}
|
|
|
|
+ </el-descriptions-item>
|
|
|
|
+ <el-descriptions-item>
|
|
|
|
+ <template #label>
|
|
|
|
+ <div class="cell-item">
|
|
|
|
+ <Icon icon="ep:calendar" />
|
|
|
|
+ 最后登录时间
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ {{ userInfo.loginDate ? formatDate(userInfo.loginDate) : '空' }}
|
|
|
|
+ </el-descriptions-item>
|
|
|
|
+ </el-descriptions>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </el-card>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="10" class="detail-info-item">
|
|
|
|
+ <el-card shadow="never">
|
|
|
|
+ <template #header>
|
|
|
|
+ <CardTitle title="账户信息(WIP)" />
|
|
|
|
+ </template>
|
|
|
|
+ <AccountInfo />
|
|
|
|
+ </el-card>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-card header="账户明细" style="width: 100%; margin-top: 20px" shadow="never">
|
|
|
|
+ <template #header>
|
|
|
|
+ <CardTitle title="账户明细" />
|
|
|
|
+ </template>
|
|
|
|
+ <el-tabs v-model="activeName" class="demo-tabs">
|
|
|
|
+ <el-tab-pane label="积分" name="point">
|
|
|
|
+ <PointList v-if="userInfo.id" :member-id="userInfo.id" />
|
|
|
|
+ </el-tab-pane>
|
|
|
|
+ <el-tab-pane label="签到" name="sign">
|
|
|
|
+ <SignList v-if="userInfo.id" :member-id="userInfo.id" />
|
|
|
|
+ </el-tab-pane>
|
|
|
|
+ <el-tab-pane label="成长值" name="third">成长值(WIP)</el-tab-pane>
|
|
|
|
+ <el-tab-pane label="余额" name="fourth">余额(WIP)</el-tab-pane>
|
|
|
|
+ </el-tabs>
|
|
|
|
+ </el-card>
|
|
|
|
+ </el-row>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 表单弹窗:添加/修改 -->
|
|
|
|
+ <UserForm ref="formRef" @success="getUserData(userInfo.id)" />
|
|
|
|
+</template>
|
|
|
|
+<script setup lang="ts">
|
|
|
|
+import { ref } from 'vue'
|
|
|
|
+import PointList from '@/views/member/user/components/point-list.vue'
|
|
|
|
+import SignList from '@/views/member/user/components/sign-list.vue'
|
|
|
|
+import CardTitle from '@/views/member/user/components/card-title.vue'
|
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
|
+import { getUser, UserBaseInfoVO } from '@/api/member/user'
|
|
|
|
+import { formatDate } from '@/utils/formatTime'
|
|
|
|
+import { DICT_TYPE } from '@/utils/dict'
|
|
|
|
+import UserForm from '@/views/member/user/UserForm.vue'
|
|
|
|
+import AccountInfo from '@/views/member/user/components/account-info.vue'
|
|
|
|
+defineOptions({ name: 'MemberDetail' })
|
|
|
|
+
|
|
|
|
+const activeName = ref('point')
|
|
|
|
+const loading = ref(true)
|
|
|
|
+/** 添加/修改操作 */
|
|
|
|
+const formRef = ref()
|
|
|
|
+const openForm = (type: string, id?: number) => {
|
|
|
|
+ formRef.value.open(type, id)
|
|
|
|
+}
|
|
|
|
+let userInfo = ref<UserBaseInfoVO>({
|
|
|
|
+ areaId: undefined,
|
|
|
|
+ avatar: undefined,
|
|
|
|
+ birthday: undefined,
|
|
|
|
+ createTime: undefined,
|
|
|
|
+ id: undefined,
|
|
|
|
+ loginDate: undefined,
|
|
|
|
+ loginIp: '',
|
|
|
|
+ mark: '',
|
|
|
|
+ mobile: '',
|
|
|
|
+ name: '',
|
|
|
|
+ nickname: '',
|
|
|
|
+ password: null,
|
|
|
|
+ registerIp: undefined,
|
|
|
|
+ sex: 0,
|
|
|
|
+ status: 0
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+const getUserData = async (id: any) => {
|
|
|
|
+ loading.value = true
|
|
|
|
+ try {
|
|
|
|
+ // userInfo.value = Object.assign(userInfo, await getUser(parseInt(id as string)))
|
|
|
|
+ userInfo.value = await getUser(parseInt(id as string))
|
|
|
|
+ } finally {
|
|
|
|
+ loading.value = false
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+const route = useRoute()
|
|
|
|
+let router = useRouter()
|
|
|
|
+const { member_id } = route.query
|
|
|
|
+onMounted(() => {
|
|
|
|
+ if (!member_id) {
|
|
|
|
+ ElMessage.warning('会员id 未携带!')
|
|
|
|
+ router.back()
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ getUserData(member_id)
|
|
|
|
+})
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped lang="css">
|
|
|
|
+.detail-info-item:first-child {
|
|
|
|
+ padding-left: 0 !important;
|
|
|
|
+}
|
|
|
|
+/* first-child 不生效有没有大佬给看下q.q */
|
|
|
|
+.detail-info-item:nth-child(2) {
|
|
|
|
+ padding-right: 0 !important;
|
|
|
|
+}
|
|
|
|
+.card-header {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+}
|
|
|
|
+.cell-item {
|
|
|
|
+ display: inline;
|
|
|
|
+}
|
|
|
|
+.cell-item::after {
|
|
|
|
+ content: ':';
|
|
|
|
+}
|
|
|
|
+</style>
|