473 lines
13 KiB
Vue
473 lines
13 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar :title="navTitle" :border-bottom="false" :background="bgc" back-icon-color="#111827" title-color="#111827" title-size="34" height="44"></u-navbar>
|
||
|
||
<view class="summary-card" v-if="form.abilityName || form.areaName">
|
||
<text class="summary-name">{{ form.abilityName || '--' }}</text>
|
||
<text class="summary-area">{{ form.areaName || '--' }}</text>
|
||
</view>
|
||
|
||
<view class="page-loading" v-if="loading">加载中...</view>
|
||
|
||
<scroll-view v-else scroll-y class="form-scroll">
|
||
<!-- 基础设置 -->
|
||
<view class="section">
|
||
<view class="section-head">
|
||
<view class="section-bar"></view>
|
||
<text class="section-title">基础设置</text>
|
||
</view>
|
||
<view class="switch-row">
|
||
<view class="switch-info">
|
||
<text class="switch-title">启用能力</text>
|
||
<text class="switch-desc">关闭后该能力不可用</text>
|
||
</view>
|
||
<switch :checked="!!form.enabled" color="#4297F3" data-field="enabled" @change="onFormSwitch" />
|
||
</view>
|
||
<!-- <view class="switch-row">
|
||
<view class="switch-info">
|
||
<text class="switch-title">免费使用</text>
|
||
<text class="switch-desc">开启后免费，关闭则按套餐收费</text>
|
||
</view>
|
||
<switch :checked="!!form.free" color="#4297F3" data-field="free" @change="onFormSwitch" />
|
||
</view> -->
|
||
<view class="switch-row">
|
||
<view class="switch-info">
|
||
<text class="switch-title">用量预警</text>
|
||
<text class="switch-desc">剩余次数不足时提醒</text>
|
||
</view>
|
||
<switch :checked="!!form.enableWarn" color="#4297F3" data-field="enableWarn" @change="onFormSwitch" />
|
||
</view>
|
||
<view class="form-field" v-if="form.enableWarn">
|
||
<text class="field-label">预警阈值</text>
|
||
<text class="field-tip">剩余次数低于该值时将触发预警</text>
|
||
<view class="input-box">
|
||
<input class="field-input" type="number" v-model="form.warnCount" placeholder="请输入预警阈值" />
|
||
<text class="field-unit">次</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 团购设置 -->
|
||
<view class="section" v-if="isCouponVerify">
|
||
<view class="section-head">
|
||
<view class="section-bar"></view>
|
||
<text class="section-title">团购设置</text>
|
||
</view>
|
||
<view class="form-field">
|
||
<text class="field-label">抖音门店</text>
|
||
<text class="field-tip">抖音生活服务门店 POI ID，登录抖音来客后在门店管理查看</text>
|
||
<view class="input-box input-box--block">
|
||
<input class="field-input" v-model="form.settings.douyinPoiId" placeholder="请输入抖音门店 POI ID" />
|
||
</view>
|
||
</view>
|
||
<view class="form-field">
|
||
<text class="field-label">抖音根账户</text>
|
||
<text class="field-tip">抖音根账户 ID，登录抖音来客后在右上角账户管理查看</text>
|
||
<view class="input-box input-box--block">
|
||
<input class="field-input" v-model="form.settings.douyinAccountId" placeholder="请输入抖音根账户 ID" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 保障设置 -->
|
||
<view class="section" v-if="isInsurance">
|
||
<view class="section-head">
|
||
<view class="section-bar"></view>
|
||
<text class="section-title">保障设置</text>
|
||
</view>
|
||
<view class="switch-row">
|
||
<view class="switch-info">
|
||
<text class="switch-title">强制投保</text>
|
||
<text class="switch-desc">开启后用户下单强制购买保险</text>
|
||
</view>
|
||
<switch :checked="!!form.settings.insuranceRequired" color="#4297F3" data-field="insuranceRequired" @change="onSettingsSwitch" />
|
||
</view>
|
||
<view class="form-field">
|
||
<text class="field-label">定价</text>
|
||
<text class="field-tip">自定义保险价格</text>
|
||
<view class="input-box">
|
||
<input class="field-input" type="digit" v-model="form.settings.insurancePrice" placeholder="请输入定价" />
|
||
<text class="field-unit">元/次</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 实名设置 -->
|
||
<view class="section" v-if="isRealName">
|
||
<view class="section-head">
|
||
<view class="section-bar"></view>
|
||
<text class="section-title">实名设置</text>
|
||
</view>
|
||
<view class="form-field">
|
||
<text class="field-label">最低年龄</text>
|
||
<text class="field-tip">若无需校验可填 0</text>
|
||
<view class="input-box">
|
||
<input class="field-input" type="number" v-model="form.settings.minAge" placeholder="请输入最低用车年龄" />
|
||
<text class="field-unit">岁</text>
|
||
</view>
|
||
</view>
|
||
<view class="form-field">
|
||
<text class="field-label">最高年龄</text>
|
||
<text class="field-tip">若无需校验可填 1000</text>
|
||
<view class="input-box">
|
||
<input class="field-input" type="number" v-model="form.settings.maxAge" placeholder="请输入最高用车年龄" />
|
||
<text class="field-unit">岁</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="scroll-bottom-space"></view>
|
||
</scroll-view>
|
||
|
||
<view class="footer-bar" v-if="!loading">
|
||
<view hover-class="app-tap-hover" class="footer-btn footer-btn--ghost" @tap="goBack">取消</view>
|
||
<view hover-class="app-tap-hover" class="footer-btn footer-btn--primary" @tap="submitForm">
|
||
<text>保存</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { AbilityCode } from '@/common/enums/ability.js'
|
||
|
||
const DEFAULT_SETTINGS = {
|
||
douyinPoiId: '',
|
||
douyinAccountId: '',
|
||
insuranceRequired: false,
|
||
insurancePrice: '',
|
||
minAge: '',
|
||
maxAge: ''
|
||
}
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: { backgroundColor: '#fff' },
|
||
AbilityCode,
|
||
id: '',
|
||
loading: false,
|
||
submitting: false,
|
||
form: {
|
||
id: null,
|
||
enabled: true,
|
||
free: false,
|
||
enableWarn: true,
|
||
warnCount: 100,
|
||
abilityCode: '',
|
||
abilityName: '',
|
||
areaName: '',
|
||
settings: { ...DEFAULT_SETTINGS }
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
navTitle() {
|
||
return '能力设置'
|
||
},
|
||
isCouponVerify() {
|
||
return this.form.abilityCode === AbilityCode.COUPON_VERIFY
|
||
},
|
||
isInsurance() {
|
||
return this.form.abilityCode === AbilityCode.INSURANCE
|
||
},
|
||
isRealName() {
|
||
return this.form.abilityCode === AbilityCode.REAL_NAME
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
this.id = e.id || e.areaAbilityId || ''
|
||
if (e.abilityCode) {
|
||
this.form.abilityCode = decodeURIComponent(e.abilityCode)
|
||
}
|
||
if (e.abilityName) {
|
||
this.form.abilityName = decodeURIComponent(e.abilityName)
|
||
}
|
||
if (e.areaName) {
|
||
this.form.areaName = decodeURIComponent(e.areaName)
|
||
}
|
||
this.fetchDetail()
|
||
},
|
||
methods: {
|
||
goBack() {
|
||
uni.navigateBack()
|
||
},
|
||
normalizeForm(data) {
|
||
const row = data || {}
|
||
const settings = {
|
||
...DEFAULT_SETTINGS,
|
||
...(row.settings || {})
|
||
}
|
||
if (settings.insuranceRequired === 1 || settings.insuranceRequired === '1') {
|
||
settings.insuranceRequired = true
|
||
}
|
||
if (settings.insuranceRequired === 0 || settings.insuranceRequired === '0') {
|
||
settings.insuranceRequired = false
|
||
}
|
||
return {
|
||
...row,
|
||
id: row.id,
|
||
enabled: row.enabled === true || row.enabled === 1 || row.enabled === '1',
|
||
free: row.free === true || row.free === 1 || row.free === '1',
|
||
enableWarn: row.enableWarn === true || row.enableWarn === 1 || row.enableWarn === '1',
|
||
warnCount: row.warnCount != null && row.warnCount !== '' ? row.warnCount : 100,
|
||
abilityCode: row.abilityCode || this.form.abilityCode || '',
|
||
abilityName: row.abilityName || this.form.abilityName || '',
|
||
areaName: row.areaName || this.form.areaName || '',
|
||
settings
|
||
}
|
||
},
|
||
fetchDetail() {
|
||
if (!this.id) {
|
||
uni.showToast({ title: '缺少能力ID', icon: 'none' })
|
||
return
|
||
}
|
||
this.loading = true
|
||
this.$u
|
||
.get(`/bst/areaAbility/${this.id}`)
|
||
.then((res) => {
|
||
if (res.code == 200 && res.data) {
|
||
this.form = this.normalizeForm(res.data)
|
||
} else {
|
||
uni.showToast({ title: res.msg || '加载失败', icon: 'none' })
|
||
}
|
||
})
|
||
.catch(() => {
|
||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||
})
|
||
.finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
onFormSwitch(e) {
|
||
const field = e.currentTarget.dataset.field
|
||
if (!field) return
|
||
this.$set(this.form, field, !!(e && e.detail && e.detail.value))
|
||
},
|
||
onSettingsSwitch(e) {
|
||
const field = e.currentTarget.dataset.field
|
||
if (!field) return
|
||
this.$set(this.form.settings, field, !!(e && e.detail && e.detail.value))
|
||
},
|
||
validateForm() {
|
||
if (this.form.enableWarn) {
|
||
const n = Number(this.form.warnCount)
|
||
if (!Number.isFinite(n) || this.form.warnCount === '' || this.form.warnCount == null) {
|
||
uni.showToast({ title: '请输入用量预警阈值', icon: 'none' })
|
||
return false
|
||
}
|
||
}
|
||
return true
|
||
},
|
||
buildSubmitData() {
|
||
const data = {
|
||
...this.form,
|
||
settings: { ...this.form.settings }
|
||
}
|
||
if (data.warnCount != null && data.warnCount !== '') {
|
||
data.warnCount = Number(data.warnCount)
|
||
}
|
||
return data
|
||
},
|
||
submitForm() {
|
||
if (this.submitting) return
|
||
if (!this.validateForm()) return
|
||
this.submitting = true
|
||
uni.showLoading({ title: '保存中...', mask: true })
|
||
this.$u
|
||
.put('/bst/areaAbility', this.buildSubmitData())
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||
const pages = getCurrentPages()
|
||
const prev = pages[pages.length - 2]
|
||
if (prev && prev.$vm) {
|
||
prev.$vm._needRefresh = true
|
||
}
|
||
setTimeout(() => uni.navigateBack(), 500)
|
||
} else {
|
||
uni.showToast({ title: res.msg || '保存失败', icon: 'none' })
|
||
}
|
||
})
|
||
.catch(() => {
|
||
uni.showToast({ title: '保存失败', icon: 'none' })
|
||
})
|
||
.finally(() => {
|
||
this.submitting = false
|
||
uni.hideLoading()
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #f6f8fa;
|
||
height: 100%;
|
||
}
|
||
.page {
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
.summary-card {
|
||
flex-shrink: 0;
|
||
margin: 16rpx 24rpx 0;
|
||
padding: 20rpx 24rpx;
|
||
background: #fff;
|
||
border-radius: 12rpx;
|
||
border: 1rpx solid #eef2f7;
|
||
}
|
||
.summary-name {
|
||
display: block;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #111827;
|
||
}
|
||
.summary-area {
|
||
display: block;
|
||
margin-top: 6rpx;
|
||
font-size: 24rpx;
|
||
color: #9ca3af;
|
||
}
|
||
.page-loading {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
color: #9ca3af;
|
||
}
|
||
.form-scroll {
|
||
flex: 1;
|
||
height: 0;
|
||
padding: 16rpx 24rpx 0;
|
||
box-sizing: border-box;
|
||
}
|
||
.section {
|
||
background: #fff;
|
||
border-radius: 12rpx;
|
||
padding: 20rpx 24rpx;
|
||
margin-bottom: 16rpx;
|
||
border: 1rpx solid #eef2f7;
|
||
}
|
||
.section-head {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
padding-bottom: 12rpx;
|
||
border-bottom: 1rpx solid #f3f4f6;
|
||
}
|
||
.section-bar {
|
||
width: 6rpx;
|
||
height: 28rpx;
|
||
background: #4297F3;
|
||
border-radius: 4rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
.section-title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #111827;
|
||
}
|
||
.switch-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16rpx 0;
|
||
border-bottom: 1rpx solid #f9fafb;
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
.switch-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
padding-right: 16rpx;
|
||
}
|
||
.switch-title {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: #111827;
|
||
font-weight: 500;
|
||
}
|
||
.switch-desc {
|
||
display: block;
|
||
margin-top: 4rpx;
|
||
font-size: 22rpx;
|
||
color: #9ca3af;
|
||
line-height: 1.4;
|
||
}
|
||
.form-field {
|
||
padding: 12rpx 0 4rpx;
|
||
}
|
||
.field-label {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #374151;
|
||
}
|
||
.field-tip {
|
||
display: block;
|
||
margin-top: 6rpx;
|
||
font-size: 22rpx;
|
||
color: #9ca3af;
|
||
line-height: 1.45;
|
||
}
|
||
.input-box {
|
||
margin-top: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #f8fafc;
|
||
border: 1rpx solid #e5e7eb;
|
||
border-radius: 10rpx;
|
||
padding: 0 20rpx;
|
||
min-height: 72rpx;
|
||
}
|
||
.input-box--block {
|
||
padding: 12rpx 20rpx;
|
||
}
|
||
.field-input {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #111827;
|
||
min-height: 48rpx;
|
||
}
|
||
.field-unit {
|
||
flex-shrink: 0;
|
||
margin-left: 12rpx;
|
||
font-size: 26rpx;
|
||
color: #6b7280;
|
||
}
|
||
.scroll-bottom-space {
|
||
height: 140rpx;
|
||
}
|
||
.footer-bar {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
gap: 20rpx;
|
||
padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
|
||
background: #fff;
|
||
box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||
}
|
||
.footer-btn {
|
||
flex: 1;
|
||
height: 84rpx;
|
||
line-height: 84rpx;
|
||
text-align: center;
|
||
border-radius: 42rpx;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
}
|
||
.footer-btn--ghost {
|
||
background: #f3f4f6;
|
||
color: #374151;
|
||
}
|
||
.footer-btn--primary {
|
||
background: linear-gradient(135deg, #4297F3 0%, #2b76e5 100%);
|
||
color: #fff;
|
||
}
|
||
</style>
|