187 lines
3.8 KiB
Plaintext
187 lines
3.8 KiB
Plaintext
<template>
|
|
<view class="admin-page-container">
|
|
<view class="page-header">
|
|
<view class="breadcrumb">
|
|
<text class="bc-item">设置</text>
|
|
<text class="bc-sep">/</text>
|
|
<text class="bc-item">接口配置</text>
|
|
<text class="bc-sep">/</text>
|
|
<text class="bc-item active">短信功能配置</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="content-card">
|
|
<view class="tabs-header">
|
|
<view class="tab-item active"><text class="tab-text">基础配置</text></view>
|
|
<view class="tab-item"><text class="tab-text">阿里云配置</text></view>
|
|
<view class="tab-item"><text class="tab-text">腾讯云配置</text></view>
|
|
</view>
|
|
|
|
<view class="config-view">
|
|
<view class="form-content">
|
|
<view class="form-row">
|
|
<view class="form-label">短信类型:</view>
|
|
<view class="form-input-box">
|
|
<radio-group class="form-radio-group" @change="onSmsTypeChange">
|
|
<label class="radio-label">
|
|
<radio value="onepass" :checked="form.smsType == 'onepass'" color="#2d8cf0" />
|
|
<text class="radio-text">一号通</text>
|
|
</label>
|
|
<label class="radio-label">
|
|
<radio value="ali" :checked="form.smsType == 'ali'" color="#2d8cf0" />
|
|
<text class="radio-text">阿里云</text>
|
|
</label>
|
|
<label class="radio-label">
|
|
<radio value="tencent" :checked="form.smsType == 'tencent'" color="#2d8cf0" />
|
|
<text class="radio-text">腾讯云</text>
|
|
</label>
|
|
</radio-group>
|
|
<text class="form-tips">短信类型，选择发送的短信类型</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-actions">
|
|
<button class="submit-btn" type="primary" @click="handleSubmit">提交</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, reactive } from 'vue'
|
|
|
|
const form = reactive({
|
|
smsType: 'onepass'
|
|
})
|
|
|
|
const onSmsTypeChange = (e: any) => {
|
|
form.smsType = e.detail.value
|
|
}
|
|
|
|
const handleSubmit = () => {
|
|
uni.showToast({ title: '提交成功' })
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.admin-page-container {
|
|
min-height: 100vh;
|
|
background-color: #f5f7f9;
|
|
padding: 20px;
|
|
}
|
|
|
|
.breadcrumb {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.bc-item { font-size: 14px; color: #999; }
|
|
.bc-item.active { color: #333; }
|
|
.bc-sep { margin: 0 8px; color: #ccc; }
|
|
|
|
.content-card {
|
|
background-color: #fff;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.tabs-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.tab-item {
|
|
padding: 15px 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tab-text {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.tab-item.active {
|
|
border-bottom: 2px solid #2d8cf0;
|
|
}
|
|
|
|
.tab-item.active .tab-text {
|
|
color: #2d8cf0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.config-view {
|
|
padding: 24px;
|
|
}
|
|
|
|
.form-content {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.form-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 30px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.form-label {
|
|
width: 100px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
text-align: right;
|
|
margin-right: 20px;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.form-input-box {
|
|
flex: 1;
|
|
}
|
|
|
|
.form-radio-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 36px;
|
|
align-items: center;
|
|
}
|
|
|
|
.radio-label {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-right: 24px;
|
|
}
|
|
|
|
.radio-text {
|
|
font-size: 14px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.form-tips {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: #bfbfbf;
|
|
margin-top: 12px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.form-actions {
|
|
margin-top: 40px;
|
|
padding-left: 120px;
|
|
}
|
|
|
|
.submit-btn {
|
|
width: 80px;
|
|
height: 36px;
|
|
background-color: #2d8cf0;
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
line-height: 36px;
|
|
text-align: center;
|
|
}
|
|
</style>
|