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