leromro-mini/pages/goodsDetails/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.certificationPicture" mode="aspectFill"></image>

						<!-- 中间信息（姓名/类别等） -->
						<view class="card-info">
							<view class="info-item">姓名：{{listData.name}}</view>
							<view class="info-item">类别：{{listData.serviceCategory}}</view>
							<view class="info-item">科目：{{listData.serviceSubject}}</view>
							<view class="Telephone">电话：{{listData.phonenumber}}</view>
							<view class="info-item">住址：{{listData.address}}</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>
					<image src="../../static/zhiyuanzhe.jpg" mode="" style="width: 100%;"></image>
				</template>
			</up-card>
			<!-- 固定底部按钮区 -->
			<view class="Wrap-btn">
				<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
					@buttonClick="buttonClick" />
			</view>

		</view>

		<!-- <up-card title="评论" :thumb="thumb" :head-style="{ height: '100rpx', padding: '0rpx 20rpx' }">
			<template #body>
				
				<view class="" style="height: 200px; width: 300px; border: 4px solid red;">
					999999
				</view>
			</template>
		</up-card> -->


		<!-- 底部弹框 -->
		<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;">￥{{onePrice}}</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="value" @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 onePrice = ref(400)
	const value = ref(''); //备注响应式
	const volunteerId = ref(''); // 存储志愿者ID
	const doorToDoorTimeArr = ref([]) // 完整时间范围
	const doorToDoorTime = ref([]) // 只具备开始、结束 时间
	const timeHostArr = ref([]) // 时间段数组
	const currentDate = ref([]) // 点击过的年月日数组数据
	const currentTime = 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 computeMoney = computed(() => {
		return totalTimes.value * onePrice.value
	})


	// 定义方法  
	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; // 关闭第一个弹框
	}
	// 底部数据
	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
		} = params;

		// 将volunteerId赋值给响应式变量
		volunteerId.value = id;
		// 使用传递的参数调用 API
		const res = await getDetailsvolunteerId({
			volunteerId: id,
			serviceCategory
		});

		// 将获取到的结果赋值给响应式变量
		listData.value = res.data || {};
	});


	// 选择日期
	const getListTime = async () => {
		const params = {
			volunteerId: Number(volunteerId.value),
		}
		const res = await volunteerwork(params)
		if (res.data) {
			console.log(res.data, '>>>>>res.data333');
			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]
		}
	}


	// 获取志愿者排班时间
	const getByDate = async (date = doorToDoorTimeArr.value[0]) => {
		currentDate.value.push(date)
		console.log(date, '获取日期2')
		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 => {
				return {
					...item,
					hours: item.reservationTime,
					timeStamp: new Date(date + ' ' + item.reservationTime).getTime() / 1000
				}
			})

			let arr = []

			doorToDoorTimeArr.value.forEach(() => {
				arr.push(TArr)
			})
			timeHostArr.value = arr

		} catch (error) {
			console.error('获取排班时间失败:', error);
		}
	};

	// 点击具体时间触发
	const getByTime = (timeObj) => {
		currentTime.value = timeObj.hours
		totalTimes.value += 1 // 记录点击次数
		console.log(totalTimes.value, '>>>>>>>>>totalTimes.value');
	}

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

	// 确认购买
	const handlConfiRmpurchase = async () => {
		// 定义要发送的数据
		const orderData = {
			orders: {
				serviceOnePrice: onePrice.value, //需要传400死值返回给后端
				serviceTotalPrice: computeMoney.value, //需要传获取到的总价
				serviceCategory: 2,
				totalTimes: totalTimes.value, //点击的次数
				serviceStartDate: "2025-04-18",
				startTime: "8:00",
				serviceDuration: 4,
				paymentMethod: 1,
				addressId: 7,
				remark: "我是图图小淘气，面对世界很好奇！",
				volunteerId: volunteerId.value
			},
			workDateList: [
				// {
				// 	workDate: currentDate.value,//需要传获取到的时间，就是某个月份
				// }
			]
		};

		(new Set(currentDate.value)).forEach((item) => {
			orderData.workDateList.push({
				workDate: item,
				workStartTime: currentTime.value,
			})
		})




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