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

<?php

use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('com-rich-text');
?>
<style>
    @media screen and (min-width:1370px){
        .form-body {
            padding: 20px 0;
            padding-right: 50%;
            min-width: 1400px;
        }
    }

    @media screen and (max-width:1369px){
        .form-body {
            padding: 20px 0;
            padding-right: 20%;
        }
    }

    .form-body {
        background-color: #fff;
        margin-bottom: 20px;
    }


    .form-button {
        margin: 0!important;
    }

    .form-button .el-form-item__content {
        margin-left: 0!important;
    }

    .button-item {
        padding: 9px 25px;
    }
    .agent-item-input{
        display: flex;
        align-items: center;
        margin-top: 16px;
    }
    .agent-item-input .item-lab-title{
        width: 80px;
        margin-right: 20px;
    }
    .tips-title{
        font-size: 12px;
        color: #999999;
    }

    .el-tabs__header{
        background-color: #fff;
    }
    .el-tabs__item{
        width: 100px;
        text-align: center;
    }

    .el-table th>.cell{
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }
    .el-table__footer-wrapper, .el-table__header-wrapper{
        border-bottom: 1.4px solid #D6D6D6;
    }
    .add-image-btn {
        width: 100px;
        height: 100px;
        color: #419EFB;
        border: 1px solid #e2e2e2;
        cursor: pointer;
    }
    .pic-url-remark{
        font-size: 12px;
        color: #999999;
    }
    .el-image {
        position: relative;
        display: inline-block;
        overflow: hidden;
    }
    .el-button.is-circle {
        border-radius: 50%;
        padding: 12px;
    }
    .el-button--mini.is-circle {
        padding: 7px;
    }
    .del-btn {
        position: absolute;
        right: 0px;
        top: 0px;
        padding: 4px 4px;
    }
</style>
<div id="app" v-cloak>
    <el-card style="border:0;min-width: 1000px;" shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;" v-loading="loading">
        <el-tabs v-model="activeName" @tab-click="handleClick">

            <!-- <el-tab-pane label="基础设置" name="basic"></el-tab-pane> -->

            <div class="form-body" style="width:100%; padding-right:10%; padding-left:20px;">
                <div style="display: flex;align-items: center;padding-bottom: 10px;border-bottom: 1px solid #E4E7ED;margin:10px 0 20px 15px;">
                    <div style="width: 5px;height: 20px;background-color: #409eff;margin-right: 5px;"></div>
                    <div>基础设置</div>
                </div>
                <el-form ref="form" :model="form" :rules="rules" label-width="180px" size="small">

                   <el-form-item label="启用积分分红" style="margin-bottom: 0">
                        <div>
                            <el-switch v-model="form.is_enable" :active-value="1" :inactive-value="0">
                            </el-switch>
                        </div>
                        <div class="tips-text" style="line-height: 24px;">
                            需开启后才能使用“积分分红”插件的所有功能
                        </div>
                    </el-form-item>
                    <div v-show="form.is_enable == 1">
                    <div style="display: flex;align-items: center;padding-bottom: 10px;border-bottom: 1px solid #E4E7ED;margin:10px 0 20px 15px;">
                        <div style="width: 5px;height: 20px;background-color: #409eff;margin-right: 5px;"></div>
                        <div>分红设置</div>
                    </div>

                    <el-form-item label-width="180px" prop='bonus_pre'>
                        <label slot="label">投放比例
                            <el-tooltip class="item" effect="dark"
                                        content="平台营业额投放比例"
                                        placement="top">
                                <i class="el-icon-info"></i>
                            </el-tooltip>
                        </label>
                        <span  style="color: #333;">
                            平台营业额
                            <el-input v-model.number="form.bonus_pre" size="small" style="width:150px; margin-left:5px; margin-right:5px;" @input="handlePreInput">
                                <template slot="append">%</template>
                            </el-input>
                            投放到分红
                        </span>
                        <br/>
                        <div class="tips-text" style="line-height: 24px;">
                            分红池金额：营业额*N%=分红池金额
                        </div>
                    </el-form-item>

                    <el-form-item label-width="180px">
                        <label slot="label">投放节点
                            <el-tooltip class="item" effect="dark"
                                        content="每天取订单支付后/订单完成后的数值"
                                        placement="top">
                                <i class="el-icon-info"></i>
                            </el-tooltip>
                        </label>
                        <el-radio v-model="form.settle_type"  :label="1" border>支付完成</el-radio>
                        <el-radio v-model="form.settle_type"  :label="2" border>订单完成</el-radio>
                        <br/>
                        <!-- <div class="tips-text" style="line-height: 24px;">
                            积分分红结算方式，是门店订单支付后还是必须订单完成后才能结算
                        </div> -->
                    </el-form-item>
                    <div style="display: flex;align-items: center;padding-bottom: 10px;border-bottom: 1px solid #E4E7ED;margin:10px 0 20px 15px;">
                        <div style="width: 5px;height: 20px;background-color: #409eff;margin-right: 5px;"></div>
                        <div>结算设置</div>
                    </div>
                    <el-form-item label-width="180px">
                        <label slot="label">结算周期
                            <el-tooltip class="item" effect="dark"
                                        content="分红的结算周期"
                                        placement="top">
                                <i class="el-icon-info"></i>
                            </el-tooltip>
                        </label>
                        <el-select v-model="form.settle_circle" placeholder="请选择周期">
                            <el-option v-for="(item, index) in settle_circle_opiton" :label="item.name" :value="item.index" :key="index"></el-option>
                        </el-select>
                        <br/>
                        <!-- <div class="tips-text" style="line-height: 24px;">
                        结算周期
                        </div> -->
                    </el-form-item>
                    <el-form-item label="选择结算方式：" prop="equal_type">
                        <el-radio-group v-model="form.settle_method">
                            <el-radio :label="0">积分占比分配</el-radio>
                            <el-radio :label="1">权重占比分配</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label-width="180px" prop="user_score" v-if="form.settle_method == 0">
                        <label slot="label">结算条件
                            <el-tooltip class="item" effect="dark"
                                        content="满足该条件即可进行分红"
                                        placement="top">
                                <i class="el-icon-info"></i>
                            </el-tooltip>
                        </label>
                        <span  style="color: #333;">
                            用户积分达到
                            <el-input v-model="form.user_score" size="small" style="width:150px;margin-left:5px; margin-right:5px;" @input="handleInput">
                            </el-input>
                            积分，即可参与分红结算
                        </span>
                        <br/>
                        <div class="tips-text" style="line-height: 24px;">
                        个人持有积分数量/平台会员总积分数量*分红池金额=该周期所得分红金额
                        </div>
                    </el-form-item>
                    <el-form-item label-width="180px" prop="user_score" v-if="form.settle_method == 1">
                        <label slot="label">结算条件
                            <el-tooltip class="item" effect="dark"
                                        content="满足该条件即可进行分红"
                                        placement="top">
                                <i class="el-icon-info"></i>
                            </el-tooltip>
                        </label>
                        <span  style="color: #333;">
                        每直推
                        <el-input-number
                                v-model="form.recommend_user_num"
                                :min="1"
                                :step="1"
                                :precision="0"
                        ></el-input-number>
                       个大于或等于
                        <el-select v-model="form.recommend_user_level" placeholder="请选择会员等级">
                            <el-option v-for="(item, index) in user_level_list" :label="item.name" :value="item.id" :key="id"></el-option>
                        </el-select>
                            会员等级，获得
                        <el-input-number
                                v-model="form.recommend_user_weight"
                                :min="0"
                                :step="1"
                                :precision="0"
                        ></el-input-number>
                            权重
                    </span>
                        <br/>
                        <div class="tips-text" style="line-height: 24px;">
                            分红池金额÷总权重数量*个人持有权重数量=该周期所得分红。会员持有积分并有权重数量才计入权重计算。
                        </div>
                    </el-form-item>

                    <el-form-item label-width="180px" label="所得分红">
                        <el-radio v-model="form.is_all_reward"  :label="1" border>全部分红</el-radio>
                        <el-radio v-model="form.is_all_reward"  :label="2" border>等额积分</el-radio>
                        <br/>
                        <div class="tips-text" style="line-height: 24px;">
                            <span v-if="form.is_all_reward == 1">结算时计算所得的分红金额，比如：个人积分：100个，但是计算可得分红为：150元，则所得分红为：150元</span>
                            <span v-if="form.is_all_reward == 2">结算时计算所得的分红金额，比如：个人积分：100个，但是计算可得分红为：150元，则所得分红为：100元</span>
                        </div>
                    </el-form-item>

                    <el-form-item label="推广中心显示" style="margin-bottom: 0">
                        <div>
                            <el-switch v-model="form.is_show_at_center" :active-value="1" :inactive-value="0">
                            </el-switch>
                        </div>
                    </el-form-item>
                </el-form>
                </div>
            </div>
            
            <el-button class="button-item" :loading="btnLoading" type="primary" size="small" @click="store('form')">保存</el-button>





    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            var validatePass = (rule, value, callback) => {
                if (Number.isInteger(Number(value)) && Number(value) > 0) {
                    callback();
                } else {
                    callback(new Error('请输入大于0的整数'));
                }
            };
            return {
                // 0.1 设置页数据
                activeName: 'first',
                loading: false,
                load: false,
                btnLoading: false,
                form: {
                    // 基础设置
                    is_enable : 1,	//是否开启
                    // 结算设置
                    bonus_pre: 0, //营业额投入资金池的比例
                    settle_type: 1, // 结算方式
                    settle_circle: 3, // 分红周期
                    user_score: 0,
                    is_show_at_center: 1,
                    is_all_reward: 1,
                    settle_method: 0, //0积分占比 1权重占比
                    recommend_user_num: null, //推荐直属下级个数
                    recommend_user_weight: null, //推荐直属下级权重
                    recommend_user_level: null,
                },
                user_level_list:[],
                settle_circle_opiton: [
                    {index: 3, name: '按天'},
                    {index: 1, name: '按周'},
                    {index: 2, name: '按月'},
                ],

                rules: {
                    bonus_pre: [
                        {required: true, message: '请填写投放比例', trigger: 'change'},
                    ],
                    user_score: [
                        {required: true, message: '请填写结算条件', trigger: 'change'},
                    ],
                },
            };
        },
        created() {
            this.getDetail();
        },
        methods: {

            // 0.1.1 获取设置详情
            getDetail(){
                let that = this;
                this.loading = true;
                request({
                    params: {
                        r: 'score-bonus/setting/detail',
                    },
                    method: 'post'
                }).then(e => {
                    this.loading = false;

                    if (e.data.code == 0) {
                        if(e.data.data.is_null == 0){
                            that.form = e.data.data.config
                        }
                        that.user_level_list = e.data.data.user_level_list
                        console.log('user_level_list', that.user_level_list)
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.btnLoading = false;
                });
            },

            handleInput() {
                // if (this.form.refund_price === '') {
                //     this.form.refund_price = 0;
                // }
                this.limitInput(this.form.user_score, 'user_score');
            },
            limitInput(value, name) {
                this.form[name] = ('' + value)
                .replace(/[^\d^\.]+/g, '')
                .replace(/^0+(\d)/, '$1')
                .replace(/^\./, '0.')
                .match(/^\d*(\.?\d{0,2})/g)[0] || ''
            },

            handlePreInput() {
                this.limitInput(this.form.bonus_pre, 'bonus_pre');
            },
            // 2.0 提交表单-编辑基础设置
            store(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        this.btnLoading = true;
                        let postForm = JSON.parse(JSON.stringify(this.form));
                        request({
                            params: {
                                r: 'score-bonus/setting/index',
                            },
                            method: 'post',
                            data: postForm,
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code == 0) {
                                this.$message.success(e.data.msg);
                            } else {
                                this.$message.error(e.data.msg)
                            }
                        }).catch(e => {

                            this.btnLoading = false;
                        });
                    } else {
                        this.btnLoading = false;
                        return false;
                    }
                })
            },

            handleClick(tab, event) {
                this.activeName = tab.name;
            },
        },
        filters: {

        },
    });
</script>