587 lines
24 KiB
Vue
587 lines
24 KiB
Vue
<template>
|
||
<business-page-layout :title="pageTitle" :show-back="true">
|
||
|
||
<!-- 顶部步骤条 -->
|
||
<view v-if="!submitSuccess" class="step-header">
|
||
<u-steps :list="stepList" :current="currentStep" active-color="#6acdbb"></u-steps>
|
||
</view>
|
||
|
||
<scroll-view v-if="!submitSuccess" scroll-y class="form-scroll">
|
||
<u-form :model="form" ref="uForm" label-width="220" label-align="left">
|
||
|
||
<!-- ================= 步骤 1：基础与地址 ================= -->
|
||
<view v-show="currentStep === 0" class="step-content">
|
||
<view class="section-title">基础信息</view>
|
||
<u-form-item label="门店名称" :required="true">
|
||
<u-input v-model="form.name" placeholder="请输入门店名称" />
|
||
</u-form-item>
|
||
<u-form-item label="门店类型" right-icon="arrow-right" :required="true">
|
||
<u-input :value="storeTypeLabel" type="select" @click="showStoreType = true" placeholder="请选择" />
|
||
<u-select v-model="showStoreType" :list="storeTypes" @confirm="onStoreTypeConfirm"></u-select>
|
||
</u-form-item>
|
||
<u-form-item label="联系人姓名" :required="true">
|
||
<u-input v-model="form.contact" placeholder="请输入联系人姓名" />
|
||
</u-form-item>
|
||
<u-form-item label="手机号" :required="true">
|
||
<u-input v-model="form.mobile" type="number" placeholder="请输入联系人手机号" />
|
||
</u-form-item>
|
||
<u-form-item label="业务员" :required="true" class="form-item-promoter" :border-bottom="false">
|
||
<promoter-picker
|
||
:value="form.code"
|
||
:options="promoterOptions"
|
||
:loading="promoterLoading"
|
||
:disabled="promoterDisabled"
|
||
@input="form.code = $event"
|
||
/>
|
||
</u-form-item>
|
||
|
||
<u-form-item label="诊所类型" :border-bottom="false">
|
||
<view class="clinic-type-cards">
|
||
<view
|
||
v-for="(item, idx) in clinicTypes"
|
||
:key="item.value"
|
||
class="clinic-type-card"
|
||
:class="{ active: clinicTypeIndex === idx }"
|
||
@click="selectClinicType(idx)"
|
||
>
|
||
<text class="clinic-type-label">{{ item.label }}</text>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
|
||
<u-form-item label="是否包邮">
|
||
<view class="switch-row">
|
||
<text class="switch-hint">{{ Number(form.is_shipping_free) === 1 ? '包邮' : '不包邮' }}</text>
|
||
<switch
|
||
:checked="Number(form.is_shipping_free) === 1"
|
||
color="#6acdbb"
|
||
@change="onShippingFreeChange"
|
||
/>
|
||
</view>
|
||
</u-form-item>
|
||
|
||
<u-form-item label="订阅价格波动">
|
||
<view class="switch-row">
|
||
<text class="switch-hint">{{ Number(form.subscribe_price_change) === 0 ? '订阅' : '不订阅' }}</text>
|
||
<switch
|
||
:checked="Number(form.subscribe_price_change) === 0"
|
||
color="#6acdbb"
|
||
@change="onSubscribeChange"
|
||
/>
|
||
</view>
|
||
</u-form-item>
|
||
|
||
<u-form-item label="营业时间" right-icon="arrow-right">
|
||
<view class="time-flex">
|
||
<view class="time-box" @click="showStartTime = true">{{ form.start_time || '开始时间' }}</view>
|
||
<text class="time-sep">-</text>
|
||
<view class="time-box" @click="showEndTime = true">{{ form.end_time || '结束时间' }}</view>
|
||
</view>
|
||
<u-picker mode="time" v-model="showStartTime" :params="{ hour: true, minute: true }" @confirm="e => onTimeConfirm('start_time', e)"></u-picker>
|
||
<u-picker mode="time" v-model="showEndTime" :params="{ hour: true, minute: true }" @confirm="e => onTimeConfirm('end_time', e)"></u-picker>
|
||
</u-form-item>
|
||
|
||
<view class="section-title">地址信息</view>
|
||
<u-form-item label="省市区" :required="true">
|
||
<region-address-picker :value="regionValue" @change="onRegionChange" />
|
||
</u-form-item>
|
||
<u-form-item label="详细地址" :required="true">
|
||
<u-input v-model="form.position" placeholder="请输入详细地址" />
|
||
</u-form-item>
|
||
</view>
|
||
|
||
<!-- ================= 步骤 2：资料与比例 ================= -->
|
||
<view v-show="currentStep === 1" class="step-content">
|
||
<view class="section-title">图片资料</view>
|
||
|
||
<view class="upload-group">
|
||
<view class="upload-label">公章</view>
|
||
<view class="img-row">
|
||
<image v-if="form.see_rate" :src="form.see_rate" class="thumb" mode="aspectFill" @click="uploadField('see_rate')" />
|
||
<view v-else class="upload-btn" @click="uploadField('see_rate')">
|
||
<u-icon name="plus" size="40" color="#999"></u-icon>
|
||
<text class="upload-txt">上传公章</text>
|
||
</view>
|
||
</view>
|
||
<text class="gallery-link" @click="pickFromGallery('see_rate')">从图库选择</text>
|
||
</view>
|
||
|
||
<view class="upload-group">
|
||
<view class="upload-label"><text class="required">*</text>轮播图</view>
|
||
<view class="img-list">
|
||
<image v-for="(u, i) in form.url" :key="i" :src="u" class="thumb" mode="aspectFill" />
|
||
<view class="upload-btn" @click="uploadCarousel">
|
||
<u-icon name="plus" size="40" color="#999"></u-icon>
|
||
</view>
|
||
</view>
|
||
<text class="gallery-link" @click="pickCarouselFromGallery">从图库选择</text>
|
||
</view>
|
||
|
||
<view class="upload-group">
|
||
<view class="upload-label">合同文件 (已传 {{ form.contract_files.length }} 个)</view>
|
||
<view class="upload-btn contract-btn" @click="uploadContract">
|
||
<u-icon name="file-text" size="40" color="#6acdbb"></u-icon>
|
||
<text class="upload-txt" style="color: #6acdbb;">添加合同</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="section-title">销售比例</view>
|
||
<u-form-item label="中药采购比例(%)">
|
||
<u-input v-model.number="form.z_buy_percent" type="digit" placeholder="请输入比例" />
|
||
</u-form-item>
|
||
<u-form-item label="中药销售比例(%)">
|
||
<u-input v-model.number="form.z_sale_percent" type="digit" placeholder="请输入比例" />
|
||
</u-form-item>
|
||
</view>
|
||
|
||
<!-- ================= 步骤 3：结算信息（可选） ================= -->
|
||
<view v-show="currentStep === 2" class="step-content">
|
||
<view class="section-title">银行卡信息</view>
|
||
<view class="step-tip">可选填写；也可在审核通过后于详情页单独报备</view>
|
||
<u-form-item label="账户类型" right-icon="arrow-right">
|
||
<u-input :value="bankTypes[bankTypeIndex].label" type="select" @click="showBankType = true" placeholder="请选择" />
|
||
<u-select v-model="showBankType" :list="bankTypes" @confirm="onBankTypeConfirm"></u-select>
|
||
</u-form-item>
|
||
<u-form-item label="开户人姓名">
|
||
<u-input v-model="form.bank_user_name" placeholder="请输入开户人姓名" />
|
||
</u-form-item>
|
||
<u-form-item label="银行卡号">
|
||
<u-input v-model="form.bank_card" type="number" placeholder="请输入银行卡号" />
|
||
</u-form-item>
|
||
<u-form-item label="开户行">
|
||
<u-input v-model="form.bank_name" placeholder="请输入开户行名称 (如: 招商银行)" />
|
||
</u-form-item>
|
||
<u-form-item label="银联行号">
|
||
<u-input v-model="form.bank_no" type="number" placeholder="选填，请输入行号" />
|
||
</u-form-item>
|
||
</view>
|
||
|
||
</u-form>
|
||
|
||
|
||
</scroll-view>
|
||
|
||
<view v-if="submitSuccess" class="success-panel">
|
||
<u-icon name="checkmark-circle-fill" color="#6acdbb" size="120"></u-icon>
|
||
<text class="success-title">提交成功</text>
|
||
<text class="success-sub">{{ form.name || '门店' }} 已提交，等待审核</text>
|
||
<view class="success-actions">
|
||
<u-button type="primary" :custom-style="primaryStyle" @click="goDoctorInput">录入医生</u-button>
|
||
<u-button @click="goBackList">返回列表</u-button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部操作按钮 -->
|
||
<view v-if="!submitSuccess" class="footer-actions">
|
||
<u-button v-if="canSaveDraft" class="btn-draft" @click="openSaveDraft">存草稿</u-button>
|
||
<u-button v-if="currentStep > 0" class="btn-prev" @click="prevStep">上一步</u-button>
|
||
<u-button v-if="currentStep < 2" class="btn-next" type="primary" :custom-style="primaryStyle" @click="nextStep">下一步</u-button>
|
||
<u-button v-if="currentStep === 2" class="btn-submit" type="primary" :custom-style="primaryStyle" @click="submit">确认保存</u-button>
|
||
</view>
|
||
|
||
<u-popup v-model="showDraftNameModal" mode="center" border-radius="16" width="600rpx">
|
||
<view class="draft-name-box">
|
||
<text class="draft-name-title">草稿名称</text>
|
||
<u-input v-model="draftNameInput" placeholder="请输入草稿名称" />
|
||
<view class="draft-name-actions">
|
||
<u-button size="medium" @click="showDraftNameModal = false">取消</u-button>
|
||
<u-button size="medium" type="primary" :custom-style="primaryStyle" @click="confirmSaveDraft">保存</u-button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</business-page-layout>
|
||
</template>
|
||
|
||
<script>
|
||
import BusinessPageLayout from '@/subPackages/sub_salesperson/components/business-page-layout.vue'
|
||
import RegionAddressPicker from '@/subPackages/sub_salesperson/components/RegionAddressPicker.vue'
|
||
import PromoterPicker from '@/subPackages/sub_salesperson/components/PromoterPicker.vue'
|
||
import businessMixin from '@/subPackages/sub_salesperson/common/businessMixin.js'
|
||
import { getInputBusinessContext } from '@/subPackages/sub_salesperson/common/context.js'
|
||
import { pickAndUploadImage, openGalleryPick, createDefaultStoreInputForm } from '@/subPackages/sub_salesperson/common/inputFormHelpers.js'
|
||
import { getDraft, saveDraft, removeDraft } from '@/subPackages/sub_salesperson/common/inputDraftStorage.js'
|
||
import { serializeStoreDraft, applyStoreDraft } from '@/subPackages/sub_salesperson/common/inputDraftHelpers.js'
|
||
import { goDoctorInputFromStore } from '@/subPackages/sub_salesperson/common/inputNavigation.js'
|
||
|
||
export default {
|
||
mixins: [businessMixin],
|
||
components: { BusinessPageLayout, RegionAddressPicker, PromoterPicker },
|
||
provide() {
|
||
return { businessContext: getInputBusinessContext() }
|
||
},
|
||
data() {
|
||
return {
|
||
id: 0,
|
||
submitSuccess: false,
|
||
lastCreatedStoreInputId: 0,
|
||
currentDraftId: '',
|
||
showDraftNameModal: false,
|
||
draftNameInput: '',
|
||
|
||
// 分步表单状态
|
||
currentStep: 0,
|
||
stepList: [
|
||
{ name: '基础与地址' },
|
||
{ name: '资料与比例' },
|
||
{ name: '结算信息' }
|
||
],
|
||
|
||
// 样式
|
||
primaryStyle: {
|
||
backgroundColor: '#6acdbb',
|
||
color: '#ffffff',
|
||
borderColor: '#6acdbb'
|
||
},
|
||
|
||
// uView select/picker 显示状态控制
|
||
showStoreType: false,
|
||
showStartTime: false,
|
||
showEndTime: false,
|
||
showBankType: false,
|
||
|
||
clinicTypeIndex: 0,
|
||
bankTypeIndex: 0,
|
||
|
||
// uView 格式的下拉数据
|
||
storeTypes: [{ label: '诊所', value: 0 }, { label: '药店', value: 1 }],
|
||
storeTypeIndex: 0,
|
||
clinicTypes: [{ label: '西医诊所', value: 1 }, { label: '中医诊所', value: 2 }],
|
||
bankTypes: [{ label: '对公', value: 1 }, { label: '对私', value: 2 }, { label: '存折', value: 5 }],
|
||
|
||
form: createDefaultStoreInputForm(),
|
||
promoterOptions: [],
|
||
promoterLoading: false,
|
||
promoterDisabled: false,
|
||
}
|
||
},
|
||
computed: {
|
||
pageTitle() { return this.id ? '编辑门店录入' : '新建门店录入' },
|
||
storeTypeLabel() {
|
||
const item = this.storeTypes.find((t) => t.value === Number(this.form.type))
|
||
return item ? item.label : '请选择'
|
||
},
|
||
canSaveDraft() { return !this.id },
|
||
regionValue() {
|
||
const p = this.form.province_id
|
||
const c = this.form.city_id
|
||
if (!p || !c) return []
|
||
return [Number(p), Number(c)]
|
||
},
|
||
},
|
||
onLoad(q) {
|
||
this.id = Number(q.id || 0)
|
||
const draftId = q.draftId || ''
|
||
if (draftId) {
|
||
this.currentDraftId = draftId
|
||
}
|
||
if (this.id) {
|
||
Promise.all([
|
||
this.loadPromoterOptions(),
|
||
this.loadDetailAsync(),
|
||
])
|
||
return
|
||
}
|
||
if (draftId) {
|
||
this.loadPromoterOptions().then(() => {
|
||
this.loadDraft(draftId)
|
||
})
|
||
return
|
||
}
|
||
this.loadPromoterOptions()
|
||
},
|
||
methods: {
|
||
loadPromoterOptions() {
|
||
this.promoterLoading = true
|
||
return this.bizApi.getPromoterOptions().then((w) => {
|
||
this.promoterLoading = false
|
||
if (!w.ok) return
|
||
this.promoterOptions = Array.isArray(w.data) ? w.data : []
|
||
if (!this.id && !this.form.code) {
|
||
const userKey = this.bizCtx.userStorageKey || 'salesperson_user'
|
||
const user = uni.getStorageSync(userKey) || {}
|
||
const roleId = Number(user.role_id || (user.roles && user.roles.id) || 0)
|
||
if (roleId === 6) {
|
||
const self = this.promoterOptions.find((p) => Number(p.id) === Number(user.id))
|
||
if (self) {
|
||
this.form.code = self.code
|
||
this.promoterDisabled = true
|
||
}
|
||
}
|
||
}
|
||
}).catch(() => { this.promoterLoading = false })
|
||
},
|
||
loadDetailAsync() {
|
||
return this.bizApi.getStoreInputDetail(this.id).then((w) => {
|
||
if (!w.ok || !w.data) return
|
||
const d = w.data
|
||
Object.assign(this.form, createDefaultStoreInputForm(), d)
|
||
this.form.url = Array.isArray(d.url) ? d.url : (d.pic ? [d.pic] : [])
|
||
this.form.contract_files = d.contract_files || []
|
||
this.form.province_id = d.province_id || null
|
||
this.form.city_id = d.city_id || null
|
||
this.form.address = d.province_id && d.city_id ? [d.province_id, d.city_id] : []
|
||
this.storeTypeIndex = Number(d.type) === 1 ? 1 : 0
|
||
this.clinicTypeIndex = Number(d.clinic_type) === 1 ? 0 : 1
|
||
this.bankTypeIndex = Math.max(0, this.bankTypes.findIndex((b) => b.value === Number(d.bank_account_type)))
|
||
})
|
||
},
|
||
|
||
selectClinicType(idx) {
|
||
this.clinicTypeIndex = idx
|
||
this.form.clinic_type = this.clinicTypes[idx].value
|
||
},
|
||
onShippingFreeChange(e) {
|
||
this.form.is_shipping_free = e.detail.value ? 1 : 0
|
||
},
|
||
onSubscribeChange(e) {
|
||
this.form.subscribe_price_change = e.detail.value ? 0 : 1
|
||
},
|
||
|
||
// --- 下拉及选择器确认事件 ---
|
||
onStoreTypeConfirm(e) {
|
||
const selected = e[0]
|
||
this.form.type = selected.value
|
||
this.storeTypeIndex = this.storeTypes.findIndex((item) => item.value === selected.value)
|
||
},
|
||
onBankTypeConfirm(e) {
|
||
const selected = e[0];
|
||
this.form.bank_account_type = selected.value;
|
||
this.bankTypeIndex = this.bankTypes.findIndex(item => item.value === selected.value);
|
||
},
|
||
onTimeConfirm(field, e) {
|
||
this.form[field] = `${e.hour}:${e.minute}`;
|
||
},
|
||
onRegionChange(val) {
|
||
if (!val || val.length < 2) return
|
||
this.form.province_id = val[0]
|
||
this.form.city_id = val[1]
|
||
this.form.address = [val[0], val[1]]
|
||
},
|
||
|
||
// --- 图片上传相关 ---
|
||
uploadField(field) {
|
||
pickAndUploadImage().then(url => { this.form[field] = url }).catch(() => {})
|
||
},
|
||
pickFromGallery(field) {
|
||
openGalleryPick().then(url => { this.form[field] = url }).catch(() => {})
|
||
},
|
||
pickCarouselFromGallery() {
|
||
openGalleryPick().then(url => { this.form.url.push(url) }).catch(() => {})
|
||
},
|
||
uploadCarousel() {
|
||
pickAndUploadImage().then(url => { this.form.url.push(url) }).catch(() => {})
|
||
},
|
||
uploadContract() {
|
||
pickAndUploadImage().then(url => {
|
||
this.form.contract_files.push({ url, name: 'contract' })
|
||
}).catch(() => {})
|
||
},
|
||
|
||
loadDraft(draftId) {
|
||
const draft = getDraft('store', draftId)
|
||
if (!draft) {
|
||
uni.showToast({ title: '草稿不存在', icon: 'none' })
|
||
this.currentDraftId = ''
|
||
return
|
||
}
|
||
applyStoreDraft(this, draft)
|
||
},
|
||
openSaveDraft() {
|
||
const defaultName = (this.form.name || '').trim() || '未命名草稿'
|
||
this.draftNameInput = defaultName
|
||
this.showDraftNameModal = true
|
||
},
|
||
confirmSaveDraft() {
|
||
const name = (this.draftNameInput || '').trim()
|
||
if (!name) {
|
||
uni.showToast({ title: '请输入草稿名称', icon: 'none' })
|
||
return
|
||
}
|
||
try {
|
||
const { form, ui } = serializeStoreDraft(this)
|
||
const saved = saveDraft('store', {
|
||
name,
|
||
form,
|
||
ui,
|
||
draftId: this.currentDraftId || undefined,
|
||
})
|
||
this.currentDraftId = saved.id
|
||
this.showDraftNameModal = false
|
||
uni.showToast({ title: '草稿已保存', icon: 'success' })
|
||
} catch (e) {
|
||
uni.showToast({ title: e.message || '保存失败', icon: 'none' })
|
||
}
|
||
},
|
||
|
||
// --- 分步与验证逻辑 ---
|
||
nextStep() {
|
||
if (this.validateCurrentStep()) {
|
||
this.currentStep += 1;
|
||
}
|
||
},
|
||
prevStep() {
|
||
this.currentStep -= 1;
|
||
},
|
||
|
||
validateCurrentStep() {
|
||
const f = this.form;
|
||
// 第1步校验
|
||
if (this.currentStep === 0) {
|
||
if (!f.name?.trim()) return this.showError('请输入门店名称');
|
||
if (f.type !== 0 && f.type !== 1) return this.showError('请选择门店类型');
|
||
if (!f.contact?.trim()) return this.showError('请输入联系人姓名');
|
||
if (!f.mobile?.trim()) return this.showError('请输入手机号');
|
||
if (!f.code?.trim()) return this.showError('请选择业务员');
|
||
if (!f.province_id || !f.city_id) return this.showError('请选择省市区');
|
||
if (!f.position?.trim()) return this.showError('请输入详细地址');
|
||
}
|
||
// 第2步校验
|
||
if (this.currentStep === 1) {
|
||
if (!f.url.length) return this.showError('请至少上传一张轮播图');
|
||
}
|
||
return true;
|
||
},
|
||
|
||
showError(msg) {
|
||
uni.showToast({ title: msg, icon: 'none' });
|
||
return false;
|
||
},
|
||
|
||
validateOptionalBankFields() {
|
||
const f = this.form
|
||
const hasAny = !!(f.bank_user_name?.trim() || f.bank_card?.trim() || f.bank_name?.trim() || f.bank_no?.trim())
|
||
if (!hasAny) return true
|
||
if (!f.bank_user_name?.trim()) return this.showError('填写银行卡时请填写开户人姓名')
|
||
if (!f.bank_card?.trim()) return this.showError('填写银行卡时请填写卡号')
|
||
if (!f.bank_name?.trim()) return this.showError('填写银行卡时请填写开户行')
|
||
return true
|
||
},
|
||
|
||
// --- 最终提交 ---
|
||
submit() {
|
||
if (!this.validateOptionalBankFields()) return
|
||
|
||
const payload = {
|
||
...this.form,
|
||
type: Number(this.form.type) === 1 ? 1 : 0,
|
||
address: [Number(this.form.province_id), Number(this.form.city_id)],
|
||
}
|
||
delete payload.erp_id
|
||
delete payload.mes_id
|
||
|
||
const req = this.id
|
||
? this.bizApi.updateStoreInput({ ...payload, id: this.id })
|
||
: this.bizApi.createStoreInput(payload)
|
||
|
||
req.then(w => {
|
||
if (w.ok) {
|
||
if (this.currentDraftId) {
|
||
removeDraft('store', this.currentDraftId)
|
||
this.currentDraftId = ''
|
||
}
|
||
if (this.id) {
|
||
uni.showToast({ title: '已保存', icon: 'success' })
|
||
setTimeout(() => uni.navigateBack(), 500)
|
||
return
|
||
}
|
||
const newId = (w.data && w.data.id) || 0
|
||
this.lastCreatedStoreInputId = Number(newId)
|
||
this.submitSuccess = true
|
||
uni.showToast({ title: '提交成功', icon: 'success' })
|
||
}
|
||
})
|
||
},
|
||
goDoctorInput() {
|
||
goDoctorInputFromStore(this.lastCreatedStoreInputId, this.bizCtx)
|
||
},
|
||
goBackList() {
|
||
uni.navigateBack()
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.form-item-promoter ::v-deep .u-form-item__body {
|
||
overflow: visible;
|
||
}
|
||
.form-item-promoter ::v-deep .u-form-item--left__content__slot {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
/* 容器及结构 */
|
||
.step-header { background-color: #fff; padding: 30rpx 40rpx; margin-bottom: 20rpx; }
|
||
.form-scroll { height: calc(100vh - 480rpx); box-sizing: border-box; }
|
||
.step-content { background: #fff; padding: 0 32rpx; border-radius: 16rpx; margin: 0 24rpx; }
|
||
|
||
/* 标题 */
|
||
.section-title { font-size: 32rpx; font-weight: 600; padding: 40rpx 0 20rpx; color: #1D2129; position: relative; }
|
||
.step-tip { font-size: 24rpx; color: #86909c; margin: -8rpx 0 16rpx; line-height: 1.5; }
|
||
.section-title::after { content: ''; position: absolute; left: -32rpx; top: 46rpx; width: 8rpx; height: 32rpx; background: #6acdbb; border-radius: 0 4rpx 4rpx 0; }
|
||
|
||
/* 营业时间特别处理 */
|
||
.time-flex { display: flex; align-items: center; justify-content: space-between; width: 100%; }
|
||
.time-box { flex: 1; text-align: center; background: #f5f7fa; padding: 12rpx 0; border-radius: 8rpx; font-size: 28rpx; color: #606266; }
|
||
.time-sep { margin: 0 20rpx; color: #999; }
|
||
|
||
.clinic-type-cards { display: flex; gap: 12rpx; width: 100%; }
|
||
.clinic-type-card {
|
||
flex: 1;
|
||
padding: 12rpx 10rpx;
|
||
text-align: center;
|
||
background: #f5f7fa;
|
||
border: 2rpx solid #e4e7ed;
|
||
border-radius: 8rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.clinic-type-card.active {
|
||
background: rgba(106, 205, 187, 0.08);
|
||
border-color: #6acdbb;
|
||
}
|
||
.clinic-type-label { font-size: 24rpx; color: #303133; }
|
||
.clinic-type-card.active .clinic-type-label { color: #6acdbb; font-weight: 600; }
|
||
.switch-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
width: 100%;
|
||
gap: 16rpx;
|
||
}
|
||
.switch-hint { font-size: 26rpx; color: #86909c; }
|
||
|
||
/* 图片资料区域 */
|
||
.upload-group { margin-bottom: 30rpx; padding-bottom: 20rpx; border-bottom: 1rpx solid #f5f5f5; }
|
||
.upload-group:last-child { border-bottom: none; }
|
||
.upload-label { font-size: 28rpx; color: #303133; margin-bottom: 20rpx; display: flex; align-items: center;}
|
||
.required { color: #fa3534; margin-right: 8rpx; font-weight: bold; }
|
||
.img-row, .img-list { display: flex; flex-wrap: wrap; gap: 24rpx; }
|
||
.thumb { width: 160rpx; height: 160rpx; border-radius: 12rpx; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05); }
|
||
.upload-btn { width: 160rpx; height: 160rpx; background: #f4f5f7; border-radius: 12rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2rpx dashed #dcdfe6; }
|
||
.upload-txt { font-size: 24rpx; color: #999; margin-top: 12rpx; }
|
||
.gallery-link {
|
||
display: inline-block;
|
||
margin-top: 12rpx;
|
||
font-size: 24rpx;
|
||
color: #6acdbb;
|
||
}
|
||
.contract-btn { width: 100%; height: 100rpx; flex-direction: row; gap: 12rpx; background: rgba(106, 205, 187, 0.05); border-color: #6acdbb; }
|
||
|
||
/* 底部操作区 */
|
||
.footer-actions { display: flex; flex-wrap: wrap; padding: 40rpx 24rpx 80rpx; gap: 24rpx; background: transparent; }
|
||
.btn-draft { flex: 1; min-width: 160rpx; }
|
||
.btn-prev { flex: 1; }
|
||
.btn-next, .btn-submit { flex: 2; }
|
||
.draft-name-box { padding: 40rpx 32rpx; background: #fff; }
|
||
.draft-name-title { display: block; font-size: 32rpx; font-weight: 600; margin-bottom: 24rpx; color: #1d2129; }
|
||
.draft-name-actions { display: flex; gap: 24rpx; margin-top: 32rpx; justify-content: flex-end; }
|
||
.success-panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 120rpx 48rpx 80rpx;
|
||
min-height: 50vh;
|
||
}
|
||
.success-title { font-size: 36rpx; font-weight: 600; color: #1d2129; margin-top: 32rpx; }
|
||
.success-sub { font-size: 28rpx; color: #86909c; margin-top: 16rpx; text-align: center; }
|
||
.success-actions { display: flex; flex-direction: column; gap: 24rpx; width: 100%; margin-top: 64rpx; padding: 0 24rpx; box-sizing: border-box; }
|
||
</style> |