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

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1000px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;" v-loading="loading">
        <div slot="header">
            <span>订单详情</span>
        </div>
        <div class="table-body">

            <div class="search-item">
                <el-input size="small" placeholder="请输入订单号" v-model="search.order_no"
                          clearable @clear="toSearch">
                </el-input>
            </div>

            <div class="search-item">
                <el-input size="small" placeholder="请输入手机号" v-model="search.mobile"
                          clearable @clear="toSearch">
                </el-input>
            </div>
            
            <div class="search-item">
                <el-input size="small" placeholder="请输入ID" v-model="search.user_id"
                          clearable @clear="toSearch">
                </el-input>
            </div>

            <div  class="search-item">
                <el-date-picker v-model="time" type="daterange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" @change="timeChange" value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </div>

            <el-button type="primary" size="small" icon="el-icon-search" style="padding: 9px 15px !important;" @click="toSearch">搜索</el-button>
            <el-button  size="small" icon="el-icon-refresh-right" style="padding: 9px 15px !important;" @click="reset">重置</el-button>

            <el-table :data="list" stripe  v-loading="loading" size="small" style="margin: 15px 0;">

                <el-table-column prop="order_no"  label="订单号" align="center"></el-table-column>

                <el-table-column prop="activity_title"  label="活动名称" align="center"></el-table-column>

                <el-table-column prop="detail[0].goods_name"  label="商品信息" align="center">
                </el-table-column>

                <el-table-column prop="activity_price"  label="秒杀价格" align="center">
                </el-table-column>

                <el-table-column prop="detail[0].num"  label="购买数量" align="center"></el-table-column>

                <el-table-column prop="goods_price"  label="实付价格" align="center"></el-table-column>

                <el-table-column prop="updated_at"  label="修改时间" align="center">
                    <template slot-scope="scope">
                        {{timeformat(scope.row.updated_at)}}
                    </template>
                </el-table-column>

                <el-table-column prop="user_id"  label="用户信息" align="center">
                    <template slot-scope="scope">
                        {{scope.row.base_user.nickname}} {{scope.row.base_user.mobile}}
                    </template>
                </el-table-column>


            </el-table>
            <div flex="box:last cross:center">
                <div></div>
                <div>
                    <el-pagination
                            v-if="list.length > 0"
                            style="display: inline-block;float: right;"
                            background :page-size="pageSize"
                            @current-change="pageChange"
                            layout="prev, pager, next" :current-page="current_page"
                            :total="totalCount">
                    </el-pagination>
                </div>
            </div>
        </div>
    </el-card>
</div>
<script>
     const app = new Vue({
        el: '#app',
        data: {
            loading:false,
            search: {
                activity_id:'',
                order_no:'',
                mobile:'',
                user_id:"",
                begin:'',
                end:'',
                page:null
            },
            loading: false,
            time:[],
            list:[],
            pageSize:20,
            current_page:1,
            totalCount:0,
        },
        // created() {

        // },
        mounted() {
            console.log(getQuery('id'));
            if(getQuery('id')) {
                this.search.activity_id = getQuery('id')
            }else {

            }
            this.getDataList(this.search)

        },
        methods: {
            // 获取数据
            getDataList(search = {}) {
                this.loading = true;
                request({
                        params: {
                            r: '/seckill/order/list',
                            ...search
                        },
                        method: 'get',
                    }).then(e => {
                       console.log(e,'77777777777');
                       this.loading = false;
                       this.list = e.data.data.list
                    }).catch(e => {
                        this.loading = false;
                    });
            },
            //重置
            reset() {
                if(getQuery('id')) {
                    this.search.user_id = getQuery('id')
                    this.getDataList(this.search)
                }else {
                    this.getDataList()
                }
            },
            pageChange(v) {
                this.search.page = v
                this.getDataList(this.search)
            },
            // 搜索
            toSearch() {
                this.getDataList(this.search)
            },
            timeChange(v) {
                console.log(v,'time99999999999');
                if(v) {
                    this.search.begin = v[0]
                    this.search.end = v[1]
                }else {
                    this.search.begin = ''
                    this.search.end = ''
                }
               
            },
            timeformat(v) {
                let time = new Date(v*1000)
                return time.getFullYear() +'/'+(time.getUTCMonth()+1)+'/'+time.getDate() + ' '+ (time.getHours()<10?'0' +time.getHours():time.getHours()) +':'+ (time.getMinutes()<10?'0'+time.getMinutes():time.getMinutes()) + ':'+ (time.getSeconds()<10?'0'+time.getSeconds():time.getSeconds())
            },
        }
     })
</script>
<style>
     .search-item {
        display: inline-block;
        margin: 0 20px 0 0 ;
    }
</style>