code review：用户详情

2025-11-04 04:08:44 +08:00 · 2023-08-23 01:41:25 +08:00
parent 746bf864d9
commit 55772cbba0
12 changed files with 126 additions and 79 deletions
--- a/src/views/member/user/components/account-info.vue
+++ b/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>
-      </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'
 })
--- a/src/views/member/user/components/address-list.vue
+++ b/src/views/member/user/components/address-list.vue
@@ -6,6 +6,7 @@ export default defineComponent({
 })
 </script>

+<!-- TODO @梦：可以读 address 表 -->
 <template>
  <div>收货地址列表</div>
 </template>
--- a/src/views/member/user/components/balance-list.vue
+++ b/src/views/member/user/components/balance-list.vue
@@ -6,6 +6,7 @@ export default defineComponent({
 })
 </script>

+<!-- TODO @芋艿：未来实现，等周建的 -->
 <template>
  <div>余额列表</div>
 </template>
--- a/src/views/member/user/components/card-title.vue
+++ b/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,
--- a/src/views/member/user/components/growth-list.vue
+++ b/src/views/member/user/components/growth-list.vue
@@ -6,6 +6,7 @@ export default defineComponent({
 })
 </script>

+<!-- TODO @梦：可以读取 member_experience_log 表 -->
 <template>
  <div>成长值列表</div>
 </template>
--- a/src/views/member/user/components/point-list.vue
+++ b/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
--- a/src/views/member/user/components/sign-list.vue
+++ b/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
--- a/src/views/member/user/detail/index.vue
+++ b/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)"
-                >编辑</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: ':';
 }