huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善页面3

Browse Source
This commit is contained in:
huangzhenbao
2026-02-13 00:27:35 +08:00
parent 3357a09294
commit 01d1c345d0
2 changed files with 334 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
pages/mall/admin/setting/interface/payment.uvue
View File

@@ -6,55 +6,116 @@
<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', activeTab == 0 ? 'active' : '']" @click="activeTab = 0">
<text class="tab-text">基础配置</text>
</view>
<view :class="['tab-item', activeTab == 1 ? 'active' : '']" @click="activeTab = 1">
<text class="tab-text">微信支付配置</text>
</view>
</view> </view>
<view class="form-section">
<!-- 基础配置内容 -->
<view class="form-section" v-if="activeTab == 0">
<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">
<switch checked color="#2d8cf0" @change="onWxPayChange" /> <radio-group class="form-radio-group" @change="onBaseChange('balancePay', $event)">
<text class="form-tips">开启后前端可使用微信支付</text> <label class="radio-label"><radio value="1" :checked="form.base.balancePay == '1'" color="#2d8cf0" /><text class="radio-text">开启</text></label>
<label class="radio-label"><radio value="0" :checked="form.base.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">AppID:</view> <view class="form-label">好友代付:</view>
<view class="form-input-box"> <view class="form-input-box">
<input class="form-input" v-model="form.wxAppId" placeholder="微信AppID" /> <radio-group class="form-radio-group" @change="onBaseChange('friendPay', $event)">
<label class="radio-label"><radio value="1" :checked="form.base.friendPay == '1'" color="#2d8cf0" /><text class="radio-text">开启</text></label>
<label class="radio-label"><radio value="0" :checked="form.base.friendPay == '0'" color="#2d8cf0" /><text class="radio-text">关闭</text></label>
</radio-group>
<text class="form-tips">好友代付开关，关闭后付款类型不显示好友代付</text>
</view>
</view>
<view class="form-actions" style="margin-top: 20px;">
<button class="submit-btn" type="primary" @click="handleSave">提交</button>
</view>
</view>
</view>
<!-- 微信支付配置内容 (保持之前版本) -->
<view class="form-section" v-if="activeTab == 1">
<view class="form-content extra-wide">
<view class="form-row">
<view class="form-label">支付接口类型:</view>
<view class="form-input-box">
<radio-group class="form-radio-group" @change="onWxRadioChange('vVersion', $event)">
<label class="radio-label"><radio value="v2" :checked="form.wx.vVersion == 'v2'" color="#2d8cf0" /><text class="radio-text">v2 (支持企业付款到零钱)</text></label>
<label class="radio-label"><radio value="v3" :checked="form.wx.vVersion == 'v3'" color="#2d8cf0" /><text class="radio-text">v3 (支持商户转账到零钱)</text></label>
</radio-group>
<text class="form-tips highlight">支付接口类型v2对应微信支付旧版v2支付。v3对应微信支付v3支付接口。支付证书可以通用一个，支付秘钥和v2旧版支付有区别</text>
</view> </view>
</view> </view>
<view class="form-row"> <view class="form-row">
<view class="form-label">MchID:</view> <view class="form-label">证书序列号:</view>
<view class="form-input-box"> <view class="form-input-box">
<input class="form-input" v-model="form.wxMchId" placeholder="商户号" /> <input class="form-input max-width-input" v-model="form.wx.serialNo" placeholder="请输入证书序列号" />
<text class="form-tips">「商户API证书」的「证书序列号」，可以在证书管理里面查看</text>
</view> </view>
</view> </view>
<view class="form-row" style="margin-top: 40px;"> <view class="form-row">
<view class="form-label">支付宝支付:</view> <view class="form-label">微信自动提现场景值:</view>
<view class="form-input-box"> <view class="form-input-box">
<switch color="#2d8cf0" @change="onAliPayChange" /> <input class="form-input max-width-input" v-model="form.wx.sceneValue" placeholder="1000" />
</view> </view>
</view> </view>
<view class="form-actions"> <view class="form-row">
<button class="submit-btn" type="primary" @click="handleSubmit">保存设置</button> <view class="form-label">v3支付Key:</view>
<view class="form-input-box">
<input class="form-input max-width-input" v-model="form.wx.v3Key" placeholder="V3支付秘钥" />
</view>
</view>
<view class="form-row">
<view class="form-label">Mchid:</view>
<view class="form-input-box">
<input class="form-input max-width-input" v-model="form.wx.mchid" placeholder="微信商户号" />
</view>
</view>
<view class="form-actions" style="margin-top: 20px;">
<button class="submit-btn" type="primary" @click="handleSave">提交</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 activeTab = ref(0)
const onWxPayChange = (e : any) => { form.wxEnabled = e.detail.value } const form = reactive({
const onAliPayChange = (e : any) => { form.aliEnabled = e.detail.value } base: {
const handleSubmit = () => { uni.showToast({ title: '支付配置已保存' }) } balancePay: '1',
friendPay: '1'
},
wx: {
vVersion: 'v3',
serialNo: '2C79D0EF62EC9229C93D1017222EF7ED6CB4B88A',
sceneValue: '1000',
v3Key: 'wXID8YARmzbF126iBkpdCyLVz0o3GH95',
mchid: '1481090182'
}
})
const onBaseChange = (key : string, e : any) => { form.base[key] = e.detail.value }
const onWxRadioChange = (key : string, e : any) => { form.wx[key] = e.detail.value }
const handleSave = () => { uni.showToast({ title: '提交成功' }) }
</script> </script>
<style scoped> <style scoped>
.admin-page-container { min-height: 100vh; background-color: #f5f7f9; padding: 20px; } .admin-page-container { min-height: 100vh; background-color: #f5f7f9; padding: 20px; }
.breadcrumb { display: flex; flex-direction: row; margin-bottom: 20px; } .breadcrumb { display: flex; flex-direction: row; margin-bottom: 20px; }
@@ -62,18 +123,23 @@ const handleSubmit = () => { uni.showToast({ title: '支付配置已保存' }) }
.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 { background-color: #fff; border-radius: 4px; }
.tabs-header { display: flex; flex-direction: row; border-bottom: 1px solid #f0f0f0; padding: 0 20px; } .tabs-header { display: flex; flex-direction: row; border-bottom: 1px solid #f0f0f0; padding: 0 30px; }
.tab-item { padding: 15px 20px; border-bottom: 2px solid transparent; } .tab-item { padding: 16px 20px; margin-right: 32px; border-bottom: 2px solid transparent; }
.tab-text { font-size: 14px; color: #666; } .tab-text { font-size: 14px; color: #666; }
.tab-item.active { border-bottom-color: #2d8cf0; } .tab-item.active { border-bottom-color: #2d8cf0; }
.tab-item.active .tab-text { color: #2d8cf0; font-weight: bold; } .tab-item.active .tab-text { color: #2d8cf0; font-weight: bold; }
.form-section { padding: 40px 20px; } .form-section { padding: 30px; }
.form-content { max-width: 800px; } .form-content { max-width: 900px; }
.form-row { display: flex; flex-direction: row; margin-bottom: 24px; align-items: center; } .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; } .form-label { width: 160px; font-size: 14px; color: #333; text-align: right; margin-right: 24px; padding-top: 8px; }
.form-input-box { flex: 1; } .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-input { width: 100%; border: 1px solid #dcdfe6; border-radius: 4px; height: 34px; padding: 0 12px; font-size: 14px; }
.form-tips { display: block; font-size: 12px; color: #999; margin-top: 8px; } .max-width-input { max-width: 450px; }
.form-actions { margin-top: 40px; padding-left: 160px; } .form-tips { display: block; font-size: 12px; color: #999; margin-top: 10px; }
.submit-btn { width: 100px; height: 36px; background-color: #2d8cf0; color: #fff; border-radius: 4px; font-size: 14px; line-height: 36px; text-align: center; } .highlight { color: #c0c4cc; }
.form-radio-group { display: flex; flex-direction: row; align-items: center; height: 34px; }
.radio-label { display: flex; flex-direction: row; align-items: center; margin-right: 24px; }
.radio-text { font-size: 14px; margin-left: 6px; }
.form-actions { padding-left: 184px; }
.submit-btn { width: 65px; height: 32px; background-color: #2d8cf0; color: #fff; border-radius: 4px; font-size: 14px; line-height: 32px; text-align: center; border: none; }
</style> </style>

286
pages/mall/admin/setting/interface/sms.uvue
View File

@@ -6,80 +6,272 @@
<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', activeTab == 0 ? 'active' : '']" @click="activeTab = 0">
<text class="tab-text">基础配置</text>
</view>
<view :class="['tab-item', activeTab == 1 ? 'active' : '']" @click="activeTab = 1">
<text class="tab-text">阿里云配置</text>
</view>
<view :class="['tab-item', activeTab == 2 ? 'active' : '']" @click="activeTab = 2">
<text class="tab-text">腾讯云配置</text>
</view>
</view> </view>
<view class="form-section">
<!-- 基础配置 -->
<view class="form-section" v-if="activeTab == 0">
<view class="form-content"> <view class="form-content">
<view class="form-row"> <view class="form-row">
<view class="form-label"><text class="star">*</text>短信签名:</view> <view class="form-label">短信类型:</view>
<view class="form-input-box"> <view class="form-input-box">
<input class="form-input" v-model="form.sign" placeholder="如：【华为】" /> <radio-group class="form-radio-group" @change="onBaseChange('smsType', $event)">
<text class="form-tips">必须包含中括号，且已在服务商备案</text> <label class="radio-label"><radio value="onepass" :checked="form.base.smsType == 'onepass'" color="#2d8cf0" /><text class="radio-text">一号通</text></label>
</view> <label class="radio-label"><radio value="aliyun" :checked="form.base.smsType == 'aliyun'" color="#2d8cf0" /><text class="radio-text">阿里云</text></label>
</view> <label class="radio-label"><radio value="tencent" :checked="form.base.smsType == 'tencent'" color="#2d8cf0" /><text class="radio-text">腾讯云</text></label>
<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> </radio-group>
<text class="form-tips">短信类型，选择发送的短信类型</text>
</view>
</view>
<view class="form-actions" style="margin-top: 20px;">
<button class="submit-btn" type="primary" @click="handleSave">提交</button>
</view>
</view>
</view>
<!-- 阿里云配置 -->
<view class="form-section" v-if="activeTab == 1">
<view class="form-content">
<view class="form-row">
<view class="form-label">AccessKeyId:</view>
<view class="form-input-box">
<input class="form-input max-width-input" v-model="form.ali.ak" placeholder="请输入AccessKeyId" />
<text class="form-tips">阿里云AccessKeyId</text>
</view> </view>
</view> </view>
<view class="form-row"> <view class="form-row">
<view class="form-label"><text class="star">*</text>AccessKey ID:</view> <view class="form-label">AccessKeySecret:</view>
<view class="form-input-box"> <view class="form-input-box">
<input class="form-input" v-model="form.ak" placeholder="请输入 AccessKey ID" /> <input class="form-input max-width-input" v-model="form.ali.sk" placeholder="请输入AccessKeySecret" />
<text class="form-tips">阿里云AccessKeySecret</text>
</view> </view>
</view> </view>
<view class="form-row"> <view class="form-row">
<view class="form-label"><text class="star">*</text>AccessKey Secret:</view> <view class="form-label">短信签名:</view>
<view class="form-input-box"> <view class="form-input-box">
<input class="form-input" v-model="form.sk" type="password" placeholder="请输入 AccessKey Secret" /> <input class="form-input max-width-input" v-model="form.ali.sign" placeholder="请输入短信签名" />
<text class="form-tips">短信签名</text>
</view> </view>
</view> </view>
<view class="form-actions"> <view class="form-actions" style="margin-top: 20px;">
<button class="submit-btn" type="primary" @click="handleSubmit">确认保存</button> <button class="submit-btn" type="primary" @click="handleSave">提交</button>
</view>
</view>
</view>
<!-- 腾讯云配置 -->
<view class="form-section" v-if="activeTab == 2">
<view class="form-content">
<view class="form-row">
<view class="form-label">SKD AppID:</view>
<view class="form-input-box">
<input class="form-input max-width-input" v-model="form.tencent.appId" placeholder="请输入SKD AppID" />
<text class="form-tips">腾讯云短信应用SKD APPID</text>
</view>
</view>
<view class="form-row">
<view class="form-label">AccessKeyId:</view>
<view class="form-input-box">
<input class="form-input max-width-input" v-model="form.tencent.ak" placeholder="请输入AccessKeyId" />
<text class="form-tips">腾讯云AccessKeyId</text>
</view>
</view>
<view class="form-row">
<view class="form-label">AccessKeySecret:</view>
<view class="form-input-box">
<input class="form-input max-width-input" v-model="form.tencent.sk" placeholder="请输入AccessKeySecret" />
<text class="form-tips">腾讯云AccessKeySecret</text>
</view>
</view>
<view class="form-row">
<view class="form-label">腾讯云短信签名:</view>
<view class="form-input-box">
<input class="form-input max-width-input" v-model="form.tencent.sign" placeholder="请输入腾讯云短信签名" />
<text class="form-tips">腾讯云短信签名</text>
</view>
</view>
<view class="form-row">
<view class="form-label">短信区域:</view>
<view class="form-input-box">
<input class="form-input max-width-input" v-model="form.tencent.region" placeholder="请输入短信区域" />
<text class="form-tips">短信区域ap-beijing、ap-guangzhou、ap-nanjing任选其一填写</text>
</view>
</view>
<view class="form-actions" style="margin-top: 20px;">
<button class="submit-btn" type="primary" @click="handleSave">提交</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 onProviderChange = (e : any) => { form.provider = e.detail.value } const activeTab = ref(0)
const handleSubmit = () => { uni.showToast({ title: '短信配置已更新' }) } const form = reactive({
base: {
smsType: 'onepass'
},
ali: {
ak: '',
sk: '',
sign: ''
},
tencent: {
appId: '',
ak: '',
sk: '',
sign: '',
region: ''
}
})
const onBaseChange = (key : string, e : any) => {
form.base[key] = e.detail.value
}
const handleSave = () => {
uni.showToast({
title: '提交成功',
icon: 'success'
})
}
</script> </script>
<style scoped> <style scoped>
.admin-page-container { min-height: 100vh; background-color: #f5f7f9; padding: 20px; } .admin-page-container {
.breadcrumb { display: flex; flex-direction: row; margin-bottom: 20px; } min-height: 100vh;
.bc-item { font-size: 14px; color: #999; } background-color: #f5f7f9;
.bc-item.active { color: #333; } padding: 20px;
.bc-sep { margin: 0 8px; color: #ccc; } }
.content-card { background-color: #fff; border-radius: 4px; } .breadcrumb {
.tabs-header { display: flex; flex-direction: row; border-bottom: 1px solid #f0f0f0; padding: 0 20px; } display: flex;
.tab-item { padding: 15px 20px; border-bottom: 2px solid transparent; } flex-direction: row;
.tab-text { font-size: 14px; color: #666; } margin-bottom: 20px;
.tab-item.active { border-bottom-color: #2d8cf0; } }
.tab-item.active .tab-text { color: #2d8cf0; font-weight: bold; } .bc-item {
.form-section { padding: 40px 20px; } font-size: 14px;
.form-content { max-width: 800px; } color: #999;
.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; } .bc-item.active {
.star { color: #ff4d4f; margin-right: 4px; } color: #333;
.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; } .bc-sep {
.form-tips { display: block; font-size: 12px; color: #999; margin-top: 8px; } margin: 0 8px;
.form-radio-group { display: flex; flex-direction: row; align-items: center; height: 36px; } color: #ccc;
.radio-label { display: flex; flex-direction: row; align-items: center; margin-right: 20px; } }
.radio-text { font-size: 14px; margin-left: 8px; } .content-card {
.form-actions { margin-top: 40px; padding-left: 160px; } background-color: #fff;
.submit-btn { width: 100px; height: 36px; background-color: #2d8cf0; color: #fff; border-radius: 4px; font-size: 14px; line-height: 36px; text-align: center; } border-radius: 4px;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
}
.tabs-header {
display: flex;
flex-direction: row;
border-bottom: 1px solid #f0f0f0;
padding: 0 30px;
}
.tab-item {
padding: 16px 20px;
margin-right: 32px;
cursor: pointer;
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: 30px;
}
.form-content {
max-width: 900px;
}
.form-row {
display: flex;
flex-direction: row;
margin-bottom: 24px;
}
.form-label {
width: 140px;
font-size: 14px;
color: #333;
text-align: right;
margin-right: 24px;
padding-top: 8px;
}
.form-input-box {
flex: 1;
}
.form-input {
width: 100%;
border: 1px solid #dcdfe6;
border-radius: 4px;
height: 34px;
padding: 0 12px;
font-size: 14px;
}
.max-width-input {
max-width: 450px;
}
.form-tips {
display: block;
font-size: 12px;
color: #999;
margin-top: 10px;
line-height: 1.6;
}
.form-radio-group {
display: flex;
flex-direction: row;
align-items: center;
height: 34px;
}
.radio-label {
display: flex;
flex-direction: row;
align-items: center;
margin-right: 24px;
}
.radio-text {
font-size: 14px;
margin-left: 6px;
color: #606266;
}
.form-actions {
padding-left: 164px;
}
.submit-btn {
width: 65px;
height: 32px;
background-color: #2d8cf0;
color: #fff;
border-radius: 4px;
font-size: 14px;
line-height: 32px;
text-align: center;
border: none;
}
</style> </style>