jd_logistics/jd_logistics-app/pages/order/create_order.vue

<template>
	<view class="order-container">
		<!-- 用户信息卡片 -->
		<view class="info-card">
			<view class="address-item">
				<view class="img-status-text">
					<image src="/static/img/icon-send.png" mode="" class="img"></image>
				</view>
				<view class="user-info">
					<AddressInfo v-if="addressSend.addressId" :address="addressSend" />
					<view v-else class="create-btn" @click="handleAddAddress('sender')">新建寄件人</view>

				</view>
				<view class="img-status-text right" @click="openAddressBook('sender')">
					<image src="/static/img/create-order-address.png" mode="" class="address-image"></image>
					<view class="status-text">地址薄</view>
				</view>
			</view>
			<view class="address-item">
				<view class="img-status-text">
					<image src="/static/img/create-order-change.png" mode="" class="img-change"></image>
				</view>
				<view class="user-info">
					<view class="line"></view>
				</view>
			</view>
			<view class="address-item">
				<view class="img-status-text">
					<image src="/static/img/icon-receive.png" mode="" class="img"></image>
				</view>
				<view class="user-info">
					<AddressInfo v-if="addressReceive.addressId" :address="addressReceive" />
					<view v-else class="create-btn" @click="handleAddAddress('receiver')">新建收件人</view>
				</view>
				<view class="img-status-text right" @click="openAddressBook('receiver')">
					<image src="/static/img/create-order-address.png" mode="" class="address-image"></image>
					<view class="status-text">地址薄</view>
				</view>
			</view>
		</view>

		<view class="pickup-title">上门取件</view>

		<!-- 物品信息 -->
		<view class="goods-card">
			<view class="goods-item">
				<view class="item-label required">期望上门时间</view>
				<view class="time-value" @click="handleTimeClick">
					<text class="value">{{ selectedTimeLabel }}</text>
					<u-icon class="arrow" name='arrow-right' size="18"></u-icon>
				</view>
			</view>

			<view class="goods-item">
				<view class="item-label required">快递类型</view>
				<picker  :range="expressTypes" :range-key="'label'" @change="onExpressTypeChange"
					:value="expressTypeIndex" :disabled="!expressTypes.length">
					<view class="item-control">
						<view class="picker-text">
							{{ expressTypes[expressTypeIndex]?.label || (expressTypes.length ? '请选择快递类型' : '加载中...') }}
						</view>
						<u-icon class="arrow" name='arrow-right' size="18"></u-icon>
					</view>
				</picker>
			</view>

			<view class="goods-item">
				<view class="item-label required">物品信息</view>
				<view class="item-control">
					<input class="input-field" placeholder="请输入物品信息" placeholder-class="placeholder" v-model="goodsInfo"
						maxlength="50" @input="onGoodsInfoInput" />
				</view>
			</view>

			<!-- 总体重 -->
			<view class="goods-item">
				<view class="item-label">总体重(KG)</view>
				<view class="item-control btn">
					<view class="control-btn minus" @click="decreaseWeight">-</view>
					<view class="control-value">
						<input class="input-field" placeholder="" placeholder-class="placeholder" :value="weight"
							@input="handleWeightInput" type="digit" />
					</view>
					<view class="control-btn plus" @click="increaseWeight">+</view>
				</view>
			</view>

			<!-- 总体积 -->
			<view class="goods-item">
				<view class="item-label">总体积(m³)</view>
				<view class="item-control btn">
					<view class="control-btn minus" @click="decreaseVolume">-</view>
					<view class="control-value">
						<input class="input-field" placeholder="" placeholder-class="placeholder" :value="volume"
							@input="handleVolumeInput" type="digit" />
					</view>
					<view class="control-btn plus" @click="increaseVolume">+</view>
				</view>
			</view>

			<!-- 件数 -->
			<view class="goods-item">
				<view class="item-label">件数(件)</view>
				<view class="item-control btn">
					<view class="control-btn minus" @click="decreaseQuantity">-</view>
					<view class="control-value">
						<input class="input-field" placeholder="" placeholder-class="placeholder" :value="quantity"
							@input="handleQuantityInput" type="number" />
					</view>
					<view class="control-btn plus" @click="increaseQuantity">+</view>
				</view>
			</view>
		</view>

		<!-- 增值服务标题（带折叠箭头） -->
		<view class="pickup-title" style="display: flex; justify-content: space-between; align-items: center;">
			<text>增值服务</text>
			<u-icon :name="showValueAdded ? 'arrow-up' : 'arrow-down'" size="18" color="#999" @click="showValueAdded = !showValueAdded"></u-icon>
		</view>

		<!-- 增值服务卡片（折叠内容） -->
		<view class="goods-card">
			<block v-if="showValueAdded">
				<!-- 展开状态：显示所有增值服务项 -->
				<view class="goods-item" v-if="product === '1'">
					<view class="item-label">包装服务</view>
					<view class="item-control">
						<switch color="#007AFF" :checked="valueServices.isPack" @change="onPackagingChange" />
					</view>
				</view>

				<view class="goods-item">
					<view class="item-label">保价</view>
					<view class="item-control">
						<switch color="#007AFF" :checked="insuranceAmountChecked" @change="onInsuranceChange" />
					</view>
				</view>

				<view v-if="insuranceAmountChecked" class="goods-item">
					<view class="item-label">保价金额(元)</view>
					<view class="item-control">
						<input class="input-field" placeholder="请输入保价金额" placeholder-class="placeholder"
							v-model="insuranceAmount" type="digit" maxlength="10" @input="validateInsuranceAmount" />
					</view>
				</view>

				<!-- 超长超重（顺丰/京东） -->
				<!-- 	<view class="goods-item" v-if="product === '2'">
					<view class="item-label">超长超重</view>
					<view class="item-control">
						<switch color="#007AFF" :checked="valueServices.isOverLongWeight" @change="onOverweightChange" />
					</view>
				</view> -->

				<!-- 签单返还 -->
				<view class="goods-item" v-if="product === '1'">
					<view class="item-label">签单返还</view>
					<view class="item-control">
						<switch color="#007AFF" :checked="valueServices.isReceiptCollect" @change="onSignReturnChange" />
					</view>
				</view>

				<!-- 顺丰：签单返还类型选择 -->
				<view v-if="product === '2' && valueServices.isReceiptCollect" class="goods-item">
					<view class="item-label">返还类型</view>
					<view class="item-control">
						<picker :range="receiptReturnTypes" :range-key="'label'" @change="onReceiptReturnTypeChange"
							:value="receiptReturnTypeIndex">
							<view class="picker-text">{{ receiptReturnTypes[receiptReturnTypeIndex]?.label || '请选择返还类型' }}
							</view>
						</picker>
						<u-icon class="arrow" name='arrow-right' size="18"></u-icon>
					</view>
				</view>

				<!-- 打木架（仅顺丰） -->
				<!-- 	<view v-if="product === '2'" class="goods-item">
					<view class="item-label">打木架</view>
					<view class="item-control">
						<switch color="#007AFF" :checked="valueServices.isWoodenCrate" @change="onWoodenFrameChange" />
					</view>
				</view> -->
			</block>
			<block v-else>
				<!-- 折叠状态：显示一个可点击的展开提示行 -->
				<view class="goods-item" @click="showValueAdded = true">
					<view class="item-label">增值服务</view>
					<view class="item-control">
						<text class="picker-text">点击展开</text>
						<u-icon name="arrow-down" size="18" color="#999"></u-icon>
					</view>
				</view>
			</block>
		</view>

		<!-- 协议同意 -->
		<view class="agreement-card">
			<!-- <view class="agreement-item">
				<checkbox color="#1B64F0" :checked="agreed" @click="toggleAgreement" style="transform:scale(0.8)" />
				<text class="agreement-text">我已理解并同意遵守《快件服务协议》</text>
			</view> -->
			<view class="price-notice">
				实际费用以快递员核实为准
			</view>
		</view>


		<view class="add-btn-container">
			<!-- 下单按钮 -->
			<view class="submit-btn" :class="{ disabled: !agreed }" :disabled="!agreed" @click="submitOrder">
				提交订单
			</view>
		</view>

		<!-- 安全区域占位 -->
		<view class="safe-area"></view>

		<!-- 时间选择弹窗 -->
		<TimePopup :visible="showTimePicker" @close="showTimePicker = false" @confirm="handleTimeConfirm" />
	</view>
</template>
<script setup>
import {
	ref,
	computed,
	onMounted,
	onUnmounted,
} from 'vue'
import {
	onLoad
} from '@dcloudio/uni-app'
import TimePopup from './components/TimePopup.vue'
import AddressInfo from '@/components/AddressInfo.vue'

import {
	createOrder,
	dictList
} from '../../api/order'
import {
	getDefaultAddress
} from '../../api/address'

// ==================== 工具函数 ====================
const pad = (n) => (n < 10 ? '0' + n : n)

const formatDateTime = (date) => {
	const y = date.getFullYear()
	const m = String(date.getMonth() + 1).padStart(2, '0')
	const d = String(date.getDate()).padStart(2, '0')
	const hh = String(date.getHours()).padStart(2, '0')
	const mm = String(date.getMinutes()).padStart(2, '0')
	const ss = String(date.getSeconds()).padStart(2, '0')
	return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}

// 生成默认时间段（当前时间+30分钟 ～ 当前时间+1小时30分钟）
const getDefaultTimeRange = () => {
	const now = new Date()
	const start = new Date(now.getTime() + 1 * 60000) // 加30分钟
	const end = new Date(start.getTime() + 60 * 60000) // 加1小时
	return {
		startTime: formatDateTime(start),
		endTime: formatDateTime(end)
	}
}

// 时间合规性判断
function isBeforeNineAM(date) {
	return date.getHours() < 9
}
function isAfterEightPM(date) {
	return date.getHours() > 20 || (date.getHours() === 20 && date.getMinutes() > 0)
}

// ==================== 数据存储 ====================
const getAddressFromStorage = (key) => {
	const address = uni.getStorageSync(key)
	return address || {
		id: '',
		name: '',
		phone: '',
		address: '',
		provinceName: '',
		cityName: '',
		countyName: '',
		isDefault: false
	}
}
const saveAddressToStorage = (key, address) => {
	uni.setStorageSync(key, address)
}

// ==================== 页面参数 ====================
const product = ref('1') // 1-京东，2-顺丰

// ==================== 地址信息 ====================
const addressSend = ref(getAddressFromStorage('senderAddress'))
const addressReceive = ref(getAddressFromStorage('receiverAddress'))

// ==================== 物品信息 ====================
const goodsInfo = ref('')
const weight = ref(0.5)
const volume = ref(0.001)
const quantity = ref(1)

// ==================== 时间选择 ====================
const showTimePicker = ref(false)
const selectedTimeData = ref({
	startTime: undefined,
	endTime: undefined
})

// 动态生成显示标签（不依赖额外字段）
const selectedTimeLabel = computed(() => {
	if (!selectedTimeData.value.startTime) return '一小时内'
	const start = new Date(selectedTimeData.value.startTime.replace(/-/g, '/'))
	const end = new Date(selectedTimeData.value.endTime.replace(/-/g, '/'))
	const now = new Date()
	const isToday = start.toDateString() === now.toDateString()
	const isTomorrow = start.toDateString() === new Date(now.getTime() + 86400000).toDateString()
	const dateLabel = isToday ? '今天' : (isTomorrow ? '明天' : `${start.getMonth() + 1}月${start.getDate()}日`)
	const timeLabel = `${pad(start.getHours())}:${pad(start.getMinutes())}-${pad(end.getHours())}:${pad(end.getMinutes())}`
	return `${dateLabel} ${timeLabel}`
})

// ==================== 快递类型字典 ====================
const jdDictList = ref([])
const sfDictList = ref([])
const expressTypeIndex = ref(0)
const expressTypes = ref([])

const fetchDictData = async () => {
	try {
		uni.showLoading({ title: '加载字典...' })
		const [jdRes, sfRes] = await Promise.all([
			dictList('jd_logistics_product_code'),
			dictList('sf_logistics_product_code')
		])
		if (jdRes.code === 200) jdDictList.value = jdRes.data || []
		if (sfRes.code === 200) sfDictList.value = sfRes.data || []
		updateExpressTypes()
	} catch (error) {
		console.error('获取快递类型字典失败', error)
		uni.showToast({ title: '字典加载失败', icon: 'none' })
	} finally {
		uni.hideLoading()
	}
}

const updateExpressTypes = () => {
	let sourceList = product.value === '1' ? jdDictList.value : sfDictList.value
	expressTypes.value = sourceList.map(item => ({
		label: item.dictLabel,
		value: item.dictValue
	}))
	expressTypeIndex.value = 0
}

// ==================== 增值服务 ====================
const valueServices = ref({
	isPack: false,
	isOverLongWeight: false,
	isReceiptCollect: false,
	isWoodenCrate: false
})
const insuranceAmountChecked = ref(false)
const insuranceAmount = ref('')
const insuranceAmountError = ref('')
const receiptReturnTypeIndex = ref(0)
const receiptReturnTypes = ref([
	{ label: '电子凭证', value: 'electronic' },
	{ label: '纸质凭证', value: 'paper' }
])
const showValueAdded = ref(false)
const agreed = ref(true)

// ==================== 表单操作 ====================
const increaseWeight = () => {
	weight.value = parseFloat((weight.value + 0.1).toFixed(3))
	if (weight.value > 100) weight.value = 100
}
const decreaseWeight = () => {
	weight.value = parseFloat((weight.value - 0.1).toFixed(3))
	if (weight.value < 0.1) weight.value = 0.1
}
const handleWeightInput = (e) => {
	let value = e.detail.value.replace(/[^\d.]/g, '')
	const parts = value.split('.')
	if (parts.length > 2) value = parts[0] + '.' + parts.slice(1).join('')
	if (value.includes('.')) {
		const decimal = value.split('.')[1]
		if (decimal && decimal.length > 3) value = parseFloat(value).toFixed(3)
	}
	const num = parseFloat(value) || 0.1
	weight.value = Math.max(0.1, Math.min(100, num))
}

const increaseVolume = () => {
	volume.value = parseFloat((volume.value + 0.001).toFixed(3))
}
const decreaseVolume = () => {
	volume.value = parseFloat((volume.value - 0.001).toFixed(3))
	if (volume.value < 0.001) volume.value = 0.001
}
const handleVolumeInput = (e) => {
	let value = e.detail.value.replace(/[^\d.]/g, '')
	const parts = value.split('.')
	if (parts.length > 2) value = parts[0] + '.' + parts.slice(1).join('')
	if (value.includes('.')) {
		const decimal = value.split('.')[1]
		if (decimal && decimal.length > 3) value = parseFloat(value).toFixed(3)
	}
	const num = parseFloat(value) || 0.001
	volume.value = Math.max(0.001, Math.min(10, num))
}

const increaseQuantity = () => {
	quantity.value += 1
}
const decreaseQuantity = () => {
	quantity.value -= 1
	if (quantity.value < 1) quantity.value = 1
}
const handleQuantityInput = (e) => {
	let value = e.detail.value.replace(/\D/g, '')
	const int = parseInt(value) || 1
	quantity.value = int
}

const onGoodsInfoInput = (e) => {
	goodsInfo.value = e.detail.value
	if (goodsInfo.value.length > 50) goodsInfo.value = goodsInfo.value.substring(0, 50)
}

const onExpressTypeChange = (e) => {
	expressTypeIndex.value = e.detail.value
}

const onPackagingChange = (e) => valueServices.value.isPack = e.detail.value
const onOverweightChange = (e) => valueServices.value.isOverLongWeight = e.detail.value
const onWoodenFrameChange = (e) => valueServices.value.isWoodenCrate = e.detail.value

const onInsuranceChange = (e) => {
	insuranceAmountChecked.value = e.detail.value
	if (e.detail.value) insuranceAmount.value = '0'
	else {
		insuranceAmount.value = ''
		insuranceAmountError.value = ''
	}
}

const onSignReturnChange = (e) => {
	valueServices.value.isReceiptCollect = e.detail.value
	if (!e.detail.value) receiptReturnTypeIndex.value = 0
}

const onReceiptReturnTypeChange = (e) => receiptReturnTypeIndex.value = e.detail.value

const validateInsuranceAmount = () => {
	if (!insuranceAmount.value) return true
	const amount = parseFloat(insuranceAmount.value)
	if (isNaN(amount) || amount < 0) {
		insuranceAmountError.value = '保价金额必须为数字且大于0'
		return false
	}
	const decimal = insuranceAmount.value.toString().split('.')[1]
	if (decimal && decimal.length > 2) {
		insuranceAmountError.value = '最多两位小数'
		return false
	}
	insuranceAmountError.value = ''
	return true
}

const handleTimeClick = () => showTimePicker.value = true
const handleTimeConfirm = (time) => {
	// 只保留核心字段，避免依赖额外字段
	selectedTimeData.value = {
		startTime: time.startTime,
		endTime: time.endTime
	}
	showTimePicker.value = false
}

const openAddressBook = (type) => {
	uni.navigateTo({ url: `/pages/address/address_list?addType=${type}&from=order` })
}
const handleAddAddress = (type) => {
	uni.navigateTo({ url: `/pages/address/edit?addType=${type}&from=order` })
}
const toggleAgreement = () => agreed.value = !agreed.value

// ==================== 表单验证（增强） ====================
const validateForm = () => {
	if (!addressSend.value.addressId) {
		uni.showToast({ title: '请选择寄件人地址', icon: 'none' })
		return false
	}
	if (!addressReceive.value.addressId) {
		uni.showToast({ title: '请选择收件人地址', icon: 'none' })
		return false
	}
	if (!expressTypes.value.length) {
		uni.showToast({ title: '快递类型字典加载中，请稍后', icon: 'none' })
		return false
	}
	if (!expressTypes.value[expressTypeIndex.value]) {
		uni.showToast({ title: '请选择快递类型', icon: 'none' })
		return false
	}
	if (!goodsInfo.value.trim()) {
		uni.showToast({ title: '请输入物品信息', icon: 'none' })
		return false
	}
	if (goodsInfo.value.length > 50) {
		uni.showToast({ title: '物品信息不能超过50字', icon: 'none' })
		return false
	}
	if (weight.value < 0) {
		uni.showToast({ title: '请输入正确的重量', icon: 'none' })
		return false
	}
	if (volume.value < 0) {
		uni.showToast({ title: '请输入正确的体积', icon: 'none' })
		return false
	}
	if (quantity.value < 1) {
		uni.showToast({ title: '请输入正确的件数', icon: 'none' })
		return false
	}
	if (insuranceAmount.value !== '' && insuranceAmount.value !== null && !validateInsuranceAmount()) {
		uni.showToast({ title: insuranceAmountError.value || '保价金额无效', icon: 'none' })
		return false
	}
	if (product.value === '2' && valueServices.value.isReceiptCollect && !receiptReturnTypes.value[receiptReturnTypeIndex.value]) {
		uni.showToast({ title: '请选择签单返还类型', icon: 'none' })
		return false
	}
	if (!agreed.value) {
		uni.showToast({ title: '请同意服务协议', icon: 'none' })
		return false
	}

	// 时间处理：若无选择则使用默认时间段
	if (!selectedTimeData.value.startTime) {
		const defaultRange = getDefaultTimeRange()
		selectedTimeData.value = defaultRange
	}

	// 时间合规性检查（9:00-20:00）
	const startDate = new Date(selectedTimeData.value.startTime.replace(/-/g, '/'))
	const endDate = new Date(selectedTimeData.value.endTime.replace(/-/g, '/'))
	if (isBeforeNineAM(startDate) || isAfterEightPM(startDate)) {
		uni.showToast({ title: '请选择 9:00-20:00 之间的取件时间', icon: 'none' })
		selectedTimeData.value = { startTime: undefined, endTime: undefined }
		return false
	}
	if (isAfterEightPM(endDate)) {
		uni.showToast({ title: '取件结束时间不能晚于 20:00', icon: 'none' })
		selectedTimeData.value = { startTime: undefined, endTime: undefined }
		return false
	}

	return true
}

const isSubmit = ref(false)

// ==================== 提交订单 ====================
const submitOrder = async () => {
	if (!validateForm()) return
	if (isSubmit.value) return
	isSubmit.value = true

	const addedService = {
		isPack: valueServices.value.isPack || null,
		guaranteeMoney: insuranceAmount.value && insuranceAmount.value !== '' ? parseFloat(insuranceAmount.value) : null,
		isReceiptCollect: product.value === '2'
			? (valueServices.value.isReceiptCollect ? receiptReturnTypes.value[receiptReturnTypeIndex.value]?.value : null)
			: (valueServices.value.isReceiptCollect ? true : null),
		isOverLongWeight: valueServices.value.isOverLongWeight || null,
		isWoodenCrate: valueServices.value.isWoodenCrate || null
	}
	Object.keys(addedService).forEach(key => {
		if (addedService[key] === null || addedService[key] === undefined) delete addedService[key]
	})

	const orderData = {
		orderType: product.value,
		senderName: addressSend.value.contactName,
		senderPhone: addressSend.value.contactPhone,
		senderProvince: addressSend.value.provinceName,
		senderCity: addressSend.value.cityName,
		senderCounty: addressSend.value.countyName,
		senderAddress: addressSend.value.detailedAddress,
		receiverName: addressReceive.value.contactName,
		receiverPhone: addressReceive.value.contactPhone,
		receiverProvince: addressReceive.value.provinceName,
		receiverCity: addressReceive.value.cityName,
		receiverCounty: addressReceive.value.countyName,
		receiverAddress: addressReceive.value.detailedAddress,
		goodsName: goodsInfo.value,
		goodsWeight: weight.value,
		goodsVolume: volume.value,
		goodsQty: quantity.value,
		sendStartTime: selectedTimeData.value.startTime,
		sendEndTime: selectedTimeData.value.endTime,
		productCode: expressTypes.value[expressTypeIndex.value]?.value,
		addedService: JSON.stringify(addedService)
	}

	uni.showLoading({ title: '提交中...', mask: true })
	try {
		const res = await createOrder(orderData)
		uni.hideLoading()
		if (res.code === 200) {
			uni.showToast({ title: '下单成功', icon: 'success', mask: true })
			uni.switchTab({ url: '/pages/order/index' })
		} else {
			isSubmit.value = false			
			selectedTimeData.value = { startTime: undefined, endTime: undefined }
			uni.showToast({ title: res.msg || '下单失败', icon: 'none' })
		}
	} catch (error) {
		isSubmit.value = false
		uni.showToast({ title: error, icon: 'none' })
		console.error('订单提交失败', error)
		selectedTimeData.value = { startTime: undefined, endTime: undefined }
	}
}

// ==================== 获取默认寄件地址 ====================
const fetchDefaultSenderAddress = async () => {
	try {
		const res = await getDefaultAddress()
		if (res.code === 200 && res.data) {
			addressSend.value = res.data
			addressSend.value.defaultFlag = res.data.defaultFlag === '1'
			saveAddressToStorage('senderAddress', res.data)
		}
	} catch (error) {
		console.error('获取默认地址失败', error)
	}
}

// ==================== 生命周期 ====================
onLoad((option) => {
	if (option.product) product.value = option.product
	fetchDictData()
})

onMounted(() => {
	uni.$on('addressSelected', (data) => {
		if (data.type === 'sender') {
			addressSend.value = data.address
			saveAddressToStorage('senderAddress', data.address)
		} else if (data.type === 'receiver') {
			addressReceive.value = data.address
			saveAddressToStorage('receiverAddress', data.address)
		}
	})
	if (!addressSend.addressId) fetchDefaultSenderAddress()
})

onUnmounted(() => {
	uni.$off('addressSelected')
})
</script>

<style lang="scss" scoped>
	/* 完全保持原有样式，未做任何修改 */
	.order-container {
		min-height: 100vh;
		background-color: #F5F7FA;
		padding-bottom: 180rpx;
		box-sizing: border-box;
	}

	.info-card {
		margin: 0rpx 20rpx;
		background: #fff;
		border-radius: 32rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.address-item {
			display: flex;
			align-items: center;

			&:first-child {
				padding-bottom: 20rpx;
			}

			&:last-child {
				padding-top: 20rpx;
			}
		}

		.user-info {
			flex: 1;
			margin-left: 26rpx;

			.line {
				width: 590rpx;
				height: 3rpx;
				background-color: #F1F3F8;
			}

			.create-btn {
				height: 88rpx;
				font-weight: 400;
				font-size: 40rpx;
				color: #999999;
				line-height: 88rpx;
			}
		}

		.right {
			margin-left: 20rpx;
		}

		.img-status-text {
			align-self: center;
			text-align: center;
			flex-shrink: 0;

			.img {
				width: 56rpx;
				height: 56rpx;
			}

			.img-change {
				width: 40rpx;
				height: 40rpx;
			}

			.address-image {
				width: 48rpx;
				height: 48rpx;
			}

			.status-text {
				font-size: 28rpx;
				color: #333;
				font-weight: 400;
			}
		}
	}

	.pickup-title {
		margin: 0rpx 20rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
	}

	.goods-card {
		margin: 0rpx 20rpx;
		background-color: #fff;
		border-radius: 32rpx;
		padding: 0rpx 20rpx;
		margin-bottom: 20rpx;
	}

	.goods-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		border-bottom: 1rpx solid #F1F3F8;

		&:last-child {
			border-bottom: none;
			margin-bottom: 0;
		}

		.item-label {
			font-size: 28rpx;
			color: #666;
			font-weight: 400;

			&.required::before {
				content: '*';
				color: #ff4444;
				margin-right: 8rpx;
			}
		}

		.item-control {
			display: flex;
			align-items: center;

			.picker-text {
				font-size: 28rpx;
				color: #333;
				text-align: right;
				margin-right: 8rpx;
			}

			&.btn {
				background: #fff;
				border: 1rpx solid #dcdfe6;
				border-radius: 5rpx;
				height: 59rpx;
				width: 266rpx;
				box-sizing: border-box;
			}

			.control-btn {
				width: 56rpx;
				height: 56rpx;
				background: #F5F7FA;
				border-radius: 4rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 36rpx;
				color: #666;

				&.minus {
					color: #999;
					border-right: 1rpx solid #dcdfe6;
				}

				&.plus {
					color: #999;
					border-left: 1rpx solid #dcdfe6;
				}
			}

			.control-value {
				width: 154rpx;
				text-align: center;
				font-size: 24rpx;
				color: #333;

				.input-field {
					width: 100%;
					height: 100rpx;
					line-height: 100rpx;
					padding: 0 24rpx;
					font-size: 28rpx;
					color: #333;
					text-align: center;

					&::placeholder {
						color: #999;
					}
				}
			}
		}

		.input-field {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			padding: 0 24rpx;
			font-size: 28rpx;
			color: #333;
			text-align: right;

			&::placeholder {
				color: #999;
			}
		}

		.time-value {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #333;
			line-height: 88rpx;
			height: 88rpx;

			.value {
				margin-right: 16rpx;
			}

			.arrow {
				margin-left: 32rpx;
				color: #999;
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.arrow {
			color: #999;
		}
	}

	.agreement-card {
		margin: 0rpx 20rpx;
		background-color: #fff;
		border-radius: 32rpx;
		padding: 30rpx 20rpx;
		margin-bottom: 20rpx;

		.agreement-item {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.agreement-text {
				font-size: 28rpx;
				color: #333;
				margin-left: 10rpx;
			}
		}

		.price-notice {
			font-size: 24rpx;
			color: #ff7d00;
			text-align: center;
		}
	}

	.add-btn-container {
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		padding: 32rpx;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		box-sizing: border-box;

		/* 确定按钮 */
		.submit-btn {
			height: 88rpx;
			background: #1B64F0;
			border-radius: 44rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center
		}

	}




	.safe-area {
		height: 140rpx;
	}
</style>