kuailelunwen_new_houtai/src/views/agent/payoff.vue

<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" 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 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 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>
                    <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="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>
                    </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";
import GuipToolTip from "@/components/GuipToolTip.vue";
import PromptText from "@/components/PromptText.vue";

export default {
    components: {
        PromptText,
        GuipToolTip,
        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: {
        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.getPayoffList()
            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)
            }
        },
        getPayoffList() {
            this.tableLoading = true
            try {
                this.$http('POST', '/agentnew/ajax_get_payoff_list', {
                    type: this.walletType,
                    cur_page: this.currentPage,
                    page_size: this.pageSize
                }).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', {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()
        },
        handleShowInfo(){

        }
    }
}

</script>
<style lang="scss" scoped>
.payoff-wrap{
  ::v-deep .el-tabs__header{
    margin: 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;
  }
  .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;
  }
}
</style>