qimall/addons/RandFee/backend/views/setting/index.php

<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 class="form_box">
            <template>
                <el-card>
                    <el-form :model="basic" size="small" ref="ruleForm" :rules="rules" label-width="150px">
                        <el-row>
                            <el-col :span="24">
                                <div class="title paddingTop">
                                    <span class="title-line"></span>
                                    <span>随机减条件</span>
                                </div>
                                <div class=" condition">
                                    <el-form-item label="订单满" v-for="(item, key) in basic.condition">
                                        <el-col :span="4">
                                            <el-form-item
                                                :key="item.key"
                                                :prop="'condition.' + key + '.total_price'"
                                            >
                                                <el-input oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入内容" v-model="item.total_price">
                                                    <template slot="append">元</template>
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="1">减</el-col>
                                        <el-col :span="4">
                                            <el-form-item
                                                :key="item.key"
                                                :prop="'condition.' + key + '.rand_min'"
                                            >
                                                <el-input oninput="value=value.replace(/[^0-9.]/g,'')" type="text" v-model="item.rand_min" placeholder="">
                                                    <template slot="append">元</template>
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="1">~</el-col>
                                        <el-col :span="4">
                                            <el-form-item
                                                :key="item.key"
                                                :prop="'condition.' + key + '.rand_max'"
                                            >
                                                <el-input oninput="value=value.replace(/[^0-9.]/g,'')" type="text" v-model="item.rand_max" placeholder="">
                                                    <template slot="append">元</template>
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="2">
                                            <span @click="delCondition(key)" class="del-condition">删除</span>
                                        </el-col>
                                        <br/>
                                        <div class="tips-text" style="line-height: 24px;">
                                            可设置阶梯式减免区间
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="">
                                        <el-button class="button-item" type="primary" @click="addCondition" size="small" v-if="addBtn">添加条件</el-button>
                                        <br/>
                                        <div class="tips-text" style="line-height: 24px;">
                                            增加新规则
                                        </div>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <!-- 参与权限 -->
                            <el-col :span="24">
                                <div class="title paddingTop">
                                    <span class="title-line"></span>
                                    <span>参与权限</span>
                                </div>
                                <div class="form-body root">
                                    <el-form-item label="" prop="member">
                                        <el-col :span="24">
                                            <el-checkbox-group v-model="basic.member">
                                                <el-checkbox
                                                    v-for="item in member"
                                                    :label="item.level"
                                                >{{ item.name }}</el-checkbox>
                                            </el-checkbox-group>
                                        </el-col>
                                        <br/>
                                        <div class="tips-text" style="line-height: 24px;">
                                            设置等级，如这里勾选了等级VIP，只有VIP等级的用户才能享受以上设置好的随机减活动
                                        </div>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <!-- 应用场景 -->
                            <el-col :span="24">
                                <div class="title paddingTop">
                                    <span class="title-line"></span>
                                    <span>应用场景</span>
                                </div>
                                <div class="form-body root">
                                    <el-form-item label="" prop="order">
                                        <el-col :span="24">
                                            <el-checkbox-group v-model="basic.order">
                                                <el-checkbox
                                                    v-for="item in order"
                                                    :label="item.value"
                                                >{{ item.name }}</el-checkbox>
                                            </el-checkbox-group>
                                        </el-col>
                                        <br/>
                                        <div class="tips-text" style="line-height: 24px;">
                                            选择随机减的应用场景
                                        </div>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-card>
            </template>
            <div style="border-top: 1px solid #dad9d9;">
                <el-button :loading="btnLoading" class="button-item" type="primary" style="margin-top: 10px;" @click="store('ruleForm')" size="small">保存
                </el-button>
            </div>
        </div>
    </el-card>
</div>

<script>
    const validateMoney = (rule, value, callback) => {
        if(!value){
            callback(new Error('价格不能为空'))
        } else if (Number(value) == 0) {
            callback(new Error('价格不能小于或等于0'))
        } else if (String(value).indexOf(".") != -1 && String(value).split('.').length > 2) {
            callback(new Error('请输入正确格式的金额')) //防止输入多个小数点
        } else if (String(value).indexOf(".") != -1 && String(value).split('.')[1].length > 2) {
            callback(new Error('请输入正确的小数位数')) //小数点后两位
        } else {
            callback();
        }
    };

    const app = new Vue({
        el: '#app',
        data() {
            return {
                addBtn: true,
                activeName: 'basic',
                loading: false,
                btnLoading: false,
                dialogVisible: false,
                basic: {
                    condition: [{}],
                    member: [],
                    order: [],
                },
                // member
                member: [
                    {
                        level: 0,
                        name: '全部会员',
                    },
                ],
                // order
                order: [],
                rules: {
                    member: {required: true, message: '选择会员权限不能为空'},
                    // order: {required: true, message: '选择会员权限不能为空'},
                },
                // :rules="{required: true, validator: validateMoney, trigger: 'blur', message: '金额有误'}"
            }
        },
        mounted: function() {
            this.changeRules(this.basic.condition)
            this.loadData();
        },
        methods: {
            // 获取基础设置详情
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'rand-fee/setting/index',
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        if (e.data.data) {
                            if (JSON.stringify(e.data.data.conf) != "[]") {
                                this.basic = e.data.data.conf
                            }
                            this.member = this.member.concat(e.data.data.level)
                            this.order = e.data.data.order
                        }
                    } else {
                        this.$message.error(e.data.msg)
                    }
                }).catch(e => {
                    this.loading = false;
                })
            },
            // 添加条件
            addCondition() {
                if (this.basic.condition.length >= 10) {
                    return
                }
                this.basic.condition.push({})
            },
            // 删除条件
            delCondition(key) {
                let condition = this.basic.condition.filter((item, index) => {
                    return index != key
                })
                this.basic.condition = condition
            },
            // 保存
            store(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.basic.condition.length <= 0) {
                            this.$message.error('请至少设置一个条件');
                            return
                        }
                        var self = this
                        self.btnLoading = true;
                        request({
                            params: {
                                r: 'rand-fee/setting/submit',
                            },
                            method: 'post',
                            data: self.basic
                        }).then(e => {
                            self.btnLoading = false;
                            if (e.data.code == 0) {
                                self.$message.success(e.data.msg);
                            } else {
                                self.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            self.$message.error(e);
                            self.btnLoading = false;
                        })
                    } else {
                        console.log(valid)
                    }
                })
            },
            changeRules (val) {
                let self = this

                let validateRepeat = (rule, value, callback) => {
                    var ary = []
                    this.basic.condition.forEach((val) => {
                        ary.push(val.total_price)
                    });
                    var nary = ary.sort();
                    for(var i = 0; i < nary.length - 1; i++) {
                        if(nary[i] == nary[i + 1]) {
                            callback(new Error('请勿输入重复金额')) //
                        }
                    }
                    callback();
                }

                let validateMin = (rule, value, callback) => {
                    let key = rule.field.substr(rule.field.indexOf(".") + 1, 1)
                    if (parseFloat(value) >= parseFloat(this.basic.condition[key].rand_max)) {
                        callback(new Error('请勿输入大于结束金额'))
                    } else {
                        callback();
                    }
                }

                let validateMax = (rule, value, callback) => {
                    let key = rule.field.substr(rule.field.indexOf(".") + 1, 1)
                    if (parseFloat(value) <= parseFloat(this.basic.condition[key].rand_min)) {
                        callback(new Error('请勿输入小于开始金额'))
                    } else {
                        callback();
                    }
                }

                let validateIsMax = (rule, value, callback) => {
                    let key = rule.field.substr(rule.field.indexOf(".") + 1, 1)
                    if (parseFloat(value) >= parseFloat(this.basic.condition[key].total_price)) {
                        callback(new Error('请勿输入大于订单最大金额'))
                    } else {
                        callback();
                    }
                }

                if (val && val.length > 0) {
                    val.forEach((item, key) => {
                        let condition = 'condition.' + key + '.total_price'
                        let rand_min = 'condition.' + key + '.rand_min'
                        let rand_max = 'condition.' + key + '.rand_max'
                        self.rules[condition] = [
                            {required: true, validator: validateMoney, trigger: 'blur', message: '金额有误'},
                            {required: true, validator: validateRepeat, trigger: 'blur', message: '金额重复'}
                        ]
                        self.rules[rand_min] = [
                            {required: true, validator: validateMoney, trigger: 'blur', message: '金额有误'},
                            {required: true, validator: validateMin, trigger: 'blur', message: '请勿输入大于结束金额'},
                            {required: true, validator: validateIsMax, trigger: 'blur', message: '请勿输入大于订单最大金额'},
                        ]
                        self.rules[rand_max] = [
                            {required: true, validator: validateMoney, trigger: 'blur', message: '金额有误'},
                            {required: true, validator: validateMax, trigger: 'blur', message: '请勿输入小于开始金额'},
                            {required: true, validator: validateIsMax, trigger: 'blur', message: '请勿输入大于订单最大金额'}
                        ]
                    })
                }
                this.addBtn = (val && val.length >= 10) ? false : true
            }
        },
        watch: {
            'basic.condition': function (val) {
                this.changeRules(val)
            },
        }
    });
</script>
<style>
    .form_box {
        background-color: #f3f3f3;
        padding: 0 0 20px;
    }

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

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

    .el-form-item {
        margin-bottom: 25px !important;
    }

    .title {
        display: flex;
        align-items: center;
        padding: 18px 20px;
        /* border-top: 1px solid #F3F3F3; */
        border-bottom: 1px solid #F3F3F3;
        background-color: #fff;
    }

    .title-line {
        width: 4px;
        height: 20px;
        background-color: #1479F0;
        margin-right: 10px;
    }

    .paddingTop {
        margin-top: 10px;
    }

    .condition .el-col-1 {
        text-align: center;
        /* margin-left: 50px !important; */
    }

    .condition .el-col-2 {
        text-align: center;
        /* margin-left: 50px !important; */
    }

    .del-condition {
        cursor: pointer;
    }

    .condition .el-form-item {
        margin-bottom: 8px !important;
    }
</style>