edu/admin/src/views/channel/wechat_oa/config.vue

<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-alert
                type="warning"
                title="温馨提示：填写微信公众号开发配置，请前往微信公众平台申请服务号并完成认证"
                :closable="false"
                show-icon
            />
        </el-card>
        <el-form ref="formRef" :model="formData" label-width="120px">
            <el-card class="!border-none mt-4" shadow="never">
                <div class="font-medium mb-7">微信公众号</div>
                <el-form-item label="公众号名称" prop="name">
                    <div class="w-80">
                        <el-input v-model="formData.name" placeholder="请输入公众号名称" />
                    </div>
                </el-form-item>
                <el-form-item label="原始ID" prop="primaryId">
                    <div class="w-80">
                        <el-input v-model="formData.primaryId" placeholder="请输入原始ID" />
                    </div>
                </el-form-item>
                <el-form-item label="公众号二维码" prop="qrCode">
                    <div>
                        <div>
                            <material-picker v-model="formData.qrCode" :limit="1" />
                        </div>
                        <div class="form-tips">建议尺寸：宽400px*高400px。jpg，jpeg，png格式</div>
                    </div>
                </el-form-item>
            </el-card>
            <el-card class="!border-none mt-4" shadow="never">
                <div class="font-medium mb-7">公众号开发者信息</div>
                <el-form-item label="AppID" prop="appId">
                    <div class="w-80">
                        <el-input v-model="formData.appId" placeholder="请输入AppID" />
                    </div>
                </el-form-item>
                <el-form-item label="AppSecret" prop="appSecret">
                    <div>
                        <div class="w-80">
                            <el-input v-model="formData.appSecret" placeholder="请输入AppSecret" />
                        </div>
                        <div class="form-tips">
                            登录微信公众平台，点击开发>基本配置>公众号开发信息，设置AppID和AppSecret
                        </div>
                    </div>
                </el-form-item>
            </el-card>
            <el-card class="!border-none mt-4" shadow="never">
                <div class="font-medium mb-7">服务器配置</div>
                <el-form-item label="URL" prop="appId">
                    <div class="flex">
                        <div class="w-80 mr-4">
                            <el-input v-model="formData.appId" disabled />
                        </div>
                        <el-button>复制</el-button>
                    </div>
                    <div class="form-tips">
                        登录微信公众平台，点击开发>基本配置>服务器配置，填写服务器地址（URL）
                    </div>
                </el-form-item>
                <el-form-item label="Token" prop="Token">
                    <div>
                        <div class="w-80">
                            <el-input v-model="formData.appSecret" placeholder="请输入Token" />
                        </div>
                        <div class="form-tips">
                            登录微信公众平台，点击开发>基本配置>服务器配置，设置令牌Token。不填默认为“likeshop”
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="EncodingAESKey" prop="EncodingAESKey">
                    <div>
                        <div class="w-80">
                            <el-input
                                v-model="formData.appSecret"
                                placeholder="请输入EncodingAESKey"
                            />
                        </div>
                        <div class="form-tips">
                            消息加密密钥由43位字符组成，字符范围为A-Z,a-z,0-9
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="消息加密方式" required prop="status">
                    <div>
                        <el-radio-group class="flex-col !items-start" v-model="formData.status">
                            <el-radio :label="1">
                                明文模式 (不使用消息体加解密功能，安全系数较低)
                            </el-radio>

                            <el-radio :label="0">
                                兼容模式 (明文、密文将共存，方便开发者调试和维护)
                            </el-radio>
                            <el-radio :label="0">
                                安全模式（推荐） (消息包为纯密文，需要开发者加密和解密，安全系数高)
                            </el-radio>
                        </el-radio-group>
                    </div>
                </el-form-item>
            </el-card>
            <el-card class="!border-none mt-4" shadow="never">
                <div class="font-medium mb-7">功能设置</div>
                <el-form-item label="业务域名" prop="appId">
                    <div>
                        <div class="flex">
                            <div class="w-80 mr-4">
                                <el-input v-model="formData.appId" disabled />
                            </div>
                            <el-button>复制</el-button>
                        </div>
                        <div class="form-tips">
                            登录微信公众平台，点击设置>公众号设置>功能设置，填写业务域名
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="JS接口安全域名" prop="appId">
                    <div>
                        <div class="flex">
                            <div class="w-80 mr-4">
                                <el-input v-model="formData.appId" disabled />
                            </div>
                            <el-button>复制</el-button>
                        </div>
                        <div class="form-tips">
                            登录微信公众平台，点击设置>公众号设置>功能设置，填写JS接口安全域名
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="网页授权域名" prop="appId">
                    <div>
                        <div class="flex">
                            <div class="w-80 mr-4">
                                <el-input v-model="formData.appId" disabled />
                            </div>
                            <el-button>复制</el-button>
                        </div>
                        <div class="form-tips">
                            登录微信公众平台，点击设置>公众号设置>功能设置，填写网页授权域名
                        </div>
                    </div>
                </el-form-item>
            </el-card>
        </el-form>
        <footer-btns v-perms="['channel:h5:save']">
            <el-button type="primary" @click="handelSave">保存</el-button>
        </footer-btns>
    </div>
</template>
<script lang="ts" setup>
import { getOaConfig, setOaConfig } from '@/api/channel/wechat_oa'
import feedback from '@/utils/feedback'

const formData = reactive({
    name: '',
    primaryId: '',
    qrCode: '',
    appId: '',
    appSecret: ''
})

const getDetail = async () => {
    const data = await getOaConfig()
    for (const key in formData) {
        //@ts-ignore
        formData[key] = data[key]
    }
}

const handelSave = async () => {
    await setOaConfig(formData)
    getDetail()
    feedback.msgSuccess('操作成功')
}

getDetail()
</script>