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

code review：用户详情

Browse Source
This commit is contained in:
YunaiV 2023-08-23 01:41:25 +08:00
parent 746bf864d9
commit 55772cbba0
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: ':';
}