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.businessTierName}}</view>
							<view v-if="serviceSubjectName != null" class="info-item">类别：{{ listData.projectTypeName }}
							</view>
							<view class="Telephone">服务时长：{{listData.businessDuration}}</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 v-if="show" :businessDuration="listData.businessDuration"
							: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>
					<scroll-view scroll-y style="height: 460rpx;">
						<view class="card-container" v-for="(item, index) in selectedTimes" :key="index">
							<image class="card-image" :src="listData.volunteerPicture" mode="aspectFill"></image>
							<view class="card-content">
								<view class="info-item">服务项目：{{listData.projectName}}</view>
								<view class="Telephone">服务时长：{{listData.businessDuration}}</view>
								<view class="date">日期:{{item.date}}</view>
								<view class="time">
									时间：{{ item.time }}
								</view>
							</view>
						</view>
					</scroll-view>
				</up-cell-group>
			</view>

			<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/钱包.png" class="payment-icon"></image>
						<text class="option-text">钱包</text>
					</view>
					<up-radio-group v-model="radiovalue1" placement="column" @change="handlePaymentMethodChange">
						<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-group v-model="radiovalue1" placement="column" @change="handlePaymentMethodChange">
						<up-radio :customStyle="{marginLeft: 'auto'}" v-for="(item, index) in radiolist2" :key="index"
							:label="item.name" :name="item.name"></up-radio>
					</up-radio-group>
				</view>

				<up-line></up-line>

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

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


			</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="handlConfiRmpurchase">
					购买￥{{ computeMoney }}
				</up-button>
			</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,
		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 addressId = 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('苹果');
	const selectedAddress = ref(null);
	const addressFlag = ref(false)
	const paymentMethod = ref(1) // Add payment method ref with default value 1 (wallet)

	const addressInfo = ref(null)
	// Radio 单选框数据
	const radiolist1 = reactive([{
		name: '钱包支付',
		disabled: false,
	}, ]);

	const radiolist2 = reactive([{
		name: '微信支付',
		disabled: false,
	}, ]);

	// 详情底部立即购买弹框
	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; // 打开第一个弹框
	}

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

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

	// 新增：处理子组件传回的地址数据
	const handleAddressUpdate = (newAddress) => {
		selectedAddress.value = newAddress;
		addressFlag.value = false; // 关闭选择器
	};
	// 详情底部底部数据
	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 option = JSON.parse(decodeURIComponent(options.params));
		const {
			volunteerId: id,
			serviceCategory: categoy,
			businessManagementId: manage
		} = option
		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) {
			coannsole.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) => {

				// 初始化disabled变量
				let disabled = false
				if (item.hasReservation === 1)(disabled = true)

				let itemTime = item.timeStamp > 9999999999 ? item.timeStamp : item.timeStamp * 1000;

				if (new Date().getTime() > itemTime)(disabled = true)

				return {
					...item,
					hours: item.reservationTime,
					timeStamp: new Date(`${date} ${item.reservationTime}`).getTime() / 1000,
					date: date,
					// checked: false,  // 每次点击请求时间后，延续之前选中状态，不初始化选中 
					disabled
				}
			});

			// 如果 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) {
			return;
		}

		if (timeObj.checked) { // 选中 添加到已选时间数组
			selectedTimes.value.push({
				date: timeObj.date,
				time: timeObj.hours,
				timestamp: timeObj.timeStamp
			});
		} else { // 取消选中
			const index = selectedTimes.value.findIndex(
				item => item.timestamp === timeObj.timeStamp
			)
			selectedTimes.value.splice(index, 1)
		}

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

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


	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)
	// 		})
	// 	})
	// 	return nyrSet
	// })

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



	// 确认购买
	const handlConfiRmpurchase = () => {
		if (!selectedAddress.value) {
			uni.showToast({
				title: '请先选择收货地址',
				icon: 'none',
				duration: 2000,
			});
			return; // 阻止购买
		}

		// 如果有地址，执行购买逻辑
		proceedToPayment();
	};

	const proceedToPayment = 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: paymentMethod.value,
				volunteerId: volunteerId.value,
				remark: remark.value,
				businessManagementId: businessManagementId.value,
				volunteerInfoId: listData.value.volunteerInfoId,
				addressId: selectedAddress.value.addressId,
			},
			workDateList: []
		};
		// 转换所有选择的时间
		selectedTimes.value.forEach(item => {
			orderData.workDateList.push({
				workDate: item.date,
				workStartTime: item.time
			});
		});

		try {
			const res = await ordersCreateOrder(orderData);
			if (res.code == 200) {
				if (paymentMethod.value === 2) { // 微信支付
					// 调用微信支付
					const [err, payRes] = await uni.requestPayment({
						...res.data,
						package: res.data.packageValue,
					});
					if (err) {
						throw new Error('微信支付失败');
					}
				}
				
				uni.showToast({
					title: '支付成功',
					icon: 'success',
					duration: 1500,
					mask: true,
				});
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/index'
					});
				}, 1500);
			}
		} catch (error) {
			console.error('支付失败:', error);
			uni.showToast({
				title: '支付失败',
				icon: 'error',
				duration: 1500,
				mask: true,
			});
		}
	};

	// 修改支付方式
	const handlePaymentMethodChange = (value) => {
		if (value === '钱包支付') {
			paymentMethod.value = 1;
		} else if (value === '微信支付') {
			paymentMethod.value = 2;
		}
	};

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

<style scoped>
	/* 添加卡片样式 */
	.card-container {
		display: flex;
		padding: 20rpx;
		margin: 10rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.card-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

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

	.info-item,
	.Telephone,
	.date,
	.time {
		font-size: 26rpx;
		margin-bottom: 8rpx;
	}

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