rtliveDoctor/pages_user/serviceOrder.vue

<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="nav-left" @click="goBack">
				<text class="back-icon"><</text>
			</view>
			<view class="nav-title">服务单</view>
			<view class="nav-right">
				<text class="more-icon">...</text>
				<text class="eye-icon">O</text>
			</view>
		</view>
		
		<!-- 标签页 -->
		<view class="tabs">
			<view class="tab-item" :class="{ active: activeTab === 'pending' }" @click="switchTab('pending')">
				<text>待确认</text>
				<view class="tab-indicator" v-if="activeTab === 'pending'"></view>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'confirmed' }" @click="switchTab('confirmed')">
				<text>已确认</text>
				<view class="tab-indicator" v-if="activeTab === 'confirmed'"></view>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<scroll-view class="content" scroll-y @scrolltolower="loadMore">
			<view class="order-list">
				<view class="month-group" v-for="(group, groupIndex) in groupedOrders" :key="groupIndex">
					<view class="month-header">
						<view class="month-icon">○</view>
						<text class="month-text">{{ group.month }}</text>
					</view>
					<view class="order-items">
						<view class="order-item" v-for="(item, index) in group.items" :key="index" @click="goToDetail(item)">
							<view class="order-content">
								<view class="order-title">服务确认单</view>
								<view class="order-time">{{ item.createTime }}</view>
							</view>
							<view class="order-action" v-if="activeTab === 'pending'">
								<view class="confirm-btn" @click.stop="goToConfirm(item)">去确认</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-state" v-if="groupedOrders.length === 0">
				<text>暂无数据</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { getServiceOrderList } from '@/api-js/serviceOrder'
export default {
	data() {
		return {
			activeTab: 'pending', // pending: 待确认, confirmed: 已确认
			orderList: [],
			page: 1,
			pageSize: 20,
			hasMore: true
		}
	},
	computed: {
		// 按月份分组订单
		groupedOrders() {
			const groups = {}
			this.orderList.forEach(item => {
				const month = item.createTime ? item.createTime.substring(0, 7) : '未知'
				if (!groups[month]) {
					groups[month] = {
						month: month,
						items: []
					}
				}
				groups[month].items.push(item)
			})
			// 转换为数组并按月份倒序排列
			return Object.values(groups).sort((a, b) => {
				return b.month.localeCompare(a.month)
			})
		}
	},
	onLoad() {
		this.loadData()
	},
	methods: {
		async loadData(refresh = false) {
			if (refresh) {
				this.page = 1
				this.hasMore = true
			}
			
			if (!this.hasMore) return
			
			try {
				uni.showLoading({ title: '加载中...' })
				const res = await getServiceOrderList({
					status: this.activeTab === 'pending' ? 0 : 1, // 0: 待确认, 1: 已确认
					page: this.page,
					pageSize: this.pageSize
				})
				uni.hideLoading()
				
				if (res.code === 200 && res.data) {
					const list = res.data.list || []
					if (refresh) {
						this.orderList = list
					} else {
						this.orderList = [...this.orderList, ...list]
					}
					
					this.hasMore = list.length >= this.pageSize
					if (this.hasMore) {
						this.page++
					}
				} else {
					// 使用示例数据
					this.orderList = this.getDefaultData()
				}
			} catch (e) {
				uni.hideLoading()
				console.error('加载服务单列表失败', e)
				this.orderList = this.getDefaultData()
			}
		},
		getDefaultData() {
			// 示例数据
			const list = []
			const currentDate = new Date()
			for (let i = 0; i < 3; i++) {
				const date1 = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 23, 16, 0, 0)
				list.push({
					id: `order_${i + 1}`,
					title: '服务确认单',
					createTime: this.formatDate(date1),
					status: this.activeTab === 'pending' ? 0 : 1
				})
			}
			for (let i = 0; i < 3; i++) {
				const date2 = new Date(currentDate.getFullYear(), currentDate.getMonth() - 2, 23, 16, 0, 0)
				list.push({
					id: `order_${i + 4}`,
					title: '服务确认单',
					createTime: this.formatDate(date2),
					status: this.activeTab === 'pending' ? 0 : 1
				})
			}
			return list
		},
		formatDate(date) {
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			const hours = String(date.getHours()).padStart(2, '0')
			const minutes = String(date.getMinutes()).padStart(2, '0')
			const seconds = String(date.getSeconds()).padStart(2, '0')
			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
		},
		switchTab(tab) {
			if (this.activeTab === tab) return
			this.activeTab = tab
			this.loadData(true)
		},
		loadMore() {
			this.loadData(false)
		},
		goBack() {
			uni.navigateBack()
		},
		goToDetail(item) {
			uni.navigateTo({
				url: `/pages_user/serviceOrderDetail?id=${item.id}&status=${item.status}`
			})
		},
		goToConfirm(item) {
			uni.navigateTo({
				url: `/pages_user/serviceOrderDetail?id=${item.id}&status=0`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #f5f5f5;
	display: flex;
	flex-direction: column;
}

.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 24rpx;
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	
	.nav-left {
		width: 60rpx;
		
		.back-icon {
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
		}
	}
	
	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.nav-right {
		display: flex;
		align-items: center;
		gap: 24rpx;
		width: 60rpx;
		justify-content: flex-end;
		
		.more-icon {
			font-size: 32rpx;
			color: #333;
		}
		
		.eye-icon {
			font-size: 32rpx;
			color: #333;
		}
	}
}

.tabs {
	display: flex;
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	
	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 24rpx 0;
		position: relative;
		
		text {
			font-size: 30rpx;
			color: #999;
		}
		
		&.active {
			text {
				color: #333;
				font-weight: 500;
			}
			
			.tab-indicator {
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 60rpx;
				height: 4rpx;
				background: #388BFF;
				border-radius: 2rpx;
			}
		}
	}
}

.content {
	flex: 1;
}

.order-list {
	padding: 24rpx;
}

.month-group {
	margin-bottom: 32rpx;
	
	&:last-child {
		margin-bottom: 0;
	}
	
	.month-header {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
		
		.month-icon {
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background: #ccc;
			margin-right: 16rpx;
		}
		
		.month-text {
			font-size: 28rpx;
			color: #666;
		}
	}
	
	.order-items {
		.order-item {
			background: #fff;
			border-radius: 16rpx;
			padding: 32rpx 24rpx;
			margin-bottom: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.order-content {
				flex: 1;
				
				.order-title {
					font-size: 32rpx;
					font-weight: 500;
					color: #333;
					margin-bottom: 12rpx;
				}
				
				.order-time {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.order-action {
				.confirm-btn {
					padding: 12rpx 32rpx;
					background: #388BFF;
					border-radius: 44rpx;
					font-size: 26rpx;
					color: #fff;
				}
			}
		}
	}
}

.empty-state {
	padding: 120rpx 24rpx;
	text-align: center;
	font-size: 28rpx;
	color: #999;
}
</style>