<template>
	<view class="monthgift">
		<!-- 根据展示等级动态显示对应等级页面 -->
		<view v-if="currentLevelName === 'diamond'" class="diamond">
			<image class="diamondbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BG}`" mode="aspectFit"></image>
			<view class="diamondgoodcoupon">
				<view class="diamondgoodcoupons">
					<image class="diamondgoodcouponstitle"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.TITLE}`" mode="aspectFit"></image>
					<image class="diamondgoodcouponsbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.BG}`"
						mode="aspectFit"></image>
					<image class="diamondgoodcoupons1"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.COUPON1}`" mode="aspectFit"></image>
					<image class="diamondgoodcoupons2"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.COUPON2}`" mode="aspectFit"></image>
					<image class="diamondgoodcoupons3"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.COUPON3}`" mode="aspectFit"></image>
					<image class="diamondgoodcoupons4"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.COUPON4}`" mode="aspectFit"></image>
					<image class="diamondgoodcoupons5"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.COUPON5}`" mode="aspectFit"></image>
				</view>
				<!-- 精选好券按钮 -->
				<view class="coupon-button-container">
					<button class="coupon-btn" :class="getCouponButtonClass('diamond')"
						@click="handleCouponClick('diamond')">
						{{ getCouponButtonText('diamond') }}
					</button>
					<!-- 调试信息 -->
					<view v-if="__DEV__" style="font-size: 12px; color: #999; margin-top: 5px;">
						状态: {{ state.couponStatus.diamond }}
					</view>
				</view>
			</view>
			<view class="diamond1buycom">
				<!-- 时间段背景图片 - 根据选中状态动态显示 -->
				<image v-if="state.selectedTimeSlot === 3" class="diamond1buycomsel4"
					:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.SEL4}`" mode="aspectFit"></image>
				<image v-if="state.selectedTimeSlot === 2" class="diamond1buycomsel3"
					:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.SEL3}`" mode="aspectFit"></image>
				<image v-if="state.selectedTimeSlot === 1" class="diamond1buycomsel2"
					:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.SEL2}`" mode="aspectFit"></image>
				<image v-if="state.selectedTimeSlot === 0" class="diamond1buycomsel1"
					:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.SEL1}`" mode="aspectFit"></image>

				<!-- 时间段选择 -->
				<view class="diamond1buycomtime1" @click="switchTimeSlot(0)" :class="getTimeSlotClass(0)">
					<image class="diamond1buycomtime1text"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.TIME1.TEXT}`" mode="aspectFit"></image>
					<image class="diamond1buycomtime1status"
						:src="`${$baseUrl}${getTimeSlotStatusImage(0, 'DIAMOND')}`" mode="aspectFit">
						<!-- v-if="!isLevelSufficient()"> -->
					</image>
				</view>
				<view class="diamond1buycomtime2" @click="switchTimeSlot(1)" :class="getTimeSlotClass(1)">
					<image class="diamond1buycomtime2text"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.TIME2.TEXT}`" mode="aspectFit"></image>
					<image class="diamond1buycomtime2status"
						:src="`${$baseUrl}${getTimeSlotStatusImage(1, 'DIAMOND')}`" mode="aspectFit">
						<!-- v-if="!isLevelSufficient()"> -->
					</image>
				</view>
				<view class="diamond1buycomtime3" @click="switchTimeSlot(2)" :class="getTimeSlotClass(2)">
					<image class="diamond1buycomtime3text"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.TIME3.TEXT}`" mode="aspectFit"></image>
					<image class="diamond1buycomtime3status"
						:src="`${$baseUrl}${getTimeSlotStatusImage(2, 'DIAMOND')}`" mode="aspectFit">
						<!-- v-if="!isLevelSufficient()"> -->
					</image>
				</view>
				<view class="diamond1buycomtime4" @click="switchTimeSlot(3)" :class="getTimeSlotClass(3)">
					<image class="diamond1buycomtime4text"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.TIME4.TEXT}`" mode="aspectFit"></image>
					<image class="diamond1buycomtime4status"
						:src="`${$baseUrl}${getTimeSlotStatusImage(3, 'DIAMOND')}`" mode="aspectFit">
						<!-- v-if="!isLevelSufficient()"> -->
					</image>
				</view>
				<view class="diamond1buycomgoods">
					<image class="diamond1buycomgoodsbg"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.GOODS.BG}`" mode="aspectFit"></image>
					<!-- 限时1分购按钮 -->
					<view class="buy-button-container">
						<button class="buy-btn" :class="getBuyButtonClass('diamond')"
							@click="handleBuyClick('diamond')">
							{{ getBuyButtonText('diamond') }}
						</button>
					</view>
				</view>
				<image class="diamond1buycomtitle" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.T1}`"
					mode="aspectFit"></image>
				<!-- <image class="diamond1buycomdesc" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.DESC}`"
                    mode="aspectFit"></image> -->
				<!-- <image class="diamond1buycomstatus" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.STATUS}`"
                    mode="aspectFit"></image> -->
			</view>
		</view>

		<view v-if="currentLevelName === 'starshine'" class="starshine">
			<image class="starshinebg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BG}`" mode="aspectFit"></image>
			<view class="starshinegoodcoupon">
				<view class="starshinegoodcoupons">
					<image class="starshinegoodcouponstitle"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.TITLE}`" mode="aspectFit"></image>
					<image class="starshinegoodcouponsbg"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.BG}`" mode="aspectFit"></image>
					<image class="starshinegoodcoupons1"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.COUPON1}`" mode="aspectFit">
					</image>
					<image class="starshinegoodcoupons2"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.COUPON2}`" mode="aspectFit">
					</image>
					<image class="starshinegoodcoupons3"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.COUPON3}`" mode="aspectFit">
					</image>
					<image class="starshinegoodcoupons4"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.COUPON4}`" mode="aspectFit">
					</image>
					<image class="starshinegoodcoupons5"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.COUPON5}`" mode="aspectFit">
					</image>
				</view>
				<!-- 精选好券按钮 -->
				<view class="coupon-button-container">
					<button class="coupon-btn" :class="getCouponButtonClass('starshine')"
						@click="handleCouponClick('starshine')">
						{{ getCouponButtonText('starshine') }}
					</button>
				</view>
			</view>
			<view class="starshine1buycom">
				<!-- 时间段背景图片 - 根据选中状态动态显示 -->
				<image v-if="state.selectedTimeSlot === 3" class="starshine1buycomsel4"
					:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.SEL4}`" mode="aspectFit"></image>
				<image v-if="state.selectedTimeSlot === 2" class="starshine1buycomsel3"
					:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.SEL3}`" mode="aspectFit"></image>
				<image v-if="state.selectedTimeSlot === 1" class="starshine1buycomsel2"
					:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.SEL2}`" mode="aspectFit"></image>
				<image v-if="state.selectedTimeSlot === 0" class="starshine1buycomsel1"
					:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.SEL1}`" mode="aspectFit"></image>

				<!-- 时间段选择 -->
				<view class="starshine1buycomtime1" @click="switchTimeSlot(0)" :class="getTimeSlotClass(0)">
					<image class="starshine1buycomtime1text"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME1.TEXT}`" mode="aspectFit"></image>
					<image class="starshine1buycomtime1status"
						:src="`${$baseUrl}${getTimeSlotStatusImage(0, 'STARSHINE')}`" mode="aspectFit">
						<!-- v-if="!isLevelSufficient()"> -->
					</image>
				</view>
				<view class="starshine1buycomtime2" @click="switchTimeSlot(1)" :class="getTimeSlotClass(1)">
					<image class="starshine1buycomtime2text"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME2.TEXT}`" mode="aspectFit"></image>
					<image class="starshine1buycomtime2status"
						:src="`${$baseUrl}${getTimeSlotStatusImage(1, 'STARSHINE')}`" mode="aspectFit">
						<!-- v-if="!isLevelSufficient()"> -->
					</image>
				</view>
				<view class="starshine1buycomtime3" @click="switchTimeSlot(2)" :class="getTimeSlotClass(2)">
					<image class="starshine1buycomtime3text"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME3.TEXT}`" mode="aspectFit"></image>
					<image class="starshine1buycomtime3status"
						:src="`${$baseUrl}${getTimeSlotStatusImage(2, 'STARSHINE')}`" mode="aspectFit">
						<!-- v-if="!isLevelSufficient()"> -->
					</image>
				</view>
				<view class="starshine1buycomtime4" @click="switchTimeSlot(3)" :class="getTimeSlotClass(3)">
					<image class="starshine1buycomtime4text"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME4.TEXT}`" mode="aspectFit"></image>
					<image class="starshine1buycomtime4status"
						:src="`${$baseUrl}${getTimeSlotStatusImage(3, 'STARSHINE')}`" mode="aspectFit">
						<!-- v-if="!isLevelSufficient()"> -->
					</image>
				</view>
				<view class="starshine1buycomgoods">
					<image class="starshine1buycomgoodsbg"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.GOODS.BG}`" mode="aspectFit"></image>
					<!-- 限时1分购按钮 -->
					<view class="buy-button-container">
						<button class="buy-btn" :class="getBuyButtonClass('starshine')"
							@click="handleBuyClick('starshine')">
							{{ getBuyButtonText('starshine') }}
						</button>
					</view>
				</view>
				<!-- <image class="starshine1buycomstatus" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.STATUS}`"
                    mode="aspectFit"></image> -->
				<image class="starshine1buycomtitle" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.T1}`"
					mode="aspectFit"></image>
				<!-- <image class="starshine1buycomdesc" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.DESC}`"
                    mode="aspectFit"></image> -->
			</view>
		</view>

		<view v-if="currentLevelName === 'starlight'" class="starlight">
			<image class="starlightbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BG}`" mode="aspectFit"></image>
			<view class="startlightgoodcoupon">
				<view class="startlightgoodcoupons">
					<image class="startlightgoodcouponstitle"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.TITLE}`" mode="aspectFit"></image>
					<image class="startlightgoodcouponsbg"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.BG}`" mode="aspectFit"></image>
					<image class="startlightgoodcoupons1"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.COUPON1}`" mode="aspectFit">
					</image>
					<image class="startlightgoodcoupons2"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.COUPON2}`" mode="aspectFit">
					</image>
					<image class="startlightgoodcoupons3"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.COUPON3}`" mode="aspectFit">
					</image>
					<image class="startlightgoodcoupons4"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.COUPON4}`" mode="aspectFit">
					</image>
					<image class="startlightgoodcoupons5"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.COUPON5}`" mode="aspectFit">
					</image>
				</view>
				<!-- 精选好券按钮 -->
				<view class="coupon-button-container">
					<button class="coupon-btn" :class="getCouponButtonClass('starlight')"
						@click="handleCouponClick('starlight')">
						{{ getCouponButtonText('starlight') }}
					</button>
				</view>
			</view>
			<view class="startlight1buycom">
				<!-- 时间段背景图片 - 根据选中状态动态显示 -->
				<image v-if="state.selectedTimeSlot === 3" class="startlight1buycomsel4"
					:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.SEL4}`" mode="aspectFit"></image>
				<image v-if="state.selectedTimeSlot === 2" class="startlight1buycomsel3"
					:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.SEL3}`" mode="aspectFit"></image>
				<image v-if="state.selectedTimeSlot === 1" class="startlight1buycomsel2"
					:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.SEL2}`" mode="aspectFit"></image>
				<image v-if="state.selectedTimeSlot === 0" class="startlight1buycomsel1"
					:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.SEL1}`" mode="aspectFit"></image>

				<!-- 时间段选择 -->
				<view class="startlight1buycomtime1" @click="switchTimeSlot(0)" :class="getTimeSlotClass(0)">
					<image class="startlight1buycomtime1text"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME1.TEXT}`" mode="aspectFit"></image>
					<image class="startlight1buycomtime1status"
						:src="`${$baseUrl}${getTimeSlotStatusImage(0, 'STARLIGHT')}`" mode="aspectFit">
						<!-- v-if="!isLevelSufficient()"> -->
					</image>
				</view>
				<view class="startlight1buycomtime2" @click="switchTimeSlot(1)" :class="getTimeSlotClass(1)">
					<image class="startlight1buycomtime2text"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME2.TEXT}`" mode="aspectFit"></image>
					<image class="startlight1buycomtime2status"
						:src="`${$baseUrl}${getTimeSlotStatusImage(1, 'STARLIGHT')}`" mode="aspectFit">
						<!-- v-if="!isLevelSufficient()"> -->
					</image>
				</view>
				<view class="startlight1buycomtime3" @click="switchTimeSlot(2)" :class="getTimeSlotClass(2)">
					<image class="startlight1buycomtime3text"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME3.TEXT}`" mode="aspectFit"></image>
					<image class="startlight1buycomtime3status"
						:src="`${$baseUrl}${getTimeSlotStatusImage(2, 'STARLIGHT')}`" mode="aspectFit">
						<!-- v-if="!isLevelSufficient()"> -->
					</image>
				</view>
				<view class="startlight1buycomtime4" @click="switchTimeSlot(3)" :class="getTimeSlotClass(3)">
					<image class="startlight1buycomtime4text"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME4.TEXT}`" mode="aspectFit"></image>
					<image class="startlight1buycomtime4status"
						:src="`${$baseUrl}${getTimeSlotStatusImage(3, 'STARLIGHT')}`" mode="aspectFit">
						<!-- v-if="!isLevelSufficient()"> -->
					</image>
				</view>
				<view class="startlight1buycomgoods">
					<image class="startlight1buycomgoodsbg"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.GOODS.BG}`" mode="aspectFit"></image>
					<!-- 限时1分购按钮 -->
					<view class="buy-button-container">
						<button class="buy-btn" :class="getBuyButtonClass('starlight')"
							@click="handleBuyClick('starlight')">
							{{ getBuyButtonText('starlight') }}
						</button>
					</view>
				</view>
				<image class="startlight1buycomtitle" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.T1}`"
					mode="aspectFit"></image>
				<!-- <image class="startlight1buycomdesc" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.DESC}`"
                    mode="aspectFit"></image> -->
				<!-- <image class="startlight1buycomstatus" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.STATUS}`"
                    mode="aspectFit"></image> -->
			</view>
		</view>

		<view v-if="currentLevelName === 'gold'" class="gold">
			<image class="goldbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BG}`" mode="aspectFit"></image>
			<view class="goldgoodcoupon">
				<view class="goldgoodcoupons">
					<image class="goldgoodcouponstitle" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.TITLE}`"
						mode="aspectFit"></image>
					<image class="goldgoodcouponsbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.BG}`"
						mode="aspectFit"></image>
					<image class="goldgoodcoupons1" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.COUPON1}`"
						mode="aspectFit"></image>
					<image class="goldgoodcoupons2" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.COUPON2}`"
						mode="aspectFit"></image>
					<image class="goldgoodcoupons3" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.COUPON3}`"
						mode="aspectFit"></image>
					<image class="goldgoodcoupons4" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.COUPON4}`"
						mode="aspectFit"></image>
					<image class="goldgoodcoupons5" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.COUPON5}`"
						mode="aspectFit"></image>
				</view>
				<!-- 精选好券按钮 -->
				<view class="coupon-button-container">
					<button class="coupon-btn" :class="getCouponButtonClass('gold')" @click="handleCouponClick('gold')">
						{{ getCouponButtonText('gold') }}
					</button>
				</view>
			</view>
			<view class="gold1buycom">
				<image class="gold1buycomtitle" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.T1}`"
					mode="aspectFit"></image>
				<!-- <image class="gold1buycomdesc" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.DESC}`"
                    mode="aspectFit"></image> -->
				<!-- <image class="gold1buycomstatus" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.STATUS}`"
                    mode="aspectFit"></image> -->
				<!-- 时间段背景图片 - 根据选中状态动态显示 -->
				<image v-if="state.selectedTimeSlot === 3" class="gold1buycomsel4"
					:src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.SEL4}`" mode="aspectFit"></image>
				<image v-if="state.selectedTimeSlot === 2" class="gold1buycomsel3"
					:src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.SEL3}`" mode="aspectFit"></image>
				<image v-if="state.selectedTimeSlot === 1" class="gold1buycomsel2"
					:src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.SEL2}`" mode="aspectFit"></image>
				<image v-if="state.selectedTimeSlot === 0" class="gold1buycomsel1"
					:src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.SEL1}`" mode="aspectFit"></image>

				<!-- 时间段选择 -->
				<view class="gold1buycomtime1" @click="switchTimeSlot(0)" :class="getTimeSlotClass(0)">
					<image class="gold1buycomtime1text" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME1.TEXT}`"
						mode="aspectFit"></image>
					<image class="gold1buycomtime1status"
						:src="`${$baseUrl}${getTimeSlotStatusImage(0, 'GOLD')}`" mode="aspectFit">
						<!-- v-if="!isLevelSufficient()"> -->
					</image>
				</view>
				<view class="gold1buycomtime2" @click="switchTimeSlot(1)" :class="getTimeSlotClass(1)">
					<image class="gold1buycomtime2text" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME2.TEXT}`"
						mode="aspectFit"></image>
					<image class="gold1buycomtime2status"
						:src="`${$baseUrl}${getTimeSlotStatusImage(1, 'GOLD')}`" mode="aspectFit">
						<!-- v-if="!isLevelSufficient()"> -->
					</image>
				</view>
				<view class="gold1buycomtime3" @click="switchTimeSlot(2)" :class="getTimeSlotClass(2)">
					<image class="gold1buycomtime3text" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME3.TEXT}`"
						mode="aspectFit"></image>
					<image class="gold1buycomtime3status"
						:src="`${$baseUrl}${getTimeSlotStatusImage(2, 'GOLD')}`" mode="aspectFit">
						<!-- v-if="!isLevelSufficient()"> -->
					</image>
				</view>
				<view class="gold1buycomtime4" @click="switchTimeSlot(3)" :class="getTimeSlotClass(3)">
					<image class="gold1buycomtime4text" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME4.TEXT}`"
						mode="aspectFit"></image>
					<image class="gold1buycomtime4status"
						:src="`${$baseUrl}${getTimeSlotStatusImage(3, 'GOLD')}`" mode="aspectFit">
						<!-- v-if="!isLevelSufficient()"> -->
					</image>
				</view>
				<view class="gold1buycomgoods">
					<image class="gold1buycomgoodsbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.GOODS.BG}`"
						mode="aspectFit"></image>
					<!-- 限时1分购按钮 -->
					<view class="buy-button-container">
						<button class="buy-btn" :class="getBuyButtonClass('gold')" @click="handleBuyClick('gold')">
							{{ getBuyButtonText('gold') }}
						</button>
					</view>
				</view>
			</view>
			<image class="goldlocktip" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.LOCKTIP}`" mode="aspectFit"></image>
		</view>

		<view v-if="currentLevelName === 'platinum'" class="platinum">
			<image class="platinumbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BG}`" mode="aspectFit"></image>
			<view class="platinumgoodcoupon">
				<view class="platinumgoodcoupons">
					<image class="platinumgoodcoupontitle"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.TITLE}`" mode="aspectFit"></image>
					<image class="platinumgoodcouponbg"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.BG}`" mode="aspectFit"></image>
					<image class="platinumgoodcoupons1"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.COUPON1}`" mode="aspectFit"></image>
					<image class="platinumgoodcoupons2"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.COUPON2}`" mode="aspectFit"></image>
					<image class="platinumgoodcoupons3"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.COUPON3}`" mode="aspectFit"></image>
					<image class="platinumgoodcoupons4"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.COUPON4}`" mode="aspectFit"></image>
					<image class="platinumgoodcoupons5"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.COUPON5}`" mode="aspectFit"></image>
				</view>
				<!-- 精选好券按钮 -->
				<view class="coupon-button-container">
					<button class="coupon-btn" :class="getCouponButtonClass('platinum')"
						@click="handleCouponClick('platinum')">
						{{ getCouponButtonText('platinum') }}
					</button>
				</view>
			</view>
			<view class="platinum1buycom">
				<image class="platinum1buycomtitle" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.T1}`"
					mode="aspectFit"></image>
				<!-- <image class="platinum1buycomdesc" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.DESC}`"
                    mode="aspectFit"></image> -->
				<!-- <image class="platinum1buycomstatus" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.STATUS}`"
                    mode="aspectFit"></image> -->
				<!-- 时间段背景图片 - 根据选中状态动态显示 -->
				<image v-if="state.selectedTimeSlot === 3" class="platinum1buycomsel4"
					:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.SEL4}`" mode="aspectFit"></image>
				<image v-if="state.selectedTimeSlot === 2" class="platinum1buycomsel3"
					:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.SEL3}`" mode="aspectFit"></image>
				<image v-if="state.selectedTimeSlot === 1" class="platinum1buycomsel2"
					:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.SEL2}`" mode="aspectFit"></image>
				<image v-if="state.selectedTimeSlot === 0" class="platinum1buycomsel1"
					:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.SEL1}`" mode="aspectFit"></image>
				<!-- 时间段选择 -->
				<view class="platinum1buycomtime1" @click="switchTimeSlot(0)" :class="getTimeSlotClass(0)">
					<image class="platinum1buycomtime1text"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME1.TEXT}`" mode="aspectFit"></image>
					<image class="platinum1buycomtime1status"
						:src="`${$baseUrl}${getTimeSlotStatusImage(0, 'PLATINUM')}`" mode="aspectFit">
						<!-- v-if="!isLevelSufficient()"> -->
					</image>
				</view>
				<view class="platinum1buycomtime2" @click="switchTimeSlot(1)" :class="getTimeSlotClass(1)">
					<image class="platinum1buycomtime2text"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME2.TEXT}`" mode="aspectFit"></image>
					<image class="platinum1buycomtime2status"
						:src="`${$baseUrl}${getTimeSlotStatusImage(1, 'PLATINUM')}`" mode="aspectFit">
						<!-- v-if="!isLevelSufficient()"> -->
					</image>
				</view>
				<view class="platinum1buycomtime3" @click="switchTimeSlot(2)" :class="getTimeSlotClass(2)">
					<image class="platinum1buycomtime3text"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME3.TEXT}`" mode="aspectFit"></image>
					<image class="platinum1buycomtime3status"
						:src="`${$baseUrl}${getTimeSlotStatusImage(2, 'PLATINUM')}`" mode="aspectFit">
						<!-- v-if="!isLevelSufficient()"> -->
					</image>
				</view>
				<view class="platinum1buycomtime4" @click="switchTimeSlot(3)" :class="getTimeSlotClass(3)">
					<image class="platinum1buycomtime4text"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME4.TEXT}`" mode="aspectFit"></image>
					<image class="platinum1buycomtime4status"
						:src="`${$baseUrl}${getTimeSlotStatusImage(3, 'PLATINUM')}`" mode="aspectFit">
						<!-- v-if="!isLevelSufficient()"> -->
					</image>
				</view>
				<view class="platinum1buycomgoods">
					<image class="platinum1buycomgoodsbg"
						:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.GOODS.BG}`" mode="aspectFit"></image>
					<!-- 限时1分购按钮 -->
					<view class="buy-button-container">
						<button class="buy-btn" :class="getBuyButtonClass('platinum')"
							@click="handleBuyClick('platinum')">
							{{ getBuyButtonText('platinum') }}
						</button>
					</view>
				</view>
			</view>
			<image class="platinumlocktip" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.LOCKTIP}`" mode="aspectFit">
			</image>
		</view>

		<!-- 精选好券领取成功弹窗 -->

		<!-- 精选好卷弹窗 isUnlock  // 是否解锁 商品兑换券  type  1 黄金、2 铂金、3 钻石、4 星光、5 星耀 -->
		<popup-jingxuan v-if="state.showJingxuanPopup" :type=LEVEL_TO_POPUP_TYPE[currentLevelName] :isUnlock="false"
			@close="closeJingxuanPopup"></popup-jingxuan>


	</view>
</template>

<script setup>
	import {
		getCurrentInstance,
		reactive,
		computed,
		onMounted,
		watch,
		onUnmounted
	} from 'vue'
	import {
		MONTH_GIFT_IMAGES
	} from './monthGiftImages.js'
	import {
		monthlyGiftIndex,
		monthlyGiftDrawOne,
		monthlyGiftDrawAll
	} from '../../api/monthGift.js'
	import {
		jump
	} from '../../utils/index.js'
	import md from '../../md.js'
	// import popupJingxuan from '../popup-jingxuan/popup-jingxuan.vue'

	// 获取全局属性
	const {
		proxy
	} = getCurrentInstance()
	const $baseUrl = proxy.$baseUrl

	// 接收用户等级参数
	const props = defineProps({
		currentLevel: {
			type: Number,
			required: true,
			validator: (value) => [0, 1, 2, 3, 4].includes(value)
		},
		userLevel: {
			type: Number,
			required: true,
			validator: (value) => [0, 1, 2, 3, 4].includes(value)
		}
	})

	// 业务逻辑状态
	const state = reactive({
		// 精选好券状态 - 根据 equityCouponList 动态生成
		couponStatus: {
			diamond: 'unlocked', // 'locked', 'unlocked', 'used'
			starshine: 'unlocked',
			starlight: 'unlocked',
			gold: 'unlocked',
			platinum: 'unlocked'
		},
		// 限时1分购状态 - 根据 batchCoupon 动态生成
		buyStatus: {
			diamond: 'locked', // 'locked', 'unlocked', 'purchased'
			starshine: 'locked',
			starlight: 'locked',
			gold: 'locked',
			platinum: 'locked'
		},
		// 当前选中的时间段
		selectedTimeSlot: 0, // 0: 10:00, 1: 12:00, 2: 14:00, 3: 16:00
		// 时间段状态 - 根据 batchCoupon.stockBatchList 动态生成
		timeSlots: [{
				time: '10:00',
				status: 'locked', // 'locked', 'unlocked', 'purchased'
				stockBatchId: null,
				startTime: '',
				endTime: '',
				stockUsage: 0,
				stockLimit: 0,
				received: false
			},
			{
				time: '12:00',
				status: 'locked',
				stockBatchId: null,
				startTime: '',
				endTime: '',
				stockUsage: 0,
				stockLimit: 0,
				received: false
			},
			{
				time: '14:00',
				status: 'locked',
				stockBatchId: null,
				startTime: '',
				endTime: '',
				stockUsage: 0,
				stockLimit: 0,
				received: false
			},
			{
				time: '16:00',
				status: 'locked',
				stockBatchId: null,
				startTime: '',
				endTime: '',
				stockUsage: 0,
				stockLimit: 0,
				received: false
			}
		],
		// 新增：batchCoupon 数据 - 根据接口返回结构调整
		batchCoupon: [], // 改为数组，因为接口返回的是数组
		// 新增：equityCouponList 数据
		equityCouponList: [],
		// 新增：倒计时相关状态
		next2810Countdown: -1,
		countdownTimer: null,
		// 新增：弹窗控制状态
		showJingxuanPopup: false
	})

	// 等级映射常量
	const LEVEL_MAP = {
		0: 'gold',
		1: 'platinum',
		2: 'diamond',
		3: 'starlight',
		4: 'starshine'
	}

	// 等级名称到弹窗类型的映射
	const LEVEL_TO_POPUP_TYPE = {
		'gold': '1', // 1 黄金
		'platinum': '2', // 2 铂金
		'diamond': '3', // 3 钻石
		'starlight': '4', // 4 星光
		'starshine': '5' // 5 星耀
	}

	// 计算属性：当前展示等级
	const currentLevelName = computed(() => LEVEL_MAP[props.currentLevel])


	// 方法
	// 显示精选好券领取成功弹窗
	const showJingxuanPopup = () => {
		state.showJingxuanPopup = true
	}

	// 关闭精选好券领取成功弹窗
	const closeJingxuanPopup = () => {
		state.showJingxuanPopup = false
	}

	const handleCouponClick = async (level) => {
		md.sensorComponentLogTake({
			xcxComponentClick: "true",
			pageName: "积分服务页",
			componentName: "会员权益",
			componentContent: "月月礼-" + getCouponButtonText(currentLevelName.value)
		});
		console.log("handleCouponClick level:", level, "state.couponStatus:", state.couponStatus)

		if (state.couponStatus[level] === 'used') {
			jump({
				type: 2,
				url: "subPackages/shopMainProcess/coupons/couponList",
				extra: {
					appId: "wx4205ec55b793245e",
					envVersion: "release"
				}
			})
			return
		}

		try {
			const result = await monthlyGiftDrawAll()
			console.log('Coupon draw result:', result)
			if (result.code === '000000') {
				// 更新对应等级的状态为已购买
				state.couponStatus[level] = 'purchased'
				console.log("Updated couponStatus for", level, ":", state.couponStatus[level])

				// 领取成功后弹窗
				showJingxuanPopup()

				// 刷新页面数据
				await fetchMonthlyGiftData()
			} else {
				uni.showToast({
					title: '领取失败',
					icon: 'none',
					duration: 2000
				})
			}
		} catch (error) {
			console.error('Error drawing coupon:', error)
			uni.showToast({
				title: '领取失败',
				icon: 'none',
				duration: 2000
			})
		}
	}

	const handleBuyClick = async (level) => {
		md.sensorComponentLogTake({
			xcxComponentClick: "true",
			pageName: "积分服务页",
			componentName: "会员权益",
			componentContent: "月月礼-" + getBuyButtonText(currentLevelName.value)
		});
		console.log(`Clicked buy for ${level}`)

		// 检查用户等级是否符合领取条件（优先级最高）
		const levelOrder = [0, 1, 2, 3, 4]; // gold, platinum, diamond, starlight, starshine
		const userLevelIndex = levelOrder.indexOf(props.userLevel * 1)
		const diamondIndex = levelOrder.indexOf(2); // Diamond level is 2

		// 如果用户等级不够，显示提示
		if (userLevelIndex < diamondIndex) {
			//点击跳转升级攻略页面


			uni.navigateTo({
				url: '/pages/webview/webview?url=https://mom.feihe.com/member/mine/pointStrategy'
			});

			return
		}

		// 检查倒计时状态（其次）
		if (state.next2810Countdown !== -1) {
			uni.showToast({
				title: '活动暂未开启',
				icon: 'none',
				duration: 2000
			});
			return
		}

		console.log("state.buyStatus", state.buyStatus, level)

		// 在 next2810Countdown == -1 的情况下
		const currentTimeSlot = state.timeSlots[state.selectedTimeSlot]

		// 如果已领取，跳转到使用页面
		if (currentTimeSlot.received) {
			jump({
				type: 2,
				url: "subPackages/shopMainProcess/coupons/couponList",
				extra: {
					appId: "wx4205ec55b793245e",
					envVersion: "release"
				}
			})
			return
		}

		// 根据 status 处理不同状态
		if (currentTimeSlot.status === 0) {
			// status = 0，显示"活动暂未开启"
			uni.showToast({
				title: '活动暂未开启',
				icon: 'none',
				duration: 2000
			});
			return
		} else if (currentTimeSlot.status === 1) {
			// status = 1，一键完成领取
			if (!currentTimeSlot.stockLimit) { //已抢完，不可点击
				return;
			}
			try {
				const equityCouponInfoId = currentTimeSlot.equityCouponInfoId
				const stockBatchId = currentTimeSlot.stockBatchId
				console.log("equityCouponInfoId", equityCouponInfoId, stockBatchId)
				const result = await monthlyGiftDrawOne({
					equityCouponInfoId,
					stockBatchId
				})
				console.warn("result", result)

				if (result.code == '000000' && result.data.receiveResult === 1) {
					// 购买成功，更新时间段状态
					currentTimeSlot.status = 'purchased'
					currentTimeSlot.received = true
					state.buyStatus[level] = 'purchased'
					uni.showToast({
						title: '领取成功',
						icon: 'none',
						duration: 2000
					})

					// 刷新页面数据
					fetchMonthlyGiftData()
				} else {
					uni.showToast({
						title: '领取失败',
						icon: 'none',
						duration: 2000
					})
				}
			} catch (error) {

			}
		} else if (currentTimeSlot.status === 2) {
			try {

			} catch (error) {

			}
		}
	}

	// 切换时间段
	const switchTimeSlot = (index) => {
		state.selectedTimeSlot = index
		console.log(`切换到时间段: ${state.timeSlots[index].time}`)
		md.sensorComponentLogTake({
			xcxComponentExposure: "true",
			pageName: "积分服务页",
			componentName: "会员权益",
			componentContent: "月月礼-" + state.timeSlots[state.selectedTimeSlot].time + "-" + getBuyButtonText(
				currentLevelName.value)
		});
	}

	// 获取精选好券按钮文本
	const getCouponButtonText = (level) => {
		if (state.couponStatus[level] === 'used') {
			return '去使用'
		}
		const levelOrder = [0, 1, 2, 3, 4];
		const userLevelIndex = levelOrder.indexOf(props.userLevel * 1)
		const goldIndex = levelOrder.indexOf(0) // Gold level is 0
		if (userLevelIndex < goldIndex) {
			return '待解锁'
		}
		return '立即领取'
	}

	// 获取精选好券按钮样式类
	const getCouponButtonClass = (level) => {
		console.warn("getCouponButtonClass level:", level, "state.couponStatus:", state.couponStatus)

		// 检查用户等级是否符合领取条件
		const levelOrder = [0, 1, 2, 3, 4]; // gold, platinum, diamond, starlight, starshine
		const userLevelIndex = levelOrder.indexOf(props.userLevel * 1)
		const levelIndex = levelOrder.indexOf(LEVEL_MAP[props.currentLevel])

		// 如果用户等级不够，显示锁定状态
		if (userLevelIndex < levelIndex) {
			return 'coupon-btn-locked'
		}

		// 根据当前等级的状态返回对应样式
		if (state.couponStatus[level] === 'used') {
			return 'coupon-btn-purchased-' + level
		} else if (state.couponStatus[level] === 'unlocked') {
			return 'coupon-btn-unlocked-' + level
		} else {
			return 'coupon-btn-locked'
		}
	}

	//获取状态栏对应的文本图片
	const getTimeSlotStatusImage = (timeSlotIndex, level = 'gold') => {
		const timeSlot = state.timeSlots[timeSlotIndex];

		// 检查用户等级是否符合要求
		const levelOrder = [0, 1, 2, 3, 4];
		const userLevelIndex = levelOrder.indexOf(props.userLevel * 1);
		const requiredLevelIndex = levelOrder.indexOf(props.currentLevel * 1);

		// 如果用户等级不够，返回"待解锁"状态的图片
		if (userLevelIndex < requiredLevelIndex) {
			return MONTH_GIFT_IMAGES[level.toUpperCase()].BUY_COM.TIME1.STATUS;
		}

		// 时间没到，返回“待开启”状态图片
		if (state.next2810Countdown !== -1) {
			return MONTH_GIFT_IMAGES[level.toUpperCase()].BUY_COM.TIME1.STATUS1;
		}

		// 根据时间段状态返回对应的图片
		switch (timeSlot.status) {
			case 0: // 未开始
				return MONTH_GIFT_IMAGES[level.toUpperCase()].BUY_COM.TIME1.STATUS2;
			case 1: // 进行中
				if (timeSlot.stockLimit > 0) { //进行中
					return MONTH_GIFT_IMAGES[level.toUpperCase()].BUY_COM.TIME1.STATUS3;
				} else { //已抢完
					return MONTH_GIFT_IMAGES[level.toUpperCase()].BUY_COM.TIME1.STATUS4;
				}
			default:
				return MONTH_GIFT_IMAGES[level.toUpperCase()].BUY_COM.TIME1.STATUS1;
		}
	};

	// 获取限时1分购按钮文本
	const getBuyButtonText = (level) => {
		// 检查用户等级是否符合领取条件
		const levelOrder = [0, 1, 2, 3, 4]; // gold, platinum, diamond, starlight, starshine
		const userLevelIndex = levelOrder.indexOf(props.userLevel * 1)
		const diamondIndex = levelOrder.indexOf(2) // Diamond level is 2

		// 如果用户等级不够，显示"待解锁"（优先级最高）
		if (userLevelIndex < diamondIndex) {
			return '待解锁'
		}

		// 检查倒计时状态（其次）
		if (state.next2810Countdown !== -1) {
			return '待开启'
		}

		// 在 next2810Countdown == -1 的情况下
		// 检查当前选中的时间段状态
		const currentTimeSlot = state.timeSlots[state.selectedTimeSlot]

		// 如果已领取，显示"去使用"
		if (currentTimeSlot.received) {
			return '去使用'
		}

		// 根据 stockBatchList 对应 index 的 status 显示按钮文本
		if (currentTimeSlot.status === 0) {
			return '未开始'
		} else if (currentTimeSlot.status === 1) {
			if (currentTimeSlot.stockLimit > 0) {
				return '立即抢'
			} else {
				return '已抢完'
			}
		} else if (currentTimeSlot.status === 2) {
			return '已结束'
		}

		return '未开始'
	}

	// 获取限时1分购按钮样式类
	const getBuyButtonClass = (level) => {
		const levelName = currentLevelName.value
		const levelOrder = [0, 1, 2, 3, 4]; // gold, platinum, diamond, starlight, starshine
		const userLevelIndex = levelOrder.indexOf(props.userLevel * 1)
		const diamondIndex = levelOrder.indexOf(2); // Diamond level is 2
		console.log("userLevelIndex", userLevelIndex, diamondIndex)

		if (userLevelIndex < diamondIndex) {
			return 'buy-btn-upgrade-' + levelName
		}

		// 检查倒计时状态
		if (state.next2810Countdown !== -1) { //待开启
			return 'buy-btn-locked-' + levelName
		}

		const currentTimeSlot = state.timeSlots[state.selectedTimeSlot]

		if (currentTimeSlot.received) { //去使用
			return 'buy-btn-purchased-' + levelName
		} else if (currentTimeSlot.status === 1) { //进行中
			if (currentTimeSlot.stockLimit > 0) { //有库存，立即抢
				return 'buy-btn-unlocked-' + levelName
			} else { //没库存，已抢完
				return 'buy-btn-unlocked1-' + levelName
			}
		} else { //待开启
			return 'buy-btn-locked-' + levelName
		}
	}


	// 获取时间段样式类
	const getTimeSlotClass = (index) => {
		const timeSlot = state.timeSlots[index]

		if (index === state.selectedTimeSlot) {
			return 'time-slot-active'
		}

		// 根据时间段状态应用不同样式
		switch (timeSlot.status) {
			case 'unlocked':
				return 'time-slot-unlocked'
			case 'ended':
				return 'time-slot-ended'
			case 'purchased':
				return 'time-slot-purchased'
			case 'locked':
			default:
				return 'time-slot-inactive'
		}
	}

	// 获取月礼包数据
	const fetchMonthlyGiftData = async () => {
		console.log('Fetching monthly gift data for level:', currentLevelName.value)

		try {
			// 获取月礼包首页数据
			const result = await monthlyGiftIndex({
				level: currentLevelName.value
			})
			console.log('API response:', result)

			if (result.success) {
				const data = result.data
				console.log('API data:', data)

				// 保存 equityCouponList 数据
				if (data.equityCouponList) {
					console.log('equityCouponList:', data.equityCouponList)
					state.equityCouponList = data.equityCouponList
					// 根据 equityCouponList 更新精选好券状态
					updateCouponStatus(data.equityCouponList)
				}

				// 保存 batchCoupon 数据 - 根据接口结构调整
				if (data.batchCoupon) {
					console.log('batchCoupon:', data.batchCoupon)
					state.batchCoupon = data.batchCoupon // 直接保存对象
					// 根据 batchCoupon 更新限时1分购状态和时间段状态
					updateBuyStatusAndTimeSlots(data.batchCoupon)
				}

				// 设置当前选中的时间段
				if (data.currentTimeSlot !== undefined) {
					state.selectedTimeSlot = data.currentTimeSlot
				}


				console.warn('next2810Countdown', data.next2810Countdown)

				// 处理倒计时逻辑
				if (data.next2810Countdown !== undefined) {
					state.next2810Countdown = data.next2810Countdown
					if (data.next2810Countdown !== -1) {
						startCountdown(data.next2810Countdown)
					}
				}
			}
		} catch (error) {
			console.error('获取月礼包数据失败:', error)
		}
	}

	// 倒计时处理函数
	const startCountdown = (milliseconds) => {
		// 清除之前的定时器
		if (state.countdownTimer) {
			clearTimeout(state.countdownTimer)
		}

		console.warn("milliseconds", milliseconds)

		// 设置倒计时
		// 修正：某些极大值（如 2609485287）会导致 setTimeout 立即执行（超出 32 位有符号整型最大值 2147483647）
		// 需要将超出最大安全值的毫秒数限制为 2147483647（约24.8天）
		const MAX_TIMEOUT = 100000000
		let timeoutMs = typeof milliseconds === 'number' && milliseconds > 0 ? milliseconds : 0
		if (timeoutMs > MAX_TIMEOUT) {
			console.warn('倒计时超出最大安全值，已自动截断为 2147483647 ms', milliseconds)
			timeoutMs = MAX_TIMEOUT
		}
		if (timeoutMs > 0) {
			state.countdownTimer = setTimeout(() => {
				console.log('倒计时结束，1秒后刷新页面')
				// 延时1秒后刷新页面接口
				// setTimeout(() => {
				//     fetchMonthlyGiftData()
				// }, 1000)
			}, timeoutMs)
		} else {
			console.warn('倒计时参数异常，milliseconds:', milliseconds)
			// 可选：立即刷新或忽略
			// fetchMonthlyGiftData()
		}
	}

	// 清理定时器
	onUnmounted(() => {
		if (state.countdownTimer) {
			clearTimeout(state.countdownTimer)
		}
	})

	const initExposure = () => {

		md.sensorComponentLogTake({
			xcxComponentExposure: "true",
			pageName: "积分服务页",
			componentName: "会员权益",
			componentContent: "月月礼-" + state.timeSlots[state.selectedTimeSlot].time + "-" + getBuyButtonText(
				currentLevelName.value)
		});
		md.sensorComponentLogTake({
			xcxComponentExposure: "true",
			pageName: "积分服务页",
			componentName: "会员权益",
			componentContent: "月月礼-" + getCouponButtonText(currentLevelName.value)
		});
	}

	// 初始化
	onMounted(async () => {
		console.log('MonthGift component mounted, current level:', props.currentLevel, props.userLevel)
		await fetchMonthlyGiftData()

		initExposure();
	})

	// 调试函数：打印当前状态
	const debugState = () => {
		console.log('=== Debug State ===')
		console.log('currentLevelName:', currentLevelName.value)
		console.log('couponStatus:', state.couponStatus)
		console.log('buyStatus:', state.buyStatus)
		console.log('equityCouponList:', state.equityCouponList)
		console.log('==================')
	}

	// 根据 equityCouponList 更新精选好券状态
	const updateCouponStatus = (equityCouponList) => {
		console.warn("updateCouponStatus", equityCouponList, state.couponStatus)

		// 重置所有等级的状态为锁定
		Object.keys(state.couponStatus).forEach(level => {
			state.couponStatus[level] = 'locked'
		})

		if (equityCouponList.length === 0) {
			// 如果没有优惠券数据，所有等级都设为已使用状态
			Object.keys(state.couponStatus).forEach(level => {
				state.couponStatus[level] = 'used'
			})
			return
		}

		// 检查是否有未领取的优惠券
		let hasUnreceived = false
		equityCouponList.forEach(coupon => {
			if (coupon.receiveStatus === 0) {
				hasUnreceived = true
			}
		})

		console.warn("hasUnreceived", hasUnreceived)

		if (hasUnreceived) {
			// 如果有未领取的优惠券，解锁所有等级
			Object.keys(state.couponStatus).forEach(level => {
				state.couponStatus[level] = 'unlocked'
			})
		} else {
			// 如果所有优惠券都已领取，设为已使用状态
			Object.keys(state.couponStatus).forEach(level => {
				state.couponStatus[level] = 'used'
			})
		}

		console.warn("Updated couponStatus:", state.couponStatus)
	}

	// 根据 batchCoupon 更新限时1分购状态和时间段状态
	const updateBuyStatusAndTimeSlots = (batchCouponData) => {
		// 重置所有等级的购买状态
		Object.keys(state.buyStatus).forEach(level => {
			state.buyStatus[level] = 'locked'
		})

		// 根据用户等级解锁相应等级及以下的功能
		const levelOrder = [0, 1, 2, 3, 4]; // gold, platinum, diamond, starlight, starshine
		const userLevelIndex = levelOrder.indexOf(props.userLevel * 1);

		// 解锁用户等级及以下的所有等级
		for (let i = 0; i <= userLevelIndex; i++) {
			const levelName = LEVEL_MAP[i];
			if (state.buyStatus.hasOwnProperty(levelName)) {
				state.buyStatus[levelName] = 'unlocked';
			}
		}

		// 处理 batchCoupon 数据
		if (batchCouponData) {
			console.log('Processing batchCoupon data:', batchCouponData)

			// 更新限时1分购状态
			if (batchCouponData.gradeAllow !== undefined) {
				const level = currentLevelName.value
				if (state.buyStatus.hasOwnProperty(level)) {
					// 如果用户等级足够，保持unlocked状态；否则设为locked
					if (userLevelIndex >= levelOrder.indexOf(props.currentLevel * 1)) {
						state.buyStatus[level] = batchCouponData.gradeAllow ? 'unlocked' : 'locked'
					}
				}
			}

			// 更新限时1分购状态（如果已领取）
			if (batchCouponData.received !== undefined) {
				const level = currentLevelName.value
				if (state.buyStatus.hasOwnProperty(level) && batchCouponData.received) {
					state.buyStatus[level] = 'purchased'
				}
			}

			// 处理 stockBatchList 数据，更新时间段状态
			if (batchCouponData.stockBatchList && batchCouponData.stockBatchList.length > 0) {
				console.log('Processing stockBatchList:', batchCouponData.stockBatchList)

				// 根据实际的时间段数据更新，而不是硬编码的4个时间段
				batchCouponData.stockBatchList.forEach((batch, index) => {
					console.log(`Processing batch ${index}:`, batch)

					// 确保 timeSlots 数组有足够的元素
					while (state.timeSlots.length <= index) {
						state.timeSlots.push({
							time: '', // 动态时间，从API获取
							status: 'locked',
							stockBatchId: null,
							equityCouponInfoId: null, // 添加这个字段
							startTime: '',
							endTime: '',
							stockUsage: 0,
							stockLimit: 0,
							received: false
						})
					}

					// 更新时间段信息
					const mappedStatus = getBatchStatus(batch.status)
					console.log(`Batch ${index} status: ${batch.status} -> mapped to: ${mappedStatus}`)

					state.timeSlots[index] = {
						...state.timeSlots[index],
						stockBatchId: batch.stockBatchId,
						equityCouponInfoId: batchCouponData.equityCouponInfoId, // 从 batchCoupon 对象中获取
						startTime: batch.startTime,
						endTime: batch.endTime || '',
						stockUsage: batchCouponData.stockUsage || 0,
						stockLimit: batchCouponData.stockLimit || 0,
						received: batchCouponData.received || false,
						status: batch.status // 直接使用原始 status 值
					}

					console.log(`Updated timeSlot ${index}:`, state.timeSlots[index])
				})

				// 如果API返回的时间段少于4个，保持原有的4个时间段结构
				if (batchCouponData.stockBatchList.length < 4) {
					// 保持原有的4个时间段，未返回的保持默认状态
					for (let i = batchCouponData.stockBatchList.length; i < 4; i++) {
						if (state.timeSlots[i]) {
							state.timeSlots[i].status = 'locked'
							state.timeSlots[i].time = getDefaultTimeText(i)
						}
					}
				}

				console.log('Final timeSlots state:', state.timeSlots)
			}
		}

		console.log('Updated buyStatus:', state.buyStatus)
	}



	// 获取批次状态的辅助函数
	const getBatchStatus = (status) => {
		// 根据 stockBatchList 中的 status 字段映射到时间段状态
		// status: 0-待开始, 1-抢券中, 2-已结束
		console.log('getBatchStatus called with status:', status, 'type:', typeof status)

		// 确保 status 是数字类型
		const numStatus = Number(status)

		switch (numStatus) {
			case 1:
				console.log('Status 1 -> unlocked (抢券中)')
				return 'unlocked' // 抢券中 - 可领取
			case 0:
				console.log('Status 0 -> locked (待开始)')
				return 'locked' // 待开始 - 锁定状态
			case 2:
				console.log('Status 2 -> ended (已结束)')
				return 'ended' // 已结束 - 结束状态
			default:
				console.log('Status', numStatus, '-> locked (默认)')
				return 'locked' // 默认锁定状态
		}
	}




	// 获取默认时间段文本（当API没有返回足够时间段时使用）
	const getDefaultTimeText = (index) => {
		const defaultTimes = ['10:00', '12:00', '14:00', '16:00']
		return defaultTimes[index] || ''
	}

	// 检查用户等级是否足够
	const isLevelSufficient = () => {
		const levelOrder = [2, 3, 4]; // gold, platinum, diamond, starlight, starshine
		const userLevelIndex = levelOrder.indexOf(props.userLevel * 1);
		return userLevelIndex >= 0;
	}

	// 监听 userLevel 变化
	watch(() => props.userLevel, (newUserLevel, oldUserLevel) => {
		console.log(`userLevel changed from ${oldUserLevel} to ${newUserLevel}`)

		// 如果 userLevel 发生变化，重新获取数据
		if (newUserLevel !== oldUserLevel) {
			console.log('newUserLevel', newUserLevel)
			console.log('Refreshing data due to userLevel change')
			fetchMonthlyGiftData()
		}
	}, {
		immediate: false
	})

	// 获取时间段状态文本
	const getTimeSlotStatusText = (index) => {
		const timeSlot = state.timeSlots[index]

		console.log(`getTimeSlotStatusText called for index ${index}:`, timeSlot)

		if (!timeSlot) {
			console.log(`No timeSlot for index ${index}, returning '待开始'`)
			return '待开始'
		}

		// 检查用户等级是否符合要求 - 用户等级必须等于或高于要操作的等级
		const levelOrder = [0, 1, 2, 3, 4]; // gold, platinum, diamond, starlight, starshine
		const userLevelIndex = levelOrder.indexOf(props.userLevel * 1)
		const requiredLevelIndex = levelOrder.indexOf(props.currentLevel * 1)

		console.log(
			`User level: ${props.userLevel} (${userLevelName.value}), Required level: ${props.currentLevel} (${currentLevelName.value})`
		)
		console.log(`User level index: ${userLevelIndex}, Required level index: ${requiredLevelIndex}`)

		// 如果用户等级不够，显示"待解锁"
		if (userLevelIndex < requiredLevelIndex) {
			console.log('User level insufficient, showing 待解锁')
			return '待解锁'
		}

		// status: 0-待开始, 1-抢券中, 2-已结束
		console.log(`TimeSlot status: ${timeSlot.status}`)

		switch (timeSlot.status) {
			case 'unlocked': // 对应 status: 1
				return '抢券中'
			case 'locked': // 对应 status: 0
				return '待开始'
			case 'ended': // 对应 status: 2
				return '已结束'
			case 'purchased':
				return '已领取'
			default:
				return '待开始'
		}
	}
</script>

<style lang="less" scoped>
	.monthgift {
		width: 686rpx;
		height: 1113rpx;
		left: 0rpx;
		top: 0rpx;
		right: 0rpx;
		margin: auto;
		position: relative;

		.diamond {
			width: 686rpx;
			height: 1113rpx;
			left: 0rpx;
			top: 0rpx;

			position: absolute;

			.diamondbg {
				width: 686rpx;
				height: 1113rpx;
				left: 0rpx;
				top: 0rpx;
				position: absolute;
				border-radius: 45rpx 0 45rpx 45rpx;

				opacity: 0.2;
			}

			.diamondgoodcoupon {
				width: 640rpx;
				height: 561rpx;
				left: 24rpx;
				top: 523rpx;
				position: absolute;

				.diamondgoodcoupons {
					width: 640rpx;
					height: 561rpx;
					left: 0rpx;
					top: 0rpx;
					position: absolute;

					.diamondgoodcouponstitle {
						width: 126rpx;
						height: 31rpx;
						left: 6rpx;
						top: 0rpx;
						position: absolute;
					}

					.diamondgoodcouponsbg {
						width: 640rpx;
						height: 494rpx;
						left: 0rpx;
						top: 67rpx;
						position: absolute;
						opacity: 0.3;
					}

					.diamondgoodcoupons1 {
						width: 190rpx;
						height: 160rpx;
						left: 25rpx;
						top: 89rpx;
						position: absolute;
					}

					.diamondgoodcoupons2 {
						width: 191rpx;
						height: 160rpx;
						left: 226rpx;
						top: 89rpx;
						position: absolute;
					}

					.diamondgoodcoupons3 {
						width: 191rpx;
						height: 160rpx;
						left: 425rpx;
						top: 89rpx;
						position: absolute;
					}

					.diamondgoodcoupons4 {
						width: 191rpx;
						height: 159rpx;
						left: 124rpx;
						top: 263rpx;
						position: absolute;
					}

					.diamondgoodcoupons5 {
						width: 191rpx;
						height: 159rpx;
						left: 325rpx;
						top: 263rpx;
						position: absolute;
					}
				}

				.diamondgoodcouponnowbtn {
					width: 442rpx;
					height: 85rpx;
					left: 99rpx;
					top: 453rpx;
					position: absolute;
				}
			}

			.diamond1buycom {
				width: 640rpx;
				height: 426rpx;
				left: 24rpx;
				top: 47rpx;
				position: absolute;

				.diamond1buycomsel4 {
					width: 640rpx;
					height: 319rpx;
					left: 0rpx;
					top: 106rpx;
					position: absolute;
				}

				.diamond1buycomsel3 {
					width: 640rpx;
					height: 319rpx;
					left: 0rpx;
					top: 107rpx;
					position: absolute;
				}

				.diamond1buycomsel2 {
					width: 640rpx;
					height: 319rpx;
					left: 0rpx;
					top: 107rpx;
					position: absolute;
				}

				.diamond1buycomsel1 {
					width: 640rpx;
					height: 319rpx;
					left: 0rpx;
					top: 106rpx;
					position: absolute;
				}

				.diamond1buycomtime1 {
					width: 69rpx;
					height: 46rpx;
					left: 45rpx;
					top: 120rpx;
					position: absolute;

				}

				.diamond1buycomtime2 {
					width: 69rpx;
					height: 46rpx;
					left: 205rpx;
					top: 120rpx;
					position: absolute;


				}

				.diamond1buycomtime3 {
					width: 69rpx;
					height: 46rpx;
					left: 365rpx;
					top: 120rpx;
					position: absolute;


				}

				.diamond1buycomtime4 {
					width: 69rpx;
					height: 46rpx;
					left: 525rpx;
					top: 120rpx;
					position: absolute;


				}

				.diamond1buycomgoods {
					width: 592rpx;
					height: 206rpx;
					left: 25rpx;
					top: 197rpx;
					position: absolute;

					.diamond1buycomgoodsbg {
						width: 592rpx;
						height: 206rpx;
						left: 0rpx;
						top: 0rpx;
						position: absolute;
					}

					.diamond1buycomgoodslockbtn {
						width: 145rpx;
						height: 52rpx;
						left: 427rpx;
						top: 80rpx;
						position: absolute;
					}

					.diamond1buycomgoodsnowbtn {
						width: 145rpx;
						height: 52rpx;
						left: 427rpx;
						top: 80rpx;
						position: absolute;
					}
				}

				.diamond1buycomtitle {
					width: 396rpx;
					height: 66rpx;
					left: 7rpx;
					top: 3rpx;
					position: absolute;
				}

				.diamond1buycomdesc {
					width: 396rpx;
					height: 23rpx;
					left: -6rpx;
					top: 46rpx;
					position: absolute;
				}

				// .diamond1buycomstatus {
				//     width: 163rpx;
				//     height: 73rpx;
				//     left: 452rpx;
				//     top: 0rpx;
				//     position: absolute;
				// }
			}
		}

		.starshine {
			width: 686rpx;
			height: 1113rpx;
			left: 0rpx;
			top: 0rpx;
			position: absolute;

			.starshinebg {
				width: 686rpx;
				height: 1113rpx;
				left: 0rpx;
				top: 0rpx;
				position: absolute;
				border-radius: 45rpx 0 45rpx 45rpx;

				opacity: 0.1;
			}

			.starshinegoodcoupon {
				width: 640rpx;
				height: 561rpx;
				left: 24rpx;
				top: 523rpx;
				position: absolute;

				.starshinegoodcoupons {
					width: 640rpx;
					height: 561rpx;
					left: 0rpx;
					top: 0rpx;
					position: absolute;

					.starshinegoodcouponstitle {
						width: 126rpx;
						height: 31rpx;
						left: 6rpx;
						top: 0rpx;
						position: absolute;
					}

					.starshinegoodcouponsbg {
						width: 640rpx;
						height: 494rpx;
						left: 0rpx;
						top: 67rpx;
						position: absolute;
						opacity: 0.05;
					}

					.starshinegoodcoupons1 {
						width: 190rpx;
						height: 160rpx;
						left: 25rpx;
						top: 89rpx;
						position: absolute;
					}

					.starshinegoodcoupons2 {
						width: 191rpx;
						height: 160rpx;
						left: 226rpx;
						top: 89rpx;
						position: absolute;
					}

					.starshinegoodcoupons3 {
						width: 191rpx;
						height: 160rpx;
						left: 425rpx;
						top: 89rpx;
						position: absolute;
					}

					.starshinegoodcoupons4 {
						width: 191rpx;
						height: 159rpx;
						left: 124rpx;
						top: 263rpx;
						position: absolute;
					}

					.starshinegoodcoupons5 {
						width: 191rpx;
						height: 159rpx;
						left: 325rpx;
						top: 263rpx;
						position: absolute;
					}
				}

				.starshinegoodcouponnowbtn {
					width: 442rpx;
					height: 85rpx;
					left: 99rpx;
					top: 453rpx;
					position: absolute;
				}
			}

			.starshine1buycom {
				width: 640rpx;
				height: 426rpx;
				left: 24rpx;
				top: 47rpx;
				position: absolute;

				.starshine1buycomsel4 {
					width: 640rpx;
					height: 319rpx;
					left: 0rpx;
					top: 106rpx;
					position: absolute;
				}

				.starshine1buycomsel3 {
					width: 640rpx;
					height: 319rpx;
					left: 0rpx;
					top: 107rpx;
					position: absolute;
				}

				.starshine1buycomsel2 {
					width: 640rpx;
					height: 319rpx;
					left: 0rpx;
					top: 107rpx;
					position: absolute;
				}

				.starshine1buycomsel1 {
					width: 640rpx;
					height: 319rpx;
					left: 0rpx;
					top: 106rpx;
					position: absolute;
				}

				.starshine1buycomtime1 {
					width: 69rpx;
					height: 46rpx;
					left: 45rpx;
					top: 120rpx;
					position: absolute;

					.starshine1buycomtime1text {
						width: 69rpx;
						height: 22rpx;
						left: 0rpx;
						top: 0rpx;
						position: absolute;
					}

					.starshine1buycomtime1status {
						width: 49rpx;
						height: 16rpx;
						left: 10rpx;
						top: 30rpx;
						position: absolute;
					}
				}

				.starshine1buycomtime2 {
					width: 69rpx;
					height: 46rpx;
					left: 205rpx;
					top: 120rpx;
					position: absolute;

					.starshine1buycomtime2text {
						width: 69rpx;
						height: 22rpx;
						left: 0rpx;
						top: 0rpx;
						position: absolute;
					}

					.starshine1buycomtime2status {
						width: 49rpx;
						height: 16rpx;
						left: 10rpx;
						top: 30rpx;
						position: absolute;
					}
				}

				.starshine1buycomtime3 {
					width: 69rpx;
					height: 46rpx;
					left: 365rpx;
					top: 120rpx;
					position: absolute;

					.starshine1buycomtime3text {
						width: 69rpx;
						height: 22rpx;
						left: 0rpx;
						top: 0rpx;
						position: absolute;
					}

					.starshine1buycomtime3status {
						width: 49rpx;
						height: 16rpx;
						left: 10rpx;
						top: 30rpx;
						position: absolute;
					}
				}

				.starshine1buycomtime4 {
					width: 69rpx;
					height: 46rpx;
					left: 525rpx;
					top: 120rpx;
					position: absolute;

					.starshine1buycomtime4text {
						width: 69rpx;
						height: 22rpx;
						left: 0rpx;
						top: 0rpx;
						position: absolute;
					}

					.starshine1buycomtime4status {
						width: 49rpx;
						height: 16rpx;
						left: 10rpx;
						top: 30rpx;
						position: absolute;
					}
				}

				.starshine1buycomgoods {
					width: 592rpx;
					height: 206rpx;
					left: 25rpx;
					top: 197rpx;
					position: absolute;

					.starshine1buycomgoodsbg {
						width: 592rpx;
						height: 206rpx;
						left: 0rpx;
						top: 0rpx;
						position: absolute;
					}

					.starshine1buycomgoodslockbtn {
						width: 145rpx;
						height: 52rpx;
						left: 427rpx;
						top: 80rpx;
						position: absolute;
					}

					.starshine1buycomgoodsnowbtn {
						width: 145rpx;
						height: 52rpx;
						left: 427rpx;
						top: 80rpx;
						position: absolute;
					}
				}

				// .starshine1buycomstatus {
				//     width: 163rpx;
				//     height: 73rpx;
				//     left: 452rpx;
				//     top: 0rpx;
				//     position: absolute;
				// }

				.starshine1buycomtitle {
					width: 396rpx;
					height: 66rpx;
					left: 7rpx;
					top: 3rpx;
					position: absolute;
				}

				.starshine1buycomdesc {
					width: 396rpx;
					height: 23rpx;
					left: -6rpx;
					top: 46rpx;
					position: absolute;
				}
			}
		}

		.starlight {
			width: 686rpx;
			height: 1113rpx;
			left: 0rpx;
			top: 0rpx;
			position: absolute;

			.starlightbg {
				width: 686rpx;
				height: 1113rpx;
				left: 0rpx;
				top: 0rpx;
				border-radius: 45rpx 0 45rpx 45rpx;

				position: absolute;
				opacity: 0.2;
			}

			.startlightgoodcoupon {
				width: 640rpx;
				height: 561rpx;
				left: 24rpx;
				top: 523rpx;
				position: absolute;

				.startlightgoodcoupons {
					width: 640rpx;
					height: 561rpx;
					left: 0rpx;
					top: 0rpx;
					position: absolute;

					.startlightgoodcouponstitle {
						width: 126rpx;
						height: 31rpx;
						left: 6rpx;
						top: 0rpx;
						position: absolute;
					}

					.startlightgoodcouponsbg {
						width: 640rpx;
						height: 494rpx;
						left: 0rpx;
						top: 67rpx;
						position: absolute;
						opacity: 0.3;
					}

					.startlightgoodcoupons1 {
						width: 190rpx;
						height: 160rpx;
						left: 25rpx;
						top: 89rpx;
						position: absolute;
					}

					.startlightgoodcoupons2 {
						width: 191rpx;
						height: 160rpx;
						left: 226rpx;
						top: 89rpx;
						position: absolute;
					}

					.startlightgoodcoupons3 {
						width: 191rpx;
						height: 160rpx;
						left: 425rpx;
						top: 89rpx;
						position: absolute;
					}

					.startlightgoodcoupons4 {
						width: 191rpx;
						height: 159rpx;
						left: 124rpx;
						top: 263rpx;
						position: absolute;
					}

					.startlightgoodcoupons5 {
						width: 191rpx;
						height: 159rpx;
						left: 325rpx;
						top: 263rpx;
						position: absolute;
					}
				}

				.startlightgoodcouponnowbtn {
					width: 442rpx;
					height: 85rpx;
					left: 99rpx;
					top: 453rpx;
					position: absolute;
				}
			}

			.startlight1buycom {
				width: 640rpx;
				height: 426rpx;
				left: 24rpx;
				top: 47rpx;
				position: absolute;

				.startlight1buycomsel4 {
					width: 640rpx;
					height: 319rpx;
					left: 0rpx;
					top: 106rpx;
					position: absolute;
				}

				.startlight1buycomsel3 {
					width: 640rpx;
					height: 319rpx;
					left: 0rpx;
					top: 107rpx;
					position: absolute;
				}

				.startlight1buycomsel2 {
					width: 640rpx;
					height: 319rpx;
					left: 0rpx;
					top: 107rpx;
					position: absolute;
				}

				.startlight1buycomsel1 {
					width: 640rpx;
					height: 319rpx;
					left: 0rpx;
					top: 106rpx;
					position: absolute;
				}

				.startlight1buycomtime1 {
					width: 69rpx;
					height: 46rpx;
					left: 45rpx;
					top: 120rpx;
					position: absolute;

					.startlight1buycomtime1text {
						width: 69rpx;
						height: 22rpx;
						left: 0rpx;
						top: 0rpx;
						position: absolute;
					}

					.startlight1buycomtime1status {
						width: 49rpx;
						height: 16rpx;
						left: 10rpx;
						top: 30rpx;
						position: absolute;
					}
				}

				.startlight1buycomtime2 {
					width: 69rpx;
					height: 46rpx;
					left: 205rpx;
					top: 120rpx;
					position: absolute;

					.startlight1buycomtime2text {
						width: 69rpx;
						height: 22rpx;
						left: 0rpx;
						top: 0rpx;
						position: absolute;
					}

					.startlight1buycomtime2status {
						width: 49rpx;
						height: 16rpx;
						left: 10rpx;
						top: 30rpx;
						position: absolute;
					}
				}

				.startlight1buycomtime3 {
					width: 69rpx;
					height: 46rpx;
					left: 365rpx;
					top: 120rpx;
					position: absolute;

					.startlight1buycomtime3text {
						width: 69rpx;
						height: 22rpx;
						left: 0rpx;
						top: 0rpx;
						position: absolute;
					}

					.startlight1buycomtime3status {
						width: 49rpx;
						height: 16rpx;
						left: 10rpx;
						top: 30rpx;
						position: absolute;
					}
				}

				.startlight1buycomtime4 {
					width: 69rpx;
					height: 46rpx;
					left: 525rpx;
					top: 120rpx;
					position: absolute;

					.startlight1buycomtime4text {
						width: 69rpx;
						height: 22rpx;
						left: 0rpx;
						top: 0rpx;
						position: absolute;
					}

					.startlight1buycomtime4status {
						width: 49rpx;
						height: 16rpx;
						left: 10rpx;
						top: 30rpx;
						position: absolute;
					}
				}

				.startlight1buycomgoods {
					width: 592rpx;
					height: 206rpx;
					left: 25rpx;
					top: 197rpx;
					position: absolute;

					.startlight1buycomgoodsbg {
						width: 592rpx;
						height: 206rpx;
						left: 0rpx;
						top: 0rpx;
						position: absolute;
					}

					.startlight1buycomgoodslockbtn {
						width: 145rpx;
						height: 52rpx;
						left: 427rpx;
						top: 80rpx;
						position: absolute;
					}

					.startlight1buycomgoodsnowbtn {
						width: 145rpx;
						height: 52rpx;
						left: 427rpx;
						top: 80rpx;
						position: absolute;
					}
				}

				.startlight1buycomtitle {
					width: 396rpx;
					height: 66rpx;
					left: 7rpx;
					top: 3rpx;
					position: absolute;
				}

				.startlight1buycomdesc {
					width: 396rpx;
					height: 23rpx;
					left: -6rpx;
					top: 46rpx;
					position: absolute;
				}

				// .startlight1buycomstatus {
				//     width: 163rpx;
				//     height: 73rpx;
				//     left: 452rpx;
				//     top: 0rpx;
				//     position: absolute;
				// }
			}
		}

		.gold {
			width: 686rpx;
			height: 1113rpx;
			left: 0rpx;
			top: 0rpx;
			position: absolute;

			.goldbg {
				width: 686rpx;
				height: 1113rpx;
				left: 0rpx;
				border-radius: 45rpx 0 45rpx 45rpx;
				top: 0rpx;
				position: absolute;
				opacity: 0.2;
			}

			.goldgoodcoupon {
				width: 640rpx;
				height: 561rpx;
				left: 24rpx;
				top: 523rpx;
				position: absolute;

				.goldgoodcoupons {
					width: 640rpx;
					height: 561rpx;
					left: 0rpx;
					top: 0rpx;
					position: absolute;

					.goldgoodcouponstitle {
						width: 126rpx;
						height: 31rpx;
						left: 6rpx;
						top: 0rpx;
						position: absolute;
					}

					.goldgoodcouponsbg {
						width: 640rpx;
						height: 494rpx;
						left: 0rpx;
						top: 67rpx;
						position: absolute;
						opacity: 0.3;
					}

					.goldgoodcoupons1 {
						width: 190rpx;
						height: 160rpx;
						left: 25rpx;
						top: 89rpx;
						position: absolute;
					}

					.goldgoodcoupons2 {
						width: 191rpx;
						height: 160rpx;
						left: 226rpx;
						top: 89rpx;
						position: absolute;
					}

					.goldgoodcoupons3 {
						width: 191rpx;
						height: 160rpx;
						left: 425rpx;
						top: 89rpx;
						position: absolute;
					}

					.goldgoodcoupons4 {
						width: 191rpx;
						height: 159rpx;
						left: 124rpx;
						top: 263rpx;
						position: absolute;
					}

					.goldgoodcoupons5 {
						width: 191rpx;
						height: 159rpx;
						left: 325rpx;
						top: 263rpx;
						position: absolute;
					}
				}

				.goldgoodcouponnowbtn {
					width: 442rpx;
					height: 85rpx;
					left: 99rpx;
					top: 453rpx;
					position: absolute;
				}
			}

			.gold1buycom {
				width: 640rpx;
				height: 426rpx;
				left: 24rpx;
				top: 47rpx;
				position: absolute;

				.gold1buycomtitle {
					width: 396rpx;
					height: 66rpx;
					left: 7rpx;
					top: 3rpx;
					position: absolute;
				}

				.gold1buycomdesc {
					width: 396rpx;
					height: 23rpx;
					left: -6rpx;
					top: 46rpx;
					position: absolute;
				}

				// .gold1buycomstatus {
				//     width: 163rpx;
				//     height: 73rpx;
				//     left: 452rpx;
				//     top: 0rpx;
				//     position: absolute;
				// }

				.gold1buycomsel4 {
					width: 640rpx;
					height: 319rpx;
					left: 0rpx;
					top: 106rpx;
					position: absolute;
				}

				.gold1buycomsel3 {
					width: 640rpx;
					height: 319rpx;
					left: 0rpx;
					top: 107rpx;
					position: absolute;
				}

				.gold1buycomsel2 {
					width: 640rpx;
					height: 319rpx;
					left: 0rpx;
					top: 107rpx;
					position: absolute;
				}

				.gold1buycomsel1 {
					width: 640rpx;
					height: 319rpx;
					left: 0rpx;
					top: 106rpx;
					position: absolute;
				}

				.gold1buycomtime1 {
					width: 69rpx;
					height: 46rpx;
					left: 45rpx;
					top: 120rpx;
					position: absolute;

					.gold1buycomtime1text {
						width: 69rpx;
						height: 22rpx;
						left: 0rpx;
						top: 0rpx;
						position: absolute;
					}

					.gold1buycomtime1status {
						width: 49rpx;
						height: 16rpx;
						left: 10rpx;
						top: 30rpx;
						position: absolute;
					}
				}

				.gold1buycomtime2 {
					width: 69rpx;
					height: 46rpx;
					left: 205rpx;
					top: 120rpx;
					position: absolute;

					.gold1buycomtime2text {
						width: 69rpx;
						height: 22rpx;
						left: 0rpx;
						top: 0rpx;
						position: absolute;
					}

					.gold1buycomtime2status {
						width: 49rpx;
						height: 16rpx;
						left: 10rpx;
						top: 30rpx;
						position: absolute;
					}
				}

				.gold1buycomtime3 {
					width: 69rpx;
					height: 46rpx;
					left: 365rpx;
					top: 120rpx;
					position: absolute;

					.gold1buycomtime3text {
						width: 69rpx;
						height: 22rpx;
						left: 0rpx;
						top: 0rpx;
						position: absolute;
					}

					.gold1buycomtime3status {
						width: 49rpx;
						height: 16rpx;
						left: 10rpx;
						top: 30rpx;
						position: absolute;
					}
				}

				.gold1buycomtime4 {
					width: 69rpx;
					height: 46rpx;
					left: 525rpx;
					top: 120rpx;
					position: absolute;

					.gold1buycomtime4text {
						width: 69rpx;
						height: 22rpx;
						left: 0rpx;
						top: 0rpx;
						position: absolute;
					}

					.gold1buycomtime4status {
						width: 49rpx;
						height: 16rpx;
						left: 10rpx;
						top: 30rpx;
						position: absolute;
					}
				}

				.gold1buycomgoods {
					width: 592rpx;
					height: 206rpx;
					left: 25rpx;
					top: 197rpx;
					position: absolute;

					.gold1buycomgoodsbg {
						width: 592rpx;
						height: 206rpx;
						left: 0rpx;
						top: 0rpx;
						position: absolute;
					}

					.gold1buycomgoodslockbtn {
						width: 145rpx;
						height: 52rpx;
						left: 427rpx;
						top: 80rpx;
						position: absolute;
					}

					.gold1buycomgoodsnowbtn {
						width: 145rpx;
						height: 52rpx;
						left: 427rpx;
						top: 80rpx;
						position: absolute;
					}
				}
			}

			.goldlocktip {
				width: 257rpx;
				height: 41rpx;
				left: 430rpx;
				top: 0rpx;
				position: absolute;
			}
		}

		.platinum {
			width: 686rpx;
			height: 1113rpx;
			left: 0rpx;
			top: 0rpx;
			position: absolute;

			.platinumbg {
				width: 686rpx;
				height: 1113rpx;
				border-radius: 45rpx 0 45rpx 45rpx;
				left: 0rpx;
				top: 0rpx;
				position: absolute;
				opacity: 0.2;
			}

			.platinumgoodcoupon {
				width: 640rpx;
				height: 561rpx;
				left: 24rpx;
				top: 523rpx;
				position: absolute;

				.platinumgoodcoupons {
					width: 640rpx;
					height: 561rpx;
					left: 0rpx;
					top: 0rpx;
					position: absolute;

					.platinumgoodcoupontitle {
						width: 126rpx;
						height: 31rpx;
						left: 6rpx;
						top: 0rpx;
						position: absolute;
					}

					.platinumgoodcouponbg {
						width: 640rpx;
						height: 494rpx;
						left: 0rpx;
						top: 67rpx;
						position: absolute;
						opacity: 0.3;
					}

					.platinumgoodcoupons1 {
						width: 190rpx;
						height: 160rpx;
						left: 25rpx;
						top: 89rpx;
						position: absolute;
					}

					.platinumgoodcoupons2 {
						width: 191rpx;
						height: 160rpx;
						left: 226rpx;
						top: 89rpx;
						position: absolute;
					}

					.platinumgoodcoupons3 {
						width: 191rpx;
						height: 160rpx;
						left: 425rpx;
						top: 89rpx;
						position: absolute;
					}

					.platinumgoodcoupons4 {
						width: 191rpx;
						height: 159rpx;
						left: 124rpx;
						top: 263rpx;
						position: absolute;
					}

					.platinumgoodcoupons5 {
						width: 191rpx;
						height: 159rpx;
						left: 325rpx;
						top: 263rpx;
						position: absolute;
					}
				}

				.platinumgoodcouponnowbtn {
					width: 442rpx;
					height: 85rpx;
					left: 99rpx;
					top: 453rpx;
					position: absolute;
				}
			}

			.platinum1buycom {
				width: 640rpx;
				height: 426rpx;
				left: 24rpx;
				top: 47rpx;
				position: absolute;

				.platinum1buycomtitle {
					width: 396rpx;
					height: 66rpx;
					left: 7rpx;
					top: 3rpx;
					position: absolute;
				}

				.platinum1buycomdesc {
					width: 396rpx;
					height: 23rpx;
					left: -6rpx;
					top: 46rpx;
					position: absolute;
				}

				// .platinum1buycomstatus {
				//     width: 163rpx;
				//     height: 73rpx;
				//     left: 452rpx;
				//     top: 0rpx;
				//     position: absolute;
				// }

				.platinum1buycomsel4 {
					width: 640rpx;
					height: 319rpx;
					left: 0rpx;
					top: 106rpx;
					position: absolute;
				}

				.platinum1buycomsel3 {
					width: 640rpx;
					height: 319rpx;
					left: 0rpx;
					top: 107rpx;
					position: absolute;
				}

				.platinum1buycomsel2 {
					width: 640rpx;
					height: 319rpx;
					left: 0rpx;
					top: 107rpx;
					position: absolute;
				}

				.platinum1buycomsel1 {
					width: 640rpx;
					height: 319rpx;
					left: 0rpx;
					top: 106rpx;
					position: absolute;
				}

				.platinum1buycomtime1 {
					width: 69rpx;
					height: 46rpx;
					left: 45rpx;
					top: 120rpx;
					position: absolute;

					.platinum1buycomtime1text {
						width: 69rpx;
						height: 22rpx;
						left: 0rpx;
						top: 0rpx;
						position: absolute;
					}

					.platinum1buycomtime1status {
						width: 49rpx;
						height: 16rpx;
						left: 10rpx;
						top: 30rpx;
						position: absolute;
					}
				}

				.platinum1buycomtime2 {
					width: 69rpx;
					height: 46rpx;
					left: 205rpx;
					top: 120rpx;
					position: absolute;

					.platinum1buycomtime2text {
						width: 69rpx;
						height: 22rpx;
						left: 0rpx;
						top: 0rpx;
						position: absolute;
					}

					.platinum1buycomtime2status {
						width: 49rpx;
						height: 16rpx;
						left: 10rpx;
						top: 30rpx;
						position: absolute;
					}
				}

				.platinum1buycomtime3 {
					width: 69rpx;
					height: 46rpx;
					left: 365rpx;
					top: 120rpx;
					position: absolute;

					.platinum1buycomtime3text {
						width: 69rpx;
						height: 22rpx;
						left: 0rpx;
						top: 0rpx;
						position: absolute;
					}

					.platinum1buycomtime3status {
						width: 49rpx;
						height: 16rpx;
						left: 10rpx;
						top: 30rpx;
						position: absolute;
					}
				}

				.platinum1buycomtime4 {
					width: 69rpx;
					height: 46rpx;
					left: 525rpx;
					top: 120rpx;
					position: absolute;

					.platinum1buycomtime4text {
						width: 69rpx;
						height: 22rpx;
						left: 0rpx;
						top: 0rpx;
						position: absolute;
					}

					.platinum1buycomtime4status {
						width: 49rpx;
						height: 16rpx;
						left: 10rpx;
						top: 30rpx;
						position: absolute;
					}
				}

				.platinum1buycomgoods {
					width: 592rpx;
					height: 206rpx;
					left: 25rpx;
					top: 197rpx;
					position: absolute;

					.platinum1buycomgoodsbg {
						width: 592rpx;
						height: 206rpx;
						left: 0rpx;
						top: 0rpx;
						position: absolute;
					}

					.platinum1buycomgoodslockbtn {
						width: 145rpx;
						height: 52rpx;
						left: 427rpx;
						top: 80rpx;
						position: absolute;
					}

					.platinum1buycomgoodsnowbtn {
						width: 145rpx;
						height: 52rpx;
						left: 427rpx;
						top: 80rpx;
						position: absolute;
					}
				}
			}

			.platinumlocktip {
				width: 257rpx;
				height: 41rpx;
				left: 430rpx;
				top: 0rpx;
				position: absolute;
			}
		}

		.default-text {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			color: rgba(102, 102, 102, 1);
		}
	}

	// 精选好券按钮样式
	.coupon-button-container {
		position: absolute;
		left: 99rpx;
		top: 453rpx;
		width: 442rpx;
		height: 85rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.coupon-btn {
			width: 100%;
			height: 100%;
			border: none;
			border-radius: 42.5rpx;
			font-size: 26rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;

			&.coupon-btn-unlocked {
				background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
				color: #fff;
				box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);

				&:active {
					transform: scale(0.95);
					box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.4);
				}
			}

			&.coupon-btn-used {
				background: linear-gradient(135deg, #4ECDC4, #44A08D);
				color: #fff;
				box-shadow: 0 4rpx 12rpx rgba(78, 205, 196, 0.3);

				&:active {
					transform: scale(0.95);
					box-shadow: 0 2rpx 8rpx rgba(78, 205, 196, 0.4);
				}
			}

			&.coupon-btn-locked {
				background: #E0E0E0;
				color: #999;
				cursor: not-allowed;
			}
		}
	}

	// 限时1分购按钮样式
	.buy-button-container {
		position: absolute;
		left: 427rpx;
		top: 80rpx;
		width: 145rpx;
		height: 52rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.buy-btn {
			width: 100%;
			height: 100%;
			border: none;
			border-radius: 26rpx;
			font-size: 24rpx;
			// font-weight: bold;
			display: flex;
			white-space: nowrap;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;

			&.buy-btn-unlocked-gold {
				background: linear-gradient(135deg, #503404, #6a4505);
				color: #fff;
				box-shadow: 0 2rpx 8rpx rgba(80, 52, 4, 0.3);

				&:active {
					transform: scale(0.95);
					box-shadow: 0 1rpx 6rpx rgba(80, 52, 4, 0.4);
				}
			}
			
			&.buy-btn-unlocked1-gold {
				background: linear-gradient(135deg, #909090, #909090);
				color: #fff;
				box-shadow: 0 2rpx 8rpx rgba(247, 209, 160, 0.3);
			
				&:active {
					transform: scale(0.95);
					box-shadow: 0 1rpx 6rpx rgba(247, 209, 160, 0.4);
				}
			}

			&.buy-btn-unlocked-platinum {
				background: linear-gradient(135deg, #284a6c, #3a5e80);
				color: #fff;
				box-shadow: 0 2rpx 8rpx rgba(40, 74, 108, 0.3);

				&:active {
					transform: scale(0.95);
					box-shadow: 0 1rpx 6rpx rgba(40, 74, 108, 0.4);
				}
			}
			
			&.buy-btn-unlocked1-platinum {
				background: linear-gradient(135deg, #909090, #909090);
				color: #fff;
				box-shadow: 0 2rpx 8rpx rgba(247, 209, 160, 0.3);
			
				&:active {
					transform: scale(0.95);
					box-shadow: 0 1rpx 6rpx rgba(247, 209, 160, 0.4);
				}
			}

			&.buy-btn-unlocked-diamond {
				background: linear-gradient(135deg, #503404, #6a4505);
				color: #fff;
				box-shadow: 0 2rpx 8rpx rgba(80, 52, 4, 0.3);

				&:active {
					transform: scale(0.95);
					box-shadow: 0 1rpx 6rpx rgba(80, 52, 4, 0.4);
				}
			}
			
			&.buy-btn-unlocked1-diamond {
				background: linear-gradient(135deg, #909090, #909090);
				color: #fff;
				box-shadow: 0 2rpx 8rpx rgba(247, 209, 160, 0.3);

				&:active {
					transform: scale(0.95);
					box-shadow: 0 1rpx 6rpx rgba(247, 209, 160, 0.4);
				}
			}

			&.buy-btn-unlocked-starlight {
				background: linear-gradient(135deg, #503404, #6a4505);
				color: #fff;
				box-shadow: 0 2rpx 8rpx rgba(80, 52, 4, 0.3);

				&:active {
					transform: scale(0.95);
					box-shadow: 0 1rpx 6rpx rgba(80, 52, 4, 0.4);
				}
			}

			&.buy-btn-unlocked1-starlight {
				background: linear-gradient(135deg, #909090, #909090);
				color: #fff;
				box-shadow: 0 2rpx 8rpx rgba(247, 209, 160, 0.3);

				&:active {
					transform: scale(0.95);
					box-shadow: 0 1rpx 6rpx rgba(247, 209, 160, 0.4);
				}
			}

			&.buy-btn-unlocked-starshine {
				background: linear-gradient(135deg, #f7d1a0, #f9dca8);
				color: #000;
				box-shadow: 0 2rpx 8rpx rgba(247, 209, 160, 0.3);

				&:active {
					transform: scale(0.95);
					box-shadow: 0 1rpx 6rpx rgba(247, 209, 160, 0.4);
				}
			}

			&.buy-btn-unlocked1-starshine {
				background: linear-gradient(135deg, #909090, #909090);
				color: #fff;
				box-shadow: 0 2rpx 8rpx rgba(247, 209, 160, 0.3);

				&:active {
					transform: scale(0.95);
					box-shadow: 0 1rpx 6rpx rgba(247, 209, 160, 0.4);
				}
			}

			&.buy-btn-purchased-gold {
				background: linear-gradient(135deg, #503404, #6a4505);
				color: #fff;
				box-shadow: 0 2rpx 8rpx rgba(80, 52, 4, 0.3);
				opacity: 0.7;
			}

			&.buy-btn-purchased-platinum {
				background: linear-gradient(135deg, #284a6c, #3a5e80);
				color: #fff;
				box-shadow: 0 2rpx 8rpx rgba(40, 74, 108, 0.3);
				opacity: 0.7;
			}

			&.buy-btn-purchased-diamond {
				background: linear-gradient(135deg, #503404, #6a4505);
				color: #fff;
				box-shadow: 0 2rpx 8rpx rgba(80, 52, 4, 0.3);
				opacity: 0.7;
			}

			&.buy-btn-purchased-starlight {
				background: linear-gradient(135deg, #503404, #6a4505);
				color: #fff;
				box-shadow: 0 2rpx 8rpx rgba(80, 52, 4, 0.3);
				opacity: 0.7;
			}

			&.buy-btn-purchased-starshine {
				background: linear-gradient(135deg, #f7d1a0, #f9dca8);
				color: #000;
				box-shadow: 0 2rpx 8rpx rgba(247, 209, 160, 0.3);
				opacity: 0.7;
			}

			&.buy-btn-locked-gold {
				background: linear-gradient(135deg, #503404, #6a4505);
				color: #fff;
			}

			&.buy-btn-locked-platinum {
				background: linear-gradient(135deg, #284a6c, #3a5e80);
				color: #fff;
			}

			&.buy-btn-locked-diamond {
				background: linear-gradient(135deg, #503404, #6a4505);
				color: #fff;
			}

			&.buy-btn-locked-starlight {
				background: linear-gradient(135deg, #503404, #6a4505);
				color: #fff;
			}

			&.buy-btn-locked-starshine {
				background: linear-gradient(135deg, #f7d1a0, #f9dca8);
				color: #000;
			}

			&.buy-btn-upgrade-gold {
				background: linear-gradient(135deg, #f5ece1, #f5ece1);
				color: #99662e;
			}

			&.buy-btn-upgrade-platinum {
				background: linear-gradient(135deg, #e1ecf5, #e1ecf5);
				color: #284a6c;
			}

			&.buy-btn-upgrade-diamond {
				background: linear-gradient(135deg, #f5ece1, #f5ece1);
				color: #503404;
			}

			&.buy-btn-upgrade-starlight {
				background: linear-gradient(135deg, #f5ece1, #f5ece1);
				color: #503404;
			}

			&.buy-btn-upgrade-starshine {
				background: linear-gradient(135deg, #f5ece1, #f5ece1);
				color: #241b15;
			}
		}
	}

	// 时间段样式
	.diamond1buycomtime1,
	.diamond1buycomtime2,
	.diamond1buycomtime3,
	.diamond1buycomtime4 {
		transition: all 0.3s ease;


		.diamond1buycomtime1text {
			width: 69rpx;
			height: 22rpx;
			left: 0rpx;
			top: 0rpx;
			position: absolute;
		}

		.diamond1buycomtime1status {
			width: 49rpx;
			height: 16rpx;
			left: 10rpx;
			top: 30rpx;
			position: absolute;
		}

		.diamond1buycomtime2text {
			width: 69rpx;
			height: 22rpx;
			left: 0rpx;
			top: 0rpx;
			position: absolute;
		}

		.diamond1buycomtime2status {
			width: 49rpx;
			height: 16rpx;
			left: 10rpx;
			top: 30rpx;
			position: absolute;
		}

		.diamond1buycomtime3text {
			width: 69rpx;
			height: 22rpx;
			left: 0rpx;
			top: 0rpx;
			position: absolute;
		}

		.diamond1buycomtime3status {
			width: 49rpx;
			height: 16rpx;
			left: 10rpx;
			top: 30rpx;
			position: absolute;
		}

		.diamond1buycomtime4text {
			width: 69rpx;
			height: 22rpx;
			left: 0rpx;
			top: 0rpx;
			position: absolute;
		}

		.diamond1buycomtime4status {
			width: 49rpx;
			height: 16rpx;
			left: 10rpx;
			top: 30rpx;
			position: absolute;
		}
	}

	/* 精选好券按钮样式 */
	.coupon-btn {
		width: 160rpx;
		height: 60rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		outline: none;
		padding: 0;
		margin: 0;
		line-height: 1;
	}

	.coupon-btn-locked {
		background: linear-gradient(to right, #b0b0b0, #d0d0d0);
		color: #ffffff;
	}

	.coupon-btn-purchased {
		background: linear-gradient(to right, #b0b0b0, #d0d0d0);
		color: #ffffff;
	}

	.coupon-btn-purchased-gold {
		background: linear-gradient(to right, #906632, #ab7a44);
		color: #ffffff;
	}

	.coupon-btn-purchased-platinum {
		background: linear-gradient(to right, #5189c0, #6fa2d5);
		color: #ffffff;
	}

	.coupon-btn-purchased-diamond {
		background: linear-gradient(to right, #7253a5, #997acc);
		color: #ffffff;
	}

	.coupon-btn-purchased-starlight {
		background: linear-gradient(to right, #cda36b, #e0b97d);
		color: #ffffff;
	}

	.coupon-btn-purchased-starshine {
		background: linear-gradient(to right, #000000, #2c1600);
		color: #ffffff;
	}

	.coupon-btn-unlocked-gold {
		background: linear-gradient(to right, #906632, #ab7a44);
		color: #ffffff;
	}

	.coupon-btn-unlocked-platinum {
		background: linear-gradient(to right, #5189c0, #6fa2d5);
		color: #ffffff;
	}

	.coupon-btn-unlocked-diamond {
		background: linear-gradient(to right, #7253a5, #997acc);
		color: #ffffff;
	}

	.coupon-btn-unlocked-starlight {
		background: linear-gradient(to right, #cda36b, #e0b97d);
		color: #ffffff;
	}

	.coupon-btn-unlocked-starshine {
		background: linear-gradient(to right, #000000, #2c1600);
		color: #ffffff;
	}
</style>