merchant/src/pages/subPages/order.vue

<template>
<el-container direction="vertical">
    <el-header height="40px">
        <el-date-picker
            v-model="dataRange"
            :clearable="false"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        <el-select v-model="RechargeType" placeholder="--充值类型--" style="margin-left: 10px">
            <el-option
                v-for="item in moneyType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>
        <el-button style="margin-left:10px;" type="primary" @click="queryList">查询</el-button>
        <el-button style="margin-left:10px;" type="danger" @click="onReset">重置</el-button>
    </el-header>

    <!-- 订单总数 -->
    <!-- <el-alert
        :title="'订单总数 : ' + oderCount +'笔 成功订单数 : ' + successCount + '笔 成功率 : '+ SuccessRate + '订单总金额 : '+ countMoney +'元 成功订单总金额 : '+successMoney +' 元 商户扣款 :'+deduction + '元'"
        type="info"
        show-icon
        style="margin-top:20px"
        :closable="false">
    </el-alert> -->
   
    <el-table :data="tableData" border style="width: 100%; margin-top:20px">
        <el-table-column align="center" type="index" width="50" label="序号" />
        <el-table-column align="center" prop="card_no" label="卡号"></el-table-column>
        <el-table-column align="center" prop="mch_amount" label="充值金额"></el-table-column>
        <!-- TODO -->
        <el-table-column align="center" prop="card_type_name" label="充值类型"></el-table-column>
        <el-table-column align="center" prop="order_time" label="充值时间"></el-table-column>
        <el-table-column align="center" prop="notify_time" label="成功时间"></el-table-column>
        <el-table-column align="center" prop="notify_state" label="充值状态"></el-table-column>
        <el-table-column align="center" prop="ch_trade_no" label="批次号"></el-table-column>
        <el-table-column align="center" prop="order_sn" label="平台单号"></el-table-column>
        <!-- TODO -->
        <el-table-column align="center" prop="mch_order" label="客户单号"></el-table-column>
    </el-table>
    <el-row style="margin-top:10px;" type="flex" justify="end">
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page="pageNumber" @current-change="onPageChange"></el-pagination>
    </el-row>
</el-container>
</template>

<script>
import {
    // actionLogList
    getOrderList,
    queryList
} from "@/api";
import { moneyType } from '@/utils/constants'
// import getIp from '@/utils/ip'
export default {
    name: 'order',
    data() {
        return {
            tableData: [
                // {card_no: 123},
                // {card_no: 1234},
                // {card_no: 1235},
                // {card_no: 1236},
                // {card_no: 1237},
                // {card_no: 1238},
                // {card_no: 1239},
                // {card_no: 1231},
                // {card_no: 113},
                // {card_no: 111},
                // {card_no: 133},
                // {card_no: 143},
                // {card_no: 153},
                // {card_no: 163},
                // {card_no: 173},
                // {card_no: 183},
                // {card_no: 193},
                // {card_no: 193},
                // {card_no: 193},
                // {card_no: 193},
                // {card_no: 193},
                // {card_no: 193},
            ],
            pageSize: 10,
            pageNumber: 1,
            total: 0,
            // 筛选时间 start_time end_time
            dataRange: [],
            // 订单总数
            // oderCount: 0,
            // 成功订单数
            // successCount: 0,
            // 成功率
            // SuccessRate: 0,
            // 订单总金额
            // countMoney: 0,
            // 成功订单总金额
            // successMoney: 0,
            // 商户扣款
            // deduction: 0,
            // 充值类型 常量
            moneyType,
            // 充值
            RechargeType: ''

        };
    },
    created () {
        // this.getActionLogList();
        this.getOrderList()
    },
    methods: {
        // 获取订单列表
        async getOrderList () {
            const res = await getOrderList(1)
            console.log('订单列表', res);
            this.tableData = res.datas.data
            this.total = res.datas.total * this.pageSize
            // const res = await getIp()
            // console.log('res', res);
        },
        // getActionLogList() {
        //     const _self = this;
        //     actionLogList({
        //         pageSize: _self.pageSize,
        //         pageNumber: _self.pageNumber,
        //     }).then((res) => {
        //         console.log(res);
        //         if (res && res.msg == "ok") {
        //             _self.total = res.data.total;
        //             _self.tableData = [...res.data.rows];
        //         }
        //     });
        // },
        // 查询
        async queryList() {
            const startTime = this.dataRange[0]
            const endTime = this.dataRange[1]
            const res = await queryList(this.pageNumber, startTime, endTime, this.RechargeType)
            console.log('查询订单', res);
            this.tableData = res.datas.data
            this.total = res.datas.total * this.pageSize
        },
        // 重置
        onReset() {
            this.pageNumber = 1;
            this.dataRange = [];
            this.RechargeType = ''
            this.getOrderList();
        },
        // 分页
        async onPageChange(page) {
            if (page == this.pageNumber) {
                return;
            } else {
                this.pageNumber = page;
                // setTimeout(() => {
                //     // this.getActionLogList();
                //     this.getOrderList(this.pageNumber)
                // }, 0);
                const startTime = this.dataRange[0]
                const endTime = this.dataRange[1]
                const res = await queryList(this.pageNumber, startTime, endTime, this.RechargeType)
                console.log('查询订单', res);
                this.tableData = res.datas.data
            }
        },
    },
};
</script>

<style scoped>
.el-header {
    padding: 0;
}
</style>