4 changed files with 314 additions and 1 deletions
@ -0,0 +1,296 @@ |
|||
<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> |
|||
Loading…
Reference in new issue