qimall/addons/Community/backend/views/goods/com-community.php

<template id="com-community">
    <div class="com-community">
        <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" label-width="150px">
                <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="enable">
                            <el-switch :active-value="1" :inactive-value="0" v-model="config.enable"></el-switch>
                            <div class="tips-text" >开启后，该商品才参与全局配置的社区团购奖励</div>
                        </el-form-item>
                        <template v-if="config.enable == 1">
                            <el-form-item label="是否独立设置" prop="is_alone">
                                <el-switch :active-value="1" :inactive-value="0" v-model="config.is_alone"></el-switch>
                                <div class="tips-text" >开启后，该商品按独立设置的奖励分出，不受其它位置的配置影响</div>
                            </el-form-item>
                            <el-form-item label="类型" prop="is_percent">
                                <el-radio-group v-model="config.is_percent">
                                    <el-radio :label="0" class="grid-content bg-purple">百分比</el-radio>
                                    <el-radio :label="1" class="grid-content bg-purple">固定{{commission_type_map[config.commission_type]}}</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item label="计算方式" class='reward_diy_label' prop="calculate_type">
                                <el-radio-group v-model="config.calculate_type">
                                    <el-radio :label="0">实际支付金额</el-radio>
                                </el-radio-group>
                                <br/>
                                <div class="tips-text"  style="line-height: 24px;">
                                    如团长奖励设置为百分比这按这里的计算方式进行计算
                                </div>
                            </el-form-item>
                            <el-form-item label="赠送数额" prop="give_num">

                                <el-input style="width:200px;" v-model="config.give_num" type="number" placeholder="请输入数额">
                                    <template slot="append" v-if="config.is_percent == 0">%</template>
                                    <template slot="append" v-if="config.is_percent == 1">{{commission_type_map[config.commission_type]}}</template>
                                </el-input>
                            </el-form-item>
                        </template>

                    </el-tab-pane>
                </el-tabs>
            </el-form>
        </el-card>
    </div>
</template>
<script>
    Vue.component('com-community', {
        template: "#com-community",
        props: {
            setting: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            commission_type_map: {
                type: Object,
                default: () => {
                    return {};
                }
            }
        },
        data() {
            return {
                activeName: 'commission',
                form: {
                    commission: {
                        enable: 0,
                        is_alone: 0,
                        is_percent: 0,
                        give_num: 0,
                        calculate_type: 0,
                        commission_type: 'commission',
                        item_type: 'goods',
                    },
                    score: {
                        enable: 0,
                        is_alone: 0,
                        is_percent: 0,
                        give_num: 0,
                        calculate_type: 0,
                        commission_type: 'score',
                        item_type: 'goods',
                    },
                },
            }
        },
        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)) {
            //             let self = this;
            //             // 初始化赋值
            //             for (let name in self.commission_type_map) {
            //                 let setting = isEmpty(self.form[name]) ? {} : self.form[name];
            //                 if (Object.keys(setting).length <= 0) {
            //                     self.install = {
            //                         enable: isEmpty(self.form[name]) ? 1 : self.form[name].enable,
            //                         is_alone: isEmpty(self.form[name]) ? 0 : self.form[name].is_alone,
            //                         is_percent: isEmpty(self.form[name]) ? 0 : self.form[name].is_percent,
            //                         give_num: isEmpty(self.form[name]) ? 0 : self.form[name].give_num,
            //                         commission_type: name,
            //                         item_type: isEmpty(self.form[name]) ? 'goods' : self.form[name].item_type,
            //                     };
            //                     this.$set(self.form, name, JSON.parse(JSON.stringify(self.install)));
            //                 }
            // },
            form: {
                deep: true,
                immediate: true,
                handler(value) {
                    this.$emit("change", JSON.stringify(value), "Community");
                }
            },
        },
        methods: {
            loadData() {
                this.cardLoading = true;
                request({
                    params: {
                        r: 'community/community-goods/get-mode-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);
            }
        }
    });
</script>