pet-system-merchant-app/pages/order/apply/index.vue

<template>
	<view class="order-apply-page">
		<nav-bar title="下单预约"></nav-bar>
		<view class="apply-content">
			<!-- 01 服务类型 -->
			<text class="section-title">01 服务类型</text>
			<view class="card service-info-card">
				<view class="service-type-display">
					<view :class="['service-icon-box', activeService]">
						<uni-icons :type="serviceIcon" size="22" color="#fff"></uni-icons>
					</view>
					<view class="service-info-text">
						<text class="main-name">{{ currentServiceName }}</text>
						<text class="sub-desc">{{ serviceDesc }}</text>
					</view>
				</view>
			</view>

			<!-- 02 基础信息 -->
			<text class="section-title">02 基础信息</text>
			<view class="card basic-info-card">
				<view class="field-row" @click="showShopPicker = true">
					<text class="field-label">服务门店</text>
					<text :class="['field-value', !formData.shopName ? 'placeholder' : '']">{{ formData.shopName ||
						'请选择商户门店' }}</text>
					<uni-icons type="right" size="14" color="#ccc"></uni-icons>
				</view>
				<view class="field-row" @click="showUserPopup = true">
					<text class="field-label">宠主用户</text>
					<view class="field-value-wrap">
						<template v-if="selectedUser">
							<text class="selected-name">{{ selectedUser.name }}</text>
							<text class="selected-phone">{{ selectedUser.phone }}</text>
						</template>
						<text v-else class="placeholder">搜索手机号/姓名</text>
					</view>
				</view>
				<view class="field-row" @click="openPetPicker">
					<text class="field-label">选择宠物</text>
					<text :class="['field-value', !formData.petName ? 'placeholder' : '']">{{ formData.petName ||
						'点击选择宠物档案' }}</text>
					<uni-icons type="right" size="14" color="#ccc"></uni-icons>
				</view>
			</view>

			<!-- 03 业务表单 - 宠物接送 -->
			<template v-if="activeService === 'transport'">
				<text class="section-title">03 填写接送路线与时间</text>
				<view class="card transport-card">
					<view class="field-row">
						<text class="field-label">团购套餐</text>
						<input class="field-input" v-model="formData.packageName" placeholder="请输入套餐名称(选填)" />
					</view>
					<text class="form-item-label">接送模式</text>
					<view class="mode-select">
						<view v-for="mode in transportModes" :key="mode.value"
							:class="['mode-btn', { active: formData.transportMode === mode.value }]"
							@click="formData.transportMode = mode.value">
							<text>{{ mode.label }}</text>
						</view>
					</view>

					<!-- 接宠路线 (起点=用户家, 终点=门店) @Author: Antigravity -->
					<view class="route-box" v-if="formData.transportMode !== 'return_home'">
						<view class="route-icon pick"><text>接</text></view>
						<view class="route-fields">
							<text class="addr-label">起点</text>
							<uni-data-picker :localdata="regionTree" v-model="formData.pickArea"
								:map="{ text: 'name', value: 'code' }" @change="onRegionChange('pick', $event)">
								<view class="premium-cascader-display">
									<text :class="['display-text', !formData.pickArea ? 'placeholder' : '']">
										{{ pickAreaLabel || '选择省/市/区' }}
									</text>
									<uni-icons type="right" size="12" color="#ccc"></uni-icons>
								</view>
							</uni-data-picker>
							<input class="route-input" v-model="formData.pickAddress" placeholder="详细地址 (街道/门牌号)" />
							<text class="addr-label">终点</text>
							<uni-data-picker :localdata="regionTree" v-model="formData.pickEndArea"
								:map="{ text: 'name', value: 'code' }" @change="onRegionChange('pickEnd', $event)">
								<view class="premium-cascader-display">
									<text :class="['display-text', !formData.pickEndArea ? 'placeholder' : '']">
										{{ pickEndAreaLabel || '选择省/市/区' }}
									</text>
									<uni-icons type="right" size="12" color="#ccc"></uni-icons>
								</view>
							</uni-data-picker>
							<input class="route-input" v-model="formData.pickEndAddress" placeholder="详细地址 (街道/门牌号)" />
							<view class="contact-row">
								<input class="route-input half" v-model="formData.pickContact" placeholder="联系人" />
								<input class="route-input half" v-model="formData.pickPhone" placeholder="电话"
									type="tel" />
							</view>
							<view class="time-picker-row">
								<uni-datetime-picker type="datetime" v-model="formData.pickTime" placeholder="选择接宠时间"
									:border="false" :hide-second="true">
								</uni-datetime-picker>
							</view>
						</view>
					</view>

					<!-- 送宠路线 (起点=门店, 终点=用户家) @Author: Antigravity -->
					<view class="route-box" v-if="formData.transportMode !== 'pick_up'">
						<view class="route-icon send"><text>送</text></view>
						<view class="route-fields">
							<text class="addr-label">起点</text>
							<uni-data-picker :localdata="regionTree" v-model="formData.sendStartArea"
								:map="{ text: 'name', value: 'code' }" @change="onRegionChange('sendStart', $event)">
								<view class="premium-cascader-display">
									<text :class="['display-text', !formData.sendStartArea ? 'placeholder' : '']">
										{{ sendStartAreaLabel || '选择省/市/区' }}
									</text>
									<uni-icons type="right" size="12" color="#ccc"></uni-icons>
								</view>
							</uni-data-picker>
							<input class="route-input" v-model="formData.sendStartAddress"
								placeholder="详细地址 (街道/门牌号)" />
							<text class="addr-label">终点</text>
							<uni-data-picker :localdata="regionTree" v-model="formData.sendArea"
								:map="{ text: 'name', value: 'code' }" @change="onRegionChange('send', $event)">
								<view class="premium-cascader-display">
									<text :class="['display-text', !formData.sendArea ? 'placeholder' : '']">
										{{ sendAreaLabel || '选择省/市/区' }}
									</text>
									<uni-icons type="right" size="12" color="#ccc"></uni-icons>
								</view>
							</uni-data-picker>
							<input class="route-input" v-model="formData.sendAddress" placeholder="详细地址 (街道/门牌号)" />
							<view class="contact-row">
								<input class="route-input half" v-model="formData.sendContact" placeholder="联系人" />
								<input class="route-input half" v-model="formData.sendPhone" placeholder="电话"
									type="tel" />
							</view>
							<view class="time-picker-row">
								<uni-datetime-picker type="datetime" v-model="formData.sendTime"
									placeholder="预计送还时间(可选)" :border="false" :hide-second="true">
								</uni-datetime-picker>
							</view>
						</view>
					</view>
				</view>
			</template>

			<!-- 03 业务表单 - 上门喂遛/洗护 -->
			<template v-else>
				<text class="section-title">03 选择套餐与服务细则</text>
				<view class="card feed-card">
					<view class="field-row">
						<text class="field-label">团购套餐</text>
						<input class="field-input" v-model="formData.packageName" placeholder="请输入套餐名称(选填)" />
					</view>
					<text class="address-title">上门服务地址</text>
					<uni-data-picker :localdata="regionTree" v-model="formData.serviceArea"
						:map="{ text: 'name', value: 'code' }" @change="onRegionChange('service', $event)">
						<view class="premium-full-picker">
							<text :class="['display-text', !formData.serviceArea ? 'placeholder' : '']">
								{{ serviceAreaLabel || '请选择省/市/区' }}
							</text>
							<uni-icons type="right" size="14" color="#ccc"></uni-icons>
						</view>
					</uni-data-picker>
					<input class="full-input" v-model="formData.serviceAddress" placeholder="详细地址 (街道/路名/门牌号)" />

					<view class="booking-section">
						<view class="booking-header">
							<text class="label">预约服务时间</text>
							<text class="count-tag">共 {{ formData.feedTimes.length }} 次</text>
						</view>
						<view class="time-item-row" v-for="(time, index) in formData.feedTimes" :key="index">
							<text class="index">{{ index + 1 }}.</text>
							<view class="flex-picker-box">
								<uni-datetime-picker type="datetime" v-model="time.start" placeholder="开始"
									:border="false" class="inline-picker" :hide-second="true"></uni-datetime-picker>
							</view>
							<text class="to-line">~</text>
							<view class="flex-picker-box">
								<uni-datetime-picker type="datetime" v-model="time.end" placeholder="结束" :border="false"
									class="inline-picker" :hide-second="true"></uni-datetime-picker>
							</view>
							<view class="action-buttons">
								<view class="circle-btn add" v-if="index === formData.feedTimes.length - 1"
									@click="addFeedTime">
									<text>+</text>
								</view>
								<view class="circle-btn remove" v-if="formData.feedTimes.length > 1"
									@click="removeFeedTime(index)">
									<text>-</text>
								</view>
							</view>
						</view>
					</view>

					<text class="remarks-title">备注信息</text>
					<textarea class="remarks-textarea" v-model="formData.otherNote" placeholder="其他注意事项"></textarea>
				</view>
			</template>

			<!-- 04 报价信息 -->
			<text class="section-title">04 报价信息</text>
			<view class="card quote-card">
				<view class="field-row">
					<text class="field-label">报价金额</text>
					<input class="field-input" v-model="formData.quoteAmount" type="digit" placeholder="请输入报价金额" />
					<text class="unit-text">元</text>
				</view>
				<text class="quote-tips">注：此报价为预估费用，最终费用以实际结算为准。</text>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="footer-bar safe-bottom">
			<view class="quotation-fulfillmentCommission-box">
				<text class="p-label">总计报价:</text>
				<text class="p-symbol">￥</text>
				<text class="p-amount">{{ totalFulfillmentCommission }}</text>
			</view>
			<button class="submit-btn" @click="onSubmit">立即下单</button>
		</view>

		<!-- 门店选择弹窗 -->
		<view class="popup-mask" v-if="showShopPicker" @click="showShopPicker = false">
			<view class="popup-content" @click.stop>
				<text class="popup-title">选择服务门店</text>
				<scroll-view scroll-y="true" class="popup-scroll">
					<view class="popup-item" v-for="shop in shopList" :key="shop.id" @click="onShopSelect(shop)">
						<text>{{ shop.name }}</text>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 用户选择弹窗 -->
		<view class="popup-mask" v-if="showUserPopup" @click="showUserPopup = false">
			<view class="popup-content user-popup" @click.stop>
				<text class="popup-title">选择宠主</text>
				<view class="search-bar">
					<input class="search-input" v-model="userSearchKey" placeholder="输入姓名或手机号搜索"
						@confirm="fetchUsers" />
					<uni-icons type="search" size="18" color="#999" @click="fetchUsers"></uni-icons>
				</view>
				<scroll-view scroll-y="true" class="popup-scroll">
					<view class="popup-item" v-for="user in userList" :key="user.id" @click="onUserSelect(user)">
						<text class="user-item-name">{{ user.name }}</text>
						<text class="user-item-phone">{{ user.phone || user.phoneNumber }}</text>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 宠物选择弹窗 -->
		<view class="popup-mask" v-if="showPetPopup" @click="showPetPopup = false">
			<view class="popup-content" @click.stop>
				<text class="popup-title">选择宠物</text>
				<scroll-view scroll-y="true" class="popup-scroll">
					<view class="popup-item" v-for="pet in petList" :key="pet.id" @click="onPetSelect(pet)">
						<view class="pet-item-cell">
							<image :src="pet.avatar" class="pet-avatar-mini" mode="aspectFill"></image>
							<text>{{ pet.name }} ({{ pet.breed }})</text>
						</view>
					</view>
					<view v-if="petList.length === 0" class="empty-tips">该用户下暂无宠物档案</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import navBar from '@/components/nav-bar/index.vue'
import { listStoreOnOrder } from '@/api/system/store'
import { listCustomerOnOrder } from '@/api/archieves/customer'
import { listPetByUser } from '@/api/archieves/pet'
import { createOrder } from '@/api/order/order'
import { listRegionTree } from '@/api/system/region'

const showPetPopup = ref(false)
const activeService = ref('transport')
const showShopPicker = ref(false)
const showUserPopup = ref(false)
const selectedUser = ref(null)
const selectedShop = ref(null)
const selectedPet = ref(null)
const shopList = ref([])
const userList = ref([])
const petList = ref([])
const userSearchKey = ref('')
const serviceInfo = ref(null)
const regionTree = ref([])
const pickAreaLabel = ref('')
const pickEndAreaLabel = ref('')
const sendStartAreaLabel = ref('')
const sendAreaLabel = ref('')
const serviceAreaLabel = ref('')

const currentServiceName = computed(() => {
	// @Author: Antigravity
	if (serviceInfo.value) return serviceInfo.value.name
	const map = { transport: '宠物接送', feed: '上门喂遛', wash: '上门洗护' }
	return map[activeService.value]
})
const serviceIcon = computed(() => {
	const map = { transport: 'car', feed: 'shop', wash: 'color' }
	return map[activeService.value]
})
const serviceDesc = computed(() => {
	// @Author: Antigravity
	if (serviceInfo.value) return serviceInfo.value.remark
	const map = { transport: '专车接送 · 全程监护', feed: '喂食添水 · 陪玩遛狗', wash: '专业设备 · 深度清洁' }
	return map[activeService.value]
})

onLoad((options) => {
	if (options.service) activeService.value = options.service
	// @Author: Antigravity
	const stored = uni.getStorageSync('currentService')
	if (stored) {
		serviceInfo.value = stored
	}
	// 初始化获取数据
	fetchShops()
	fetchUsers()
	fetchRegionTree()
})

const fetchRegionTree = () => {
	listRegionTree().then(res => {
		console.log('移动端获取到的地区树数据:', res)
		regionTree.value = res || []
	}).catch(err => {
		console.error('获取地区树异常:', err)
	})
}

const onRegionChange = (type, e) => {
	// @Author: Antigravity
	const text = e.detail.value.map(v => v.text).join(' / ')
	if (type === 'pick') pickAreaLabel.value = text
	else if (type === 'pickEnd') pickEndAreaLabel.value = text
	else if (type === 'sendStart') sendStartAreaLabel.value = text
	else if (type === 'send') sendAreaLabel.value = text
	else if (type === 'service') serviceAreaLabel.value = text
}

// 根据 code 递归查找地区名称全路径 @Author: Antigravity
const findRegionLabel = (code, list) => {
	if (!code || !list || list.length === 0) return ''
	// 如果是路径格式，取最后一位
	const targetCode = code.includes('/') ? code.split('/').pop() : code

	const find = (nodes, target) => {
		for (let item of nodes) {
			if (item.code === target) return item.name
			if (item.children && item.children.length > 0) {
				const childMatch = find(item.children, target)
				if (childMatch) return item.name + ' / ' + childMatch
			}
		}
		return null
	}
	return find(list, targetCode) || ''
}

const formData = reactive({
	merchantId: '', shopName: '',
	customerId: '', customerName: '',
	petId: '', petName: '',
	packageName: '',
	transportMode: 'round_trip',
	pickArea: '', pickAddress: '', pickEndArea: '', pickEndAddress: '', pickContact: '', pickPhone: '', pickTime: '',
	sendStartArea: '', sendStartAddress: '', sendArea: '', sendAddress: '', sendContact: '', sendPhone: '', sendTime: '',
	serviceArea: '', serviceAddress: '',
	feedTimes: [{ start: '', end: '' }],
	otherNote: '',
	quoteAmount: ''
})

const fetchShops = () => {
	// @Author: Antigravity
	const query = { pageNum: 1, pageSize: 50 }
	if (serviceInfo.value && serviceInfo.value.id) {
		query.serviceId = serviceInfo.value.id
	}
	listStoreOnOrder(query).then(res => {
		shopList.value = res.rows || []
	})
}

const fetchUsers = () => {
	listCustomerOnOrder({ pageNum: 1, pageSize: 20, content: userSearchKey.value }).then(res => {
		userList.value = res.rows || []
	})
}

const fetchPets = (userId) => {
	listPetByUser(userId).then(res => {
		// @Author: Antigravity
		// 移动端 request.js 自动解构 data，res 即为宠物列表数组
		petList.value = Array.isArray(res) ? res : (res.rows || [])
	})
}

const onShopSelect = (shop) => {
	// @Author: Antigravity
	selectedShop.value = shop
	formData.merchantId = shop.id
	formData.shopName = shop.name
	showShopPicker.value = false

}

const onUserSelect = (user) => {
	// @Author: Antigravity
	selectedUser.value = user
	formData.customerId = user.id
	formData.customerName = user.name

	// 重置宠物
	formData.petId = ''
	formData.petName = ''
	selectedPet.value = null
	fetchPets(user.id)
	showUserPopup.value = false
}

// 核心回填逻辑：watch 响应门店/用户/地区树任一变化，对齐 Web 端 watch([store, user]) @Author: Antigravity
watch(
	[selectedShop, selectedUser, regionTree],
	([shop, user, tree]) => {
		// 门店区域码与地址 (areaCode 为逗号分隔) @Author: Antigravity
		const storeArea = shop?.areaCode || ''
		const storeAddr = shop?.address || ''
		const storeLeaf = storeArea.includes(',') ? storeArea.split(',').pop() : storeArea

		// 用户区域码与地址 (regionCode 为斜杠分隔) @Author: Antigravity
		const userArea = user?.regionCode || ''
		const userAddr = user?.address || ''
		const userPhone = user?.phoneNumber || user?.phone || ''
		const userLeaf = userArea.includes('/') ? userArea.split('/').pop() : userArea

		// 回填接宠路线：起点=用户家，终点=门店 @Author: Antigravity
		formData.pickArea = userLeaf
		formData.pickAddress = userAddr
		formData.pickEndArea = storeLeaf
		formData.pickEndAddress = storeAddr
		formData.pickContact = user?.name || ''
		formData.pickPhone = userPhone
		pickAreaLabel.value = findRegionLabel(userArea, tree)
		pickEndAreaLabel.value = findRegionLabel(storeArea.replace(/,/g, '/'), tree)

		// 回填送宠路线：起点=门店，终点=用户家 @Author: Antigravity
		formData.sendStartArea = storeLeaf
		formData.sendStartAddress = storeAddr
		formData.sendArea = userLeaf
		formData.sendAddress = userAddr
		formData.sendContact = user?.name || ''
		formData.sendPhone = userPhone
		sendStartAreaLabel.value = findRegionLabel(storeArea.replace(/,/g, '/'), tree)
		sendAreaLabel.value = findRegionLabel(userArea, tree)

		// 回填上门服务地址 @Author: Antigravity
		formData.serviceArea = userLeaf
		formData.serviceAddress = userAddr
		serviceAreaLabel.value = findRegionLabel(userArea, tree)
	},
	{ deep: true }
)

const openPetPicker = () => {
	if (!formData.customerId) {
		uni.showToast({ title: '请先选择宠主', icon: 'none' })
		return
	}
	showPetPopup.value = true
}

const onPetSelect = (pet) => {
	// @Author: Antigravity
	selectedPet.value = pet
	formData.petId = pet.id
	formData.petName = pet.name
	showPetPopup.value = false
}

const totalFulfillmentCommission = computed(() => {
	if (formData.quoteAmount && !isNaN(parseFloat(formData.quoteAmount))) return parseFloat(formData.quoteAmount).toFixed(2)
	return '0.00'
})

const transportModes = [
	{ label: '往返接送', value: 'round_trip' },
	{ label: '单程接', value: 'pick_up' },
	{ label: '单程送', value: 'return_home' }
]

const addFeedTime = () => { formData.feedTimes.push({ start: '', end: '' }) }
const removeFeedTime = (index) => { formData.feedTimes.splice(index, 1) }

const onSubmit = async () => {
	// @Author: Antigravity
	if (!formData.merchantId) { uni.showToast({ title: '请选择门店', icon: 'none' }); return }
	if (!formData.customerId) { uni.showToast({ title: '请选择宠主', icon: 'none' }); return }
	if (!formData.petId) { uni.showToast({ title: '请选择宠物', icon: 'none' }); return }
	if (!formData.quoteAmount) { uni.showToast({ title: '请输入报价金额', icon: 'none' }); return }

	uni.showLoading({ title: '提交中...', mask: true })

	try {
		const subOrders = []
		const baseMode = serviceInfo.value?.mode || 0
		const defaultContact = selectedUser.value?.name || ''
		const defaultPhone = selectedUser.value?.phone || selectedUser.value?.phoneNumber || ''

		if (activeService.value === 'transport') {
			// 接送逻辑：使用表单中回填/编辑后的起终点地址 @Author: Antigravity
			if (formData.transportMode === 'round_trip' || formData.transportMode === 'pick_up') {
				subOrders.push({
					mode: baseMode,
					type: formData.transportMode === 'round_trip' ? 0 : 2,
					contact: formData.pickContact || defaultContact,
					contactPhoneNumber: formData.pickPhone || defaultPhone,
					serviceTime: formData.pickTime || '',
					endServiceTime: formData.pickTime || '',
					fromCode: formData.pickArea || '',
					fromAddress: formData.pickAddress || '',
					toCode: formData.pickEndArea || '',
					toAddress: formData.pickEndAddress || ''
				})
			}
			if (formData.transportMode === 'round_trip' || formData.transportMode === 'return_home') {
				subOrders.push({
					mode: baseMode,
					type: formData.transportMode === 'round_trip' ? 1 : 3,
					contact: formData.sendContact || defaultContact,
					contactPhoneNumber: formData.sendPhone || defaultPhone,
					serviceTime: formData.sendTime || '',
					endServiceTime: formData.sendTime || '',
					fromCode: formData.sendStartArea || '',
					fromAddress: formData.sendStartAddress || '',
					toCode: formData.sendArea || '',
					toAddress: formData.sendAddress || ''
				})
			}
		} else {
			// 上门喂遛或洗护逻辑，补全 fromCode/toCode/toAddress @Author: Antigravity
			formData.feedTimes.forEach(time => {
				subOrders.push({
					mode: baseMode,
					contact: defaultContact,
					contactPhoneNumber: defaultPhone,
					serviceTime: time.start,
					endServiceTime: time.end || time.start,
					fromCode: formData.serviceArea || '',
					fromAddress: formData.serviceAddress,
					toCode: formData.serviceArea || '',
					toAddress: formData.serviceAddress
				})
			})
		}

		const payload = {
			store: formData.merchantId,
			storeSite: selectedShop.value?.site,
			customer: formData.customerId,
			pet: formData.petId,
			groupPurchasePackageName: formData.packageName || '',
			service: serviceInfo.value?.id,
			orderCommission: Math.round(Number(formData.quoteAmount) * 100),
			remark: formData.otherNote,
			tenantId: selectedShop.value?.tenantId,
			subOrders: subOrders
		}

		await createOrder(payload)
		uni.hideLoading()
		uni.showToast({ title: '下单成功', icon: 'success' })
		setTimeout(() => {
			uni.reLaunch({ url: '/pages/order/list/index' })
		}, 1500)
	} catch (error) {
		uni.hideLoading()
		console.error('下单失败:', error)
	}
}
</script>

<style lang="scss" scoped>
.order-apply-page {
	background: #f7f8fa;
	min-height: 100vh;
	padding-bottom: 200rpx;
}

.apply-content {
	padding: 0 32rpx;
}

.section-title {
	display: flex;
	align-items: center;
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin: 32rpx 0 20rpx;
}

.section-title::before {
	content: '';
	width: 8rpx;
	height: 28rpx;
	background: #f7ca3e;
	margin-right: 16rpx;
	border-radius: 4rpx;
}

.card {
	background: #fff;
	border-radius: 24rpx;
	padding: 24rpx;
	margin-bottom: 24rpx;
}

.service-type-display {
	display: flex;
	align-items: center;
	gap: 24rpx;
}

.service-icon-box {
	width: 88rpx;
	height: 88rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.service-icon-box.transport {
	background: linear-gradient(135deg, #64b5f6, #2196f3);
}

.service-icon-box.feed {
	background: linear-gradient(135deg, #ffb74d, #ff9800);
}

.service-icon-box.wash {
	background: linear-gradient(135deg, #81c784, #4caf50);
}

.main-name {
	display: block;
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.sub-desc {
	display: block;
	font-size: 24rpx;
	color: #999;
	margin-top: 4rpx;
}

.field-row {
	display: flex;
	align-items: center;
	padding: 24rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.field-row:last-child {
	border-bottom: none;
}

.field-label {
	width: 160rpx;
	font-size: 28rpx;
	color: #333;
	flex-shrink: 0;
}

.field-value {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	text-align: right;
}

.field-value.placeholder {
	color: #ccc;
}

.field-value-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12rpx;
}

.selected-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
}

.selected-phone {
	font-size: 24rpx;
	color: #666;
}

.placeholder {
	color: #ccc;
	font-size: 28rpx;
}

.field-input {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	text-align: right;
}

.unit-text {
	font-size: 28rpx;
	color: #999;
	margin-left: 8rpx;
}

.form-item-label {
	display: block;
	font-size: 28rpx;
	color: #333;
	margin: 24rpx 0 16rpx;
	font-weight: 500;
}

.mode-select {
	display: flex;
	gap: 16rpx;
	margin-bottom: 32rpx;
}

.mode-btn {
	flex: 1;
	height: 64rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1rpx solid #ddd;
	border-radius: 12rpx;
	font-size: 24rpx;
	color: #666;
}

.mode-btn.active {
	background: #fef8e5;
	border-color: #f7ca3e;
	color: #f7ca3e;
	font-weight: bold;
}

.route-box {
	display: flex;
	gap: 24rpx;
	margin-bottom: 24rpx;
}

.route-icon {
	width: 48rpx;
	height: 48rpx;
	border-radius: 8rpx;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	font-weight: bold;
	flex-shrink: 0;
	margin-top: 16rpx;
}

.route-icon.pick {
	background: #5bb7ff;
}

.route-icon.send {
	background: #64cf5c;
}

.route-fields {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.route-input {
	width: 100%;
	height: 72rpx;
	font-size: 26rpx;
	color: #333;
	border-bottom: 1rpx solid #f0f0f0;
	padding: 0 8rpx;
}

.contact-row {
	display: flex;
	gap: 16rpx;
}

.route-input.half {
	flex: 1;
}

/* 起点/终点标签 @Author: Antigravity */
.addr-label {
	font-size: 24rpx;
	color: #606266;
	font-weight: bold;
	margin-top: 16rpx;
	margin-bottom: 4rpx;
}

.address-title {
	display: block;
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
	margin: 24rpx 0 16rpx;
}

.full-input {
	width: 100%;
	height: 72rpx;
	font-size: 26rpx;
	color: #333;
	border-bottom: 1rpx solid #f0f0f0;
	padding: 0 8rpx;
	margin-bottom: 8rpx;
}

.premium-cascader-display {
	display: flex;
	align-items: center;
	padding: 16rpx 8rpx;
	border-bottom: 1rpx solid #f0f0f0;

	.display-text {
		flex: 1;
		font-size: 26rpx;
		color: #333;

		&.placeholder {
			color: #ccc;
		}
	}
}

.premium-full-picker {
	display: flex;
	align-items: center;
	padding: 24rpx 12rpx;
	background: #f9f9f9;
	border-radius: 12rpx;
	margin-bottom: 16rpx;

	.display-text {
		flex: 1;
		font-size: 28rpx;
		color: #333;

		&.placeholder {
			color: #ccc;
		}
	}
}

.booking-section {
	margin-top: 24rpx;
}

.time-picker-row {
	border-bottom: 1rpx solid #f0f0f0;
	padding: 4rpx 0;
}

.flex-picker-box {
	flex: 1;
	background: #fcfcfc;
	border-radius: 12rpx;
	border: 1rpx solid #f0f0f0;
	height: 64rpx;
	display: flex;
	align-items: center;

	.inline-picker {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	}
}

.booking-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16rpx;
}

.booking-header .label {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.count-tag {
	font-size: 22rpx;
	color: #ff9500;
	background: #fff3e0;
	padding: 4rpx 16rpx;
	border-radius: 8rpx;
}

.time-item-row {
	display: flex;
	align-items: center;
	gap: 12rpx;
	margin-bottom: 16rpx;
}

.index {
	font-size: 26rpx;
	color: #999;
	width: 40rpx;
}

.time-input {
	flex: 1;
	height: 64rpx;
	font-size: 24rpx;
	border: 1rpx solid #f0f0f0;
	border-radius: 12rpx;
	padding: 0 16rpx;
}

.to-line {
	color: #999;
}

.action-buttons {
	display: flex;
	gap: 8rpx;
}

.circle-btn {
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	font-weight: bold;
}

.circle-btn.add {
	background: #e3f2fd;
	color: #2196f3;
}

.circle-btn.remove {
	background: #fde2e2;
	color: #f56c6c;
}

.remarks-title {
	display: block;
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
	margin: 24rpx 0 16rpx;
}

.remarks-textarea {
	width: 100%;
	height: 160rpx;
	font-size: 26rpx;
	color: #333;
	background: #f9f9f9;
	border-radius: 16rpx;
	padding: 20rpx;
}

.quote-tips {
	display: block;
	font-size: 22rpx;
	color: #999;
	margin-top: 12rpx;
}

.footer-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	padding: 20rpx 32rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	display: flex;
	align-items: center;
	box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
	z-index: 10;
}

.quotation-fulfillmentCommission-box {
	flex: 1;
	display: flex;
	align-items: baseline;
}

.p-label {
	font-size: 26rpx;
	color: #333;
}

.p-symbol {
	font-size: 28rpx;
	color: #f44336;
	font-weight: bold;
	margin-left: 8rpx;
}

.p-amount {
	font-size: 44rpx;
	font-weight: 900;
	color: #f44336;
}

.submit-btn {
	width: 280rpx;
	height: 88rpx;
	background: linear-gradient(90deg, #ffd53f, #ff9500);
	color: #333;
	border: none;
	border-radius: 44rpx;
	font-size: 30rpx;
	font-weight: bold;
	line-height: 88rpx;
}

.popup-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	align-items: flex-end;
}

.popup-content {
	width: 100%;
	background: #fff;
	border-radius: 32rpx 32rpx 0 0;
	padding: 40rpx 32rpx;
	max-height: 70vh;
}

.popup-title {
	display: block;
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 24rpx;
	text-align: center;
}

.popup-item {
	padding: 28rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
	font-size: 28rpx;
	color: #333;
}

.user-popup .popup-item {
	display: flex;
	justify-content: space-between;
}

.user-item-name {
	font-weight: bold;
}

.user-item-phone {
	color: #999;
}

.popup-scroll {
	max-height: 600rpx;
	margin-top: 20rpx;
}

.search-bar {
	display: flex;
	align-items: center;
	background: #f5f5f5;
	border-radius: 40rpx;
	padding: 0 30rpx;
	margin-bottom: 20rpx;
	height: 72rpx;
}

.search-input {
	flex: 1;
	font-size: 26rpx;
	color: #333;
}

.pet-item-cell {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.pet-avatar-mini {
	width: 60rpx;
	height: 60rpx;
	border-radius: 10rpx;
	background: #f0f0f0;
}

.empty-tips {
	text-align: center;
	color: #999;
	font-size: 24rpx;
	padding: 40rpx 0;
}
</style>