1、用户详情

components/pages/classify/orderlist.vue

@@ -0,0 +1,171 @@
+<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">姓名：王麻子</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(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 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
+		console.log(mainOrderId, '详情idmainOrderId')
+		uni.navigateTo({
+			url: `/pages_classify/pages/orderItem/orderdetails?mainOrderId=${mainOrderId}`
+		});
+	}
+
+	function onChange(tabItem) {
+		// console.log('onChange called with tabItem:7777777', tabItem); // 确认是否进入 onChange
+		// tab.value = tabItem.value;
+		// 调用父组件传递过来的 fetchData 函数
+		// props.fetchData();
+		
+		console.log(props.orderStatus, '>>>>props.orderStatus7777777');
+		
+		emits('fetchData', tabItem.value )
+		
+		// console.log('change7777777', tabItem, tab.value);
+	}
+</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>

pages_classify/pages/orderItem/orderdetails.vue

@@ -0,0 +1,31 @@
+<template>
+	<view>
+
+	</view>
+</template>
+
+<script setup>
+	import {
+		onLoad
+	} from '@dcloudio/uni-app'
+	import {
+		ref
+	} from "vue";
+	import {
+		orderInfomainOrderId
+	} from "@/api/userList.js";
+	
+	const listData = ref([]);//志愿者详情数据
+	const mainOrderId = ref('');//志愿者ID
+	// 获取传递的参数
+	onLoad(async (options) => {
+		mainOrderId.value = options.mainOrderId; // 存储到响应式变量
+		const res = await orderInfomainOrderId(mainOrderId.value)
+		console.log(res,'获取用户详情')
+		listData.value = res.data || {};
+	});
+</script>
+
+<style scoped>
+
+</style>