feat: 会员详情-余额tab页面初始化;将查询会员账户信息接口调用逻辑抽取到父组件,方便余额tab页面使用

This commit is contained in:
GoldenZqqqq
2024-08-18 21:42:00 +08:00
parent 61fb71c010
commit 687c96bb0e
3 changed files with 93 additions and 27 deletions

View File

@ -20,7 +20,7 @@
<template #header>
<CardTitle title="账户信息" />
</template>
<UserAccountInfo :user="user" />
<UserAccountInfo :user="user" :wallet="wallet"/>
</el-card>
</el-col>
<!-- 下边账户明细 -->
@ -40,7 +40,9 @@
<UserExperienceRecordList :user-id="id" />
</el-tab-pane>
<!-- TODO @jason增加一个余额变化 -->
<el-tab-pane label="余额" lazy>余额(WIP)</el-tab-pane>
<el-tab-pane label="余额" lazy>
<UserBalanceList :wallet-id="wallet.id" />
</el-tab-pane>
<el-tab-pane label="收货地址" lazy>
<UserAddressList :user-id="id" />
</el-tab-pane>
@ -68,6 +70,7 @@
<UserForm ref="formRef" @success="getUserData(id)" />
</template>
<script setup lang="ts">
import * as WalletApi from '@/api/pay/wallet/balance'
import * as UserApi from '@/api/member/user'
import { useTagsViewStore } from '@/store/modules/tagsView'
import UserForm from '@/views/member/user/UserForm.vue'
@ -111,6 +114,24 @@ const { currentRoute } = useRouter() // 路由
const { delView } = useTagsViewStore() // 视图操作
const route = useRoute()
const id = Number(route.params.id)
/* 用户钱包相关信息 */
const WALLET_INIT_DATA = {
balance: 0,
totalExpense: 0,
totalRecharge: 0
} as WalletApi.WalletVO // 钱包初始化数据
const wallet = ref<WalletApi.WalletVO>(WALLET_INIT_DATA) // 钱包信息
/** 查询用户钱包信息 */
const getUserWallet = async () => {
if (!id) {
wallet.value = WALLET_INIT_DATA
return
}
const params = { userId: id }
wallet.value = (await WalletApi.getWallet(params)) || WALLET_INIT_DATA
}
onMounted(() => {
if (!id) {
ElMessage.warning('参数错误,会员编号不能为空!')
@ -118,6 +139,7 @@ onMounted(() => {
return
}
getUserData(id)
getUserWallet()
})
</script>
<style scoped lang="css">