qimall/addons/Coupon/backend/views/user-coupon/index.php

<?php
    use common\helpers\ComponentHelper;
    ComponentHelper::loadComponentView('com-user-info');
?>
<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;
    }

    .trans-block {
        padding: 0 15px;
    }

    .status-search .el-input__inner{
        border: 1px solid #DCDFE6 !important;
    }
</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-form :inline="true" :model="search_data" size="small" class="demo-form-inline">
            <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-input @keyup.enter.native="search" size="small" placeholder="请输入手机号" v-model="mobile" clearable @clear="search">
                    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                </el-input>
            </div>
            <div class="input-item status-search">
                <el-select v-model="status" placeholder="请选择" size="small">
                    <el-option label="全部" :value="0"></el-option>
                    <el-option v-for="(item,index) in status_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 || mobile || status" style="padding: 9px 15px !important;">清除搜索条件</el-button>
            </div>
            </el-form>
            <el-button  @click="allDeleteBatch" size="mini">批量删除</el-button>
            <el-table v-loading="loading"  :data="list" style="width: 100%;margin-bottom: 15px" @selection-change="handleSelectionChange">
                <el-table-column type="selection" align="center" width="60"></el-table-column>
                <el-table-column prop="id" label="ID"></el-table-column>
                <el-table-column prop="user_id" label="会员ID"></el-table-column>
                <el-table-column label="会员" 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  prop="name" label="优惠券名称"></el-table-column>
                <el-table-column prop="min_price" label="最低消费金额（元）"></el-table-column>
                <el-table-column prop="sub_price" label="优惠方式">
                    <template slot-scope="scope">
                        <!-- <div v-if="scope.row.type == 2">优惠:{{scope.row.sub_price}}元</div>
                        <div v-if="scope.row.type == 1">{{scope.row.discount}}折</div> -->
                        <div>{{scope.row.content}}</div>
                    </template>
                </el-table-column>
                <el-table-column 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>
                        <span v-if="scope.row.appoint_type == 6">指定门店商品</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="expire_type" label="过期时间">
                    <template slot-scope="scope">
                        <span v-if="scope.row.expire_type == 1">
                        {{scope.row.end_time|dateTimeFormat('Y-m-d H:i:s')}}
                    </span>
                        <span v-else-if="scope.row.expire_type == 2">
                            {{scope.row.begin_at|dateTimeFormat('Y-m-d H:i:s')}}至/
                            {{scope.row.end_at|dateTimeFormat('Y-m-d H:i:s')}}
                    </span>
                    </template>
                </el-table-column> -->
                <!-- <el-table-column prop="receive_type" label="领取场景">
                    <template slot-scope="scope">
                        <span>{{scope.row.receive_type}}</span>
                    </template>
                </el-table-column> -->
                <el-table-column prop="receive_platform" label="领取来源">
                    <template slot-scope="scope">
                        <span>{{scope.row.receive_type}}</span>
                    </template>
                </el-table-column>
                <el-table-column 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 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 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-column label="状态">
                    <template slot-scope="scope">
                        <div v-if="scope.row.is_giving == 0">
                            <el-tag v-if="scope.row.coupon_status == 1">未开始</el-tag>
                            <el-tag v-if="scope.row.coupon_status == 2">已领取</el-tag>
                            <el-tag v-if="scope.row.coupon_status == 3" type="info">已过期</el-tag>
                            <el-tag v-if="scope.row.coupon_status == 4" type="info">已失效</el-tag>
                        </div>
                        <div v-else>
                            <el-tag type="warning" v-if="scope.row.giving_status == 1">转赠中</el-tag>
                            <el-tooltip v-if="scope.row.giving_status == 2" class="item" effect="dark" :content="scope.row.giving_user" placement="top-end">
                                <el-tag type="danger">已转赠</el-tag>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="140">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleFrom(scope.row)">来源</el-button>
                        <el-button type="text" @click="invalid(scope.row)" v-if="scope.row.is_use == 0 && scope.row.coupon_status == 2">失效</el-button>
                        <!-- <el-button type="text" @click="handle('destroy', scope.row)">删除</el-button> -->
                    </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-dialog title="优惠券转赠记录追溯" :visible.sync="dialogTableVisible">
            <div class="trans-block" v-loading="transLoad">
                <template v-if="transList.length > 0">
                    <el-timeline>
                        <el-timeline-item 
                            :timestamp="item.timestamp" 
                            :color="item.color"
                            placement="top" 
                            v-for="(item, index) in transList" 
                            :key="index"
                        >
                            <el-card>
                                <com-user-info :user="item.user"></com-user-info>
                            </el-card>
                        </el-timeline-item>
                    </el-timeline>
                </template>
                <el-empty description="暂无记录" v-if="transList.length == 0"></el-empty>
            </div>
        </el-dialog>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                list: [],
                keyword: '',
                user_id: '',
                mobile:'',
                pagination: null,
                page: 1,
                page_size: 10,
                search_data: { // 筛选条件
                },
                chooseList: [],
                dialogTableVisible: false,
                gridData: [],
                transId: '', // 当前查询ID
                transLoad: false,
                status: 0,
                status_text: {
                    1: '已过期',
                    2: '已领取',
                    3: '转增中',
                    4: '已转增'
                },
            };
        },
        computed: {
            /**
             * 优惠券转赠记录追溯
             */
            transList: function () {
                return this.gridData.map(item => {
                    return {
                        timestamp: item.created_at,
                        user: item.user,
                        color: this.transId == item.id ? '#0bbd87' : '',
                    }
                })
            },
        },
        methods: {
            //搜索
            search() {
                this.page = 1;
                this.loadData();
            },
            // 清除搜索条件
            clereSearch() {
                this.keyword = '';
                this.user_id = null;
                this.mobile = '';
                this.status = 0;
                this.loadData();
            },
            //分页
            pageChange(page) {
                this.page = page;
                this.loadData();
            },
            // 根据参数获取请求信息
            loadData() {
                this.loading = true;
                console.log(this.keyword)
                request({
                    params: {
                        r: 'coupon/user-coupon/index',
                        keyword: this.keyword,
                        user_id: this.user_id,
                        mobile: this.mobile,
                        page: this.page,
                        status: this.status
                    },
                }).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;
                });
            },
            invalid(row) { // 优惠券失效
                if (row.id === '' || row.id === undefined || row.id === null) {
                    this.$message.error('请选择要失效的优惠券');
                    return;
                }
                this.$confirm(
                    '优惠券失效后将不能使用并不可恢复,是否继续?',
                    '警告',
                    {type: 'warning'}
                ).then(() => {
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    const url = 'coupon/user-coupon/transfer'
                    request({
                        params: {
                            r: url,
                            id: row.id
                        },
                        method: 'get'
                    }).then(res => {
                        loading.close();
                        if (res.data.code === 0) {
                            this.$message({
                                message: res.data.msg,
                                type: 'success',
                                duration: 2000,
                                onClose: () => {
                                    window.location.reload();
                                }
                            });
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    }).catch(e => {});
                }).catch(() => {});
            },
            // 操作处理
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    case 'destroy':
                        params = {id: data.id, status: -1};
                        this.$confirm('删除该条数据后不可以恢复, 是否继续?', '警告', {type: 'warning'}).then(() => {
                            this.send(params,'coupon/user-coupon/handle',(resp) => {
                                if (resp.code == 0) {
                                    navigateTo({r: 'coupon/user-coupon/index'});
                                }
                            })
                        })
                        break;
                }
            },
            send(params,url,callback) {
                let self = this;
                let basic_params = {
                    r: url
                };
                params = Object.assign(basic_params, params);
                request({
                    params: params,
                    method: 'get'
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                    if (callback) callback(e.data);
                }).catch(e => {
                    console.log(e);
                });
            },
            allDeleteBatch() {
                this.$confirm('警告:是否确认删除所选会员优惠券?').then(() => {
                    let self = this;
                    let ids = this.getIds();
                    if(ids.length==0){
                        return false;
                    }
                    request({
                        params: {
                            r: 'coupon/user-coupon/del-batch',
                        },
                        method: 'post',
                        data: {
                            id:ids
                        }
                    }).then(e => {
                        if (e.data.code == 0) {
                            self.$message.success(e.data.msg);
                            self.loadData();
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                });

            },
            getIds(){
                let self = this;
                console.log(1111,this.chooseList)
                if(this.chooseList.length==0){
                    self.$message.error('请选择会员优惠券');
                    return [];
                }
                let listMap = [];
                self.list.forEach(function (value, k) {
                    listMap[value.id] = value;
                });
                let ids = [];
                this.chooseList.forEach(function (id, index){
                    var value = listMap[id]
                    ids.push(id);
                });
                return ids
            },
            handleSelectionChange(val) {
                let self = this;
                self.chooseList = [];
                val.forEach(function(item) {
                    self.chooseList.push(item.id);
                })
            },
            handleFrom(row) {
                if (this.dialogTableVisible) return
                this.dialogTableVisible = true
                this.gridData = []
                this.transId = row.id
                this.transLoad = true
                request({
                    params: {
                        r: 'coupon/user-coupon/trans-log',
                        id: row.id
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        this.transLoad = false
                        this.gridData = e.data.data
                    }
                })
            },
        },
        created() {
            this.loadData();
        }
    })
</script>