用户页面优化

This commit is contained in:
墨大叔 2024-08-02 10:01:57 +08:00
parent e481bf27f4
commit a608d89064
3 changed files with 81 additions and 61 deletions

View File

@ -7,7 +7,7 @@
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-row> </el-row>
<single-line-chart v-loading="loading" :labels="labels" :chart-data="chartData" name="收入(元)" /> <single-line-chart v-loading="loading" :labels="labels" :chart-data="chartData" name="收入(元)" height="288px"/>
</div> </div>
</template> </template>

View File

@ -1,65 +1,80 @@
<template> <template>
<div class="app-container"> <div class="app-container" v-loading="loading">
<el-card class="box-card" header="用户详情"> <template v-if="userData != null">
<div class="user-detail"> <el-row :gutter="12">
<div class="user-header"> <el-col :lg="8" :md="12" :xs="24">
<el-avatar :size="64" :src="userData.avatar"></el-avatar> <el-card class="box-card" header="用户详情">
<el-row type="flex" class="name-box"> <div class="user-detail">
<span class="user-name">{{userData.nickName}}</span> <div class="user-header">
<el-tag type="primary" v-if="userData.isMch">商户</el-tag> <el-avatar :size="64" :src="userData.avatar"></el-avatar>
</el-row> <el-row type="flex" class="name-box">
<div class="phone-number">{{userData.phonenumber}}</div> <span class="user-name">{{userData.nickName}}</span>
</div> <el-tag type="primary" v-if="userData.isMch">商户</el-tag>
</el-row>
<div class="phone-number">{{userData.phonenumber}}</div>
</div>
<div class="user-description"> <div class="user-description">
<el-descriptions> <el-descriptions :column="2">
<el-descriptions-item label="微信">{{userData.wxOpenId | defaultValue}}</el-descriptions-item> <el-descriptions-item label="微信" :span="2">{{userData.wxOpenId | defaultValue}}</el-descriptions-item>
<el-descriptions-item label="店铺数">{{userData.storeCount | defaultValue}} </el-descriptions-item> <el-descriptions-item label="店铺数">{{userData.storeCount | defaultValue}} </el-descriptions-item>
<el-descriptions-item label="设备数">{{userData.deviceCount | defaultValue}} </el-descriptions-item> <el-descriptions-item label="设备数">{{userData.deviceCount | defaultValue}} </el-descriptions-item>
<el-descriptions-item label="账户余额">{{userData.balance | money | defaultValue}} </el-descriptions-item> <el-descriptions-item label="设备服务费">
<el-descriptions-item label="总收入">{{userData.totalIncome | money | defaultValue}} </el-descriptions-item> <template v-if="userData.serviceRate == null || userData.serviceType == null">跟随渠道</template>
<el-descriptions-item label="总提现">{{userData.withDrawlAmount | money | defaultValue}} </el-descriptions-item> <template v-else>
<el-descriptions-item label="服务费费率"> <dict-tag :options="dict.type.service_type" :value="userData.serviceType" size="mini"/>
<template v-if="userData.serviceRate == null || userData.serviceType == null">跟随渠道</template> {{userData.serviceRate}} {{serviceUnit(userData.serviceType)}}
<template v-else> </template>
<dict-tag :options="dict.type.service_type" :value="userData.serviceType" size="mini"/> </el-descriptions-item>
{{userData.serviceRate}} {{serviceUnit(userData.serviceType)}} <el-descriptions-item label="提现服务费">
</template> <template v-if="userData.withdrawServiceRate == null || userData.withdrawServiceType == null">跟随渠道</template>
</el-descriptions-item> <template v-else>
</el-descriptions> <dict-tag :options="dict.type.service_type" :value="userData.withdrawServiceType" size="mini"/>
</div> {{userData.withdrawServiceRate}} {{serviceUnit(userData.withdrawServiceType)}}
</div> </template>
</el-card> </el-descriptions-item>
<el-descriptions-item label="账户余额">{{userData.balance | money | defaultValue}} </el-descriptions-item>
<el-descriptions-item label="总收入">{{userData.totalIncome | money | defaultValue}} </el-descriptions-item>
<el-descriptions-item label="总提现">{{userData.withDrawlAmount | money | defaultValue}} </el-descriptions-item>
</el-descriptions>
</div>
</div>
</el-card>
</el-col>
<el-col :lg="16" :md="12" :xs="24">
<el-card class="box-card">
<user-recharge-report :mch-id="userData.userId"/>
</el-card>
</el-col>
</el-row>
<el-card class="box-card" header="收入统计"> <el-card class="box-card">
<user-recharge-report :mch-id="userData.userId"/> <el-tabs>
</el-card> <el-tab-pane label="设备列表" lazy>
<user-device :user-id="userData.userId"/>
<el-card class="box-card"> </el-tab-pane>
<el-tabs> <el-tab-pane label="店铺列表" lazy>
<el-tab-pane label="设备列表" lazy> <store :query="{userId: userData.userId}" :view="views.user"/>
<user-device :user-id="userData.userId"/> </el-tab-pane>
</el-tab-pane> <el-tab-pane label="套餐列表" lazy>
<el-tab-pane label="店铺列表" lazy> <suit :query="{userId: userData.userId}" :view="views.user"/>
<store :query="{userId: userData.userId}" :view="views.user"/> </el-tab-pane>
</el-tab-pane> <el-tab-pane label="账户列表" lazy>
<el-tab-pane label="套餐列表" lazy> <account :query="{userId: userData.userId}" :view="views.user"/>
<suit :query="{userId: userData.userId}" :view="views.user"/> </el-tab-pane>
</el-tab-pane> <el-tab-pane label="充值提现记录" lazy>
<el-tab-pane label="账户列表" lazy> <user-account :landlord-id="userData.userId"/>
<account :query="{userId: userData.userId}" :view="views.user"/> </el-tab-pane>
</el-tab-pane> <el-tab-pane label="余额变化记录" lazy>
<el-tab-pane label="充值提现记录" lazy> <record-balance :query="{userId: userData.userId}" :view="views.user"/>
<user-account :landlord-id="userData.userId"/> </el-tab-pane>
</el-tab-pane> <el-tab-pane label="用户秘钥" lazy>
<el-tab-pane label="余额变化记录" lazy> <access :query="{userId: userData.userId}" :view="views.user"/>
<record-balance :query="{userId: userData.userId}" :view="views.user"/> </el-tab-pane>
</el-tab-pane> </el-tabs>
<el-tab-pane label="用户秘钥" lazy> </el-card>
<access :query="{userId: userData.userId}" :view="views.user"/> </template>
</el-tab-pane> <el-empty v-else description="用户不存在"/>
</el-tabs>
</el-card>
</div> </div>
</template> </template>
@ -91,6 +106,7 @@ export default {
data() { data() {
return { return {
userData: {}, userData: {},
loading: false,
} }
}, },
created() { created() {
@ -98,8 +114,11 @@ export default {
}, },
methods: { methods: {
initData() { initData() {
this.loading = true;
getSmUser(this.$route.params.userId).then(response => { getSmUser(this.$route.params.userId).then(response => {
this.userData = response.data; this.userData = response.data;
}).finally(()=> {
this.loading = false;
}) })
}, },
} }
@ -133,6 +152,7 @@ export default {
position: relative; position: relative;
display: flex; display: flex;
height: fit-content; height: fit-content;
flex-direction: column;
} }
.user-detail .user-description { .user-detail .user-description {
flex: 1; flex: 1;

View File

@ -112,7 +112,7 @@
<user-link :id="d.row.userId" :name="d.row.phonenumber"/> <user-link :id="d.row.userId" :name="d.row.phonenumber"/>
</template> </template>
<template v-else-if="column.key === 'storeCount'"> <template v-else-if="column.key === 'storeCount'">
{{d.row.storeCount | defaultValue}} {{d.row.storeCount | defaultValue}}
</template> </template>
<template v-else-if="column.key === 'rechargeAmount'"> <template v-else-if="column.key === 'rechargeAmount'">
{{d.row.rechargeAmount | money}} {{d.row.rechargeAmount | money}}