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

<template>
	<view class="order-detail-page">
		<!-- 订单号与状态 -->
		<view class="order-header">
			<view class="order-id-row">
				<text class="order-id">{{ order.id }}</text>
				<text :class="['status-badge', `badge-${order.statusKey}`]">{{ order.statusText }}</text>
				<text class="service-badge">{{ currentServiceName }}</text>
			</view>
		</view>

		<!-- 状态进度条 -->
		<view class="progress-card">
			<view class="progress-steps">
				<view v-for="(step, i) in progressSteps" :key="i"
					:class="['step-item', { done: step.done, active: step.active }]">
					<view class="step-circle">
						<uni-icons v-if="step.done" type="checkmarkempty" size="12" color="#fff"></uni-icons>
						<text v-else class="step-num">{{ i + 1 }}</text>
					</view>
					<view class="step-line" v-if="i < progressSteps.length - 1" :class="{ done: step.done }"></view>
					<text class="step-label">{{ step.label }}</text>
					<text class="step-time">{{ step.time }}</text>
				</view>
			</view>
		</view>

		<!-- 宠物档案 + 用户信息 -->
		<view class="info-row-cards">
			<view class="info-card pet-card">
				<text class="card-label">宠物档案</text>
				<view class="pet-header">
					<view class="pet-avatar"><text>{{ order.petName[0] }}</text></view>
					<view class="pet-basic">
						<text class="pet-name">{{ order.petName }} ♂</text>
						<view class="pet-tags">
							<text class="mini-tag">{{ order.petAge }}岁</text>
							<text class="mini-tag">{{ order.petWeight }}kg</text>
						</view>
					</view>
					<text class="breed-badge">{{ order.petBreed }}</text>
				</view>
				<view class="pet-attrs">
					<view class="attr-item">
						<text class="attr-label">绝育状态</text>
						<text class="attr-val">已绝育</text>
					</view>
					<view class="attr-item">
						<text class="attr-label">疫苗状态</text>
						<text class="attr-val highlight">已接种</text>
					</view>
					<view class="attr-item full">
						<text class="attr-label">性格特点</text>
						<text class="attr-val">活泼好动，喜欢球类玩具</text>
					</view>
				</view>
			</view>

			<view class="info-card user-card">
				<text class="card-label">用户信息</text>
				<view class="user-header">
					<view class="user-avatar">
						<uni-icons type="person" size="26" color="#aaa"></uni-icons>
					</view>
					<view class="user-basic">
						<text class="user-name-text">{{ order.userName }}</text>
						<text class="user-phone">{{ order.userPhone }}</text>
					</view>
				</view>
				<view class="service-address-box">
					<text class="addr-label">服务地址</text>
					<text class="addr-text">{{ order.address }}</text>
				</view>
			</view>
		</view>

		<!-- 标签页 -->
		<view class="detail-tabs-wrap">
			<view class="tab-nav">
				<view v-for="tab in tabList" :key="tab.name"
					:class="['tab-nav-item', { active: activeTab === tab.name }]"
					@click="activeTab = tab.name">
					<text>{{ tab.title }}</text>
				</view>
			</view>

			<!-- 订单基础信息 -->
			<view class="tab-content" v-if="activeTab === 'base'">
				<view class="base-info-grid">
					<view class="bi-item" v-for="item in baseInfoList" :key="item.label">
						<text class="bi-label">{{ item.label }}</text>
						<text :class="['bi-val', item.highlight ? 'highlight' : '']">{{ item.value }}</text>
					</view>
				</view>

				<template v-if="activeService === 'transport'">
					<text class="sub-title">接送任务详情</text>
					<view class="route-block">
						<view class="route-header">
							<text class="route-tag pick">宠物接送</text>
							<text class="route-tag arrow">接</text>
							<text class="route-time">{{ order.pickTime }}</text>
						</view>
						<view class="route-addr">
							<uni-icons type="location" size="14" color="#999"></uni-icons>
							<text>{{ order.pickAddress }}</text>
						</view>
					</view>
					<view class="route-block">
						<view class="route-header">
							<text class="route-tag send">宠物接送</text>
							<text class="route-tag arrow send-arrow">送</text>
							<text class="route-time">{{ order.sendTime }}</text>
						</view>
						<view class="route-addr">
							<uni-icons type="location" size="14" color="#999"></uni-icons>
							<text>{{ order.sendAddress }}</text>
						</view>
					</view>
				</template>
				<template v-else>
					<text class="sub-title">上门服务地址</text>
					<view class="route-block">
						<view class="route-addr">
							<uni-icons type="location" size="14" color="#999"></uni-icons>
							<text>{{ order.address }}</text>
						</view>
					</view>
				</template>
			</view>

			<!-- 指派履约者 -->
			<view class="tab-content" v-if="activeTab === 'assignee'">
				<view class="empty-state" v-if="order.statusKey === 'wait_dispatch'">
					<uni-icons type="clock" size="40" color="#ccc"></uni-icons>
					<text class="empty-text">等待派单中...</text>
				</view>
				<view class="assignee-card" v-else>
					<view class="assignee-header">
						<view class="assignee-avatar">
							<uni-icons type="person" size="30" color="#aaa"></uni-icons>
						</view>
						<view class="assignee-info">
							<text class="assignee-name">{{ order.assigneeName }}</text>
							<text class="assignee-phone">联系电话：13812345678</text>
							<text class="assignee-zone">归属区域：朝阳服务站</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 服务进度 -->
			<view class="tab-content" v-if="activeTab === 'progress'">
				<view class="empty-state" v-if="['wait_dispatch', 'wait_accept'].includes(order.statusKey)">
					<uni-icons type="info" size="40" color="#ccc"></uni-icons>
					<text class="empty-text">服务尚未开始</text>
				</view>
				<view class="timeline" v-else>
					<view class="tl-item" v-for="(tl, i) in serviceTimeline" :key="i">
						<view class="tl-dot"></view>
						<view class="tl-body">
							<text class="tl-time">{{ tl.time }}</text>
							<text class="tl-title">{{ tl.title }}</text>
							<text class="tl-desc">{{ tl.desc }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 订单日志 -->
			<view class="tab-content" v-if="activeTab === 'log'">
				<view class="timeline">
					<view class="tl-item" v-for="(log, i) in orderLogs" :key="i">
						<view class="tl-dot log-dot"></view>
						<view class="tl-body">
							<text class="tl-time">{{ log.time }}</text>
							<text class="tl-title">{{ log.title }}</text>
							<text class="tl-desc">{{ log.desc }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部取消按钮 -->
		<view class="cancel-bar safe-bottom" v-if="['wait_dispatch', 'wait_accept'].includes(order.statusKey)">
			<button class="cancel-order-btn" @click="onCancelOrder">取消订单</button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const activeTab = ref('base')
const activeService = ref('transport')

const tabList = [
	{ title: '基础信息', name: 'base' },
	{ title: '履约者', name: 'assignee' },
	{ title: '服务进度', name: 'progress' },
	{ title: '订单日志', name: 'log' }
]

const currentServiceName = computed(() => {
	const map = { transport: '宠物接送', feed: '上门喂遛', wash: '上门洗护' }
	return map[activeService.value]
})

onLoad((options) => {
	if (options.service) activeService.value = options.service
	if (options.status) {
		const statusTextMap = { wait_dispatch: '待派单', wait_accept: '待接单', serving: '服务中', done: '已完成', cancel: '已取消' }
		order.statusKey = options.status
		order.statusText = statusTextMap[options.status] || '服务中'
	}
	if (options.cancelTime) order.cancelTime = decodeURIComponent(options.cancelTime)
})

const order = reactive({
	id: 'ORD202402048803',
	statusKey: 'serving',
	statusText: '服务中',
	petName: 'Cookie',
	petBreed: '柯基',
	petAge: 2,
	petWeight: 15,
	userName: '王先生',
	userPhone: '13612345678',
	address: '北京市朝阳区 某小区5号楼2单元101',
	shopName: '爱宠生活馆 (中关村店)',
	createTime: '2024-02-04 12:00',
	bookTime: '2024-02-04 18:00',
	packageName: '新春特惠接送套餐',
	remark: '暂无备注',
	assigneeName: '张小美',
	cancelTime: '',
	pickAddress: '北京市朝阳区三里屯SOHO 6号楼',
	pickTime: '2024-02-04 09:30',
	sendAddress: '北京市朝阳区某小区5号楼2单元101',
	sendTime: '2024-02-04 18:00'
})

const progressSteps = computed(() => {
	const statusOrder = ['wait_dispatch', 'wait_accept', 'serving', 'done']
	const currentIdx = statusOrder.indexOf(order.statusKey)
	const allSteps = [
		{ label: '商户下单', time: '02-04' },
		{ label: '运营派单', time: '02-04' },
		{ label: '履约接单', time: '02-05' },
		{ label: '服务中', time: '02-04' },
		{ label: '已完成', time: '' }
	]
	if (order.statusKey === 'cancel') return allSteps.map((s, i) => ({ ...s, done: i === 0, active: false }))
	return allSteps.map((s, i) => ({ ...s, done: i <= currentIdx, active: i === currentIdx + 1 }))
})

const baseInfoList = computed(() => {
	const list = [
		{ label: '系统单号', value: order.id },
		{ label: '服务类型', value: currentServiceName.value },
		{ label: '归属门店', value: order.shopName },
		{ label: '宠主信息', value: `${order.userName} / ${order.userPhone}` },
		{ label: '预约时间', value: order.bookTime },
		{ label: '团购套餐', value: order.packageName },
		{ label: '创建时间', value: order.createTime },
		{ label: '订单备注', value: order.remark }
	]
	if (order.statusKey === 'cancel') list.push({ label: '取消时间', value: order.cancelTime || '2024-02-02 11:30', highlight: true })
	return list
})

const serviceTimeline = [
	{ time: '2024-02-04 09:30', title: '已接单', desc: '履约者 张小美 已确认接单' },
	{ time: '2024-02-04 09:50', title: '到达打卡', desc: '已到达指定位置' },
	{ time: '2024-02-04 10:10', title: '确认出发', desc: '接到宠物，状态良好' }
]

const orderLogs = [
	{ time: '2024-02-04 09:30', title: '订单创建', desc: '商户提交订单' },
	{ time: '2024-02-04 10:00', title: '系统派单', desc: '指派给 张小美' },
	{ time: '2024-02-04 10:05', title: '接单成功', desc: '履约者已确认接单' },
	{ time: '2024-02-04 13:55', title: '到达服务点', desc: '履约者到达服务地址' }
]

const onCancelOrder = () => {
	uni.showModal({
		title: '取消订单',
		content: `确定要取消订单 [${order.id}] 吗？`,
		confirmText: '确认取消',
		confirmColor: '#f44336',
		success: (res) => {
			if (res.confirm) {
				order.statusKey = 'cancel'
				order.statusText = '已取消'
				uni.showToast({ title: '订单已取消', icon: 'success' })
				setTimeout(() => uni.navigateBack(), 1000)
			}
		}
	})
}
</script>

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

.order-header { padding: 24rpx 32rpx 16rpx; }
.order-id-row { display: flex; align-items: center; gap: 16rpx; flex-wrap: wrap; }
.order-id { font-size: 26rpx; color: #666; font-family: monospace; }
.status-badge { font-size: 22rpx; padding: 4rpx 16rpx; border-radius: 20rpx; font-weight: 600; }
.badge-wait_dispatch { background: #fff0f0; color: #f44336; }
.badge-wait_accept { background: #fff8e1; color: #ff9800; }
.badge-serving { background: #e3f2fd; color: #2196f3; }
.badge-done { background: #e8f5e9; color: #4caf50; }
.badge-cancel { background: #f5f5f5; color: #9e9e9e; }
.service-badge { font-size: 22rpx; padding: 4rpx 16rpx; border-radius: 20rpx; background: #fff3e0; color: #ff9500; }

.progress-card { background: #fff; margin: 0 24rpx 24rpx; border-radius: 28rpx; padding: 32rpx 16rpx 24rpx; }
.progress-steps { display: flex; align-items: flex-start; }
.step-item { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; z-index: 1; }
.step-circle { width: 44rpx; height: 44rpx; border-radius: 50%; background: #e0e0e0; display: flex; align-items: center; justify-content: center; margin-bottom: 8rpx; }
.step-num { font-size: 20rpx; color: #fff; }
.step-item.done .step-circle, .step-item.active .step-circle { background: #ff9500; }
.step-line { position: absolute; top: 22rpx; left: 50%; width: 100%; height: 4rpx; background: #e0e0e0; z-index: 0; }
.step-line.done { background: #ff9500; }
.step-label { font-size: 20rpx; color: #999; text-align: center; }
.step-item.done .step-label, .step-item.active .step-label { color: #ff9500; font-weight: 600; }
.step-time { font-size: 18rpx; color: #bbb; margin-top: 4rpx; }

.info-row-cards { display: flex; gap: 20rpx; margin: 0 24rpx 24rpx; }
.info-card { flex: 1; background: #fff; border-radius: 28rpx; padding: 24rpx; min-width: 0; }
.card-label { display: block; font-size: 24rpx; font-weight: 700; color: #333; margin-bottom: 20rpx; border-left: 6rpx solid #ff9500; padding-left: 12rpx; }
.pet-header { display: flex; align-items: center; gap: 16rpx; margin-bottom: 20rpx; }
.pet-avatar { width: 72rpx; height: 72rpx; border-radius: 20rpx; background: #e3f2fd; color: #2196f3; font-size: 36rpx; font-weight: bold; display: flex; align-items: center; justify-content: center; }
.pet-basic { flex: 1; min-width: 0; }
.pet-name { display: block; font-size: 28rpx; font-weight: bold; color: #222; }
.pet-tags { display: flex; gap: 8rpx; margin-top: 6rpx; }
.mini-tag { font-size: 20rpx; background: #f5f5f5; border-radius: 8rpx; padding: 2rpx 10rpx; color: #666; }
.breed-badge { font-size: 20rpx; background: #ffe0b2; color: #e65100; border-radius: 8rpx; padding: 4rpx 12rpx; }
.pet-attrs { display: flex; flex-wrap: wrap; gap: 12rpx 0; }
.attr-item { width: 50%; }
.attr-item.full { width: 100%; }
.attr-label { display: block; font-size: 20rpx; color: #aaa; }
.attr-val { display: block; font-size: 22rpx; color: #333; }
.attr-val.highlight { color: #4caf50; }
.user-header { display: flex; align-items: center; gap: 16rpx; margin-bottom: 20rpx; }
.user-avatar { width: 80rpx; height: 80rpx; border-radius: 50%; background: #f5f5f5; display: flex; align-items: center; justify-content: center; }
.user-name-text { display: block; font-size: 28rpx; font-weight: bold; color: #222; }
.user-phone { display: block; font-size: 24rpx; color: #666; }
.service-address-box { background: #fff8f0; border-radius: 16rpx; padding: 16rpx; }
.addr-label { display: block; font-size: 20rpx; color: #ff9500; margin-bottom: 6rpx; }
.addr-text { display: block; font-size: 22rpx; color: #333; line-height: 1.5; }

.detail-tabs-wrap { margin: 0 24rpx; background: #fff; border-radius: 28rpx; overflow: hidden; }
.tab-nav { display: flex; border-bottom: 1rpx solid #f0f0f0; }
.tab-nav-item { flex: 1; text-align: center; padding: 24rpx 0; font-size: 24rpx; color: #666; position: relative; }
.tab-nav-item.active { color: #ff9500; font-weight: bold; }
.tab-nav-item.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 48rpx; height: 6rpx; background: #ff9500; border-radius: 6rpx; }
.tab-content { padding: 28rpx; min-height: 280rpx; }

.base-info-grid { display: flex; flex-wrap: wrap; gap: 20rpx; margin-bottom: 32rpx; }
.bi-item { width: calc(50% - 10rpx); background: #f8f8f8; border-radius: 16rpx; padding: 16rpx 20rpx; }
.bi-label { display: block; font-size: 20rpx; color: #aaa; margin-bottom: 6rpx; }
.bi-val { display: block; font-size: 24rpx; color: #333; font-weight: 500; }
.bi-val.highlight { color: #f44336; }
.sub-title { display: block; font-size: 26rpx; font-weight: 700; color: #333; margin-bottom: 20rpx; padding-left: 12rpx; border-left: 6rpx solid #ff9500; }

.route-block { background: #f9f9f9; border-radius: 20rpx; padding: 20rpx 24rpx; margin-bottom: 20rpx; }
.route-header { display: flex; align-items: center; gap: 12rpx; margin-bottom: 16rpx; }
.route-tag { font-size: 22rpx; padding: 4rpx 12rpx; border-radius: 8rpx; }
.route-tag.pick { background: #e3f2fd; color: #2196f3; }
.route-tag.send { background: #e8f5e9; color: #4caf50; }
.route-tag.arrow { background: #2196f3; color: #fff; }
.route-tag.send-arrow { background: #4caf50; }
.route-time { font-size: 22rpx; color: #ff9500; margin-left: auto; }
.route-addr { display: flex; align-items: center; gap: 8rpx; font-size: 24rpx; color: #555; }

.assignee-card { background: #f9f9f9; border-radius: 24rpx; padding: 28rpx; }
.assignee-header { display: flex; gap: 24rpx; }
.assignee-avatar { width: 100rpx; height: 100rpx; border-radius: 50%; background: #e0e0e0; display: flex; align-items: center; justify-content: center; }
.assignee-name { display: block; font-size: 30rpx; font-weight: bold; color: #222; margin-bottom: 8rpx; }
.assignee-phone, .assignee-zone { display: block; font-size: 24rpx; color: #666; margin-bottom: 4rpx; }

.timeline { position: relative; padding-left: 40rpx; }
.tl-item { position: relative; margin-bottom: 40rpx; padding-left: 32rpx; }
.tl-dot { position: absolute; left: -12rpx; top: 8rpx; width: 24rpx; height: 24rpx; border-radius: 50%; background: #ff9500; border: 4rpx solid #fff; box-shadow: 0 0 0 4rpx #ff9500; }
.tl-item::before { content: ''; position: absolute; left: -2rpx; top: 32rpx; bottom: -40rpx; width: 4rpx; background: #f0f0f0; }
.tl-item:last-child::before { display: none; }
.tl-time { display: block; font-size: 22rpx; color: #aaa; margin-bottom: 6rpx; }
.tl-title { display: block; font-size: 28rpx; font-weight: 600; color: #222; margin-bottom: 6rpx; }
.tl-desc { display: block; font-size: 24rpx; color: #666; }
.log-dot { background: #e0e0e0; box-shadow: 0 0 0 4rpx #e0e0e0; }

.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80rpx 0; gap: 24rpx; }
.empty-text { font-size: 26rpx; color: #bbb; }

.cancel-bar { position: fixed; bottom: 0; left: 0; right: 0; padding: 24rpx 32rpx; background: rgba(255,255,255,0.95); box-shadow: 0 -8rpx 28rpx rgba(0,0,0,0.08); z-index: 100; }
.cancel-order-btn { width: 100%; height: 96rpx; font-size: 32rpx; font-weight: 600; border: 2rpx solid #f44336; color: #f44336; background: transparent; border-radius: 48rpx; line-height: 96rpx; }
</style>