root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

code review：用户详情

Browse Source 
(cherry picked from commit 55772cbba0)
This commit is contained in:
YunaiV 2023-08-23 01:41:25 +08:00 committed by shizhong
parent 46ab58ddf0
commit 92423dc00b
12 changed files with 126 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/api/member/point/record/index.ts
View File

@ -8,20 +8,9 @@ export interface RecordVO {
description: string
point: number
totalPoint: number
status: number
userId: number
freezingTime: Date
thawingTime: Date
createDate: Date
}
export interface RecordQueryVO {
bizType: string | null | undefined
title: string | null | undefined
pageNo: number
pageSize: number
userId: number | null | undefined
createDate: string[]
}
// 查询用户积分记录列表
export const getRecordPage = async (params) => {

9
src/api/member/signin/record/index.ts
View File

@ -6,15 +6,6 @@ export interface SignInRecordVO {
day: number
point: number
}
export interface SignInRecordQueryVO {
pageNo: number
pageSize: number
userId?: number
nickname: number | undefined | null
day?: number | null | undefined
point?: number | null | undefined
createTime: string[] | null | undefined
}
// 查询用户签到积分列表
export const getSignInRecordPage = async (params) => {

3
src/api/member/user/index.ts
View File

@ -17,6 +17,8 @@ export interface UserVO {
mark: string
createTime: Date
}
// TODO @梦：和 UserVO 搞成一个把。
export interface UserBaseInfoVO {
id: number | undefined | null
mobile: string
@ -34,6 +36,7 @@ export interface UserBaseInfoVO {
mark: string | null | undefined
createTime: Date | null | undefined
}
// 查询会员用户列表
export const getUserPage = async (params) => {
return await request.get({ url: `/member/user/page`, params })

20
src/router/modules/remaining.ts
View File

@ -347,7 +347,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
]
},
{
path: '/property',
path: '/property', // TODO @puhui999：这里的 path 有问题，应该是 /product/property
component: Layout,
name: 'Property',
meta: {
@ -427,6 +427,24 @@ const remainingRouter: AppRouteRecordRaw[] = [
}
]
},
{
path: '/member',
component: Layout,
name: 'member',
meta: { hidden: true },
children: [
{
path: 'user/detail',
name: 'MemberUserDetail',
meta: {
title: '会员详情',
noCache: true,
hidden: true
},
component: () => import('@/views/member/user/detail/index.vue')
}
]
},
{
path: '/pay',
component: Layout,

48
src/views/member/user/components/account-info.vue
View File

@ -1,20 +1,10 @@
<template>
<el-descriptions :column="2">
<!-- TODO @梦：要不 icon 也给加下？ -->
<!-- TODO @梦：积分、成长值、等级，已经可以读取了，可以看下 -->
<el-descriptions-item>
<template #label>
<div class="cell-item"> 储值余额 </div>
</template>
{{ 0 }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item"> 现金余额 </div>
</template>
{{ 0 }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item"> 积分 </div>
<div class="cell-item"> 等级 </div>
</template>
{{ 0 }}
</el-descriptions-item>
@ -24,11 +14,39 @@
</template>
{{ 0 }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item"> 当前积分 </div>
</template>
{{ 0 }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item"> 总积分 </div>
</template>
{{ 0 }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item"> 当前余额 </div>
</template>
{{ 0 }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item"> 支出金额 </div>
</template>
{{ 0 }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item"> 充值金额 </div>
</template>
{{ 0 }}
</el-descriptions-item>
</el-descriptions>
</template>
<script lang="ts" setup>
import { defineComponent } from 'vue'
defineComponent({
name: 'AccountInfo'
})

1
src/views/member/user/components/address-list.vue
View File

@ -6,6 +6,7 @@ export default defineComponent({
})
</script>
<!-- TODO @梦：可以读 address 表 -->
<template>
<div>收货地址列表</div>
</template>

1
src/views/member/user/components/balance-list.vue
View File

@ -6,6 +6,7 @@ export default defineComponent({
})
</script>
<!-- TODO @芋艿：未来实现，等周建的 -->
<template>
<div>余额列表</div>
</template>

2
src/views/member/user/components/card-title.vue
View File

@ -1,8 +1,8 @@
<script lang="ts" setup>
import { defineComponent } from 'vue'
defineComponent({
name: 'CardTitle'
})
const { title } = defineProps({
title: {
type: String,

1
src/views/member/user/components/growth-list.vue
View File

@ -6,6 +6,7 @@ export default defineComponent({
})
</script>
<!-- TODO @梦：可以读取 member_experience_log 表 -->
<template>
<div>成长值列表</div>
</template>

7
src/views/member/user/components/point-list.vue
View File

@ -100,13 +100,13 @@
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as RecordApi from '@/api//member/point/record'
import { RecordQueryVO } from '@/api//member/point/record'
defineOptions({ name: 'PointList' })
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive<RecordQueryVO>({
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
bizType: undefined,
@ -139,12 +139,15 @@ const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
// TODO @梦:改成 userId 哈
const { memberId } = defineProps({
memberId: {
type: Number,
required: true
}
})
/** 初始化 **/
onMounted(() => {
queryParams.userId = memberId

6
src/views/member/user/components/sign-list.vue
View File

@ -83,14 +83,13 @@
<script lang="ts" setup>
import { dateFormatter } from '@/utils/formatTime'
import * as SignInRecordApi from '@/api/member/signin/record'
import { SignInRecordQueryVO } from '@/api/member/signin/record'
defineOptions({ name: 'SignList' })
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive<SignInRecordQueryVO>({
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
nickname: null,
@ -122,12 +121,15 @@ const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
// TODO @梦:改成 userId 哈
const { memberId } = defineProps({
memberId: {
type: Number,
required: true
}
})
/** 初始化 **/
onMounted(() => {
queryParams.userId = memberId

96
src/views/member/user/detail/index.vue
View File

@ -1,23 +1,27 @@
<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">
<!-- TODO @梦：如果不要小蓝线，是不是直接用 el-card 自带的 title 即可？ -->
<CardTitle title="基本信息" />
<el-button
v-if="userInfo.id"
v-if="user.id"
type="primary"
size="small"
text
@click="openForm('update', userInfo.id)"
>编辑</el-button
@click="openForm('update', user.id)"
>
编辑
</el-button>
</div>
</template>
<el-row>
<el-col :span="4">
<ElAvatar shape="square" :size="140" :src="userInfo.avatar || undefined" />
<ElAvatar shape="square" :size="140" :src="user.avatar || undefined" />
</el-col>
<el-col :span="20">
<el-descriptions :column="2">
@ -28,7 +32,7 @@
用户名
</div>
</template>
{{ userInfo.name || '空' }}
{{ user.name || '空' }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
@ -37,8 +41,8 @@
昵称
</div>
</template>
{{ userInfo.nickname }}</el-descriptions-item
>
{{ user.nickname }}
</el-descriptions-item>
<el-descriptions-item label="手机号">
<template #label>
<div class="cell-item">
@ -46,8 +50,8 @@
手机号
</div>
</template>
{{ userInfo.mobile }}</el-descriptions-item
>
{{ user.mobile }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item">
@ -55,7 +59,7 @@
性别
</div>
</template>
<dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="userInfo.sex" />
<dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="user.sex" />
</el-descriptions-item>
<el-descriptions-item>
<template #label>
@ -64,16 +68,17 @@
所在地
</div>
</template>
{{ userInfo.areaId }}
<!-- TODO @梦：这里后端返回的时候，要返回 areaName -->
{{ user.areaId }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item">
<Icon icon="ep:position" />
注册IP
注册 IP
</div>
</template>
{{ userInfo.registerIp }}
{{ user.registerIp }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
@ -82,7 +87,7 @@
生日
</div>
</template>
{{ userInfo.birthday ? formatDate(userInfo.birthday) : '空' }}
{{ user.birthday ? formatDate(user.birthday) : '空' }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
@ -91,7 +96,7 @@
注册时间
</div>
</template>
{{ userInfo.createTime ? formatDate(userInfo.createTime) : '空' }}
{{ user.createTime ? formatDate(user.createTime) : '空' }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
@ -100,31 +105,36 @@
最后登录时间
</div>
</template>
{{ userInfo.loginDate ? formatDate(userInfo.loginDate) : '空' }}
{{ user.loginDate ? formatDate(user.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)" />
<CardTitle title="账户信息" />
</template>
<AccountInfo />
</el-card>
</el-col>
<!-- 下边：账户明细 -->
<!-- TODO 芋艿：【收货地址】【订单管理】【售后管理】【收藏记录】【优惠劵】 -->
<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-tabs v-model="activeName">
<el-tab-pane label="积分" name="point">
<PointList v-if="userInfo.id" :member-id="userInfo.id" />
<PointList v-if="user.id" :member-id="user.id" />
</el-tab-pane>
<el-tab-pane label="签到" name="sign">
<SignList v-if="userInfo.id" :member-id="userInfo.id" />
<SignList v-if="user.id" :member-id="user.id" />
</el-tab-pane>
<el-tab-pane label="成长值" name="third">成长值(WIP)</el-tab-pane>
<el-tab-pane label="余额" name="fourth">余额(WIP)</el-tab-pane>
@ -132,30 +142,28 @@
</el-card>
</el-row>
</div>
<!-- 表单弹窗：添加/修改 -->
<UserForm ref="formRef" @success="getUserData(userInfo.id)" />
<UserForm ref="formRef" @success="getUserData(user.id)" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
// TODO @梦：组件对应的 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'
// TODO @梦：参考别的模块，UserApi 这样去引用
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'
// TODO @梦：把用户信息，也抽成一个组件，类似 AccountInfo
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>({
const activeName = ref('point') // 账户明细 选中的 tabs
const loading = ref(true) // 加载中
let user = ref<UserBaseInfoVO>({
areaId: undefined,
avatar: undefined,
birthday: undefined,
@ -173,29 +181,40 @@ let userInfo = ref<UserBaseInfoVO>({
status: 0
})
const getUserData = async (id: any) => {
/** 获得用户 */
const getUserData = async (id: number) => {
loading.value = true
try {
// userInfo.value = Object.assign(userInfo, await getUser(parseInt(id as string)))
userInfo.value = await getUser(parseInt(id as string))
user.value = await getUser(id)
} finally {
loading.value = false
}
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 初始化 */
const route = useRoute()
let router = useRouter()
const { member_id } = route.query
const router = useRouter()
// TODO @梦：改成 id 路径参数，而不是 query
// TODO @梦：会员列表，把【详情】按钮加上哈
const member_id = route.query.member_id as number
onMounted(() => {
if (!member_id) {
ElMessage.warning('会员id 未携带！')
// TODO
ElMessage.warning('参数错误，会员编号不能为空！')
router.back()
return
}
getUserData(member_id)
})
</script>
<style scoped lang="css">
/** TODO 这 3 个 css 貌似没用？ */
.detail-info-item:first-child {
padding-left: 0 !important;
}
@ -211,6 +230,7 @@ onMounted(() => {
.cell-item {
display: inline;
}
/** TODO 下面 css 貌似没啥用？ */
.cell-item::after {
content: ':';
}