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

Merge pull request !221 from 风狗/dev

Author: YunaiV

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

@@ -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/assets/svgs/member_expenditure_balance.svg

@@ -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/assets/svgs/member_level.svg

@@ -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/assets/svgs/member_point.svg

@@ -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('参数错误，会员编号不能为空！')