qimall/backend/modules/mall/views/user-label/edit.php

<?php

use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('com-dialog-select');
ComponentHelper::loadComponentView('com-image');
?>
<div id="app" v-cloak>
    <el-card class="box-card" 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>
        <div class="form_box">
            <template>
            <el-form :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="150px" @submit.native.prevent>
                <el-card style="margin-top: 10px" shadow="never">
                    <el-col :span="50"  >
                        <el-form-item  label="标签名称" style='display: flex;' prop="name" >
                            <el-input  v-model="ruleForm.name" placeholder="请输入标签名称,最多20个字" ></el-input>
                        </el-form-item>
                        <el-form-item label="标签类型" style='display: flex;'>
                            <el-radio-group v-model="ruleForm.type" >
                                <el-radio :label="2">自动标签</el-radio>
                                <el-radio :label="1">手动标签</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="满足条件" v-if='ruleForm.type == 2' style='display: flex;'>
                            <div style="color:red;">标签创建后新满足条件的会员会实时打标，标签创建前已满足条件的会员会在次日凌晨进行打标。</div>
                        </el-form-item>
                        <el-form-item  label="标签颜色" style='display: flex;'>
                            <el-color-picker v-model="ruleForm.color"></el-color-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="14" v-if='ruleForm.type == 2' style="padding-left: 148px;">

                        <el-form-item label="" style='display: flex;'>
                            <el-radio-group v-model="ruleForm.satisfy_type" >
                                <el-radio label="1">满足任意一个被选中的条件即可</el-radio>
                                <el-radio label="2">必须满足所有被选中的条件</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="">
                                <el-col :span="20">
                                    <div class="margin-button-20px flex">
                                        <el-checkbox value = "1" true-label = "1" false-label ="0"  v-model="ruleForm.condition.last_consume.select_status" style="margin-right: 20px;" >最后消费时间</el-checkbox>
                                        <div class="enter flex">
                                            <el-radio-group v-model="ruleForm.condition.last_consume.condition.type">
                                                <div class="flex flex-y-center">
                                                    <el-radio label = "1" true-label = "1" false-label ="2">最近</el-radio>
                                                    <el-input v-model="ruleForm.condition.last_consume.condition.content.day" onkeyup="value=toNumber(value)" class='inp'></el-input>
                                                    <div class="inp-text" style="padding-top: 6px;">天</div>
                                                </div>
                                                <div class="time_last_consume">
                                                    <el-radio label = "2" true-label = "2" false-label ="1" >自定义</el-radio>
                                                    <el-date-picker
                                                            v-model="ruleForm.condition.last_consume.time"
                                                            type="datetimerange"
                                                            value-format="yyyy-MM-dd HH:mm:ss"
                                                            range-separator="至"
                                                            start-placeholder="开始日期"
                                                            end-placeholder="结束日期">
                                                    </el-date-picker>
                                                </div>
                                            </el-radio-group>
                                        </div>
                                    </div>
                                    <div class="margin-button-20px flex">
                                        <el-checkbox value = "1" true-label = "1" false-label ="0" v-model="ruleForm.condition.consume_num.select_status" style="margin-right: 20px;">消费次数</el-checkbox>
                                        <div class="enter flex">
                                            <div class="flex flex-y-center">
                                                <el-input :disabled='!ruleForm.condition.consume_num' onkeyup=" value = value.replace(/[^\d]/g,'')"  v-model="ruleForm.condition.consume_num.condition.start" class='inp'></el-input>
                                                <div class="inp-text">次</div>
                                            </div>
                                            <div class="segmentation">-</div>
                                            <div class="flex flex-y-center">
                                                <el-input :disabled='!ruleForm.condition.consume_num'  onkeyup= " value = value.replace(/[^\d]/g,'')" v-model="ruleForm.condition.consume_num.condition.end" class='inp'></el-input>
                                                <div class="inp-text">次</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="margin-button-20px flex">
                                        <el-checkbox value = "1" true-label = "1" false-label ="0" v-model="ruleForm.condition.consume_money.select_status" style="margin-right: 20px;">消费金额</el-checkbox>
                                        <div class="enter flex">
                                            <div class="flex flex-y-center">
                                                <el-input :disabled='!ruleForm.condition.consume_money' v-model="ruleForm.condition.consume_money.condition.start" onInput="value=toNumber(value,2)" class='inp'></el-input>
                                                <div class="inp-text">元</div>
                                            </div>
                                            <div class="segmentation">-</div>
                                            <div class="flex flex-y-center">
                                                <el-input :disabled='!ruleForm.condition.consume_money' v-model="ruleForm.condition.consume_money.condition.end" onInput="value=toNumber(value,2)" class='inp'></el-input>
                                                <div class="inp-text">元</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="margin-button-20px flex">
                                        <el-checkbox value = "1" true-label = "1" false-label ="0" v-model="ruleForm.condition.average_money.select_status" style="margin-right: 20px;">客单价</el-checkbox>
                                        <div class="enter flex">
                                            <div class="flex flex-y-center">
                                                <el-input style="margin-left: 13px;" :disabled='!ruleForm.condition.average_money' v-model="ruleForm.condition.average_money.condition.start" onInput="value=toNumber(value,2)" class='inp'></el-input>
                                                <div class="inp-text">元</div>
                                            </div>
                                            <div class="segmentation">-</div>
                                            <div class="flex flex-y-center">
                                                <el-input :disabled='!ruleForm.condition.average_money' v-model="ruleForm.condition.average_money.condition.end" onInput="value=toNumber(value,2)" class='inp'></el-input>
                                                <div class="inp-text">元</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="margin-button-20px flex">
                                        <el-checkbox value = "1" true-label = "1" false-label ="0" v-model="ruleForm.condition.recharge_money.select_status" style="margin-right: 20px;">充值金额</el-checkbox>
                                        <div class="enter flex">
                                            <div class="flex flex-y-center">
                                                <el-input :disabled='!ruleForm.condition.recharge_money' v-model="ruleForm.condition.recharge_money.condition.start" onInput="value=toNumber(value,2)" class='inp'></el-input>
                                                <div class="inp-text">元</div>
                                            </div>
                                            <div class="segmentation">-</div>
                                            <div class="flex flex-y-center">
                                                <el-input :disabled='!ruleForm.condition.recharge_money' v-model="ruleForm.condition.recharge_money.condition.end" onInput="value=toNumber(value,2)" class='inp'></el-input>
                                                <div class="inp-text">元</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="margin-button-20px flex">
                                        <el-checkbox value = "1" true-label = "1" false-label ="0" v-model="ruleForm.condition.follow.select_status" style="margin-right: 20px;">关注公众号时间</el-checkbox>
                                        <div class="enter flex">
                                            <el-date-picker
                                                    v-model="ruleForm.condition.follow.time"
                                                    type="datetimerange"
                                                    value-format="yyyy-MM-dd HH:mm:ss"
                                                    range-separator="至"
                                                    start-placeholder="开始日期"
                                                    end-placeholder="结束日期">
                                            </el-date-picker>
                                        </div>
                                    </div>
                                </el-col>
                            <el-col>
                                <div class="margin-button-20px flex">
                                    <el-checkbox value = "1" true-label = "1" false-label ="0" v-model="ruleForm.condition.goods.select_status" style="margin-right: 20px;">购买指定商品</el-checkbox>
                                    <div class="enter flex">
                                        <el-radio-group v-model="ruleForm.goods_ids">
                                            <com-dialog-select :multiple="true" @selected="goodsSelect" title="商品选择">
                                                <el-button type="text">选择商品</el-button>
                                            </com-dialog-select>
                                        </el-radio-group>
                                        <el-form-item v-if="goods_list">
                                            <template>
                                                <div style="color: #ff4544; padding-left: 10px;">最多可关联20个商品</div>
                                                <div style="max-height: 100%;overflow-y: auto; width: 100%">
                                                    <el-table :data="goods_list" style="width: 100%;" :show-header="false" border >
                                                        <el-table-column label="">
                                                            <template slot-scope="scope">
                                                                <div flex>
                                                                    <div style="padding-right: 10px;flex-grow: 0">
                                                                        <com-image mode="aspectFill" :src="scope.row.cover_pic"></com-image>
                                                                    </div>
                                                                    <div style="flex-grow: 1;">
                                                                        <com-ellipsis :line="2">{{scope.row.goods_name}}</com-ellipsis>
                                                                        <com-ellipsis :line="2" style="color: red;">￥{{scope.row.price}}</com-ellipsis>
                                                                    </div>
                                                                    <div style="flex-grow: 0;">
                                                                        <el-button @click="deleteGoods(scope.$index)" type="text" circle size="mini">
                                                                            删除
                                                                        </el-button>
                                                                    </div>
                                                                </div>
                                                            </template>
                                                        </el-table-column>
                                                    </el-table>
                                                </div>
                                            </template>
                                        </el-form-item>
                                    </div>
                                </div>
                            </el-col>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-button :loading="btnLoading" class="button-item" type="primary" style="margin-top: 24px;" @click="store('ruleForm')" size="small">保存</el-button>
                    </el-col>

            </el-card>
            </template>
        </div>

    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                btnLoading: false,
                time:[],
                goods_list:[],
                ruleForm: {
                    id:'',
                    name:'',
                    type: 2,
                    satisfy_type:"1",
                    select_data:['goods'],
                    goods_ids:[],
                    condition:{
                        last_consume:{
                            condition: {
                                type:"1",// 类型，1=最近N天，2=自定义时间
                                content:{
                                    day: '1',// type=1的时候
                                    start: '',// type=2的时候
                                    end: '',// type=2的时候
                                },
                            },
                            time:[],
                            select_status: "0",
                        },
                        consume_num:{
                            condition:{
                                start:"",
                                end:"",
                            },
                            select_status:"0",//1是选中 2是取消
                        },
                        consume_money:{
                            condition:{
                                start:"",
                                end:"",
                            },
                            select_status:"0",//1是选中 2是取消
                        },
                        average_money:{
                            condition:{
                                start:"",
                                end:"",
                            },
                            select_status:"0",//1是选中 2是取消
                        },
                        recharge_money:{
                            condition:{
                                start:"",
                                end:"",
                            },
                            select_status:"0",//1是选中 2是取消
                        },
                        follow:{
                            condition:{
                                start:"",
                                end:"",
                            },
                            time:[],
                            select_status:"0",//1是选中 2是取消
                        },
                        goods:{
                            condition:{
                            },
                            select_status:"0",//1是选中 2是取消
                        },
                    },
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入标签名称',
                        trigger: 'change'
                    },
                    {
                        validator: (rule, value, callback) => {
                            if(value.length>20||value.length<0){
                                callback('最大长度在1-20个字内');
                            }
                            callback();
                        }
                    },
                    ],
                    sort: [{
                        required: true,
                        message: '请输入排序',
                        trigger: 'change'
                    }, ],
                },
                error_data: {
                    verage_money: "客单价",
                    consume_money: "消费金额",
                    consume_num: "消费次数",
                    follow: "关注公众号",
                    goods: "购买指定商品",
                    last_consume: "最后消费时间",
                    recharge_money: "充值金额",
                },
            }
        },
        mounted: function() {
           this.ruleForm.id = getQuery('id');
            this.loadData();
        },
        methods: {
            loadData() {
                this.loading = true;
                let id = getQuery('id');
                request({
                    params: {
                        r: 'mall/user-label/edit',
                        id: getQuery('id')
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        if(id){
                            this.error_data = e.data.data.cond_enum;
                            var old_condition = this.ruleForm.condition;
                            this.ruleForm = e.data.data;
                            if(e.data.data.conf.length < 1) {
                                this.ruleForm.condition = old_condition;
                            } else{
                                this.ruleForm.condition = e.data.data.conf;
                            }
                            this.ruleForm.satisfy_type = e.data.data.satisfy_type+"";
                            this.select_status();
                            this.ruleForm.goods_ids =  [];
                            if(!isEmpty(e.data.data.conf.goods.condition)){
                                var goods_ids = e.data.data.conf.goods.condition;
                                if(goods_ids.toString().search(",") != -1){
                                    this.ruleForm.goods_ids =  goods_ids.split(',');
                                }else{
                                    this.ruleForm.goods_ids.push(goods_ids);
                                }
                            }else{
                                this.ruleForm.goods_ids =  [];
                            }

                        }
                    }
                }).catch(e => {
                    this.loading = false;
                })
            },
            deleteGoods(index) {
                this.goods_list.splice(index, 1);
                this.ruleForm.goods_ids.splice(index, 1);
                this.goods_id = '';
                //console.log(this.ruleForm.goods_ids,index,8888);
            },
            goodsSelect(param) {
                for (let j in param) {
                    if(this.goods_list.length>19){
                        this.$message.error('最多可以选择20件商品');
                        break;
                    }
                    let item = param[j];
                    var is_set = true;
                    if(inArray(item.id,this.ruleForm.goods_ids)){
                        is_set = false;
                    }
                    this.ruleForm.goods_ids.push(item.id);
                    var goods_data = {
                        id: item.id,
                        goods_name: item.goods_name,
                        price: item.price,
                        cover_pic: item.cover_pic,
                    };
                    if(is_set){
                        this.goods_list.push(goods_data);
                    }
                }
            },
            // 选择商品
            handleSelect(item) {

            },
            get_errormsg(key){
                var value = '';
                $.each(this.error_data,function(k,v){
                    if(k==key){
                        value = v;
                    }
                });
                return value;
            },
            //选中对象选项进行处理
            select_status(){
                console.log(this.ruleForm.condition,888);
                if(this.ruleForm.goods_list){
                    this.goods_list = this.ruleForm.goods_list;
                }
                if(this.ruleForm.condition){
                    $.each(this.ruleForm.condition,function(k,v){
                        v.select_status = v.select_status +"";
                        if(k=='last_consume'){
                            v.condition.type = v.condition.type + "";
                            if(v.condition.content.start && v.condition.content.end) v.time = [v.condition.content.start,v.condition.content.end];
                        }
                        if(v.condition.start && v.condition.end) v.time = [v.condition.start,v.condition.end];
                    });
                }

            },
            //进行验证
            check_params(){
                if(this.ruleForm.type==1) return true;//手动标签不需要进行验证
                if(this.ruleForm.condition){
                    var pass_status = 1;
                    let _seft = this;
                    //console.log(this.ruleForm.condition.follow,6666);
                    if(!isEmpty(this.ruleForm.goods_ids)) {
                        this.ruleForm.condition.goods.condition = this.ruleForm.goods_ids.join(',');
                    }else{
                        this.ruleForm.condition.goods.condition = "";
                    }
                    if(!isEmpty(this.ruleForm.condition.follow.time)) {
                        this.ruleForm.condition.follow.condition.start = this.ruleForm.condition.follow.time[0];
                        this.ruleForm.condition.follow.condition.end = this.ruleForm.condition.follow.time[1];
                    }
                    if(!isEmpty(this.ruleForm.condition.last_consume.time) && this.ruleForm.condition.last_consume.condition.type == 2 ) {
                        this.ruleForm.condition.last_consume.condition.content.start = this.ruleForm.condition.last_consume.time[0];
                        this.ruleForm.condition.last_consume.condition.content.end = this.ruleForm.condition.last_consume.time[1];

                    }
                    $num = 0;
                    $.each(this.ruleForm.condition,function(k,v){
                        //验证最近
                        if(v.select_status == "1"){
                            $num ++;
                            if(k=='last_consume'){
                                if(v.condition.type==1){
                                    if(parseFloat(v.condition.content.day) <= 0 || !v.condition.content.day){
                                        _seft.$message.error('请输入正确的最近天数');
                                        pass_status = 0;
                                        return false;
                                    }
                                }
                                if(v.condition.type==2){
                                    var start = v.condition.content.start.toString();//处理0等于false问题，判断失效
                                    var end =  v.condition.content.end.toString();//处理0等于false问题，判断失效
                                    if(!start || !end || parseFloat(v.condition.content.start) <0 || parseFloat(v.condition.content.end) <0){
                                        _seft.$message.error('请选择日期');
                                        pass_status = 0;
                                        return false;
                                    }
                                }
                            }else if(k=='goods'){
                                if(isEmpty(v.condition)){
                                    _seft.$message.error('请选择商品');
                                    pass_status = 0;
                                    return false;
                                }
                            } else{
                                var start = v.condition.start.toString();// 处理0等false问题
                                var end =  v.condition.end.toString();// 处理0等false问题
                                if(!start || !end || parseFloat(v.condition.start) <0 || parseFloat(v.condition.end) <0){
                                    _seft.$message.error('请在'+_seft.get_errormsg(k)+'选项中正确数值');
                                    pass_status = 0;
                                    return false;
                                };
                                if(k!='follow' && parseFloat(v.condition.start) >= parseFloat(v.condition.end)){
                                    _seft.$message.error(_seft.get_errormsg(k)+'开始数值不能大于等于结束值');
                                    pass_status = 0;
                                    return false;
                                }
                            }
                        }
                    })

                    if($num<1){
                        _seft.$message.error('自动标签达标条件至少勾选一个');
                        return false;
                    }
                }
                if(pass_status  == 1){
                    return true;
                }else{
                    return false;
                }

            },
            store(formName) {
                let formData = JSON.stringify(this.dataForm);
                //进行验证
                if(!this.check_params())return false;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        request({
                            params: {
                                r: 'mall/user-label/edit',
                            },
                            method: 'post',
                            data: {
                                form: this.ruleForm,
                            }
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code == 0) {
                                this.$message.success(e.data.msg);
                                navigateTo({
                                    r: 'mall/user-label/index'
                                })
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.$message.error(e);
                            this.btnLoading = false;
                        })
                    } else {
                        this.btnLoading = false;
                        return false;
                    }
                });
            },
        }
    });
</script>
<style>
    .inp-text{
        color: #afacac;
    }
    .form_box {
        background-color: #f3f3f3;
        padding: 0 0 20px;
    }

    .button-item {
        margin-top: 12px;
        padding: 9px 25px;
    }

    .margin-button-20px {
        margin-bottom: 20px;
    }
    .time_last_consume{
        padding-top: 20px;
    }
    .el-input-group__append {
        background-color: #fff;
        color: #353535;
    }

    .el-form-item>div {
        margin: 0 !important;
    }

    .title {
        display: flex;
        align-items: center;
        font-size: 12px;
        padding-left: 50px;
        margin-bottom: 16px;
    }

    .title-one {
        padding-left: 29px;
        font-size: 15px;
        margin-right: 10px;
    }

    .segmentation {
        padding: 0 10px;
        font-size: 20px;
    }

    .inp {
        width: 140px;
    }

    .inp .el-input__inner {
        border-radius: 4px 0 0 4px;
    }

    .inp2 {
        width: 60px;
    }

    .inp-text {
        background: #EFEFEF;
        border: 1px solid #E3E2E5;
        font-size: 15px;
        padding: 0px 15px;
        border-radius: 0 4px 4px 0;
        height: 32px;
    }


    /* flex公共样式 */
    .flex {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }

    .flex-x-center {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .flex-x-between {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: space-between;
        -webkit-justify-content: space-between;
        -ms-flex-pack: space-between;
        justify-content: space-between;
    }

    .flex-y-center {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
    }

    .flex-y-bottom {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: end;
        -webkit-align-items: flex-end;
        -ms-flex-align: end;
        -ms-grid-row-align: flex-end;
        align-items: flex-end;
    }
</style>