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.
391 lines
16 KiB
391 lines
16 KiB
<template>
|
|
<div class="main-content12 payoff-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 payoff-set" v-if="totalType == '1'">
|
|
<el-form>
|
|
<div class="flex gap12 mb24">
|
|
<img src="@/assets/pay/pay_3.svg" alt="">
|
|
<span>支付宝收款</span>
|
|
<GuipSwitch float="right" :active-value="1" :inactive-value="0" activeText="开启" inactiveText="关闭" @change="onSwitchChange"></GuipSwitch>
|
|
</div>
|
|
<div class="payoff-area flex-between" v-if="payoffInfo">
|
|
<div class="payoff-info">
|
|
<div class="payoff-acc">收款支付宝账号：{{payoffInfo.openid}}</div>
|
|
<div class="payoff-name">收款人真实姓名：{{payoffInfo.realname}}</div>
|
|
</div>
|
|
<div class="flex gap12">
|
|
<span class="payoff-has">已配置</span>
|
|
<GuipButton type="system" @click="handlePayoffInfo()" :btnstyle="{'color':'#006AFF','background':'#FFFFFF','broder':'none',width:'126px'}">修改账号</GuipButton>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="payoff-area flex-between" v-else>
|
|
<div class="payoff-info">
|
|
<div class="payoff-acc">设置收款账号，开启平台代收款，平台收取5%服务费</div>
|
|
</div>
|
|
<div class="flex gap12">
|
|
<span class="payoff-no">未设置</span>
|
|
<GuipButton type="danger" @click="handlePayoffInfo()" :btnstyle="{'color':'#fff','background':'#FF4D4F','broder':'none',width:'126px'}">立即设置</GuipButton>
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
<div class="mt24" v-if="totalType == '2'">
|
|
<el-form>
|
|
<PromptText text="温馨提示：满200元自动结算，次日凌晨打款；通过微信收到的货款，有7天账期（例如：周一的收入，下周一才能结算提现）。" :type="1" class="mb32"/>
|
|
<GuipTable :tableData="tableList" :key="tableKey" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1">
|
|
<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_tid" label="第三方支付订单号" min-width="300px">
|
|
<template slot-scope="scope">
|
|
<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 placement="top" v-if="scope.row.status == '异常'" :manual="false" effect="light">
|
|
<img style="width: 16px;height: 16px;" src="@/assets/site/more_setIcon.png" alt="">
|
|
<template #content>
|
|
<div class="flex toolFilled">
|
|
<img src="@/assets/site/info_filled.svg" alt="">
|
|
<p>{{ scope.row.remark }}</p>
|
|
</div>
|
|
</template>
|
|
</GuipToolTip>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</GuipTable>
|
|
</el-form>
|
|
</div>
|
|
<div class="mt24" v-if="totalType == '3'">
|
|
<el-form>
|
|
<PromptText text="每天凌晨出具前一天已完成的订单账单" :type="1" class="mb32"/>
|
|
<GuipTable :tableData="tableList" :key="tableKey" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1">
|
|
<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 style="width: 20px;height: 20px;" :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="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.id,scope.row.uid,scope.row.pay_type)">查看核算账单</GuipButton>
|
|
</template>
|
|
</el-table-column>
|
|
</GuipTable>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<GuipDialog :dialogVisible="dialogVisible" title="修改支付宝收款方式" :show-close-button="false" :show-cancel-button="true" @confirm="handleSavePayoffInfo()" @cancel="handleHidePayoffInfo()">
|
|
<el-form :model="formData" :rules="formRules" ref="formRef" class="payoff-form">
|
|
<PromptText text="须知" :type="1">
|
|
<template #desc>
|
|
<div class="mt12">使用平台“支付宝支付”，平台收取5%的服务费</div>
|
|
<div class="mt12">使用平台“支付宝支付”，真实姓名必须和支付宝账号实名认证姓名统一</div>
|
|
</template>
|
|
</PromptText>
|
|
<GuipInput label="1. 收款人姓名" class="column" ref="GuipInput" prop="realname"
|
|
desc="请输入支付宝绑定的银行卡的持卡人姓名" :rules="formRules.realname" v-model="formData.realname"/>
|
|
|
|
<GuipInput label="2. 收款支付宝账号" class="column" ref="GuipInput" prop="openid"
|
|
desc="请输入有效账号" :rules="formRules.openid" v-model="formData.openid"/>
|
|
</el-form>
|
|
</GuipDialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
|
|
import GuipButton from "@/components/GuipButton.vue";
|
|
import GuipTable from "@/components/GuipTable.vue";
|
|
import GuipToolTip from "@/components/GuipToolTip.vue";
|
|
import PromptText from "@/components/PromptText.vue";
|
|
import GuipSwitch from "@/components/GuipSwitch.vue";
|
|
import GuipDialog from "@/components/GuipDialog.vue";
|
|
import GuipInput from "@/components/GuipInput.vue";
|
|
|
|
export default {
|
|
components: {
|
|
GuipInput,
|
|
GuipDialog,
|
|
GuipSwitch,
|
|
PromptText,
|
|
GuipToolTip,
|
|
GuipTable,
|
|
GuipButton,
|
|
},
|
|
data() {
|
|
return {
|
|
totalType:'1',
|
|
tableLoading:false,
|
|
|
|
payoffInfo:[],
|
|
dialogVisible: false,
|
|
formData: {
|
|
openid: '',
|
|
realname: '',
|
|
},
|
|
formRules: {
|
|
openid: [
|
|
{ required: true, message: '请输入收款人姓名', trigger: 'blur' }
|
|
],
|
|
realname: [
|
|
{ required: true, message: '请输入收款支付宝账号', trigger: 'blur' }
|
|
],
|
|
},
|
|
|
|
tableKey: '',
|
|
tableList:[],
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$nextTick(()=>{
|
|
if(this.$route.query.total_type)this.totalType = this.$route.query.total_type;
|
|
this.handleClick()
|
|
})
|
|
},
|
|
methods: {
|
|
onSwitchChange(){
|
|
|
|
},
|
|
handlePayoffInfo(){
|
|
this.dialogVisible = true
|
|
this.formData.openid = this.payoffInfo.openid
|
|
this.formData.realname = this.payoffInfo.realname
|
|
},
|
|
handleSavePayoffInfo(){
|
|
this.dialogVisible = false
|
|
this.$refs.formRef.validate((valid) => {
|
|
if(valid){
|
|
try {
|
|
this.$http('POST', '/agentnew/ajax_set_payoff_info', {
|
|
pay_type: this.payoffInfo.pay_type,
|
|
zfb_acct: this.formData.openid,
|
|
realname: this.formData.realname
|
|
}).then(response => {
|
|
if (response.status) {
|
|
this.$message.success('设置成功');
|
|
this.payoffInfo.openid = this.formData.openid
|
|
this.payoffInfo.realname = this.formData.realname
|
|
return true;
|
|
}
|
|
this.$message.error(response.info);
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
} catch (error) {
|
|
console.error('数据加载失败:', error)
|
|
}
|
|
}
|
|
});
|
|
},
|
|
handleHidePayoffInfo(){
|
|
this.dialogVisible = false
|
|
},
|
|
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 = []
|
|
if(this.totalType == 1) this.getPayoffData()
|
|
if(this.totalType == 2) this.getPayoffList()
|
|
if(this.totalType == 3) this.getBillList()
|
|
},
|
|
getPayoffData() {
|
|
try {
|
|
this.$http('POST', '/agentnew/ajax_get_payoff_info', {date: this.date}).then(response => {
|
|
this.$nextTick(() => {
|
|
this.payoffInfo = response.data
|
|
})
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
} catch (error) {
|
|
console.error('数据加载失败:', error)
|
|
}
|
|
},
|
|
getPayoffList() {
|
|
this.tableLoading = true
|
|
try {
|
|
this.$http('POST', '/agentnew/ajax_get_payoff_list', {}).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
|
|
}
|
|
},
|
|
getBillList() {
|
|
this.tableLoading = true
|
|
try {
|
|
this.$http('POST', '/agentnew/ajax_get_bill_list', {}).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
|
|
}
|
|
},
|
|
handleShowInfo(id,uid,pay_type){
|
|
this.$router.push(`/agent/payoffDetails?id=${id}&uid=${uid}&pay_type=${pay_type}&total_type=${this.totalType}`)
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.payoff-form{
|
|
::v-deep .prompt-text{
|
|
padding: 20px 14px;
|
|
}
|
|
::v-deep .prompt-desc{
|
|
font-weight: bold;
|
|
}
|
|
.column{
|
|
margin-bottom: 0;
|
|
margin-top: 24px;
|
|
}
|
|
}
|
|
.payoff-wrap{
|
|
::v-deep .el-tabs__header{
|
|
margin: 0;
|
|
}
|
|
::v-deep .el-form-item {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.pagetitle {
|
|
text-align: left;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
line-height: normal;
|
|
letter-spacing: 0.08em;
|
|
color: #1E2226;
|
|
margin-top: 8px;
|
|
}
|
|
.w16{
|
|
width: 16px;
|
|
}
|
|
.payoff-set{
|
|
background: #FAFAFA;
|
|
padding: 24px 14px;
|
|
}
|
|
.payoff-area{
|
|
padding: 24px 16px;
|
|
border-radius: 8px;
|
|
background: #FFFFFF;
|
|
letter-spacing: 0.08em;
|
|
font-size: 14px;
|
|
text-align: left;
|
|
.payoff-info{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
.payoff-acc{
|
|
color: #1E2226;
|
|
}
|
|
.payoff-name{
|
|
color: #6B7280;
|
|
letter-spacing: normal;
|
|
}
|
|
}
|
|
|
|
.payoff-has{
|
|
color: #00C261;
|
|
}
|
|
.payoff-no{
|
|
color: #FF4D4F;
|
|
}
|
|
}
|
|
|
|
.status-info{
|
|
display: inline-block;
|
|
padding: 2px 10px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.default{
|
|
color: #626573;
|
|
background: #F6F7FA;
|
|
border: 1px solid #DFE2E6;
|
|
}
|
|
.success{
|
|
color: #0DAF49;
|
|
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;
|
|
}
|
|
}
|
|
.toolFilled{
|
|
max-width: 457px;
|
|
padding: 12px 16px;
|
|
box-sizing: border-box;
|
|
color: #1E2226;
|
|
letter-spacing: 0.08em;
|
|
gap: 8px;
|
|
line-height: 20px;
|
|
img{
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
</style>
|