137 lines
3.6 KiB
Plaintext
137 lines
3.6 KiB
Plaintext
<template>
|
||
<view class="admin-page">
|
||
<view class="admin-card content-card">
|
||
<view class="tabs-row">
|
||
<view
|
||
v-for="tab in tabs"
|
||
:key="tab.key"
|
||
class="tab-item"
|
||
:class="{ active: currentTab === tab.key }"
|
||
@click="currentTab = tab.key"
|
||
>
|
||
{{ tab.label }}
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="currentTab === 'basic'" class="config-form">
|
||
<view class="form-item">
|
||
<text class="label">AppID：</text>
|
||
<input class="form-input" value="wxa815e4f2ef7bdb0b" />
|
||
<text class="tip">微信公众号的AppID</text>
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="label">AppSecret：</text>
|
||
<input class="form-input" value="2c9f1ef4cc695c05c4462fef4e081120" />
|
||
<text class="tip">微信公众号的AppSecret</text>
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="label">关注二维码：</text>
|
||
<view class="upload-box">
|
||
<text class="plus">+</text>
|
||
</view>
|
||
<text class="tip">引导关注公众号显示的公众号关注二维码</text>
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="label">微信校验文件：</text>
|
||
<view class="upload-btn">
|
||
<text class="icon">⤒</text>
|
||
<text>点击上传</text>
|
||
</view>
|
||
<text class="tip">配置微信网页授权域名时候下载的微信校验文件，在此处上传</text>
|
||
</view>
|
||
|
||
<view class="form-btns">
|
||
<button class="btn primary">提交</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-else class="config-form">
|
||
<view class="form-item">
|
||
<text class="label">接口地址：</text>
|
||
<input class="form-input" readonly value="https://v5.crmeb.net/api/wechat/serve" />
|
||
<text class="tip">配置服务器域名使用的接口地址，直接复制输入框内容（此项系统生成，无法修改）</text>
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="label">消息加解密方式：</text>
|
||
<radio-group class="radio-group">
|
||
<label><radio value="1" checked />明文模式</label>
|
||
<label><radio value="2" />兼容模式</label>
|
||
<label><radio value="3" />安全模式</label>
|
||
</radio-group>
|
||
<text class="tip">如需使用安全模式请在管理中心修改，仅限服务号和认证订阅号</text>
|
||
</view>
|
||
<view class="form-btns">
|
||
<button class="btn primary">提交</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
import { ref } from 'vue'
|
||
|
||
const currentTab = ref('basic')
|
||
const tabs = [
|
||
{ key: 'basic', label: '公众号配置' },
|
||
{ key: 'server', label: '服务器域名配置' }
|
||
]
|
||
</script>
|
||
|
||
<style scoped>
|
||
.config-form {
|
||
padding: 30px 10%;
|
||
}
|
||
|
||
.form-item {
|
||
margin-bottom: 30px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.form-item .label {
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
color: #303133;
|
||
}
|
||
|
||
.form-input {
|
||
border: 1px solid #dcdfe6;
|
||
padding: 10px 15px;
|
||
border-radius: 4px;
|
||
width: 100%;
|
||
}
|
||
|
||
.tip {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.upload-box {
|
||
width: 80px;
|
||
height: 80px;
|
||
border: 1px dashed #dcdfe6;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 30px;
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
.upload-btn {
|
||
width: 120px;
|
||
height: 40px;
|
||
border: 1px solid #dcdfe6;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 4px;
|
||
gap: 5px;
|
||
}
|
||
|
||
.radio-group label {
|
||
margin-right: 30px;
|
||
}
|
||
</style>
|