qimall/addons/IssueCoupons/backend/views/default/edit.php

<?php
use common\helpers\ComponentHelper;
use common\helpers\AddonHelper;
if ($has_coupon) {
    ComponentHelper::loadComponentView('coupon-select', AddonHelper::getAddonRootPath('Coupon') . 'backend/views/components');
}

if ($has_e_coupon) {
    ComponentHelper::loadComponentView('electron-coupon-select', AddonHelper::getAddonRootPath('ElectronCoupon') . 'backend/views/components');
}
ComponentHelper::loadComponentView('user-select', AddonHelper::getAddonRootPath('IssueCoupons') . 'backend/views/components');
?>

<div id="app" v-cloak>
    <el-card class="never" v-loading="loading" shadow="never" style="border:0;min-width: 1200px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div>
                <span>新增规则</span>
            </div>
        </div>
        <el-form :model="formData" :rules="rules" size="small" label-width="150px">
            <el-card style="margin-top: 10px" shadow="never">
                <div slot="header" class="clearfix">
                    <div class="card-title">基本设置</div>
                </div>
                <el-form-item label="发放规则名：" prop="name">
                    <el-input v-model="formData.name" style="max-width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="发放时间：" prop="timing_time">
<!--                    <el-date-picker-->
<!--                            v-model="formData.timing_time"-->
<!--                            type="datetime"-->
<!--                            format="yyyy-MM-dd HH:mm"-->
<!--                            picker-options="{start: '00:00',step: '00:30',end: '23:59'}"-->
<!--                            unlink-panels-->
<!--                            range-separator="至"-->
<!--                            start-placeholder="开始日期"-->
<!--                            end-placeholder="结束日期"-->
<!--                    >-->
<!--                    </el-date-picker>-->
                    <el-date-picker
                            v-model="picker_date"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                    </el-date-picker>
                    <el-time-select
                            v-model="picker_time"
                            :picker-options="{start: '00:00',step: '00:10',end: '23:59'}"
                            placeholder="选择时间">
                    </el-time-select>
                </el-form-item>
                <el-form-item label="发放对象：" prop="name">
                    <el-radio-group v-model="formData.grant_object" @change="select_grant_object">
                        <el-radio :label="1">全部会员</el-radio>
                        <el-radio :label="2">会员等级</el-radio>
                        <el-radio :label="3">会员标签</el-radio>
                        <el-radio :label="4">会员ID</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="" v-if="formData.grant_object == 1">
                    <div style="font-size: 12px; color: red">发送给全部会员，需要消耗服务器大量资源，建议慎用，或者发送时间定在晚上1点到6点</div>
                </el-form-item>
                <el-form-item label="选择会员：" v-if="formData.grant_object == 4">
                    <el-button type="primary" size="mini" @click="openuser()">选择会员</el-button>
                </el-form-item>
                <el-form-item label="已选对象：" v-if="grant_object && grant_object.length>0">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="formData.grant_object_content" @change="handleCheckedCitiesChange">
                        <el-checkbox v-for="(item,index) in grant_object" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-card>

            <el-card style="margin-top: 10px" class="edit-card" shadow="never">
                <div slot="header" class="clearfix">
                    <div class="card-title">发放类型</div>
                </div>
                <el-form-item label="红包：" v-if="has_redpack">
                    <br>
                    红包充值：<el-input v-model="formData.redpack" onInput="value=toNumber(value,0)" placeholder="请输入红包金额" style="max-width: 200px;"></el-input>
                    备注说明：<el-input type="textarea" :rows="2" placeholder="请输入备注" v-model="formData.redpack_remark" style="max-width: 500px;"></el-input>
                    <div style="font-size: 12px; color: #999;">充值激活红包</div>
                </el-form-item>

                <el-form-item label="积分：" >
                    <br>
                    积分充值：<el-input v-model="formData.score" onInput="value=toNumber(value,0)" placeholder="请输入积分金额" style="max-width: 200px;"></el-input>
                    备注说明：<el-input type="textarea" :rows="2" placeholder="请输入备注" v-model="formData.score_remark" style="max-width: 500px;"></el-input>
                </el-form-item>

                <el-form-item label="余额：" >
                    <br>
                    余额充值：<el-input v-model="formData.balance" onInput="value=toNumber(value,2)" placeholder="请输入余额金额" style="max-width: 200px;"></el-input>
                    备注说明：<el-input type="textarea" :rows="2" placeholder="请输入备注" v-model="formData.balance_remark" style="max-width: 500px;"></el-input>
                </el-form-item>

                <el-row :gutter="10" v-if="has_coupon" v-if="has_coupon">
                    <el-form-item label="选择优惠券：">
                        <el-button type="primary" size="mini" @click="openCouponPop()">选择优惠券</el-button>
                    </el-form-item>
                    <el-form-item label="已选优惠券：" v-if="coupon_list.length > 0">
                        <el-row :gutter="3">
                            <el-col :span="3" v-for="(item,index) in coupon_list" :key="index">
                                <el-card shadow="always" style="position: relative; margin-right: 10px;">
                                    <div>{{item.name}}</div>
                                    <div>优惠方式:{{ item.discount_method }}</div>
                                    <div>赠送数量：<span>{{item.num}}</span></div>
                                    <el-button type="danger" icon="el-icon-delete" circle style="position: absolute; right: 8px;top: 10px;"  @click="handle('delete', index)"></el-button>
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-row>

                <el-row :gutter="10" v-if="has_e_coupon" v-if="has_e_coupon">
                    <el-form-item label="选择电子券：" >
                        <el-button type="primary" size="mini" @click="handle('e_select')">选择电子券</el-button>
                    </el-form-item>
                    <el-form-item label="已选电子券：" v-if="e_coupon_list.length>0">
                        <el-row :gutter="3">
                            <el-col :span="3" v-for="(item,index) in e_coupon_list" :key="index">
                                <el-card shadow="always" style="position: relative; margin-right: 10px;">
                                    <div>{{item.name}}</div>
                                    <div>金额:{{ item.price }}元</div>
                                    <div>赠送数量：<span>{{item.num}}</span></div>
                                    <el-button type="danger" icon="el-icon-delete" circle style="position: absolute; right: 8px;top: 10px;" @click="handle('e_delete', index)"></el-button>
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-form-item>

                </el-row>

            </el-card>

        </el-form>

        <coupon-select  :coupon-loading="couponLoading" :coupon_arr="coupon_list" @submit="handleCoupon" @close="couponLoading = false"></coupon-select>
        <electron-coupon-select :coupon-loading="ECouponLoading" :coupon_arr="e_coupon_list" @submit="handleECoupon" @close="ECouponLoading = false"></electron-coupon-select>
        <user-select :user-loading="userLoading" :user_arr="user_list" @submit="handleUser" @close="userLoading = false"></user-select>

    </el-card>
    <el-button :loading="btnLoading" class="button-item" type="primary" style="margin-top: 24px;"
               @click="submitForm" size="small">保存
    </el-button>
</div>



<script src="<?= Yii::$app->request->baseUrl ?>/resources/unpkg/vuedraggable@2.18.1/dist/vuedraggable.umd.min.js"></script>
<script>

    const app = new Vue({
        el: '#app',
        data() {
            return {
                picker_date:null,
                picker_time:null,
                form:{},
                checkAll: false,
                isIndeterminate: true,
                coupon_list: [],
                e_coupon_list:[],
                user_list:[],
                dialogVisible: false,
                grant_object:[],
                loading: false,
                couponLoading:false,
                ECouponLoading:false,
                userLoading:false,
                btnLoading: false,
                couponPop: false,
                has_coupon: <?php echo $has_coupon ? 'true' : 'false';  ?>,
                has_e_coupon: <?php echo $has_e_coupon ? 'true' : 'false';  ?>,
                has_redpack: <?php echo $has_redpack ? 'true' : 'false';  ?>,
                formData: {
                    grant_object_content:[],
                    timing_time:'',
                    name: '',
                    grant_object:4,
                    redpack: '',
                    redpack_remark:'',
                    score:'',
                    score_remark:'',
                    balance:'',
                    balance_remark:'',
                    coupon:[],
                    e_coupon:[]
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入活动名称',
                        trigger: 'blur'
                    }],
                    // timing_time: [{
                    //     required: true,
                    //     message: '请选择时间',
                    //     trigger: 'blur'
                    // }],
                },
            }
        },
        mounted() {
            if (getQuery('id') && getQuery('id') != 0) {
                this.id = getQuery('id');
                this.send('getData');
            }
        },
        methods: {
            select_grant_object($data=1){
                this.checkAll = false;
                this.grant_object = [];
                if($data!=1){
                    this.formData.grant_object_content = [];
                }

                if(this.formData.grant_object != 1){
                    var user_ids = [];
                    if(this.formData.grant_object == 4 &&  this.formData.grant_object_content && this.formData.grant_object_content.length>0){
                        user_ids = this.formData.grant_object_content;
                    }
                    request({
                        params: {r: 'issue-coupons/default/get-object', 'type': this.formData.grant_object,'user_ids':user_ids},
                    }).then(e => {
                        if (e.data.code == 0) {
                            if (e.data.data) this.grant_object = e.data.data;
                        } else {
                            this.$message.error(e.data.msg);
                        }
                        this.loading = false;
                    }).catch(e => {
                        this.loading = false;
                        this.$message.error(e.data.msg);
                    })
                }else if(this.formData.grant_object == 4){
                    this.userLoading = true;
                }
            },
            handleCheckAllChange(val) {
                var checkAll = [];
                if(this.grant_object){
                    for(var i=0;i<this.grant_object.length;i++){
                        checkAll.push(this.grant_object[i].id);
                    }

                }
                this.formData.grant_object_content = val ? checkAll : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.grant_object.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.grant_object.length;
            },
            send(type, param1 = null, param2 = null) {
                switch (type) {
                    case 'getData':
                        this.loading = true;
                        request({
                            params: {r: 'issue-coupons/default/edit', 'id': this.id},
                        }).then(e => {
                            if (e.data.code == 0) {
                                if (e.data.data) {
                                    this.formData = e.data.data.detail;
                                    this.picker_date = e.data.data.picker_date
                                    this.picker_time = e.data.data.picker_time
                                }
                                if(e.data.data.coupon_select_list){
                                    this.coupon_list = e.data.data.coupon_select_list;
                                }
                                if(e.data.data.e_coupon_select_list){
                                    this.e_coupon_list = e.data.data.e_coupon_select_list;
                                }
                                this.select_grant_object(1);
                            } else {
                                this.$message.error(e.data.msg);
                            }
                            this.loading = false;
                        }).catch(e => {
                            this.loading = false;
                            this.$message.error(e.data.msg);
                        })
                        break;
                }
            },
            // 保存
            submitForm() {
                if (!this.submit_setting()) {
                    return false;
                }
                this.btnLoading = true,
                    request({
                        params: {r: 'issue-coupons/default/edit'},
                        data: this.formData,
                        method: 'post'
                    }).then(e => {
                        if (e.data.code == 0) {
                            this.$message.success(e.data.msg);
                            navigateTo({r: 'issue-coupons/default/index'})
                        } else {
                            this.$message.error(e.data.msg);
                        }
                        this.btnLoading = false;
                    }).catch(e => {
                        this.btnLoading = false,
                            this.$message.error(e.data.msg);
                    })
            },
            submit_setting(){
                this.formData.coupon = [];
                this.formData.e_coupon = [];
                console.log(this.coupon_list,666);
                if(this.coupon_list){
                    for(var i=0; i<this.coupon_list.length; i++){
                        var coupon_data = [];
                        coupon_data.id = this.coupon_list[i].relevant_id;
                        coupon_data.num = this.coupon_list[i].num;
                        this.formData.coupon.push(coupon_data);
                    }
                }else{
                    this.formData.coupon = [];
                }
                // if(this.grant_object){
                //     for (var i=0; i<this.grant_object.length; i++){
                //         this.formData.grant_object_content.push(this.grant_object[i].id);
                //     }
                // }else{
                //     this.formData.grant_object_content = [];
                // }

                console.log(this.e_coupon_list,555);
                if(this.e_coupon_list){
                    for(var i=0; i<this.e_coupon_list.length; i++){
                        var e_coupon_data = [];
                        e_coupon_data.id = this.e_coupon_list[i].coupon_id;
                        e_coupon_data.num = this.e_coupon_list[i].num;
                        this.formData.e_coupon.push(e_coupon_data);
                    }
                }else{
                    this.formData.e_coupon = [];
                }

                if(!this.formData.score && !this.formData.redpack && !this.formData.balance && this.formData.coupon.length <=0 && this.formData.e_coupon.length <=0){
                    this.$message.error("发放内容必须选一样");
                    return false;
                }

                if (isEmpty(this.picker_date) || isEmpty(this.picker_time)) {
                    this.$message.error("请设置发放时间");
                    return false;
                }
                this.formData.timing_time = this.picker_date + ' ' + this.picker_time;

                return true;
            },
            //打开会员
            openuser(){
                this.userLoading = true;
            },
            // 打开优惠券弹窗
            openECouponPop() {
                if(!this.has_e_coupon){
                    this.$message.error("请先安装电子券插件");
                    return false;
                }
                this.ECouponLoading = true;
                this.ECouponPop = true;
            },
            handleECoupon(data) {
                this.ECcouponLoading = false;
                this.e_coupon_list = data
            },
            // 打开优惠券弹窗
            openCouponPop() {
                if(!this.has_coupon){
                    this.$message.error("请先安装优惠卷插件");
                    return false;
                }
                this.couponLoading = true;
                this.couponPop = true;
            },
            handleCoupon(data) {
                this.couponLoading = false;
                this.coupon_list = data
            },
            handleUser(data) {
                this.userLoading = false;
                this.user_list = [];
                this.user_list = data;
                var user_data = [];
                this.grant_object = [];
                if(this.user_list){
                    this.formData.grant_object_content = [];
                    for(var i=0; i<this.user_list.length; i++){
                        user_data = [];
                        user_data.id = this.user_list[i].use_id;
                        user_data.name = this.user_list[i].name;
                        this.grant_object.push(user_data);
                        //this.formData.grant_object_content.push(user_data.id);
                    }
                    //console.log(this.formData.grant_object_content,555);
                    this.handleCheckAllChange(true);
                    this.checkAll = true;
                    this.isIndeterminate = false;
                }
            },
            handle(type, data = null, data2 = null) {
                switch (type) {
                    case 'select':
                        this.couponLoading = true;
                        break;
                    case 'delete':
                        this.coupon_list.splice(data, 1);
                        break;
                    case 'e_select':
                        this.ECouponLoading = true;
                        break;
                    case 'e_delete':
                        this.e_coupon_list.splice(data, 1);
                        break;
                }
            }
        }
    })
</script>
<style>
    .line {
        background: #03C5FF;
        width: 5px;
        height: 20px;
        margin-right: 6px;
    }
    .form_box {
        background-color: #f3f3f3;
        padding: 0 0 20px;
    }

    .button-item {
        margin-top: 12px;
        padding: 9px 25px;
    }
    .customize-share-title {
        margin-top: 10px;
        width: 80px;
        height: 80px;
        position: relative;
        cursor: move;
    }
    .del-btn {
        position: absolute;
        right: -8px;
        top: -8px;
        padding: 4px 4px;
    }

    .el-input-group__append {
        background-color: #fff;
        color: #353535;
    }
    .add-image-btn {
        width: 100px;
        height: 100px;
        color: #419EFB;
        border: 1px solid #e2e2e2;
        cursor: pointer;
    }
</style>