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

<template>
	<view>
		<view class="address-container">
			<view class="address-header">
				<!-- 左侧默认标签-->
				<up-tag text="默认" type="error"></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.businessTierName }} </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>
						<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="right-corner-container">
							<text> {{dictSortMap[item.orderStatus]}}</text>
							<up-button type="error" text="评论" size="mini" @click="handlButClick"
								:customStyle="hadlClickError"></up-button>
						</view>
					</view>
				</up-list-item>
			</up-list>

		</view>
	</view>
</template>


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


	const listData = ref(); //志愿者详情数据
	const dataList = 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 []
	})

	const dictSortMap = computed(() => {
		let mapObj = {}
		dataList.value.forEach((item => {
			mapObj[item.dictValue] = item.dictLabel
		}))
		return mapObj
	})

	//获取用户订单列表状态
	async function getData() {
		try {
			const res = await systemDictdaTalist().catch(err => {
				console.error('接口请求失败:', err);
				throw err; // 重新抛出以进入 catch 块
			});
			dataList.value = res.rows;
		} catch (e) {
			console.error('获取数据异常:', e); // 确保这里打印错误
		}
	}

	const handlButClick = (item) => {
		uni.navigateTo({
			url: `/pages_classify/pages/orderItem/userComment?mainOrderId=${mainOrderId.value}&data=${encodeURIComponent(JSON.stringify(listData.value))}`
		});
	}

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

	const hadlClickError = {
		width: '150rpx',
		height:'50rpx',
		marginTop: '70rpx'
	}
	onMounted(() => {
		getData()
	})
</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;
		position: relative;
	}

	.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;
	}

	.right-corner-container {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		position: absolute;
		right: 24rpx;
		top: 24rpx;
		gap: 10rpx;
	}
</style>