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

<template>
	<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">姓名：王麻子</view>
						<view class="info-line">类别：刨土豆</view>
						<view class="info-line">技能介绍：{{ item.remark }}</view>
					</view>

					<!-- 右侧信息 -->
					<view class="item-right">
						<view class="rating">评分：9.5</view>
						<up-tag text="标签" plain size="mini" class="tag"></up-tag>
						<up-button type="primary" text="沟通" size="small" class="action-btn"
							@click="handlClick"></up-button>
					</view>
				</view>
			</up-list-item>
		</up-list>
	</view>
</template>

<script setup>
	import {
		userMainOrderList
	} from '@/api/userList.js'
	import {
		onMounted
	} from "vue";
	
	const props = defineProps({
		dataList: {
			typeof: Array,
			default: () => [],
		}
	})


	const handlClick = (item) => {
		// const orderId = item.orderId; // 获取详情id
		// uni.navigateTo({
		// 	url: '/pages_orderuser/pages/order/orderdetails'
		// });
	}
</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>