qimall/addons/Store/backend/views/setting/pattern-rebate.php

<template id="pattern-rebate">
    <div class="com-rebate">
        <el-card class="edit-card" shadow="never">
            <el-form :model="form" size="small">
                <el-form-item label="是否开启推三返一" prop="is_enable">
                    <el-switch :active-value="1" :inactive-value="0" v-model="form.is_enable"></el-switch>
                </el-form-item>
                <el-row :gutter="16" v-if="form.is_enable == 1">
                    <el-col :span="24">

                        <el-form-item label="奖励类型">
                            <el-radio-group v-model="form.detail.reward_type" @change="switchReward">
                                <el-radio :label="1">条件奖励</el-radio>
                                <el-radio :label="2">阶梯奖励</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="">
                            <el-table :data="rewardInfo" stripe style="width: 100%">
                                <el-table-column prop="num" label="奖励条件" width="300" class="accon">
                                    <template slot-scope="scope">
                                        {{ form.detail.reward_type == 1 ? '每' : '' }}推荐
                                        <el-input v-model="scope.row.num" type="number" style="max-width: 200px;padding-left: 10px;" @input="validatorInfo($event,scope.$index)">
                                            <template slot="append">人购买</template>
                                        </el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="data" label="奖励内容">
                                    <template slot-scope="scope">
                                        <div style="margin-bottom: 14px;" v-for="(type,index) in scope.row.data" :key="index">
                                            <div class="ratio_change" v-show="scope.row.data[index].key!=0">
                                                <el-radio :label="0" v-model="scope.row.data[index].ratio">固定值</el-radio>
                                                <el-radio :label="1" v-model="scope.row.data[index].ratio">百分比</el-radio>
                                            </div>
                                            <div style="margin-bottom: 10px;" flex>
                                                <el-select v-model="scope.row.data[index].key" placeholder="请选择" @change="updateType($event,scope.$index,index)">
                                                    <el-option v-for="item in rechargeType" :key="item.value" :label="item.label" :value="item.value" :disabled="scope.row.data.findIndex(v => v.key == item.value) != -1">
                                                    </el-option>
                                                </el-select>
                                                <el-button v-if="scope.row.data[index].key == 0" style="margin-left: 12px;" @click="openCouponPop(scope.$index)">选择优惠券</el-button>
                                                <div style="margin-left: 10px;" v-else>
                                                    <el-input v-model="scope.row.data[index].data" type="number" @input="validatorInfo($event,scope.$index,2,scope.row.data[index].key)">
                                                        <template slot="append">
                                                            <span v-if="scope.row.data[index].ratio==1">%</span>
                                                            <span v-else>元</span>
                                                        </template>
                                                    </el-input>

                                                </div>
                                                <el-button @click="delAward(scope.row.data[index].key,scope.$index)" v-if="scope.row.data.length > 1" type="text" icon="el-icon-close" style="color: #ec1717;font-size: 20px;padding: 0;margin-left: 12px;"></el-button>
                                            </div>
                                            <el-table v-if="scope.row.data[index].key == 0" :data="scope.row.data[index].data" stripe style="width: 100%;">
                                                <el-table-column prop="name" label="优惠券名称" width="160"></el-table-column>
                                                <el-table-column prop="discount_method" label="优惠券内容"></el-table-column>
                                                <el-table-column prop="from_type" label="优惠券类型">
                                                    <template slot-scope="couponScope">
                                                        {{couponScope.row.from_type == 1?'平台':'门店'}}
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="库存（张）" width="160">
                                                    <template slot-scope="couponScope">
                                                        {{couponScope.row.total_count == -1?'不限量':couponScope.row.total_count}}
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="dcount" label="奖励张数" width="160">
                                                    <template slot-scope="couponScope">
                                                        <el-input v-model="couponScope.row.num" type="number" @input="validatorInfo($event,scope.$index,3,0,couponScope.$index)">
                                                            <template slot="append">张</template>
                                                        </el-input>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="操作" width="100" align="center">
                                                    <template slot-scope="couponScope">
                                                        <el-button type="text" size="small" @click="delCoupon(couponScope.$index,scope.$index)">删除</el-button>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                        <div v-if="scope.row.data.length != rechargeType.length">
                                            <el-button @click="addAward(scope.$index)" size="small" plain>添加奖励内容</el-button>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="100" align="center">
                                    <template slot-scope="scope">
                                        <el-button @click="deleteReward(scope.$index)" type="text" size="small">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div>
                                <el-button size="small" style="margin-top: 10px;" @click="addRewardInfo" v-if="(form.detail.reward_type == 1 && rewardInfo.length == 0) || form.detail.reward_type == 2">添加奖励条件</el-button>
                            </div>
                        </el-form-item>
                        <template v-if="form.detail.reward_type == 2">
                            <el-form-item label="阶梯重复奖励">
                                <el-switch v-model="form.detail.is_repeat" :active-value="1" :inactive-value="0" active-color="#13ce66"></el-switch>
                                <div class="tips-text" style="line-height: 24px;">
                                    开启后阶梯奖励将会按照设置进行重复奖励，比如：<br />
                                    手动设置：推荐1人奖励30余额，推第3人奖励50余额；<br />
                                    自动奖励：推第4人奖励30余额，推第6人奖励50余额；<br />
                                    自动奖励：推第7人奖励30余额，推第9人奖励50余额；<br />
                                    自动奖励：以此类推……
                                </div>
                            </el-form-item>
                            <el-form-item label="触发奖励设置">
                                <el-switch v-model="form.detail.repeat_setting" :active-value="1" :inactive-value="0" active-color="#13ce66"></el-switch>
                                <div class="tips-text" style="line-height: 24px;">
                                    开启后，结算方式应与渠道分红结算方式保持一致，比如：<br />
                                    结算方式为支付完成：渠道分红结算方式可设置为支付完成、订单完成；<br />
                                    结算方式为订单完成：渠道分红结算方式只可设置为订单完成；<br />
                                </div>
                            </el-form-item>
                            <el-form-item v-if="form.detail.repeat_setting == 1" prop="dcount" label="渠道分红设置" width="160">
                                <span>第</span>
                                <el-input v-model="form.detail.agent_limit_num" type="number" style="max-width: 200px;">
                                    <template slot="append">单</template>
                                </el-input>
                                <span>及其倍数的订单不触发分佣奖励</span>
                            </el-form-item>
                        </template>
                    </el-col>
                </el-row>
            </el-form>
                <!-- 优惠券弹窗 -->
        <coupon-select v-if="has_coupon" :coupon-loading="couponPop" :coupon_arr="selCoupon" @submit="determine" @close="showCoupon"></coupon-select>
        </el-card>
    </div>
</template>
<script>
    Vue.component('pattern-rebate', {
        template: "#pattern-rebate",
        props: {
            setting: {
                type: Object,
                default: () => {
                    return {};
                }
            }
        },
        data() {
            return {
                form: {
                    is_enable: 0,
                    detail: {
                        initiate_type: 0,
                        initiate_level: [],
                        consume_type: 0,
                        consume_level: [],
                        reward_type: 1,
                        reward_info: [],
                        is_repeat: 0,
                        join_type: 0,
                        repeat_setting: 0,
                        agent_limit_num: 0,
                    }
                },
                has_coupon: true,
                rewardTemp1: [{
                    num: 0,
                    data: [{
                        key: 0,
                        name: "优惠券",
                        type: 'coupon',
                        data: [],
                        ratio: 0,
                    }],
                }], // 临时存储条件奖励类型值
                rewardTemp2: [{
                    num: 0,
                    data: [{
                        key: 0,
                        name: "优惠券",
                        type: 'coupon',
                        data: [],
                        ratio: 0,
                    }],
                }], // 临时存储阶梯奖励类型值
                rewardInfo: [{
                    num: 0,
                    data: [{
                        key: 0,
                        name: "优惠券",
                        type: 'coupon',
                        data: [],
                        ratio: 0,
                    }],
                }], //奖励内容
                rechargeType: [{
                        value: 0,
                        label: '优惠券'
                    },
                    {
                        value: 1,
                        label: '余额'
                    },
                    {
                        value: 2,
                        label: '佣金'
                    }

                ],
                typeArr: ['coupon', 'balance', 'commission'], //跟rechargeType对应
                couponPop: false,
                couponPopIndex: -1,
                selCoupon: [], //打开优惠券弹窗传递已选中的优惠券


            }
        },
        watch: {
            form: {
                deep: true,
                immediate: true,
                handler(value) {
                    this.form.detail.reward_info = this.rewardInfo;
                    this.$emit("change", value);
                }
            },
            setting: {
                deep: true,
                immediate: true,
                handler(value) {
                    if (!isEmpty(value)) {
                        this.form = value;
                        if(this.form.detail.reward_info.length>0)
                        {
                            this.rewardInfo = this.form.detail.reward_info
                        }
                       
                    }
                }
            },

        },
        methods: {
            // 添加奖励条件
            addAward(index) {
                let key = 0;
                for (let i = 0; i < this.rechargeType.length; i++) {
                    let dataIndex = this.rewardInfo[index].data.findIndex(v => v.key == this.rechargeType[i].value);
                    if (dataIndex == -1) {
                        key = i + key;
                        break;
                    }
                }
                let obj = {
                    key: this.rechargeType[key].value,
                    name: this.rechargeType[key].label,
                    type: this.typeArr[key],
                    data: key == 0 ? [] : '',
                    ratio: 0,
                }
                if (key != 0) {
                    obj.data = 0;
                }
                console.log(this.rewardInfo[index].data)
                this.rewardInfo[index].data.push(obj);
            },
            // 删除奖励条件
            delAward(key, index) {
                let couponIndex = this.rewardInfo[index].data.findIndex(v => v.key == key);
                this.rewardInfo[index].data.splice(couponIndex, 1);
            },
            // 打开优惠券弹窗
            openCouponPop(index) {
                if (this.has_coupon == false) {
                    this.$message.error("请安装优惠券插件");
                    return;
                }
                this.couponPopIndex = index;
                let dataIndex = this.rewardInfo[index].data.findIndex(v => v.type == 'coupon');
                this.selCoupon = this.rewardInfo[index].data[dataIndex].data;
                this.couponPop = true;
            },
            showCoupon() {
                this.couponPopIndex = -1;
                this.couponPop = false;
            },
            //弹窗确定
            determine(arr) {
                let couponPopData = this.rewardInfo[this.couponPopIndex].data;
                let couponIndex = couponPopData.findIndex(v => v.key == 0);
                if (couponIndex != -1) {
                    this.rewardInfo[this.couponPopIndex].data[couponIndex].data = arr;
                }
                this.couponPop = false;
            },
            // 删除优惠券
            delCoupon(selCouponIndex, index) {
                let couponPopData = this.rewardInfo[index].data;
                let couponIndex = couponPopData.findIndex(v => v.key == 0);
                if (couponIndex != -1) {
                    this.rewardInfo[index].data[couponIndex].data.splice(selCouponIndex, 1);
                }
            },
            // 添加奖励条件
            addRewardInfo() {
                this.rewardInfo.push({
                    num: 0,
                    data: [],
                });

            },
            // 删除奖励条件
            deleteReward(index) {
                this.rewardInfo.splice(index, 1);
            },
            // 切换奖励类型
            switchReward(event) {
                let self = this;
                if (event == 1) {
                    self.rewardTemp2 = self.rewardInfo;
                    self.rewardInfo = self.rewardTemp1;
                } else {
                    console.log(self.rewardInfo)
                    self.rewardTemp1 = self.rewardInfo;
                    self.rewardInfo = self.rewardTemp2;
                }
            },
            updateTime(val) {
                if (val) {
                    this.formData.start_at = parseInt(val[0].getTime() / 1000);
                    this.formData.end_at = parseInt(val[1].getTime() / 1000);
                } else {
                    this.formData.start_at = "";
                    this.formData.end_at = "";
                }
            },
            // 表单数值验证
            validatorInfo(val, index, type = 1, key, couponIndex) {
                console.info(val, index, type, key, couponIndex);
                if (val == '') {
                    return;
                }
                let dataIndex = -1;
                if (type != 1) {
                    dataIndex = this.rewardInfo[index].data.findIndex(v => v.key == key);
                }
                if (val <= 0) {
                    if (type == 2) {
                        this.rewardInfo[index].data[dataIndex].data = 0;
                    } else if (type == 3) {
                        this.rewardInfo[index].data[dataIndex].data[couponIndex].num = 0;
                    } else {
                        this.rewardInfo[index].num = 0;
                    }
                    return;
                }
                // 是否能最多保留两位小数
                let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
                if (!reg.test(val) && type != 3) {
                    let i = val.indexOf(".") + 3;
                    val = val.substr(0, i)
                    if (type == 2) {
                        this.rewardInfo[index].data[dataIndex].data = val;
                    } else {
                        this.rewardInfo[index].num = val;
                    }
                }
                if (type == 3) {
                    // total_count
                    val = parseInt(val);
                    let totalCount = this.rewardInfo[index].data[dataIndex].data[couponIndex].total_count;
                    if (totalCount < val && totalCount != -1) {
                        this.rewardInfo[index].data[dataIndex].data[couponIndex].num = totalCount;
                    } else {
                        this.rewardInfo[index].data[dataIndex].data[couponIndex].num = val;
                    }

                }

            },
            // 奖励奖励表单严重
            validatorForm() {
                /* this.rewardInfo.forEach(v => {
                    if()
                }) */
                let arr = ['优惠券', '余额','佣金'];
                for (let i = 0; i < this.rewardInfo.length; i++) {
                    if (this.rewardInfo[i].num <= 0) {
                        return "推荐人数不能小于等于0";
                    }
                    for (let j = 0; j < this.rewardInfo[i].data.length; j++) {
                        if (this.rewardInfo[i].data[j].key == 0) {
                            if (this.rewardInfo[i].data[j].data.length == 0) {
                                return "请选择奖励内容的优惠券";
                            }
                            this.$delete(this.rewardInfo[i].data[j], 'ratio');
                            text = this.validatorCoupon(this.rewardInfo[i].data[j].data);
                            if (text) return text;
                        } else {
                            if (!this.rewardInfo[i].data[j].data || this.rewardInfo[i].data[j].data <= 0) {
                                let value = '值';
                                if (this.rewardInfo[i].data[j].ratio == 1) {
                                    value = '百分比';
                                }
                                return "奖励内容的" + arr[this.rewardInfo[i].data[j].key] + value + "不能为空或小于等于0";
                            }
                        }
                    }
                }

                for (let i = 0; i < this.rewardInfo.length; i++) {
                    let num = this.rewardInfo[i].num;
                    let arr = this.rewardInfo.filter(v => v.num == num);
                    if (arr.length > 1) {
                        return "奖励条件不能重复"
                    }
                }

                return "";
            },
            // 验证优惠券
            validatorCoupon(couponList) {
                for (let i = 0; i < couponList.length; i++) {
                    if (couponList[i].num <= 0) {
                        return "优惠券奖励数量不能小于等于0";
                    }
                }
                return "";
            },
            // 更改奖励内容类型
            updateType(key, index, dataIndex) {
                this.rewardInfo[index].data[dataIndex].name = this.rechargeType[key].label;
                this.rewardInfo[index].data[dataIndex].type = this.typeArr[key];
                if (key == 0) {
                    this.rewardInfo[index].data[dataIndex].data = [];
                } else {
                    if (Array.isArray(this.rewardInfo[index].data[dataIndex].data)) {
                        this.rewardInfo[index].data[dataIndex].data = 0;
                        this.rewardInfo[index].data[dataIndex].ratio = 0;
                    }
                }
                this.$forceUpdate()
            },
        },
        created() {}
    });
</script>