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

<?php defined('YII_ENV') or exit('Access Denied'); ?>
<style>
    .form-body {
        background-color: #fff;
        padding: 20px 50% 20px 20px;
        min-width: 1000px;
    }

    .button-item {
        margin-top: 12px;
        padding: 9px 25px;
    }
    .user-list {
        flex-wrap: wrap;
        margin-top: 10px;
        /* cursor: move; */
    }
    .user-item,
    .user-add {
        width: 50px;
        height: 50px;
        position: relative;
        border: 1px solid #e2e2e2;
        margin-right: 15px;
        margin-bottom: 15px;
    }
    .user-add .el-button {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 0;
        padding: 0;
    }
    .user-delete {
        position: absolute;
        left: calc(100% - 13px);
        top: -13px;
        width: 25px;
        height: 25px;
        line-height: 25px;
        padding: 0 0;
        visibility: hidden;
        z-index: 1;
    }
    .user-delete .el-icon-close {
        position: absolute;
        top: 6px;
        left: 6px;
    }
    .user-item:hover .user-delete {
        visibility: visible;
    }
    .user-pic {
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;
        background-color: #f6f6f6;
        background-repeat: no-repeat;
    }
    
</style>
<section id="app" v-cloak>
    <el-card class="box-card" style="border:0" shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header" class="clearfix">
            <span></span>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><span style="color: #409EFF;cursor: pointer"
                                          @click="$navigate({r:'mall/coupon/index'})">优惠券管理</span></el-breadcrumb-item>
                <el-breadcrumb-item>优惠券发放</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-body">
            <el-form :model="form" @submit.native.prevent v-loading="loading" label-width="20rem" ref="form">
                <el-form-item label="优惠券名称" prop="name">
                    <div>{{form.name}}</div>
                </el-form-item>
                <el-form-item label="最低消费金额（元）" prop="min_price">
                    <div>{{form.min_price}}</div>
                </el-form-item>
                <el-form-item label="优惠金额（元）" prop="sub_price">
                    <div>{{form.sub_price}}</div>
                </el-form-item>
                <el-form-item label="剩余数量" prop="total_count">
                    <div v-if="form.total_count == -1">无限制</div>
                    <div v-else>{{form.total_count}}</div>
                </el-form-item>
                <el-form-item label="优惠券有效期" prop="expire_type">
                    <div v-if="form.expire_type == '2'"><span style="color: #FF4544">{{form.begin_at|dateTimeFormat('Y-m-d H:i:s')}}</span>至<span style="color: #FF4544">{{form.end_at|dateTimeFormat('Y-m-d H:i:s')}}</span></div>
                    <div v-if="form.expire_type == '1'">领取后{{form.expire_day}}天过期</div>
                </el-form-item>
                <!--<el-form-item label="发送小程序模板消息" prop="is_send">
                    <el-switch
                            style="margin-left: 20px;"
                            v-model="form.is_send"
                            active-value="1"
                            inactive-value="0">
                    </el-switch>
                </el-form-item> -->
                <el-form-item label="发送数量" prop="coupon_num">
                    <el-input size="small" type="number" v-model="form.coupon_num" style="width:50%" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="发送全部" prop="all_send">
                    <el-switch v-model="all_send" :active-value="1" :inactive-value="2"></el-switch>
                </el-form-item>
                <el-form-item label-width="180px" label="发放对象" v-if="all_send==2">
                    <el-col :span="14" v-if="userList">
                        <div class="user-list" flex="cross:center wrap:wrap">
                            <div class="user-item" v-for="(user,userIndex) in ruleForm.user.user_list.value">
                                <el-tooltip effect="dark" content="移除商品" placement="top">
                                    <el-button @click="deleteUser(userIndex, 'user')" circle
                                               class="user-delete" type="danger"
                                               icon="el-icon-close"></el-button>
                                </el-tooltip>
                                <div class="user-pic" :style="'background-image:url('+user.avatar_url+')'"></div>
                                <template slot-scope="scope">
                                    <div mode="aspectFill" width='50px' height='50px'  prop="id"></div>
                                </template>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="14">
                        <div class="user-add">
                            <el-tooltip effect="dark" content="选择发送对象" placement="top">
                                <el-button @click="showUserDialog('user')"
                                           icon="el-icon-plus"></el-button>
                            </el-tooltip>
                        </div>
                    </el-col>
                </el-form-item>

<!--                <el-form-item prop="user_id_list">-->
<!--                    <template slot='label'>-->
<!--                        <span>发放对象</span>-->
<!--                        <el-tooltip effect="dark" content="请输入昵称/ID/手机号查找用户"-->
<!--                                placement="top">-->
<!--                            <i class="el-icon-info"></i>-->
<!--                        </el-tooltip>-->
<!--                    </template>-->
<!--                        <el-input @keyup.enter.native="search" size="small" v-model="keyword_name" autocomplete="off" placeholder="昵称" style="width: 30%"></el-input>-->
<!--                        <el-input @keyup.enter.native="search" size="small" v-model="keyword_id" autocomplete="off" placeholder="ID" style="width: 16%"></el-input>-->
<!--                        <el-input @keyup.enter.native="search" size="small" v-model="keyword_mobile" autocomplete="off" placeholder="手机号" style="width: 30%"></el-input>-->
<!--                    <el-button size="small" :loading=foundLoading @click="search">查找用户</el-button>-->
<!--                    <el-checkbox-group  class="user-list" v-model="id" size="medium">-->
<!--                      <el-checkbox-button class="user-item" v-for="item in userList" :label="item.id" :key="item.id">-->
<!--                        <img class="avatar" :src="item.avatar_url" alt="">-->
<!--                        <div class="username">{{ item.nickname }}</div>-->
<!--                          <div class="username">ID:{{ item.id }}</div><br>-->
<!--                      </el-checkbox-button>-->
<!--                    </el-checkbox-group>-->
<!--                </el-form-item>-->
<!--            </el-form>-->
        </div>
        <el-button class="button-item" type="primary" size="small" :loading=btnLoading @click="onSubmit">提交</el-button>
        <el-button class="button-item" @click="Cancel" size="small">取消</el-button>
    </el-card>

    <el-dialog @open="getUser" title="选择用户" :visible.sync="userDialog.visible" :close-on-click-modal="false">
        <el-form size="small" :inline="true"  @submit.native.prevent>
            <el-form-item>
                <div class="input-item">
                    <el-input @keyup.enter.native="search" size="small" v-model="keyword_name" autocomplete="off" placeholder="昵称" style="width: 30%"></el-input>
                    <el-input @keyup.enter.native="search" size="small" v-model="keyword_id" autocomplete="off" placeholder="ID" style="width: 16%"></el-input>
                    <el-input @keyup.enter.native="search" size="small" v-model="keyword_mobile" autocomplete="off" placeholder="手机号" style="width: 30%"></el-input>
                    <el-button size="small" :loading=foundLoading @click="getUser">查找用户</el-button>
                    </el-input>
                </div>
            </el-form-item>
        </el-form>
        <el-table :data="userDialog.list" v-loading="userDialog.loading" @selection-change="userSelectionChange">
            <el-table-column label="选择" type="selection"></el-table-column>
            <el-table-column label="ID" prop="id" width="100px"></el-table-column>
            <el-table-column label="头像"  width="100px" prop="avatar_url">
                <template slot-scope="scope">
                    <com-image mode="aspectFill" width='50px' height='50px' :src="scope.row.avatar_url ? scope.row.avatar_url:'/resources/img/common/default-avatar.png'"></com-image>
                </template>
            </el-table-column>
            <el-table-column label="名称" prop="nickname"></el-table-column>
        </el-table>
        <div style="text-align: center; margin-top: 15px;">
            <el-pagination
                    v-if="userDialog.pagination"
                    style="display: inline-block"
                    background
                    @current-change="userDialogPageChange"
                    layout="prev, pager, next"
                    :page-size.sync="userDialog.pagination.pageSize"
                    :total="Number(userDialog.pagination.totalCount)">
            </el-pagination>
        </div>
        <div slot="footer">
            <el-button @click="userDialog.visible = false">取 消</el-button>
            <el-button type="primary" @click="addUser">确 定</el-button>
        </div>

    </el-dialog>
</section>



<style>
    .user-list{
        width: 150%;
    }

    .user-item .el-checkbox-button__inner{
        border: 1px solid #e2e2e2;
        height: 125px;
        width: 120px;
        padding-top: 15px;
        text-align: center;
        margin: 0 20px 20px 0;
        cursor: pointer;
        border-radius: 0!important;
    }

    .user-item.active{
        background-color: #50A0E4;
        color: #fff;
    }

    .user-list .avatar{
        height: 60px;
        width: 60px;
        border-radius: 30px;
    }

    .username{
        margin-top: 8px;
        font-size: 13px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
</style>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                form: {},
                count:null,
                foundLoading:false,
                btnLoading:false,
                userList:[],
                id:[],
                keyword:null,
                keyword_name:null,
                keyword_id:null,
                keyword_mobile:null,
                all_send:2,
                userDialog: {
                    visible: false,
                    page: 1,
                    loading: null,
                    pagination: null,
                    list: [],
                    index: 'user',
                    selectedList: null,
                    max: 20,//添加商品最大数量
                },
                ruleForm: {
                    //商品详情页推荐设置
                    user:{
                        is_recommend_status:{title:"发放对象列表",value:0,remark:""},
                        user_list:{title:"会员列表",value:[],remark:""},
                    },
                },
                loading:false 
            };
        },
        methods: {
            search(){
                this.foundLoading = true;
                request({
                    params: {
                        r: 'coupon/user-send/search-user',
                        keyword_name: this.keyword_name,
                        keyword_id: this.keyword_id,
                        keyword_mobile: this.keyword_mobile,
                    },
                }).then(e => {
                    this.foundLoading = false;
                    if (e.data.code == 0) {     
                        this.userList = e.data.data.list;
                    }else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.foundLoading = false;
                });                
            },
            getUser() {
                let self = this;
                self.userDialog.loading = true;
                request({
                    params: {
                        r: 'coupon/user-send/search-user',
                        page: self.userDialog.page,
                        keyword_name: this.keyword_name,
                        keyword_id: this.keyword_id,
                        keyword_mobile: this.keyword_mobile,
                        type:this.userDialog.index,
                    },
                    method: 'get',
                }).then(e => {
                    self.userDialog.loading = false;
                    self.userDialog.list = e.data.data.list;
                    self.userDialog.pagination = e.data.data.pagination;
                }).catch(e => {
                    console.log(e);
                });
            },
            addUser() {
                this.userDialog.visible = false;
                var msg_user = "";
                for (let i in this.userDialog.selectedList) {
                    const item = {
                        id: this.userDialog.selectedList[i].id,
                        nickname: this.userDialog.selectedList[i].nickname,
                        avatar_url: this.userDialog.selectedList[i].avatar_url?this.userDialog.selectedList[i].avatar_url:"/resources/img/common/default-avatar.png",
                        price: this.userDialog.selectedList[i].price,
                    };
                    if (this.ruleForm[this.userDialog.index].user_list.value.length < this.userDialog.max) {
                        console.log(item)
                        console.log(this.ruleForm[this.userDialog.index].user_list.value)
                        var is_on = 1;
                        for (let j in this.ruleForm[this.userDialog.index].user_list.value) {
                            if (this.userDialog.selectedList[i].id == this.ruleForm[this.userDialog.index].user_list.value[j].id) {
                                is_on = 2;
                            }
                        }
                        if (is_on == 1) {
                            this.ruleForm[this.userDialog.index].user_list.value.push(item);
                        } else {
                            msg_user = msg_user + (msg_user ? "," + this.userDialog.selectedList[i].nickname : this.userDialog.selectedList[i].nickname);
                        }
                    }
                }
                if(msg_user){
                    this.$message({
                        message: "会员 "+msg_user+" 已经选入",
                        type: 'error'
                    });
                }
            },
            deleteUser(userIndex, index) {
                this.ruleForm[index].user_list.value.splice(userIndex, 1);
            },
            showUserDialog(index) {
                this.userDialog.visible = true;
                this.userDialog.index = index;
            },
            userSelectionChange(e) {
                console.log(e)
                this.userDialog.selectedList = e;
            },
            userDialogPageChange(page) {
                this.userDialog.page = page;
                this.getUser();
            },
            Cancel(){
                window.history.go(-1)
            },

            onSubmit() {
                this.$refs.form.validate((valid) => {
                    this.btnLoading = true;
                    var user_id_list = [];
                    if(this.all_send== "2"){
                        for (let j in this.ruleForm[this.userDialog.index].user_list.value) {
                            user_id_list.push(this.ruleForm[this.userDialog.index].user_list.value[j].id);
                        }
                    }
                    if(!user_id_list){
                        this.$message({
                            message: "请选择发送对象",
                            type: 'error'
                        });
                        return false;
                    }
                    if (valid) {
                        let para = {
                            coupon_id : this.form.id,
                            user_id_list : user_id_list,
                            is_send: this.form.is_send,
                            all_send:this.all_send,
                            coupon_num: this.form.coupon_num
                        }
                        request({
                            params: {
                                r: 'coupon/user-send/index',
                            },
                            data: para,
                            method: 'post'
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code === 0) {
                                var msg = "发送成功";
                                if(e.data.data!==true){
                                    msg = e.data.data;
                                }
                                this.$alert(msg, {
                                  confirmButtonText: '确定',
                                  callback: action => {
                                    navigateTo({ r: 'coupon/default/index' });
                                  }
                                });
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.btnLoading = false;
                        });
                    }
                });
            },

            getList() {
                this.loading = true;
                request({
                    params: {
                        r: 'coupon/user-send/index',
                        id: getQuery('id'),
                    },
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        if(e.data.data.id > 0){
                            this.form = e.data.data;
                        }
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },
        },

        created() {
            this.getList();
        }
    })
</script>