leromro-mini/pages/common/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="item.volunteerPicture" mode="aspectFill" class="item-image"></image>

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

						<!-- 右侧信息 -->
						<view class="item-right">
							<view class="rating">评分：9.5</view>
							<view class="status-tags">
								{{dictSortMap[item.orderStatus]}}
							</view>
							<view class="Wrap-Btn">
							    <up-button type="primary" text="沟通" size="mini" shape="circle" class="action-btn"></up-button>
							    <up-button type="error" text="查看" size="mini" shape="circle" class="action-btn" @click="handlClick(item)"></up-button>
							</view>
						</view>
					</view>
				</up-list-item>
			</up-list>
		</view>
	</view>
</template>

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


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

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


	const props = defineProps({
		dataList: {
			typeof: Array,
			default: () => [],
		},
		dictSort: {
			type: Array,
			default: () => [], // 默认值
		},
		fetchData: Function, // 刷新数据的方法
	})


	const emits = defineEmits([
		'fetchData'
	])
	
	const dictSortMap = computed(() => {
		let mapObj = {}
		props.dictSort.forEach((item => {
			mapObj[item.dictValue] = item.dictLabel
		}))
		return mapObj
	})

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

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

<style scoped>
	.list-item {
		display: flex;
		padding: 12px;
		border-bottom: 1px solid #f5f5f5;
	}

	.item-image {
		width: 60px;
		height: 60px;
		border-radius: 8px;
		margin-right: 12px;
	}

	.item-info {
		flex: 1;
		margin-right: 12px;
		overflow: hidden;
	}

	.info-line {
		margin-bottom: 6px;
		font-size: 12px;
		color: #333;
	}

	.skill-description {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 限制两行 */
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.4;
		min-height: 2.8em;
		/* 两行高度 */
	}

	.item-right {
		width: 120px;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.rating {
		font-size: 13px;
		color: #f39c12;
		margin-bottom: 6px;
	}

	.status-tags {
		margin-bottom: 6px;
	}

	.Wrap-Btn {
		display: flex;
		gap: 6px;
		/* 按钮间距 */
	}

	.action-btn {
		padding: 0 8px;
		height: 28px;
		line-height: 28px;
		font-size: 12px;
	}
</style>