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&nbspHH: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">查询</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="admin_id" 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="content" 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
} from "@/api";
import { moneyType } from '@/utils/constants'
export default {
    name: 'order',
    data() {
        return {
            tableData: [],
            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()
            console.log('订单列表', res);
            this.tableData = res.datas
        },
        // 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];
        //         }
        //     });
        // },
        // 分页
        onPageChange(page) {
            if (page == this.pageNumber) {
                return;
            } else {
                this.pageNumber = page;
                setTimeout(() => {
                    // this.getActionLogList();
                    this.getOrderList()
                }, 0);
            }
        },
    },
};
</script>

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