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

<template>
	<view class="order-detail-page">
		<nav-bar title="订单详情"></nav-bar>
		<!-- 订单号与状态 -->
		<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>

				<!-- 接送任务详情 -->
				<block v-if="order.type === 'transport'">
					<text class="sub-title">接送任务详情</text>
					<view class="task-card transport-card">
						<view class="task-header">
							<text class="type-tag" :class="getTransportClass(order.subOrderType)">
								{{ getTransportLabel(order.subOrderType) }}
							</text>
							<text class="task-time">{{ order.serviceTime }}</text>
						</view>
						<view class="task-body">
							<view class="task-row">
								<text class="task-label">起点</text>
								<text class="task-value">{{ order.fromAddress || '获取中...' }}</text>
							</view>
							<view class="task-row">
								<text class="task-label">终点</text>
								<text class="task-value">{{ order.toAddress || '获取中...' }}</text>
							</view>
							<view class="task-row contact-row">
								<text class="task-value">{{ order.userName }} — {{ order.userPhone }}</text>
							</view>
						</view>
					</view>
				</block>

				<!-- 上门服务执行要求 -->
				<block v-if="['feeding', 'washing'].includes(order.type)">
					<text class="sub-title">服务执行要求</text>
					<view class="task-card req-card">
						<view class="req-item">
							<text class="req-label">服务地址</text>
							<text class="req-value">{{ order.address }}</text>
						</view>
					</view>
				</block>
			</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, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import navBar from '@/components/nav-bar/index.vue'
import { getSubOrderInfo } from '@/api/order/subOrder'
import { getPet } from '@/api/archieves/pet'
import { getCustomer } from '@/api/archieves/customer'
import { listSubOrderLog } from '@/api/order/subOrderLog'
import { listComplaintByOrder } from '@/api/fulfiller/complaint'

const activeTab = ref('base')
const activeService = ref('transport')
const orderId = ref('')
const loading = ref(false)

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]
})

const order = reactive({
	id: '',
	code: '',
	statusKey: 'serving',
	statusText: '服务中',
	status: 2,
	petName: '',
	petBreed: '',
	petAge: '',
	petWeight: '',
	petGender: '',
	petVaccine: '',
	petCharacter: '',
	petHealth: '',
	userName: '',
	userPhone: '',
	address: '',
	shopName: '',
	createTime: '',
	bookTime: '',
	packageName: '',
	remark: '',
	assigneeName: '',
	cancelTime: '',
	pickAddress: '',
	pickTime: '',
	sendAddress: '',
	sendTime: '',
	fromAddress: '',
	toAddress: '',
	type: 'transport', // 对应后端 transport/feeding/washing
	subOrderType: 0,   // 接送子类型
	service: '',
	pet: '',
	customer: '',
	fulfiller: '',
	fulfillerName: ''
})

const orderLogsData = ref([])
const fulfillerLogsData = ref([])
const complaintList = ref([])

const loadOrderDetail = async (id) => {
	if (!id) return
	loading.value = true
	try {
		const res = await getSubOrderInfo(id)
		console.log('订单详情返回:', res)
		if (res) {
			Object.assign(order, res)
			order.code = res.code || res.id
			order.status = res.status
			order.statusKey = getStatusKey(res.status)
			order.statusText = getStatusName(res.status)
			order.bookTime = res.serviceTime || ''
			order.shopName = res.storeName || ''
			order.userName = res.customerName || ''
			order.userPhone = res.contactPhoneNumber || ''
			order.assigneeName = res.fulfillerName || ''
			order.remark = res.remark || '暂无备注'
			order.fromAddress = res.fromAddress || ''
			order.toAddress = res.toAddress || ''
			order.type = res.type || 'transport'
			order.subOrderType = res.subOrderType

			if (res.pet) await loadPetInfo(res.pet)
			if (res.customer) await loadCustomerInfo(res.customer)
			await loadOrderLogs(id)
			await loadComplaints(id)
		}
	} catch (error) {
		console.error('加载订单详情失败:', error)
		uni.showToast({ title: '加载失败', icon: 'none' })
	} finally {
		loading.value = false
	}
}

const loadPetInfo = async (petId) => {
	try {
		const res = await getPet(petId)
		if (res) {
			order.petName = res.name || order.petName
			order.petBreed = res.breed || order.petBreed
			order.petAge = res.age ? `${res.age}岁` : order.petAge
			order.petWeight = res.weight ? `${res.weight}kg` : order.petWeight
			order.petGender = res.gender || order.petGender
			order.petVaccine = res.vaccineStatus || '未知'
			order.petCharacter = res.personality || '温顺'
			order.petHealth = res.healthStatus || '健康'
		}
	} catch (error) {
		console.error('加载宠物信息失败:', error)
	}
}

const loadCustomerInfo = async (customerId) => {
	try {
		const res = await getCustomer(customerId)
		if (res) {
			order.userName = res.name || order.userName
			order.userPhone = res.phone || order.userPhone
			order.address = res.address || order.address
		}
	} catch (error) {
		console.error('加载客户信息失败:', error)
	}
}

const loadOrderLogs = async (id) => {
	try {
		const res = await listSubOrderLog({ orderId: id })
		const list = res || []
		orderLogsData.value = list.filter(i => Number(i?.logType) === 0)
		fulfillerLogsData.value = list.filter(i => Number(i?.logType) === 1)
	} catch (error) {
		console.error('加载订单日志失败:', error)
		orderLogsData.value = []
		fulfillerLogsData.value = []
	}
}

const loadComplaints = async (id) => {
	try {
		const res = await listComplaintByOrder(id)
		complaintList.value = res || []
	} catch (error) {
		console.error('加载投诉记录失败:', error)
		complaintList.value = []
	}
}

const getStatusKey = (status) => {
	const map = { 0: 'wait_dispatch', 1: 'wait_accept', 2: 'serving', 3: 'confirming', 4: 'done', 5: 'cancel' }
	return map[status] || 'serving'
}

const getStatusName = (status) => {
	const map = { 0: '待派单', 1: '待接单', 2: '服务中', 3: '待商家确认', 4: '已完成', 5: '已取消' }
	return map[status] || '未知'
}

const getTransportLabel = (t) => {
	if (t === 0 || t === '0') return '接'
	if (t === 1 || t === '1') return '送'
	if (t === 2 || t === '2') return '单程接'
	if (t === 3 || t === '3') return '单程送'
	return '接送'
}

const getTransportClass = (t) => {
	if (t === 0 || t === '0' || t === 2 || t === '2') return 'tag-blue'
	return 'tag-orange'
}

const getTypeName = (type) => {
	const map = { transport: '宠物接送', feeding: '上门喂遛', washing: '上门洗护' }
	return map[type] || '未知服务'
}

onLoad((options) => {
	// 防御性校验：id 必须是有效值（非空、非字符串 "undefined"）
	if (options.id && options.id !== 'undefined') {
		orderId.value = options.id
		console.log('订单详情页：接收到的订单ID =', options.id)
		loadOrderDetail(options.id)
	} else {
		console.error('订单详情页：缺少有效的订单ID，options =', options)
		uni.showToast({ title: '订单ID无效', icon: 'none' })
	}
	if (options.service) activeService.value = options.service
})

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;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.bi-label {
	display: block;
	font-size: 20rpx;
	color: #aaa;
	margin-bottom: 8rpx;
}

.bi-val {
	display: block;
	font-size: 24rpx;
	color: #333;
	font-weight: 500;
	word-break: break-all;
	line-height: 1.4;
}

.bi-val.highlight {
	color: #f44336;
}

.sub-title {
	display: block;
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin: 12rpx 0 24rpx;
}

/* 任务卡片样式 */
.task-card {
	padding: 24rpx;
	background: #fff;
	border: 1rpx solid #f0f0f0;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.02);
}

.task-header {
	display: flex;
	align-items: center;
	gap: 16rpx;
	margin-bottom: 20rpx;
}

.type-tag {
	font-size: 22rpx;
	padding: 4rpx 12rpx;
	border-radius: 6rpx;
	border: 1rpx solid;
}

.tag-blue {
	color: #007aff;
	background: #eef6ff;
	border-color: #007aff;
}

.tag-orange {
	color: #ff9500;
	background: #fff8f0;
	border-color: #ff9500;
}

.task-time {
	font-size: 26rpx;
	font-weight: bold;
	color: #f56c6c;
}

.task-body {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.task-row {
	display: flex;
	align-items: flex-start;
	gap: 20rpx;
}

.task-label {
	width: 60rpx;
	font-size: 24rpx;
	color: #999;
	flex-shrink: 0;
}

.task-value {
	font-size: 26rpx;
	color: #333;
	line-height: 1.4;
}

.contact-row {
	margin-top: 8rpx;
	padding-top: 8rpx;
}

.contact-row .task-value {
	color: #999;
}

/* 执行要求卡片 */
.req-card {
	background: #f9f9f9;
	border: none;
}

.req-item {
	display: flex;
	align-items: center;
}

.req-label {
	width: 140rpx;
	font-size: 24rpx;
	color: #333;
}

.req-value {
	flex: 1;
	font-size: 26rpx;
	color: #333;
}

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