qimall/addons/OperationCenter/backend/views/setting/index.php

<div id="app" v-cloak>
    <el-card
        v-loading="loading"
        style="border:0; min-width: 800px;"
        shadow="never"
        body-style="background-color: #f3f3f3;padding: 10px 0 0;"
    >
        <div slot="header">
			<span>配置</span>
		</div>
        <el-form
            :model="formData"
            ref="elForm"
            label-width="220px"
            style="position: relative"
            size="small"
            :rules="rules"
        >
            <el-row>
                <el-col :span="24">
                    <div class="form-body">
                        <!-- 基础设置 -->
                        <div class="title padding-top">
                            <span class="title-line"></span>
                            <span>基础设置</span>
                        </div>
                        <el-col :span="24">
                            <!-- 启用运营中心 -->
                            <el-form-item label="启用运营中心" prop="switch">
                                <el-switch
                                    v-model="formData.switch"
                                    :active-value="1"
                                    :inactive-value="0"
                                >
                                </el-switch>
                            </el-form-item>
                            
                            <!-- 是否推广中心显示 -->
                            <el-form-item label="是否推广中心显示" prop="show_center">
                                <el-switch
                                    v-model="formData.show_center"
                                    :active-value="1"
                                    :inactive-value="0"
                                >
                                </el-switch>
                            </el-form-item>

                            <!-- 下单限制必须选择运营中心 -->
                            <el-form-item label="下单限制必须选择运营中心" prop="order_limit">
                                <el-switch
                                    v-model="formData.order_limit"
                                    :active-value="1"
                                    :inactive-value="0"
                                >
                                </el-switch>
                            </el-form-item>

                            <!-- 结算方式 -->
                            <el-form-item label="结算方式" prop="compute_type">
                                <el-radio-group v-model="formData.compute_type" size="small">
                                    <el-radio :label="1" border>订单完成后</el-radio>
                                    <el-radio :label="2" border>订单支付后</el-radio>
                                </el-radio-group>
                                <div class="tips-text" style="line-height: 24px;">
                                    选择所产生的佣金是订单支付后就可以结算还是需要订单完成后才能结算，注意：已结算的佣金可提现，一旦结算无法收回
                                </div>
                            </el-form-item>

                            <!-- 计算方式 -->
                            <el-form-item label="计算方式" prop="computing_method">
                                <el-radio-group v-model="formData.computing_method" size="small">
                                    <el-radio :label="1" border>支付价格</el-radio>
                                    <el-radio :label="2" border>商品售价</el-radio>
                                    <el-radio :label="3" border>商品利润</el-radio>
                                </el-radio-group>
                                <div class="tips-text" style="line-height: 24px;">
                                    佣金分计算方式，如佣金选择的是百分比计算，计算基数可选择支付价格的百分比还商品销售价格的百分比
                                    还是利润的百分比<br/>
                                    （注意：利润=商品支付价格-成本，如选择的是利润的百分比，每个商品都需要设置其成本）
                                </div>
                            </el-form-item>

                            <!-- 奖励层级 -->
                            <el-form-item label="奖励层级" prop="commission_levels">
                                <el-checkbox-group v-model="formData.commission_levels">
                                    <el-checkbox 
                                        v-for="item in commissionLevels" 
                                        :label="item.name" 
                                    >{{ item.title }}</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </el-col>

                        <!-- 申请设置 -->
                        <div class="title padding-top">
                            <span class="title-line"></span>
                            <span>申请设置</span>
                        </div>
                        <el-col :span="24">
                            <!-- 申请项 -->
                            <el-form-item label="申请项" prop="applying_for">
                                <el-checkbox-group v-model="formData.applying_for">
                                    <el-checkbox 
                                        v-for="item in applyingList" 
                                        :label="item.name" 
                                        :disabled="item.disable"
                                    >{{ item.title }}</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </el-col>

                        <div></div>
                        <el-col :span="24">
                            <el-form-item size="large">
                                <el-button type="primary" size="small" @click="submitForm">提交</el-button>
                                <el-button size="small" @click="resetForm">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                submitLoading: false,
                commissionLevels: [
                    {
                        name: 1,
                        title: '直推佣金',
                    },
                    {
                        name: 2,
                        title: '间推佣金',
                    }
                ],
                applyingList: [
                    {
                        name: 'name',
                        title: '真实姓名',
                        disable: true,
                    },
                    {
                        name: 'mobile',
                        title: '手机号',
                        disable: true,
                    },
                    {
                        name: 'center_name',
                        title: '运营中心名称',
                        disable: true,
                    },
                    {
                        name: 'idcard_front',
                        title: '身份证正面',
                        disable: false,
                    },
                    {
                        name: 'idcard_reverse',
                        title: '身份证正面',
                        disable: false,
                    },
                    {
                        name: 'operation_license',
                        title: '营业执照',
                        disable: false,
                    },
                    {
                        name: 'operation_address',
                        title: '营业地址',
                        disable: true,
                    }
                ],
                formData: {
                    switch              : 0,
                    show_center         : 0,
                    order_limit         : 0,
                    applying_for        : [
                        'name', 'mobile', 'center_name', 'operation_address'
                    ],
                    compute_type        : 1,
                    computing_method    : 1,
                    commission_levels   : []
                },
                rules: {
                    switch: [{
                        required: true,
                    }],
                    show_center: [{
                        required: true,
                    }],
                    order_limit: [{
                        required: true,
                    }],
                    commission_levels: [{
                        required: true,
                    }],
                    compute_type: [{
                        required: true,
                    }],
                    computing_method: [{
                        required: true,
                    }],
                    applying_for: [{
                        required: true,
                    }],
                },
            }
        },
        computed: {},
        watch: {},
        created() {
            this.readConfig()
        },
        mounted() {},
        methods: {
            submitForm() {
                this.$refs['elForm'].validate(valid => {
                    if (valid) {
                        this.submitLoading = true;
                        request({
                            params: {
                                r: 'operation-center/setting/save',
                            },
                            method: 'post',
                            data: this.formData,
                        }).then(e => {
                            this.submitLoading = false
                            if (e.data.code === 0) {
                                this.$message.success(e.data.msg)
                            } else {
                                this.$message.error(e.data.msg)
                            }
                        })
                    } else {
                        this.$message.error('部分参数验证不通过')
                    }
                })
            },
            resetForm() {
                this.$refs['elForm'].resetFields()
            },
            readConfig(){
                request({
                    params: {
                        r: 'operation-center/setting/index',
                    },
                    method: 'get',
                }).then(e => {
                    this.submitLoading = false
                    if (e.data.code === 0 && e.data.data && JSON.stringify(e.data.data.setting) != '[]') {
                        this.formData = e.data.data.setting
                    }
                })
            },
        }
    })
</script>

<style>
    .form-body {
        padding-bottom: 5px;
        display: flex;
        flex-direction: column;
    }

    .title {
        display: flex;
        align-items: center;
        padding: 18px 20px;
        border-bottom: 1px solid #F3F3F3;
        background-color: #fff;
    }

    .title-line {
        width: 4px;
        height: 20px;
        background-color: #1479F0;
        margin-right: 10px;
    }

    .padding-top {
        margin-bottom: 10px;
    }
</style>