qimall/addons/BusinessBonus/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">
                <div style="display: flex;align-items: center;padding-bottom: 10px;border-bottom: 1px solid #E4E7ED;width: 600px;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="招商分红" label-width="180px">-->
<!--                        <el-switch-->
<!--                                v-model="form.is_open"-->
<!--                                :active-value="1"-->
<!--                                :inactive-value="0"-->
<!--                                inactive-text="关闭"-->
<!--                                active-text="开启">-->
<!--                        </el-switch>-->
<!--                    </el-form-item>-->

                    <el-form-item label="招商分红首页">
                        <template>
                            <el-input disabled v-model="index_url" type="text" style="width: 50%" placeholder="招商分红首页"></el-input>
                        </template>
                        <el-button class="button-item" v-on:click="copyText(index_url)">复制链接</el-button>
                    </el-form-item>

                    <div style="display: flex;align-items: center;padding-bottom: 10px;border-bottom: 1px solid #E4E7ED;width: 600px;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="推广中心显示" 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-item label="结算方式" label-width="180px">
                        <el-radio v-model="form.settle_type"  :label="1">订单支付后</el-radio>
                        <el-radio v-model="form.settle_type"  :label="2">订单完成后</el-radio>
                        <br/>
                        <div class="tips-text" style="line-height: 24px;">
                            招商分红结算方式，是门店订单支付后还是必须订单完成后才能结算，分红结算后，招商员才能进行提现
                        </div>
                    </el-form-item>
                    <el-form-item label="结算依据" label-width="180px">
                        <el-radio v-model="form.settle_base_on"  :label="1">订单金额（不包括运费和抵扣金额）</el-radio>
                        <el-radio v-model="form.settle_base_on"  :label="2">利润金额（订单最终价格-成本）负数取0</el-radio>
                        <el-radio v-model="form.settle_base_on"  :label="3">商品售价</el-radio>
                        <el-radio v-model="form.settle_base_on"  :label="4">商家服务费</el-radio>
                        <br/>
                        <div class="tips-text" style="line-height: 24px;">
                            招商分红比例计算基数，按订单支付的金额进行分红还是订单利润进行分红
                        </div>
                    </el-form-item>
                    <el-form-item label="结算模式" label-width="180px">
                        <el-radio v-model="form.settle_method"  :label="1">自动结算</el-radio>
                    </el-form-item>

                    <el-form-item label="结算周期" label-width="180px">
                        <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>

                    <div style="display: flex;align-items: center;padding-bottom: 10px;border-bottom: 1px solid #E4E7ED;width: 600px;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="结算方式" label-width="180px">
                        <el-radio v-model="form.upgrade_settle_type"  :label="1">订单支付后</el-radio>
                        <el-radio v-model="form.upgrade_settle_type"  :label="2">订单完成后</el-radio>
                        <br/>
                        <div class="tips-text" style="line-height: 24px;">
                            购物升级为某等级招商员，是订单支付后还是订单完成后进行升级
                        </div>
                    </el-form-item>

                    <el-form-item label="等级说明" label-width="180px">
                        <com-rich-text style="width: 750px" :simple-attachment="true" v-model="form.level_desc"></com-rich-text>
                    </el-form-item>

                </el-form>
            </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 {
                index_url: `<?= $H5Url ?>` + '/#/plugins/BusinessBonus/index',
                // 0.1 设置页数据
                activeName: 'first',
                loading: false,
                load: false,
                btnLoading: false,
                payed_title : '',
                form: {
                    // 基础设置
                    is_open : 1,	//是否开启
                    // 结算设置
                    settle_type: 1, // 结算方式
                    settle_base_on: 1, // 结算依据
                    settle_method: 1, // 结算模式
                    settle_circle: 1, // 结算周期
                    // 升级设置
                    upgrade_settle_type: 1, // 结算方式
                    level_desc: '',
                    is_show_at_center: 1,   //  推广中心显示

                },
                settle_circle_opiton: [
                    {index: 1, name: '一天'},
                    {index: 2, name: '一周'},
                    {index: 3, name: '一个月'},
                ],

                rules: {
                    settle_circle: [
                        {required: true, message: '请选择结算周期', trigger: 'change'},
                    ],
                },
            };
        },
        created() {
            this.getDetail();
        },
        methods: {

            // 0.1.1 获取设置详情
            getDetail(){
                let that = this;
                this.loading = true;
                request({
                    params: {
                        r: 'business-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
                        }
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.btnLoading = false;
                });
            },


            // 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: 'business-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;
                    }
                })
            },
            //复制素材中心链接
            copyText(url){

                var copyInput = document.createElement('input')
                copyInput.setAttribute('value', url)
                document.body.appendChild(copyInput)
                copyInput.select()

                try {
                    var copyed = document.execCommand('copy')
                    if (copyed) {
                        document.body.removeChild(copyInput)
                        this.$message.success('复制成功')
                    }
                } catch {
                    this.$message.success('复制失败，请检查浏览器兼容')
                }

            },
            handleClick(tab, event) {
                this.activeName = tab.name;
            },
            handle(type, param1 = null, param2 = null) {
                switch(type) {
                    //上传图片
                    case 'picUrl':
                        if (param1) {
                            let self = this;
                            param1.forEach(function(item, index){
                                if (!self.form.images && self.form.images.length >= 9) {
                                    return;
                                }
                                self.form.images.push(item.url)
                            })
                        }
                        break;
                    //删除图片
                    case 'delPic':
                        this.form.images.splice(param1, 1)
                        break;
                }
            },
            updatePicUrl(e, params) {
                console.log(e);
            },

        },
        filters: {

        },
    });
</script>