qimall/addons/Alitopay/backend/views/order/index.php

<div id="app" v-cloak>
    <el-card shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;">

        <div slot="header">
            <div>
                <span>代付订单</span>
            </div>
        </div>
        <div class="table-body">
            批次号：
            <div class="input-item">
                <el-input @keyup.enter.native="search" size="small" placeholder="批次号" v-model="searchData.batch_sn" clearable @clear="search"></el-input>
            </div>
            收款人：
            <div class="input-item">
                <el-input @keyup.enter.native="search" size="small" placeholder="收款人" v-model="searchData.name" clearable @clear="search"></el-input>
            </div>
            收款账户：
            <div class="input-item">
                <el-input @keyup.enter.native="search" size="small" placeholder="收款账户" v-model="searchData.account" clearable @clear="search"></el-input>
            </div>
            <br>
            提现订单：
            <div class="input-item">
                <el-input @keyup.enter.native="search" size="small" placeholder="提现订单" v-model="searchData.source_sn" clearable @clear="search"></el-input>
            </div>
            订单类型：
            <div class="input-item">
                <el-select size="small" v-model="searchData.type" @change='search' class="select">
                    <el-option :key="1" label="提现打款" value="1" >提现打款</el-option>
                    <el-option :key="2" label="手动转账" value="2" >手动转账</el-option>
                </el-select>
            </div>
            状态：
            <div class="input-item">
                <el-select size="small" v-model="searchData.status" @change='search' class="select">
                    <el-option :key="1" label="待打款" value="1" >待打款</el-option>
                    <el-option :key="2" label="打款中" value="2" >打款中</el-option>
                    <el-option :key="3" label="成功" value="3" >成功</el-option>
                    <el-option :key="4" label="失败" value="4" >失败</el-option>
                    <el-option :key="5" label="超时" value="5" >超时</el-option>
                </el-select>
            </div>
            <div  class="input-item" style="display: inline-block;margin-left: 10px;">
                <el-button type="primary" size="small" @click="search">查询</el-button>
                <el-button type="primary" size="small" @click="resetForm" style=" margin-left: 0px;background-color: #ef1818;border-color: #ef1818;">重置</el-button>
            </div>
            <el-table v-loading="listLoading" :data="list" stripe>
                <!-- 空数据 -->
                <template slot="empty">
                    <el-empty description="暂无通知"></el-empty>
                </template>

                <el-table-column prop="id" width="80px" label="ID" align="center">
                </el-table-column>
                <el-table-column prop="batch_sn" width="120px" label="批次号/订单号" align="center">
                    <template slot-scope="scope">
                        {{scope.row.batch_sn}}<br>
                        {{scope.row.order_sn}}
                    </template>
                </el-table-column>
                <el-table-column prop="response" label="收款人" align="center">
                    <template slot-scope="scope">
                        {{scope.row.name}}<br>
                        {{scope.row.account}}
                    </template>
                </el-table-column>
                    <el-table-column prop="money" width="120px" label="打款金额" align="center">
                    </el-table-column>
                <el-table-column prop="data" label="类型" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type == 1">
                            提现打款
                            <br>
                            {{scope.row.source_sn}}
                        </span>
                        <span v-else>
                            手动打款
                        </span>
                    </template>
                </el-table-column>
                    <el-table-column  width="120px" label="状态" align="center">

                        <template slot-scope="scope">
                            <span v-if="scope.row.status == 1">
                            待打款
                            </span>
                            <span v-if="scope.row.status == 2">
                            打款中
                            </span>
                            <span v-if="scope.row.status == 3">
                            打款成功
                            </span>
                            <span v-if="scope.row.status == 4">
                            打款失败
                            </span>
                            <span v-if="scope.row.status == 5">
                            订单超时
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="created_at" min-width="120px" label="创建/修改时间" align="center">
                    <template slot-scope="scope">
                        {{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}<br>
                        {{scope.row.updated_at|dateTimeFormat('Y-m-d H:i:s')}}
                    </template>
                </el-table-column>
                <el-table-column prop="msg" width="80px" label="失败信息" align="center">
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="toPay(scope.row)" v-if="scope.row.status == 1" type="text" size="small">打款</el-button>
                        <el-button @click="orderQuery(scope.row)" v-if="scope.row.status == 2" type="text" size="small">查询</el-button>
                        <el-button @click="orderApplyBill(scope.row)" v-if="scope.row.status == 3 &&scope.row.download_url == ''" type="text" size="small">申请电子回单</el-button>
                        <el-button @click="seeBill(scope.row)" v-if="scope.row.status == 3 &&scope.row.download_url != ''" type="text" size="small">电子回单</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div style="text-align: right;margin: 20px 0;" v-if="list">
                <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount">
                </el-pagination>
            </div>
        </div>
    </el-card>

</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                searchData:{
                    name:undefined,
                    batch_sn:undefined,
                    account:undefined,
                    source_sn:undefined,
                    type:undefined,
                    status:undefined,
                    r: 'alitopay/order/index',
                },
                list: [],
                type: '',
                supply_id: '',
                listLoading: false,
                page: 1,
                pageCount: 0,
            };
        },
        methods: {
            search() {
                this.page = 1;
                this.getList();
            },
            //重置
            resetForm() {
                this.searchData.name= undefined
                this.searchData.batch_sn= undefined
                this.searchData.account= undefined
                this.searchData.source_sn= undefined
                this.searchData.type= undefined
                this.searchData.status= undefined
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();
            },
            orderQuery(order){
                this.listLoading = true;
                request({
                    params: {
                        r:'alitopay/order/query',
                        id:order.id
                    },
                    method: 'get',
                }).then(e => {
                    this.listLoading = false;
                    if (e.data.code == 0){
                        this.$message.success(e.data.msg);
                        this.getList()
                    }else{
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            },
            orderApplyBill(order){
                this.listLoading = true;
                request({
                    params: {
                        r:'alitopay/order/apply-bill',
                        id:order.id
                    },
                    method: 'get',
                }).then(e => {
                    this.listLoading = false;
                    if (e.data.code == 0){
                        this.$message.success(e.data.msg);
                        this.getList()
                    }else{
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            },
            seeBill(order){
                window.open(order.download_url,'top')
            },
            getList() {
                this.listLoading = true;
                request({
                    params:this.searchData,
                    method: 'get',
                }).then(e => {
                    this.listLoading = false;
                    this.list = e.data.data.list;
                    this.pageCount = e.data.data.page_count;
                }).catch(e => {
                });
            },

        },
        mounted: function() {
            this.getList();
        }
    });
</script>
<style>
    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .input-item {
        display: inline-block;
        width: 250px;
        margin: 0 0 20px;
    }

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    }

    .table-body .el-button {
        border: 0;
        margin: 0 5px;
    }

    .el-table th>.cell {
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }

    .el-table__footer-wrapper,
    .el-table__header-wrapper {
        border-bottom: 1.4px solid #D6D6D6;
    }
</style>