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

<template>
	<!-- 不同类型进入的loadType（1：学校课程；2:体育馆课程;3:教练课程） -->
	<view class="content">
		<view class="g-orderinfo-card">
			<view class="g-shoping-info" v-if="previewCourseInfo">
				<image class="shoping-img" :src="previewCourseInfo.cover" mode=""></image>
				<view class="shoping-info">
					<view class="name">{{ previewCourseInfo.placeName || previewCourseInfo.name }}</view>
					<view class="price-info">
						<!-- previewCourseInfo?.originalPrice字段用来判断是课程订单还是场地订单 -->
						<view class="price"><text class="mini-text">￥</text>{{ previewCourseInfo?.originalPrice ?
							previewCourseInfo?.originalPrice : previewCourseInfo?.sellingPrice.toFixed(2)
						}}</view>
						<view class="price-stepper">
							<view class="minus" @click="minusNum">-</view>
							<input v-model="countTotal" disabled type="number" />
							<view class="add" @click="addNum">+</view>
						</view>
					</view>
				</view>
			</view>
			<view class="g-shoping-total">
				<view class="total-price">
					<view class="">商品总价（共{{ countTotal }}件）</view>
					<view class="">￥{{
						previewCourseInfo?.originalPrice ? (previewCourseInfo?.originalPrice * countTotal).toFixed(2) :
							previewCourseInfo?.sellingPrice.toFixed(2)
							* countTotal }}</view>
				</view>
				<view class="total-price">
					<view class="">
						<text v-if="buyType == 1">试听优惠</text>
						<text v-if="buyType == 0 || placeId">团购优惠</text>
					</view>
					<view class="">-￥
						<!-- <text v-if="buyType == 0 || !placeId">{{ previewCourseInfo?.discountPrice }}</text> -->
						<text v-if="buyType == 1">{{ previewCourseInfo?.sellingPrice.toFixed(2) }}</text>
						<text v-else>{{
							previewCourseInfo?.originalPrice ? (previewCourseInfo?.originalPrice -
								previewCourseInfo?.sellingPrice.toFixed(2)) * countTotal : ((previewCourseInfo?.sellingPrice
									-
									previewCourseInfo?.totalPrice.toFixed(2))) * countTotal }}</text>
					</view>
				</view>
			</view>
			<view class="subtotal">小计 ￥
				<text v-if="buyType == 1">{{ (0 + totalInsurePrice).toFixed(2) }}</text>
				<text v-else>{{ previewCourseInfo?.originalPrice ? (previewCourseInfo?.sellingPrice *
					countTotal).toFixed(2) : ((previewCourseInfo?.sellingPrice - (previewCourseInfo?.sellingPrice
						- previewCourseInfo?.totalPrice)) * countTotal).toFixed(2) }}</text>
			</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">￥{{ item.priceDataList[0].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, index) in insureUser.userData" :key="user.id">{{ user.fullName }}{{
										index < insureUser.userData.length - 1 ? ',' : '' }}</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" v-if="!placeId">
			<view class="r-user">
				<view class="user-title">用户信息 <text class="mini-text">至少需选择{{ countTotal }}人</text></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="g-usetips-card">
			<view class="use-title">{{ placeId ? '使用须知' : '购买须知' }}</view>
			<block v-if="previewCourseInfo?.usableCount && previewCourseInfo?.indate">
				<view class="use-title" style="font-size: 24rpx;margin-top: 14rpx;">有效期</view>
				<view class="use-text">购买后{{ previewCourseInfo?.indate }}天有效</view>
				<view class="use-title" style="font-size: 24rpx;margin-top: 14rpx;">除外日期</view>
				<view class="use-text">每<text v-for="item in previewCourseInfo?.downTime">{{ '周' + item + ' '
				}}</text>不可用
				</view>
				<view class="use-title" style="font-size: 24rpx;margin-top: 14rpx;">预约信息</view>
				<view class="use-text">{{ previewCourseInfo?.advanceTime == 0 ? '免预约' :
					'请你提前' + previewCourseInfo?.advanceTime + '小时预约' }}</view>
				<view class="use-title" style="font-size: 24rpx;margin-top: 14rpx;">适用人数</view>
				<view class="use-text">每张券最多{{ previewCourseInfo?.usableCount }}人使用</view>
				<view class="use-title" style="font-size: 24rpx;margin-top: 14rpx;">温馨提示</view>
			</block>
			<view class="use-text">
				<view class="item-text">
					<rich-text :nodes="previewCourseInfo?.reminder"></rich-text>
				</view>
			</view>
			<!-- <view class="use-tips-more"
				@click="RouterUtils.to_page(`/pages/index/useNotice/index?reminder=${previewCourseInfo?.reminder}`)">
				<view class="more-text">查看更多</view>
				<view class="use-line"></view>
			</view> -->
		</view>
		<view class="g-usetips-card">
			<view class="use-title">服务保障</view>
			<view class="use-text">
				<view>退款规则</view>
				<view class="item-text">
					{{ previewCourseInfo?.refundType == 1 ? '未消费随时退款，过期未消费自动退款。' : '不支退款，请慎重考虑后购买。' }}
				</view>
			</view>
			<!-- <view class="use-tips-more">
				<view class="more-text">查看更多</view>
				<view class="use-line"></view>
			</view> -->
		</view>
		<view style="height: 166rpx;"></view>
		<view class="footer footer-box">
			<view class="footer-price">
				<view class="total-price">合计：</view>
				<view class="price">
					<text class="mini-text">￥</text>
					<text>{{
						previewCourseInfo?.originalPrice ? (previewCourseInfo?.originalPrice * countTotal).toFixed(2) :
							((previewCourseInfo?.sellingPrice
								|| 0) * countTotal + totalInsurePrice).toFixed(2) }}</text>
				</view>
				<view class="discount">优惠￥
					<text v-if="buyType == 1">{{ previewCourseInfo?.sellingPrice.toFixed(2) }}</text>
					<text v-else>{{
						previewCourseInfo?.originalPrice ? (previewCourseInfo?.originalPrice -
							previewCourseInfo?.sellingPrice.toFixed(2)) * countTotal : ((previewCourseInfo?.sellingPrice
								-
								previewCourseInfo?.totalPrice.toFixed(2))) * countTotal }}</text>
				</view>
			</view>
			<view class="footer-btn" @click="submitOrder">
				<button>
					<view class="btn-price">
						<text v-if="buyType == 1">{{ (0 + totalInsurePrice).toFixed(2) }}</text>
						<text v-else>
							￥{{ previewCourseInfo?.originalPrice ? (previewCourseInfo?.sellingPrice *
								countTotal).toFixed(2) :
								(((previewCourseInfo?.sellingPrice || 0) - ((previewCourseInfo?.sellingPrice || 0) -
									(previewCourseInfo?.totalPrice || 0))) * countTotal + totalInsurePrice).toFixed(2) }}</text>
					</view>
					<view class="btn-price">立即支付</view>
				</button>
			</view>
		</view>
	</view>
	<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, computed } from 'vue';
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';
import { RouterUtils, TipsUtils, idCardHide, debounce } from '@/utils/util';
import { http } from '@/utils/http'
import { useCacheStore } from '@/stores/cache'
const cache = useCacheStore()
const insurePopup = ref()
const select_insurance = ref(false)
const loadType = ref(1)
const buyType = ref()
const placeId = ref()
onLoad((options) => {
	console.log(options);
	loadType.value = options.type
	courseId.value = options.courseId
	placeId.value = options.placeId
	buyType.value = options.buyType
	orderFormData.value.type = options.orderType
	orderFormData.value.orFreeOrder = options.buyType
	orderFormData.value.amount = 1
})

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

onMounted(() => {
	if (placeId.value) {
		getEventsDetail()
	} else {
		get_previewOrderCourse()
	}
	get_userData()
	getInsureData()
})

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

const userData = ref([])
const get_userData = () => {
	uni.$on('userData', function (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: any = await TipsUtils.tips_alert('确定删除该用户吗？', true)
	if (res.confirm) {
		userData.value = userData.value.filter(user => user.id !== e.id)
		let familyIds = userData.value.map(item => item.id)
		orderFormData.value.familyIds = familyIds.join(',')
	}
}

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 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 courseId = ref()
const previewCourseInfo = ref()
const insureIdList = ref([])  // 保险列表
const insurePrice = ref() // 保险价格
// 课程预览
const get_previewOrderCourse = () => {
	http.get('/order/previewOrderCourse', { data: { courseId: courseId.value }, loading: true }).then((res) => {
		previewCourseInfo.value = res.result
		orderFormData.value.productIds = res.result.id
		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 getEventsDetail = () => {
	http.get('/order/PreviewOrderPlaceGymnasiumNoFixation', { data: { placeId: placeId.value }, loading: true }).then((res) => {
		previewCourseInfo.value = res.result
		orderFormData.value.productIds = res.result.id || res.result.placeId
	})
}

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 totalInsurePrice = computed(() => {
	if (!insureData.value || insureData.value.length === 0) {
		return 0;
	}
	if (insureData.value.length === 1) {
		return parseFloat(insureData.value[0].totalPrice) || 0;
	}
	return insureData.value.reduce((total, insure) => total + (parseFloat(insure.totalPrice) || 0), 0);
});

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

const countTotal = ref(1)
const minusNum = () => {
	if (countTotal.value > 1) {
		countTotal.value--
		orderFormData.value.amount = countTotal.value
	}
}

const addNum = () => {
	if (buyType.value == 1) return TipsUtils.tips_toast('试听课程不支持多个购买')
	if (courseId.value) {
		get_checkCourseLimitNum(countTotal.value + 1)
	} else {
		countTotal.value++
	}
}

const get_checkCourseLimitNum = (targetNum) => {
	http.get('/order/checkCourseLimitNum', {
		data: {
			courseId: courseId.value,
			limitNum: targetNum
		},
		loading: true
	}).then((res) => {
		if (res.result === true) {
			countTotal.value = targetNum
		} else {
			TipsUtils.tips_toast('超出可购数量')
		}
	})
}

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

const toRefuse = () => {
	if (select_insurance.value) {
		insurePopup.value.close()
	} else {
		TipsUtils.tips_toast('请先阅读并同意协议')
	}
}

let orderFormData = ref({
	type: null,
	orderType: null,
	orFreeOrder: null, //0正常 1试听
	productIds: null,
	amount: null,
	familyIds: '',
	insureOrderInfoForm: {
		insureId: '',
		assertStartTime: '',
		assertEndTime: '',
		insurePriceId: '',
		familyMembersIds: '',
	}
})

const orderCode = ref(null)
const orderId = ref(null)
const submitOrderImpl = () => {
	orderFormData.value.amount = countTotal.value

	// 计算总金额
	let totalPrice = 0;
	if (previewCourseInfo.value?.originalPrice) {
		totalPrice = previewCourseInfo.value.originalPrice * countTotal.value;
	} else {
		const sellingPrice = previewCourseInfo.value?.sellingPrice || 0;
		const totalPriceValue = previewCourseInfo.value?.totalPrice || 0;
		totalPrice = ((sellingPrice - (sellingPrice - totalPriceValue)) * countTotal.value + totalInsurePrice.value);
	}

	if (!placeId.value) {
		if (!userData.value) return TipsUtils.tips_toast('请添加用户信息')
		if (userData.value.length < countTotal.value) return TipsUtils.tips_toast(`请至少选择${countTotal.value}人`)
		if (userData.value.length > countTotal.value) return TipsUtils.tips_toast(`最多选择${countTotal.value}人`)
		orderFormData.value.orderType = 5
		orderFormData.value.type = 2
	} else {
		orderFormData.value.type = 0
		orderFormData.value.orderType = 2
	}
	let data = { ...orderFormData.value };
	if (!insureData.value || insureData.value.length === 0) {
		delete data.insureOrderInfoForm;
	}
	if (!userData || userData.value.length === 0) {
		delete data.familyIds
	}

	// 如果总金额为0，直接创建订单并跳转，不调用微信支付
	if (totalPrice === 0 || buyType.value == 1) {
		http.post('/order/createOrder', data, { loading: true }).then((res) => {
			orderCode.value = res.result.orderCode
			orderId.value = res.result.orderId
			// 直接查询订单状态，模拟支付成功
			getOrderQuery(orderCode.value, orderId.value)
		})
		return;
	}
	uni.requestSubscribeMessage({
		tmplIds: ['HbK-qbIC_iTY0w08xfkgirdeR_VrVhetLwEIBo3Lue4', 'T2icwNiI--oBnLfTiAniAoAJAwq1Ukb78bCjIcpuTRQ'],
		success(res) {
			TipsUtils.tips_toast('订阅成功')
			http.post('/order/createOrder', data, { loading: true }).then((res) => {
				orderCode.value = res.result.orderCode
				orderId.value = res.result.orderId
				paymentOrder(res.result.params)
			})
		},
		fail(err) {
			console.log(err, '订阅消息失败')
			http.post('/order/createOrder', data, { loading: true }).then((res) => {
				orderCode.value = res.result.orderCode
				orderId.value = res.result.orderId
				paymentOrder(res.result.params)
			})
		}
	})
}

const paymentOrder = (payInfo: object) => {
	// getOrderQuery(orderCode.value, orderId.value)
	console.log(payInfo, '支付参数');
	uni.requestPayment({
		provider: 'wxpay',
		...payInfo,
		success: function (res) {
			console.log('支付成功', res);
			setTimeout(() => {
				getOrderQuery(orderCode.value, orderId.value)
			}, 500)
		},
		fail: function (err) {
			console.log('支付失败', err);
			if (err.errMsg == 'requestPayment:fail cancel') {
				RouterUtils.to_page(`/pages/index/toBeUsed/index?orderId=${orderId.value}&orderType=${orderFormData.value.orderType}`)
				return
			} else {
				RouterUtils.to_page(`/pages/index/payError/index?errMsg=${err.errMsg}`)
			}
			// TipsUtils.tips_toast('支付失败，请稍后重试');
		}
	});
}

const submitOrder = 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>
.g-orderinfo-card {
	background: #FFFFFF;
	border-radius: 32rpx;
	padding: 20rpx;
	margin-top: 20rpx;

	.g-shoping-info {
		display: flex;
		align-items: center;
		gap: 20rpx;

		.shoping-img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 32rpx;
		}

		.shoping-info {
			width: 440rpx;

			.name {
				font-weight: 800;
				font-size: 32rpx;
				color: #222222;
				line-height: 44rp
			}

			.price-info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 26rpx;

				.price {
					font-weight: 800;
					font-size: 48rpx;
					color: #FB5B5B;
				}

				.price-stepper {
					display: flex;
					align-items: center;
					border: 1rpx solid #F0F0F0;
					border-radius: 8rpx;

					.minus {
						text-align: center;
						width: 44rpx;
						border-right: 1rpx solid #F0F0F0;
					}

					&>input {
						width: 80rpx;
						font-size: 28rpx;
						color: #222222;
						text-align: center;
					}

					.add {
						text-align: center;
						width: 44rpx;
						border-left: 1rpx solid #F0F0F0;
					}
				}
			}
		}
	}

	.g-shoping-total {
		height: 148rpx;
		margin-top: 24rpx;
		border-top: 1rpx solid #F0F0F0;

		.total-price {
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: #222222;
		}
	}

	.subtotal {
		border-top: 1rpx solid #F0F0F0;
		height: 84rpx;
		line-height: 84rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #FB5B5B;
		text-align: right;
	}
}

.g-buy-tips {
	margin-top: 20rpx;

	.tips-title {
		font-weight: bold;
		font-size: 32rpx;
		color: #222222;
	}

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

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

		.text {
			font-size: 24rpx;
			color: #AAAAAA;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}
	}
}

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

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

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

	.use-text {
		font-size: 24rpx;
		color: #222222;

		.item-text {
			margin-top: 20rpx;
		}
	}

	.use-tips-more {
		margin-top: 20rpx;

		.more-text {
			text-align: center;
			font-size: 24rpx;
			color: #CCCCCC;
		}

		.use-line {
			margin: auto;
			margin-top: 10rpx;
			width: 38rpx;
			height: 4rpx;
			background: #CCCCCC;
			border-radius: 2rpx;
		}
	}
}

.footer {
	left: 0;

	.footer-price {
		display: flex;
		align-items: center;

		.total-price {
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}

		.price {
			font-weight: 800;
			font-size: 48rpx;
			color: #FB5B5B;
		}

		.discount {
			margin-left: 10rpx;
			font-size: 24rpx;
			color: #222222;
		}
	}

	.footer-btn {
		&>button {
			width: 226rpx;
			height: 100rpx;
			background: #C8FF0C;
			border-radius: 60rpx;
			font-weight: bold;
			font-size: 26rpx;
			color: #222222;
			line-height: 30rpx;

			.btn-price:nth-child(1) {
				margin-top: 20rpx;
			}
		}

		&>button::after {
			border: none;
		}
	}
}

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