!221 账户信息组件 增加等级、成长值和积分的显示

Merge pull request !221 from 风狗/dev

src/api/member/user/index.ts

@@ -16,6 +16,9 @@ export interface UserVO {
   status: number
   areaId: number | undefined
   areaName: string | undefined
+  levelName: string | null
+  point: number | undefined | null
+  experience: number | null | undefined
 }
 
 // 查询会员用户列表

src/assets/svgs/member_balance.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1693028338187" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22985" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M983.8 312.7C958 251.7 921 197 874 150c-47-47-101.8-83.9-162.7-109.7C648.2 13.5 581.1 0 512 0S375.8 13.5 312.7 40.2C251.7 66 197 102.9 150 150c-47 47-83.9 101.8-109.7 162.7C13.5 375.8 0 442.9 0 512s13.5 136.2 40.2 199.3C66 772.3 102.9 827 150 874c47 47 101.8 83.9 162.7 109.7 63.1 26.7 130.2 40.2 199.3 40.2s136.2-13.5 199.3-40.2C772.3 958 827 921 874 874c47-47 83.9-101.8 109.7-162.7 26.7-63.1 40.2-130.2 40.2-199.3s-13.4-136.2-40.1-199.3z m-55.3 375.2c-22.8 53.8-55.4 102.2-96.9 143.7s-89.9 74.1-143.7 96.9C632.2 952.1 573 964 512 964s-120.2-11.9-175.9-35.5c-53.8-22.8-102.2-55.4-143.7-96.9s-74.1-89.9-96.9-143.7C71.9 632.2 60 573 60 512s11.9-120.2 35.5-175.9c22.8-53.8 55.4-102.2 96.9-143.7s89.9-74.1 143.7-96.9C391.8 71.9 451 60 512 60s120.2 11.9 175.9 35.5c53.8 22.8 102.2 55.4 143.7 96.9s74.1 89.9 96.9 143.7C952.1 391.8 964 451 964 512s-11.9 120.2-35.5 175.9z" fill="#000000" p-id="22986"></path><path d="M706 469.1H574.7l84.2-180.6c7-15 0.4-32.9-14.5-39.9-15-7-32.9-0.4-39.9 14.5L512 461.5l-92.5-198.3c-7-15-24.9-21.5-39.9-14.5s-21.5 24.9-14.5 39.9l84.2 180.6H318c-16.5 0-30 13.5-30 30s13.5 30 30 30h164v64h-92.5c-20.6 0-37.5 13.5-37.5 30s16.9 30 37.5 30H482v95c0 16.5 13.5 30 30 30s30-13.5 30-30v-95h92.5c20.6 0 37.5-13.5 37.5-30s-16.9-30-37.5-30H542v-64h164c16.5 0 30-13.5 30-30 0-16.6-13.5-30.1-30-30.1z" fill="#000000" p-id="22987"></path></svg>

src/assets/svgs/member_level.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1693027700643" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8876" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M936.96 385.877333l-203.434667-204.8-18.090667-7.68L308.565333 173.397333l-18.090667 7.68L87.04 385.877333c-9.728 9.898667-9.898667 25.941333-0.170667 35.84l406.869333 421.034667c4.778667 4.949333 11.434667 7.850667 18.432 7.850667 6.997333 0 13.653333-2.901333 18.432-7.850667l406.869333-421.034667C946.858667 411.648 946.688 395.776 936.96 385.877333zM868.522667 389.632l-141.994667 0-163.84-165.034667 141.994667 0L868.522667 389.632zM319.317333 224.768l143.018667 0-163.84 165.034667L155.477333 389.802667 319.317333 224.768zM176.469333 440.832l132.608 0 18.090667-7.509333 185.173333-186.538667 185.173333 186.538667 18.090667 7.509333 131.584 0L512 787.968 176.469333 440.832z" p-id="8877" fill="#000000"></path></svg>

src/components/Descriptions/src/DescriptionsItemLabel.vue

@@ -13,7 +13,7 @@ const { label } = defineProps({
 
 <template>
   <div class="cell-item">
-    <Icon :icon="icon" />
+    <Icon :icon="icon" v-if="icon" style="vertical-align: middle" :size="18" />
     {{ label }}
   </div>
 </template>

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

@@ -1,51 +1,54 @@
 <template>
   <el-descriptions :column="2">
-    <!-- TODO @梦：要不 icon 也给加下？ -->
-    <!-- TODO @梦：积分、成长值、等级，已经可以读取了，可以看下 -->
     <el-descriptions-item>
       <template #label>
-        <div class="cell-item"> 等级 </div>
+        <descriptions-item-label label=" 等级 " icon="svg-icon:member_level" />
       </template>
-      {{ 0 }}
+      {{ user.levelName || 0 }}
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <div class="cell-item"> 成长值 </div>
+        <descriptions-item-label label=" 成长值 " icon="ep:suitcase" />
       </template>
-      {{ 0 }}
+      {{ user.experience || 0 }}
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <div class="cell-item"> 当前积分 </div>
+        <descriptions-item-label label=" 当前积分 " icon="ep:coin" />
       </template>
-      {{ 0 }}
+      {{ user.point || 0 }}
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <div class="cell-item"> 总积分 </div>
+        <descriptions-item-label label=" 总积分 " icon="ep:coin" />
       </template>
       {{ 0 }}
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <div class="cell-item"> 当前余额 </div>
+        <descriptions-item-label label=" 当前余额 " icon="svg-icon:member_balance" />
       </template>
       {{ 0 }}
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <div class="cell-item"> 支出金额 </div>
+        <descriptions-item-label label=" 支出金额 " icon="svg-icon:member_expenditure_balance" />
       </template>
       {{ 0 }}
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <div class="cell-item"> 充值金额 </div>
+        <descriptions-item-label label=" 充值金额 " icon="svg-icon:member_recharge_balance" />
       </template>
       {{ 0 }}
     </el-descriptions-item>
   </el-descriptions>
 </template>
+<script setup lang="ts">
+import { DescriptionsItemLabel } from '@/components/Descriptions'
+import * as UserApi from '@/api/member/user'
+const { user } = defineProps<{ user: UserApi.UserVO }>()
+</script>
 <style scoped lang="scss">
 .cell-item {
   display: inline;

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

@@ -74,12 +74,7 @@ import { formatDate } from '@/utils/formatTime'
 import * as UserApi from '@/api/member/user'
 import { DescriptionsItemLabel } from '@/components/Descriptions/index'
 
-const { user }: { user: UserApi.UserVO } = defineProps({
-  user: {
-    type: UserApi.UserVO,
-    required: true
-  }
-})
+const { user } = defineProps<{ user: UserApi.UserVO }>()
 </script>
 <style scoped lang="scss">
 .card-header {

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

@@ -20,7 +20,7 @@
           <template #header>
             <CardTitle title="账户信息" />
           </template>
-          <UserAccountInfo />
+          <UserAccountInfo :user="user" />
         </el-card>
       </el-col>
       <!-- 下边：账户明细 -->
@@ -33,12 +33,12 @@
           <el-tab-pane label="积分" name="point">
             <UserPointList :user-id="id" />
           </el-tab-pane>
-          <el-tab-pane label="签到" name="sign">
+          <el-tab-pane label="签到" name="sign" lazy>
             <UserSignList :user-id="id" />
           </el-tab-pane>
           <el-tab-pane label="成长值" name="third">成长值(WIP)</el-tab-pane>
           <el-tab-pane label="余额" name="fourth">余额(WIP)</el-tab-pane>
-          <el-tab-pane label="收货地址" name="address">
+          <el-tab-pane label="收货地址" name="address" lazy>
             <UserAddressList :user-id="id" />
           </el-tab-pane>
           <el-tab-pane label="订单管理" name="fourth">订单管理(WIP)</el-tab-pane>
@@ -87,10 +87,10 @@ const getUserData = async (id: number) => {
 }
 
 /** 初始化 */
-const { push, currentRoute } = useRouter() // 路由
+const { currentRoute } = useRouter() // 路由
 const { delView } = useTagsViewStore() // 视图操作
 const route = useRoute()
-const id = route.params.id as number
+const id = Number(route.params.id)
 onMounted(() => {
   if (!id) {
     ElMessage.warning('参数错误，会员编号不能为空！')