qimall/addons/WechatVideoShop/backend/views/goods/com-wechat-video-shop.php

<template id="com-wechat-video-shop">
    <div class="com-wechat-video-shop">
        <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" @change="participate"></el-switch>
                </el-form-item>

                <el-tabs v-if="form.is_enable == 1" v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane v-for="(config,key) in form.config" :label="commission_type_map[key]" :name="key" :key="key">
                        <el-form-item label="是否独立设置" prop="is_independent_setting">
                            <el-switch :active-value="1" :inactive-value="0" v-model="config.is_independent_setting"></el-switch>
                        </el-form-item>
                        <el-form-item prop="reward_type" :label="`分销员${commission_type_map[key]}模式`">
                            <el-col :span="24">
                                <el-radio-group v-model="config.reward_type" size="small">
                                    <el-radio :label="0" border>固定金额</el-radio>
                                    <el-radio :label="1" border>百分比</el-radio>
                                </el-radio-group>
                            </el-col>
                        </el-form-item>

                        <!-- 列出等级 -->
                        <el-row>
                            <el-col :span="6">
                                <el-table size="mini" border :data="level_arr.WechatVideoShop">
                                    <el-table-column label="等级名称" prop="name" align="right" width="150px"></el-table-column>
                                    <el-table-column label="奖励设置" align="left">
                                        <template slot-scope="scope">
                                            <el-input v-model="config.level[scope.row.level]" size="small">
                                                <template #append>{{config.reward_type == 0 ? commission_type_map[key] : '%'}}</template>
                                            </el-input>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
        </el-card>
    </div>
</template>
<script>
    Vue.component('com-wechat-video-shop', {
        template: "#com-wechat-video-shop",
        props: {
            level_arr: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            setting: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            commission_type_map: {
                type: Object,
                default: () => {
                    return {};
                }
            }
        },
        data() {
            return {
                activeName: 'commission',
                form: {
                    is_enable: 1,
                    config: {}
                },
            }
        },
        watch: {
            setting: {
                deep: true,
                immediate: true,
                handler(value) {
                    if (!isEmpty(value)) {
                        // console.log('typeof(value.config)', typeof(value.config))
                        if (typeof value.config == 'string') {
                            value.config = JSON.parse(value.config)
                        }
                        this.form = value;
                    }
                }
            },
            level_arr: {
                deep: true,
                immediate: true,
                handler(value) {
                    if (!isEmpty(value)) {
                        let def_levels = {}
                        for (let wechatVideoShopKey in value.WechatVideoShop) {
                            def_levels[value.WechatVideoShop[wechatVideoShopKey].level] = 0
                        }
                        for (let commissionTypeMapKey in this.commission_type_map) {
                            if (["score", "commission"].indexOf(commissionTypeMapKey) > -1) {
                                if (!this.form.config[commissionTypeMapKey]) {
                                    this.$set(this.form.config, commissionTypeMapKey, {
                                        is_independent_setting: 0,
                                        reward_type: 0,
                                        level: JSON.parse(JSON.stringify(def_levels))
                                    })
                                }
                            }
                        }
                    }
                }
            },
            form: {
                deep: true,
                immediate: true,
                handler(value) {
                    this.$emit("change", JSON.stringify(value), "WechatVideoShop");
                }
            }
        },
        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>