188 lines
4.7 KiB
Plaintext
188 lines
4.7 KiB
Plaintext
<template>
|
|
<view class="container">
|
|
<view class="header">
|
|
<text class="title">配送/对接配置中心</text>
|
|
</view>
|
|
|
|
<!-- 环境选择 -->
|
|
<view class="card">
|
|
<view class="card-header">
|
|
<text class="card-title">运行环境</text>
|
|
<switch :checked="isTestMode" @change="toggleTestMode" color="#409eff" />
|
|
</view>
|
|
<view class="env-info">
|
|
<text class="env-tag" :class="isTestMode ? 'tag-orange' : 'tag-blue'">{{ isTestMode ? '测试 (MOCK 模式开启)' : '生产 (已连接真实承运商)' }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Mock Server 配置 -->
|
|
<view v-if="isTestMode" class="card">
|
|
<view class="card-title">MOCK 服务配置</view>
|
|
<view class="form-group">
|
|
<text class="label">Server 地址</text>
|
|
<input v-model="config.mockUrl" class="input" placeholder="http://192.168..." />
|
|
</view>
|
|
<view class="form-group">
|
|
<text class="label">Webhook 接收密钥 (Secret)</text>
|
|
<input v-model="config.webhookSecret" class="input" password placeholder="HMAC Secret" />
|
|
</view>
|
|
<view class="form-group">
|
|
<text class="label">自动推送场景</text>
|
|
<checkbox-group @change="onScenarioChange">
|
|
<label class="checkbox-item">
|
|
<checkbox value="auto" :checked="config.autoPush" /> 揽收后自动触发生命周期
|
|
</label>
|
|
</checkbox-group>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 承运商列表 -->
|
|
<view class="card">
|
|
<view class="card-header">
|
|
<text class="card-title">已接入承运商</text>
|
|
<text class="add-link">+ 新增</text>
|
|
</view>
|
|
<view v-for="(carrier, index) in carriers" :key="index" class="carrier-item">
|
|
<view class="carrier-info">
|
|
<text class="carrier-name">{{ carrier.name }} ({{ carrier.code }})</text>
|
|
<text class="carrier-meta">回调: {{ carrier.callback_status ? '在线' : '离线' }} | 轮询: {{ carrier.polling ? '开' : '关' }}</text>
|
|
</view>
|
|
<switch :checked="carrier.enabled" color="#409eff" />
|
|
</view>
|
|
</view>
|
|
|
|
<button class="save-btn" @click="saveConfig">保存配置</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script uts>
|
|
import { mockService } from './mock-service.uts'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
isTestMode: mockService.isTestMode,
|
|
config: {
|
|
mockUrl: mockService.mockUrl,
|
|
webhookSecret: '********',
|
|
autoPush: mockService.autoPush
|
|
},
|
|
carriers: [
|
|
{ name: '韵达快递', code: 'YUNDA', enabled: true, callback_status: true, polling: true },
|
|
{ name: '圆通速递', code: 'YTO', enabled: true, callback_status: true, polling: false },
|
|
{ name: '中通快递', code: 'ZTO', enabled: false, callback_status: false, polling: false }
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
toggleTestMode(e: any) {
|
|
const val = e.detail.value as boolean
|
|
this.isTestMode = val
|
|
mockService.isTestMode = val // 同步到 Mock 服务
|
|
},
|
|
onScenarioChange(e: any) {
|
|
const isAuto = e.detail.value.includes('auto')
|
|
this.config.autoPush = isAuto
|
|
mockService.autoPush = isAuto // 同步到 Mock 服务
|
|
},
|
|
saveConfig() {
|
|
uni.showLoading({ title: '保存中...' })
|
|
setTimeout(() => {
|
|
mockService.mockUrl = this.config.mockUrl
|
|
uni.hideLoading()
|
|
uni.showToast({ title: '全局配置已同步' })
|
|
}, 1000)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
padding: 24rpx;
|
|
background-color: #f5f7fa;
|
|
min-height: 100vh;
|
|
}
|
|
.header {
|
|
margin-bottom: 30rpx;
|
|
}
|
|
.title {
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
color: #303133;
|
|
}
|
|
.card {
|
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.card-title {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #606266;
|
|
}
|
|
.env-tag {
|
|
font-size: 24rpx;
|
|
padding: 6rpx 20rpx;
|
|
border-radius: 4rpx;
|
|
}
|
|
.tag-orange { background-color: #fdf6ec; color: #e6a23c; }
|
|
.tag-blue { background-color: #ecf5ff; color: #409eff; }
|
|
|
|
.form-group {
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.label {
|
|
font-size: 26rpx;
|
|
color: #909399;
|
|
margin-bottom: 12rpx;
|
|
display: block;
|
|
}
|
|
.input {
|
|
border: 1rpx solid #dcdfe6;
|
|
padding: 16rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
.checkbox-item {
|
|
font-size: 26rpx;
|
|
color: #606266;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
}
|
|
.add-link {
|
|
font-size: 24rpx;
|
|
color: #409eff;
|
|
}
|
|
.carrier-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20rpx 0;
|
|
border-bottom: 1rpx solid #f2f6fc;
|
|
}
|
|
.carrier-name {
|
|
font-size: 28rpx;
|
|
color: #303133;
|
|
display: block;
|
|
}
|
|
.carrier-meta {
|
|
font-size: 22rpx;
|
|
color: #909399;
|
|
}
|
|
.save-btn {
|
|
background-color: #409eff;
|
|
color: #fff;
|
|
margin-top: 40rpx;
|
|
border-radius: 12rpx;
|
|
}
|
|
</style>
|