86 lines
4.3 KiB
Plaintext
86 lines
4.3 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>
|
|
<view class="form-section">
|
|
<view class="form-content">
|
|
<view class="form-row">
|
|
<view class="form-label"><text class="star">*</text>短信签名:</view>
|
|
<view class="form-input-box">
|
|
<input class="form-input" v-model="form.sign" placeholder="如：【华为】" />
|
|
<text class="form-tips">必须包含中括号，且已在服务商备案</text>
|
|
</view>
|
|
</view>
|
|
<view class="form-row">
|
|
<view class="form-label">服务商选择:</view>
|
|
<view class="form-input-box">
|
|
<radio-group class="form-radio-group" @change="onProviderChange">
|
|
<label class="radio-label"><radio value="aliyun" checked color="#2d8cf0" /><text class="radio-text">阿里云</text></label>
|
|
<label class="radio-label"><radio value="tencent" color="#2d8cf0" /><text class="radio-text">腾讯云</text></label>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
<view class="form-row">
|
|
<view class="form-label"><text class="star">*</text>AccessKey ID:</view>
|
|
<view class="form-input-box">
|
|
<input class="form-input" v-model="form.ak" placeholder="请输入 AccessKey ID" />
|
|
</view>
|
|
</view>
|
|
<view class="form-row">
|
|
<view class="form-label"><text class="star">*</text>AccessKey Secret:</view>
|
|
<view class="form-input-box">
|
|
<input class="form-input" v-model="form.sk" type="password" placeholder="请输入 AccessKey Secret" />
|
|
</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({ sign: '【mall系统】', ak: '', sk: '', provider: 'aliyun' })
|
|
const onProviderChange = (e : any) => { form.provider = 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; border-bottom: 2px solid transparent; }
|
|
.tab-text { font-size: 14px; color: #666; }
|
|
.tab-item.active { border-bottom-color: #2d8cf0; }
|
|
.tab-item.active .tab-text { color: #2d8cf0; font-weight: bold; }
|
|
.form-section { padding: 40px 20px; }
|
|
.form-content { max-width: 800px; }
|
|
.form-row { display: flex; flex-direction: row; margin-bottom: 24px; }
|
|
.form-label { width: 140px; font-size: 14px; color: #606266; text-align: right; margin-right: 20px; padding-top: 8px; }
|
|
.star { color: #ff4d4f; margin-right: 4px; }
|
|
.form-input-box { flex: 1; }
|
|
.form-input { width: 100%; max-width: 400px; border: 1px solid #dcdfe6; border-radius: 4px; height: 36px; padding: 0 12px; font-size: 14px; }
|
|
.form-tips { display: block; font-size: 12px; color: #999; margin-top: 8px; }
|
|
.form-radio-group { display: flex; flex-direction: row; align-items: center; height: 36px; }
|
|
.radio-label { display: flex; flex-direction: row; align-items: center; margin-right: 20px; }
|
|
.radio-text { font-size: 14px; margin-left: 8px; }
|
|
.form-actions { margin-top: 40px; padding-left: 160px; }
|
|
.submit-btn { width: 100px; height: 36px; background-color: #2d8cf0; color: #fff; border-radius: 4px; font-size: 14px; line-height: 36px; text-align: center; }
|
|
</style>
|