You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
296 lines
8.3 KiB
296 lines
8.3 KiB
1 month ago
|
<template>
|
||
|
|
<div class="main-content12 expense-wrap">
|
||
|
|
<h3 class="pagetitle">余额管理</h3>
|
||
|
|
<div class="flex-common">
|
||
|
|
<div class="flex-between">
|
||
|
|
<el-tabs v-model="totalType" @tab-click="handleClick">
|
||
|
|
<el-tab-pane label="余额充值" name="1"></el-tab-pane>
|
||
|
|
<el-tab-pane label="充值记录" name="2"></el-tab-pane>
|
||
|
|
<el-tab-pane label="退款记录" name="3"></el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
<div class="flex">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt24">
|
||
|
|
<div class="flex-between w552 mt12">
|
||
|
|
<div class="wallet-choose">充值选择</div>
|
||
|
|
<div class="wallet-desc flex">设置通用余额提醒，防止余额不足，点此设置<img style="width: 14px" src="@/assets/input_ex_ic.png"/></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex gap24">
|
||
|
|
<div class="wallet-item wallet-item-active">
|
||
|
|
<div class="wallet-name">通用钱包</div>
|
||
|
|
<div class="wallet-num">当前余额<span class="wallet-price">4560</span>元</div>
|
||
|
|
</div>
|
||
|
|
<div class="wallet-item">
|
||
|
|
<div class="wallet-name">通用钱包</div>
|
||
|
|
<div class="wallet-num">当前余额<span class="wallet-price">4560</span>元</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
total_type: {
|
||
|
|
type: String,
|
||
|
|
default: '1'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
totalType:'1',
|
||
|
|
date: this.getNow(),
|
||
|
|
tableLoading:false,
|
||
|
|
|
||
|
|
walletList:[],
|
||
|
|
|
||
|
|
|
||
|
|
siteNum: 1,
|
||
|
|
tableKey: '',
|
||
|
|
monthList:[],
|
||
|
|
monthTotal:[],
|
||
|
|
payList:[],
|
||
|
|
nameList:[],
|
||
|
|
topList:[],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.$nextTick(()=>{
|
||
|
|
this.totalType = this.total_type;
|
||
|
|
|
||
|
|
this.handleClick()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleClickDetail(id){
|
||
|
|
if(this.totalType == 2) this.$router.push(`/agent/statisticalDetails?uid=${id}&total_type=${this.totalType}&date=${this.date}`)
|
||
|
|
if(this.totalType == 3) this.$router.push(`/agent/statisticalDetails?chktype=${id}&total_type=${this.totalType}&date=${this.date}`)
|
||
|
|
},
|
||
|
|
handleClicksiteRank(id){
|
||
|
|
this.$router.push(`/agent/siteRank?id=${id}&total_type=${this.totalType}&date=`+this.date)
|
||
|
|
},
|
||
|
|
handleClickserviceRank(id){
|
||
|
|
this.$router.push(`/agent/serviceRank?id=${id}&total_type=${this.totalType}&date=`+this.date)
|
||
|
|
},
|
||
|
|
handleClick(){
|
||
|
|
this.monthList = []
|
||
|
|
this.payList = []
|
||
|
|
this.monthTotal = []
|
||
|
|
this.nameList = []
|
||
|
|
this.topList = []
|
||
|
|
this.tableKey = Math.random();
|
||
|
|
if(this.totalType == 1) this.getRechargeData()
|
||
|
|
if(this.totalType == 2) this.getSiteStats()
|
||
|
|
if(this.totalType == 3) this.getChktypeStats()
|
||
|
|
},
|
||
|
|
getRechargeData() {
|
||
|
|
try {
|
||
|
|
this.$http('POST', '/agentnew/ajax_get_recharge_data', {date: this.date}).then(response => {
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.walletList = response.data
|
||
|
|
console.log(response)
|
||
|
|
})
|
||
|
|
}).catch(error => {
|
||
|
|
console.error(error, 'error')
|
||
|
|
})
|
||
|
|
} catch (error) {
|
||
|
|
console.error('数据加载失败:', error)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getSiteStats() {
|
||
|
|
this.tableLoading = true
|
||
|
|
try {
|
||
|
|
this.$http('POST', '/agentnew/ajax_get_site_stats', {date: this.date}).then(response => {
|
||
|
|
this.tableLoading = false
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.monthList = response.data.list
|
||
|
|
this.payList = response.data.pay_list
|
||
|
|
this.monthTotal = response.data.total
|
||
|
|
this.nameList = response.data.name_list
|
||
|
|
this.topList = response.data.top_list
|
||
|
|
})
|
||
|
|
}).catch(error => {
|
||
|
|
console.error(error, 'error')
|
||
|
|
})
|
||
|
|
} catch (error) {
|
||
|
|
console.error('数据加载失败:', error)
|
||
|
|
} finally {
|
||
|
|
this.tableLoading = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getChktypeStats() {
|
||
|
|
this.tableLoading = true
|
||
|
|
try {
|
||
|
|
this.$http('POST', '/agentnew/ajax_get_chktype_stats', {date: this.date}).then(response => {
|
||
|
|
this.tableLoading = false
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.monthList = response.data.list
|
||
|
|
this.payList = response.data.pay_list
|
||
|
|
this.monthTotal = response.data.total
|
||
|
|
this.nameList = response.data.name_list
|
||
|
|
this.topList = response.data.top_list
|
||
|
|
})
|
||
|
|
}).catch(error => {
|
||
|
|
console.error(error, 'error')
|
||
|
|
})
|
||
|
|
} catch (error) {
|
||
|
|
console.error('数据加载失败:', error)
|
||
|
|
} finally {
|
||
|
|
this.tableLoading = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.w552{
|
||
|
|
width: 552px;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
}
|
||
|
|
.wallet-choose{
|
||
|
|
font-size: 14px;
|
||
|
|
color: #1E2226;
|
||
|
|
}
|
||
|
|
.wallet-desc{
|
||
|
|
font-size: 12px;
|
||
|
|
color: #8A9099;
|
||
|
|
}
|
||
|
|
.wallet-item{
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 12px;
|
||
|
|
text-align: left;
|
||
|
|
padding: 16px 18px;
|
||
|
|
width: 264px;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
border-radius: 8px;
|
||
|
|
background: #F2F7FF;
|
||
|
|
|
||
|
|
.wallet-name{
|
||
|
|
color: #006AFF;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.wallet-num{
|
||
|
|
font-size: 12px;
|
||
|
|
color: #626573;
|
||
|
|
}
|
||
|
|
.wallet-price{
|
||
|
|
font-size: 22px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #626573;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.wallet-item-active{
|
||
|
|
background: #F2F7FF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gap24 {
|
||
|
|
gap: 24px;
|
||
|
|
width: 100%;
|
||
|
|
align-items: stretch;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-table__footer-wrapper tbody td.el-table__cell {
|
||
|
|
background-color: #E8F0FE; /* 背景色 */
|
||
|
|
color: #006AFF; /* 文字颜色 */
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loss-profit{
|
||
|
|
color: #FF4D4F;
|
||
|
|
}
|
||
|
|
.red{
|
||
|
|
color: #FF4D4F;
|
||
|
|
}
|
||
|
|
|
||
|
|
.expense-wrap{
|
||
|
|
.pagetitle {
|
||
|
|
text-align: left;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: bold;
|
||
|
|
line-height: normal;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
color: #1E2226;
|
||
|
|
margin-top: 8px;
|
||
|
|
}
|
||
|
|
.monthTotal-wrap{
|
||
|
|
display: grid;
|
||
|
|
grid-gap: 12px;
|
||
|
|
grid-template-columns: repeat(auto-fit, 287px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.loss-tip{
|
||
|
|
width: 50px;
|
||
|
|
height: 24px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border-radius: 4px;
|
||
|
|
background: #FFF1F0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border: 1px solid #FFA39E;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: normal;
|
||
|
|
line-height: 20px;
|
||
|
|
text-align: center;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
color: #FF4D4F;
|
||
|
|
}
|
||
|
|
.loss-tip-empty{
|
||
|
|
width: 50px;
|
||
|
|
height: 24px;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.total-item{
|
||
|
|
padding: 14px 16px;
|
||
|
|
font-size: 12px;
|
||
|
|
letter-spacing: 0.03em;
|
||
|
|
color: #23242B;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border-radius: 4px;
|
||
|
|
background: #F2F7FF;
|
||
|
|
min-height: 153px;
|
||
|
|
.price{
|
||
|
|
text-align: left;
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: normal;
|
||
|
|
line-height: 15px;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
color: #1E2226;
|
||
|
|
margin: 14px 0;
|
||
|
|
b{
|
||
|
|
font-size: 22px;
|
||
|
|
line-height: 20px;
|
||
|
|
letter-spacing: normal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.total-bottom{
|
||
|
|
align-items: flex-start;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.loss{
|
||
|
|
background: #FFF1F0;
|
||
|
|
.top-left b{
|
||
|
|
color: #FF4D4F;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.gain{
|
||
|
|
background: #EFFFE0;
|
||
|
|
.top-left b{
|
||
|
|
color: #00C261;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|