leromro-mini/components/pages/classify/orderlist.vue

<template>
	<!-- 用户 -->
	<view>
		<view class="classify-main" v-if="userType == '1'">
			<up-tabs v-if="column2 && column2.length > 0" :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">
				<OrderItem v-if="dataList && dataList.length > 0" :dataList="dataList" />
				<view v-else class="empty-null">
					<img src="/static/empty/订单为空.png" alt="">
				</view>
			</view>
		</view>
		<view>
			<up-list @scrolltolower="scrolltolower">
				<up-list-item v-for="(item, index) in dataList" :key="index">
					<view class="list-item">
						<!-- 左侧图片 -->
						<image src="/static/img/dd.png" mode="aspectFill" class="item-image"></image>

						<!-- 中间信息 -->
						<view class="item-info">
							<view class="info-line">姓名：{{item.name}}</view>
							<view class="info-line">类别：{{item.orderStatus}}</view>
							<view class="info-line">技能介绍：{{ item.skillDescribe }}</view>
						</view>

						<!-- 右侧信息 -->
						<view class="item-right">
							<!-- ，，orderStatus=0，未开始，=2已完成 -->
					
							<view class="rating">评分：9.5</view>
							<up-tag v-if="orderStatus == 0">未开始</up-tag>
							<up-tag v-else-if="orderStatus == 1">进行中</up-tag>
							<up-tag v-else-if="orderStatus == 2">已完成</up-tag>
							<up-button type="primary" text="沟通" size="small" class="action-btn"
							></up-button>
								<up-button type="error" text="查看" size="small" class="action-btn"
									@click="handlClick(item)"></up-button>
						</view>
					</view>
				</up-list-item>
			</up-list>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue"

	// const tab = ref('')
	const userType = uni.getStorageSync('userType') //读取本地存储

	// 用户/志愿者 识别标识
	const userOrWorker = uni.getStorageSync('storage_data').vuex_userOrWorker //读取本地存储
	const orderStatus = ref(0)
	const column2 = [{
			name: "全部",
			value: "",
		},
		{
			name: "待支付",
			value: "1",
		},
		{
			name: "待服务",
			value: "2",
		},
		{
			name: "进行中",
			value: "3",
		},
		{
			name: "已完成",
			value: "4",
		},
		{
			name: "已取消",
			value: "5",
		}
	]


	const props = defineProps({
		dataList: {
			typeof: Array,
			default: () => [],
		},
	})
	
	const emits = defineEmits([
		'fetchData'
	])


	const handlClick = (item) => {
		const mainOrderId = item.mainOrderId; // 获取详情id
		uni.navigateTo({
			url: `/pages_classify/pages/orderItem/orderdetails?mainOrderId=${mainOrderId}`
		});
	}

	function onChange(tabItem) {
		// tab.value = tabItem.value;
		emits('fetchData', tabItem.value )
	}
</script>

<style scoped>
	.list-item {
		display: flex;
		padding: 24rpx 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>