sports-miniapp/src/pages/index/submitOrder/index.vue

<template>
	<view class="s-header-card">
		<zzx-icon name="location" size="14"></zzx-icon>
		<text>{{ timeList?.name }}</text>
	</view>
	<view class="content">
		<view class="s-selectdate-card">
			<view class="s-title">选择日期</view>
			<view class="select-card-list">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view :class="selIndex === index ? 'item-card-select' : 'item-card'"
						:style="{ backgroundColor: item.inventory < 1 ? '#fefefe' : '', color: item.inventory < 1 ? '#dddddd' : '' }"
						v-for="(item, index) in dateList" @click="open_calendar(item, index)">
						<view class="day">{{ item.namedDay }}</view>
						<view class="date">{{ item.day.slice(5) }}</view>
					</view>
				</scroll-view>
				<view class="more-date" @click="calendar.open()">
					更多日期
				</view>
			</view>
		</view>
		<view class="s-selecttime-card">
			<view class="s-title">选择时段</view>
			<view class="select-card-list">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="item-card" :style="{
						background: `${check_index == index ? '#F0FFBB' : shouldGrayOut(item.endTime) ? '#E0E0E0' : '#F6F6F6'}`,
						opacity: shouldGrayOut(item.endTime) ? 0.6 : 1
					}" v-for="(item, index) in timeList?.timeSlot" @click="!shouldGrayOut(item.endTime) && check_item(item, index)">
						<view class="time">{{ item.name }}</view>
						<view class="allowance">余{{ item.inventory }}</view>
						<view class="price">￥{{ item.price || '0.00' }}</view>
					</view>
				</scroll-view>
				<view class="not-data" v-if="timeList?.timeSlot.length < 1">暂无可选时段</view>
			</view>
		</view>
		<view class="r-insurance" v-for="item in insureIdList" :key="item.id">
			<view class="r-insurance-infobox">
				<view class="r-image-box">
					<image :src="item.coverImg" mode=""></image>
				</view>
				<view class="r-insurance-title">
					<view class="r-insurance-name">
						<view class="r-name">{{ item.name }}</view>
						<view class="r-tags">不支持退款</view>
					</view>
					<view class="r-insurance-desc" v-for="(desc, index) in item.insuranceObvious" :key="index">
						<text v-for="([key, value], idx) in Object.entries(desc)" :key="key + idx">{{ key }}, {{
							value }}；</text>
					</view>
					<view class="r-insurance-type">保险公司：{{ item.insuranceName_dictText }}</view>
					<view class="r-insurance-price">
						<view class="r-price">￥{{ insurePrice }}/天·人</view>
						<view class="r-insurance-btn" v-if="insureData.length < 1"
							@click="gotoInsuracePage(item, item.priceDataList)">去投保
						</view>
					</view>
				</view>
			</view>
			<view class="line" v-if="insureData.length > 0 && insureId == item.id"></view>
			<blcok v-if="insureData.length > 0 && insureId == item.id">
				<view class="r-insurance-adduser" v-for="(insureUser, index) in insureData" :key="index">
					<view class="r-adduser-btn">
						<view class="r-celar" @click="clearUser">清除</view>
						<view class="r-edit"
							@click="RouterUtils.to_page(`/pages/index/insure/index?priceDataList=${JSON.stringify(item.priceDataList)}`)">
							修改</view>
					</view>
					<view class="r-userinfo-list">
						<view class="r-userinfo-item">
							<view class="r-item-title">被保人</view>
							<view class="r-item-info">{{ insureUser.userData.length }}人(<text
									v-for="user in insureUser.userData" :key="user.id">{{ user.fullName }},</text>)
							</view>
						</view>
						<view class="r-userinfo-item">
							<view class="r-item-title">生效时间</view>
							<view class="r-item-info">{{ insureUser.slectObj.insureDay }}天({{ insureUser.startDate }}-{{
								insureUser.endDate }})
							</view>
						</view>
						<view class="r-userinfo-item">
							<view class="r-item-title">保费总金额</view>
							<view class="r-item-info">￥{{ insureUser.totalPrice }}</view>
						</view>
					</view>
				</view>
			</blcok>
		</view>
		<view class="g-userinfo-card">
			<view class="r-user">
				<view class="user-title">用户信息</view>
				<view class="invite">
					<zzx-icon name="wechat" size="16"></zzx-icon>
					<view style="margin-bottom: 8rpx;">邀请微信好友</view>
					<zzx-icon name="ashRight" size="12"></zzx-icon>
					<button class="g-share-btn" open-type="share"></button>
				</view>
			</view>
			<!-- <view class="user-tags">张三</view> -->
			<view class="r-user-list" v-for="item in userData" :key="item.id">
				<view class="minus-user" @click="deleteUser(item)">-</view>
				<view class="r-list">
					<view class="name">{{ item.fullName }}</view>
					<view class="id-num">身份证 {{ idCardHide(item.identityCard) }}</view>
				</view>
			</view>
			<view class="g-adduser-btn" @click="toUserList">
				<view class="add-icon">+</view>
				<view class="add-text">添加用户</view>
			</view>
		</view>
		<view class="submit-btn" @click="submitBooking">免费 立即预约</view>
	</view>
	<uni-calendar ref="calendar" :insert="false" :date="selectInsurance" @confirm="confirm" />
	<uni-popup ref="insurePopup" type="center">
		<view class="r-center-popup" v-if="agreementContent">
			<view class="r-popup-title">{{ agreementContent.protocolName }}</view>
			<view class="r-popup-content">
				<rich-text :nodes="agreementContent.protocolContent"></rich-text>
			</view>
			<view class="r-popup-footer">
				<view class="r-popup-needbtn" @click="toNeed">我需要购买保险</view>
				<view class="r-popup-refusebtn" @click="toRefuse">我拒绝购买保险</view>
				<view class="r-popup-checkbox" @click="select_insurance = !select_insurance">
					<zzx-icon :name="select_insurance ? 'selected' : 'unchecked'" size="14"></zzx-icon>
					<text>我已认真阅读及确认</text>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { RouterUtils, TipsUtils, idCardHide, debounce } from '@/utils/util';
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';
import { http } from '@/utils/http'
import { useCacheStore } from '@/stores/cache'
const cache = useCacheStore()
const calendar = ref();
const check_index = ref(0);
onLoad((option) => {
	placeId.value = option.id
	orderFormData.value.productIds = option.id
})

onShareAppMessage((res) => {
	if (res.from === 'button') {// 来自页面内分享按钮
		console.log(res.target)
	}
	return {
		title: '邀请您加入',
		path: `pages/index/userList/index?userId=${cache.get('USER_INFO').id}`
	}
})

onMounted(() => {
	get_previewTIme()
	get_userData()
	getInsureData()
})
const toUserList = () => {
	RouterUtils.to_page('/pages/index/userList/index')
}

const selIndex = ref(0)
const selectInsurance = ref()
const open_calendar = (e, i) => {
	if (e.inventory < 1) return TipsUtils.tips_toast('该天暂无库存')
	selectInsurance.value = e.day
	selIndex.value = i
	get_previewOrderPlaceSchool(e.day)
}
// 日历回调确认
const confirm = (e) => {
	get_previewOrderPlaceSchool(e.fulldate)
	selIndex.value = -1
}

// 置灰处理
const shouldGrayOut = (endTime: string) => {
	if (!endTime) return true; // 如果没有结束时间，默认为不可用
	// 只有当选中的日期是今天时才检查时间是否过期
	if (dateList.value && dateList.value[selIndex.value] && dateList.value[selIndex.value].namedDay === '今天') {
		return isTimeExpired(endTime);
	}
	return false;
}

const isTimeExpired = (endTime: string) => {
	if (!endTime) return false;
	const now = new Date();
	const currentTime = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
	// 比较时间
	return currentTime > endTime;
}

const rulesId = ref()
const check_item = (e, i) => {
	if (e.inventory < 1) return TipsUtils.tips_toast('余量不足，请选择其他时段')
	if (shouldGrayOut(e.endTime)) return TipsUtils.tips_toast('该时段已过期，请选择其他时段')
	console.log(e);
	check_index.value = i
	rulesId.value = e.id
	orderFormData.value.productIds = e.id
}

// 预览时间选项
const dateList = ref()
const get_previewTIme = () => {
	http.get('/order/previewOrderPlaceSchoolTime', { data: { placeId: placeId.value }, loading: true }).then((res) => {
		dateList.value = res.result
		get_previewOrderPlaceSchool(res.result[0].day)
	})
}

// 场地信息预览
const placeId = ref()
const timeList = ref()
const insureIdList = ref([])  // 保险列表
const insurePrice = ref() // 保险价格
const inventory = ref() // 余量
const get_previewOrderPlaceSchool = (startTime: string) => {
	http.get('/order/previewOrderPlaceSchool', { data: { placeId: placeId.value, startTime: startTime }, loading: true }).then((res) => {
		timeList.value = res.result
		// 重置选中索引
		check_index.value = -1
		if (res.result.timeSlot && res.result.timeSlot.length > 0) {
			// 找到第一个可用的时段（有库存且未过期）
			let defaultIndex = -1
			for (let i = 0; i < res.result.timeSlot.length; i++) {
				// 检查时段是否可用（有库存且未过期）
				if (res.result.timeSlot[i].inventory > 0 && !shouldGrayOut(res.result.timeSlot[i].endTime)) {
					defaultIndex = i
					break
				}
			}
			// 只有找到可用时段才设置选中状态
			if (defaultIndex !== -1) {
				check_index.value = defaultIndex
				rulesId.value = res.result.timeSlot[defaultIndex].id
				inventory.value = res.result.timeSlot[defaultIndex].inventory
				orderFormData.value.productIds = res.result.timeSlot[defaultIndex].id
			} else {
				// 如果没有可用时段，清空选中状态
				rulesId.value = null
				inventory.value = 0
				orderFormData.value.productIds = null
				TipsUtils.tips_toast('暂无可选时段')
			}
		}
		// 处理保险相关数据
		res.result.insureIdList.map((item: any) => {
			item.insuranceObvious = JSON.parse(item.insuranceObvious)
			item.insuranceObvious = [item.insuranceObvious]
			item.priceDataList.map((item2: any) => {
				if (item2.insureDay === 1) {
					insurePrice.value = item2.insurePrice
				}
			})
		})
		insureIdList.value = res.result.insureIdList
	})
}

const insureData = ref([])
const getInsureData = () => {
	uni.$on('insureData', function (data) {
		insureData.value = data
		console.log(insureData.value, '投保人信息');
		orderFormData.value.insureOrderInfoForm.assertStartTime = insureData.value[0].startDate
		orderFormData.value.insureOrderInfoForm.assertEndTime = insureData.value[0].endDate
		orderFormData.value.insureOrderInfoForm.insurePriceId = insureData.value[0].slectObj.id
		if (data.length > 0) {
			let familyMembersIds = data[0].userData.map(item => item.id)
			orderFormData.value.insureOrderInfoForm.familyMembersIds = familyMembersIds.join(',')
		} else {
			orderFormData.value.insureOrderInfoForm.familyMembersIds = []
		}
	})
}

const clearUser = async () => {
	let res: any = await TipsUtils.tips_alert('确定清除投保人信息吗？', true)
	if (res.confirm) {
		insureData.value = []
	}
}

const priceDataListData = ref([])
const insureId = ref()
const gotoInsuracePage = (e1: any, e2: any) => {
	insureId.value = e1.id
	getFindByType(e1.insuranceName)
	priceDataListData.value = e2
	orderFormData.value.insureOrderInfoForm.insureId = e1.id
}

const agreementContent = ref()
const insurePopup = ref()
const getFindByType = (insuranceName: any) => {
	http.get('/my/feedback/findByType', { data: { insuranceName: insuranceName, protocolType: 0 }, loading: true }).then((res: any) => {
		agreementContent.value = res.result
		insurePopup.value.open()
	})
}

const select_insurance = ref(false)
const toNeed = () => {
	if (!select_insurance.value) return TipsUtils.tips_toast('请先阅读并同意协议')
	RouterUtils.to_page(`/pages/index/insure/index?priceDataList=${JSON.stringify(priceDataListData.value)}&insureId=${insureId.value}`)
	insurePopup.value.close()
}

const toRefuse = () => {
	if (select_insurance.value) {
		insurePopup.value.close()
	} else {
		TipsUtils.tips_toast('请先阅读并同意协议')
	}
}
const userData = ref([])
const get_userData = () => {
	uni.$on('userData', function (data) {
		console.log(data, '携带用户');
		userData.value = data
		if (data.length > 0) {
			let familyIds = data.map(item => item.id)
			orderFormData.value.familyIds = familyIds.join(',')
		} else {
			orderFormData.value.familyIds = []
		}
	})
}

const deleteUser = async (e) => {
	let res = await TipsUtils.tips_alert('确定删除该用户吗？', true)
	if (res.confirm) {
		userData.value = userData.value.filter(user => user.id !== e.id)
	}
}

let orderFormData = ref({
	amount: 1,
	type: 0,
	orderType: 0,
	productIds: null,
	familyIds: '',
	insureOrderInfoForm: {
		insureId: '',
		assertStartTime: '',
		assertEndTime: '',
		insurePriceId: '',
		familyMembersIds: '',
	}
})
const submitOrderImpl = () => {
	if (userData.value.length === 0) return TipsUtils.tips_toast('请添加成员')
	if (!rulesId.value) {
		return TipsUtils.tips_toast('请选择可用时段')
	}
	if (inventory.value === 0) return TipsUtils.tips_toast('余量不足，请选择其他时段')
	const selectedTimeSlot = timeList.value.timeSlot.find(item => item.id === rulesId.value)
	if (selectedTimeSlot && shouldGrayOut(selectedTimeSlot.endTime)) {
		return TipsUtils.tips_toast('所选时段已过期，请重新选择')
	}
	let data = { ...orderFormData.value };
	if (!insureData.value || insureData.value.length === 0) {
		delete data.insureOrderInfoForm;
	}
	http.post('/order/createOrder', data, { loading: true }).then((res) => {
		uni.requestSubscribeMessage({
			tmplIds: ['WSJjc9I24ijtr3EyNVXjEvTQm0gIECW9ABYVFcegOwM'],
			success(su) {
				TipsUtils.tips_toast('订阅成功')
				getOrderQuery(res.result.orderCode, res.result.orderId)
			},
			fail(err) {
				getOrderQuery(res.result.orderCode, res.result.orderId)
				console.log(err, '订阅消息失败')
			}
		})
	})
}

const submitBooking = debounce(submitOrderImpl, 500)  //防抖

// code编码 "100001支付成功";"100002查询失败"; "100003查询中 "; "100004支付失败"
const getOrderQuery = (orderCode: string, orderId: string, retryCount = 0) => {
	http.get('/order/orderQuery', { data: { orderCode: orderCode }, loading: true }).then((res) => {
		if (res.result == '100001') {
			RouterUtils.to_page(`/pages/index/toBeUsed/index?orderId=${orderId}&orderType=${orderFormData.value.orderType}`)
		} else if (retryCount <= 3) {
			setTimeout(() => {
				getOrderQuery(orderCode, orderId, retryCount + 1)
			}, 1000)
		} else {
			if (res.result == '100003') {
				console.log('查询中，但已达到最大查询次数')
			} else if (res.result == '100002') {
				console.log('查询失败')
			} else if (res.result == '100004') {
				console.log('支付失败')
				TipsUtils.tips_toast('支付失败')
			}
		}
	}).catch((error) => {
		console.error('查询订单失败：', error)
		if (retryCount < 2) {
			setTimeout(() => {
				getOrderQuery(orderCode, orderId, retryCount + 1)
			}, 1000)
		}
	})
}
</script>

<style lang="less" scoped>
.s-header-card {
	background: #fff;
	padding: 20rpx;
	display: flex;
	align-items: center;
	gap: 10rpx;
	font-weight: bold;
	font-size: 28rpx;
	color: #222222;
}

.s-selectdate-card {
	margin-top: 20rpx;
	padding: 20rpx;
	background: linear-gradient(180deg, #FCFFF1 0%, #FFFFFF 100%);
	border-radius: 32rpx;

	.s-title {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
	}

	.select-card-list {
		margin-top: 20rpx;
		display: flex;
		align-items: center;

		.scroll-view_H {
			white-space: nowrap;
			width: 90%;

			.item-card-select {
				margin-right: 16rpx;
				display: inline-block;
				width: 104rpx;
				height: 120rpx;
				background: #F0FFBB;
				border-radius: 16rpx;
				font-size: 24rpx;
				color: #222222;
				text-align: center;

				.day {
					padding-top: 20rpx;
				}

				.date {
					margin-top: 12rpx;
				}
			}

			.item-card {
				margin-right: 16rpx;
				display: inline-block;
				width: 104rpx;
				height: 120rpx;
				background: #F6F6F6;
				border-radius: 16rpx;
				font-size: 24rpx;
				color: #222222;
				text-align: center;

				.day {
					padding-top: 20rpx;
				}

				.date {
					margin-top: 12rpx;
				}
			}
		}

		.more-date {
			width: 200rpx;
			font-size: 24rpx;
			color: #FDD143;
			text-align: center;
		}
	}
}

.s-selecttime-card {
	margin-top: 20rpx;
	padding: 20rpx;
	background: linear-gradient(180deg, #FCFFF1 0%, #FFFFFF 100%);
	border-radius: 32rpx;

	.s-title {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
	}

	.select-card-list {
		margin-top: 20rpx;

		.scroll-view_H {
			white-space: nowrap;
			width: 100%;

			.item-card {
				margin-right: 16rpx;
				display: inline-block;
				width: 220rpx;
				height: 172rpx;
				background: #F6F6F6;
				border-radius: 16rpx;
				text-align: center;

				.time {
					margin-top: 30rpx;
					font-size: 24rpx;
					color: #222222;
				}

				.allowance {
					margin-top: 12rpx;
					font-size: 24rpx;
					color: #222222;
				}

				.price {
					margin-top: 12rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #FB5B5B;
				}
			}
		}
	}
}

.r-insurance {
	margin-top: 20rpx;
	padding: 20rpx;
	background: #FFFFFF;
	border-radius: 32rpx;

	.r-insurance-infobox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20rpx;
		margin-bottom: 20rpx;

		.r-image-box {
			&>image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 32rpx;
			}
		}

		.r-insurance-title {
			.r-insurance-name {
				display: flex;
				align-items: center;
				gap: 16rpx;

				.r-name {
					font-weight: 800;
					font-size: 28rpx;
					color: #222222;
				}

				.r-tags {
					width: 136rpx;
					height: 36rpx;
					background: #FDD143;
					border-radius: 8rpx;
					font-size: 22rpx;
					color: #222222;
					text-align: center;
					line-height: 36rpx;
				}
			}

			.r-insurance-desc {
				width: 440rpx;
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #AAAAAA;
			}

			.r-insurance-type {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #AAAAAA;
			}

			.r-insurance-price {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.r-price {
					font-weight: bold;
					font-size: 28rpx;
					color: #FB5B5B;
				}

				.r-insurance-btn {
					width: 200rpx;
					height: 68rpx;
					background: #C8FF0C;
					border-radius: 60rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #222222;
					text-align: center;
					line-height: 68rpx;
				}
			}
		}
	}

	.r-insurance-adduser {
		background: #F6F6F6;
		border-radius: 32rpx;
		padding: 20rpx;
		margin-top: 20rpx;

		.r-adduser-btn {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 20rpx;

			.r-celar {
				width: 192rpx;
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 60rpx;
				border: 2rpx solid #FB5B5B;
				font-weight: bold;
				font-size: 28rpx;
				color: #FB5B5B;
				text-align: center;
				line-height: 68rpx;
			}

			.r-edit {
				width: 200rpx;
				height: 68rpx;
				background: #C8FF0C;
				border-radius: 60rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
				text-align: center;
				line-height: 68rpx;
			}
		}

		.r-userinfo-list {
			.r-userinfo-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;

				.r-item-title {
					font-size: 28rpx;
					color: #AAAAAA;
				}

				.r-item-info {
					font-size: 28rpx;
					color: #222222;
				}
			}
		}
	}
}

.g-userinfo-card {
	margin-top: 20rpx;
	padding: 20rpx;
	background: #FFFFFF;
	border-radius: 32rpx;

	.r-user {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.user-title {
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}

		.invite {
			display: flex;
			align-items: center;
			gap: 8rpx;
			font-size: 24rpx;
			color: #AAAAAA;
			position: relative;

			.g-share-btn {
				position: absolute;
				width: 200rpx;
				height: 60rpx;
				opacity: 0;
			}
		}
	}

	.user-tags {
		margin-top: 20rpx;
		width: 112rpx;
		height: 40rpx;
		background: #FDD143;
		border-radius: 8rpx;
		line-height: 40rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		text-align: center;
		font-size: 28rpx;
		color: #222222;
	}

	.r-user-list {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
		border-top: 1rpx solid #F0F0F0;
		height: 140rpx;

		.minus-user {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background: #FB5B5B;
			text-align: center;
			line-height: 20rpx;
			font-weight: 600;
			color: #fff;
			font-size: 40rpx;
		}

		.r-list {
			.name {
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
			}

			.id-num {
				font-size: 28rpx;
				color: #222222;
			}
		}
	}

	.g-adduser-btn {
		display: flex;
		height: 88rpx;
		align-items: center;
		justify-content: center;
		gap: 20rpx;
		border-top: 1rpx solid #F0F0F0;

		.add-icon {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background: #FDD143;
			font-size: 30rpx;
			font-weight: 600;
			color: #fff;
			text-align: center;
			line-height: 20rpx;
		}

		.add-text {
			font-size: 28rpx;
			color: #FDD143;
		}
	}
}

.submit-btn {
	margin-top: 20rpx;
	width: 100%;
	height: 100rpx;
	background: #C8FF0C;
	border-radius: 60rpx;
	font-weight: bold;
	font-size: 32rpx;
	color: #222222;
	text-align: center;
	line-height: 100rpx;
}

.r-center-popup {
	width: 646rpx;
	max-height: 1000rpx;
	background: #F6F6F6;
	border-radius: 32rpx;
	padding: 20rpx;

	.r-popup-title {
		font-weight: bold;
		font-size: 32rpx;
		color: #222222;
		text-align: center;
	}

	.r-popup-content {
		margin-top: 28rpx;
		font-size: 28rpx;
		color: #222222;
		max-height: 600rpx;
		overflow: auto;
	}

	.r-popup-footer {
		margin-top: 20rpx;

		.r-popup-needbtn {
			margin: auto;
			width: 598rpx;
			height: 100rpx;
			background: #C8FF0C;
			border-radius: 60rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
			text-align: center;
			line-height: 100rpx;
		}

		.r-popup-refusebtn {
			margin: auto;
			margin-top: 24rpx;
			width: 598rpx;
			height: 100rpx;
			background: #f0eeee;
			border-radius: 60rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #AAAAAA;
			text-align: center;
			line-height: 100rpx;
		}

		.r-popup-checkbox {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 16rpx;
			font-size: 24rpx;
			color: #AAAAAA;

			&>text {
				margin-bottom: 8rpx;
			}
		}
	}
}
</style>