qimall/addons/Store/client/views/merchant/profit-setting.php

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div class="flex flex-x-between flex-y-center">
                <span>让利设置</span>
            </div>
        </div>
    </el-card>

    <div class="content">
        <el-form
            :model="formData"
            ref="elForm"
            label-width="180px"
            style="position: relative"
            size="small"
            :rules="rules"
        >
            <el-row>
                <el-col :span="24">
                    <div class="form-body">
                        <el-col :span="24">
                            <!-- 商户编号 -->
                            <el-form-item label="当前让利比例" prop="rate">
                                <el-input v-model="formData.rate" disabled>
                                    <template #append>%</template>
                                </el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="24">
                            <el-form-item label="设置让利比例" prop="new_rate">
                                <el-input :min="formData.min" :max="formData.max" :disabled="formData.is_enable == 0"
                                          v-model="formData.new_rate" onkeyup="value=value.replace(/[^\d]/g,'')">
                                    <template #append>%</template>
                                </el-input>
                                <span class="tip" v-if="formData.is_enable == 1">
                                    请将让利比例控制在 {{formData.min}}% - {{formData.max}}% 之间
                                </span>
                                <span class="tip" v-else>
                                    当前操作被禁用
                                </span>
                            </el-form-item>
                        </el-col>

                        <div></div>
                        <el-col :span="24">
                            <el-form-item size="large">
                                <el-button type="primary" size="small" @click="submitForm" :disabled="formData.is_enable == 0">提交</el-button>
                                <el-button size="small" @click="resetForm">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>
</div>

<script>
const app = new Vue({
    el: '#app',
    data() {
        return {
            rules: {
                new_rate: [
                    {
                        required: true,
                        message: '让利比例不能为空'
                    }
                ],
            },
            formData: {
                new_rate: '',
                id: 0,
                is_enable: 0,
                min: 0,
                max: 0,
            },
        }
    },
    methods: {
        readConfig() {
            request({
                params: {
                    r: 'store/client/merchant/profit-setting',
                },
                method: 'get',
            }).then(e => {
                this.submitLoading = false
                if (e.data.code === 0 && e.data.data) {
                    this.formData   = e.data.data
                }
            }).catch(e => {
            })
        },
        resetForm() {
            this.$refs['elForm'].resetFields()
        },
        submitForm() {
            if (this.formData.new_rate < this.formData.min || this.formData.new_rate > this.formData.max) {
                this.$message.error(`设置比例必须在 ${this.formData.min} - ${this.formData.max} 之间`)
                return false;
            }
            this.$refs['elForm'].validate(valid => {
                if (valid) {
                    this.submitLoading = true;
                    request({
                        params: {
                            r: 'store/client/merchant/profit-setting',
                        },
                        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)
                        }
                    }).catch(e => {
                    })
                } else {
                    this.$message.error('部分参数验证不通过')
                }
            })
        },
    },
    created() {
        this.readConfig()
    },
})
</script>

<style>
    .form-body {
        padding-bottom: 5px;
        display: flex;
        flex-direction: column;
    }
    
    .title {
        display: flex;
        align-items: center;
        padding: 18px 20px;
        /* border-top: 1px solid #F3F3F3; */
        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;
    }

    .tip {
        color: #c72a29;
    }

    .link {
        display: flex;
    }

    .link span {
        cursor: pointer;
        color: #5eaae9;
        text-align: center;
        width: 100px;
    }
</style>