|
|
|
@ -1,5 +1,5 @@ |
|
|
|
<template> |
|
|
|
<div class="main-content12 recharge-wrap"> |
|
|
|
<div class="main-content12 payoff-wrap"> |
|
|
|
<h3 class="pagetitle">代收款结算</h3> |
|
|
|
<div class="flex-common"> |
|
|
|
<div class="flex-between"> |
|
|
|
@ -13,26 +13,44 @@ |
|
|
|
</div> |
|
|
|
<div class="mt24" v-if="totalType == '1'"> |
|
|
|
<el-form class="el-row demo-ruleForm" ref="formRef"> |
|
|
|
|
|
|
|
ddd |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
<el-form class="mt24" v-else> |
|
|
|
<PromptText v-if="totalType == '2'" text="温馨提示：满200元自动结算，次日凌晨打款；通过微信收到的货款，有7天账期（例如：周一的收入，下周一才能结算提现）。" :type="1" class="mb32"/> |
|
|
|
<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> |
|
|
|
<el-table-column fixed="left" prop="tid" label="订单号" min-width="200px"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span v-if="scope.row.tid">{{scope.row.tid}}</span> |
|
|
|
<span v-else>-</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="操作"> |
|
|
|
<el-table-column prop="pay_tid" label="第三方支付订单号" min-width="300px"> |
|
|
|
<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> |
|
|
|
<span v-if="scope.row.pay_tid">{{scope.row.pay_tid}}</span> |
|
|
|
<span v-else>-</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="payment" label="结算金额（元）" min-width="150px"></el-table-column> |
|
|
|
<el-table-column prop="actual_payment" label="实际支付金额（元）" min-width="200px"></el-table-column> |
|
|
|
<el-table-column prop="service_charge" label="服务费（%）" min-width="150px"></el-table-column> |
|
|
|
<el-table-column prop="date_range_str" label="结算起止日期" min-width="150px"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<GuipToolTip :content="scope.row.date_range"> |
|
|
|
<span>{{scope.row.date_range_str}}</span> |
|
|
|
</GuipToolTip> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="pay_time" label="结算时间" min-width="150px"></el-table-column> |
|
|
|
<el-table-column prop="status" label="状态" min-width="120px"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div class="flex gap8"> |
|
|
|
<div :class="payoffStatusClass(scope.row.status)">{{scope.row.status}}</div> |
|
|
|
<GuipToolTip v-if="scope.row.status == '异常'" :content="scope.row.remark"> |
|
|
|
<img class="w16" src="@/assets/site/more_setIcon.png"> |
|
|
|
</GuipToolTip> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</template> |
|
|
|
@ -49,13 +67,15 @@ |
|
|
|
<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> |
|
|
|
<div :class="billStatusClass(scope.row.status)">{{scope.row.status}}</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="money" label="操作"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<GuipButton type="text" @click="handleShowInfo(scope.row.tid)">查看核算账单</GuipButton> |
|
|
|
</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" |
|
|
|
@ -69,9 +89,13 @@ |
|
|
|
|
|
|
|
import GuipButton from "@/components/GuipButton.vue"; |
|
|
|
import GuipTable from "@/components/GuipTable.vue"; |
|
|
|
import GuipToolTip from "@/components/GuipToolTip.vue"; |
|
|
|
import PromptText from "@/components/PromptText.vue"; |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { |
|
|
|
PromptText, |
|
|
|
GuipToolTip, |
|
|
|
GuipTable, |
|
|
|
GuipButton, |
|
|
|
}, |
|
|
|
@ -128,15 +152,20 @@ export default { |
|
|
|
}) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
statusClass(status){ |
|
|
|
if(status == '已核算') return 'already_pay'; |
|
|
|
return 'not_pay' |
|
|
|
payoffStatusClass(status){ |
|
|
|
if(status == '异常') return 'status-info warning'; |
|
|
|
if(status == '成功') return 'status-info success'; |
|
|
|
return 'status-info default' |
|
|
|
}, |
|
|
|
billStatusClass(status){ |
|
|
|
if(status == '已核算') return 'status-info success'; |
|
|
|
return 'status-info default' |
|
|
|
}, |
|
|
|
handleClick(){ |
|
|
|
this.tableList = [] |
|
|
|
this.total_money = 0 |
|
|
|
if(this.totalType == 1) this.getRechargeData() |
|
|
|
if(this.totalType == 2) this.getRechargeList() |
|
|
|
if(this.totalType == 2) this.getPayoffList() |
|
|
|
if(this.totalType == 3) this.getBillList() |
|
|
|
}, |
|
|
|
getRechargeData() { |
|
|
|
@ -152,10 +181,10 @@ export default { |
|
|
|
console.error('数据加载失败:', error) |
|
|
|
} |
|
|
|
}, |
|
|
|
getRechargeList() { |
|
|
|
getPayoffList() { |
|
|
|
this.tableLoading = true |
|
|
|
try { |
|
|
|
this.$http('POST', '/agentnew/ajax_get_recharge_list', { |
|
|
|
this.$http('POST', '/agentnew/ajax_get_payoff_list', { |
|
|
|
type: this.walletType, |
|
|
|
cur_page: this.currentPage, |
|
|
|
page_size: this.pageSize |
|
|
|
@ -163,9 +192,6 @@ export default { |
|
|
|
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') |
|
|
|
@ -231,12 +257,18 @@ export default { |
|
|
|
this.currentPage = val |
|
|
|
this.getRechargeList() |
|
|
|
}, |
|
|
|
handleShowInfo(){ |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.recharge-wrap{ |
|
|
|
.payoff-wrap{ |
|
|
|
::v-deep .el-tabs__header{ |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
.pagetitle { |
|
|
|
text-align: left; |
|
|
|
font-size: 16px; |
|
|
|
@ -246,178 +278,29 @@ export default { |
|
|
|
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; |
|
|
|
.w16{ |
|
|
|
width: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
.buy-area{ |
|
|
|
.buy-btn{ |
|
|
|
font-size: 12px; |
|
|
|
width: 139px; |
|
|
|
color: #006AFF; |
|
|
|
letter-spacing: 0.08em; |
|
|
|
padding: 9px 16px; |
|
|
|
gap: 6px; |
|
|
|
.status-info{ |
|
|
|
display: inline-block; |
|
|
|
padding: 2px 10px; |
|
|
|
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{ |
|
|
|
.default{ |
|
|
|
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; |
|
|
|
.success{ |
|
|
|
color: #0DAF49; |
|
|
|
border-radius: 4px; |
|
|
|
background: rgba(239, 255, 224, 0.5); |
|
|
|
border: 1px solid rgba(0, 194, 97, 0.6); |
|
|
|
} |
|
|
|
.warning{ |
|
|
|
color: #FF4D4F; |
|
|
|
background: #FFF1F0; |
|
|
|
border: 1px solid #FFA39E; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
