qimall/addons/Sudoku/backend/views/log/index.php

<style>
    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .input-item {
        width: 250px;
        margin: 0 0 20px;
    }

    .input-item .el-input__inner {
        border-right: 0;
    }

    .input-item .el-input__inner:hover{
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input__inner:focus{
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    }

    .table-body .el-button {
        padding: 0!important;
        border: 0;
        margin: 0 5px;
    }
    /*头像样式 start*/
    .default-avatar{
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    .user_img{
        position: relative;
        margin-right: 8px;
        height: 50px;
        width: 50px;
    }
    .el-table_1_column_2 .cell { /*-2 表示在第二行*/
        display: flex;
    }
    /*头像样式 end*/
</style>
<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>抽奖记录</span>
        </div>
        <div class="table-body el-input--small">
            <el-form size="small" :inline="true" :model="search">
                <!--             <el-form-item>
                                <el-select style="width: 100px" v-model="search.status1">
                                    <el-option label="全部用户" value="0"></el-option>
                                    <el-option label="微信" value="1"></el-option>
                                    <el-option label="支付宝" value="2"></el-option>
                                </el-select>
                            </el-form-item> -->
                <el-form-item>
                    <el-select style="width: 100px" @change="typeSearch(search.type)" v-model="search.type">
                        <el-option label="全部" value="0" ></el-option>
                        <el-option label="余额红包" value="1"></el-option>
                        <el-option label="优惠券" value="2"></el-option>
                        <el-option label="积分" value="3"></el-option>
                        <el-option label="赠品" value="4"></el-option>
                        <el-option label="谢谢参与" value="5"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <div class="input-item">
                        <el-input @keyup.enter.native="idSearch(search.user_id)" size="small" placeholder="请输入用户ID" v-model="search.user_id" clearable @clear='idSearch(search.user_id)'>
                            <el-button slot="append" icon="el-icon-search" @click="idSearch(search.user_id)"></el-button>
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item>
                    <div class="input-item">
                        <el-input @keyup.enter.native="pondSearch(search.keyword)" size="small" placeholder="请输入用户手机号/昵称" v-model="search.keyword" clearable @clear='pondSearch(search.keyword)'>
                            <el-button slot="append" icon="el-icon-search" @click="pondSearch(search.keyword)"></el-button>
                        </el-input>
                    </div>
                </el-form-item>
            </el-form>
            <el-table v-loading="loading" :data="list"  stripe style="width: 100%">
                <el-table-column prop="id" label="ID" width="100"></el-table-column>
                <el-table-column label="会员" width="200">
                    <template slot-scope="scope">
                        <div class="table-info-img-text" v-if="scope.row.user">
                            <el-image class="table-info-img circle" :src="scope.row.user.avatar_url">
                                <div slot="error" class="image-slot">
                                    <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                </div>
                            </el-image>
                            <div class="table-info-text">
                                <div>{{scope.row.user.nickname}}</div>
                                <div>{{scope.row.user.mobile}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="物品" width="330">
                    <template slot-scope="scope">
                        <div class="table-info-img-text" v-if="scope.row.goods">
                            <el-image class="table-info-img" :src="scope.row.goods.cover_pic" v-if="scope.row.goods.cover_pic"></el-image>
                            <div class="table-info-text">
                                <div v-if="scope.row.order" style="cursor: pointer; color: #00a0e9;" @click="handle('detail',scope.row.order)">{{scope.row.order.order_no}}</div>
                                <com-ellipsis :line="1" :title="scope.row.goods.goods_name">{{scope.row.goods.goods_name}}</com-ellipsis>
                                <div v-if="scope.row.order">状态:
                                    <span v-if="scope.row.order.order_status=='0'">待付款</span>
                                    <span v-if="scope.row.order.order_status=='1'">待发货</span>
                                    <span v-if="scope.row.order.order_status=='2'">待收货</span>
                                    <span v-if="scope.row.order.order_status=='3'">已收货</span>
                                    <span v-if="scope.row.order.order_status=='4'">已完成</span>
                                    <span v-if="scope.row.order.order_status=='-4'">售后订单</span>
                                </div>
                            </div>
                        </div>
                        <div class="table-info-img-text" v-else >
                            <el-image class="table-info-img" :src="scope.row.sudoku.image_url" ></el-image>
                            <div class="table-info-text">
                                <div @click="handle('detail',scope.row.order)">{{scope.row.prize_name}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="领取状态">
                    <template slot-scope="scope">
                        <!-- <el-switch v-model="scope.row.status" active-value="1" inactive-value="0" disabled> </el-switch> -->
                        <div v-if="scope.row.prize_name == '谢谢参与'">--</div>
                        <div v-else-if="scope.row.status == 1">已领取</div>
                        <div v-else-if="scope.row.status == 0">未领取</div>
                    </template>
                </el-table-column>

                <el-table-column label="抽奖时间">
                    <template slot-scope="scope">
                        <div>{{scope.row.created_at | dateTimeFormat("Y-m-d H:i:s")}}</div>
                    </template>
                </el-table-column>

                <el-table-column prop="raffled_at" label="领取时间">
                    <template slot-scope="scope">
                        <span v-if="scope.row.prize_name == '谢谢参与'">--</span>
                        <span v-else-if="scope.row.receive_at != 0">{{ scope.row.receive_at | dateTimeFormat("Y-m-d H:i:s") }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div flex="box:last cross:center">
                <div style="visibility: hidden">
                    <el-button plain type="primary" size="small">批量操作1</el-button>
                    <el-button plain type="primary" size="small">批量操作2</el-button>
                </div>
                <div>
                    <el-pagination v-if="pagination" 
                        :page-size="pagination.pageSize"
                        background @current-change="pageChange"
                        layout="prev, pager, next" 
                        :total="pagination.total_count">
                    </el-pagination>
                </div>
            </div>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                search: {
                    type:'0',
                    user_id:'',
                    keyword: '',
                    page:1
                },
                prize_list:[],
                loading: false,
                list: [],
                pagination: null,
                page:1,
            };
        },

        methods: {
            //分页
            pageChange(page) {
                this.search.page = page;
                this.getList();
            },
            // 选择器筛选
            typeSearch(val) {
                this.search.type = val;
                this.getList();
            },
            // 关键词搜索
            pondSearch(val) {
                this.search.keyword = val;
                this.getList();
            },
            idSearch(val) {
                this.search.user_id = val;
                this.getList();
            },
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    // 订单详情
                    case 'detail':
                        let params = {
                            r: 'mall/order/detail'
                        };
                        if (id) params = Object.assign(params, {
                            id: id
                        });
                        navigateTo(params);
                        break;
                }
            },
            getList() {
                //this.loading = true;
                request({
                    params: {
                        r: '/sudoku/log/index',
                        ...this.search
                    },
                }).then(e => {
                    if (e.data.code == 0) {
                        this.loading = false;
                        this.list = e.data.data.list;
                        this.prize_list = e.data.data.prize_list;
                        this.pagination = e.data.data.pagination;
                        this.pagination.pageSize = e.data.data.page_size;
                        this.pagination.total_count = e.data.data.count;
                    }
                }).catch(e => {
                });
            },
        },
        created() {
            this.getList();
        }
    })
</script>