code review：用户详情

src/api/member/point/record/index.ts

@@ -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) => {

src/api/member/signin/record/index.ts

@@ -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) => {

src/api/member/user/index.ts

@@ -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 })

src/router/modules/remaining.ts

@@ -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,

src/views/member/user/components/account-info.vue

@@ -1,20 +1,10 @@
 <template>
   <el-descriptions :column="2">
+    <!-- TODO @梦：要不 icon 也给加下？ -->
+    <!-- TODO @梦：积分、成长值、等级，已经可以读取了，可以看下 -->
     <el-descriptions-item>
       <template #label>
-        <div class="cell-item"> 储值余额 </div>
+        <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>
@@ -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'
 })

src/views/member/user/components/address-list.vue

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

src/views/member/user/components/balance-list.vue

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

src/views/member/user/components/card-title.vue

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

src/views/member/user/components/growth-list.vue

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

src/views/member/user/components/point-list.vue

@@ -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

src/views/member/user/components/sign-list.vue

@@ -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

src/views/member/user/detail/index.vue

@@ -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)"
+                @click="openForm('update', user.id)"
-                >编辑</el-button
               >
+                编辑
+              </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 activeName = ref('point') // 账户明细 选中的 tabs
-const loading = ref(true)
+const loading = ref(true) // 加载中
-/** 添加/修改操作 */
+let user = ref<UserBaseInfoVO>({
-const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
-}
-let userInfo = 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)))
+    user.value = await getUser(id)
-    userInfo.value = await getUser(parseInt(id as string))
   } 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 router = useRouter()
-const { member_id } = route.query
+// 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: ':';
 }