qimall/addons/Store/client/views/coupon/user-coupon.php

<style>
    .set-el-button {
        padding: 0!important;
        border: 0;
        margin: 0 5px;
    }
    .sort-input {
        width: 100%;
        background-color: #F3F5F6;
        height: 32px;
    }

    .sort-input span {
        height: 32px;
        width: 100%;
        line-height: 32px;
        display: inline-block;
        padding: 0 10px;
        font-size: 13px;
    }

    .sort-input .el-input__inner {
        height: 32px;
        line-height: 32px;
        background-color: #F3F5F6;
        float: left;
        padding: 0 10px;
        border: 0;
    }

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

    .table-info .el-button {
        padding: 0 !important;
        border: 0;
        margin: 0 5px;
    }

    .input-item {
        display: inline-block;
        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;
    }
    .el-table th>.cell {
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }

    .table1 .el-table__footer-wrapper,
    .table1 .el-table__header-wrapper {
        border-bottom: 1.4px solid #D6D6D6;
    }
    .user_img{
        position: relative;
        margin-right: 8px;
        /* height: 50px;
        width: 50px; */
    }
    .default-avatar{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 8px;
    }
    .uer-nickname {
        flex: 1;
    }
</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">
            <div class="input-item">
                <el-input @keyup.enter.native="search" size="small" placeholder="请输入优惠券名称搜索" v-model="keyword" clearable @clear="search">
                <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                </el-input>
            </div>
            <div class="input-item">
                <el-input @keyup.enter.native="search" size="small" placeholder="请输入会员ID" v-model="user_id" clearable @clear="search">
                    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                </el-input>
            </div>
            <div class="input-item">
                <el-select v-model="from_type" placeholder="请选择" size="small">
                    <el-option v-for="(item,index) in from_type_text" :key="index" :label="item" :value="index">{{item}}
                    </el-option>
                </el-select>
            </div>
            <div class="input-item">
                <el-button type="primary" size="small" @click="search" style="margin-left: 15px;">搜索</el-button>
                <el-button type="warning" @click="clereSearch" v-if="keyword || user_id" style="padding: 9px 15px !important;">清除搜索条件</el-button>
            </div>

            <el-table v-loading="loading"  :data="list" style="width: 100%;margin-bottom: 15px">
                <el-table-column width='100' prop="user_id" label="会员ID" align='center' ></el-table-column>
                <el-table-column label="会员" align='center' width="180">
                    <template slot-scope="scope">
                        <div class="user_img" flex="cross:center">
                            <el-image class="default-avatar" :src="scope.row.avatar_url">
                                <div slot="error" class="image-slot">
                                    <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                </div>
                            </el-image>
                            <div class="uer-nickname over1" v-if="scope.row.nickname">{{scope.row.nickname}}</div>
                            <div class="uer-nickname over1" v-else>--</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column width='100' align='center' prop="from_type" label="类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.from_type == 1">
                            平台门店券
                        </span>
                        <span v-else-if="scope.row.from_type == 2">
                            门店独立券
                        </span>
                    </template>
                </el-table-column>

                <el-table-column width='100' align='center'  prop="coupon_id" label="优惠券id"></el-table-column>
                <el-table-column width='150' align='center'  prop="name" label="优惠券名称"></el-table-column>
                <el-table-column width='150' align='center'  prop="min_price" label="最低消费金额（元）"></el-table-column>
                <el-table-column width='150' align='center'  prop="sub_price" label="优惠方式">
                    <template slot-scope="scope">
                        <div>{{scope.row.content}}</div>
                    </template>
                </el-table-column>
                <el-table-column width='120' align='center'  prop="sub_price" label="使用范围">
                    <template slot-scope="scope">
                        <span v-if="scope.row.appoint_type == 1">指定商品类目</span>
                        <span v-if="scope.row.appoint_type == 2">指定商品</span>
                        <span v-if="scope.row.appoint_type == 3">全场通用</span>
                        <span v-if="scope.row.appoint_type == 4">指定门店</span>
                    </template>
                </el-table-column>
                <el-table-column width='180' align='center'  prop="receive_platform" label="领取来源">
                    <template slot-scope="scope">
                        <span>{{scope.row.receive_type}}</span>
                    </template>
                </el-table-column>
                <el-table-column width='180' align='center'  prop="is_use" label="是否使用">
                    <template slot-scope="scope">
                        <span v-if="scope.row.is_use == 1">
                            已使用
                        </span>
                        <span v-else-if="scope.row.is_use == 0">
                            未使用
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width='150' align='center'  prop="created_at" label="领取时间">
                    <template slot-scope="scope">
                       {{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}
                    </template>
                </el-table-column>
                <el-table-column width='150'align='center'   prop="created_at" label="使用时间" align="center">
                    <template slot-scope="scope">
                         <span v-if="scope.row.is_use == 1">
                            {{scope.row.used_time|dateTimeFormat('Y-m-d H:i:s')}}
                         </span>
                         <span v-else>--</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="page_size" style="float: right;" background @current-change="pageChange" layout="prev, pager, next" :total="pagination.totalCount">
                    </el-pagination>
                </div>
            </div>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                list: [],
                keyword: '',
                user_id: '',
                from_type: '',
                pagination: null,
                page: 1,
                page_size: 10,
                from_type_text: {
                    1: '平台门店券',
                    2: '门店独立券'
                },
            };
        },

        methods: {
            //搜索
            search() {
                this.page = 1;
                this.loadData();
            },
            // 清除搜索条件
            clereSearch() {
                this.keyword = '';
                this.from_type = '';
                this.user_id = null;
                this.loadData();
            },
            //分页
            pageChange(page) {
                this.page = page;
                this.loadData();
            },

            // 根据参数获取请求信息
            loadData() {
                this.loading = true;
                console.log(this.keyword)
                request({
                    params: {
                        r: 'store/client/coupon/user-coupon',
                        keyword: this.keyword,
                        user_id: this.user_id,
                        from_type: this.from_type,
                        page: this.page,
                    },
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.list = e.data.data.list;
                        this.pagination = e.data.data.pagination;
                        this.page_size = e.data.data.page_size;
                    } else {
                        this.listLoading = false;
                        this.$message({
                            message: e.data.msg,
                            type: 'error'
                        });
                    }
                }).catch(e => {
                    this.listLoading = false;
                });
            }
        },
        created() {
            this.loadData();
        }
    })
</script>