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>