leromro-mini/pages_classify/pages/orderItem/orderdetails.vue

<template>
	<view>
			<view class="address-container">
			  <view class="address-header">
			    <!-- 左侧默认标签-->
			    <up-tag text="默认" type="error" style="width: 40rpx; height: 30rpx; margin-right: 10rpx;"></up-tag>
			    
			    <!-- 中间收货人信息 -->
			    <view class="contact-info">
			      {{listData.address.name}}
			      {{listData.address.telephone}}
			    </view>
			    
			    <!-- 右侧图标 -->
			    <up-icon name="arrow-right" class="arrow-icon"></up-icon>
			  </view>
			  
			  <!-- 下方地址信息 -->
			  <view class="address-detail">
			    {{listData.address.provinceName}}
			    {{listData.address.cityName}}
				{{listData.address.districtName}}
			  </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.volunteerPicture" mode="aspectFill">
						</image>

						<view class="card-info">
							<view class="info-item">{{listData.volunteerInfo.name}}</view>
							<view class="info-item">类别：{{ listData.volunteerInfo.projectName }} </view>
							<view class="info-item">科目：{{ listData.volunteerInfo.serviceSubjectName }} </view>
							<view class="Telephone">电话：{{listData.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.skillDescribe}}
				</template>
			</up-card>
			<up-card title="证书" :head-style="{ height: '80rpx', padding: '20rpx',}">
				<template #body>
					<view class="certificate">
						<image  v-for="item in certificationPictures" :key="item" :src="item" mode="" style="width: 100%;" class="certificate-img"></image>
					</view>
				</template>
			</up-card>
		</view>

		<view>
			<up-list @scrolltolower="scrolltolower">
				<up-list-item v-for="(item, index) in listData.secondOrderList" :key="index">
					<view class="Wrap-top">
						<text>第一节课</text>

					</view>
					<view class="list-item">
						<image :src="listData.volunteerInfo.volunteerPicture" mode="aspectFill" class="item-image"></image>
						<!-- 状态：orderStatus: 0未开始 ，1进行中，2已完成-->
						<!-- score如果=null，显示待评价， -->

						<view class="item-info">
							<view class="info-line">类别：{{ listData.volunteerInfo.projectName }}-{{ listData.volunteerInfo.serviceSubjectName }}</view>
							<text>开始日期：{{item.workDate}}</text>
							<text>开始时间: {{item.workStartTime}}</text>
						</view>
						<view class="item-right">
							<view class="rating" v-if="score === null">待评价</view>
							<up-tag v-if="item.orderStatus === '0'">未开始</up-tag>
							<up-tag v-else-if="item.orderStatus === '1'">进行中</up-tag>
							<up-tag v-else-if="item.orderStatus === '2'">已完成</up-tag>
						</view>
					</view>
				</up-list-item>
			</up-list>
		</view>
	</view>
</template>


<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		computed
	} from "vue";
	import {
		orderInfomainOrderId
	} from "@/api/userList.js";

	const listData = ref(); //志愿者详情数据
	const orderStatus = ref(0)
	const score = ref(null)
	const mainOrderId = ref(''); //志愿者ID

	const certificationPictures =computed(()=>{
		if(listData.value.volunteerInfo.certificationPicture){
			return listData.value.volunteerInfo.certificationPicture.split(',')
		}
		return []
	})

	// 获取传递的参数
	onLoad(async (options) => {
		mainOrderId.value = options.mainOrderId;
		const res = await orderInfomainOrderId(mainOrderId.value)
		listData.value = res.data;
	});
</script>

<style scoped>
	.address-container {
	  padding: 20rpx;
	  border: 1rpx solid #eee;
	  border-radius: 10rpx;
	}
	
	.address-header {
	  display: flex;
	  align-items: center;
	  margin-bottom: 10rpx;
	}
	
	.contact-info {
	  flex: 1;  /* 占据剩余空间 */
	  font-size: 28rpx;
	  margin-left: 25rpx;
	}
	
	.arrow-icon {
	  margin-left: auto;  /* 将图标推到最右侧 */
	}
	
	.address-detail {
	  font-size: 26rpx;
	  color: #666;
	}
	
	.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%;
	}
	.certificate {
		display: flex;
		flex-direction: column;

	}
	.certificate-img {
		margin-bottom: 24rpx;
	}
</style>