qimall/addons/WriteOff/backend/views/default/setting.php

<?php

/**
 * @link:http://www.gdqijianshi.com/
 * @copyright: Copyright (c) 2020 广东七件事集团
 * Created by PhpStorm
 * Author: lun
 * Date: 2021-10-23
 * Time: 16:11
 */
?>
<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: 10px 0 0;">
        <div slot="header">
            <div>
                <span>设置</span>
            </div>
        </div>
        <div class="form_box">
            <el-form :model="ruleForm" size="small" ref="ruleForm" label-width="150px">
                <el-card shadow="never">
                    <div slot="header">
                        <div>
                            <span>基础设置</span>
                        </div>
                    </div>
                    <div>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="启用" style="margin-bottom: 0">
                                    <div>
                                        <el-switch v-model="ruleForm.is_enable" :active-value="1" :inactive-value="0"></el-switch>
                                    </div>
                                </el-form-item>
                                <el-form-item label="促销奖设置" style="margin-bottom: 0">
                                    <div>
                                        <el-switch v-model="ruleForm.is_enable_promote_reward" :active-value="1" :inactive-value="0">
                                        </el-switch>
                                    </div>
                                </el-form-item>


                                <el-form-item prop="compute_period" label="业绩结算">
                                    <el-col :span="8" style="width: 100%;">
                                        <el-radio-group v-model="ruleForm.compute_period" size="small">
                                            <el-radio :label="0" border>按月结算</el-radio>
                                        </el-radio-group>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="门店管理奖">
                                    <el-switch v-model="ruleForm.is_enable_store_manage_reward" :active-value="1" :inactive-value="0"></el-switch>
                                </el-form-item>

                                <el-form-item label="管理奖比例" v-if="ruleForm.is_enable_store_manage_reward == 1">
                                    <el-input v-model="ruleForm.manage_reward_rate" style="width: 200px;" @key>
                                        <template slot="append">%</template>
                                    </el-input>
                                </el-form-item>

                                <el-form-item label="核销码背景" prop="background_url">
				            		<com-attachment v-if="!ruleForm.background_url" :multiple="false" :max="1" type="images" @selected="coverPic">
				                		<div class="card-upload">
				                    		<i class="el-icon-plus"></i>
				                		</div>
				            		</com-attachment>
				            		<div class="card-coverimg" v-else>
				                		<el-image style="width: 80px; height: 80px" :src="ruleForm.background_url"></el-image>
				                		<el-button @click="delPic('background_url')" class="icon-close" type="primary" size="mini" icon="el-icon-close" circle></el-button>
				            			</div>
				            		<p class="tips-text">建议尺寸：700px*350px    格式：JPG</p>
				        		</el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-form>
            <el-button :loading="btnLoading" class="button-item" type="primary" style="margin-top: 24px;" @click="store('ruleForm')" size="small">保存
            </el-button>
        </div>

    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                btnLoading: false,
                ruleForm: {
                    is_enable: 0,
                    is_enable_promote_reward: 0,
                    compute_period:0,
                    is_enable_store_manage_reward:0,
                    manage_reward_rate:0,
                    background_url:'',
                },
            }
        },
        mounted: function() {
            this.loadData();
        },
        methods: {
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'write-off/default/setting',
                    },
                    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: 'write-off/default/setting',
                            },
                            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;
                    }
                });
            },
            coverPic(e) { // 选择图片
                this.ruleForm.background_url = e[0].url
            },
            delPic(type, index) { // 删除图片
                switch (type) {
                    case 'background_url':
                        this.ruleForm.background_url = ''
                        break;
                    default:
                        break;
                }
            },
        }
    });
</script>