2 changed files with 431 additions and 0 deletions
@ -0,0 +1,423 @@ |
|||||
|
<template> |
||||
|
<div class="main-content12 recharge-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" v-if="totalType == '1'"> |
||||
|
<el-form class="el-row demo-ruleForm" ref="formRef"> |
||||
|
|
||||
|
</el-form> |
||||
|
</div> |
||||
|
<el-form class="mt24" v-else> |
||||
|
<GuipTable :tableData="tableList" :key="tableKey" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1"> |
||||
|
<template v-if="totalType == '2'"> |
||||
|
<el-table-column prop="tid" label="订单号"></el-table-column> |
||||
|
<el-table-column prop="money"> |
||||
|
<template slot="header"> |
||||
|
充值金额 |
||||
|
<span class="money-header" v-if="total_money>0"> 总计 {{ total_money }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="pay_date" label="充值时间"></el-table-column> |
||||
|
<el-table-column prop="remain_money" label="充值前账号余额"></el-table-column> |
||||
|
<el-table-column prop="type_desc" label="类型"></el-table-column> |
||||
|
<el-table-column prop="opt" label="操作"> |
||||
|
<template slot-scope="scope"> |
||||
|
<GuipButton v-if="scope.row.confirm" type="ignore" class="mr-16" :btnstyle="confirmBtnStyle" @click="confirmRecharge(scope.row.id, scope.row.tid)">确认收货</GuipButton> |
||||
|
<div v-else>----</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<el-table-column prop="short_name" label="账号"></el-table-column> |
||||
|
<el-table-column prop="bill_date" label="账单日期"></el-table-column> |
||||
|
<el-table-column prop="pay_type" label="支付类型"> |
||||
|
<template slot-scope="scope"> |
||||
|
<img :src="require('@/assets/pay/pay_'+scope.row.pay_type+'.svg')" alt=""> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="money" label="收入金额（元）"></el-table-column> |
||||
|
<el-table-column prop="unpay_money" label="未核算金额（元）"></el-table-column> |
||||
|
<el-table-column prop="ctime" label="账单生成时间"></el-table-column> |
||||
|
<el-table-column prop="status" label="核算状态"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div :class="statusClass(scope.row.status)">{{scope.row.status}}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="money" label="操作"></el-table-column> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
</GuipTable> |
||||
|
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange' |
||||
|
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" |
||||
|
:total="parseInt(total)"> |
||||
|
</el-pagination> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
|
||||
|
import GuipButton from "@/components/GuipButton.vue"; |
||||
|
import GuipTable from "@/components/GuipTable.vue"; |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
GuipTable, |
||||
|
GuipButton, |
||||
|
}, |
||||
|
props: { |
||||
|
total_type: { |
||||
|
type: String, |
||||
|
default: '1' |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
totalType:'1', |
||||
|
tableLoading:false, |
||||
|
|
||||
|
walletType: '', |
||||
|
walletList:[], |
||||
|
|
||||
|
prompt:'', |
||||
|
prompt_link:'', |
||||
|
bonus:[], |
||||
|
buy_price_type: '', |
||||
|
buy_price_types: {}, |
||||
|
buy_price_link: '', |
||||
|
buy_price_links: {}, |
||||
|
links_desc: '', |
||||
|
|
||||
|
ordernum:'', |
||||
|
|
||||
|
tableKey: '', |
||||
|
tableList:[], |
||||
|
currentPage: 1, //当前页 |
||||
|
pageSize: 20, //每页的容量 |
||||
|
total: 0, //列表总数 |
||||
|
total_money: 0, //列表总数 |
||||
|
tid2refunds: [], //列表总数 |
||||
|
dialogVisible: false, |
||||
|
refund_detail: [], |
||||
|
|
||||
|
confirmBtnStyle: { |
||||
|
'background':'#FF4D4F', |
||||
|
'color':'#FFFFFF', |
||||
|
'border':'1px solid #FF4D4F', |
||||
|
'border-radius':'4px', |
||||
|
'width': '88px', |
||||
|
'height': '33px', |
||||
|
'font-size': '12px', |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(()=>{ |
||||
|
this.totalType = this.total_type; |
||||
|
this.handleClick() |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
statusClass(status){ |
||||
|
if(status == '已核算') return 'already_pay'; |
||||
|
return 'not_pay' |
||||
|
}, |
||||
|
handleClick(){ |
||||
|
this.tableList = [] |
||||
|
this.total_money = 0 |
||||
|
if(this.totalType == 1) this.getRechargeData() |
||||
|
if(this.totalType == 2) this.getRechargeList() |
||||
|
if(this.totalType == 3) this.getBillList() |
||||
|
}, |
||||
|
getRechargeData() { |
||||
|
try { |
||||
|
this.$http('POST', '/agentnew/ajax_get_recharge_data', {date: this.date}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
this.walletList = response.data |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
console.error('数据加载失败:', error) |
||||
|
} |
||||
|
}, |
||||
|
getRechargeList() { |
||||
|
this.tableLoading = true |
||||
|
try { |
||||
|
this.$http('POST', '/agentnew/ajax_get_recharge_list', { |
||||
|
type: this.walletType, |
||||
|
cur_page: this.currentPage, |
||||
|
page_size: this.pageSize |
||||
|
}).then(response => { |
||||
|
this.tableLoading = false |
||||
|
this.$nextTick(() => { |
||||
|
this.tableList = response.data.list |
||||
|
this.total = response.data.total |
||||
|
this.total_money = response.data.total_money |
||||
|
this.tableKey = Math.random(); |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
console.error('数据加载失败:', error) |
||||
|
} finally { |
||||
|
this.tableLoading = false |
||||
|
} |
||||
|
}, |
||||
|
getBillList() { |
||||
|
this.tableLoading = true |
||||
|
try { |
||||
|
this.$http('POST', '/agentnew/ajax_get_bill_list', {date: this.date}).then(response => { |
||||
|
this.tableLoading = false |
||||
|
this.$nextTick(() => { |
||||
|
this.tableList = response.data.list |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
console.error('数据加载失败:', error) |
||||
|
} finally { |
||||
|
this.tableLoading = false |
||||
|
} |
||||
|
}, |
||||
|
doRecharge(){ |
||||
|
try { |
||||
|
this.$http('POST', '/agentnew/ajax_do_recharge', {orderId: this.ordernum,type: this.walletType}).then(response => { |
||||
|
if (response.status) { |
||||
|
this.$message.success('充值成功'); |
||||
|
return true; |
||||
|
} |
||||
|
this.$message.error(response.info); |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
console.error('数据加载失败:', error) |
||||
|
} |
||||
|
}, |
||||
|
confirmRecharge(id, tid){ |
||||
|
try { |
||||
|
this.$http('POST', '/agentnew/ajax_confirm_recharge', {orderId: tid,type: this.walletType,recharge_id: id}).then(response => { |
||||
|
if (response.status) { |
||||
|
this.$message.success('充值成功'); |
||||
|
return true; |
||||
|
} |
||||
|
this.$message.error(response.info); |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
console.error('数据加载失败:', error) |
||||
|
} |
||||
|
}, |
||||
|
handleSizeChange(val) { |
||||
|
this.pageSize = val |
||||
|
this.getRechargeList() |
||||
|
}, |
||||
|
handleCurrentChange(val) { |
||||
|
this.currentPage = val |
||||
|
this.getRechargeList() |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.recharge-wrap{ |
||||
|
.pagetitle { |
||||
|
text-align: left; |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
line-height: normal; |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #1E2226; |
||||
|
margin-top: 8px; |
||||
|
} |
||||
|
.w552{ |
||||
|
width: 552px; |
||||
|
letter-spacing: 0.08em; |
||||
|
} |
||||
|
.w443{ |
||||
|
width: 443px; |
||||
|
letter-spacing: 0.08em; |
||||
|
} |
||||
|
.wallet-choose{ |
||||
|
font-size: 14px; |
||||
|
color: #1E2226; |
||||
|
} |
||||
|
.wallet-desc{ |
||||
|
font-size: 12px; |
||||
|
color: #8A9099; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.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: #F6F7FA; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
.wallet-name{ |
||||
|
color: #1E2226;; |
||||
|
font-size: 14px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.wallet-num{ |
||||
|
font-size: 12px; |
||||
|
color: #626573; |
||||
|
padding: 0 2px; |
||||
|
} |
||||
|
.wallet-price{ |
||||
|
font-size: 22px; |
||||
|
font-weight: bold; |
||||
|
color: #626573; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.wallet-item-active{ |
||||
|
position: relative; |
||||
|
background: #F2F7FF; |
||||
|
.tem-active{ |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
} |
||||
|
.wallet-name{ |
||||
|
color: #006AFF; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.gap24 { |
||||
|
gap: 24px; |
||||
|
width: 100%; |
||||
|
align-items: stretch; |
||||
|
} |
||||
|
|
||||
|
.buy-area{ |
||||
|
.buy-btn{ |
||||
|
font-size: 12px; |
||||
|
width: 139px; |
||||
|
color: #006AFF; |
||||
|
letter-spacing: 0.08em; |
||||
|
padding: 9px 16px; |
||||
|
gap: 6px; |
||||
|
border-radius: 4px; |
||||
|
border: 1px solid #006AFF; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.buy-bonus{ |
||||
|
position: relative; |
||||
|
.buy-bonus-info{ |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
position: absolute; |
||||
|
top:54px; |
||||
|
left: 22px; |
||||
|
width: 510px; |
||||
|
gap: 3px; |
||||
|
color: #626573; |
||||
|
div{ |
||||
|
width: calc(50% - 15px); |
||||
|
gap: 7px; |
||||
|
b{ |
||||
|
padding: 0 4px; |
||||
|
} |
||||
|
.red{ |
||||
|
background: linear-gradient(180deg, #DB4CBB 0%, #EB202C 100%); |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
background-clip: text; |
||||
|
text-fill-color: transparent; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.buy-desc{ |
||||
|
font-size: 12px; |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #006AFF; |
||||
|
} |
||||
|
|
||||
|
.buy-hr{ |
||||
|
border: 1px dashed #BABDC2; |
||||
|
margin: 32px 0; |
||||
|
} |
||||
|
|
||||
|
.buy-info{ |
||||
|
width: 552px; |
||||
|
color: #8A9099; |
||||
|
font-size: 12px; |
||||
|
letter-spacing: 0.08em; |
||||
|
background: #F6F7FA; |
||||
|
padding: 12px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 12px; |
||||
|
text-align: left; |
||||
|
box-sizing: border-box; |
||||
|
margin-top: 24px; |
||||
|
.red{ |
||||
|
color: #FF4D4F; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.money-header{ |
||||
|
color: #626573; |
||||
|
margin-left: 8px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-form-item { |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.table-grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr 1fr 1fr 1fr; /* 三列 */ |
||||
|
border: 1px solid #ccc; |
||||
|
} |
||||
|
|
||||
|
.table-grid-cell { |
||||
|
border: 1px solid #ccc; |
||||
|
padding: 8px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.not_pay{ |
||||
|
padding: 2px 10px; |
||||
|
color: #626573; |
||||
|
border-radius: 4px; |
||||
|
background: #F6F7FA; |
||||
|
border: 1px solid #DFE2E6; |
||||
|
} |
||||
|
.already_pay{ |
||||
|
padding: 2px 10px; |
||||
|
color: #0DAF49; |
||||
|
border-radius: 4px; |
||||
|
background: rgba(239, 255, 224, 0.5); |
||||
|
border: 1px solid rgba(0, 194, 97, 0.6); |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue