qimall/addons/ReservationService/backend/views/goods/com-reservation-service.php

<template id="com-reservation-service">
    <div class="com-reservation-service">
        <el-card class="edit-card" shadow="never">

            <el-form :model="form" size="small" label-width="150px">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane v-for="(item,key) in form" :label="commission_type_map[key]" :name="key" :key="key">
                        <el-row>
                            <el-col :span="9">

                                <el-form-item label="开启分销提成奖励" prop="en_enable">
                                    <el-switch :active-value="1" :inactive-value="0" v-model="item.is_enable"></el-switch>
                                    <p style="color: #999">拿项目服务的金额比例，比如项目金额是100元的，技师拿80块钱，平台入账20</p>
                                </el-form-item>

                                <el-form-item label="项目服务佣金" prop="commission">
                                    <el-input v-model="item.commission">
                                        <template #append>
                                            <el-radio-group v-model="item.is_percent">
                                                <el-radio :label="1">百分比</el-radio>
                                                <el-radio :label="0">固定值</el-radio>
                                            </el-radio-group>
                                        </template>
                                    </el-input>
                                </el-form-item>

                                <el-form-item label="开启分销提成奖励" prop="is_enable_distribution">
                                    <el-switch :active-value="1" :inactive-value="0" v-model="item.is_enable_distribution"></el-switch>
                                    <p style="color: #999">开启以后可以享受下级服务项目提成的百分比奖励</p>
                                </el-form-item>

                                <template v-if="item.is_enable_distribution == 1">
                                    <!-- 等级,需要遍历所有等级 -->
                                    <el-form-item v-for="(item1, index) in level_arr.ReservationService" :label="item1.name" :key="index">
                                        <el-input v-model="item.distribution_config[item1.level].commission">
                                            <template #append>
                                                <el-radio-group v-model="item.distribution_config[item1.level].is_percent">
                                                    <el-radio :label="1">百分比</el-radio>
                                                    <el-radio :label="0">固定值</el-radio>
                                                </el-radio-group>
                                            </template>
                                        </el-input>
                                    </el-form-item>
                                </template>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>

            </el-form>
        </el-card>
    </div>
</template>
<script>
    Vue.component('com-reservation-service', {
        template: "#com-reservation-service",
        props: {
            level_arr: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            setting: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            commission_type_map: {
                type: Object,
                default: () => {
                    return {};
                }
            }
        },
        data() {
            return {
                activeName: 'commission',
                form: {},
            }
        },
        watch: {
            setting: {
                deep: true,
                immediate: true,
                handler(value) {
                    if (!isEmpty(value)) {
                        // console.log('typeof(value.config)', typeof(value.config))

                        for (let valueKey in value) {
                            if (typeof value[valueKey].distribution_config == 'string') {
                                value[valueKey].distribution_config = JSON.parse(value[valueKey].distribution_config)
                            }
                        }


                        this.form = value;
                    }
                }
            },
            level_arr: {
                deep: true,
                immediate: true,
                handler(value) {
                    if (!isEmpty(value)) {
                        //  如果不存在那么就处理
                        let def_levels = {}
                        for (let key in value.ReservationService) {
                            def_levels[value.ReservationService[key].level] = {
                                commission: 0,
                                is_percent: 1,
                            }
                        }
                        for (let commissionTypeMapKey in this.commission_type_map) {
                            if (["commission"].indexOf(commissionTypeMapKey) > -1) {
                                for (let levelArrKey in this.level_arr) {
                                    if (!this.form[commissionTypeMapKey]) {
                                        this.$set(this.form, commissionTypeMapKey, {
                                            is_enable: 0,
                                            is_percent: 1,
                                            commission: 0,
                                            item_type: 'goods',
                                            commission_type: commissionTypeMapKey,
                                            is_enable_distribution: 0,
                                            distribution_config: JSON.parse(JSON.stringify(def_levels))
                                        })
                                    }
                                }
                            }
                        }
                        this.$forceUpdate()
                    }
                }
            },
            form: {
                deep: true,
                immediate: true,
                handler(value) {
                    this.$emit("change", JSON.stringify(value), "ReservationService");
                }
            }
        },
        mounted() {
            console.log('mounted', this.setting, this.level_arr, this.commission_type_map)
        },
        methods: {
            handleClick(tab, event) {},
            participate(data) {
                for(let name in this.form) {
                    this.form[name].is_participate = data
                }
            },
        }
    });
</script>