qimall/addons/Store/client/views/setting/score-deduction.php

<div id="app" v-cloak>
    <div class="container">
        <el-card shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
            <div slot="header">
                <div class="flex flex-x-between flex-y-center">
                    <span>积分设置</span>
                </div>
            </div>
        </el-card>

        <div class="content_form">
            <el-form :model="formData" ref="elForm" label-width="180px" style="position: relative;">
                <div class="title">
                    <span>积分抵扣设置</span>
                </div>
                <template v-if="is_score_deduction==1">
                    <el-form-item label="积分抵扣:" style="margin-top: 10px;">
                        <el-switch v-model="formData.score_deduction.is_score_deduction" :active-value="1" :inactive-value="0"></el-switch>
                    </el-form-item>
                    <template v-if="formData.score_deduction.is_score_deduction==1">
                        <el-form-item label="积分抵扣生效对象(平台):" >
                            <template>
                                <el-radio v-model="platform_score_deduction.effective" :label="1" disabled>全部</el-radio>
                                <el-radio v-model="platform_score_deduction.effective" :label="2" disabled>收银台订单</el-radio>
                                <el-radio v-model="platform_score_deduction.effective" :label="3" disabled>非收银台订单</el-radio>
                            </template>
                        </el-form-item>
                        <el-form-item label="最高抵扣比例(平台):" v-if="platform_score_deduction.deduction_type == 1" required>
                            <el-input size="small" v-model="platform_score_deduction.max_deduction_percent" disabled><template slot="append">%</template></el-input>
                            <div class="tips-text">最高抵扣金额：订单金额*N% (订单金额：优惠后价格，不包含运费)，收银台：输入金额*N%</div>
                        </el-form-item>
                        <el-form-item label="奖励比例(平台):" v-else>
                            <div style="display:flex;align-items: flex-end;">
                                <div>
                                    <div v-for="(item,index) in platform_score_deduction.deduction_proportion" :key='index' class="deduction-list" >
                                        <div class="deduction-list">
                                            消费在
                                            <el-form-item :prop="'score_deduction.deduction_proportion.' + index + '.min'">
                                                <el-input size="small" type="number" :min="0" class="member-money"  disabled style="width: 200px" v-model="item.min"
                                                          style="width: 150px">
                                                    <template slot="append">元</template>
                                                </el-input>
                                            </el-form-item>
                                            至
                                            <el-form-item :prop="'score_deduction.deduction_proportion.' + index + '.max'" >
                                                <el-input size="small" type="number" :min="0" :max="100" class="member-money" disabled style="width: 200px" v-model="item.max"
                                                          style="width: 150px;">
                                                    <template slot="append">元</template>
                                                </el-input>
                                            </el-form-item>
                                            之间，可以用积分抵扣
                                            <el-form-item :prop="'score_deduction.deduction_proportion.' + index + '.deduction_ratio'" >
                                                <el-input size="small" type="number" :min="0" :max="100" class="member-money" disabled v-model="item.deduction_ratio"
                                                          placeholder="" style="width: 200px">
                                                    <template slot="append">%</template>
                                                </el-input>
                                            </el-form-item>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tips-text">例如：实际支付在200-300区间，则可以用积分抵扣10%（不考虑运费）</div>
                        </el-form-item>
                    </template>

                    <el-form-item label="独立设置:" style="margin-top: 10px;" v-if="formData.score_deduction.is_score_deduction">
                        <el-switch v-model="formData.score_deduction.is_alone_score_deduction" :active-value="1"
                                   :inactive-value="0"></el-switch>
                    </el-form-item>
                    <template v-if="formData.score_deduction.is_alone_score_deduction==1 &&formData.score_deduction.is_score_deduction==1">
                    <el-form-item label="积分抵扣生效对象:" style="margin-top: 10px;">
                        <template>
                            <el-radio v-model="formData.score_deduction.effective" :label="1">全部</el-radio>
                            <el-radio v-model="formData.score_deduction.effective" :label="2">收银台订单</el-radio>
                            <el-radio v-model="formData.score_deduction.effective" :label="3">非收银台订单</el-radio>
                        </template>
                    </el-form-item>
                        <el-form-item prop="score_deduction.max_deduction_percent" label="最高抵扣比例:" v-if="platform_score_deduction.deduction_type == 1" :rules="paymentRules.alone_max_deduction_percent">
                            <el-input size="small" v-model="formData.score_deduction.max_deduction_percent" onInput="value=toNumber(value,2)"><template slot="append">%</template></el-input>
                            <div class="tips-text" style="line-height: 23px;">只可以比平台所设最高抵扣比例低，不可高于平台所设最高抵扣比例<br/>最高抵扣金额：订单金额*N% (订单金额：优惠后价格，不包含运费)，收银台：输入金额*N%</div>
                        </el-form-item>
                        <el-form-item label="奖励比例:" v-else>
                            <div style="display:flex;align-items: flex-end;">
                                <div>
                                    <div v-for="(item,index) in formData.score_deduction.deduction_proportion" :key='index' class="deduction-list" >
                                        <div class="deduction-list">
                                        消费在
                                        <el-form-item :prop="'score_deduction.deduction_proportion.' + index + '.min'" :rules="paymentRules.deduction_min">
                                            <el-input size="small" :min="0" class="member-money" style="width: 200px" v-model="item.min" onInput="value=toNumber(value,2)"
                                            style="width: 150px">
                                            <template slot="append">元</template>
                                            </el-input>
                                        </el-form-item>
                                        至
                                        <el-form-item :prop="'score_deduction.deduction_proportion.' + index + '.max'" :rules="paymentRules.deduction_max">
                                            <el-input size="small" :min="0" :max="100" class="member-money" style="width: 200px" v-model="item.max" onInput="value=toNumber(value,2)"
                                            style="width: 150px;">
                                            <template slot="append">元</template>
                                            </el-input>
                                        </el-form-item>
                                        之间，可以用积分抵扣
                                        <el-form-item :prop="'score_deduction.deduction_proportion.' + index + '.deduction_ratio'" :rules="paymentRules.deduction_ratio">
                                            <el-input size="small" type="number" :min="0" :max="100" class="member-money" v-model="item.deduction_ratio" onInput="value=toNumber(value,2)"
                                            placeholder="" style="width: 200px">
                                            <template slot="append">%</template>
                                            </el-input>
                                        </el-form-item>
                                        </div>
                                    </div>
                                </div>
                                <div  style="display:flex;" :class="(formData.score_deduction.deduction_proportion && formData.score_deduction.deduction_proportion.length) && 'form-bottom' ">
                                    <el-button
                                        style="margin-left: 10px;height:32px;" type="danger" size="small" @click="deleteItem" v-if="formData.score_deduction.deduction_proportion && formData.score_deduction.deduction_proportion.length">删除区间
                                        </el-button>
                                    <el-button
                                        :disabled="isAddDeduction"
                                        v-if="formData.score_deduction.deduction_proportion && formData.score_deduction.deduction_proportion.length<3"
                                        style="margin-left: 10px;height:32px;" type="primary" size="small" @click="addItem">添加区间
                                    </el-button>
                                </div>
                            </div>
                                <div class="tips-text">例如：实际支付在200-300区间，则可以用积分抵扣10%（不考虑运费）</div>
                            </el-form-item>
                    </template>
                    <el-form-item label="积分获得对象：" >
                        {{deduction_bear_text}}
                    </el-form-item>
                </template>
                <template v-else-if="is_score_deduction == -1">
                    <el-form-item label="">
                        <el-button size="small" type="primary" @click="score_deduction_apply.visible = true" v-if="score_deduction_apply.info == null || score_deduction_apply.info.check_status != 0"> 申 请 </el-button>
                        <el-button size="small" type="info" disabled v-else-if="score_deduction_apply.info.check_status == 0"> 申 请 </el-button>
                        <div class="tips-text" style="margin-top: 10px;color: #f56c6c;" v-if="score_deduction_apply.info == null || score_deduction_apply.info.check_status == 1">积分抵扣无权限，若需设置积分抵扣，请点击申请开通。</div>
                        <div class="tips-text" style="margin-top: 10px;color: #f56c6c;" v-else-if="score_deduction_apply.info.check_status == 0">已提交申请，平台审核中......</div>
                        <div class="tips-text" style="margin-top: 10px;color: #f56c6c;" v-else-if="score_deduction_apply.info.check_status == -1">审核结果：不通过。理由：{{score_deduction_apply.info.reason}}</div>
                    </el-form-item>
                </template>
                <template v-else>
                    <el-form-item label="" style="margin-top: 10px;">
                        <span>积分抵扣未开启，若需设置积分抵扣，则联系平台。</span>
                    </el-form-item>
                </template>
            <div class="title">
                <span>积分赠送</span>
            </div>
                <template v-if="is_score_give==1">
                    <el-form-item label="积分赠送承担方：" >
                        {{bear_text}}
                    </el-form-item>
                        <el-form-item label="积分赠送条件(平台)：" prop="condition">
                            <template>
                                <el-radio v-model="platform_score_give.condition" :label="0" disabled>全部订单</el-radio>
                                <el-radio v-model="platform_score_give.condition" :label="1" disabled>未使用积分抵扣的订单</el-radio>
                            </template>
                        </el-form-item>
                        <el-form-item label="积分赠送比例(平台)：" >
                            <div>
                                <el-radio-group v-model="platform_score_give.give_type" @change="handleGiveTypeChange">
                                    <el-radio :label="1" disabled>固定值</el-radio>
                                    <el-radio :label="2" disabled>百分比</el-radio>
                                </el-radio-group>
                            </div>
                            <el-input size="small" placeholder="请输入积分赠送数量" class="width-200" v-model="platform_score_give.give_num" disabled @input="formatGiveNumber(formData.score_give.give_num)">
                                <template slot="append">{{ formData.score_give.give_type == 1 ? '积分' : '%'}}</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="结算方式(平台)：">
                            <el-radio-group v-model="platform_score_give.settlement">
                                <el-radio :label="0" disabled>订单完成</el-radio>
                                <el-radio :label="1" disabled>支付完成</el-radio>
                            </el-radio-group>
                        </el-form-item>

                    <el-form-item label="是否开启独立设置:" prop="is_alone_score_give">
                        <el-switch v-model="formData.score_give.is_alone_score_give" :active-value="1" :inactive-value="0" :disabled="is_edit_score_give">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="积分赠送条件" prop="condition" v-if="formData.score_give.is_alone_score_give==1">
                        <template>
                            <el-radio v-model="formData.score_give.condition" :label="0" :disabled="is_edit_score_give">全部订单</el-radio>
                            <el-radio v-model="formData.score_give.condition" :label="1" :disabled="is_edit_score_give">未使用积分抵扣的订单</el-radio>
                        </template>
                    </el-form-item>
                    <el-form-item label="积分赠送比例" v-if="formData.score_give.is_alone_score_give==1">
                        <div>
                            <el-radio-group v-model="formData.score_give.give_type" @change="handleGiveTypeChange">
                                <el-radio :label="1" :disabled="is_edit_score_give">固定值</el-radio>
                                <el-radio :label="2" :disabled="is_edit_score_give">百分比</el-radio>
                            </el-radio-group>
                        </div>
                        <el-input size="small" placeholder="请输入积分赠送数量" class="width-200" :disabled="is_edit_score_give" v-model="formData.score_give.give_num" @input="formatGiveNumber(formData.score_give.give_num)">
                            <template slot="append">{{ formData.score_give.give_type == 1 ? '积分' : '%'}}</template>
                        </el-input>
                        <p class="tips-text">用户购物赠送的积分，如果不填写或者填写为0，则不赠送积分</p>
                        <p class="tips-text">如: 选择固定值10，则买商品固定送积分，如买2件b，则固定获取20积分</p>
                        <p class="tips-text">如: 选择百分比10，则买商品送比例积分，如买2件b，售价1件100，会员优惠20，运费10，则获取(200-20)x10%=18积分(按照优惠后的金额为计算基数，不计算运费)</p>
                    </el-form-item>
                    <el-form-item label="结算方式" v-if="formData.score_give.is_alone_score_give==1">
                        <el-radio-group v-model="formData.score_give.settlement">
                            <el-radio :label="0" :disabled="is_edit_score_give">订单完成</el-radio>
                            <el-radio :label="1" :disabled="is_edit_score_give">支付完成</el-radio>
                        </el-radio-group>
                        <div class="tips-text" >
                            注:结算方式只作用非收银台订单，不作用于收银台
                        </div>
                    </el-form-item>
                </template>
                <template v-else-if="is_score_give == -1">
                    <el-form-item label="">
                        <el-button size="small" type="primary" @click="score_give_apply.visible = true" v-if="score_give_apply.info == null || score_give_apply.info.check_status != 0"> 申 请 </el-button>
                        <el-button size="small" type="info" disabled v-else-if="score_give_apply.info.check_status == 0"> 申 请 </el-button>
                        <div class="tips-text" style="margin-top: 10px;color: #f56c6c;" v-if="score_give_apply.info == null || score_give_apply.info.check_status == 1">积分赠送无权限，若需设置积分赠送，请点击申请开通。</div>
                        <div class="tips-text" style="margin-top: 10px;color: #f56c6c;" v-else-if="score_give_apply.info.check_status == 0">已提交申请，平台审核中......</div>
                        <div class="tips-text" style="margin-top: 10px;color: #f56c6c;" v-else-if="score_give_apply.info.check_status == -1">审核结果：不通过。理由：{{score_give_apply.info.reason}}</div>
                    </el-form-item>
                </template>
                <template v-else>
                    <el-form-item label="" style="margin-top: 10px;">
                        <span>积分赠送未开启，若需设置积分赠送，则联系平台。</span>
                    </el-form-item>
                </template>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" size="small" :loading="submitLoading">保存</el-button>
                </el-form-item>
        </div>
        </el-form>
    </div>
    <el-dialog title="开通积分赠送申请" :visible.sync="score_give_apply.visible" width="50%" v-if="is_score_give == -1" class="score-give-protocol-dialog">
        <div class="protocol-content" v-html="score_give_apply.protocol"></div>
        <span slot="footer" class="dialog-footer">
            <el-checkbox v-model="score_give_apply.is_agree" style="margin-right: 15px;">已阅读协议且同意</el-checkbox>
            <el-button size="small" @click="score_give_apply.visible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="submitSocreGiveApply" :loading="score_give_apply.loading">提 交</el-button>
        </span>
    </el-dialog>
    <el-dialog title="开通积分抵扣申请" :visible.sync="score_deduction_apply.visible" width="50%" v-if="is_score_deduction == -1" class="score-give-protocol-dialog">
        <div class="protocol-content" v-html="score_deduction_apply.protocol"></div>
        <span slot="footer" class="dialog-footer">
            <el-checkbox v-model="score_deduction_apply.is_agree" style="margin-right: 15px;">已阅读协议且同意</el-checkbox>
            <el-button size="small" @click="score_deduction_apply.visible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="submitSocreDeductionApply" :loading="score_deduction_apply.loading">提 交</el-button>
        </span>
    </el-dialog>
</div>
<script>
    
    const app = new Vue({
        el: '#app',
        data() {
            // 自定义校验规则 (积分抵扣校验)
            let checkDeductionMin = (rule, value, callback) => {
                let fieldArr = rule.field.split('.')
                if(value < 0){
                    callback(new Error('不能小于0'));
                    return
                } else if(fieldArr.length == 4 && fieldArr[2]*1){
                    let index = fieldArr[2]
                    let item = this.formData.score_deduction.deduction_proportion[index-1]
                    if (parseFloat(value) <= parseFloat(item.max)) {
                        callback(new Error('不能小于上个区间的结束值'));
                        return
                    }
                }
                console.log(fieldArr.length == 4 && fieldArr[2]*1)
                callback();
            };
            let checkDeductionMax = (rule, value, callback) => {
                let fieldArr = rule.field.split('.')
                if(value < 0){
                    value = 0
                    callback(new Error('不能小于0'));
                    return
                } else if(fieldArr.length == 4){
                    let index = fieldArr[2]
                    let item = this.formData.score_deduction.deduction_proportion[index]
                    if (parseFloat(value) <= parseFloat(item.min)) {
                        callback(new Error('不能小于起始值'));
                        return
                    }
                } 
                callback();
            };
            let checkDeductionRatio = (rule, value, callback) => {
                if(value < 0 || value > 100) {
                    callback(new Error('抵扣比例取值在 0~100 之间'));
                } else {
                    callback();
                }
              
            };
            let checkAloneMaxDeductionPercent = (rule, value, callback) => {
                if(value > this.platform_score_deduction.max_deduction_percent) {
                    callback(new Error('门店设置最高抵扣比例不可高于平台'));
                }else {
                    callback();
                }
            };
            return {
                customers: [],
                formData: {
                    score_deduction:{
                        is_score_deduction: 0,//
                        is_alone_score_deduction: 0,//
                        effective: 1,//
                        deduction_proportion: [
                            {
                                min: '',
                                max: '',
                                deduction_ratio: ''
                            },
                        ],
                        max_deduction_percent: 0
                    },
                    score_give:{
                        is_alone_score_give:0,
                        condition:1,
                        give_type:1,
                        give_num:0,
                        settlement:0,
                    }
                },
                platform_score_give:{
                    condition:1,
                    give_type:1,
                    give_num:0,
                    settlement:0,
                },
                platform_score_deduction:{
                    effective: 1,
                    deduction_proportion: [
                        {
                            min: '',
                            max: '',
                            deduction_ratio: ''
                        },
                    ]
                },
                submitLoading:false,
                bear_text:'',
                deduction_bear_text:'',
                is_score_deduction:'',
                is_score_give:'',
                paymentRules:{
                    deduction_min:[
                        { required: true, message: '请填写消费区间', trigger: 'blur' },
                        { validator: checkDeductionMin, trigger: 'blur' }
                    ],
                    deduction_max:[
                        { required: true, message: '请填写消费区间', trigger: 'blur' },
                        { validator: checkDeductionMax, trigger: 'blur' }
                    ],
                    deduction_ratio:[
                        { required: true, message: '请输入抵扣比例', trigger: 'blur' },
                        { validator: checkDeductionRatio, trigger: 'blur' }
                    ],
                    alone_max_deduction_percent:[
                        { required: true, message: '请输入最高抵扣比例', trigger: 'blur' },
                        { validator: checkAloneMaxDeductionPercent, trigger: 'blur' }
                    ]  
                },
                is_edit_score_give:false,
                score_give_apply: {
                    visible: false,
                    loading: false,
                    is_agree: false,
                    protocol: '',
                    info: null
                },
                score_deduction_apply: {
                    visible: false,
                    loading: false,
                    is_agree: false,
                    protocol: '',
                    info: null
                }
            }
        },
        computed: {
            isAddDeduction() {
                let result = false
                this.formData.score_deduction.deduction_proportion.forEach(item=>{
                    if(item.min === '' || item.max === '' || item.deduction_ratio === ''){
                        result = true
                    }
                })
                return result
            }
        },
        methods: {
            addItem() {
                let deduction_proportion = JSON.parse(JSON.stringify(this.formData.score_deduction.deduction_proportion));
                let leng = deduction_proportion.length
                let item = {min: '', max: '', deduction_ratio: ''};
                if(leng){
                    let preItem = deduction_proportion[leng-1]
                    item.min = (preItem.max*1)+1
                }
                deduction_proportion.push(item);
                this.formData.score_deduction.deduction_proportion = deduction_proportion;
            },
            deleteItem() {
                this.formData.score_deduction.deduction_proportion.pop()
            },
            getScoreDeduction: function () {
                request({
                    params: {
                        r: 'store/client/setting/score-deduction',
                    },
                    method: 'get',
                }).then(e => {
                    this.formData.score_deduction = e.data.data.score_deduction;
                    this.formData.score_give = e.data.data.score_give;
                    this.is_score_deduction = e.data.data.platform_is_score_deduction;
                    this.is_score_give = e.data.data.platform_is_score_give;
                    this.bear_text = e.data.data.bear_text;
                    this.deduction_bear_text = e.data.data.deduction_bear_text;
                    this.platform_score_deduction = e.data.data.platform_score_deduction;
                    this.platform_score_give = e.data.data.platform_score_give;
                    this.score_give_apply.protocol = e.data.data.platform_store_limit_protocol;
                    this.score_give_apply.info = e.data.data.platform_score_give_store_apply;
                    this.score_deduction_apply.protocol = e.data.data.platform_deduction_store_limit_protocol;
                    this.score_deduction_apply.info = e.data.data.platform_score_deduction_store_apply;
                    if(this.platform_score_give.bear==0){
                        this.is_edit_score_give = true;
                    }
                }).catch(e => {
                })
            },
            onSubmit: function () {
                let self = this;
                self.$refs.elForm.validate(valid => {
                    if (valid) {
                        self.submitLoading = true;
                        request({
                            params: {
                                r: 'store/client/setting/score-deduction',
                            },
                            method: 'post',
                            data: this.formData,
                        }).then(e => {
                            self.submitLoading = false;
                            if (e.data.code === 0) {
                                this.$message({
                                    message: e.data.msg,
                                    type: 'success',

                                })
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.$message.error(e.data.msg);
                        })
                    } else {
                        self.$message.error('参数验证未通过');
                    }
                });
                
            },
            handleGiveTypeChange() {
                if (this.formData.score_give.give_type == 2) {
                    let giveNum = this.formData.score_give.give_num
                    giveNum = giveNum ? giveNum : 0
                    this.formData.score_give.give_num = parseInt(giveNum)
                }
            },
            submitSocreGiveApply() {
                if(!this.score_give_apply.is_agree) {
                    this.$message.error('请先勾选同意开通协议'); return;
                }
                this.score_give_apply.loading = true;
                request({
                    method: 'post',
                    params: { r: 'store/client/setting/score-give-apply' }
                }).then(res => {
                    this.score_give_apply.loading = false;
                    this.score_give_apply.visible = false;
                    if(res.data.code == 0) {
                        this.getScoreDeduction();
                        this.$message.success(res.data.msg);
                    }else{
                        this.$message.error(res.data.msg);
                    }
                });
            },
            submitSocreDeductionApply() {
                if(!this.score_deduction_apply.is_agree) {
                    this.$message.error('请先勾选同意开通协议'); return;
                }
                this.score_deduction_apply.loading = true;
                request({
                    method: 'post',
                    params: { r: 'store/client/setting/score-deduction-apply' }
                }).then(res => {
                    this.score_deduction_apply.loading = false;
                    this.score_deduction_apply.visible = false;
                    if(res.data.code == 0) {
                        this.getScoreDeduction();
                        this.$message.success(res.data.msg);
                    }else{
                        this.$message.error(res.data.msg);
                    }
                });
            }
        },
        mounted: function () {
            this.getScoreDeduction();
        }
    });
</script>
<style scoped>
    .content_form {
        padding: 20px;
        background: #FFFFFF;
    }

    .el_customer_group {
        display: flex;
        justify-content: left;
    }

    .el-checkbox-group {
        margin-left: 20px;
    }
    .title {
        width: max-content;
        padding: 0px 8px;
        border-left: 5px solid #1479F0;
        background-color: #fff;
        font-size: 18px;
        position: relative;
        left: 32px;
        margin: 20px 0;
    }
    .deduction-list {
        display: flex;
        align-items: flex-start;
        white-space: nowrap;
    }
    .deduction-list+.deduction-list{
        margin-top: 10px;
    }
    .form-bottom {
        margin-bottom: 26px;
    }
    .el-form-item .el-form-item {
        margin-bottom: 18px;
    }
    .score-give-protocol-dialog .el-dialog__body{
        min-height: 500px;
        padding: 0 20px;
    }
    .el-input {
        max-width: 450px;
    }
    .protocol-content img {
        max-width: 100% !important;
    }
</style>