jiaoyi-vue/src/views/manage/setting/basic/index.vue

<template>
    <el-container>
        <el-main>
            <el-card shadow="never" header="系统设置" class="borderNone mt10">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
                    <el-tab-pane label="基础设置" name="service" v-loading="isLoading">
                        <el-form :model="sys" :rules="rules" ref="form" label-position="top" @keyup.enter="saveForm">
                            <el-form-item label="系统名称" prop="title" class="label-item">
                                <el-input v-model="sys.title" placeholder="请输入" clearable />
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                            <el-form-item label="客服联系电话" prop="tel" class="label-item">
                                <el-input v-model="sys.tel" placeholder="请输入" clearable />
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                            <el-form-item label="系统Logo" prop="logo">
                                <sc-upload v-model="sys.logo"></sc-upload>
                            </el-form-item>
                            <el-form-item label="营业纸张" prop="license">
                                <sc-upload v-model="sys.license"></sc-upload>
                            </el-form-item>
                            <el-form-item label="备案号" prop="miitbeian" class="label-item">
                                <el-input v-model="sys.miitbeian" placeholder="请输入" clearable />
                                <div class="el-form-item-msg">支持Html格式</div>
                            </el-form-item>
                            <el-form-item label="版权信息" prop="copyright" class="label-item">
                                <el-input v-model="sys.copyright" placeholder="请输入" clearable />
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                            <el-form-item label="隐私协议" prop="privacy" class="label-item">
                                <sc-editor v-model="sys.privacy" placeholder="请输入" :height="400"></sc-editor>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                            <el-form-item label="服务协议" prop="agreements" class="label-item">
                                <sc-editor v-model="sys.agreements" placeholder="请输入" :height="400"></sc-editor>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="抖音设置" name="wechat" v-loading="isLoading">
                        <el-form :model="sys" :rules="rules2" ref="form" label-position="top" @keyup.enter="saveForm" v-if="activeName=='wechat'">
                            <el-row :gutter="15">
                                <el-col :span="this.$store.state.global.ismobile?24:12">
                                    <fieldset>
                                        <legend><el-tag>小程序配置</el-tag></legend>
                                        <el-form-item label="AppId(小程序 APPID)" prop="mini_appid">
                                            <el-input v-model="sys.mini_appid" clearable placeholder="请输入"></el-input>
                                            <div class="el-form-item-msg">小程序后台获取</div>
                                        </el-form-item>
                                        <el-form-item label="AppSecret(小程序密钥)" prop="mini_secret">
                                            <el-input v-model="sys.mini_secret" show-password clearable placeholder="请输入"></el-input>
                                            <div class="el-form-item-msg">小程序后台获取</div>
                                        </el-form-item>
                                        <el-form-item label="应用公钥" prop="mini_public_key">
                                            <el-input v-model="sys.mini_public_key" type="textarea" rows="10" show-password clearable placeholder="请输入"></el-input>
                                            <div class="el-form-item-msg"></div>
                                        </el-form-item>
                                        <el-form-item label="应用私钥" prop="min_private_key">
                                            <el-input v-model="sys.min_private_key" type="textarea" rows="10" show-password clearable placeholder="请输入"></el-input>
                                            <div class="el-form-item-msg"></div>
                                        </el-form-item>
                                    </fieldset>
                                </el-col>
                                <el-col :span="this.$store.state.global.ismobile?24:12">
                                    <fieldset>
                                        <legend><el-tag>支付配置</el-tag></legend>
                                        <el-form-item label="MCH_ID(商户账号)" prop="mch_id">
                                            <el-input v-model="sys.mch_id" clearable placeholder="请输入"></el-input>
                                            <div class="el-form-item-msg">微信商户账号，需要在微信商户平台获取，MCH_ID 与 APPID 匹配</div>
                                        </el-form-item>
                                        <el-form-item label="Token(支付令牌)" prop="mch_token">
                                            <el-input v-model="sys.mch_token" show-password clearable placeholder="请输入"></el-input>
                                            <div class="el-form-item-msg"></div>
                                        </el-form-item>
                                        <el-form-item label="Salt(支付盐)" prop="mch_salt">
                                            <el-input v-model="sys.mch_salt" show-password clearable placeholder="请输入"></el-input>
                                            <div class="el-form-item-msg"></div>
                                        </el-form-item>
                                        <el-form-item label="应用公钥" prop="app_public_key">
                                            <el-input v-model="sys.app_public_key" type="textarea" rows="10" show-password clearable placeholder="请输入"></el-input>
                                            <div class="el-form-item-msg"></div>
                                        </el-form-item>
                                        <el-form-item label="平台公钥" prop="public_key">
                                            <el-input v-model="sys.public_key" type="textarea" rows="10" show-password clearable placeholder="请输入"></el-input>
                                            <div class="el-form-item-msg"></div>
                                        </el-form-item>
                                    </fieldset>
                                </el-col>
                                <el-col :span="this.$store.state.global.ismobile?24:12">
                                    <fieldset>
                                        <legend><el-tag>商家应用权限</el-tag></legend>
                                        <el-form-item label="应用名称" prop="name">
                                            <el-input v-model="sys.name" clearable placeholder="请输入"></el-input>
                                            <div class="el-form-item-msg">应用名称</div>
                                        </el-form-item>
                                        <el-form-item label="AppId(应用 APPID)" prop="appid">
                                            <el-input v-model="sys.appid" show-password clearable placeholder="请输入"></el-input>
                                            <div class="el-form-item-msg"></div>
                                        </el-form-item>
                                        <el-form-item label="AppSecret(应用 Secret)" prop="secret">
                                            <el-input v-model="sys.secret" show-password clearable placeholder="请输入"></el-input>
                                            <div class="el-form-item-msg"></div>
                                        </el-form-item>
                                    </fieldset>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-tab-pane>
                    
                </el-tabs>
            </el-card>
        </el-main>
        <el-footer>
            <el-button type="primary" size="large" :loading="isSaveing" @click="saveForm">保存</el-button>
        </el-footer>
    </el-container>
</template>
<script>
import { defineAsyncComponent } from 'vue';
const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));
export default {
    components: {
        scEditor
    },
    data(){
        return {
            activeName:"wechat",
            isSaveing: false,
            sys: {},
            smsRegion:[],
            rules2:{
                name: [
                    { required: true, message: '请输入' }
                ],
                appid: [
                    { required: true, message: '请输入' }
                ],
                secret: [
                    { required: true, message: '请输入' }
                ],
                mch_id: [
                    { required: true, message: '请输入' }
                ],
                mch_token: [
                    { required: true, message: '请输入' }
                ],
                mch_salt: [
                    { required: true, message: '请输入' }
                ],
                mini_secret: [
                    { required: true, message: '请输入' }
                ],
                mini_public_key: [
                    { required: true, message: '请输入' }
                ],
                min_private_key: [
                    { required: true, message: '请输入' }
                ],
            },
            rules: {
                title: [
                    { required: true, message: '请输入' }
                ],
                tel: [
                    { required: true, message: '请输入' }
                ],
                logo: [
                    { required: true, message: '请选择', trigger:"change" }
                ],
                miitbeian: [
                    { required: true, message: '请输入' }
                ],
                beian: [
                    { required: true, message: '请输入' }
                ],
                copyright: [
                    { required: true, message: '请输入' }
                ]
            },
            isLoading:false
        }
    },
    created() {
        this.getConfig();
    },
    methods: {
        handleClick(event){
            this.activeName = event;
            this.getConfig();
        },
        saveForm() {
            this.isSaveing = true;
            this.$refs.form.validate(async (valid) => {
                console.log(valid)
                if (valid) {
                    var result = await this.$API.setting.configSave.post({type:this.activeName,data: this.sys });
                    this.isSaveing = false;
                    if(result.code == 0)
                    {
                        this.$message.error(result.msg);
                        return false;
                    }
                    if (this.activeName == "service") {
                        this.$TOOL.data.set("SERVICE", this.sys)
                    }
                    this.$message.success(result.msg);
                } else {
                    this.isSaveing = false;
                    return false;
                }
            })
        },
        async getConfig() {
            this.isLoading = true;
            var result = await this.$API.setting.config.get({ type: this.activeName });
            this.isLoading = false;
            if (result.code == 0) {
                this.$message.error(result.msg);
                return;
            }
            if (this.activeName == "sms") {
                this.smsRegion = result.data.channel
            }
            this.sys = result.data;
        },
    }
}
</script>