jd_logistics/jd_logistics-app/pages/order/index.vue

<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search-section">
			<u-search v-model="searchKeyword" placeholder="请输入订单编号或用户名称" :show-action="false" shape="square"
				bg-color="#F5F7FA" @search="handleSearch" @clear="handleSearch"></u-search>
		</view>

		<!-- Tab切换 -->
		<!-- <view class="tabs-section"> -->
		<!-- 	<view class="custom-tabs">
				<view class="tab-item" :class="{ active: currentTab == index }" v-for="(tab, index) in tabList"
					:key="index" @click="switchTab(index)">
					{{ tab.name }}
				</view>
			</view> -->
		<!-- </view> -->

		<!-- 订单列表 -->
		<view class="order-list" @scrolltolower="loadMore">
			<view v-if="ordersList.length" v-for="order in ordersList" :key="order.id">
				<OrderItem :order-detail="order" @success="getOrderList()"></OrderItem>
			</view>
			<view class="empty-state" v-else>
				<u-icon class="empty-icon" name="list" size="60" color="#ccc"></u-icon>
				<view class="empty-text">暂无相关订单</view>
			</view>

			<view class="load-more-status" v-if="loadFinished && ordersList.length !== 0">
				<text>没有更多数据了</text>
			</view>

			<!-- 加载状态提示 -->
			<view class="load-more-status" v-if="loadState">
				<text>加载中...</text>
			</view>

		</view>


	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onShow,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app' // 导入 UniApp 的生命周期
	import OrderItem from './components/OrderItem.vue'
	import { getOrderListApi } from '../../api/order'

	// 搜索关键词
	const searchKeyword = ref('')
	const pageNum = ref(1)
	const pageSize = ref(10)
	const recordTotal = ref(0)
	const loadState = ref(false)
	const loadFinished = ref(false)

	// Tab数据
	const tabList = ref([{
			name: '全部订单'
		},
		{
			name: '待确认'
		},
		{
			name: '已完成'
		},
		{
			name: '申请退款'
		}
	])
	// 1-全部订单, 2-待确认,  4-已完成, 5-申请退款
	//orderType: 订单类型（1-全部订单, 2-待确认, 3-待核销, 4-已完成, 5-申请退款, 6-服务中）
	const orderTypeMap = {
		0: 1, // 全部订单
		1: 2, // 待确认 
		2: 4, // 已完成  
		3: 5, // 申请退款  
	}

	// 当前选中的Tab
	const currentTab = ref(0)

	// 订单数据
	const ordersList = ref([])


	// 获取状态类名
	const getStatusClass = (status) => {
		switch (status) {
			case 0:
				return 'status-pending' // 待派单
			case 1:
				return 'status-assigned' // 已派单
			case 2:
				return 'status-completed' // 已完成
			case 3:
				return 'status-market' // 抢单市场
			default:
				return 'status-pending'
		}
	}

	onLoad((option) => {
		if (option.orderStatusType) {
			currentTab.value = option.orderStatusType
		}
	})

	onShow(() => {
		// 可以在这里初始化数据
		getOrderList()
	})

	// Tab切换事件
	const switchTab = (index) => {
		currentTab.value = index
		getOrderList(false)
	}

	const handleSearch = () => {
		getOrderList()
	}

	// 获取收益明细列表
	const getOrderList = async () => {
		//orderType: 订单类型（1-全部订单, 2-待确认,  4-已完成, 5-申请退款）
		try {
			uni.showLoading({
				mask: true
			})
			const orderType = orderTypeMap[currentTab.value]
			const params = {
				pageNum: pageNum.value,
				pageSize: pageSize.value,
				// orderType: orderType,
				keyword: searchKeyword.value
			}
			var res = await getOrderListApi(params)
			if (res.code === 200) {
				const list = res.rows || []

				ordersList.value = pageNum.value == 1 ? list : [...ordersList.value, ...list]
				
				recordTotal.value = Math.ceil(res.total / pageSize.value) || 0
				
			}
		} catch (error) {

		} finally {
			
			uni.hideLoading()
		}
	}

	// 触底加载更多
	onReachBottom(() => {
		if (pageNum.value < recordTotal.value) {
			pageNum.value++;
			getOrderList()
		}
	})
	// 查看订单详情
	const viewOrderDetail = (order) => {
		uni.showToast({
			title: `查看订单详情 - ${order.orderNumber}`,
			icon: 'none'
		})
	}
</script>

<style lang="scss" scoped>
	.search-section {
		background-color: #fff;
		padding: 16rpx;
		margin-left: 14rpx;

		:deep .u-search__content {
			border-radius: 36rpx !important;
		}

	}

	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
		color: #333333;
	}

	.tabs-section {
		height: 88rpx;
		background-color: #ffffff;
	}

	.custom-tabs {
		display: flex;
		width: 100%;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 30rpx 0;
		font-size: 28rpx;
		color: #333333;
		position: relative;
		transition: all 0.3s;
	}

	.tab-item.active {
		color: #0089FF;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 6rpx;
		background-color: #2979ff;
		border-radius: 4rpx;
	}

	.order-list {
		padding: 20rpx;
	}

	.order-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 16rpx;
		margin-bottom: 16rpx;
		position: relative;
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.order-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.order-status {
		width: 136rpx;
		height: 54rpx;
		line-height: 54rpx;
		color: #fff;
		font-size: 24rpx;
		border-radius: 0rpx 16rpx 0rpx 16rpx;
		position: absolute;
		right: 0px;
		top: 0px;
		text-align: center;
	}

	.status-pending {
		background: linear-gradient(270deg, #49ABFF 0%, #0089FF 100%);
	}

	.status-assigned {
		background: linear-gradient(134deg, #5ED89B 0%, #36B475 99%);
	}

	.status-completed {
		background: linear-gradient(134deg, #5ED89B 0%, #36B475 99%);
	}

	.status-market {
		background: linear-gradient(90deg, #FF9F23 0%, #FD5F3C 100%);
	}

	.price-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.order-price {
		font-size: 32rpx;
		font-weight: bold;
		color: #FD5F3C;
	}

	.countdown {
		font-size: 24rpx;
		color: #F52929;
	}

	.order-details {
		margin-bottom: 16rpx;
		padding: 16rpx;
		background: #F5F7FA;
		border-radius: 16rpx;


		.customer-info {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;
		}

		.customer-photo {
			width: 48rpx;
			height: 48rpx;
			border-radius: 48rpx;
			margin-right: 16rpx;
		}

		.customer-name {
			font-size: 24rpx;
			color: #333333;
			font-weight: bold;
		}

	}

	.load-more-status {
		text-align: center;
		padding: 20rpx;
		font-size: 24rpx;
		color: #999;
		position: fixed;
		width: 100%;
		height: 100%;
	}


	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 40rpx;
		color: #999999;
	}

	.empty-text {
		margin-top: 20rpx;
		font-size: 28rpx;
	}
</style>