<template>
	<view class="page-container">
		<uni-icons class="back" type="left" size="20" @click="open" color="#fff"></uni-icons>
		<view v-if="data.swiperlist.length==0">
			<image :src="data.banner" style="width: 100%;height: 244px;"></image>
		</view>
		<swiper v-else class="swiper" circular style="width: 100%;height: 244px;" autoplay>
			<swiper-item style="width: 100%;height: 244px;" v-for="(item,index) in data.swiperlist" :key="index">
				<image :src="item" style="width: 100%;height: 244px;"></image>
			</swiper-item>
		</swiper>
		<exchange v-if="data.tradeCoupon" />
		<!-- <view style="margin-top:-90px;position: relative;">
			<customTab :isHuise="shouldBeTrue(data.goods)" />
		</view> -->
		<scroll-view class="package-items-box" scroll-x="true" v-if="data.goodsList.length" :show-scrollbar="false">
			<view class="package-items-container">
				<view class="package-item" :class="{ 'active-package-item': selected == (index + 1) }"
					v-for="(item, index) in data.goodsList" @click="onSelect(item, index)" :key="index">
					<view class="top">
						<view class="title">
							{{ item.goods_name }}
						</view>
						<text class="del-text">￥{{ item.origin_price }}</text>
					</view>
					<view class="price-box wx-font-regular">
						<text>￥</text><text class="price">{{ item.price }}</text>
					</view>
					<view class="shen ">
						{{ item.tips2 || `立省￥${(Number(item.origin_price) - Number(item.price)).toFixed(0)}` }}
					</view>
					<view class="active-package-item-tips" v-show="item.tips && selected == (index + 1)">
						{{ item.tips }}
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="vipContent" style="position: relative;">
			<view class="top">
				<image src="/static/image/recharge/vipContentTopBgImg.png" mode="widthFix"></image>
			</view>
			<view class="vipList">
				<template v-for="(item, index) in data.benefitList" :key="index">
					<view class="item" v-if="data.goods.features == 'common' || (data.goods.features != 'common' && index < 10)">
						<image :src="item.url"></image>
						<text>{{ item.name }}</text>
					</view>
				</template>

			</view>
		</view>

		<view class="myCouponList" @click="data.myActivity.length > 0 ? myCoupon.open() : ''">
			<view class="left">
				<image src="/static/image/recharge/couponMin.png" mode=""></image>
				<view class="title">{{ data.active_id == 0 ? '优惠券' : (data.activeCoupon.coupon_type_name + '已减') }}
				</view>
				<view class="money" v-if="data.active_id != 0">
					￥{{ $toFiexd(data.activeCoupon.coupon_type_name != '折扣券' ? (Number(data.activeCoupon.coupon_value) /
						100) : ((1 - Number(data.activeCoupon.coupon_value)) * data.goods.price), 2) }}
				</view>
			</view>
			<view class="right" v-if="data.active_id == 0">
				<text style="color: red;">{{ data.myActivity.length == 0 ? '暂无优惠券' : ('待使用' + data.myActivity.length +
					'张') }}</text>
				<uni-icons type="forward" color="#AEAEAE" class="forward"></uni-icons>
			</view>
			<view class="right " v-else>
				<view class="timeBox" v-if="data.countdown && data.active_id > 0">
					<view class="titles">距离优惠结束</view>
					<uni-countdown :font-size="12" :day="data.activeCoupon.days" :hour="data.activeCoupon.hours"
						:minute="data.activeCoupon.minutes" :second="data.activeCoupon.seconds" color="#FFFFFF"
						background-color="#2A2617" />
				</view>
				<uni-icons type="forward" color="#AEAEAE" class="forward"
					:class="{ forward2: data.active_id != 0 }"></uni-icons>
			</view>
		</view>
		<view class="question" :class="{ 'iosQuestion': $system == 'iOS' }">
			<view class="titles">
				常见问题
			</view>
			<view class="titleBox">
				<image src="/static/image/recharge/question1.png"></image>
				<view class="text">开通会员享受哪些权益</view>
			</view>
			<view class="titleBox">
				<image src="/static/image/recharge/question2.png"></image>
				<view class="text text1">会员用户享受无水印,无广告及专属客服等权益,正在开发中的100多个功能点免费更新,另外会员用户功能需求可定制。</view>
			</view>
			<view class="titleBox">
				<image src="/static/image/recharge/question1.png"></image>
				<view class="text">苹果安卓会员是否互通</view>
			</view>
			<view class="titleBox">
				<image src="/static/image/recharge/question2.png"></image>
				<view class="text text1">苹果、安卓以及鸿蒙系统会员是互通的,登录同一个账号,其他平台也可以使用,没有设备数量限制。</view>
			</view>
			<view class="titleBox">
				<image src="/static/image/recharge/question1.png"></image>
				<view class="text">会员时长如何计算</view>
			</view>
			<view class="titleBox">
				<image src="/static/image/recharge/question2.png"></image>
				<view class="text text1">月会员31天,年会员365天,终身会员永久使用不过期。</view>
			</view>
			<view class="titleBox">
				<image src="/static/image/recharge/question1.png"></image>
				<view class="text">是否会自动扣费</view>
			</view>
			<view class="titleBox">
				<image src="/static/image/recharge/question2.png"></image>
				<view class="text text1">我们不会自动扣费,会员到期后需要您手动续费。</view>
			</view>
		</view>
		<view class="" :style="{'height':$store.state.safeBottomAz+'px'}">
			
		</view>
	</view>

	<view class="footer-container">
		<view class="payment-method-box">
			<view class="wx-pay payment-method" v-for="(item, index) in data.payList" @click="onSelectPayment(item.type)"
				:key="index">
				<image class="img-select"
					:src="paymentMethod == item.type ? '/static/image/recharge/selected.png' : '/static/image/recharge/unselected.png'">
				</image>
				<image class="logo" :src="item.image" mode="aspectFit"></image>
				<text class="name">{{ item.name }}</text>
			</view>
		</view>
		<view class="buttonBoxs " :class="{ 'christmas': data.isChristmas }" :style="{'margin-bottom':$store.state.safeBottomAz+'px'}">
			<view class="hongbao" v-if="data.ishongBao">
				<c-lottie ref="cLottieRef" :loop="false" src='/static/lottie/hongbao.json' width="100vw"
					height='216vw'></c-lottie>
			</view>
			<view class="button-box " :class="{ 'white-flow': data.active_id > 0 }">
				<view class="text">
					合计
					<text>￥</text>
					<countUp :num="$toFiexd(data.price, 2)" height="24" style="margin-top: -6px;" color="red" fontSize='24'>
					</countUp>
					已优惠￥{{ $toFiexd(data.coupon, 0) }}
				</view>
				<view class="button" @click="activateVip">
					立即开通
				</view>
			</view>
		</view>
		<view class="footerBottom"></view>
	</view>

	<uni-popup ref="coupon" type="center" mask-background-color="rgb(0 0 0 / 70%)" :is-mask-click="false"
		:mask-click="false">
		<view>
			<view class="coupon" v-if="data.coupon">
				<c-lottie ref="cLottieRef" src='/static/lottie/coupon.json' width="100vw" height='462px' :loop="false"
					@Complete="Complete"></c-lottie>
			</view>
			<transition name="scale">
				<view v-if="!data.coupon" class="animated-box">
					<view class="couponBox"
						:style="{ height: data.activity.length == 1 ? '266px' : (data.activity.length == 2 ? '358px' : '450px') }">

						<image class="shadowBg" src="/static/image/recharge/shadowBg.png" mode=""></image>
						<view class="header">

						</view>
						<view class="couponConten"
							:style="{ height: data.activity.length == 1 ? '76px' : (data.activity.length == 2 ? '168px' : '260px') }">

						</view>
						<c-lottie ref="cLottieRef" class="couponTop" src='/static/lottie/couponTop.json' width="100vw"
							height='390px'></c-lottie>
						<image class="colse" src="/static/image/watermarkColse.png" mode="" @click="coupon.close()">
						</image>
						<scroll-view class="listCoupon" scroll-y="true"
							:style="{ height: data.activity.length == 1 ? '92px' : (data.activity.length == 2 ? '184px' : '276px') }">
							<view class="item" v-for="(item, index) in data.activity" :key="index">
								<view class="left">
									<text class="danwei">{{ item.activity_type_name == '折扣券' ? '' : '￥' }}</text>
									<text class="AlibabaPuHuiTiBold">{{ item.activity_type_name == '折扣券' ?
										((Number(item.activity_value) * 10) + '折') : item.activity_value }}</text>
								</view>
								<view class="right">
									{{ item.activity_type_name }}
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="couponButton" @click="submitActivity">
						<c-lottie ref="cLottieRef" src='/static/lottie/couponButton.json' width="305px" height='86px'></c-lottie>
					</view>
				</view>
			</transition>
		</view>
	</uni-popup>
	<view class="popup">
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" mask-background-color="rgb(0 0 0 / 70%)">
			<view class="dialog-container">
				<view class="top">
					<view>亲~您还有福利</view>
					<view>真的要放弃优惠吗？</view>
				</view>
				<view class="content">
					<div class="title-box">
						<image class="decorative-line" src="/static/image/recharge/dialogTitleLeft.png" mode=""></image>
						<text class="title">您可享以下权益</text>
						<image class="decorative-line" src="/static/image/recharge/dialogTitleRight.png" mode="">
						</image>
					</div>
					<view class="vip-benefits">
						<view class="benefit-item" v-for="(benefit, index) in dialogVipBenefits" :key="index">
							<image class="img" :src="benefit.url" mode=""></image>
							<view class="name">
								{{ benefit.name }}
							</view>
						</view>
					</view>
					<view class="timeDJS" v-if="data.active_id">
						<view class="titles">距离优惠结束</view>
						<uni-countdown :font-size="14" :day="data.activeCoupon2.days" :hour="data.activeCoupon2.hours"
							:minute="data.activeCoupon2.minutes" :second="data.activeCoupon2.seconds" color="#FFFFFF"
							background-color="#2A2617" />
					</view>
					<view class="button-box">
						<view class="button" @click="activateVip('back')">
							开通会员
						</view>
						<text class="leave" @click="back">去意已决</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
	<uni-popup ref="myCoupon" type="bottom" :safeArea="false" border-radius="10px 10px 0 0"
		mask-background-color="rgb(0,0,0,0.8)">
		<view class="myCouponContainer" :style="{ height: proxy.$system == 'iOS' ? '400px' : '370px' }">
			<scroll-view scroll-y="true" class="myCouponBox">
				<view>
					<view class="item" v-for="(item, index) in data.myActivity" :key="index"
						@click="(data.goods.price < (Number(item.threshold) / 100) && item.threshold != '') || !item.isStatus ? '' : setActiveId(item)">
						<view class="left" :class="{ left2: data.goods.price < (Number(item.threshold) / 100) || !item.isStatus }">
							<view class="money">
								<text v-if="item.coupon_type_name != '折扣券'">￥</text>
								<text class="moneys">{{ item.coupon_type_name != '折扣券' ? (Number(item.coupon_value) /
									100) : ((Number(item.coupon_value) * 10) + '折') }}</text>
							</view>
							<view class="dec">
								{{ item.threshold != '' ? ('满' + (Number(item.threshold) / 100) + '可用') : '无门槛' }}
							</view>
						</view>
						<view class="right">
							<view class="titlebox">
								<view class="title">{{ item.coupon_name }}</view>
								<view class="dec">有效期至{{ item.expire_time }}</view>
							</view>
							<image
								v-if="(data.goods.price < (Number(item.threshold) / 100) && item.threshold != '') || !item.isStatus"
								class="checkedImg" src="/static/image/recharge/checked1.png" mode=""></image>
							<image v-else-if="data.active_ids == item.id" class="checkedImg" src="/static/image/recharge/checked3.png"
								mode=""></image>
							<image v-else class="checkedImg" src="/static/image/recharge/checked2.png" mode=""></image>
						</view>
						<view class="jjdq" v-if="isToday(item.expire_times)">
							即将到期
						</view>
						<view class="ygq" v-if="!item.isStatus">
							已过期
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="btn" @click="activeClick(true)">
				确定
			</view>
			<image @click="activeClick(false)" class="myCouponContainerClose"
				src="/static/image/recharge/myCouponContainerClose.png" mode=""></image>
		</view>
	</uni-popup>
</template>


<script setup>
	import customTab from "@/components/custom-tab/custom-tab.vue"
	import countUp from "@/components/countUp/countUp.vue"
	import {
		postJson
	} from "@/utils/requests.js"
	import {
		ref,
		reactive,
		getCurrentInstance,
		watch,
		nextTick,
		toRefs
	} from "vue";
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
		onBackPress,
		onUnload
	} from "@dcloudio/uni-app";
	const {
		appContext,
		proxy
	} = getCurrentInstance();
	const popup = ref();
	const coupon = ref();
	const couponBox = ref();
	const myCoupon = ref();
	const dialogVipBenefits = [{
			name: "模拟微信",
			url: "/static/image/recharge/moniweixinDialog.png"
		},
		{
			name: "无广告",
			url: "/static/image/recharge/wuguanggaoDialog.png"
		},
		{
			name: "无水印",
			url: "/static/image/recharge/wushuiyinDialog.png"
		},
		{
			name: "专属客服",
			url: "/static/image/recharge/zhuanshukefuDialog.png"
		}
	]

	// 套餐列表
	const packageList = [{
			name: "连续包月",
			delPrice: "89",
			price: "29",
			lifespan: "一月"
		},
		{
			name: "连续包季",
			delPrice: "189",
			price: "98",
			lifespan: "一季"
		},
		{
			name: "连续包年",
			delPrice: "365",
			price: "198",
			lifespan: "一年"
		}
	]

	const data = reactive({
		swiperlist:[],
		scrollLeft: 0,
		active_id: 0,
		active_ids: 0,
		activeitems: {},
		currentUrl: '',
		background: ['color1', 'color2', 'color3'],
		indicatorDots: false,
		autoplay: false,
		interval: 5000,
		duration: 500,
		// 底部按钮文字
		buttonText: '',
		// 套餐选择
		selected: 1,
		// 支付方式选择
		paymentMethod: "wxpay",
		// banner列表
		bannerList: [{
			url: "/static/image/recharge/banner1.png"
		}],
		// 会员权益列表
		benefitList: [{
				name: "无广告",
				url: "/static/image/recharge/icon1.png"
			},
			{
				name: "无水印",
				url: "/static/image/recharge/icon2.png"
			},
			{
				name: "微信模拟",
				url: "/static/image/recharge/icon3.png"
			},
			{
				name: "小宝模拟",
				url: "/static/image/recharge/icon4.png"
			},
			{
				name: "豪车模拟",
				url: "/static/image/recharge/icon5.png"
			},
			{
				name: "模拟来电",
				url: "/static/image/recharge/icon6.png"
			},
			{
				name: "视频群聊",
				url: "/static/image/recharge/icon7.png"
			},
			{
				name: "工资单",
				url: "/static/image/recharge/icon8.png"
			},
			{
				name: "身份证",
				url: "/static/image/recharge/icon9.png"
			},
			{
				name: "发圈素材",
				url: "/static/image/recharge/icon10.png"
			},
			{
				name: "机票",
				url: "/static/image/recharge/icon11.png"
			},
			{
				name: "高铁票",
				url: "/static/image/recharge/icon12.png"
			},
			{
				name: "短信模拟",
				url: "/static/image/recharge/icon13.png"
			},
			{
				name: "通话模拟",
				url: "/static/image/recharge/icon14.png"
			},
			{
				name: "多设备",
				url: "/static/image/recharge/icon15.png"
			}
		],
		goodsList: [],
		myActivity: [],
		activeCoupon: {},
		activeCoupon2: {},
		uni_recharge_back: [],
		goods: {},
		activity: [],
		appUser: {},
		countdown: true,
		isBack: true,
		payList: [{
				image: '/static/image/recharge/wxpay.png',
				name: '微信支付',
				type: 'wxpay'
			},
			{
				image: '/static/image/recharge/alipay.png',
				name: '支付宝支付',
				type: 'alipay',
			}
		],
		open_number: 1,
		back_number: 1,
		price: 0,
		coupon: 0,
		ishongBao: false,
		incrementTimer: null,
		timeout: null,
		isChristmas: false,
		// 添加一个标志位来防止快速连续点击导致的价格显示错误
		isProcessingClick: false,
		banner: '/static/image/recharge/banner1.png',
		isCombo: false,
		source: "uni_alipay_other",
		tradeCoupon: false
	})

	let {
		buttonText,
		selected,
		benefitList,
		noticeList,
		commentList,
		paymentMethod,
		source
	} = toRefs(data)

	/**
	 * 返回监听
	 */
	onBackPress((e) => {
		if (e.from == 'backbutton' && data.appUser.vip == 1) {
			open()
			return true; //阻止返回
		}
	})


	onLoad(async (option) => {
		if (option.source) {
			data.source = option.source
		}
		const config = uni.getStorageSync('config').config
		const themeConfig = config?.['client.uniapp.theme.payment']
		try {
			data.tradeCoupon = config?.['client.trade_coupon'] === true ? true : false
		} catch (error) {
			//TODO handle the exception
		}
		if (themeConfig?.enable) {
			data.swiperlist = themeConfig.banners || []
			data.benefitList = themeConfig.icons.map(item => {
				return {
					url: item.icon,
					name: item.text
				}
			})
		}
		let pages = getCurrentPages();
		let currentPage = pages[pages.length - 1];
		data.currentUrl = proxy.$pageData[currentPage.route];
		uni.showLoading({
			title: '加载中',
			mask: true // 添加遮罩防止用户操作
		});
		let user = await proxy.$requestPromise({
			url: 'api/user',
			method: "GET",
			data: {}
		})
		if (user.code == 0) {
			data.appUser = user.data
		}
		let goods = await proxy.$requestPromise({
			url: 'api/order/goods',
			method: "GET",
			data: {
				type: "member"
			}
		})
		console.log(goods)
		if (goods.code == 0) {
			data.goodsList.forEach(item => {
				item['features'] = item['features'] || ''
			})
			data.goodsList = goods.data

			let zsItem = goods.data[0]
			let zsIndex = 0
			let checked = true
			goods.data.forEach((item, index) => {
				if (item.checked && checked) {
					checked = false
					zsItem = item
					zsIndex = index
				}
			})
			nextTick(() => {
				setTimeout(() => {
					data.scrollLeft = zsIndex * 120
				}, 100)
			})
			let activity = await proxy.$requestPromise({
				url: 'api/activity/coupon',
				method: "GET",
				data: {
					page: 1,
					size: 50,
					status: 1
				}
			})
			if (activity.data.total != 0) {
				activity.data.items.forEach(item => {
					if (new Date(item.expire_time) < new Date()) {
						item['isStatus'] = false
					} else {
						item['isStatus'] = true
					}
					item['expire_times'] = item.expire_time
					item.expire_time = item.expire_time.replace('-', '.').replace('-', '.').substring(
						0, 10)
				})
				data.myActivity = [
					...activity.data.items.filter(item => (item.threshold == '' || zsItem.price >= (Number(
						item
						.threshold) / 100)) && item.isStatus),
					...activity.data.items.filter(item => (zsItem.price < (Number(item.threshold) / 100) &&
						item
						.threshold != '') || !item.isStatus)
				]
				data.myActivity = deduplicateKeepLast(data.myActivity)
			}
			await onSelect(zsItem, zsIndex)
		}
		let activity = await proxy.$requestPromise({
			url: 'api/activity',
			method: "GET",
			data: {
				scene: 'uni_open_recharge'
			}
		})
		data.activity = activity.data
		if (activity.data.length != 0) {
			coupon.value.open()
		}
		uni.setStorageSync('open_number', data.open_number + 1);
		let uni_recharge_back = await proxy.$requestPromise({
			url: 'api/activity',
			method: "GET",
			data: {
				scene: 'uni_recharge_back'
			}
		})
		data.uni_recharge_back = uni_recharge_back.data
		if (uni_recharge_back.data.length == 0) {
			data.isBack = false
		}
		uni.hideLoading();
		if (uni.getStorageSync('onNativeEventReceive') != 'ok') {
			uni.setStorageSync('onNativeEventReceive', 'ok')
			//监听宿主传递消息
			uni.onNativeEventReceive((event, data) => {
				if (event) {
					if (event == "wx_pay_result") {
						if (Number(data) == 0) {
							paymentResult(uni.getStorageSync('orderId'), paymentMethod.value)
						} else {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: '支付失败'
							})
						}
					}
					if (event == "ios_pay_result") {
						if (Number(data) == 0) {
							paymentResult(uni.getStorageSync('orderId'), paymentMethod.value)
						} else {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: '支付失败'
							})
						}
					}
					console.log('接收到宿主App消息-' + event + '：' + data);
				}
			})
		}

	})

	onShow(() => {
		if (data.isCombo) {
			uni.showModal({
				title: '提示',
				content: '是否支付成功？',
				cancelText: '未支付',
				confirmText: "已支付",
				success: function(res) {
					if (res.confirm) {
						console.log('用户点击确定');
						paymentResult(uni.getStorageSync('orderId'), paymentMethod.value)
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
			data.isCombo = false
		}
	})
	onUnload(() => {
		// uni.offNativeEventReceive()
	})
	onReady(() => {
		// #ifdef APP-PLUS&&!APP-HARMONY
		try {
			if (plus.os.name === 'Android') {
				let color = plus.android.newObject("android.graphics.Color");
				let activity = plus.android.runtimeMainActivity();
				let colorInt = plus.android.invoke(color, "parseColor", '#fff'); // 设置为橙色    
				let window = plus.android.invoke(activity, "getWindow");
				plus.android.invoke(window, "setNavigationBarColor", colorInt);
				uni.setNavigationBarColor({
					animation: { // 动画效果
						duration: 100,
						timingFunc: 'easeIn'
					}
				})
				console.log("状态栏设置完毕！");
				setTimeout(function() {
					uni.setNavigationBarColor({
						backgroundColor: '#fff',
						animation: { // 动画效果
							duration: 100,
							timingFunc: 'easeIn'
						}
					})
				}, 200);
				setTimeout(function() {
					plus.navigator.setStatusBarStyle("light");
				}, 200);
			}
		} catch (error) {
			//TODO handle the exception
		}
		// #endif
	})



	function isToday(inputTime) {
		// 获取当前日期的时间戳（去掉时分秒）
		const today = new Date();
		today.setHours(0, 0, 0, 0);
		const todayTimestamp = today.getTime();

		// 处理输入时间
		const inputDate = new Date(inputTime);
		inputDate.setHours(0, 0, 0, 0);
		const inputTimestamp = inputDate.getTime();

		// 比较时间戳
		return inputTimestamp === todayTimestamp;
	}

	function calculateTimeRemaining(targetTime) {
		// 获取目标时间和当前时间的时间戳
		const target = new Date(targetTime).getTime();
		const now = new Date().getTime();
		// 计算时间差（毫秒）
		const difference = target - now;
		// 如果目标时间已过，返回0
		if (difference <= 0) {
			return {
				days: 0,
				hours: 0,
				minutes: 0,
				seconds: 0
			};
		}
		// 计算天数
		const days = Math.floor(difference / (1000 * 60 * 60 * 24));
		// 计算剩余小时数
		const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		// 计算剩余分钟数
		const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
		// 计算剩余秒数
		const seconds = Math.floor((difference % (1000 * 60)) / 1000);
		console.log({
			days: days,
			hours: hours,
			minutes: minutes,
			seconds: seconds
		})
		return {
			days: days,
			hours: hours,
			minutes: minutes,
			seconds: seconds
		};
	}

	function activeClick(status) {
		myCoupon.value.close()
		if (status && data.active_ids > 0) {
			let item = data.activeitems
			data.activeCoupon = {
				...item,
				...calculateTimeRemaining(item.expire_times)
			}
			data.countdown = false
			setTimeout(() => {
				data.countdown = true
			}, 100);
			data.active_id = item.id
			setTimeout(() => {
				setPrice(true)
			}, 1000);
		}
	}

	function setActiveId(item) {
		data.active_ids = item.id
		data.activeitems = item
	}

	function setPrice(status) {
		console.log("setPrice")
		if (data.incrementTimer) {
			clearInterval(data.incrementTimer);
			data.incrementTimer = null
		}
		if (data.timeout) {
			clearInterval(data.timeout);
			data.timeout = null
		}
		let oldPrice = Number(data.goods.origin_price)
		data.price = Number(data.goods.origin_price)
		console.log("开始", data.price)
		let price = 0
		let origin_price = 0
		let coupon = 0
		if (data.active_id == 0) {
			price = Number(data.goods.price)
			origin_price = Number(data.goods.origin_price)
			coupon = origin_price - price
		} else {
			price = data.goods.price - (data.activeCoupon.coupon_type_name != '折扣券' ? (Number(data.activeCoupon
					.coupon_value) /
				100) : ((1 - Number(data.activeCoupon.coupon_value)) * data.goods.price))
			coupon = (Number(data.goods.origin_price) - Number(data.goods.price)) + (Number(data.goods.price) - (data.goods
				.price - (data.activeCoupon.coupon_type_name != '折扣券' ? (Number(data.activeCoupon.coupon_value) /
					100) : ((
					1 - Number(data.activeCoupon.coupon_value)) * data.goods.price))))
		}
		data.coupon = proxy.$toFiexd(coupon, 0)
		if (status) {
			if (data.active_id) {
				data.ishongBao = true
				data.timeout = setTimeout(() => {
					data.ishongBao = false
				}, 1500);
			}
			data.price = proxy.$toFiexd(price, 2)
			if (false) {
				// 修复关键点：计算合理的间隔时间
				const priceDiff = Math.abs(oldPrice - price);
				// 确保间隔在合理范围内（16ms-100ms）
				let interval = 1000 / priceDiff;
				if (interval < 16) interval = 16; // 不低于16ms
				if (interval > 100) interval = 100; // 不高于100ms
				if (!isFinite(interval)) interval = 16; // 处理除零
				console.log(`间隔: ${interval}ms`);
				data.incrementTimer = setInterval(() => {
					if (oldPrice > price) {
						if (Number(data.price) > price) {
							if ((oldPrice - price) > 500) {
								data.price -= 4
							} else {
								data.price -= 1
							}
						} else {
							data.isProcessingClick = false
							data.price = proxy.$toFiexd(price, 2)
							clearInterval(data.incrementTimer);
							data.incrementTimer = null
						}
					} else {
						if (Number(data.price) < price) {
							data.price = Number(data.price) + 1
						} else {
							data.isProcessingClick = false
							data.price = proxy.$toFiexd(price, 2)
							clearInterval(data.incrementTimer);
							data.incrementTimer = null
						}
					}
					console.log(data.price)
				}, interval)
			}

		} else {
			data.isProcessingClick = false
			data.price = proxy.$toFiexd(price, 2)
		}
		console.log("最后", data.price)


	}
	/* 获取我的优惠券 */
	async function getActivity() {
		let activity = await proxy.$requestPromise({
			url: 'api/activity/coupon',
			method: "GET",
			data: {
				page: 1,
				size: 50,
				status: 1
			}
		})
		if (activity.data.total != 0) {
			activity.data.items.forEach(item => {
				if (new Date(item.expire_time) < new Date()) {
					item['isStatus'] = false
				} else {
					item['isStatus'] = true
				}
			})
			activity.data.items.forEach(item => {
				item['expire_times'] = item.expire_time
				item.expire_time = item.expire_time.replace('-', '.').replace('-', '.').substring(0, 10)
			})
			data.myActivity = [
				...activity.data.items.filter(item => (item.threshold == '' || data.goods.price >= (Number(item
						.threshold) /
					100) && item.isStatus)),
				...activity.data.items.filter(item => (data.goods.price < (Number(item.threshold) / 100) && item
					.threshold !=
					'') || !item.isStatus)
			]
			data.myActivity = deduplicateKeepLast(data.myActivity)
		}
	}

	function deduplicateKeepLast(arr, idKey = 'id') {
		const map = new Map();

		arr.forEach(item => {
			const id = item[idKey];
			map.set(id, item); // 总是设置最新的值
		});

		return Array.from(map.values());
	}

	/* 领取优惠券 */
	async function submitActivity() {
		console.log("activity_id");
		let activity_id = ''
		data.activity.forEach(item => {
			activity_id += ',' + item.id
		})
		activity_id = activity_id.replace(',', '')
		if (activity_id != "") {
			console.log("activity_id", activity_id);
			let activityRes = await postJson('', 'api/activity', {
				activity_id: activity_id //activity_id+"="
			})
			console.log(activityRes)
			if (activityRes.code == 0) {
				coupon.value.close()
				uni.showToast({
					icon: 'none',
					title: '领取成功'
				})
				getActivity()
			} else {
				coupon.value.close()
				uni.showToast({
					icon: 'none',
					title: '领取失败'
				})
			}
		} else {
			coupon.value.close()
			uni.showToast({
				icon: 'none',
				title: '领取失败'
			})
		}

	}
	/**
	 * @param {Object} item
	 * @param {Object} index
	 * 选择购买套餐
	 */


	/* 
	防抖
	*/
	const debouncedOnSelect = debounce((items, index) => {
		onSelect(items, index);
	}, 200, false);

	function debounce(func, wait, immediate = true) {
		let timeout;
		return function(...args) {
			const later = () => {
				timeout = null;
				if (!immediate) func(...args);
			};

			const callNow = immediate && !timeout;
			clearTimeout(timeout);
			timeout = setTimeout(later, wait);

			if (callNow) func(...args);
		};
	}
	async function onSelect(items, index) {
		data.active_id = 0
		data.activeCoupon = {}
		data.active_ids = 0
		data.countdown = false
		data.goods = items
		console.log("选中商品", data.goods)
		let id = 0
		if (data.myActivity.length > 0) {
			let defaultCoupon = data.myActivity.filter(item => item.activity_id == data.goods.default_activity)
			if (defaultCoupon.length > 0) {
				defaultCoupon.forEach(item => {
					if ((data.goods.price >= (Number(item.threshold) / 100) || item.threshold == '') && item
						.isStatus) {
						item['price2'] = data.goods.price - (item.coupon_type_name != '折扣券' ? (Number(item
								.coupon_value) /
							100) : ((1 - Number(item.coupon_value)) * data.goods.price))
					} else {
						item['price2'] = 10000000
					}
				})
				let maxItem = defaultCoupon.reduce((min, curr) => curr.price2 < min.price2 ? curr : min)
				console.log("默认", maxItem)
				if (maxItem.price2 != 10000000) {
					id = maxItem.id
					data.activeitems = maxItem
					data.activeCoupon = {
						...maxItem,
						...calculateTimeRemaining(maxItem.expire_times)
					}

					console.log("data.activeCoupon", data.activeCoupon)
				}
			}
			if (id == 0 && data.goods.default_activity != '') {
				try {
					data.myActivity.forEach(item => {
						if ((data.goods.price >= (Number(item.threshold) / 100) || item.threshold == '') &&
							item.isStatus) {
							item['price2'] = data.goods.price - (item.coupon_type_name != '折扣券' ? (Number(item
									.coupon_value) /
								100) : ((1 - Number(item.coupon_value)) * data.goods.price))
						} else {
							item['price2'] = 10000000
						}
					})
					let maxItem = data.myActivity.reduce((min, curr) => curr.price2 < min.price2 ? curr : min)
					console.log("其他", maxItem)
					if (maxItem.price2 != 10000000) {
						id = maxItem.id
						data.activeitems = maxItem
						data.activeCoupon = {
							...maxItem,
							...calculateTimeRemaining(maxItem.expire_times)
						}
					}
				} catch (error) {
					console.log(error)
					//TODO handle the exception
				}
			}
		}
		console.log(data.activeitems)
		console.log(data.active_id)
		data.active_id = id
		data.active_ids = id
		selected.value = index + 1
		buttonText.value = `${items.price}元享受${items.goods_name}`
		if (items.pay_type != '') {
			let list = items.pay_type.split(',').filter(cell => cell == 'alipay' || cell == 'weixin')
			if (list.length != 0) {
				let listData = list.map(cell => {
					return {
						image: cell == 'weixin' ? '/static/image/recharge/wxpay.png' : '/static/image/recharge/alipay.png',
						name: cell == 'weixin' ? '微信支付' : '支付宝支付',
						type: cell == 'weixin' ? 'wxpay' : 'alipay'
					}
				})
				data.payList = listData
			} else {
				data.payList = [{
						image: '/static/image/recharge/wxpay.png',
						name: '微信支付',
						type: 'wxpay'
					},
					{
						image: '/static/image/recharge/alipay.png',
						name: '支付宝支付',
						type: 'alipay',
					}
				]
			}
		} else {
			data.payList = [{
					image: '/static/image/recharge/wxpay.png',
					name: '微信支付',
					type: 'wxpay'
				},
				{
					image: '/static/image/recharge/alipay.png',
					name: '支付宝支付',
					type: 'alipay',
				}
			]
		}
		paymentMethod.value = data.payList[0].type
		setTimeout(function() {
			data.countdown = true
		}, 100);
		await setPrice(true)
		await getActivity()

	}
	/**
	 * @param {Object} value
	 * 选择支付方式
	 */
	function onSelectPayment(value) {
		paymentMethod.value = value
	}

	function open() {

		uni.setStorageSync('back_number', data.back_number + 1);
		// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
		if (!data.isBack) {
			proxy.$apiUserEvent('all', {
				type: "event",
				key: "recharge_dialog",
				value: "返回充值页弹窗",
				extra: {
					uni_version: proxy.$version

				}
			}, {
				type: 'recharge_dialog',
				data: {
					uni_version: proxy.$version
				}
			})
			data.activeCoupon2 = calculateTimeRemaining(data.activeCoupon.expire_times)
			console.log("data.activeCoupon2: " + JSON.stringify(data.activeCoupon2));
			popup.value.open('center')
		} else {

			data.isBack = false
			data.activity = data.uni_recharge_back
			data.coupon = false
			coupon.value.open()

		}
	}

	/**
	 * 随机生成通知列表
	 */
	function generateNoticeList() {
		noticeList.value = []
		for (let i = 0; i <= 10; i++) {
			noticeList.value.push({
				user: `用户${generateMaskedPhoneNumber()}`,
				time: generateNaturalTimeAgo(),
				package: getRandomItem()
			})
		}
	}
	/**
	 * 下单拉取支付
	 */
	async function activateVip(type = '') {
		if (type == 'back') {
			proxy.$apiUserEvent('all', {
				type: "click",
				key: "recharge_dialog_pay",
				value: "返回弹窗页开通会员按钮",
				extra: {
					uni_version: proxy.$version
				}
			}, {
				type: 'recharge_dialog_pay',
				data: {
					uni_version: proxy.$version
				}
			})
		}
		uni.showLoading({
			title: '支付中',
			mask: true // 添加遮罩防止用户操作
		});

		uni.setStorageSync("UserEventOrder", {
			"订单金额": data.goods.price + '元',
			"订单名称": data.goods.goods_name,
			"支付方式": paymentMethod.value == "wxpay" ? '微信' : "支付宝",
		})

		let isComBo = uni.getStorageSync('isCombo') == 'ok'
		let paymentRes = await postJson('a', 'api/order', {
			goods_id: data.goods.goods_id,
			coupon: data.active_id ? data.active_id : '',
			pay_type: paymentMethod.value == "wxpay" ? (data.goods.weixinMpOriId && isComBo ? 'combo' :
				'weixin') : "alipay",
			"pay_source": "app",
			// source: "uni_alipay",
			source: data.source,
		})



		if (paymentRes.code == 0) {
			let payData = {}
			if (paymentMethod.value == "wxpay") {

				if (data.goods.weixinMpOriId && isComBo) {
					console.log(paymentRes)
					let SZappData = {
						weixinMpOriId: data.goods.weixinMpOriId,
						outTradeNo: paymentRes.data.outTradeNo
					}
					uni.setStorageSync('orderId', paymentRes.data.orderId)
					uni.sendNativeEvent('start_combo_pay', SZappData, ret => {
						console.log('宿主App回传的数据：' + ret);
					});
					data.isCombo = true
					uni.hideLoading();
					return
				} else {
					payData = {
						"appid": paymentRes.data.appId, // 应用ID
						"noncestr": paymentRes.data.nonceStr, // 随机字符串
						"package": "Sign=WXPay", // 固定值
						"partnerid": paymentRes.data.partnerId, // 商户号
						"prepayid": paymentRes.data.prepayId, // 预支付交易会话ID
						"timestamp": Number(paymentRes.data.timeStamp), // 时间戳（秒！）
						"sign": paymentRes.data.sign // 签名
					}
					uni.setStorageSync('orderId', paymentRes.data.orderId)
					//安卓wx支付开始传递开始
					if (proxy.$system != 'iOS') {
						uni.sendNativeEvent('wx_pay_start_alipay', paymentRes.data.orderId, ret => {
							console.log('宿主App回传的数据：' + ret);
						});
					}
				}
			} else {
				payData = paymentRes.data.payParam
				uni.setStorageSync('orderId', paymentRes.data.orderId)
			}
			// ios 支付由宿主处理 
			if (proxy.$system == 'iOS') {
				setTimeout(() => {
					uni.hideLoading();
				}, 30000);
				uni.sendNativeEvent('paymentResData', JSON.stringify(paymentRes.data), ret => {
					console.log('宿主App回传的数据：' + ret);
				});
				return
			}
			uni.requestPayment({
				provider: paymentMethod.value,
				orderInfo: payData, //支付宝订单数据
				success: function(resss) {
					setTimeout(() => {
						uni.hideLoading();
					}, 30000);
					paymentResult(paymentRes.data.orderId, paymentMethod.value)
				},
				fail: function(err) {
					proxy.$apiUserEvent('all', {
						type: "event",
						key: "pay_fail",
						value: "支付失败",
						extra: {
							from: data.currentUrl,
							"订单号": paymentRes.data.orderId,
							"订单金额": data.goods.price + '元',
							"订单名称": data.goods.goods_name,
							"支付方式": paymentMethod.value == "wxpay" ? '微信' : "支付宝",
							"原因": JSON.stringify(err),
						}
					}, {
						type: 'pay_fail',
						data: {
							from: data.currentUrl,
							"订单号": paymentRes.data.orderId,
							"订单金额": data.goods.price + '元',
							"订单名称": data.goods.goods_name,
							"支付方式": paymentMethod.value == "wxpay" ? '微信' : "支付宝",
							"原因": JSON.stringify(err),
						}
					})
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '支付失败'
					})
				}
			});
		} else {
			uni.hideLoading();
			uni.showToast({
				icon: 'none',
				title: '支付失败'
			})
		}
		setTimeout(() => {
			uni.hideLoading();
		}, 10000);
	}


	// 支付状态轮询函数
	async function paymentResult(orderId, paytype) {
		uni.hideLoading();
		uni.showLoading({
			title: '会员发放排队中，正在实时向服务器索要，请耐心等待。',
			mask: true
		});

		let attempts = 0;
		const maxAttempts = 10;
		const pollInterval = 1000;

		const poll = async () => {
			try {
				let orderInfo = await proxy.$requestPromise({
					url: 'api/order',
					method: "GET",
					data: {
						order_id: orderId
					}
				});

				console.log("订单状态：", orderInfo);

				if (orderInfo.code == 0 && orderInfo.data.status == 2) {
					// 支付成功
					uni.sendNativeEvent('pay_success', paymentMethod.value, ret => {
						console.log('宿主App回传的数据：' + ret);
					});

					proxy.$apiUserEvent('all', {
						type: "event",
						key: "pay_success",
						value: "支付成功",
						extra: {
							from: data.currentUrl,
							"订单号": orderId,
							"订单金额": data.goods.price + '元',
							"订单名称": data.goods.goods_name,
							"支付方式": paymentMethod.value == "wxpay" ? '微信' : "支付宝",
						}
					}, {
						type: 'pay_success',
						data: {
							from: data.currentUrl,
							"订单号": orderId,
							"订单金额": data.goods.price + '元',
							"订单名称": data.goods.goods_name,
							"支付方式": paymentMethod.value == "wxpay" ? '微信' : "支付宝",
						}
					});

					// 修复：这里应该用赋值操作，原代码缺少等号
					data.appUser.vip = 2;

					// 刷新用户数据
					await proxy.$getUserInfo();
					uni.hideLoading();
					uni.showToast({
						title: '支付成功',
						icon: 'success',
						duration: 2000
					});

					setTimeout(() => {
						uni.navigateBack();
					}, 1000);

					return; // 成功时停止轮询
				}

				// 检查是否达到最大尝试次数
				if (attempts >= maxAttempts) {
					uni.hideLoading();
					uni.showToast({
						title: '查询超时，请稍后查看',
						icon: 'none',
						duration: 3000
					});
					return;
				}

				// 继续轮询
				attempts++;
				setTimeout(poll, pollInterval);

			} catch (error) {
				console.error("轮询请求出错:", error);

				// 错误时也检查尝试次数
				if (attempts >= maxAttempts) {
					uni.hideLoading();
					uni.showToast({
						title: '网络错误，请稍后查看订单状态',
						icon: 'none',
						duration: 3000
					});
					return;
				}

				attempts++;
				setTimeout(poll, pollInterval);
			}
		};

		// 开始轮询
		poll();
	}

	// 随机抽取一个元素
	function getRandomItem() {
		const list = ['月度会员', '季度会员', '年度会员'];
		const randomIndex = Math.floor(Math.random() * list.length);
		return list[randomIndex];
	}

	/**
	 * 随机生成时间提示语
	 */
	function generateNaturalTimeAgo() {
		const weights = [{
				range: [1, 30],
				weight: 30,
				unit: '分钟'
			}, // 1-30分钟，权重30%
			{
				range: [31, 60],
				weight: 15,
				unit: '分钟'
			}, // 31-60分钟，权重15%
			{
				range: [1, 3],
				weight: 10,
				unit: '小时'
			}, // 1-3小时，权重10%
			{
				range: [4, 12],
				weight: 10,
				unit: '小时'
			}, // 4-12小时，权重10%
			{
				range: [1, 2],
				weight: 10,
				unit: '天'
			}, // 1-2天，权重10%
			{
				range: [3, 7],
				weight: 10,
				unit: '天'
			}, // 3-7天，权重10%
			{
				range: [1, 4],
				weight: 10,
				unit: '周'
			}, // 1-4周，权重10%
			{
				range: [1, 3],
				weight: 3,
				unit: '个月'
			}, // 1-12个月，权重3%
			{
				range: [4, 12],
				weight: 2,
				unit: '个月'
			} // 1-12个月，权重2%
		];

		// 计算总权重
		const totalWeight = weights.reduce((sum, item) => sum + item.weight, 0);
		let random = Math.random() * totalWeight;
		let selected;

		// 根据权重选择时间范围
		for (const item of weights) {
			random -= item.weight;
			if (random <= 0) {
				selected = item;
				break;
			}
		}

		// 在选中的范围内生成随机值
		const [min, max] = selected.range;
		const amount = Math.floor(Math.random() * (max - min + 1)) + min;

		return `${amount}${selected.unit}前`;
	}

	/**
	 * 随机生成电话号码
	 */
	function generateMaskedPhoneNumber() {
		// 常见手机号段
		const prefixes = [
			'130', '131', '132', '133', '134', '135', '136', '137', '138', '139',
			'145', '146', '147', '148', '149',
			'150', '151', '152', '153', '155', '156', '157', '158', '159',
			'165', '166', '167', '168',
			'170', '171', '172', '173', '174', '175', '176', '177', '178',
			'180', '181', '182', '183', '184', '185', '186', '187', '188', '189',
			'191', '198', '199'
		];

		// 随机选择号段
		const prefix = prefixes[Math.floor(Math.random() * prefixes.length)];

		// 生成完整的11位号码
		let fullNumber = prefix;
		for (let i = 0; i < 11 - prefix.length; i++) {
			fullNumber += Math.floor(Math.random() * 10);
		}

		// 对中间4位进行掩码处理：前3位 + **** + 后4位
		return fullNumber.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3');
	}


	/**
	 * 返回
	 */
	function back() {
		proxy.$apiUserEvent('all', {
			type: "click",
			key: "recharge_dialog_cancel",
			value: "去意已决",
			extra: {
				uni_version: proxy.$version

			}
		}, {
			type: 'recharge_dialog_cancel',
			data: {
				uni_version: proxy.$version
			}
		})
		uni.navigateBack();
	}

	function Complete() {
		data.coupon = false
		console.log("播放完成");
	}

	function shouldBeTrue(obj) {
		// 情况1: 没有 features 字段 → 返回 true
		if (!('features' in obj)) {
			return false;
		}

		// 情况2: features 字段存在但为空或 undefined → 返回 true
		if (!obj.features) {
			return false;
		}

		// 情况3: features 字段包含 alipay → 返回 true
		if (obj.features.includes('alipay')) {
			return false;
		}

		// 情况4: 有 features 字段且不包含 alipay → 返回 false
		return true;
	}
</script>
<style>
	@import "@/common/main.css";
</style>
<style lang="scss" scoped>
	* {
		box-sizing: content-box;
	}

	.couponBox {
		width: 375px;
		height: 450px;
		position: relative;
		z-index: 1;

		.shadowBg {
			position: absolute;
			width: 750px;
			height: 750px;
			left: -187.5px;
			top: -240px;
			z-index: -1;
		}

		.listCoupon {
			position: absolute;
			width: 244px;
			height: 276px;
			left: 65.5px;
			top: 157px;
			overflow: hidden;
			overflow-y: scroll;

			.item {
				position: relative;
				width: 244px;
				height: 74px;
				background-image: url('/static/image/recharge/couponItemBg.png');
				box-shadow: 0px 0px 14px 0px rgba(255, 255, 255, 0.5);
				background-repeat: no-repeat;
				background-size: 244px 74px;
				margin-top: 18px;
				display: flex;
				align-items: center;
				color: #fff;

				.left {
					width: 100px;
					display: flex;
					align-items: flex-end;
					justify-content: center;
					font-size: 22px;

					.AlibabaPuHuiTiBold {
						font-size: 32px;
					}

					.danwei {
						margin-left: 11px;
					}
				}

				.right {
					text-align: center;
					width: 144px;
					font-size: 24px;
					font-weight: bold;
				}

				.tips {
					text-align: center;
					line-height: 30px;
					position: absolute;
					width: 70px;
					height: 30px;
					background-image: url('/static/image/recharge/couponItemTips.png');
					background-repeat: no-repeat;
					background-size: 70px 30px;
					right: 7px;
					top: -14px;
					color: #F97902;
					font-size: 11px;
				}
			}
		}

		.header {
			height: 198px;
			background-image: url('/static/image/recharge/couponHeaderBg.png');
			background-repeat: no-repeat;
			background-size: 375px 198px;
			z-index: 2;
		}

		.couponConten {
			width: 300px;
			height: 252px;
			background-color: #FEF5D8;
			border-radius: 0 0 42px 42px;
			margin-left: calc(74px / 2);
			z-index: 2;
		}

		.colse {
			position: absolute;
			right: 36px;
			top: 36px;
			width: 18px;
			height: 20px;
			z-index: 4;
		}

		.couponTop {
			position: absolute;
			width: 375px;
			height: 390px;
			left: 0;
			top: -145px;
			z-index: 3;
		}
	}

	.couponButton {
		position: relative;
		margin-top: 37px;
		width: 305px;
		height: 86px;
		margin-left: calc(50% - 152.5px);
		z-index: 4 !important;
	}

	.page-container {
		background-color: #F7F7F7;
		padding-bottom: 240rpx;
		padding-bottom: calc(240rpx + constant(safe-area-inset-bottom)) !important;
		padding-bottom: calc(240rpx + env(safe-area-inset-bottom)) !important;

		.package-items-box {
			position: relative;
			background-color: #F7F7F7;
			border-radius: 16px 16px 0 0;
			width: 100vw;
			margin-top: -70px;
			// background: linear-gradient(to bottom, #FFFFFF, #F7F7F7);
		}

		.package-items-container {
			display: flex;
			padding: 40rpx 32rpx 40rpx 32rpx;

			.active-package-item-tips {
				position: absolute;
				content: '限时优惠';
				top: -8px;
				left: 14px;
				font-size: 20rpx;
				color: #FFFFFF;
				height: 44rpx;
				width: 112rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 12px 12px 12px 0;
				background: linear-gradient(200deg, #FFCCA8 0%, #ff0000 100%);

			}

			.active-package-item::after {
				content: "";
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				width: 88%;
				background-color: initial;
				border-radius: 25%;
				z-index: 0;
				height: 1px;
				margin: auto;
				border-radius: 10%;
				// box-shadow: 0px 2px 10px 1px #b1b1b1;
			}

			.package-item {
				flex-shrink: 0;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 184rpx;
				height: 280rpx;
				background-image: url("/static/image/recharge/packagItemBg.png");
				background-size: cover;
				margin-right: 32rpx;
				padding: 54rpx 0 0 0;
				transition: width 0.2s, background-image 0.2s;

				// overflow: hidden;
				.top {

					padding-left: 26rpx;
					font-size: 24rpx;

					.title {
						font-size: 24rpx;
						font-weight: 500;
						color: #1A1A1A;
					}

					.del-text {
						color: #767676;
						text-decoration: line-through;
					}
				}

				.price-box {
					padding-left: 26rpx;
					font-family: 'WeChatSansStd';
					font-size: 30rpx;

					.price {
						font-size: 64rpx;
					}
				}

				.shen {
					text-align: center;
					width: 184rpx;
					height: 24px;
					color: #AAAAAA;
					font-size: 10px;
					line-height: 24px;
					font-weight: bold;
					white-space: nowrap;
				}
			}

			.active-package-item {
				position: relative;
				width: 240rpx !important;
				height: 280rpx !important;
				background-image: url("/static/image/recharge/activePackagItemBg.png") !important;
				background-position: center;
				/* 居中显示图片 */
				background-repeat: no-repeat;

				/* 防止图片重复 */
				.shen {
					width: 240rpx !important;
					color: #D86C24;
				}

			}
		}

		.vip-benefits-container {
			position: relative;
			background-color: #FFFFFF;
			border-radius: 12px 12px 12px 12px;
			overflow: hidden;
			margin: -73px 32rpx 24rpx 32rpx;
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #fff);

			.content {
				margin-top: -4px;
				padding: 16px 0px 0 0;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				align-items: center;
				background-color: #FFFFFF;

				.benefit-item {
					width: 25%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-bottom: 16px;

					.img {
						width: 76rpx;
						height: 76rpx;
					}

					.name {
						font-size: 10px;
						margin-top: 16rpx;
					}
				}

			}
		}





	}

	@keyframes vertical-scroll {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(-100%);
		}
	}

	.footer-container {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #FFFFFF;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
		padding: 16rpx 32rpx;
		padding-top: 40rpx;
		padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2 
		padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>11.2

		.payment-method-box {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding-bottom: 32rpx;

			.payment-method {
				display: flex;
				align-items: center;
				justify-content: center;

				.img-select {
					flex-shrink: 0 !important;
					height: 16px;
					width: 16px;
					border-radius: 50%;
				}

				.logo {
					width: 36rpx;
					height: 36rpx;
					margin-right: 10rpx;
					margin-left: 18rpx;
				}

				.name {
					color: #767676;
					font-size: 24rpx;
				}
			}
		}

		.footerBottom {
			width: 100%;
			height: 20px;
		}

		.buttonBoxs {
			width: 100%;
			height: 104rpx;
			background-image: url('/static/image/recharge/bottom-button.png');
			background-position: center;
			/* 居中显示图片 */
			background-repeat: no-repeat;
			/* 防止图片重复 */
			background-size: cover;
			position: relative;

			.hongbao {
				position: absolute;
				left: 0;
				bottom: -52rpx;
			}
		}

		.christmas {
			// background-image: url('/static/image/recharge/christmas/bottom-button.png');
		}

		.button-box {
			display: flex;

			.text {
				flex: 1;
				// color: text;
				// text-align: center;
				color: #ffffff;
				// line-height: 104rpx;
				font-size: 12px;
				height: 104rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					color: red;
				}

				.price {
					font-size: 24px;
					color: red;
				}
			}

			.button {
				flex-shrink: 0;
				opacity: 0;
				text-align: center;
				height: 104rpx;
				width: 32%;
			}
		}
	}

	.dialog-container {
		display: flex;
		flex-direction: column;
		width: 80vw;

		.top {
			flex-shrink: 0;
			position: relative;
			top: 1px;
			box-sizing: border-box;
			background-image: url('/static/image/recharge/dialogImg.png');
			background-size: cover;
			width: 80vw;
			height: 260rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			line-height: 60rpx;
			padding-left: 80rpx;
			padding-top: 96rpx;
		}

		.content {
			flex: 1;
			flex-shrink: 0;
			padding-bottom: 24rpx;
			border-radius: 0 0 25px 25px;
			background: linear-gradient(150deg, #fef9f0 0%, #FEF3E1 21%, #FFDDAF 100%);
			// box-shadow: 10px 10px 15px #ffffff78;
			box-shadow: 2px 5px 30px 5px #9f9f9f9e;

			.title-box {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 2px;

				.title {
					margin: 0 32rpx;
				}

				.decorative-line {
					width: 68rpx;
					height: 6rpx;
				}
			}

			.timeDJS {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 15px;

				.titles {
					color: #FC3939;
					font-size: 14px;
					margin-right: 11px;
				}
			}

			.vip-benefits {
				display: flex;
				justify-content: space-between;
				margin: 24px 0;
				padding: 0 32rpx;

				.benefit-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.img {
						width: 90rpx;
						height: 90rpx;
					}

					.name {
						font-size: 26rpx;
						margin-top: 18rpx;
					}
				}
			}

			.button-box {
				margin: 0 44rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.button {
					position: relative;
					box-sizing: border-box;
					text-align: center;
					font-size: 20px;
					border-radius: 50px;
					height: 52px;
					line-height: 52px;
					color: #FFFFFF;
					width: 100%;
					background: linear-gradient(360deg, #4B3F30 0%, #181713 56%, #504834 100%);
				}

				/* .button::before {
					position: absolute;
					content: "限时优惠";
					top: -10px;
					right: -15px;
					font-size: 0.625rem;
					color: #FFFFFF;
					height: 1.375rem;
					width: 3.5rem;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 12px 12px 12px 0;
					background: linear-gradient(200deg, #FFCCA8 0%, #ff0000 100%);
				}
 */
				.leave {
					color: #767676;
					margin-top: 8px;
				}
			}
		}

	}

	.back {
		position: fixed;
		top: 100rpx;
		left: 36rpx;
		z-index: 1;
	}

	.uni-margin-wrap::after {
		// position: absolute;
		// content: '';
		// left: 0;
		// bottom: -1px;
		// width: 100%;
		// height: 18px;
		// background-color: #f7f7f7;
		// border-radius: 16px 16px 0px 0px;
	}

	.uni-margin-wrap {
		// position: relative;
		height: auto;
		width: 100%;
		z-index: 0;

		::v-deep .uni-swiper-dots-horizontal {
			bottom: 60rpx;

			.uni-swiper-dot {
				width: 8rpx;
				height: 8rpx;
				background-color: #FFFFFF;
				opacity: 0.5;
				border-radius: 8rpx;
			}

			.uni-swiper-dot-active {
				opacity: 1;
				width: 24rpx;
			}
		}

		.swiper {
			height: 244px;
		}

		.swiper-item {
			display: block;
			height: 244px;
			width: 100%;
			text-align: center;
		}

		.swiper-list {
			margin-top: 40rpx;
			margin-bottom: 0;
		}

		.uni-common-mt {
			margin-top: 60rpx;
			position: relative;
		}

		.info {
			position: absolute;
			right: 20rpx;
		}

		.uni-padding-wrap {
			width: 550rpx;
			padding: 0 100rpx;
		}

	}



	.placeholder {
		// display: none;
		// position: relative;
		// background-color: #f7f7f7;
		// width: 100%;
		// border-radius: 1rem 1rem 0 0;
		// left: 0;
		// bottom: 30rpx;
	}

	/* 由小到大缩放动画 */
	.animated-box {
		animation: scaleIn 1s ease-out forwards;
	}

	/* 延迟动画 */
	.scale-in-delay {
		animation: scaleIn 0.5s ease-out 0.2s forwards;
	}

	/* 动画关键帧定义 */
	@keyframes scaleIn {
		0% {
			transform: scale(0);
			opacity: 0;
		}

		50% {
			transform: scale(1.05);
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	.iosQuestion {
		.titleBox {
			.image {
				margin-top: 3px !important;
			}
		}
	}

	.question {
		margin: 20rpx 32rpx;
		padding: 17px 13px;
		background-color: #FFFFFF;
		border-radius: 10px 10px 10px 10px;

		.titles {
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 12px;
			background-image: -webkit-linear-gradient(bottom, #6E430F, #1A1A1A);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.titleBox {
			display: flex;
			margin-top: 10px;

			image {
				width: 10px;
				height: 10px;
				margin-top: 1px;
			}

			.text {
				margin-left: 5px;
				width: calc(100% - 15px);
				font-size: 11px;
				color: #767676;
			}

			.text1 {
				color: #AAAAAA;
			}
		}
	}

	.myCouponList {
		margin: 20rpx 32rpx;
		padding: 17px 13px;
		height: 18px;
		background-color: #FFFFFF;
		border-radius: 10px 10px 10px 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;

		.left {
			display: flex;
			align-items: center;
			font-weight: bold;

			image {
				width: 23px;
				height: 17px;
				margin-right: 8px;
			}

			.title {
				margin-top: 3px;
				display: inline-block;
				/* 确保文字可以应用背景 */
				background: linear-gradient(to right, #6E430F, #1A1A1A);
				/* 从左到右的渐变 */
				-webkit-background-clip: text;
				/* 仅裁剪文本部分 */
				color: transparent;
				/* 文本颜色设置为透明，以显示背景渐变 */
				font-size: 14px;
				/* 根据需要调整字体大小 */
			}

			.money {
				margin-top: 1px;
				font-family: 'PingFangSC-Semibold';
				font-weight: bold;
				color: #FC3939;
				font-size: 16px;
			}
		}

		.right {
			color: #767676;
			font-size: 12px;
			display: flex;
			align-items: center;

			.forward {
				margin-left: 8px;
			}

			.forward2 {
				margin: 0;
			}

			.timeBox {
				.titles {
					text-align: right;
					color: #FC3939;
					font-size: 10px;
				}
			}
		}
	}

	.myCouponContainer {
		width: calc(100% - 52px);
		height: 400px;
		background-image: url('/static/image/recharge/myCouponContainerBg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 0 26px;
		padding-top: 150px;
		position: relative;

		.myCouponContainerClose {
			position: absolute;
			width: 34px;
			height: 34px;
			top: -27px;
			right: 16px;
		}

		.myCouponBox {
			height: 282px;
			overflow-y: scroll;

			.item {
				width: calc(100% - 12px);
				height: 62px;
				background-color: #fff;
				border-radius: 8px 8px 8px 8px;
				padding: 6px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 12px;
				position: relative;

				.jjdq {
					width: 52px;
					height: 18px;
					background: linear-gradient(194deg, #FFCCA8 0%, #FE3D32 100%);
					position: absolute;
					right: 0;
					top: 0;
					border-radius: 0 8px 0 8px;
					color: #fff;
					font-size: 10px;
					text-align: center;
					line-height: 18px;
				}

				.ygq {
					width: 52px;
					height: 18px;
					background: #AAAAAA;
					position: absolute;
					right: 0;
					top: 0;
					border-radius: 0 8px 0 8px;
					color: #fff;
					font-size: 10px;
					text-align: center;
					line-height: 18px;
				}

				.left {
					width: 110px;
					height: 62px;
					background: #FFEDED;
					border-radius: 6px 6px 6px 6px;
					text-align: center;

					.money {
						margin-top: 4px;
						color: #FF3838;
						font-size: 16px;

						.moneys {
							font-size: 28px;
							font-weight: bold;
						}
					}

					.dec {
						margin-top: 1px;
						color: #FF3838;
						font-size: 11px;
					}
				}

				.left2 {
					background-color: #EDEDED;

					.money {
						color: #8A8A8A;
					}

					.dec {
						color: #8A8A8A;
					}
				}

				.right {
					width: calc(100% - 126px);
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-right: 7px;

					.titlebox {
						.titlle {
							margin-top: 13px;
							color: #3D3D3D;
							font-size: 16px;
						}

						.dec {
							margin-top: 8px;
							color: #AAAAAA;
							font-size: 11px;
						}
					}

					.checkedImg {
						width: 26px;
						height: 26px;
					}
				}
			}
		}

		.btn {
			margin-top: 18px;
			height: 52px;
			background: linear-gradient(360deg, #4B3F30 0%, #181713 56%, #504834 100%);
			border-radius: 508px 508px 508px 508px;
			text-align: center;
			line-height: 52px;
			color: #fff;
			font-size: 20px;
		}
	}

	.white-flow {
		background: linear-gradient(-45deg, transparent, transparent, transparent, transparent, transparent, transparent, transparent, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2), transparent, transparent, transparent, transparent, transparent, transparent, transparent);
		background-repeat: no-repeat;
		background-size: 60% 100%;
		animation: flow 2s infinite linear;
	}

	@keyframes flow {
		0% {
			background-position: -100% 0;
		}

		100% {
			background-position: 200% 0;
		}
	}

	::v-deep .uni-countdown-day {
		width: auto !important;
		color: #2A2617 !important;
		/* 例如，将文字颜色改为红色 */
		background-color: transparent !important;
		margin-right: 0 !important;
		padding-right: 0 !important;
	}

	::v-deep .uni-countdown-splitor-day {
		margin-left: 0 !important;
	}

	.yanhua {
		position: fixed;
		top: 170px;
		left: 15px;
		z-index: 999999;
	}

	.vipContent {
		background-color: #fff;
		margin-left: 16px;
		width: calc(100% - 32px);
		border-radius: 16px;
		margin-bottom: 20rpx;

		.top {
			image {
				width: 100%;
			}
		}

		.vipList {
			display: flex;
			flex-wrap: wrap;
			padding: 0 10px 10px 10px;

			.item {
				width: 20%;
				height: 75px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 38px;
					height: 38px;
				}

				text {
					margin-top: 5px;
					font-size: 10px;
					color: #1A1A1A;
					line-height: 15px;
					text-align: center;
				}
			}
		}
	}

	@font-face {
		font-family: 'AlipayNumber'; //字体名称
		src: url('/static/font/AlipayNumber.ttf');
	}

	.wx-font-regular {
		font-family: 'AlipayNumber' !important;
	}
</style>