leromro-mini/pages_home/pages/Volunteerside/goodsDetails.vue

<template>
	<view>
		<view>
			<up-card title="志愿者介绍" :head-style="{ height: '80rpx', padding: '20rpx',}">
				<template #body>
					<view class="card-container">
						<!-- 左侧图片 -->
						<image class="card-image" :src="listData.volunteerPicture" mode="aspectFill"></image>

						<!-- 中间信息（姓名/类别等） -->
						<view class="card-info">
							<view class="info-item">姓名：{{listData.name}}</view>
							<view class="info-item">服务项目：{{listData.projectName}}</view>
							<view v-if="serviceSubjectName != null" class="info-item">类别：{{ listData.projectTypeName }}
							</view>
							<view class="Telephone">服务时长：{{listData.businessDuration}}</view>
							<view class="Telephone">科目：{{listData.serviceSubjectName}}</view>
							<view class="Telephone">电话：{{listData.phonenumber}}</view>
						</view>

						<!-- 右上角评分 - 使用绝对定位 -->
						<view class="card-rating">4.5 评分</view>
					</view>
				</template>
			</up-card>
			<up-card title="技能介绍" :thumb="thumb" :head-style="{ height: '80rpx', padding: '20rpx',}">
				<template #body>
					{{listData.skillDescribe}}
				</template>
			</up-card>
			<up-card title="证书" :thumb="thumb" :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 class="Wrap-btn">
				<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
					@buttonClick="buttonClick" />
			</view>

		</view>

		<!-- 底部第一层弹框 -->
		<view>
			<up-popup :show="show" @close="close" @open="open">

			</up-popup>
			<up-popup v-model:show="show" @open="upPopupOpen">
				<view>
					<view class="Wrapper">
						<image src="/static/img/Location.png" class="Wrapper-img" />
						<span class="Wrapper-content">李四</span>
						<span class="Wrapper-content">重庆永川区</span>
					</view>
					<span style="margin-left: 15rpx; margin-top: 50rpx;">重庆永川区</span>
				</view>
				<up-divider></up-divider>
				<view class="Wrap-content1">
					<up-avatar :src="src"></up-avatar>
					<text style="margin-top: 15rpx;">￥{{listData.businessPrice}}</text>
				</view>
				<view class="Wrap-info">
					<text style="margin-left: 10rpx;">服务类别：</text>
					<up-text type="info" text="家庭教育"></up-text>
				</view>

				<view class="Wrap-content3">
					<text style="margin-left: 15rpx;">服务周期:</text>
					<view style="margin-top: 25rpx;">
						<uniDatetimePickerMy :modelValue="doorToDoorTime" :start="startDisabled" :end="endDisabled"
							type="daterange"></uniDatetimePickerMy>
					</view>
					<view>
						<its-calendar :timeArr="doorToDoorTimeArr" :timeHostArr="timeHostArr" @getByDate="getByDate"
							@getByTime="getByTime"></its-calendar>
					</view>
				</view>

				<view class="Wrap-content6">
					<text style="margin-left: 15rpx;">备注：</text>
					<up-input placeholder="请输入内容" border="surround" v-model="remark" @change="change"></up-input>
				</view>
				<view class="Wrap-detils-btn">
					<up-button type="primary" shape="circle" :customStyle="wrapqx" @click="handlCancel">取消</up-button>
					<up-button type="error" shape="circle" :customStyle="wrapqx" @click="handleBuy">
						购买￥{{ computeMoney }}
					</up-button>
				</view>
			</up-popup>
		</view>


		<!-- 第二个弹框-->
		<up-popup v-model:show="showSecond">
			<view>
				<up-cell-group>
					<view @click="jumpToAddressSelect" style="display: flex; align-items: center; padding: 10px;">
						<up-icon name="more-dot-fill" size="16" />

						<view v-if="selectedAddress" style="margin-left: 8px; flex: 1;">
							<view class="address-display">
								<text class="address-line">
									{{ selectedAddress.provinceName }}{{ selectedAddress.cityName }}{{ selectedAddress.districtName }}
								</text>
								<view class="contact-info">
									<text class="contact-name">{{ selectedAddress.name }}</text>
									<text class="contact-phone">{{ selectedAddress.telephone }}</text>
								</view>
							</view>
						</view>
						<text v-else style="margin-left: 8px; font-size: 14px;">请选择服务地址</text>
					</view>
					<view class="card-container" v-for="(item, index) in computeClickTime" :key="index">
						<image class="card-image" :src="listData.volunteerPicture" mode="aspectFill"></image>
						<view class="card-content"> <!-- Content container -->
							<view class="info-item">服务项目：{{listData.projectName}}</view>
							<view class="Telephone">服务时长：{{listData.businessDuration}}</view>
							<view class="date">日期:{{item.date}}</view>
							<view class="time">
								时间：
								<span v-for="(i,ind) in item.timeArr" :key="ind">
									{{i}} &nbsp;&nbsp;&nbsp;
								</span>
							</view>
						</view>
					</view>
				</up-cell-group>
			</view>
			<view class="Wrap-detils-btn">
				<up-button type="primary" shape="circle" :customStyle="wrapqx" @click="closeSecond">取消</up-button>
				<up-button type="error" shape="circle" :customStyle="wrapqx" @click="handleSecond">
					购买￥{{ computeMoney }}
				</up-button>
			</view>

		</up-popup>



		<up-popup v-model:show="showSum">
			<view class="Wrap-Payment">
				<!-- 支付金额 -->
				<view class="payment-header">
					<text class="payment-title">现在支付</text>
					<text class="payment-amount">￥{{ computeMoney }}</text>
				</view>

				<up-line></up-line>

				<!-- 钱包支付选项 -->
				<view class="payment-option">
					<view class="option-left">
						<image src="/static/my/钱包.png" class="payment-icon"></image>
						<text class="option-text">钱包</text>
					</view>
					<up-radio-group v-model="radiovalue1" placement="column">
						<up-radio :customStyle="{marginLeft: 'auto'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.name"></up-radio>
					</up-radio-group>
				</view>

				<up-line></up-line>

				<!-- 微信支付选项 -->
				<view class="payment-option">
					<view class="option-left">
						<image src="/static/微信支付.png" class="payment-icon"></image>
						<text class="option-text">微信支付</text>
					</view>
					<up-radio :customStyle="{marginLeft: 'auto'}" v-for="(item, index) in radiolist2" :key="index"
						:label="item.name" :name="item.name"></up-radio>
				</view>

				<up-line></up-line>

				<!-- 其他支付方式 -->
				<view class="other-payment">
					其他方式支付 >
				</view>

				<!-- 条款说明 -->
				<view class="terms-of-service">
					我同意购买守则，取消政策和退款政策，我也同意支付以下所示的总金额(含服务费)。
				</view>

				<!-- 确认按钮 -->
				<view class="confirm-button">
					<up-button type="primary" :text="`确认购买 · ￥${computeMoney}`"
						@click="handlConfiRmpurchase"></up-button>
				</view>
			</view>
		</up-popup>

		<view v-if="addressFlag" class="box">
			<addressComponent :modelValue="addressFlag" @update:modelValue="val => addressFlag = val"
				:addressInfo="addressInfo" @update:addressInfo="handleAddressUpdate"></addressComponent>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		onMounted,
		ref,
		nextTick,
		reactive,
		computed,
	} from "vue";
	import {
		getDetailsvolunteerId,
		volunteerwork,
		volunteergetTimesByDate,
		ordersCreateOrder
	} from "@/api/volunteerDetailsApi/details.js"

	import itsCalendar from '@/components/its-calendar/its-calendar.vue';
	import uniDatetimePickerMy from "@/uni_modules/lic-uni-datetime-picker/components/lic-uni-datetime-picker/lic-uni-datetime-picker.vue"
	import addressComponent from "@/pages_home/components/volunteerSide/adresss.vue"

	const src = ref('http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg')
	const businessPrice = ref() //价格
	const volunteerId = ref(''); // 存储志愿者ID
	const serviceCategory = ref('') //存储大类别
	const businessManagementId = ref('') //具体分类id
	const doorToDoorTimeArr = ref([]) // 完整时间范围
	const doorToDoorTime = ref([]) // 只具备开始、结束 时间
	const timeHostArr = ref([]) // 时间段数组
	const currentDate = ref([]) // 点击过的年月日数组数据
	const currentTime = ref('') // 最后一次点击时间的时间节点
	const selectedTimes = ref([]) // 存储所有选择的时间对象
	const totalTimes = ref(0) // 时间点 点击的次数
	const startDisabled = ref('')
	const endDisabled = ref('')
	const time = ref('')
	const listData = ref({})
	const show = ref(false); //第一层弹框
	const showSecond = ref(false) //第二层弹框
	const showThird = ref(false) //第二层弹框
	const showSum = ref(false);
	const remark = ref('') //备注
	const radiovalue1 = ref('苹果');
	// Radio 单选框数据
	const radiolist1 = reactive([{
		name: '',
		disabled: false,
	}, ]);

	const selectedAddress = ref(null);
	const addressFlag = ref(false)

	const addressInfo = ref(null)

	// 详情底部立即购买弹框
	const buttonClick = (e) => {
		show.value = true; // 打开弹框
	};

	// 详情页第一层弹框
	function open() {
		show.value = true;
	}
	// 第一层弹框取消
	function close() {
		// 关闭逻辑，设置 show 为 false  
		show.value = false;
	}
	
	// 第一个弹框逻辑
	const handleBuy = () => {
		show.value = false; // 关闭第一个弹框
		showSecond.value = true; // 打开第二个弹框
	};

	
	// 第二层弹框取消
	function closeSecond() {
		// 关闭逻辑，设置 show 为 false  
		showSecond.value = false;
		show.value = true; // 打开第一个弹框
	}
	
	// 第二层弹框打开第三层
	function handleSecond() {
		showSum.value = true;
	}
	
	// 第三层弹框
	// function openSum() {
	// 	// 打开逻辑，比如设置 show 为 true  
	// 	showSum.value = true;
	// }

	

	const handlCancel = () => {
		show.value = false; // 关闭第一个弹框
		selectedTimes.value = []; // 清空已选时间
		totalTimes.value = 0; // 重置点击次数
	}

	const jumpToAddressSelect = () => {
		addressFlag.value = true;
	};

	// 新增：处理子组件传回的地址数据
	const handleAddressUpdate = (newAddress) => {
		selectedAddress.value = newAddress;
		addressFlag.value = false; // 关闭选择器
		console.log('selectedAddress更新后:', JSON.stringify(selectedAddress.value)); // 添加这行
	};
	// 详情底部底部数据
	const options = ref([{
			icon: 'headphones',
			text: '客服'
		},
		{
			icon: 'shop',
			text: '收藏',
		},
	]);

	// 详情底部立即购买样式
	const buttonGroup = ref([{
		text: '立即购买',
		backgroundColor: 'red',
		color: '#fff'
	}]);
	// 底部帮助客服方法
	const onClick = (e) => {
		uni.showToast({
			title: `点击${e.content.text}`,
			icon: 'none'
		});
	};
	// 修改详情页底部样式
	const customStyle = {
		height: '70rpx',
		paddingLeft: '30rpx',
		width: '540rpx'
	}

	const wrapqx = {
		// height: '70rpx',
		width: '240rpx',
	}

	// 获取传递的参数
	onLoad(async (options) => {
		const params = JSON.parse(options.params);
		const {
			volunteerId: id,
			serviceCategory: categoy,
			businessManagementId: manage
		} = params
		volunteerId.value = id;
		serviceCategory.value = categoy;
		businessManagementId.value = manage;
		const res = await getDetailsvolunteerId({
			volunteerId: id,
			serviceCategory: categoy,
			businessManagementId: manage,
		});

		listData.value = res.data || {};
		businessPrice.value = listData.value.businessPrice || 0;
	});

	// 选择日期
	const getListTime = async () => {
		const params = {
			volunteerId: Number(volunteerId.value),
		};
		const res = await volunteerwork(params);

		if (res.data && res.data.length > 0) {
			doorToDoorTimeArr.value = res.data;
			const newRes = [res.data[0], res.data[res.data.length - 1]];
			doorToDoorTime.value = newRes;
			startDisabled.value = doorToDoorTime.value[0];
			endDisabled.value = doorToDoorTime.value[1];

			// 默认加载第一个日期的排班时间
			getByDate(res.data[0]);
		} else {
			console.error('接口返回的日期范围为空');
			doorToDoorTimeArr.value = [];
			timeHostArr.value = []; // 清空时间段
		}
	};

	// 获取志愿者排班时间
	const getByDate = async (date = doorToDoorTimeArr.value[0]) => {
		// 检查日期是否为空
		if (!date) {
			console.error('日期为空，跳过获取排班时间');
			return;
		}

		if (!volunteerId.value) {
			console.error('volunteerId 为空');
			return;
		}

		const params = {
			volunteerId: volunteerId.value,
			date,
		};

		try {
			const res = await volunteergetTimesByDate(params);
			const TArr = res.data.map((item) => ({
				...item,
				hours: item.reservationTime,
				timeStamp: new Date(`${date} ${item.reservationTime}`).getTime() / 1000,
			}));

			// 如果 doorToDoorTimeArr.value 为空，直接返回
			if (!doorToDoorTimeArr.value.length) {
				console.error('可选的日期范围为空');
				return;
			}

			// 填充时间段数组
			timeHostArr.value = Array(doorToDoorTimeArr.value.length).fill(TArr);
		} catch (error) {
			console.error('获取排班时间失败:', error);
		}
	};

	const getByTime = (timeObj) => {
		if (timeObj.clicked) {
			console.log('>>>>>> 已经点击过此时间');
			return;
		}

		// 标记为已点击
		timeObj.clicked = true;

		// 添加到已选时间数组
		selectedTimes.value.push({
			date: timeObj.yearToDate,
			time: timeObj.hours,
			timestamp: timeObj.timeStamp
		});

		totalTimes.value = selectedTimes.value.length; // 更新点击次数


		console.log(selectedTimes.value, '>>>>>selectedTimes.value');
	}

	// 立即购买显示时执行
	const upPopupOpen = () => { //显示时初始化预存储信息数据
		selectedTimes.value = [];
		totalTimes.value = 0;
		currentTime.value = '';
		currentDate.value = [];
	}


	const computeMoney = computed(() => {
		return totalTimes.value * businessPrice.value
	})
	const computeClickTime = computed(() => {
		let timeArr = []
		let nyr = selectedTimes.value.map(item => {
			return item.date
		})

		let nyrSet = Array.from(new Set(nyr)).map(item => {
			return {
				date: item,
				timeArr: []
			}
		})
		selectedTimes.value.forEach(item => {
			nyrSet.forEach(i => {
				if (item.date == i.date) i.timeArr.push(item.time)
			})
		})
		console.log(nyrSet, '>>>>>nyrSet');
		return nyrSet
	})

	const certificationPictures = computed(() => {
		if (listData.value.certificationPicture) {
			return listData.value.certificationPicture.split(',')
		}
		return []
	})
	// 确认购买
	const handlConfiRmpurchase = async () => {
		// 定义要发送的数据
		const orderData = {
			orders: {
				serviceOnePrice: businessPrice.value,
				serviceTotalPrice: computeMoney.value, //需要传获取到的总价
				serviceCategory: serviceCategory.value, //大类别参数
				totalTimes: totalTimes.value, //点击的次数
				serviceStartDate: "2025-04-18",
				startTime: "8:00",
				serviceDuration: 4,
				paymentMethod: 1,
				addressId: 7,
				volunteerId: volunteerId.value,
				remark: remark.value,
				businessManagementId: businessManagementId.value,
				volunteerInfoId: listData.value.volunteerInfoId,
			},
			workDateList: []
		};
		// 转换所有选择的时间
		selectedTimes.value.forEach(item => {
			orderData.workDateList.push({
				workDate: item.date,
				workStartTime: item.time
			});
		});

		try {
			const res = await ordersCreateOrder(orderData);
			if (res.code == 200) {
				uni.reLaunch({
					url: '/pages/index'
				});
			}
		} catch (error) {
			console.error('支付失败', error);
		}
	};

	onMounted(async () => {
		await getListTime()
	})
</script>

<style scoped>
	.box {
		height: 100vh;
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999;
		background: red;
	}

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

	.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-btn {
		/* display: flex; */
		/* justify-content: flex-end; */
		/* align-items: center; */
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: white;
		padding: 40rpx 20rpx;
		box-shadow: -2rpx 5rpx rgba(0, 0, 0, 0.1);
	}




	.Wrapper {
		display: flex;
		align-items: center;
		gap: 10rpx;
		margin-top: 10rpx;
	}

	.Wrapper-img {
		width: 50rpx;
		height: 50rpx;
		margin-left: 10rpx;
	}


	.Wrapper-content {
		color: rgba(16, 16, 16, 1);
		font-size: 25rpx;
		font-family: PingFangSC-regular;
		line-height: 20rpx;
	}

	.Wrap-content1 {
		display: flex;
		justify-content: flex-start;
		margin-left: 10rpx;
		margin-top: 10rpx;
	}

	.Wrap-info {
		display: flex;
		justify-content: flex-start;
		margin-left: 10rpx;
		margin-top: 25rpx;
	}

	.Wrap-content3 {
		margin-top: 25rpx;
	}

	.Wrap-content4 {

		margin-top: 25rpx;
	}

	.Wrap-content5 {
		display: flex;
		justify-content: flex-start;
		margin-left: 10rpx;
		margin-top: 25rpx;
	}

	.Wrap-content6 {
		margin-top: 25rpx;
	}

	.Wrap-detils-btn {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 25rpx;
		/* position: fixed;
		bottom: 0;
		width: 100%;
		background-color: white;
		padding: 40rpx 20rpx;
		box-shadow: -2rpx 5rpx rgba(0, 0, 0, 0.1); */
	}

	.Wrap-Payment {
		padding: 30rpx;
		background-color: #fff;
	}

	.payment-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
	}

	.payment-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.payment-amount {
		font-size: 36rpx;
		color: #ff4d4f;
		font-weight: bold;
	}

	.payment-option {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
	}

	.option-left {
		display: flex;
		align-items: center;
	}

	.payment-icon {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}

	.option-text {
		font-size: 30rpx;
		font-weight: bold;
	}

	.other-payment {
		padding: 30rpx 0;
		color: #1890ff;
		font-size: 28rpx;
	}

	.terms-of-service {
		padding: 30rpx 0;
		font-size: 24rpx;
		color: #999;
		line-height: 1.5;
	}

	.confirm-button {
		margin-top: 40rpx;
	}

	.certificate {
		display: flex;
		flex-direction: column;

	}

	.certificate-img {
		margin-bottom: 24rpx;
	}


	/* 第二层弹框 */
	.card-container {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		padding: 10px;
	}

	.card-image {
		width: 100px;
		/* Adjust as needed */
		height: 100px;
		/* Adjust as needed */
		border-radius: 8px;
		margin-right: 15px;
		object-fit: cover;
	}

	.card-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.info-item,
	.Telephone,
	.date,
	.time {
		margin-bottom: 5px;
		font-size: 14px;
		color: #333;
	}

	.time span {
		margin-right: 8px;
	}


	.address-line {
		font-size: 14px;
		line-height: 20rpx;
		/* 行高20rpx */
		color: #333;
		/* 深色文字 */
		display: block;
		/* 确保独占一行 */
		margin-bottom: 30rpx;
		/* 下边距30rpx */
	}

	/* 联系人信息容器 */
	.contact-info {
		display: flex;
		gap: 20rpx;
		/* 姓名和电话之间的间距 */
	}

	/* 姓名样式 */
	.contact-name {
		font-size: 12px;
		color: #999;
		/* 灰色文字 */
		line-height: 20rpx;
	}

	/* 电话样式 */
	.contact-phone {
		font-size: 12px;
		color: #999;
		/* 灰色文字 */
		line-height: 20rpx;
	}
</style>