123 lines
4.4 KiB
Vue
123 lines
4.4 KiB
Vue
<template>
|
|
<div>
|
|
<el-card class="!border-none" shadow="never">
|
|
<el-page-header content="用户详情" @back="$router.back()" />
|
|
</el-card>
|
|
<el-card class="mt-4 !border-none" header="基本资料" shadow="never">
|
|
<el-form ref="formRef" class="ls-form" :model="formData" label-width="120px">
|
|
<div class="bg-page py-5 pl-20 mb-10">
|
|
<div class="mb-3 text-tx-regular">用户头像</div>
|
|
<el-avatar :src="formData.avatar" :size="58" />
|
|
</div>
|
|
<el-form-item label="用户编号："> {{ formData.sn }} </el-form-item>
|
|
<el-form-item label="用户昵称：">
|
|
{{ formData.nickname }}
|
|
</el-form-item>
|
|
<el-form-item label="账号：">
|
|
{{ formData.username }}
|
|
<popover-input class="ml-[10px]" @confirm="handleEdit($event, 'username')">
|
|
<el-button type="primary" link v-perms="['user:edit']">
|
|
<icon name="el-icon-EditPen" />
|
|
</el-button>
|
|
</popover-input>
|
|
</el-form-item>
|
|
<el-form-item label="真实姓名：">
|
|
{{ formData.realName || '-' }}
|
|
<popover-input class="ml-[10px]" @confirm="handleEdit($event, 'realName')">
|
|
<el-button type="primary" link v-perms="['user:edit']">
|
|
<icon name="el-icon-EditPen" />
|
|
</el-button>
|
|
</popover-input>
|
|
</el-form-item>
|
|
<el-form-item label="性别：">
|
|
{{ formData.sex }}
|
|
<popover-input
|
|
class="ml-[10px]"
|
|
type="select"
|
|
:options="[
|
|
{
|
|
label: '未知',
|
|
value: 0
|
|
},
|
|
{
|
|
label: '男',
|
|
value: 1
|
|
},
|
|
{
|
|
label: '女',
|
|
value: 0
|
|
}
|
|
]"
|
|
@confirm="handleEdit($event, 'sex')"
|
|
>
|
|
<el-button type="primary" link v-perms="['user:edit']">
|
|
<icon name="el-icon-EditPen" />
|
|
</el-button>
|
|
</popover-input>
|
|
</el-form-item>
|
|
<el-form-item label="联系电话：">
|
|
{{ formData.mobile || '-' }}
|
|
<popover-input
|
|
class="ml-[10px]"
|
|
type="number"
|
|
@confirm="handleEdit($event, 'mobile')"
|
|
>
|
|
<el-button type="primary" link v-perms="['user:edit']">
|
|
<icon name="el-icon-EditPen" />
|
|
</el-button>
|
|
</popover-input>
|
|
</el-form-item>
|
|
<el-form-item label="注册来源："> {{ formData.channel }} </el-form-item>
|
|
<el-form-item label="注册时间："> {{ formData.createTime }} </el-form-item>
|
|
<el-form-item label="最近登录时间："> {{ formData.lastLoginTime }} </el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import type { FormInstance } from 'element-plus'
|
|
import { getUserDetail, userEdit } from '@/api/consumer'
|
|
import feedback from '@/utils/feedback'
|
|
|
|
const route = useRoute()
|
|
const formData = reactive({
|
|
avatar: '',
|
|
channel: '',
|
|
createTime: '',
|
|
lastLoginIp: '',
|
|
lastLoginTime: '',
|
|
mobile: '',
|
|
nickname: '',
|
|
realName: 0,
|
|
sex: 0,
|
|
sn: '',
|
|
username: ''
|
|
})
|
|
|
|
const formRef = shallowRef<FormInstance>()
|
|
|
|
const getDetails = async () => {
|
|
const data = await getUserDetail({
|
|
id: route.query.id
|
|
})
|
|
Object.keys(formData).forEach((key) => {
|
|
//@ts-ignore
|
|
formData[key] = data[key]
|
|
})
|
|
}
|
|
|
|
const handleEdit = async (value: string, field: string) => {
|
|
if (!value) return
|
|
await userEdit({
|
|
id: route.query.id,
|
|
field,
|
|
value
|
|
})
|
|
feedback.msgSuccess('编辑成功')
|
|
getDetails()
|
|
}
|
|
|
|
getDetails()
|
|
</script>
|