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">
					<text class="field-label">选择宠物</text>
					<text :class="['field-value', !formData.petName ? 'placeholder' : '']">{{ formData.petName ||
						'点击选择宠物档案' }}</text>
				</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>

					<!-- 接宠路线 -->
					<view class="route-box" v-if="formData.transportMode !== 'return_home'">
						<view class="route-icon pick"><text>接</text></view>
						<view class="route-fields">
							<input class="route-input" v-model="formData.pickArea" placeholder="省/市/区" />
							<input class="route-input" v-model="formData.pickAddress" 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>
							<input class="route-input" v-model="formData.pickTime" placeholder="选择接宠时间" />
						</view>
					</view>

					<view class="route-divider"><text class="divider-text">服务门店</text></view>

					<!-- 送宠路线 -->
					<view class="route-box" v-if="formData.transportMode !== 'pick_up'">
						<view class="route-icon send"><text>送</text></view>
						<view class="route-fields">
							<input class="route-input" v-model="formData.sendArea" placeholder="省/市/区" />
							<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>
							<input class="route-input" v-model="formData.sendTime" placeholder="预计送回时间(可选)" />
						</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>
					<input class="full-input" v-model="formData.serviceArea" placeholder="省/市/区" />
					<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>
							<input class="time-input" v-model="time.start" placeholder="开始时间" />
							<text class="to-line">~</text>
							<input class="time-input" v-model="time.end" placeholder="结束时间(可选)" />
							<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>
				<view class="popup-item" v-for="shop in shopList" :key="shop" @click="onShopSelect(shop)">
					<text>{{ shop }}</text>
				</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="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 }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import navBar from '@/components/nav-bar/index.vue'

const activeService = ref('transport')
const showShopPicker = ref(false)
const showUserPopup = ref(false)
const selectedUser = ref(null)

const currentServiceName = computed(() => {
	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(() => {
	const map = { transport: '专车接送 · 全程监护', feed: '喂食添水 · 陪玩遛狗', wash: '专业设备 · 深度清洁' }
	return map[activeService.value]
})

onLoad((options) => {
	if (options.service) activeService.value = options.service
})

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

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 shopList = ['爱宠生活馆 (三里屯店)', '爱宠生活馆 (国贸店)', '萌宠乐园 (朝阳大悦城店)']
const userList = [
	{ id: 1, name: '张先生', phone: '13800138000' },
	{ id: 2, name: '李小姐', phone: '13900139000' },
	{ id: 3, name: '王先生', phone: '13612345678' }
]

const onShopSelect = (shop) => { formData.shopName = shop; showShopPicker.value = false }
const onUserSelect = (user) => { selectedUser.value = user; showUserPopup.value = false }

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

const onSubmit = () => {
	if (!selectedUser.value) { uni.showToast({ title: '请先选择宠主用户', icon: 'none' }); return }
	if (!formData.quoteAmount) { uni.showToast({ title: '请输入报价金额', icon: 'none' }); return }
	uni.showLoading({ title: '正在提交订单...' })
	setTimeout(() => {
		uni.hideLoading()
		uni.showToast({ title: '下单成功', icon: 'success' })
		setTimeout(() => {
			uni.reLaunch({ url: '/pages/order/list/index' })
		}, 1500)
	}, 1500)
}
</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;
}

.route-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16rpx 0;
}

.route-divider::before,
.route-divider::after {
	content: '';
	flex: 1;
	height: 1rpx;
	background: #eee;
}

.divider-text {
	padding: 0 24rpx;
	font-size: 22rpx;
	color: #999;
}

.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;
}

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

.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;
	display: flex;
	align-items: center;
	box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
	z-index: 100;
}

.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;
}
</style>