qimall/addons/CircleDistribution/backend/views/goods/com-circle-distribution.php

<template id="com-circle-distribution">
    <div class="com-circle-distribution">
        <el-card class="edit-card" shadow="never">
            <!-- <div slot="header" class="clearfix">
                <div class="card-title">循环分销设置<span class="card-sub-title"></span></div>
            </div> -->
            <el-form :model="form" size="small">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane v-for="(config,key) in form" :label="commission_type_map[key]" :name="key" :key="key">
                        <el-form-item label="不参与分销循环" prop="is_not_involved_distribution">
                            <el-switch :active-value="1" :inactive-value="0" v-model="config.is_not_involved_distribution"></el-switch>
                            <p style="color: #C0C4CC;">开启以后该商品不参与分销循环分佣</p>
                        </el-form-item>
                        <el-form-item label="是否独立设置" prop="is_enable">
                            <el-switch :active-value="1" :inactive-value="0" v-model="config.is_enable"></el-switch>
                        </el-form-item>

                        <el-row :gutter="24" v-if="config.is_enable == 1">
                            <el-col :span="24">
                                <el-card shadow="always">
                                    <el-form-item label="分销佣金类型" prop="is_percent">
                                        <el-radio-group v-model="config.is_percent">
                                            <el-radio :label="0">百分比</el-radio>
                                            <el-radio :label="1">固定</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item v-for="(item,index) in config.commission_value" :key='index'
                                        v-if="config.commission_value.length > 0 && (config.settings == 0 || is_attr == 0)"
                                        label='佣金阶梯' prop="first_score">
                                        <el-input type="number" :min="0" v-model="item.value"
                                            style="width: 360px;margin-right: 20px;">
                                            <template slot="prepend">直推第{{ index+1 }}人/直推第n+{{ index+1 }}人</template>
                                            <template slot="append" v-if="config.is_percent == 0">%</template>

                                            <template slot="append" v-if="config.is_percent == 1">
                                                <template v-if="config.commission_type == 'commission'">元</template>
                                                <template
                                                    v-if="config.commission_type == 'score'">{{commission_type_map[config.commission_type]}}</template>
                                            </template>
                                        </el-input>
                                        <el-button v-if="config.commission_value && config.commission_value.length>=1"
                                            size="mini" type="danger" icon="el-icon-close" circle
                                            @click="delItem(index, config.commission_type)"
                                            style="margin-left:10px"></el-button>

                                    </el-form-item>
                                    <el-button type="primary" @click="dirctAddSet(config.commission_type)" size="small"
                                        style="margin-bottom: 10px;margin-left:60px">+添加佣金阶梯</el-button>

                                </el-card>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
        </el-card>
    </div>
</template>
<script>
    Vue.component('com-circle-distribution', {
        template: "#com-circle-distribution",
        props: {
            level_arr: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            setting: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            commission_type_map: {
                type: Object,
                default: () => {
                    return {};
                }
            }
        },
        data() {
            return {
                levels: 2,
                activeName: 'commission',
                form: {

                },
                is_attr: 0,
                install: { // 初始化数据
                    is_enable: 0,
                    is_percent: 0,
                    item_type: 'goods',
                    commission_type: '',
                    settings: 0,
                    commission_value: {},
                    is_not_involved_distribution: 0
                }
            }
        },
        mounted() {
        },
        watch: {
            setting: {
                deep: true,
                immediate: true,
                handler(value) {
                    if (!isEmpty(value)) {
                        this.form = value;
                    }
                }
            },
            commission_type_map: {
                deep: true,
                immediate: true,
                handler(value) {
                    if (!isEmpty(value) && isEmpty(this.setting)) {
                        let self = this;
                        // 初始化赋值
                        for (let name in self.commission_type_map) {
                            let commission_value = [];
                            self.install = {
                                is_enable: isEmpty(self.form[name]) ? 0 : self.form[name].is_enable,
                                is_percent: isEmpty(self.form[name]) ? 0 : self.form[name].is_percent,
                                item_type: isEmpty(self.form[name]) ? 'goods' : self.form[name].item_type,
                                commission_type: name,
                                commission_value: commission_value,
                                is_not_involved_distribution: isEmpty(self.form[name]) ? 0 : self.form[name].is_not_involved_distribution,
                            };
                            this.$set(self.form, name, JSON.parse(JSON.stringify(self.install)));
                        }
                    }
                }
            },
            form: {
                deep: true,
                immediate: true,
                handler(value) {
                    this.$emit("change", JSON.stringify(value), "CircleDistribution");
                }
            },
        },
        methods: {
            loadData() {
                this.cardLoading = true;
                request({
                    params: {
                        r: 'circle-distribution/setting/config-setting',
                        id: getQuery('id'),
                    },
                    method: 'get'
                }).then(e => {
                    this.cardLoading = false;
                    if (e.data.code == 0) {
                        this.levels = e.data.data.levels;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            handleSelectionChange() { },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            dirctAddSet(type) {
                let item_tmp = {
                    value: 0
                }
                this.form[type].commission_value.push(item_tmp);

            },
            delItem(index, type) {
                let commission_value = this.form[type].commission_value;
                commission_value.splice(index, 1);
                this.form[type].commission_value = commission_value;
            },
        }
    });
</script>