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

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

    .table-body .top-input {
        margin-top: 34px;
    }

    .input-item {
        width: 200px;
        margin-right: 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;
    }

    /* #app .table-body .el-table .el-button {
         border-radius: 16px;
     } */

    .create {
        height: 36px;
        line-height: 36px;
        float: right;
        color: #BCBCBC;
        margin-left: 20px;
    }

    .name {
        cursor: pointer;
        color: #49A9FF;
    }

    .el-input-group__append {
        /* background-color: #fff; */
    }

    /* 卡片 */
    .plugin-list {
        margin: 0 0 0 -20px;
        /* padding-right: 100px; */
        display: flex;
        flex-wrap: wrap;
    }

    .plugin-list .plugin-item {
        width: 20%;
        min-width: 400px;
    }


    .plugin-item {
        border: 1px solid #ebebeb;
        background: #FFFFFF;
        box-shadow: 3px 5px 15px rgba(80, 80, 80, 0.16);
        opacity: 1;
        border-radius: 5px;
        padding: 20px;
        margin: 0 0 20px 20px;
        transition: 250ms;
        position: relative;
        /* min-width: 300px; */
    }

    .plugin-item .item-status {
        position: absolute;
        top: 0;
        right: 0;
        width: 94px;
        height: 30px;
        background: #E8EAEC;
        opacity: 1;
        border-radius: 0px 5px 0px 5px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 30px;
        color: #9398A4;
        text-align: center;
    }

    .item-status-permanent {
        width: 94px;
    }

    .item-status-effective {
        width: 164px;
    }

    .plugin-item .item-info {
        display: flex;
        align-items: center;
    }

    /* .plugin-item .item-info .item-right{
        min-width: 500px;
    } */

    .plugin-item .item-btns {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 12px;
    }


    .plugin-item .mall-logo {
        width: 70px;
        height: 70px;
        margin-right: 12px;
    }

    .plugin-item .mall-logo img {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 50%;
    }

    .plugin-item .display-name {
        font-size: 18pt;
        margin-top: 10px;
        margin-bottom: 4px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        line-height: 30px;
        color: #3F495D;
        opacity: 1;
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .plugin-item .name {
        color: #909399;
    }

    .plugin-item:hover {
        cursor: pointer;
        border-color: #bfddff;
    }

    /* .plugin-item:hover .display-name {
        color: #409EFF;
    } */

    .plugin-item .plugin-option-btn {
        height: 25px;
        width: 25px;
        font-size: 12px;
        padding: 0;
    }

    .plugin-item .detail-option.detail-option {
        color: #909399;
        background: #F2F6FC;
    }

    .plugin-item .detail-option:hover {
        color: #fff;
        background: #909399;
    }
</style>
<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-dialog-select');
ComponentHelper::loadComponentView('com-dialog-select-store');
ComponentHelper::loadComponentView('com-image');

?>
<div id="app" v-cloak>
    <el-card 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="table-body">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" @close="handleClose('ruleForm')">
                <el-form-item label="等级权重" :label-width="formLabelWidth" prop="level">
                    <el-select style="width: 100%" v-model="ruleForm.level" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.level"
                                :label="item.name"
                                :value="item.level"
                                :disabled="item.disabled && item.level!=origin_level">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="会员名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item :label-width="formLabelWidth" prop="discount">
                    <template slot='label'>
                        <span>折扣</span>
                        <el-tooltip effect="dark" content="请输入0.1~10之间的数字"
                                    placement="top">
                            <i class="el-icon-info"></i>
                        </el-tooltip>
                    </template>
                    <el-input placeholder="请输入折扣" min="0" max="10" type="number" v-model="ruleForm.discount"
                              auto-complete="off">
                        <template slot="append">折</template>
                    </el-input>
                </el-form-item>

                <el-form-item label="状态" prop="status" :label-width="formLabelWidth">
                    <el-switch v-model="ruleForm.status" active-value="1" inactive-value="0" active-text="开启"
                               inactive-text="关闭">
                    </el-switch>
                </el-form-item>
                <el-form-item label="会员图标" prop="pic_url" :label-width="formLabelWidth">
                    <com-attachment :multiple="false" :max="1" @selected="picUrl">
                        <el-tooltip class="item" effect="dark" content="建议尺寸44*44" placement="top">
                            <el-button size="mini">选择文件</el-button>
                        </el-tooltip>
                    </com-attachment>
                    <com-image width="80px" height="80px" mode="aspectFill" :src="ruleForm.pic_url"></com-image>
                </el-form-item>

                <el-form-item label="是否启用自动升级" prop="is_auto_upgrade" :label-width="formLabelWidth">
                    <el-switch v-model="ruleForm.is_auto_upgrade" :active-value="1" :inactive-value="0" active-text="开启"
                               inactive-text="关闭">
                    </el-switch>
                </el-form-item>
                <template v-if="ruleForm.is_auto_upgrade == 1">

                    <?php echo $tpl; ?>

                </template>
                <el-form-item label="购买指定分类的任意产品升级" prop="cate_ids">
                    <el-radio-group v-model="ruleForm.buy_cate_type">
                        <el-radio :label="0">订单完成</el-radio>
                        <el-radio :label="1">支付完成</el-radio>
                    </el-radio-group>
                    <el-cascader size="small" v-model="ruleForm.cate_ids" :options="good_cate_list" :props="{ multiple: true,checkStrictly: true,emitPath: false, }" clearable></el-cascader>
                </el-form-item>

                <el-form-item label="会员权益(多条)" prop="benefits" style="padding-right: 0">
                    <el-table
                            style="margin-bottom: 15px;"
                            v-if="ruleForm.benefits.length > 0"
                            :data="ruleForm.benefits"
                            border
                            style="width: 100%;">
                        <el-table-column
                                label="权益标题"
                                width="180">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.title" placeholder="请输入标题"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="权益图标"
                                width="180">
                            <template slot-scope="scope">
                                <div flex="box:first">
                                    <div flex="cross:center" style="margin-right: 10px;">
                                        <com-attachment :multiple="false" :params="scope.row" :max="1"
                                                        @selected="benefitsPicUrl">
                                            <el-tooltip class="item" effect="dark" content="建议尺寸80*80" placement="top">
                                                <el-button size="mini">选择图片</el-button>
                                            </el-tooltip>
                                        </com-attachment>
                                    </div>
                                    <div>
                                        <com-image mode="aspectFill" :src="scope.row.pic_url">
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="权益内容" width="600">
                            <template slot-scope="scope">
                                <el-input type="textarea"
                                          v-model="scope.row.content"
                                          placeholder="请输入内容">
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="操作">
                            <template slot-scope="scope">
                                <el-button size="small" @click="destroyRigths(scope.$index)" type="text" circle>
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-button type="text" @click="addBenefits">
                        <i class="el-icon-plus" style="font-weight: bolder;margin-left: 5px;"></i>
                        <span style="color: #353535;font-size: 14px">新增权益</span>
                    </el-button>
                </el-form-item>
                <el-form-item label="会员有效期设置" prop="is_auto_upgrade" :label-width="formLabelWidth">
                    <el-switch v-model="ruleForm.is_open_expired" :active-value="1" :inactive-value="0" active-text="开启"
                               inactive-text="关闭">
                    </el-switch>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth" prop="expired_day">
                    <template slot='label'>
                        <span>有效期时间</span>
                    </template>
                    <el-input placeholder="请输入有效期时间" min="0" type="number" v-model="ruleForm.expired_day"
                              auto-complete="off" style="width: 300px;">
                        <template slot="append">天</template>
                    </el-input>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth" prop="member_price_is_show">
                    <template slot='label'>
                        <span>下级会员价展示</span>
                        <el-tooltip effect="dark" content="开关开启以后对应该等级的用户商品详情展示下级会员价格"
                                    placement="top">
                            <i class="el-icon-info"></i>
                        </el-tooltip>
                    </template>
                    <el-switch v-model="ruleForm.member_price_is_show" :active-value="1" :inactive-value="0" active-text="开启"
                               inactive-text="关闭">
                    </el-switch>
                </el-form-item>
                <el-form-item label-width="160px" prop="is_specified_level">
                    <template slot='label'>
                        <span>指定等级会员价展示</span>
                        <el-tooltip effect="dark" content="开启以后勾选了的等级该等级的用户才可以看到勾选的会员价"
                                    placement="top">
                            <i class="el-icon-info"></i>
                        </el-tooltip>
                    </template>
                    <el-switch v-model="ruleForm.is_specified_level" :active-value="1" :inactive-value="0" active-text="开启"
                               inactive-text="关闭">
                    </el-switch>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth" v-if="ruleForm.is_specified_level == 1">
                    <template>
                        <el-checkbox-group v-model="ruleForm.specified_level">
                            <el-checkbox :label="item.level" v-for="item in level_options" :key="item.level">{{item.name}}</el-checkbox>
                        </el-checkbox-group>
                    </template>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="postAdd('ruleForm')">确 定</el-button>
            </div>
        </div>
    </el-card>

</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                origin_level:0,
                tableData: [],
                options: [],//会员等级列表
                dialogFormVisible_edit: false,
                rules: {
                    name: [{
                        required: true,
                        message: '请输入会员名称',
                        trigger: 'blur'},
                        {
                            validator: (rule, value, callback) => {
                                if(value.length>65){
                                    callback('1~65个字符');
                                }
                                callback();
                            }
                        }
                    ],
                    discount: [
                        {
                            validator: (rule, value, callback) => {
                                if(value>10||value<0.1){
                                    callback('0.1~10之间的数字');
                                }
                                callback();
                            }
                        }
                    ],
                    level: [{
                        required: true,
                        message: '请选择会员等级',
                        trigger: 'blur'
                    },
                    ],
                },
                level_name: '',
                ruleForm: {
                    id: '',
                    name: '',
                    level: '',
                    status: '1',
                    pic_url: '',
                    is_auto_upgrade: 1,
                    discount: 10,
                    upgrade_type_condition: 1,
                    condition_type: 1,
                    upgrade_type_goods: 1,
                    goods_type: 1,
                    buy_goods_type: 1,
                    buy_cate_type: 1,
                    goods_ids: [],
                    goods_list: [],

                    store_upgrade_type_goods: 1,
                    store_goods_type: 1,
                    store_buy_goods_type: 1,
                    store_goods_ids: [],
                    store_goods_list: [],
                    benefits: [],
                    checked_condition_keys: [],
                    checked_condition_values:<?= $key_arr?>,
                    cate_ids :[],
                    is_open_expired:0,
                    expired_day:0,
                    member_price_is_show:0,
                    enable_goods_protocol: 0,
                    is_specified_level: 0,
                    specified_level: [],
                    is_custom_condition_num: 0,
                },
                good_cate_list :[],
                options_list:<?= $source_list ?>,
                checkbox_list: <?= $checkbox_list ?>,
                formLabelWidth: '150px',
                level_options: [],
                is_set_condition: false,
                is_show_condition_num: true,
            }
        },
        created() {
            this.getList();
        },
        methods: {
            postAdd(formName) {
                console.log(11,this.ruleForm);
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$request({
                            method: "post",
                            params: {
                                r: 'mall/user-level/edit',
                            },
                            data: this.ruleForm
                        }).then(e => {
                            if (e.data.code == 0) {
                                this.$message({
                                    message: e.data.msg,
                                    type: 'success'
                                });
                                navigateTo("/index.php?r=mall/user-level/index")
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                        });
                    }
                });
            },
            getList() {
                this.$request({
                    params: {
                        r: 'mall/user-level/edit',
                        id: getQuery('id')
                    },
                }).then(e => {
                    if (e.data.code == 0) {
                        if(!isEmpty(e.data.data.checked_condition_values)){
                            Object.assign(this.ruleForm, e.data.data);
                        }else{
                            let checked_condition_values = this.ruleForm.checked_condition_values
                            Object.assign(this.ruleForm, e.data.data);
                            this.ruleForm.checked_condition_values = checked_condition_values
                        }
                        if(this.ruleForm.good_cate_list) this.ruleForm.good_cate_list = '';
                        this.origin_level =this.ruleForm.level;
                        this.good_cate_list = e.data.data.good_cate_list;
                        this.ruleForm.status=this.ruleForm.status.toString();
                        this.options = e.data.data.level_list;
                        this.level_options = e.data.data.user_level_list

                        if (Array.isArray(this.ruleForm.goods_list)) {
                            for (const goodsItem of this.ruleForm.goods_list) {
                                goodsItem.condition_num = goodsItem.condition_num || 1
                            }
                        }
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            },
            picUrl(e) {
                if (e.length) {
                    this.ruleForm.pic_url = e[0].url;
                    this.$refs.ruleForm.validateField('pic_url');
                }
            },
            goodsSelect(param) {
                for (let j in param) {
                    let item = param[j];
                    console.log(item);

                    if (this.ruleForm.goods_ids&&this.ruleForm.goods_ids.length >= 99) {
                        this.$message.error('指定商品不能大于99个');
                        return;
                    }
                    let flag = true;
                    for (let i in this.ruleForm.goods_ids) {
                        if (this.ruleForm.goods_ids[i] == item.id) {
                            flag = false;
                            break;
                        }
                    }
                    if (flag) {
                        this.ruleForm.goods_ids.push(item.id);
                        this.ruleForm.goods_list.push({
                            id: item.id,
                            condition_num: 1,
                            name: item.goods_name,
                            cover_pic: item.cover_pic,
                        });
                    }
                }
            },
            storeGoodsSelect(param) {
                if(!this.ruleForm.store_goods_ids){
                    this.ruleForm.store_goods_ids = [];
                    this.ruleForm.store_goods_list = [];
                }
                for (let j in param) {
                    let item = param[j];
                    console.log(item);

                    if (this.ruleForm.store_goods_ids.length >= 20) {
                        this.$message.error('指定门店商品不能大于20个');
                        return;
                    }
                    let flag = true;
                    for (let i in this.ruleForm.store_goods_ids) {
                        if (this.ruleForm.store_goods_ids[i] == item.id) {
                            flag = false;
                            break;
                        }
                    }
                    if (flag) {
                        this.ruleForm.store_goods_ids.push(item.id);
                        this.ruleForm.store_goods_list.push({
                            id: item.id,
                            name: item.goods_name,
                            cover_pic: item.cover_pic,
                        });
                    }
                }
            },
            deleteGoods(index) {
                this.ruleForm.goods_list.splice(index, 1);
                this.ruleForm.goods_ids.splice(index, 1);
            },
            deleteStoreGoods(index) {
                this.ruleForm.store_goods_list.splice(index, 1);
                this.ruleForm.store_goods_ids.splice(index, 1);
            },
            // 添加权益
            addBenefits() {
                this.ruleForm.benefits.push({
                    id: 0,
                    title: '',
                    pic_url: '',
                    content: '',
                })
            },
            // 删除权益
            destroyRigths(index) {
                this.ruleForm.benefits.splice(index, 1);
            },
            benefitsPicUrl(e, params) {
                if (e.length) {
                    params.pic_url = e[0].url;
                }
            },
            //跳转升级界面
            setCondition() {
                navigateTo({
                    r: 'mall/user-level/condition-set',
                });
            },
            clickSelectCloudStockConditionGoods(){
                this.$refs.csgoods.$el.click()
            },
            conditionCloudStockGoodsSelect(param) {
                let ckey;
                this.ruleForm.checked_condition_values.forEach(function(item, index){
                    if(item.key==68)
                    {
                        ckey=index;
                    }

                })
                let gval=this.ruleForm.checked_condition_values[ckey].value.team_goods;
                let garr=[];
                if(gval && gval.length>0)
                {
                    garr=gval.split(",")
                }

                for (let j in param) {
                    let item = param[j];
                    let isHave=false;
                    garr.forEach(element => {
                        if(element==param[j].id)
                        {
                            isHave=true;
                        }
                    });
                    if(!isHave)
                    {
                        garr.push(param[j].id);
                    }

                }
                gval=garr.join(',');
                this.ruleForm.checked_condition_values[ckey].value.team_goods=gval;
                console.log(this.ruleForm.checked_condition_values[ckey]);
            },
            clickSelectConditionGoods() {
                this.$refs.cgoods.$el.click()
            },
            conditionGoodsSelect(param) {
                let ckey;
                this.ruleForm.checked_condition_values.forEach(function(item, index){
                    if(item.key==91)
                    {
                        ckey=index;
                    }

                })
                let gval=this.ruleForm.checked_condition_values[ckey].value.goods_ids;
                let garr=[];
                if(gval && gval.length>0)
                {
                    garr=gval.split(",")
                }

                for (let j in param) {
                    let item = param[j];
                    let isHave=false;
                    garr.forEach(element => {
                        if(element==param[j].id)
                        {
                            isHave=true;
                        }
                    });
                    if(!isHave)
                    {
                        garr.push(param[j].id);
                    }

                }
                gval=garr.join(',');
                this.ruleForm.checked_condition_values[ckey].value.goods_ids=gval;
            },
        },
    });
</script>