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

<?php
/**
 * @link:http://www.goodmall.com/
 * @copyright: Copyright (c) 2020
 * Created by PhpStorm
 * Author: lun
 * Date: 2021-12-31
 * Time: 23:25
 */
use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('com-rich-text');
?>
<div id="app" v-cloak>
    <el-card class="box-card" v-loading="loading" shadow="never" style="border:0;min-width: 1500px;"
             body-style="background-color: #f3f3f3;padding: 0;">
        <div class="form_box">
            <el-form :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="200px">
                <el-card shadow="never">
                    <div slot="header">
                        <div>
                            <span>基础设置</span>
                        </div>
                    </div>
                    <div>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item prop="addons_name" label="插件名称">
                                    <el-col :span="12">
                                        <el-input type="text" v-model="ruleForm.addons_name"></el-input>
                                        <br/>
                                        <div class="tips-text" style="line-height: 24px;">
                                            推三返一前端页面最顶部展示的标题
                                        </div>
                                    </el-col>

                                </el-form-item>
                                <el-form-item prop="is_apply" label="用户条件">
                                    <el-col :span="8" style="width: 100%;">
                                        <el-radio-group v-model="ruleForm.is_apply" size="small">
                                            <el-radio :label="0" border>无条件</el-radio>
                                            <el-radio :label="1" border>升级</el-radio>
                                        </el-radio-group>
                                    </el-col>
                                    <br/>
                                    <div class="tips-text" style="line-height: 24px;">
                                        成为推三返一用户的条件：无条件：注册后就会成为默认等级的用户；升级：条件升级/购物升级成为用户
                                    </div>
                                </el-form-item>

                                <el-form-item prop="settlement_method" label="结算方式">
                                    <el-col :span="8" style="width: 100%;">
                                        <el-radio-group v-model="ruleForm.settlement_method" size="small">
                                            <el-radio :label="1" border>支付完成</el-radio>
                                            <el-radio :label="2" border>订单完成</el-radio>
                                        </el-radio-group>
                                    </el-col>
                                    <br/>
                                    <div class="tips-text" style="line-height: 24px;">
                                        推荐别人购买商品后，是支付完成就把奖励结算给上级，还是需要订单完成后把奖励结算给上级。（注意：如
                                        果选择支付完成结算，那么该笔订单用户申请退款，奖励是不会自动从上级推荐人账户里扣除的，谨慎选择）
                                    </div>
                                </el-form-item>
                                <el-form-item prop="computing_method" label="计算方式">
                                    <el-col :span="19" style="width: 100%;">
                                        <el-radio-group v-model="ruleForm.computing_method" size="small">
                                            <el-radio :label="0" border>支付价格</el-radio>
                                            <el-radio :label="1" border>商品售价</el-radio>
                                            <el-radio :label="2" border>商品利润</el-radio>
                                        </el-radio-group>
                                    </el-col>
                                    <div class="tips-text" style="line-height: 24px;">
                                        奖励计算方式，如奖励选择的是百分比计算，计算基数可选择支付价格的百分比还商品销售价格的百分比
                                        还是利润的百分比<br/>
                                        （注意：利润=商品支付价格-成本，如选择的是利润的百分比，每个商品都需要设置其成本）
                                    </div>
                                </el-form-item>
                                <el-form-item label="活动规则" prop="explain">
                                    <com-rich-text style="width: 750px" v-model="ruleForm.explain"></com-rich-text>
                                    <br/>
                                    <div class="tips-text" style="line-height: 24px;">
                                        设置活动规则，该规则会展示在前端推三返一活动页面，用户可点击查看
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div>
                        <el-button :loading="btnLoading" class="button-item" type="primary"
                                   style="margin-top: 24px;"
                                   @click="store('ruleForm')" size="small">保存
                        </el-button>
                    </div>
                </el-card>
            </el-form>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                btnLoading: false,
                ruleForm: {
                    addons_name: '推三返一',
                    settlement_method: 1,//结算方式
                    computing_method: 0,// 计算方式
                    explain: '',//规则说明
                    is_apply: 0//规则说明
                },
                rules: {
                    addons_name: [
                        { required: true, message: '请输入插件名称', trigger: 'blur' },
                        { min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur' }
                    ],
                }
            }
        },
        mounted: function () {
            this.loadData();
        },
        methods: {
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'rebate/setting/index',
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0 && !isEmpty(e.data.data)) {
                        this.ruleForm = Object.assign(this.ruleForm, e.data.data);
                    }
                }).catch(e => {
                    this.loading = false;
                })
            },
            store(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        request({
                            params: {
                                r: 'rebate/setting/index',
                            },
                            method: 'post',
                            data: this.ruleForm
                        }).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.$message.error(e);
                            this.btnLoading = false;
                        })
                    } else {
                        this.btnLoading = false;
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    });
</script>
<style>
    .form_box {
        background-color: #f3f3f3;
        padding: 0 0 20px;
    }

    .button-item {
        margin-top: 12px;
        padding: 9px 25px;
    }

    .el-input-group__append {
        background-color: #fff;
        color: #353535;
    }
</style>