<template>
|
<LoadingLayout>
|
<AppContainer>
|
<RewardInfoCardList>
|
<RewardInfoCard class="reward-wrapper">
|
<template #title>
|
<div class="reward-wrapper-title">
|
<div class="reward-wrapper-title-amount">
|
<span>资金总额（元）</span>
|
<span class="reward-wrapper-title-amount-value">{{
|
toThousand(detail?.totalAmount ?? 0)
|
}}</span>
|
</div>
|
</div>
|
</template>
|
<div class="reward-wrapper-content">
|
<div class="reward-wrapper-content-item">
|
<div class="reward-wrapper-content-item-label">平台奖励余额（元）</div>
|
<div class="reward-wrapper-content-item-value">
|
{{ toThousand(detail?.bountyAmount ?? 0) }}
|
</div>
|
</div>
|
<div class="reward-wrapper-content-item-line"></div>
|
<div class="reward-wrapper-content-item">
|
<div class="reward-wrapper-content-item-label">预充值金额（元）</div>
|
<div class="reward-wrapper-content-item-value">
|
{{ toThousand(detail?.rechargeAmount ?? 0) }}
|
</div>
|
</div>
|
</div>
|
</RewardInfoCard>
|
<RewardInfoCard title="企业基本信息" style="flex: 1">
|
<RewardInfoCardContentItem label="企业名称：">
|
{{ detail?.enterpriseName ?? '' }}
|
</RewardInfoCardContentItem>
|
<RewardInfoCardContentItem label="信用代码：">
|
{{ detail?.societyCreditCode ?? '' }}
|
</RewardInfoCardContentItem>
|
<RewardInfoCardContentItem label="营业执照：">
|
<el-button
|
v-if="!!detail?.licenseUrl"
|
type="primary"
|
link
|
class="link-style-clear"
|
@click="handlePreviewCertificate()"
|
>查看</el-button
|
>
|
</RewardInfoCardContentItem>
|
</RewardInfoCard>
|
<RewardInfoCard title="账户信息" style="flex: 1">
|
<RewardInfoCardContentItem label="开户总行：">
|
{{ detail?.bankName ?? '' }}
|
</RewardInfoCardContentItem>
|
<RewardInfoCardContentItem label="开户支行：">
|
{{ detail?.bankBranchName ?? '' }}
|
</RewardInfoCardContentItem>
|
<RewardInfoCardContentItem label="银行帐号：">
|
{{ detail?.bankCardNumber ?? '' }}
|
</RewardInfoCardContentItem>
|
</RewardInfoCard>
|
</RewardInfoCardList>
|
<ProTabs v-model="state.tabType" hasBorder class="reward-tabs">
|
<ProTabPane lazy label="消费记录" name="Consume">
|
<ConsumeRecordView></ConsumeRecordView>
|
</ProTabPane>
|
</ProTabs>
|
</AppContainer>
|
</LoadingLayout>
|
</template>
|
|
<script setup lang="ts">
|
import { LoadingLayout, AppContainer, ProTabs, ProTabPane } from '@bole-core/components';
|
import * as userServices from '@/services/api/User';
|
import RewardInfoCardList from '@/components/Reward/RewardInfoCardList.vue';
|
import RewardInfoCard from '@/components/Reward/RewardInfoCard.vue';
|
import RewardInfoCardContentItem from '@/components/Reward/RewardInfoCardContentItem.vue';
|
import { setOSSLink, downloadFileByUrl, toThousand } from '@/utils';
|
import ConsumeRecordView from './components/ConsumeRecordView.vue';
|
import { useQuery } from '@tanstack/vue-query';
|
import { useUser } from '@/hooks';
|
|
defineOptions({
|
name: 'BalanceManage',
|
});
|
|
const BaseState = {
|
loading: true,
|
tabType: 'Consume',
|
};
|
|
const { user } = useUser();
|
const state = reactive({ ...BaseState });
|
|
const { isLoading, data: detail } = useQuery({
|
queryKey: ['userServices/getUserAmountShow'],
|
queryFn: async () => {
|
return await userServices.getUserAmountShow({
|
showLoading: false,
|
});
|
},
|
placeholderData: () => ({} as API.UserAmountShowDto),
|
});
|
|
function handlePreviewCertificate() {
|
downloadFileByUrl(setOSSLink(detail.value?.licenseUrl ?? ''));
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@use '@/style/common.scss' as *;
|
|
.pretty-layout-main-container .app-main-wrapper > .app-main {
|
background-color: #ffffff;
|
}
|
|
.reward-wrapper {
|
:deep() {
|
.reward-info-card-content {
|
display: flex;
|
}
|
}
|
|
.reward-wrapper-title {
|
display: flex;
|
justify-content: space-between;
|
padding-bottom: 10px;
|
border-bottom: 1px solid var(--el-border-color-light);
|
|
.reward-wrapper-title-amount {
|
display: flex;
|
align-items: flex-end;
|
min-width: 0;
|
flex: 1;
|
}
|
|
.reward-wrapper-title-amount-value {
|
font-size: 24px;
|
font-weight: bold;
|
color: getCssVar('text-color', 'primary');
|
}
|
}
|
|
.reward-wrapper-content {
|
display: flex;
|
justify-content: center;
|
padding: 10px;
|
min-width: 0;
|
min-height: 0;
|
border: 1px solid var(--el-border-color-light);
|
border-radius: 4px;
|
flex: 1;
|
|
.reward-wrapper-content-item-line {
|
margin: 0 20px;
|
width: 1px;
|
height: 100%;
|
background-color: var(--el-border-color-light);
|
}
|
|
.reward-wrapper-content-item {
|
flex: 1;
|
min-width: 0;
|
|
.reward-wrapper-content-item-label {
|
font-size: 14px;
|
white-space: nowrap;
|
color: getCssVar('text-color', 'regular');
|
line-height: 20px;
|
}
|
|
.reward-wrapper-content-item-value {
|
font-size: 16px;
|
line-height: 22px;
|
font-weight: bold;
|
color: getCssVar('color', 'primary');
|
}
|
}
|
}
|
}
|
|
.reward-tabs {
|
:deep() {
|
.pro-table-wrapper .pro-table-container {
|
padding-top: 20px;
|
}
|
}
|
}
|
</style>
|
