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

<template>
	<view class="container">
		<!-- 搜索框（原生 input 实现，兼容微信小程序） -->
		<view class="search-section">
			<view class="search-box">
				<!-- 搜索图标 -->
				<view class="search-icon">
					<u-icon name="search" size="22" color="#999"></u-icon>
				</view>
				<!-- 输入框 -->
				<input 
					class="search-input" 
					type="text" 
					v-model="searchKeyword" 
					placeholder="请输入订单编号或用户名称手机号"
					placeholder-class="placeholder-style"
					confirm-type="search"
					@confirm="handleSearch"
				/>
				<!-- 自定义清除按钮 -->
				<view v-if="searchKeyword" class="search-clear" @click.stop="handleClear">
					<u-icon name="close-circle" size="22" color="#999"></u-icon>
				</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()"/>
			</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
	} from 'vue'
	import {
		onShow,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	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: '申请退款' }
	])
	
	// 订单类型映射
	const orderTypeMap = {
		0: 1, // 全部订单
		1: 2, // 待确认 
		2: 4, // 已完成  
		3: 5, // 申请退款  
	}

	const currentTab = ref(0)
	const ordersList = ref([])

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

	onShow(() => {
		pageNum.value = 1
		getOrderList()
	})

	// 搜索（点击键盘搜索或清除后调用）
	const handleSearch = () => {
		pageNum.value = 1
		getOrderList()
	}

	// 清除按钮点击
	const handleClear = () => {
		searchKeyword.value = ''
		handleSearch()
	}

	// 获取订单列表
	const getOrderList = async () => {
		try {
			uni.showLoading({ mask: true })
			loadState.value = true
			
			const orderType = orderTypeMap[currentTab.value]
			const params = {
				pageNum: pageNum.value,
				pageSize: pageSize.value,
				searchKeyword: searchKeyword.value
			}
			const 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) {
			console.error('获取订单列表失败', error)
		} finally {
			uni.hideLoading()
			loadState.value = false
		}
	}

	// 触底加载更多
	onReachBottom(() => {
		if (pageNum.value < recordTotal.value) {
			pageNum.value++
			getOrderList()
		}
	})
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background: linear-gradient( 135deg, #CFE9FF 0%, #F5F7FA 50.86%);
		display: flex;
		flex-direction: column;
	}
	
	.search-section {
		margin-left: 14rpx;
		margin-top: 96rpx;
		margin-right: 210rpx;
	}

	.search-box {
		display: flex;
		align-items: center;
		background-color: #F5F7FA;
		border-radius: 36rpx;
		padding: 0 20rpx;
		height: 72rpx; /* 与 u-search 高度一致 */
	}

	.search-icon {
		margin-right: 16rpx;
		display: flex;
		align-items: center;
	}

	.search-input {
		flex: 1;
		height: 100%;
		font-size: 28rpx;
		color: #333;
		background-color: transparent;
		border: none;
		outline: none;
	}

	.placeholder-style {
		color: #999;
		font-size: 28rpx;
	}

	.search-clear {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 16rpx;
		padding: 8rpx;
		
		&:active {
			opacity: 0.6;
		}
	}

	/* 以下样式与之前一致，无需改动 */
	.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>