<template>
	<view class="reservation-container">
		<nav-bar title="预约" />
		<view class="body-container">
			<scroll-view class="scroll-view" :scroll-y="true">
				<view class="form-content">
					<view class="order-tab-list">
						<view :class="orderType === ORDER_TYPE_RESERVATION ? 'activeItem' : 'tabItem'"
							@click.stop="selectOrderType(ORDER_TYPE_RESERVATION)">
							预约单
						</view>
						<view :class="orderType === ORDER_TYPE_SITE ? 'activeItem' : 'tabItem'"
							@click.stop="selectOrderType(ORDER_TYPE_SITE)">
							现场单
						</view>
					</view>
					<view class="reservation-info-container">
						<!-- 其他内容 -->
						<view class="formWrapper">


							<view class="info-top-view" v-if="orderType != ORDER_TYPE_RESERVATION">
								<view class="top">
									<view class="title-view">
										<text class="required">*</text>
										<text class="app-fc-main fs-24">服务码</text>
									</view>
									<view class="info-view">
										<input class="identity-input fs-24" type="number" v-model="xwID"
											placeholder="请输入或者扫一扫服务码">
										<image :src='`${imgPrefix}scan.png`' mode="aspectFit" class="scan-img"
											@click="scanCode" />
									</view>
								</view>
							</view>

							<view class="form-section form-section-pet">
								<view class="form-label-row">
									<text class="required">*</text>
									<text class="form-label">选择宠物</text>
								</view>
								<view class="add-pet-wrapper">
									<view v-for="(pet, index) in selectedPetsDisplay" :key="pet.id || index"
										class="selected-pet-avatar">
										<image class="pet-avatar-img"
											:src="(pet.chongwu_pic || pet.pet_avatar || pet.avatar) || `${imgPrefix}record_avator.png`"
											mode="aspectFill" />
										<view class="remove-pet-btn" @click.stop="removePet(index)">×</view>
										<text class="pet-avatar-name">{{ getPetShortName(pet) }}</text>
									</view>
									<view class="add-pet-cell" @click="goToSelectPet">
										<view class="add-pet-btn">
											<text class="plus-icon">+</text>
										</view>
										<text class="add-pet-text">添加宠物</text>
									</view>
								</view>
							</view>
							<!-- <info-cell key="weight" cell-type="text" title="宠物重量区间" :info="petInfo.weight_name"
								placeholder='先选择宠物' :is-can-click="false" />
							<info-cell v-if="selectedPetType === PET_TYPE_CAT" key="mofa" cell-type="text" title="宠物毛发"
								:info="petInfo.hairName" placeholder='先选择宠物' :is-can-click="false" /> -->
							<info-cell v-if="orderType === ORDER_TYPE_RESERVATION" key="time" cell-type="time"
								title="选择预约时间" :info="Object.keys(reservationTime).length > 0
									? `${reservationTime.dateLabel} ${reservationTime.start}-${reservationTime.end}`
									: ''
									" :infoTime="reservationTime.shiduan_id" @clickAction="goToSelectTime" placeholder='请选择' />
							<info-cell key="address" cell-type="address"
								title="选择服务地址" :address-info="address" @clickAction="goToSelectAddress"
								placeholder='请选择' />
							<info-cell v-if="orderType != ORDER_TYPE_SITE" key="park" cell-type="park" title="停车状况"
								:park-state="parkState" :other-park-state="otherParkState"
								@changeParkState="changeParkState" @changeOtherParkState="changeOtherParkState" />
						</view>

					    <view v-if="tip" class="tip-view">
							<image class="tip-icon" :src="imgPrefix + 'reservationTime-notice.png'" mode="aspectFit" />
							<text class="tip-text">{{ tip }}</text>
						</view>
						<view class="payFooter">
							<view class="leftPay">
								<view class="priceWrapper">
									<text class="text">预估：</text>
									<text class="unitText">
										¥<text class="price">{{ totalDisplayPrice }}</text>
									</text>
								</view>
								<!-- <view class="vipPrice" v-if="discount === 0">
									<view>
										<image :src="`${imgPrefix}vipPrice.png`" mode="widthFix"
											class="vip-price-img" />
										<text style="font-size: 24rpx;">¥{{ price && discount ? (price *
											discount).toFixed(2) : (price ? (price *
												0.8).toFixed(2) : "0.00") }}</text>
									</view>
								</view> -->
							</view>
							<view class="payBtn" @click.stop="paymentConfirm">
								下一步
							</view>
						</view>
					</view>
				</view>
				<!-- 广告 -->
				<view class="ad-container">
					<image :src='imgPrefix + "1.png"' mode="widthFix" class="ad-image"></image>
					<image :src='imgPrefix + "2.png"' mode="widthFix" class="ad-image"></image>
					<image :src='imgPrefix + "3.png"' mode="widthFix" class="ad-image"></image>
					<image :src='imgPrefix + "4.png"' mode="widthFix" class="ad-image"></image>
					<image :src='imgPrefix + "5.png"' mode="widthFix" class="ad-image"></image>
					<image :src='imgPrefix + "6.png"' mode="widthFix" class="ad-image"></image>
				</view>
			</scroll-view>
		</view>
	</view>
</template>


<script>
import InfoCell from "@/page-reser/components/info-cell.vue";
import {
	gitDiscountfee
} from "../../api/login";
import {
	ARTICLE_TYPE_RESERVATION_CAT,
	ARTICLE_TYPE_RESERVATION_DOG,
	ORDER_TYPE_RESERVATION,
	ORDER_TYPE_SITE,
	PET_HAIR_LONG,
	PET_TYPE_CAT,
	PET_TYPE_DOG,
} from "@/constants/app.business";
import {
	getArticleDetail
} from "@/api/article";
import appConfig from "@/constants/app.config";
import {
	getCityIsOpen,
	checkWaExists
} from "@/api/order";
import {
	imgPrefix
} from "@/utils/common";

export default {
	components: {
		InfoCell,
	},
	data() {
		return {
			imgPrefix,
			xwID: '',
			PET_TYPE_CAT,
			PET_TYPE_DOG,
			ORDER_TYPE_RESERVATION,
			ORDER_TYPE_SITE,
			orderType: ORDER_TYPE_RESERVATION,
			selectedPetType: PET_TYPE_CAT, // 默认选中“猫”
			petInfo: {}, // 兼容下游，取 selectedPets[0]
			selectedPets: [], // 多选宠物列表
			parkState: "",
			otherParkState: "",
			price: "",
			discount: '',
			discount_price: [], // 接口返回的折扣价数组，展示为数组之和
			reservationTime: {},
			address: null,
			catHtmlData: "",
			dogHtmlData: "",
			tip: ''
		};
	},
	mounted() {
		this.initData();
	},
	computed: {
		// 展示价格：discount_price 数组相加的总和
		totalDisplayPrice() {
			const arr = Array.isArray(this.discount_price) ? this.discount_price : [];
			const sum = arr.reduce((s, p) => s + Number(p || 0), 0);
			return sum.toFixed(2);
		},
		selectedPetsDisplay() {
			return this.selectedPets && this.selectedPets.length > 0 ? this.selectedPets : [];
		}
	},
	methods: {
		getPetShortName(pet) {
			const n = pet.name || pet.pet_name || pet.pet_nickname || '';
			return n.length > 2 ? n.slice(0, 2) + '…' : n.slice(0, 2);
		},
		initData() {
			getArticleDetail(ARTICLE_TYPE_RESERVATION_CAT).then((res) => {
				this.catHtmlData = this.processHtmlContent(res?.info?.content || "");
			});
		},
		processHtmlContent(html) {
			return html.replace(/max-width/g, "width");
		},

		selectOrderType(orderType) {
			if (this.orderType === orderType) {
				return;
			}
			this.reservationTime = {};
			this.parkState = "";
			this.address = null;
			this.price = "";
			this.discount_price = [];
			this.tip = "";
			this.petInfo = {};
			this.selectedPets = [];
			this.orderType = orderType;
		},
		changeParkState(state) {
			this.parkState = state;
			this.otherParkState = "";
		},
		changeOtherParkState(state) {
			this.otherParkState = state;
		},
		goToSelectPet() {
			// 跳转到选择宠物页面（多选：每次返回添加一只）
			const selectPetInfo = this.selectedPets.length > 0
				? encodeURIComponent(JSON.stringify(this.selectedPets[0]))
				: '';
			uni.navigateTo({
				url: `/pageHome/selectPet/index?petType=${this.selectedPetType}${selectPetInfo ? `&selectPetInfo=${selectPetInfo}` : ''}`,
				events: {
					changePet: (pet) => {
						this.changePet(pet);
					}
				}
			});
		},
		changePet(item) {
			item.hairName = item.hair === 1 ? '长毛' : '短毛';
			const exists = this.selectedPets.some(p => p.id === item.id);
			if (!exists) {
				this.selectedPets.push(item);
			}
			this.petInfo = this.selectedPets[0] || {};
			this.tryFetchDiscount();
		},
		removePet(index) {
			this.selectedPets.splice(index, 1);
			this.petInfo = this.selectedPets[0] || {};
			this.tryFetchDiscount();
		},
		goToSelectAddress() {
			const selectAddress = this.address && Object.keys(this.address).length > 0
				? encodeURIComponent(JSON.stringify(this.address))
				: '';
			uni.navigateTo({
				url: `/pageHome/selectAddress/index${selectAddress ? `?selectAddress=${selectAddress}` : ''}`,
				events: {
					changeAddress: (address) => {
						this.changeAddress(address);
					}
				}
			});
		},
		changeAddress(address) {
			address.area_name = `${address.province} ${address.city} ${address.district}`;
			this.address = address;
			this.tryFetchDiscount();
		},
		scanCode() {
			uni.scanCode({
				success: (res) => {
					this.xwID = res.result;
					uni.showToast({
						title: '扫码成功',
						icon: 'success'
					});
				},
				fail: (err) => {
					console.error('扫码失败:', err);
					uni.showToast({
						title: '扫码失败',
						icon: 'none'
					});
				}
			});
		},
		goToSelectTime() {
			const selectTime = this.reservationTime && Object.keys(this.reservationTime).length > 0 ?
				encodeURIComponent(JSON.stringify(this.reservationTime)) :
				'';
			uni.navigateTo({
				url: `/pageHome/selectTime/index${selectTime ? `?selectTime=${selectTime}` : ''}`,
				events: {
					changeReservationTime: (timeData) => {
						this.changeReservationTime(timeData);
					}
				}
			});
		},
		changeReservationTime(timeData) {
			this.reservationTime = timeData;
			this.tryFetchDiscount();
		},
		// 仅当「选择宠物」「选择服务地址」「选择预约时间」三者都选好时调用 gitDiscountfee
		tryFetchDiscount() {
			const hasPet = this.selectedPets && this.selectedPets.length > 0;
			const petIds = hasPet ? this.selectedPets.map(p => +p.id) : [];
			const hasAddress = this.address && Object.keys(this.address).length > 0;
			const hasTime = this.reservationTime && Object.keys(this.reservationTime).length > 0;
			const regionId = this.address?.region_id;
			// 现场单：只需宠物即可拉取价格
			if (this.orderType === this.ORDER_TYPE_SITE) {
				if (hasPet && hasAddress) {
					gitDiscountfee({
						pet_id: petIds,
						region_id: regionId
					}).then((res) => {
						const discountArr = Array.isArray(res.data.discount_price) ? res.data.discount_price : [res.data.discount_price];
						const originArr = Array.isArray(res.data.price) ? res.data.price : [res.data.price];
						// 按顺序将价格赋值给对应宠物：原价 + 折后价
						discountArr.forEach((discountPrice, index) => {
							if (this.selectedPets[index]) {
								const originPrice = originArr[index] != null ? originArr[index] : discountPrice;
								this.selectedPets[index].basePrice = Number(originPrice || 0); // 原价
								this.selectedPets[index].discountBasePrice = Number(discountPrice || 0); // 折后价
							}
						});
						// 计算总价：用折后价数组
						this.price = discountArr.reduce((sum, p) => sum + Number(p || 0), 0);
						this.discount = res.data.discount;
						this.discount_price = Array.isArray(res.data.discount_price) ? res.data.discount_price : (res.data.discount_price != null ? [res.data.discount_price] : []);
						this.tip = res.data.tip;
					});
				}
				return;
			}
			// 预约单：三个都选了才调用
			if (hasPet && hasAddress && hasTime) {
				gitDiscountfee({
					region_id: regionId,
					pet_id: petIds,
					order_date: this.reservationTime.date
				}).then((res) => {
					const discountArr = Array.isArray(res.data.discount_price) ? res.data.discount_price : [res.data.discount_price];
					const originArr = Array.isArray(res.data.price) ? res.data.price : [res.data.price];
					// 按顺序将价格赋值给对应宠物：原价 + 折后价
					discountArr.forEach((discountPrice, index) => {
						if (this.selectedPets[index]) {
							const originPrice = originArr[index] != null ? originArr[index] : discountPrice;
							this.selectedPets[index].basePrice = Number(originPrice || 0); // 原价
							this.selectedPets[index].discountBasePrice = Number(discountPrice || 0); // 折后价
						}
					});
					// 计算总价：用折后价数组
					this.price = discountArr.reduce((sum, p) => sum + Number(p || 0), 0);
					this.discount = res.data.discount;
					this.discount_price = Array.isArray(res.data.discount_price) ? res.data.discount_price : (res.data.discount_price != null ? [res.data.discount_price] : []);
					this.tip = res.data.tip;
				});
			}
		},
		paymentConfirm() {
			if (!this.selectedPets.length) {
				uni.showToast({
					title: "请选择宠物",
					icon: "none",
				});
				return;
			}
			if (
				Object.keys(this.reservationTime).length === 0 &&
				this.orderType === ORDER_TYPE_RESERVATION
			) {
				uni.showToast({
					title: "请选择预约时间",
					icon: "none",
				});
				return;
			}
			// 预约单、现场单均需校验服务地址
			if (!this.address) {
				uni.showToast({
					title: "请选择服务地址",
					icon: "none",
				});
				return;
			}
			// 仅预约单校验停车状况
			if (this.orderType !== ORDER_TYPE_SITE) {
				if (!this.parkState) {
					uni.showToast({
						title: "请选择停车状况",
						icon: "none",
					});
					return;
				}
				if (this.parkState === "其他" && !this.otherParkState) {
					uni.showToast({
						title: "请输入停车信息",
						icon: "none",
					});
					return;
				}
			}
			// 如果是现场单，需要校验服务码
			if (this.orderType === ORDER_TYPE_SITE) {
				if (!this.xwID || !this.xwID.trim()) {
					uni.showToast({
						title: "请输入服务码",
						icon: "none",
					});
					return;
				}
				// 校验服务码是否为数字
				const waCode = Number(this.xwID.trim());
				if (isNaN(waCode) || waCode <= 0) {
					uni.showToast({
						title: "服务码格式不正确",
						icon: "none",
					});
					return;
				}
				// 调用接口校验服务码
				uni.showLoading({
					title: "校验服务码中...",
					mask: true,
				});
				checkWaExists({ wa_code: waCode })
					.then((res) => {
						if (!res.data.exists) {
							uni.showToast({
								title: "服务码错误",
								icon: "none",
							});
							return;
						} else {
							this.navigateToAdditional();
						}
						uni.hideLoading();

					})
					.catch((err) => {
						uni.hideLoading();
						uni.showToast({
							title: err.msg || "服务码校验失败，请检查服务码是否正确",
							icon: "none",
							duration: 2000,
						});
					});
				return;
			}
			// 非现场单，直接跳转
			this.navigateToAdditional();
		},
		navigateToAdditional() {
			uni.navigateTo({
				url: "/pageHome/order/additional",
				// url: '/pageHome/reservation/payment-confirm-page',
				success: (res) => {
					res.eventChannel.emit("reservationInfo", {
						petInfo: this.petInfo,
						selectedPets: this.selectedPets,
						orderInfo: {
							parkState: this.otherParkState || this.parkState,
							orderType: this.orderType,
							xwID: this.xwID
						},
						addresInfo: this.address,
						reservationTime: this.reservationTime,
						price: this.totalDisplayPrice,  // 全部价格
						discount: this.discount,
						discount_price: this.discount_price,
					});
				},
				events: {
					clearData: () => {
						this.selectedPetType = PET_TYPE_CAT;
						this.petInfo = {};
						this.selectedPets = [];
						this.parkState = "";
						this.price = "";
						this.reservationTime = {};
						this.address = null;
					},
				},
			});
		},
		//     paymentConfirm() {
		//       if (!this.petInfo.chongwu_id) {
		//         uni.showToast({
		//           title: "请选择宠物",
		//           icon: "none",
		//         });
		//         return;
		//       }
		//       if (
		//         Object.keys(this.reservationTime).length === 0 &&
		//         this.orderType === ORDER_TYPE_RESERVATION
		//       ) {
		//         uni.showToast({
		//           title: "请选择预约时间",
		//           icon: "none",
		//         });
		//         return;
		//       }
		//       if (!this.address) {
		//         uni.showToast({
		//           title: "请选择服务地址",
		//           icon: "none",
		//         });
		//         return;
		//       }
		//       if (!this.parkState) {
		//         uni.showToast({
		//           title: "请选择停车状况",
		//           icon: "none",
		//         });
		//         return;
		//       }
		//       if (this.parkState === "其他" && !this.otherParkState) {
		//         uni.showToast({
		//           title: "请输入停车信息",
		//           icon: "none",
		//         });
		//         return;
		//       }
		//          const data = {
		//        user_id:this.petInfo.member_id,
		//        pet_id:this.petInfo.chongwu_id,
		//       };
		//        isPet(data).then((res) => {
		//         if(res.data){
		//            uni.navigateTo({
		//         url: "/pageHome/order/additional",
		//         success: (res) => {
		//           res.eventChannel.emit("reservationInfo", {
		//             petInfo: this.petInfo,
		//             parkState: this.otherParkState || this.parkState,
		//             petWeight: this.petWeight,
		//             reservationTime: this.reservationTime,
		//             address: this.address,
		//             price: this.price,
		//             discount:this.discount,
		//             estimatePrice: this.totalDisplayPrice,
		//             orderType: this.orderType,
		//             chongwu_id: this.petInfo.chongwu_id,
		//           });
		//         },
		//         events: {
		//           clearData: () => {
		//             this.selectedPetType = PET_TYPE_CAT;
		//             this.petInfo = {};
		//             this.parkState = "";
		//             this.petWeight = {};
		//             this.price = "";
		//             this.reservationTime = {};
		//             this.address = null;
		//           },
		//         },
		//       });
		//         }else{
		//           uni.showModal({  
		//     content: '该宠物必须与会员卡绑定才能享受会员折扣',  
		//     showCancel: true,  
		//     cancelText: '取消',  
		//     confirmText: '去绑定',  
		//     success: res => {  
		//         if (res.confirm) {  
		//                  uni.navigateTo({
		//         url: `/pages/client/recharge/my-card?user_id=${this.petInfo.member_id}`,
		//       })
		//         } else {  
		//             console.log('用户取消操作');  
		//         }  
		//     }  
		// }); 
		//         }
		//       });
		//     },
	},
	onShareAppMessage(res) {
		return {
			title: appConfig.appShareName,
			path: "/pages/client/index/index",
		};
	},
};
</script>

<style lang="scss" scoped>
.reservation-container {
	display: flex;
	flex: 1;
	flex-direction: column;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background-color: #ffecf3;

	.body-container {
		display: flex;
		flex-direction: column;
		flex: 1;
		box-sizing: border-box;
		position: relative;

		.scroll-view {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			box-sizing: border-box;

			.form-content {
				padding: 0 20rpx;
				box-sizing: border-box;
			}

			.order-tab-list {
				display: flex;
				align-items: flex-end;
				margin-top: 20rpx;

				.tabItem {
					flex: 1;
					text-align: center;
					background-color: #ffd8e6;
					border-radius: 16rpx 16rpx 0px 0px;
					height: 92rpx;
					line-height: 92rpx;
					font-size: 24rpx;
				}

				.activeItem {
					background-color: #fff;
					flex: 1;
					text-align: center;
					height: 92rpx;
					line-height: 92rpx;
					border-radius: 16rpx 16rpx 0px 0px;
					font-size: 28rpx;
					font-weight: 500;
				}
			}

			.reservation-info-container {
				display: flex;
				flex-direction: column;
				width: 100%;
				box-sizing: border-box;

				.formWrapper {
					background-color: #fff;
					padding: 0;
					border-radius: 0px 0px 16rpx 16rpx;
					overflow: hidden;

					.info-top-view {
						width: 100%;
						display: flex;
						flex-direction: column;
						// flex-direction: row;
						// align-items: center;
						box-sizing: border-box;
						height: 104rpx;
						padding: 0 20rpx;
						position: relative;

						&::after {
							content: '';
							position: absolute;
							bottom: 0;
							left: 20rpx;
							right: 20rpx;
							height: 2rpx;
							background-color: #ececec;
						}

						.top {
							width: 100%;
							height: 100%;
							display: flex;
							// flex-direction: column;
							flex-direction: row;
							align-items: center;
							box-sizing: border-box;

							.title-view {
								display: flex;
								flex: 1;
								align-items: center;
							}

							.info-view {
								display: flex;
								flex: 1;
								align-items: center;
								justify-content: flex-end;

								.identity-input {
									text-align: right;
									// direction: rtl;
									width: 100%;
								}
							}
						}

						.right-icon {
							margin-left: 16rpx;
							width: 10rpx;
							height: 5rpx;
							flex-shrink: 0;
						}
					}

					.form-section-pet {
						display: flex;
						flex-direction: column;
						width: calc(100% - 40rpx);
						margin: 0 auto;
						padding: 36rpx 0;
						border-bottom: 2rpx solid #ececec;
					}

					.form-label-row {
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-bottom: 0;
					}

					.form-label {
						font-size: 28rpx;
						color: #333;
						margin-left: 4rpx;
					}

					.add-pet-wrapper {
						display: flex;
						// align-items: center;
						gap: 16rpx;
						margin-top: 20rpx;
						flex-wrap: wrap;
					}

					.selected-pet-avatar {
						position: relative;
						width: 64rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;
					}

					.pet-avatar-img {
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
						background-color: #f0f0f0;
					}

					.pet-avatar-name {
						font-size: 24rpx;
						color: #666;
						margin-top: 8rpx;
						text-align: center;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						max-width: 64rpx;
					}

					.remove-pet-btn {
						position: absolute;
						top: -8rpx;
						right: -8rpx;
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						background-color: #FF19A0;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						line-height: 1;
						border: 2rpx solid #fff;
					}

					.add-pet-cell {
						display: flex;
						flex-direction: column;
						align-items: center;
					}

					.add-pet-btn {
						width: 64rpx;
						height: 64rpx;
						border: 1rpx dashed #3D3D3D;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #EBEBEB;
					}

					.plus-icon {
						font-size: 60rpx;
						color: #999;
						line-height: 1;
					}

					.add-pet-text {
						font-size: 24rpx;
						color: #666;
						margin-top: 8rpx;
					}
				}

				// .content-section :last-child {
				//   border-bottom:none;
				//   /* CSS 规则 */
				// }

				.tip-view {
					background-color: #fff;
					padding: 12rpx 20rpx;
					margin-top: 16rpx;
					border-radius: 16rpx;
					display: flex;
					align-items: center;
					gap: 12rpx;
				}

				.tip-icon {
					width: 30rpx;
					height: 30rpx;
					flex-shrink: 0;
				}

				.tip-text {
					color: #FF19A0;
					font-size: 24rpx;
					flex: 1;
				}

				.payFooter {
					background-color: #fff;
					border-radius: 16rpx;
					margin-top: 16rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx;

					.leftPay {
						.priceWrapper {
							.text {
								font-size: 24rpx;
								color: #272427;
							}

							.unitText {
								font-size: 24rpx;
								font-weight: 500;
								color: #FF19A0;
							}

							.price {
								color: #FF19A0;
								font-size: 48rpx;
							}
						}

						.vipPrice {
							margin-top: 14rpx;
							font-size: 20rpx;
							color: #9B939A;

							view {
								display: flex;
								align-items: center;
							}

							.vip-price-img {
								width: 43px;
								height: 14px;
								margin-right: 8rpx;
							}
						}
					}

					.payBtn {
						background-color: #FF19A0;
						color: #fff;
						padding: 30rpx 80rpx;
						border-radius: 100px;
						font-size: 32rpx;
					}
				}
			}

			.ad-container {
				width: 100%;
				padding: 0;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				margin-top: 16rpx;
				padding-bottom: 20rpx;

				.ad-image {
					width: 100%;
					height: auto;
					display: block;
				}

				.ad-image:last-child {
					margin-bottom: 0;
				}

				.ad-view {
					width: 100%;
				}
			}
		}
	}
}

.required {
	color: #FF19A0;
}

.scan-img {
	width: 40rpx;
	height: 40rpx;
	margin-left: 8rpx;
}
</style>