leromro-mini/pages_orderuser/pages/order/orderlist.vue

<template>
	<!-- 用户 -->
	<view class="classify-main" v-if="userType == '1'">
		<up-tabs :list="column2" :scrollable="false" @change="onChange" :activeStyle="{
			color: 'rgba(255, 87, 4, 1)',
			fontWeight: 'bold',
			transform: 'scale(1.05)'
		}" lineColor="rgba(255, 87, 4, 1)" :current="tabKey">
		</up-tabs>
		<view class="list">
			<OrderList :dataList="dataList" v-if="dataList.length > 0" />
			<view v-else class="empty-null">
				<img src="/static/empty/订单为空.png" alt="">
			</view>
		</view>
	</view>
	
	
	
</template>

<script setup>
	import {
		userMainOrderList
	} from '@/api/userList.js'
	const column2 = [{
			name: "全部",
			value: "",
		},
		{
			name: "待支付",
			value: "1",
		},
		{
			name: "待服务",
			value: "2",
		},
		{
			name: "进行中",
			value: "3",
		},
		{
			name: "已完成",
			value: "4",
		},
		{
			name: "已取消",
			value: "5",
		}
	]
	const getList = async() =>{
		const res = await userMainOrderList({
		  orderStatus: tab.value
		});
	}

	function onChange(tabItem) {
		tab.value = tabItem.value;
		getList();
		console.log('change', tabItem, tab.value);
	}
	
	onMounted(()=>{
		getList()
	})
</script>

<style scoped>
	.list-item {
		display: flex;
		padding: 24rpx;
		align-items: flex-start;
		gap: 24rpx;
	}

	.item-image {
		width: 160rpx;
		height: 180rpx;
		border-radius: 16rpx;
		object-fit: cover;
	}

	.item-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 14rpx;
	}

	.info-line {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
	}

	.item-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 16rpx;
		min-width: 160rpx;
	}

	.rating {
		font-size: 28rpx;
		color: #f39c12;
		font-weight: bold;
	}

	.tag {
		transform: scale(0.9);
		/* 缩小标签尺寸 */
	}

	.action-btn {
		margin-top: 18rpx;
		width: 100%;
	}
</style>