tuanfeng-pc-admin/src/views/order/halfSon/index.vue

<template>
    <div class="halfSon">
        <!-- 搜索 -->
        <div class="formSearch">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="订单id">
                    <el-input maxlength="20" v-model="formInline.orderId" placeholder="请输入" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" plain @click="searchOrder">查询</el-button>
                    <el-button type="info" plain @click="resetData">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 表格 -->
        <div class="tableBox">
            <el-table ref="multipleTable" v-loading="tableLoading" :data="tableData" border stripe :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
          tooltip-effect="dark" style="width: 100%">
                <el-table-column prop="orderId" label="订单id" width="150">
                </el-table-column>
                <el-table-column label="消息状态" width="250">
                    <template slot-scope="scope">
                        <span v-if="scope.row.code == -1">下单中</span>
                        <span v-if="scope.row.code == 1">下单成功</span>
                        <span v-if="scope.row.code == 2">已退款</span>
                        <span v-if="scope.row.code == -2">退款中</span>
                    </template>
                </el-table-column>
                <el-table-column prop="msg" label="消息" width="250">
                </el-table-column>
                <el-table-column prop="systemErro" label="系统错误" width="250">
                </el-table-column>
                <el-table-column prop="createTime" label="订单创建时间" width="=300">
                </el-table-column>
                <el-table-column prop="updateTime" label="订单更新时间" width="300">
                </el-table-column>
            </el-table>
            <div class="fenye">
          <el-pagination :current-page="formInline.page" :page-sizes="[10, 20, 50, 100]" :page-size="10"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div> 
        </div>
    </div>
</template>

<script>
import { halfOrder } from "@/api/order"
export default {
    data() {
        return {
            tableData: [],
            formInline:{
                orderId:"",
                page:1,
                pageSize:10
            },
            total:0,
            tableLoading:false
        }
    },
    created(){
        this.getHalfOrder()
    },
    methods: {
        //  请求数据的函数
        async getHalfOrder(){
            //  开始加载状态
            this.tableLoading = true
            let res = await halfOrder(this.formInline);
            const { data } = res
            this.tableData = data.records
            this.total = data.records.length
            this.tableLoading = false
        },
        //  条数的改变事件
        handleSizeChange(val){
            this.formInline.pageSize = val
            this.getHalfOrder()
        },
        
        //  分页的点击事件
        handleCurrentChange(val){
            this.formInline.page = val
            this.getHalfOrder()
        },
        //  查询订单
        searchOrder(){
            this.getHalfOrder()
        },
        //  重置订单
        resetData(){
            this.formInline.orderId = ""
            this.getHalfOrder()
        }
    },
}
</script>

<style lang="scss" scoped>
.halfSon {
    padding: 30px 0 0 30px;

    .formSearch {
        margin-bottom: 30px;
    }
    .fenye{
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 50px 0;
    }
}

::v-deep .el-table__cell{
    text-align: center;
}
</style>