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="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" @change="groupChange">
						<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>
		<up-notify message="支付成功" :show="showNotify"></up-notify>
	</view>
</template>

<script setup>
	// 点击当前时间，后面时间禁用
	// workDate获取点击的精确时间
	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"


	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 showSum = ref(false);
	const showNotify = ref(false) //支付成功提示
	const remark = ref('') //备注

	const computeMoney = computed(() => {
		return totalTimes.value * businessPrice.value
	})

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

	// 定义方法  
	function open() {
		// 打开逻辑，比如设置 show 为 true  
		show.value = true;
	}

	function close() {
		// 关闭逻辑，设置 show 为 false  
		show.value = false;
	}

	// 定义方法
	function openSum() {
		// 打开逻辑，比如设置 show 为 true  
		showSum.value = true;
	}

	function closeSum() {
		// 关闭逻辑，设置 show 为 false  
		showSum.value = false;
	}
	const handleBuy = () => {
		show.value = false; // 关闭第一个弹框
		showSum.value = true; // 打开第二个弹框
	};
	const handlCancel = () => {
		show.value = false; // 关闭第一个弹框
		selectedTimes.value = []; // 清空已选时间
		  totalTimes.value = 0;     // 重置点击次数
	}
	// 底部数据
	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 buttonClick = (e) => {
		// console.log(e);
		// options.value[2].info++;
		show.value = true; // 打开弹框
	};


	// Radio 单选框数据
	const radiolist1 = reactive([{
			name: '',
			disabled: false,
		},

	]);

	// up-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
	const radiovalue1 = ref('苹果');

	const groupChange = (n) => {
		console.log('groupChange', n);
	};

	const radioChange = (n) => {
		console.log('radioChange', n);
	};


	// 修改详情页底部样式
	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; // 更新点击次数
	}

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

	// 确认购买
	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: [
				// {
				// 	workDate: currentDate.value,//需要传获取到的时间，就是某个月份
				// }
			]
		};


		// currentDate.value.length && (new Set(currentDate.value)).forEach((item) => {
		// 	orderData.workDateList.push({
		// 		workDate: item,
		// 		workStartTime: currentTime.value,
		// 	})
		// })
		// 转换所有选择的时间
		selectedTimes.value.forEach(item => {
			orderData.workDateList.push({
				workDate: item.date,
				workStartTime: item.time
			});
		});




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

	onMounted(async () => {
		await getListTime()
		// getByDate()
	})
</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;
	}

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