完善页面2
This commit is contained in:
@@ -2,193 +2,78 @@
|
|||||||
<view class="admin-page-container">
|
<view class="admin-page-container">
|
||||||
<view class="page-header">
|
<view class="page-header">
|
||||||
<view class="breadcrumb">
|
<view class="breadcrumb">
|
||||||
<text class="bc-item">设置</text>
|
<text class="bc-item">设置</text>
|
||||||
<text class="bc-sep">/</text>
|
<text class="bc-sep">/</text>
|
||||||
<text class="bc-item">接口配置</text>
|
<text class="bc-item">接口配置</text>
|
||||||
<text class="bc-sep">/</text>
|
<text class="bc-sep">/</text>
|
||||||
<text class="bc-item active">电子面单配置</text>
|
<text class="bc-item active">电子面单</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="content-card">
|
<view class="content-card">
|
||||||
<view class="tabs-header">
|
<view class="tabs-header">
|
||||||
<view class="tab-item active"><text class="tab-text">基础配置</text></view>
|
<view class="tab-item active"><text class="tab-text">面单配置</text></view>
|
||||||
<view class="tab-item"><text class="tab-text">一号通配置</text></view>
|
|
||||||
</view>
|
</view>
|
||||||
|
<view class="form-section">
|
||||||
<view class="config-view">
|
|
||||||
<view class="form-content">
|
<view class="form-content">
|
||||||
<view class="form-row">
|
<view class="form-row">
|
||||||
<view class="form-label">开启电子面单:</view>
|
<view class="form-label"><text class="star">*</text>打印方式:</view>
|
||||||
<view class="form-input-box">
|
<view class="form-input-box">
|
||||||
<radio-group class="form-radio-group" @change="onEnableChange">
|
<radio-group class="form-radio-group" @change="onPrintChange">
|
||||||
<label class="radio-label">
|
<label class="radio-label"><radio value="cloud" checked color="#2d8cf0" /><text class="radio-text">云打印</text></label>
|
||||||
<radio value="1" :checked="form.enable == '1'" color="#2d8cf0" />
|
<label class="radio-label"><radio value="local" color="#2d8cf0" /><text class="radio-text">本地打印</text></label>
|
||||||
<text class="radio-text">开启</text>
|
|
||||||
</label>
|
|
||||||
<label class="radio-label">
|
|
||||||
<radio value="0" :checked="form.enable == '0'" color="#2d8cf0" />
|
|
||||||
<text class="radio-text">关闭</text>
|
|
||||||
</label>
|
|
||||||
</radio-group>
|
</radio-group>
|
||||||
<text class="form-tips">电子面单是否开启</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="form-row">
|
<view class="form-row">
|
||||||
<view class="form-label">电子面单类型:</view>
|
<view class="form-label"><text class="star">*</text>电子面单账号:</view>
|
||||||
<view class="form-input-box">
|
<view class="form-input-box">
|
||||||
<radio-group class="form-radio-group">
|
<input class="form-input" v-model="form.account" placeholder="请输入账号" />
|
||||||
<label class="radio-label">
|
<text class="form-tips">快递100或一号通申请的电子面单账号</text>
|
||||||
<radio value="onepass" checked color="#2d8cf0" />
|
</view>
|
||||||
<text class="radio-text">一号通</text>
|
</view>
|
||||||
</label>
|
<view class="form-row">
|
||||||
</radio-group>
|
<view class="form-label"><text class="star">*</text>电子面单密钥:</view>
|
||||||
<text class="form-tips">电子面单类型</text>
|
<view class="form-input-box">
|
||||||
|
<input class="form-input" v-model="form.secret" type="password" placeholder="请输入密钥" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="form-actions">
|
<view class="form-actions">
|
||||||
<button class="submit-btn" type="primary" @click="handleSubmit">提交</button>
|
<button class="submit-btn" type="primary" @click="handleSubmit">保存配置</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="uts">
|
<script setup lang="uts">
|
||||||
import { ref, reactive } from 'vue'
|
import { ref, reactive } from 'vue'
|
||||||
|
const form = reactive({ account: 'ES123456', secret: 'PRIVATE_KEY', printMode: 'cloud' })
|
||||||
const form = reactive({
|
const onPrintChange = (e : any) => { form.printMode = e.detail.value }
|
||||||
enable: '1'
|
const handleSubmit = () => { uni.showToast({ title: '电子面单配置保存成功' }) }
|
||||||
})
|
|
||||||
|
|
||||||
const onEnableChange = (e: any) => {
|
|
||||||
form.enable = e.detail.value
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSubmit = () => {
|
|
||||||
uni.showToast({ title: '提交成功' })
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.admin-page-container {
|
.admin-page-container { min-height: 100vh; background-color: #f5f7f9; padding: 20px; }
|
||||||
min-height: 100vh;
|
.breadcrumb { display: flex; flex-direction: row; margin-bottom: 20px; }
|
||||||
background-color: #f5f7f9;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bc-item { font-size: 14px; color: #999; }
|
.bc-item { font-size: 14px; color: #999; }
|
||||||
.bc-item.active { color: #333; }
|
.bc-item.active { color: #333; }
|
||||||
.bc-sep { margin: 0 8px; color: #ccc; }
|
.bc-sep { margin: 0 8px; color: #ccc; }
|
||||||
|
.content-card { background-color: #fff; border-radius: 4px; }
|
||||||
.content-card {
|
.tabs-header { display: flex; flex-direction: row; border-bottom: 1px solid #f0f0f0; padding: 0 20px; }
|
||||||
background-color: #fff;
|
.tab-item { padding: 15px 20px; border-bottom: 2px solid transparent; }
|
||||||
border-radius: 4px;
|
.tab-text { font-size: 14px; color: #666; }
|
||||||
}
|
.tab-item.active { border-bottom-color: #2d8cf0; }
|
||||||
|
.tab-item.active .tab-text { color: #2d8cf0; font-weight: bold; }
|
||||||
.tabs-header {
|
.form-section { padding: 40px 20px; }
|
||||||
display: flex;
|
.form-content { max-width: 800px; }
|
||||||
flex-direction: row;
|
.form-row { display: flex; flex-direction: row; margin-bottom: 24px; }
|
||||||
border-bottom: 1px solid #f0f0f0;
|
.form-label { width: 140px; font-size: 14px; color: #606266; text-align: right; margin-right: 20px; padding-top: 8px; }
|
||||||
padding: 0 20px;
|
.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; }
|
||||||
.tab-item {
|
.form-tips { display: block; font-size: 12px; color: #999; margin-top: 8px; }
|
||||||
padding: 15px 20px;
|
.form-radio-group { display: flex; flex-direction: row; align-items: center; height: 36px; }
|
||||||
cursor: pointer;
|
.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; }
|
||||||
.tab-text {
|
.submit-btn { width: 100px; height: 36px; background-color: #2d8cf0; color: #fff; border-radius: 4px; font-size: 14px; line-height: 36px; text-align: center; }
|
||||||
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>
|
</style>
|
||||||
|
|||||||
@@ -2,181 +2,79 @@
|
|||||||
<view class="admin-page-container">
|
<view class="admin-page-container">
|
||||||
<view class="page-header">
|
<view class="page-header">
|
||||||
<view class="breadcrumb">
|
<view class="breadcrumb">
|
||||||
<text class="bc-item">设置</text>
|
<text class="bc-item">设置</text>
|
||||||
<text class="bc-sep">/</text>
|
<text class="bc-sep">/</text>
|
||||||
<text class="bc-item">接口配置</text>
|
<text class="bc-item">接口配置</text>
|
||||||
<text class="bc-sep">/</text>
|
<text class="bc-sep">/</text>
|
||||||
<text class="bc-item active">物流查询配置</text>
|
<text class="bc-item active">物流查询</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="content-card">
|
<view class="content-card">
|
||||||
<view class="tabs-header">
|
<view class="tabs-header">
|
||||||
<view class="tab-item active"><text class="tab-text">基础配置</text></view>
|
<view class="tab-item active"><text class="tab-text">物流配置</text></view>
|
||||||
<view class="tab-item"><text class="tab-text">阿里云配置</text></view>
|
|
||||||
</view>
|
</view>
|
||||||
|
<view class="form-section">
|
||||||
<view class="config-view">
|
|
||||||
<view class="form-content">
|
<view class="form-content">
|
||||||
<view class="form-row">
|
<view class="form-row">
|
||||||
<view class="form-label">接口选择:</view>
|
<view class="form-label"><text class="star">*</text>物流查询服务:</view>
|
||||||
<view class="form-input-box">
|
<view class="form-input-box">
|
||||||
<radio-group class="form-radio-group" @change="onInterfaceChange">
|
<radio-group class="form-radio-group" @change="onServiceChange">
|
||||||
<label class="radio-label">
|
<label class="radio-label"><radio value="kuaidi100" checked color="#2d8cf0" /><text class="radio-text">快递100</text></label>
|
||||||
<radio value="onepass" :checked="form.interfaceType == 'onepass'" color="#2d8cf0" />
|
<label class="radio-label"><radio value="onepass" color="#2d8cf0" /><text class="radio-text">一号通</text></label>
|
||||||
<text class="radio-text">一号通</text>
|
|
||||||
</label>
|
|
||||||
<label class="radio-label">
|
|
||||||
<radio value="ali" :checked="form.interfaceType == 'ali'" color="#2d8cf0" />
|
|
||||||
<text class="radio-text">阿里云物流查询</text>
|
|
||||||
</label>
|
|
||||||
</radio-group>
|
</radio-group>
|
||||||
<text class="form-tips">建议使用一号通更方便不用配置密钥，阿里云云市场购买链接：https://0x9.me/w9vnq</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="form-row">
|
||||||
|
<view class="form-label"><text class="star">*</text>Customer:</view>
|
||||||
|
<view class="form-input-box">
|
||||||
|
<input class="form-input" v-model="form.customer" placeholder="请输入Customer" />
|
||||||
|
<text class="form-tips">快递100分配给贵司的Customer</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="form-row">
|
||||||
|
<view class="form-label"><text class="star">*</text>Key:</view>
|
||||||
|
<view class="form-input-box">
|
||||||
|
<input class="form-input" v-model="form.key" type="password" placeholder="请输入Key" />
|
||||||
|
<text class="form-tips">快递100分配给贵司的Key</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
<view class="form-actions">
|
<view class="form-actions">
|
||||||
<button class="submit-btn" type="primary" @click="handleSubmit">提交</button>
|
<button class="submit-btn" type="primary" @click="handleSubmit">保存</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="uts">
|
<script setup lang="uts">
|
||||||
import { ref, reactive } from 'vue'
|
import { ref, reactive } from 'vue'
|
||||||
|
const form = reactive({ customer: 'C123456789', key: 'K123456789', service: 'kuaidi100' })
|
||||||
const form = reactive({
|
const onServiceChange = (e : any) => { form.service = e.detail.value }
|
||||||
interfaceType: 'onepass'
|
const handleSubmit = () => { uni.showToast({ title: '保存成功' }) }
|
||||||
})
|
|
||||||
|
|
||||||
const onInterfaceChange = (e: any) => {
|
|
||||||
form.interfaceType = e.detail.value
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSubmit = () => {
|
|
||||||
uni.showToast({ title: '提交成功' })
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.admin-page-container {
|
.admin-page-container { min-height: 100vh; background-color: #f5f7f9; padding: 20px; }
|
||||||
min-height: 100vh;
|
.breadcrumb { display: flex; flex-direction: row; align-items: center; margin-bottom: 20px; }
|
||||||
background-color: #f5f7f9;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bc-item { font-size: 14px; color: #999; }
|
.bc-item { font-size: 14px; color: #999; }
|
||||||
.bc-item.active { color: #333; }
|
.bc-item.active { color: #333; }
|
||||||
.bc-sep { margin: 0 8px; color: #ccc; }
|
.bc-sep { margin: 0 8px; color: #ccc; }
|
||||||
|
.content-card { background-color: #fff; border-radius: 4px; overflow: hidden; }
|
||||||
.content-card {
|
.tabs-header { display: flex; flex-direction: row; border-bottom: 1px solid #f0f0f0; padding: 0 20px; }
|
||||||
background-color: #fff;
|
.tab-item { padding: 15px 20px; border-bottom: 2px solid transparent; }
|
||||||
border-radius: 4px;
|
.tab-text { font-size: 14px; color: #666; }
|
||||||
}
|
.tab-item.active { border-bottom-color: #2d8cf0; }
|
||||||
|
.tab-item.active .tab-text { color: #2d8cf0; font-weight: bold; }
|
||||||
.tabs-header {
|
.form-section { padding: 40px 20px; }
|
||||||
display: flex;
|
.form-content { max-width: 800px; }
|
||||||
flex-direction: row;
|
.form-row { display: flex; flex-direction: row; margin-bottom: 24px; }
|
||||||
border-bottom: 1px solid #f0f0f0;
|
.form-label { width: 140px; font-size: 14px; color: #606266; text-align: right; margin-right: 20px; padding-top: 8px; }
|
||||||
padding: 0 20px;
|
.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; }
|
||||||
.tab-item {
|
.form-tips { display: block; font-size: 12px; color: #999; margin-top: 8px; }
|
||||||
padding: 15px 20px;
|
.form-radio-group { display: flex; flex-direction: row; align-items: center; height: 36px; }
|
||||||
cursor: pointer;
|
.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; }
|
||||||
.tab-text {
|
.submit-btn { width: 80px; height: 36px; background-color: #2d8cf0; color: #fff; border-radius: 4px; font-size: 14px; line-height: 36px; text-align: center; border: none; }
|
||||||
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;
|
|
||||||
max-width: 600px;
|
|
||||||
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>
|
</style>
|
||||||
|
|||||||
@@ -2,202 +2,78 @@
|
|||||||
<view class="admin-page-container">
|
<view class="admin-page-container">
|
||||||
<view class="page-header">
|
<view class="page-header">
|
||||||
<view class="breadcrumb">
|
<view class="breadcrumb">
|
||||||
<text class="bc-item">设置</text>
|
<text class="bc-item">设置</text>
|
||||||
<text class="bc-sep">/</text>
|
<text class="bc-sep">/</text>
|
||||||
<text class="bc-item">接口配置</text>
|
<text class="bc-item">接口配置</text>
|
||||||
<text class="bc-sep">/</text>
|
<text class="bc-sep">/</text>
|
||||||
<text class="bc-item active">商城支付配置</text>
|
<text class="bc-item active">商城支付</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="content-card">
|
<view class="content-card">
|
||||||
<view class="tabs-header">
|
<view class="tabs-header">
|
||||||
<view class="tab-item active"><text class="tab-text">基础配置</text></view>
|
<view class="tab-item active"><text class="tab-text">支付配置</text></view>
|
||||||
<view class="tab-item"><text class="tab-text">微信支付配置</text></view>
|
|
||||||
</view>
|
</view>
|
||||||
|
<view class="form-section">
|
||||||
<view class="config-view">
|
|
||||||
<view class="form-content">
|
<view class="form-content">
|
||||||
<view class="form-row">
|
<view class="form-row">
|
||||||
<view class="form-label">余额支付:</view>
|
<view class="form-label">微信支付:</view>
|
||||||
<view class="form-input-box">
|
<view class="form-input-box">
|
||||||
<radio-group class="form-radio-group" @change="onBalancePayChange">
|
<switch checked color="#2d8cf0" @change="onWxPayChange" />
|
||||||
<label class="radio-label">
|
<text class="form-tips">开启后前端可使用微信支付</text>
|
||||||
<radio value="1" :checked="form.balancePay == '1'" color="#2d8cf0" />
|
|
||||||
<text class="radio-text">开启</text>
|
|
||||||
</label>
|
|
||||||
<label class="radio-label">
|
|
||||||
<radio value="0" :checked="form.balancePay == '0'" color="#2d8cf0" />
|
|
||||||
<text class="radio-text">关闭</text>
|
|
||||||
</label>
|
|
||||||
</radio-group>
|
|
||||||
<text class="form-tips">余额支付请选择开启或关闭</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="form-row">
|
<view class="form-row">
|
||||||
<view class="form-label">好友代付:</view>
|
<view class="form-label">AppID:</view>
|
||||||
<view class="form-input-box">
|
<view class="form-input-box">
|
||||||
<radio-group class="form-radio-group" @change="onFriendPayChange">
|
<input class="form-input" v-model="form.wxAppId" placeholder="微信AppID" />
|
||||||
<label class="radio-label">
|
</view>
|
||||||
<radio value="1" :checked="form.friendPay == '1'" color="#2d8cf0" />
|
</view>
|
||||||
<text class="radio-text">开启</text>
|
<view class="form-row">
|
||||||
</label>
|
<view class="form-label">MchID:</view>
|
||||||
<label class="radio-label">
|
<view class="form-input-box">
|
||||||
<radio value="0" :checked="form.friendPay == '0'" color="#2d8cf0" />
|
<input class="form-input" v-model="form.wxMchId" placeholder="商户号" />
|
||||||
<text class="radio-text">关闭</text>
|
</view>
|
||||||
</label>
|
</view>
|
||||||
</radio-group>
|
<view class="form-row" style="margin-top: 40px;">
|
||||||
<text class="form-tips">好友代付开关，关闭后付款类型不显示好友代付</text>
|
<view class="form-label">支付宝支付:</view>
|
||||||
|
<view class="form-input-box">
|
||||||
|
<switch color="#2d8cf0" @change="onAliPayChange" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="form-actions">
|
<view class="form-actions">
|
||||||
<button class="submit-btn" type="primary" @click="handleSubmit">提交</button>
|
<button class="submit-btn" type="primary" @click="handleSubmit">保存设置</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="uts">
|
<script setup lang="uts">
|
||||||
import { ref, reactive } from 'vue'
|
import { ref, reactive } from 'vue'
|
||||||
|
const form = reactive({ wxAppId: '', wxMchId: '', wxEnabled: true, aliEnabled: false })
|
||||||
const form = reactive({
|
const onWxPayChange = (e : any) => { form.wxEnabled = e.detail.value }
|
||||||
balancePay: '1',
|
const onAliPayChange = (e : any) => { form.aliEnabled = e.detail.value }
|
||||||
friendPay: '1'
|
const handleSubmit = () => { uni.showToast({ title: '支付配置已保存' }) }
|
||||||
})
|
|
||||||
|
|
||||||
const onBalancePayChange = (e: any) => {
|
|
||||||
form.balancePay = e.detail.value
|
|
||||||
}
|
|
||||||
|
|
||||||
const onFriendPayChange = (e: any) => {
|
|
||||||
form.friendPay = e.detail.value
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSubmit = () => {
|
|
||||||
uni.showToast({ title: '提交成功' })
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.admin-page-container {
|
.admin-page-container { min-height: 100vh; background-color: #f5f7f9; padding: 20px; }
|
||||||
min-height: 100vh;
|
.breadcrumb { display: flex; flex-direction: row; margin-bottom: 20px; }
|
||||||
background-color: #f5f7f9;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bc-item { font-size: 14px; color: #999; }
|
.bc-item { font-size: 14px; color: #999; }
|
||||||
.bc-item.active { color: #333; }
|
.bc-item.active { color: #333; }
|
||||||
.bc-sep { margin: 0 8px; color: #ccc; }
|
.bc-sep { margin: 0 8px; color: #ccc; }
|
||||||
|
.content-card { background-color: #fff; border-radius: 4px; }
|
||||||
.content-card {
|
.tabs-header { display: flex; flex-direction: row; border-bottom: 1px solid #f0f0f0; padding: 0 20px; }
|
||||||
background-color: #fff;
|
.tab-item { padding: 15px 20px; border-bottom: 2px solid transparent; }
|
||||||
border-radius: 4px;
|
.tab-text { font-size: 14px; color: #666; }
|
||||||
}
|
.tab-item.active { border-bottom-color: #2d8cf0; }
|
||||||
|
.tab-item.active .tab-text { color: #2d8cf0; font-weight: bold; }
|
||||||
.tabs-header {
|
.form-section { padding: 40px 20px; }
|
||||||
display: flex;
|
.form-content { max-width: 800px; }
|
||||||
flex-direction: row;
|
.form-row { display: flex; flex-direction: row; margin-bottom: 24px; align-items: center; }
|
||||||
border-bottom: 1px solid #f0f0f0;
|
.form-label { width: 140px; font-size: 14px; color: #606266; text-align: right; margin-right: 20px; }
|
||||||
padding: 0 20px;
|
.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; }
|
||||||
.tab-item {
|
.form-actions { margin-top: 40px; padding-left: 160px; }
|
||||||
padding: 15px 20px;
|
.submit-btn { width: 100px; height: 36px; background-color: #2d8cf0; color: #fff; border-radius: 4px; font-size: 14px; line-height: 36px; text-align: center; }
|
||||||
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>
|
</style>
|
||||||
|
|||||||
@@ -2,185 +2,84 @@
|
|||||||
<view class="admin-page-container">
|
<view class="admin-page-container">
|
||||||
<view class="page-header">
|
<view class="page-header">
|
||||||
<view class="breadcrumb">
|
<view class="breadcrumb">
|
||||||
<text class="bc-item">设置</text>
|
<text class="bc-item">设置</text>
|
||||||
<text class="bc-sep">/</text>
|
<text class="bc-sep">/</text>
|
||||||
<text class="bc-item">接口配置</text>
|
<text class="bc-item">接口配置</text>
|
||||||
<text class="bc-sep">/</text>
|
<text class="bc-sep">/</text>
|
||||||
<text class="bc-item active">短信功能配置</text>
|
<text class="bc-item active">短信接口</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="content-card">
|
<view class="content-card">
|
||||||
<view class="tabs-header">
|
<view class="tabs-header">
|
||||||
<view class="tab-item active"><text class="tab-text">基础配置</text></view>
|
<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>
|
||||||
|
<view class="form-section">
|
||||||
<view class="config-view">
|
|
||||||
<view class="form-content">
|
<view class="form-content">
|
||||||
<view class="form-row">
|
<view class="form-row">
|
||||||
<view class="form-label">短信类型:</view>
|
<view class="form-label"><text class="star">*</text>短信签名:</view>
|
||||||
<view class="form-input-box">
|
<view class="form-input-box">
|
||||||
<radio-group class="form-radio-group" @change="onSmsTypeChange">
|
<input class="form-input" v-model="form.sign" placeholder="如：【华为】" />
|
||||||
<label class="radio-label">
|
<text class="form-tips">必须包含中括号，且已在服务商备案</text>
|
||||||
<radio value="onepass" :checked="form.smsType == 'onepass'" color="#2d8cf0" />
|
</view>
|
||||||
<text class="radio-text">一号通</text>
|
</view>
|
||||||
</label>
|
<view class="form-row">
|
||||||
<label class="radio-label">
|
<view class="form-label">服务商选择:</view>
|
||||||
<radio value="ali" :checked="form.smsType == 'ali'" color="#2d8cf0" />
|
<view class="form-input-box">
|
||||||
<text class="radio-text">阿里云</text>
|
<radio-group class="form-radio-group" @change="onProviderChange">
|
||||||
</label>
|
<label class="radio-label"><radio value="aliyun" checked color="#2d8cf0" /><text class="radio-text">阿里云</text></label>
|
||||||
<label class="radio-label">
|
<label class="radio-label"><radio value="tencent" color="#2d8cf0" /><text class="radio-text">腾讯云</text></label>
|
||||||
<radio value="tencent" :checked="form.smsType == 'tencent'" color="#2d8cf0" />
|
</radio-group>
|
||||||
<text class="radio-text">腾讯云</text>
|
</view>
|
||||||
</label>
|
</view>
|
||||||
</radio-group>
|
<view class="form-row">
|
||||||
<text class="form-tips">短信类型，选择发送的短信类型</text>
|
<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>
|
</view>
|
||||||
|
|
||||||
<view class="form-actions">
|
<view class="form-actions">
|
||||||
<button class="submit-btn" type="primary" @click="handleSubmit">提交</button>
|
<button class="submit-btn" type="primary" @click="handleSubmit">确认保存</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="uts">
|
<script setup lang="uts">
|
||||||
import { ref, reactive } from 'vue'
|
import { ref, reactive } from 'vue'
|
||||||
|
const form = reactive({ sign: '【mall系统】', ak: '', sk: '', provider: 'aliyun' })
|
||||||
const form = reactive({
|
const onProviderChange = (e : any) => { form.provider = e.detail.value }
|
||||||
smsType: 'onepass'
|
const handleSubmit = () => { uni.showToast({ title: '短信配置已更新' }) }
|
||||||
})
|
|
||||||
|
|
||||||
const onSmsTypeChange = (e: any) => {
|
|
||||||
form.smsType = e.detail.value
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSubmit = () => {
|
|
||||||
uni.showToast({ title: '提交成功' })
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.admin-page-container {
|
.admin-page-container { min-height: 100vh; background-color: #f5f7f9; padding: 20px; }
|
||||||
min-height: 100vh;
|
.breadcrumb { display: flex; flex-direction: row; margin-bottom: 20px; }
|
||||||
background-color: #f5f7f9;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bc-item { font-size: 14px; color: #999; }
|
.bc-item { font-size: 14px; color: #999; }
|
||||||
.bc-item.active { color: #333; }
|
.bc-item.active { color: #333; }
|
||||||
.bc-sep { margin: 0 8px; color: #ccc; }
|
.bc-sep { margin: 0 8px; color: #ccc; }
|
||||||
|
.content-card { background-color: #fff; border-radius: 4px; }
|
||||||
.content-card {
|
.tabs-header { display: flex; flex-direction: row; border-bottom: 1px solid #f0f0f0; padding: 0 20px; }
|
||||||
background-color: #fff;
|
.tab-item { padding: 15px 20px; border-bottom: 2px solid transparent; }
|
||||||
border-radius: 4px;
|
.tab-text { font-size: 14px; color: #666; }
|
||||||
}
|
.tab-item.active { border-bottom-color: #2d8cf0; }
|
||||||
|
.tab-item.active .tab-text { color: #2d8cf0; font-weight: bold; }
|
||||||
.tabs-header {
|
.form-section { padding: 40px 20px; }
|
||||||
display: flex;
|
.form-content { max-width: 800px; }
|
||||||
flex-direction: row;
|
.form-row { display: flex; flex-direction: row; margin-bottom: 24px; }
|
||||||
border-bottom: 1px solid #f0f0f0;
|
.form-label { width: 140px; font-size: 14px; color: #606266; text-align: right; margin-right: 20px; padding-top: 8px; }
|
||||||
padding: 0 20px;
|
.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; }
|
||||||
.tab-item {
|
.form-tips { display: block; font-size: 12px; color: #999; margin-top: 8px; }
|
||||||
padding: 15px 20px;
|
.form-radio-group { display: flex; flex-direction: row; align-items: center; height: 36px; }
|
||||||
cursor: pointer;
|
.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; }
|
||||||
.tab-text {
|
.submit-btn { width: 100px; height: 36px; background-color: #2d8cf0; color: #fff; border-radius: 4px; font-size: 14px; line-height: 36px; text-align: center; }
|
||||||
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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user