qimall/addons/Clerk/backend/views/clerk-log/index.php

<?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;">
        <div slot="header">
            <span>核销统计</span>
        </div>
        <div class="table-body">
            <div class="input-item">
                <el-input  size="small" placeholder="请输入用户id" v-model="search.user_id"
                          clearable @clear="toSearch">
                </el-input>
            </div>
            <div class="input-item">
                <el-input  size="small" placeholder="请输入手机号" v-model="search.keyword"
                          clearable @clear="toSearch">
                </el-input>
            </div>
            <div class="input-item2">
                <el-date-picker   el-date-picker
                v-model="time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期" @change="timechange" value-format="yyyy-MM-dd" >
                </el-date-picker>
            </div>

            <el-button type="primary" size="small" style="padding: 9px 15px !important;" icon="el-icon-search" @click="toSearch">搜索</el-button>
            <el-button  size="small" style="padding: 9px 15px !important;" icon="el-icon-refresh-right" @click="reset">重置</el-button>
            
            <el-table :data="list" :default-sort = "{prop: 'time'}">
                <el-table-column   el-table-column label="核销员ID" prop="user_id" align="center">
                </el-table-column>

                <el-table-column   el-table-column label="核销员名称" prop="nickname" align="center">
                </el-table-column>

                <el-table-column   el-table-column label="联系电话" prop="mobile" align="center">
                </el-table-column>

                <el-table-column   el-table-column label="所属门店" prop="store_name" align="center">
                </el-table-column>

                <el-table-column   el-table-column label="电子劵名称" prop="title" align="center">
                </el-table-column>

                <el-table-column   el-table-column label="佣金" prop="commission" align="center">
                </el-table-column>

                <el-table-column   el-table-column label="核销时间" prop="created_at" align="center" sortable>
                    <template slot-scope="scope">
                        {{timeformat(scope.row.created_at)}}
                    </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: {
            search: {
                start:'',
                end:'',
                keyword:'',
                user_id:'',
                page: this.current_page
            },
            time:[],
            list:[],
            page_count:0,
            pageSize:10,
            totalCount:0,
            current_page:1
        },
        mounted() {
           this.getDataList()
        },
        methods: {
            //  获取数据
            getDataList(search = {}) {
                request({
                    params: {
                        r: 'clerk/clerk-log/index',
                        ...search
                    },
                    method: 'get',
                }).then(e => {
                    console.log(e.data.data);
                    this.list = e.data.data.list
                    this.page_count = e.data.data.page_count
                    this.pageSize = e.data.data.page_size
                    this.totalCount = e.data.data.count
                }).catch(e => {
                    this.dialogLoading = false;
                    this.$message.error('未知错误');
                });
                
            },
            loadData() {
                this.getDataList(this.search)
            },
            // 搜索
            toSearch() {
                this.getDataList(this.search)
            },
            // 重置
            reset() {
                this.search = {
                    user_id: '',
                    keyword:'',
                    start:'',
                    end:'',
                    page:1
                },
                this.getDataList(this.search)
            },
            // 分页
            pageChange(v) {
                this.search.page = v
                this.getDataList(this.search)
            },
            timechange(v) {
                if(v == null) {
                    v = ['','']
                    this.time = ['','']
                    this.search.start = null
                    this.search.end = null
                }else {
                    this.search.start = v[0] + ' 00:00:00'
                    this.search.end = v[1] + ' 00:00:00'
                }
                this.getDataList(this.search)
            },
            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>
    .table-body{
        padding: 20px;
        background-color: #fff;
    }
    .input-item {
        width: 250px;
        margin: 0 10px 20px;
        display: inline-block;
    }
    .input-item2 {
        width: 350px;
        margin: 0 10px 20px;
        display: inline-block;
    }
</style>