mashangyoujiu/Application/Retail/View/FranchiseDeal/order.html

<!--订单流水-查看详情-->
<!--[1.9.20]-->
<style>
    #FranchiseDealOrder .title {
        padding: 0 0 10px;
        font-size: 15px;
        color: #333;
    }
</style>
<div id="FranchiseDealOrder" v-cloak style="padding: 20px">
    <div class="title">{{store_name}} - {{franchisee_time}}</div>

    <el-select v-model="type"
               clearable
               size="small"
               @change="currentPage=1;getData()"
               placeholder="订单类型">
        <el-option v-for="item in typeList"
                   :key="item.type"
                   :label="item.name"
                   :value="item.type">
        </el-option>
    </el-select>

    <select-pay-order-pay-type :pay-type.sync="pay_type" @change="handleCurrentChange(1)"></select-pay-order-pay-type>

    <el-select v-model="scene_type"
               clearable
               size="small"
               @change="currentPage=1;getData()"
               placeholder="场景">
        <el-option v-for="item in sceneList"
                   :key="item.type"
                   :label="item.name"
                   :value="item.type">
        </el-option>
    </el-select>
    <div style="width: 100%">
        <el-table :data="tableData" size="small" border style="width: 100%;margin-top: 10px">
            <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
            <el-table-column align="center" prop="order_state" label="类型"></el-table-column>
            <el-table-column align="center" prop="pay_type" label="支付方式"></el-table-column>
            <el-table-column align="center" prop="out_trade_no" label="内部流水号" min-width="150px"></el-table-column>
            <el-table-column align="center" prop="trade_no" label="其他流水号" min-width="150px">
                <template slot="header" slot-scope="scope">
                    <span>其他流水号</span>
                    <el-tooltip class="item" effect="dark" content="微信、支付宝、新大陆官方流水号"
                                placement="top-start">
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </template>
                <template slot-scope="scope">{{scope.row.trade_no}}</template>
            </el-table-column>
            <el-table-column align="center" prop="add_time" label="时间" min-width="150px"></el-table-column>
            <el-table-column align="center" prop="trade_amount" label="金额（元）"></el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[10, 20, 30, 40]"
                       :page-size="limit"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total_num">
        </el-pagination>
    </div>

</div>
<script src="/Public/Retail/js/select-pay-type.js?v=1.0.1"></script>
<script type="text/javascript">
    var FranchiseDealOrder = new Vue({
        el: '#FranchiseDealOrder',
        data: function () {
            return {
                tableData: [],
                currentPage: 1,
                limit: 10,
                total_num: 0,
                franchisee_time: '',
                type: '',//1付款  2退款
                pay_type: '',
                store_name: '',
                scene_type: '',
                sceneList: [
                    {
                        type: 1,
                        name: '营业',
                    }, {
                        type: 2,
                        name: '快捷',
                    }, {
                        type: 3,
                        name: '充值',
                    },
                ],
                typeList: [
                    {
                        type: 1,
                        name: '支付',
                    }, {
                        type: 2,
                        name: '退款',
                    },
                ]
            }
        },
        methods: {
            getData() {
                $.ajax({
                    url: "{:U('getOrderList')}",
                    type: 'post',
                    data: {
                        page: this.currentPage,
                        limit: this.limit,
                        store_id: this.store_id,
                        type: this.type,
                        franchisee_time: this.franchisee_time,
                        pay_type: this.pay_type,
                        scene_type: this.scene_type,
                    },
                    dataType: 'json',
                    success: res => {
                        console.log(res);
                        if (res.status == 1) {
                            this.tableData = res.data;
                            this.total_num = parseInt(res.pages.total_num);
                        } else {
                            this.$confirm(res.msg, "错误提示", {
                                confirmButtonText: '确定',
                                showCancelButton: false,
                                type: 'error'
                            }).then(() => {
                            }).catch(() => {
                            })
                        }
                    },
                    error: res => {
                        this.requestError(res);
                    }
                })
            },
            //错误提示
            requestError(res) {
                console.log(res);
                this.$confirm("请求发生错误", "错误提示", {
                    confirmButtonText: '确定',
                    showCancelButton: false,
                    type: 'error'
                }).then(() => {
                }).catch(() => {
                })
            },
            handleSizeChange: function (val) {
                this.limit = val; //切换每页数量
                this.currentPage = 1;
                this.getData();
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.getData(); //切换页数
            },
        },

        mounted() {
            var data = JSON.parse(sessionStorage.getItem("operatingReceipt"));
            this.franchisee_time = data.franchisee_time;
            this.store_id = data.store_id;
            this.store_name = data.store_name;
            this.getData();
        }
    });
</script>