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.id" :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.id" :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>
				<view class="item-control">
					<picker :range="expressTypes" :range-key="'label'" @change="onExpressTypeChange" :value="expressTypeIndex">
						<view class="picker-text">{{ expressTypes[expressTypeIndex]?.label || '请选择快递类型' }}</view>
					</picker>
					<u-icon class="arrow" name='arrow-right' size="18"></u-icon>
				</view>
			</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">增值服务</view>

		<!-- 物品信息 -->
		<view class="goods-card">
			<view class="goods-item">
				<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="!!insuranceAmount" @change="onInsuranceChange" />
				</view>
			</view>

			<view v-if="insuranceAmount" 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>

			<!-- 京东没有超长超重和打木架服务 -->
			<template v-if="product === '2'">
				<view class="goods-item">
					<view class="item-label">超长超重</view>
					<view class="item-control">
						<switch color="#007AFF" :checked="valueServices.isOverLongWeight" @change="onOverweightChange" />
					</view>
				</view>

				<view class="goods-item">
					<view class="item-label">打木架</view>
					<view class="item-control">
						<switch color="#007AFF" :checked="valueServices.isWoodenCrate" @change="onWoodenFrameChange" />
					</view>
				</view>
			</template>

			<view class="goods-item">
				<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>

		<!-- 协议同意 -->
		<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="submit-btn" :class="{ disabled: !agreed }" @click="submitOrder">
			提交订单
		</view>

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

		<!-- 时间选择弹窗 -->
		<TimePopup :visible="showTimePicker" @close="showTimePicker = false" @confirm="handleTimeConfirm" />
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		watch,
	} from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import TimePopup from './components/TimePopup.vue'
	import AddressInfo from '@/components/AddressInfo.vue'
	
	// 从本地存储获取地址信息
	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)
	}
	
	// 产品类型：1是京东，2是顺丰
	const product = ref('1')

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

	// 时间选择
	const showTimePicker = ref(false)
	const selectedTimeData = ref(null)

	// 快递类型相关
	const expressTypeIndex = ref(0)
	const expressTypes = ref([])
	
	// 快递类型数据字典
	const expressTypeDict = {
		'1': [ // 京东
			{ label: '特快', value: 'express' },
			{ label: '标快', value: 'standard' }
		],
		'2': [ // 顺丰
			{ label: '顺丰即日', value: 'sf_today' },
			{ label: '顺丰特快', value: 'sf_express' },
			{ label: '顺丰标快', value: 'sf_standard' },
			{ label: '顺丰次晨', value: 'sf_next_morning' },
			{ label: '顺丰标陆', value: 'sf_land' }
		]
	}

	// 增值服务
	const valueServices = ref({
		isPack: false,
		isOverLongWeight: false,
		isReceiptCollect: false,
		isWoodenCrate: false
	})
	
	// 签单返还类型（仅顺丰）
	const receiptReturnTypeIndex = ref(0)
	const receiptReturnTypes = ref([
		{ label: '电子凭证', value: 'electronic' },
		{ label: '纸质凭证', value: 'paper' }
	])
	
	// 保价金额
	const insuranceAmount = ref('')
	const insuranceAmountError = ref('')

	// 协议同意
	const agreed = ref(false)

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

	// 计算显示的时间标签
	const selectedTimeLabel = computed(() => {
		if (!selectedTimeData.value) return '请选择时间'

		const {
			dateLabel,
			timeLabel,
			isToday,
			isImmediate
		} = selectedTimeData.value

		if (isToday && isImmediate) {
			return '一小时内'
		}

		return `${dateLabel} ${timeLabel}`
	})

	// 监听product变化，更新快递类型
	watch(product, (newVal) => {
		expressTypes.value = expressTypeDict[newVal] || []
		expressTypeIndex.value = 0
		
		// 重置增值服务
		valueServices.value = {
			isPack: false,
			isOverLongWeight: false,
			isReceiptCollect: false,
			isWoodenCrate: false
		}
		insuranceAmount.value = ''
		receiptReturnTypeIndex.value = 0
	}, { immediate: true })

	// 重量操作
	const increaseWeight = () => {
		weight.value = parseFloat((weight.value + 0.5).toFixed(3))
		if (weight.value > 100) weight.value = 100
	}
	
	const decreaseWeight = () => {
		weight.value = parseFloat((weight.value - 0.5).toFixed(3))
		if (weight.value < 0.5) weight.value = 0.5
	}

	// 体积操作
	const increaseVolume = () => {
		volume.value = parseFloat((volume.value + 0.001).toFixed(3))
		if (volume.value > 10) volume.value = 10
	}
	
	const decreaseVolume = () => {
		volume.value = parseFloat((volume.value - 0.001).toFixed(3))
		if (volume.value < 0.001) volume.value = 0.001
	}

	// 件数操作
	const increaseQuantity = () => {
		quantity.value += 1
		if (quantity.value > 99) quantity.value = 99
	}
	
	const decreaseQuantity = () => {
		quantity.value -= 1
		if (quantity.value < 1) quantity.value = 1
	}

	// 快递类型选择
	const onExpressTypeChange = (e) => {
		expressTypeIndex.value = e.detail.value
	}

	// 物品信息输入
	const onGoodsInfoInput = (e) => {
		goodsInfo.value = e.detail.value
		if (goodsInfo.value.length > 50) {
			goodsInfo.value = goodsInfo.value.substring(0, 50)
		}
	}

	// 增值服务开关
	const onPackagingChange = (e) => {
		valueServices.value.isPack = e.detail.value
	}
	
	const onInsuranceChange = (e) => {
		if (e.detail.value) {
			insuranceAmount.value = '0'
		} else {
			insuranceAmount.value = ''
			insuranceAmountError.value = ''
		}
	}
	
	const onOverweightChange = (e) => {
		valueServices.value.isOverLongWeight = e.detail.value
	}
	
	const onSignReturnChange = (e) => {
		valueServices.value.isReceiptCollect = e.detail.value
	}
	
	const onWoodenFrameChange = (e) => {
		valueServices.value.isWoodenCrate = e.detail.value
	}
	
	// 签单返还类型选择
	const onReceiptReturnTypeChange = (e) => {
		receiptReturnTypeIndex.value = e.detail.value
	}

	// 时间选择确认
	const handleTimeConfirm = (time) => {
		selectedTimeData.value = time
		showTimePicker.value = false
		console.log('已选择时间:', time)
	}

	// 点击时间选择
	const handleTimeClick = () => {
		showTimePicker.value = true
	}

	// 打开地址簿
	const openAddressBook = (type) => {
		uni.navigateTo({
			url: `/pages/address/address_list?addType=${type}&from=order`
		})
	}
	
	// 添加新地址
	const handleAddAddress = (type) => {
		console.log('添加新地址')
		uni.navigateTo({
			url: `/pages/address/edit?addType=${type}`
		})
	}

	// 验证保价金额
	const validateInsuranceAmount = () => {
		if (!insuranceAmount.value) return true
		
		const amount = parseFloat(insuranceAmount.value)
		if (isNaN(amount) || amount < 0) {
			insuranceAmountError.value = '保价金额必须为数字且不能小于0'
			return false
		}
		
		if (amount > 1000000) {
			insuranceAmountError.value = '保价金额不能超过100万'
			return false
		}
		
		const decimalPart = insuranceAmount.value.toString().split('.')[1]
		if (decimalPart && decimalPart.length > 2) {
			insuranceAmountError.value = '保价金额最多保留两位小数'
			return false
		}
		
		insuranceAmountError.value = ''
		return true
	}

	// 重量输入处理
	const handleWeightInput = (e) => {
		let value = e.detail.value

		// 只允许数字和小数点
		value = value.replace(/[^\d.]/g, '')

		// 确保只有一个小数点
		const parts = value.split('.')
		if (parts.length > 2) {
			value = parts[0] + '.' + parts.slice(1).join('')
		}

		// 限制小数点后最多3位
		if (value.includes('.')) {
			const decimalPart = value.split('.')[1]
			if (decimalPart && decimalPart.length > 3) {
				value = parseFloat(value).toFixed(3)
			}
		}

		// 转换为数字，确保最小值
		const numValue = parseFloat(value) || 0.5
		weight.value = Math.max(0.5, Math.min(100, numValue))
	}

	// 体积输入处理
	const handleVolumeInput = (e) => {
		let value = e.detail.value

		// 只允许数字和小数点
		value = value.replace(/[^\d.]/g, '')

		// 确保只有一个小数点
		const parts = value.split('.')
		if (parts.length > 2) {
			value = parts[0] + '.' + parts.slice(1).join('')
		}

		// 限制小数点后最多3位
		if (value.includes('.')) {
			const decimalPart = value.split('.')[1]
			if (decimalPart && decimalPart.length > 3) {
				value = parseFloat(value).toFixed(3)
			}
		}

		// 转换为数字，确保最小值
		const numValue = parseFloat(value) || 0.001
		volume.value = Math.max(0.001, Math.min(10, numValue))
	}

	// 件数输入处理（整数）
	const handleQuantityInput = (e) => {
		let value = e.detail.value

		// 只允许数字
		value = value.replace(/\D/g, '')

		// 转换为整数
		const intValue = parseInt(value) || 1
		quantity.value = Math.max(1, Math.min(99, intValue))
	}

	// 切换协议同意
	const toggleAgreement = () => {
		agreed.value = !agreed.value
	}

	// 表单验证
	const validateForm = () => {
		if (!addressSend.value.id) {
			uni.showToast({
				title: '请选择寄件人地址',
				icon: 'none'
			})
			return false
		}
		
		if (!addressReceive.value.id) {
			uni.showToast({
				title: '请选择收件人地址',
				icon: 'none'
			})
			return false
		}
		
		if (!selectedTimeData.value) {
			uni.showToast({
				title: '请选择期望上门时间',
				icon: 'none'
			})
			return false
		}
		
		if (!goodsInfo.value.trim()) {
			uni.showToast({
				title: '请输入物品信息',
				icon: 'none'
			})
			return false
		}
		
		if (insuranceAmount.value && !validateInsuranceAmount()) {
			uni.showToast({
				title: insuranceAmountError.value,
				icon: 'none'
			})
			return false
		}
		
		if (product.value === '2' && valueServices.value.isReceiptCollect && receiptReturnTypes.value.length === 0) {
			uni.showToast({
				title: '请选择签单返还类型',
				icon: 'none'
			})
			return false
		}
		
		if (!agreed.value) {
			uni.showToast({
				title: '请同意服务协议',
				icon: 'none'
			})
			return false
		}
		
		return true
	}

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

		// 构建增值服务数据
		const addedService = {
			isPack: valueServices.value.isPack,
			guaranteeMoney: insuranceAmount.value ? parseFloat(insuranceAmount.value) : null
		}
		
		// 京东和顺丰的不同字段
		if (product.value === '1') {
			// 京东：签单返还
			addedService.isReceiptCollect = valueServices.value.isReceiptCollect
		} else {
			// 顺丰：超长超重、签单返还、打木架
			addedService.isOverLongWeight = valueServices.value.isOverLongWeight
			addedService.isReceiptCollect = valueServices.value.isReceiptCollect
			addedService.isWoodenCrate = valueServices.value.isWoodenCrate
			
			// 如果顺丰有签单返还，添加返还类型
			if (valueServices.value.isReceiptCollect && receiptReturnTypes.value[receiptReturnTypeIndex.value]) {
				addedService.receiptCollectType = receiptReturnTypes.value[receiptReturnTypeIndex.value].value
			}
		}

		const orderData = {
			orderType: product.value, // 1-非时效件(京东)，2-时效件(顺丰)
			senderName: addressSend.value.name,
			senderPhone: addressSend.value.phone,
			senderProvince: addressSend.value.provinceName,
			senderCity: addressSend.value.cityName,
			senderCounty: addressSend.value.countyName,
			senderAddress: addressSend.value.address,
			receiverName: addressReceive.value.name,
			receiverPhone: addressReceive.value.phone,
			receiverProvince: addressReceive.value.provinceName,
			receiverCity: addressReceive.value.cityName,
			receiverCounty: addressReceive.value.countyName,
			receiverAddress: addressReceive.value.address,
			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)
		}

		console.log('订单数据:', orderData)

		// 这里调用实际的API接口
		try {
			uni.showLoading({
				title: '提交中...'
			})
			
			// 模拟API调用
			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '下单成功',
					icon: 'success'
				})
				
				// 清空表单数据
				resetForm()
				
				// 跳转到订单列表
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/order/list'
					})
				}, 1500)
			}, 1500)
			
		} catch (error) {
			console.error('订单提交失败:', error)
			uni.showToast({
				title: '订单提交失败，请重试',
				icon: 'none'
			})
		}
	}
	
	// 重置表单
	const resetForm = () => {
		selectedTimeData.value = null
		goodsInfo.value = ''
		weight.value = 1
		volume.value = 0.001
		quantity.value = 1
		expressTypeIndex.value = 0
		valueServices.value = {
			isPack: false,
			isOverLongWeight: false,
			isReceiptCollect: false,
			isWoodenCrate: false
		}
		insuranceAmount.value = ''
		receiptReturnTypeIndex.value = 0
		agreed.value = false
	}
	
	// 页面加载
	onLoad((option) => {
		if (option.product) {
			product.value = option.product
		}
	})

	// 监听页面加载
	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)
			}
		})
	})
</script>

<style lang="scss" scoped>
	.order-container {
		min-height: 100vh;
		background-color: #F5F7FA;
		padding: 20rpx;
		padding-bottom: 180rpx;
		box-sizing: border-box;
	}

	.info-card {
		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;
				line-height: 88rpx;
				font-size: 28rpx;
				color: #1B64F0;
			}
		}

		.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-size: 400;
			}
		}
	}

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

	.goods-card {
		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 {
		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;
		}
	}

	.submit-btn {
		position: fixed;
		bottom: 40rpx;
		left: 30rpx;
		right: 30rpx;
		width: 686rpx;
		height: 88rpx;
		background: #1B64F0;
		border-radius: 44rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		z-index: 10;
		
		&.disabled {
			background: #f5f5f5;
			color: #999;
		}
	}

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