fetch:用户端订单管理

components/pages/classify/orderlist.vue

@@ -97,30 +97,21 @@
 
 	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;
+		padding: 24rpx 24rpx;
 		align-items: flex-start;
 		gap: 24rpx;
 	}

pages/UserSelection.vue

@@ -1,14 +1,20 @@
 <template>
 	<view class="container">
+		<view class="Wrap">
+			<text class="Wraph1">欢迎使用</text>
+		</view>
+		<view>
+			<text>请选择您的身份开始使用</text>
+		</view>
 		<!-- 用户部分 -->
 		<view class="button-group">
-			<image :src="imagePath2" mode="aspectFit" class="icon"></image>
 			<up-button type="success" shape="circle" class="button" @click="handleBtn(1)">用户</up-button>
 		</view>
-
+		<image src="../static/FRAME.png" style="background-color: red;"></image>
+		<image src="../static/img_v3_02le_9fee240d-00fc-4f42-9391-4801b614cb9g.png"
+			style="background-color: red; width: 80rpx; height: 60rpx;"></image>
 		<!-- 志愿者部分 -->
 		<view class="button-group">
-			<image :src="imagePath1" mode="aspectFit" class="icon"></image>
 			<up-button type="success" shape="circle" class="button" @click="handleBtn(2)">志愿者</up-button>
 		</view>
 	</view>
@@ -18,9 +24,9 @@
 	import {
 		userOrWorker
 	} from '@/api/login';
-	
+
 	import store from "@/store"
-	
+
 	const imagePath1 = '/static/志愿者.png';
 	const imagePath2 = '/static/用户.png';
 
@@ -47,35 +53,23 @@
 </script>
 
 <style scoped>
-	/* 外层容器 - 垂直排列两个按钮组 */
-	.container {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		height: 100vh;
-		/* 可根据需要调整高度 */
-	}
-
-	/* 每个按钮组（图片+按钮）垂直排列 */
-	.button-group {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		margin-bottom: 40rpx;
-		/* 组与组之间的间距 */
+	.Wrap {
+		left: 0rpx;
+		top: 0rpx;
+		width: 342rpx;
+		height: 80rpx;
+		opacity: 1;
+		background: rgba(0, 0, 0, 0);
 	}
 
-	/* 图标样式 */
-	.icon {
-		width: 100rpx;
-		height: 100rpx;
-		margin-bottom: 20rpx;
-		/* 图片和按钮之间的间距 */
-	}
+	.Wraph1 {
 
-	/* 按钮样式 (可根据需要调整) */
-	.button {
-		/* 如果uView按钮需要额外样式可以在这里添加 */
+		font-size: 30rpx;
+		font-weight: 400;
+		letter-spacing: 0rpx;
+		line-height: 36rpx;
+		color: rgba(45, 58, 78, 1);
+		text-align: center;
+		vertical-align: middle;
 	}
 </style>

pages/Volunteerside/Side_index.vue

@@ -3,13 +3,13 @@
 		<up-waterfall v-model="flowList">
 			<template #left :listData="listData">
 				<view class="demo-warter" v-for="(item, index) in listData" :key="index" @click="goToDetail(item)">
-					<up-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></up-lazy-load>
+					<up-lazy-load threshold="-450" border-radius="10" :image="item.volunteerPicture" :index="index"></up-lazy-load>
 					<view class="demo-title">
 						{{item.skillDescribe}}
 					</view>
 					<view class="demo-PriceDome">
 						<view class="demo-price">
-							<image src="../../static/用户.png" class="name-image"></image>
+							<image :src="item.volunteerPicture" class="name-image"></image>
 							{{item.name}}
 						</view>
 						<view class="dome-Like">
@@ -21,13 +21,13 @@
 			</template>
 			<template #right :rightList="rightList">
 				<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="goToDetail(item)">
-					<up-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></up-lazy-load>
+					<up-lazy-load threshold="-450" border-radius="10" :image="item.volunteerPicture" :index="index"></up-lazy-load>
 					<view class="demo-title">
 						{{item.skillDescribe}}
 					</view>
 					<view class="demo-PriceDome">
 						<view class="demo-price">
-							<image src="../../static/用户.png" class="name-image"></image>
+							<image :src="item.volunteerPicture" class="name-image"></image>
 							{{item.name}}
 						</view>
 						<view class="dome-Like">
@@ -39,8 +39,6 @@
 			</template>
 		</up-waterfall>
 	</view>
-
-
 </template>
 
 
@@ -73,7 +71,6 @@
 
 	const getList = async () => {
 		const res = await volunteerinfolist()
-		console.log(res, '>>>>>222')
 
 		// 处理左右数据展示
 		let leftArr = []
@@ -130,7 +127,7 @@
 		font-size: 30rpx;
 		margin-top: 5px;
 		color: $up-main-color;
-		margin-left: 15rpx;
+		/* margin-left: 15rpx; */
 		display: -webkit-box;
 		-webkit-box-orient: vertical;
 		-webkit-line-clamp: 3;
@@ -149,25 +146,35 @@
 	}
 
 	.demo-PriceDome {
-		display: flex;
-		font-size: 30rpx;
-		color: $up-type-error;
-		margin-top: 20rpx;
+	  display: flex;
+	  justify-content: space-between;
+	  align-items: center;
+	  width: 100%;
+	  margin-top: 15rpx;
 	}
-
+	
 	.demo-price {
-		display: flex;
+	  display: flex;
+	  align-items: center;
+	  flex: 1;
+	  overflow: hidden; /* 防止内容溢出 */
 	}
-
+	
 	.name-image {
-		width: 40rpx;
-		height: 40rpx;
+	  width: 40rpx;
+	  height: 40rpx;
+	  margin-right: 10rpx;
 	}
-
+	
+	.name-text {
+	  white-space: nowrap; /* 禁止换行 */
+	  overflow: hidden;    /* 超出部分隐藏 */
+	  text-overflow: ellipsis; /* 显示省略号 */
+	  max-width: 120rpx; /* 6个中文字符大约占120rpx */
+	}
+	
 	.dome-Like {
-		margin-left: 140rpx;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
+	  display: flex;
+	  align-items: baseline; /* 让￥和1.4w底部对齐 */
 	}
 </style>

pages/classify.vue

@@ -116,18 +116,17 @@
 
 
 	async function getList() {
-		console.log(userType, '>>>>>>userType');
+		console.log('>>>>userType', userType);
 		try {
 			uni.hideLoading();
 			uni.showLoading({
 				title: '数据加载中...'
 			});
-
 			// 判断 userType 来决定调用哪个接口
 			let res;
 			if (userType === 1) {
 				// 如果 userType 是 1，调用 userMainOrderList 接口
-				res = await getListData();
+				getListData();
 			} else if (userType === 2) {
 				// 如果 userType 是 2，调用 getVolunteerOrderList 接口
 				res = await getVolunteerOrderList({
@@ -147,6 +146,7 @@
 		}
 	}
 	const getListData = async (orderStatus = tab.value) => {
+		console.log('>>>>>执行111111');
 		const res = await userMainOrderList({
 			orderStatus: orderStatus
 		});
@@ -193,6 +193,9 @@
 
 	onMounted(() => {
 		getList()
+		
+		console.log('>>>>>>执行周期2222');
+		
 		getListData()
 	})
 

pages/goodsDetails/goodsDetails.vue

@@ -90,7 +90,7 @@
 					<up-input placeholder="请输入内容" border="surround" v-model="value" @change="change"></up-input>
 				</view>
 				<view class="Wrap-detils-btn">
-					<up-button type="primary" shape="circle" :customStyle="wrapqx">取消</up-button>
+					<up-button type="primary" shape="circle" :customStyle="wrapqx" @click="handlCancel">取消</up-button>
 					<up-button type="error" shape="circle" :customStyle="wrapqx" @click="handleBuy">购买</up-button>
 
 				</view>
@@ -213,6 +213,9 @@
 		show.value = false; // 关闭第一个弹框
 		showSum.value = true; // 打开第二个弹框
 	};
+	const handlCancel = () =>{
+		show.value = false; // 关闭第一个弹框
+	}
 	// 底部数据
 	const options = ref([{
 			icon: 'headphones',
@@ -305,7 +308,6 @@
 		const params = {
 			volunteerId: Number(volunteerId.value),
 		}
-		console.log(params, 'params>>>>>>>>>>>params')
 		const res = await volunteerwork(params)
 		if (res.data) {
 			doorToDoorTimeArr.value = res.data
@@ -359,13 +361,13 @@
 				serviceOnePrice: 400.00,
 				serviceTotalPrice: 2000.00,
 				serviceCategory: 2,
-				totalTimes: 5,
+				totalTimes: 1,
 				serviceStartDate: "2025-05-22",
 				serviceFinishDate: "2025-05-28",
 				startTime: "8:00",
 				serviceDuration: 4,
 				paymentMethod: 1,
-				addressId: 12,
+				addressId: 7,
 				remark: "我是图图小淘气，面对世界很好奇！",
 				volunteerId: 104
 			},
@@ -412,7 +414,6 @@
 </script>
 
 <style scoped>
-	/* 主容器使用Flex布局 */
 	.card-container {
 		display: flex;
 		position: relative;
@@ -420,7 +421,6 @@
 		align-items: flex-start;
 		background-color: #fff;
 		border-radius: 12rpx;
-
 	}
 
 	/* 左侧图片 */

pages_classify/pages/orderItem/orderdetails.vue

@@ -1,6 +1,74 @@
 <template>
 	<view>
+		<view>
+			<view v-if="listData.address">
+				<up-tag text="默认" type="error"></up-tag>
+				<view>
+					{{listData.address.area}}
+				</view>
+				<view>
+					{{listData.address.name}}
+					{{listData.address.telephone}}
+				</view>
+				<view>
+					{{listData.address.address}}
+				</view>
+			</view>
+		</view>
+		<view>
+			<up-card title="志愿者介绍" :head-style="{ height: '80rpx', padding: '20rpx',}">
+				<template #body>
+					<view class="card-container">
+						<image class="card-image" :src="listData?.volunteerInfo?.certificationPicture" mode="aspectFill">
+						</image>
 
+						<view class="card-info">
+							<view class="info-item">{{lisData?.volunteerInfo.name}}</view>
+							<!-- <view class="info-item">类别：11</view> -->
+							<!-- <view class="info-item">科目：111</view> -->
+							<view class="Telephone">电话：{{lisData?.volunteerInfo?.phonenumber}}</view>
+							<!-- <view class="info-item">住址：{{listData.volunteerInfo.city}}</view> -->
+						</view>
+
+						<view class="card-rating">4.5 评分</view>
+					</view>
+				</template>
+			</up-card>
+			<!-- <up-card title="技能介绍" :head-style="{ height: '80rpx', padding: '20rpx',}">
+				<template #body>
+					{{listData.volunteerInfo.remark}}
+				</template>
+			</up-card>
+			<up-card title="证书" :head-style="{ height: '80rpx', padding: '20rpx',}">
+				<template #body>
+					<image src="../../static/zhiyuanzhe.jpg" mode="" style="width: 100%;"></image>
+				</template>
+			</up-card> -->
+		</view>
+
+		<!-- <view>
+			<up-list @scrolltolower="scrolltolower">
+				<up-list-item>
+					<view class="Wrap-top">
+						<text>第一节课</text>
+						<text>2025-04-16 08:00</text>
+					</view>
+					<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">技能介绍：11</view>
+						</view>
+						<view class="item-right">
+							<view class="rating">评分：9.5</view>
+							<up-tag text="标签" plain size="mini" class="tag"></up-tag>
+						</view>
+					</view>
+				</up-list-item>
+			</up-list>
+		</view> -->
 	</view>
 </template>
 
@@ -14,18 +82,138 @@
 	import {
 		orderInfomainOrderId
 	} from "@/api/userList.js";
+
+	const listData = ref([]); //志愿者详情数据
 	
-	const listData = ref([]);//志愿者详情数据
-	const mainOrderId = ref('');//志愿者ID
+	const mainOrderId = ref(''); //志愿者ID
 	// 获取传递的参数
 	onLoad(async (options) => {
 		mainOrderId.value = options.mainOrderId; // 存储到响应式变量
 		const res = await orderInfomainOrderId(mainOrderId.value)
-		console.log(res,'获取用户详情')
-		listData.value = res.data || {};
+		listData.value = res.data;
+		console.log(listData.value, '获取用户详情')
+		
 	});
 </script>
 
 <style scoped>
+	.card-container {
+		display: flex;
+		position: relative;
+		padding: 20rpx;
+		align-items: flex-start;
+		background-color: #fff;
+		border-radius: 12rpx;
+	}
+
+	/* 左侧图片 */
+	.card-image {
+		width: 240rpx;
+		height: 340rpx;
+		border-radius: 12rpx;
+		margin-right: 30rpx;
+		flex-shrink: 0;
+	}
+
+	/* 中间信息区域 */
+	.card-info {
+		flex: 1;
+		padding-right: 100rpx;
+	}
+
+	/* 中间信息区域 */
+	.card-info {
+		flex: 1;
+		padding-right: 100rpx;
+	}
+
+	.Telephone {
+		white-space: nowrap;
+		margin-bottom: 24rpx;
+		font-size: 28rpx;
+		line-height: 1.6;
+		color: #333;
+	}
+
+	.info-item {
+		margin-bottom: 24rpx;
+		font-size: 28rpx;
+		line-height: 1.6;
+		color: #333;
+	}
+
+	/* 右上角评分 */
+	.card-rating {
+		position: absolute;
+		top: 20rpx;
+		right: 20rpx;
+		background-color: #f8f8f8;
+		padding: 6rpx 16rpx;
+		border-radius: 20rpx;
+		font-size: 24rpx;
+		color: #ff9900;
+		font-weight: bold;
+	}
+
+
+
+	/* 上课时间 */
+
+	.Wrap-top {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 24rpx 20rpx 0rpx 24rpx;
+	}
+
+	.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>