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

<?php
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: 1200px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div class="form_box">
            <el-form :model="ruleForm" :rules="rules" 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="点签后台" >
                                    <el-button type="primary" @click="goOutside()">前往后台</el-button>
                                    <div class="tips-text">使用此功能请先前往点签后台进行注册</div>
                                </el-form-item>

                                <el-form-item label="签约命名" >
                                    <el-input v-model="ruleForm.sign_name"></el-input>
                                </el-form-item>

                                <el-form-item label="未签约禁止行为" >
                                    <el-checkbox-group v-model="ruleForm.checkList">
                                        <el-checkbox label="promotion">禁止进入推广中心</el-checkbox>
                                        <el-checkbox label="withdraw">禁止提现</el-checkbox>
                                    </el-checkbox-group>
                                    <div class="tips-text">注意：勾选对应选项后为签约的会员不能使用对应功能</div>
                                </el-form-item>

                                <el-form-item label="协议设置" >
                                    <el-select v-model="ruleForm.agreement_id" placeholder="请选择">
                                        <el-option v-for="item in agreement" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                    <div class="tips-text">请到“设置”-“协议设置”，页面进行添加协议</div>
                                </el-form-item>

                                <el-form-item label="签约背景图">
                                    <div style="float: left;">
                                        <com-attachment v-model="ruleForm.bg_img" :multiple="false" :max="1">
                                            <el-tooltip class="item" effect="dark" content="建议尺寸:420 * 336" placement="top">
                                                <el-button size="mini">选择图片</el-button>
                                            </el-tooltip>
                                        </com-attachment>
                                        <el-image v-if="ruleForm.bg_img" mode="aspectFill" style="width: 150px; min-height: 100px;" fits="contain" :src="ruleForm.bg_img ? ruleForm.bg_img : ''"></el-image>
                                        <div class="customize-share-title">
                                            <el-button v-if="ruleForm.bg_img" class="del-btn" size="mini"
                                                       type="danger" icon="el-icon-close" circle
                                                       @click="ruleForm.bg_img = ''"></el-button>
                                        </div>
                                    </div>
                                </el-form-item>

                                <el-form-item label="帮助设置" >
                                    <com-rich-text :simple-attachment="true" v-model="ruleForm.help"></com-rich-text>
                                </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: {
                    sign_name: '电子签约',
                    checkList: [],
                    bg_img: '',
                    agreement_id : 0,
                    help : '',
                },
                backend: 'https://ding.fs-signature.com/h5/#/?k=COM2118',
                rules: {},
                agreement: []
            }
        },
        mounted: function() {
            this.loadData();
        },
        methods: {
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'dianqian/setting/index',
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        if (!isEmpty(e.data.data.configs)) {
                            this.ruleForm = e.data.data.configs
                        }
                        this.agreement = e.data.data.agreement
                    }
                }).catch(e => {
                    this.loading = false;
                    this.$message.error(e);
                })
            },
            store(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        request({
                            params: {
                                r: 'dianqian/setting/index',
                            },
                            method: 'post',
                            data: {
                                basic: 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;
                    }
                });
            },
            goOutside(){
                window.open(this.backend, '_blank');
            },
        }
    });
</script>
<style>
    .form_box {
        background-color: #f3f3f3;
        padding: 0 0 20px;
    }
    .customize-share-title .del-btn {
        position: absolute;
        top: 17px;
        left: 135px;
    }
</style>