<template>
	<view class="new-index-page">
		<view class="header">
			<view class="point">
				<image src="@/static/an/point.gif" mode="" class="point-icon"></image>
				<view class="point-value">{{infoDetail.coins | million}}</view>
			</view>
			<view class="top-up" @click="topUpCk">充值</view>
			<view class="header-item" @click="handleCustomer">
				<image src="@/static/new/kf.png" mode="" class="item-img"></image>
				客服
			</view>
			<view class="header-item" @click="notice">
				<image src="@/static/new/gg.png" mode="" class="item-img"></image>
				公告
			</view>
			<view class="header-item" @click="rule">
				<image src="@/static/new/gz.png" mode="" class="item-img"></image>
				规则
			</view>
			<image src="@/static/new/header.png" mode="" class="header-bg"></image>
			<!-- <view class="tops">
				<TopCom></TopCom>
			</view> -->
			<!-- 
			 -->
		</view>
		<view class="main">
			<floatWindow v-if="activityDetail" :consumptionTime="activityDetail.expireTime" :source="activityDetail.source" :isConsumption="activityDetail.source === 'PREFERENTIAL_DAY'" :isDiscounts="activityDetail.source === 'ROOKIE'" @click="floatCk"></floatWindow>
			<!-- <view class="prize">
				<view class="prize-item">
					<view class="item-content">
						<view class="shop-icon" style="background-image: url(@/static/mine/g.png);"></view>
					</view>
					<view class="item-txt">金色大狗开出了耳机 | 3分钟前</view>
				</view>
			</view> -->
			<!-- 气泡 -->
			<!-- <QpCom @click="goDetail(list[current])"></QpCom> -->
			<!-- 背景线 -->
			<!-- <view class="line">
				<LineCom></LineCom>
			</view> -->
			<!-- <view class="raffle-main">
				<RaffleCom></RaffleCom>
			</view> -->
			<view class="raffle-main">
				<image src="@/static/an/raffle/9.png" mode="aspectFit" style="margin-top: -60rpx;width: 750rpx;"></image>
			</view>
			
			
			
			
			<image src="@/static/new/zjt.png" mode="aspectFit" class="arrows-left" @click="changeSwiper('left')"></image>
			<image src="@/static/new/yjt.png" mode="aspectFit" class="arrows-right" @click="changeSwiper('right')"></image>

			<swiper class="swiper" circular :current="current" @change="swiperChange">
				<swiper-item class="swiper-items" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
					
					<image :src="item.coverResource.url" mode="aspectFit" class="swiper-img" v-if="item.coverResource"></image>
					<!-- <view class="swiper-img" v-if="item.coverResource"
						:style="{'background-image': `url(${item.coverResource.url})`}"></view> -->
					<!-- <view class="swiper-img" style="background-image: url('../../static/new/shop.png');"></view> -->
				</swiper-item>
			</swiper>
			<view class="box-price" v-if="list.length > 0 && list[current]">
				<template v-for="(item,index) in list[current].price">
					<text class="price" v-if="item.type === 'SINGLE'" :key="index">{{item.settlement || '/'}}</text>
				</template>
				<text class="num">个/元</text>
			</view>
			<swiper class="footer-swiper" previous-margin="277rpx" next-margin='277rpx' circular :current="current"
				@change="swiperChange">
				<swiper-item class="footer-swiper-item" v-for="(item,index) in list" :key="index"
					@click="swiperCk(index)">
					<view class="swiper-tai">
						<image src="@/static/new/box.png" mode="aspectFit"
							:class="{'box-icon-active':current === index,'box-icon':current !== index}"></image>
						<image src="@/static/new/select.png" mode="aspectFit" class="tai-icon-select" v-if="current === index">
						</image>
						<image src="@/static/new/no-select.png" mode="aspectFit" class="tai-icon" v-else></image>
						<view :class="{'tai-txt-active':current === index,'tai-txt':current !== index,}">
							{{item.name}}
						</view>
					</view>
				</swiper-item>
				
			</swiper>

			<view class="footer">
				<view class="more" @click="more">
					<image src="@/static/an/more.gif" mode="aspectFit" class="game-icon"></image>
					<view class="more-txt">更多活动</view>
				</view>
				<BtnCom @click="buy" ref="childComponent"></BtnCom>
				<!-- <view class="btn-animation"></view> -->
			</view>
		</view>
		<!-- 弹框 -->
		<!-- <view class="dlg" v-if="adVisible && adStoreVisible == 'frist'" @click="close">
			<view class="dlg-main">
				<swiper class="dlg-swiper" autoplay :indicator-dots="true" circular previous-margin="120rpx"
					next-margin='120rpx'>
					<swiper-item v-for="(item,index) in popupList" :key="index" class="dlg-swiper-item"
						@click.stop="rollingLink(item)">
						<view class="dlg-swiper-img" v-if="item.coverResource" :style="{'backgroundImage':`url(${item.coverResource.url})`}">
						</view>
					</swiper-item>

				</swiper>
				<image src="@/static/order/close.png" mode="" class="dlg-close-img" @click="close"></image>
			</view>
		</view> -->
		
		<popup-view v-model="adVisible" mode="bottom" border-radius="15">
			<scroll-view scroll-y="true" class="ad-scroll">
				<template v-for="(item,index) in popupList">
					<image :key="index" v-if="item.coverResource" :src="item.coverResource.url" mode="aspectFit" class="ad-img"></image>
				</template>
			</scroll-view>
		</popup-view>
		<!-- 活动盲盒弹窗 -->
		<view class="dlg" v-if="activityShow" @click="activityClose">
			<view class="activity-main" @click.stop="">
				<image src="@/static/new/mryh.png" mode="" class="dlg-title" v-if="activityDetail.source === 'PREFERENTIAL_DAY'"></image>
				<image src="@/static/new/xsmh.png" mode="" class="dlg-title" v-if="activityDetail.source === 'ROOKIE'"></image>
				<image v-if="activityDetail.coverResource" :src="activityDetail.coverResource.url" mode="aspectFit" class="activity-img" @click="goActivityDetail"></image>
				<image src="@/static/new/box/hdgm.png" mode="aspectFit" class="now-buy" @click="goActivityPre"></image>
				<image src="@/static/order/close.png" mode="" class="dlg-close-img" @click="activityClose"></image>
			</view>
		</view>
		<!-- 购买弹窗 -->
		<BuyCom :visible="buyVisible" :item="list[current]" @close="buyClose" @click="goBuy"></BuyCom>
		
		<!-- 提示卡弹窗 -->
		<!-- <view class="dlg" v-if="tipVisible" @click="tipVisible = false">
			<view class="tip-dlg" @click.stop="">
				<view class="tip-main">
					<image src="@/static/new/tip/title.png" mode="" class="tip-icon"></image>
					<view class="tip-txt">商品提示语</view>
					<view class="tip-sub">使用提示卡后可提前获得该盲盒的商品提示语</view>
				</view>
				<view class="tip-btn">
					<image src="@/static/new/tip/bsy.png" mode="aspectFit" class="btn-icon" @click="nonuse"></image>
					<view class="btn-icon now" @click="immediate">
						立即使用
					</view>
				</view>
				<image src="@/static/order/close.png" mode="" class="close-tip" @click="tipVisible = false"></image>
			</view>
		</view> -->
		
		
		<!-- 购买弹窗 -->
		<popup-view v-model="show" mode="bottom" border-radius="15" z-index="1000">
			<BuyBoxCom :detailData="list[current]" @isOk="buySuccess" :boxType="boxType" @coinDeficit="coinDeficit" @payPaid="payPaid"></BuyBoxCom>
		</popup-view>
		
		<!-- 去充值 -->
		<popup-view v-model="isTopUp" mode="bottom" border-radius="15" z-index="1000">
			<coinDeficitCom @close="closeTop" @sucClose="sucClose"></coinDeficitCom>
		</popup-view>
		<!-- 是否有未开完的奖品 -->
		<NoOpenCom></NoOpenCom>
		<view class="custom-toast" v-if="isTip">
		    <view class="toast-txt">支付成功</view>
		</view>
		<!-- 预加载图片 -->
		<img v-for="(imgSrc, index) in boxList" :key="imgSrc" :src="imgSrc" style="display: none;" />
		<img v-for="(imgSrc, index) in liHuaList" :key="imgSrc" :src="imgSrc" style="display: none;" />
		<img v-for="(imgSrc, index) in gxList" :key="imgSrc" :src="imgSrc" style="display: none;" />
		<img v-for="(imgSrc, index) in gradeList" :key="imgSrc" :src="imgSrc" style="display: none;" />
	</view>
</template>

<script>
	import QpCom from './components/qp.vue'
	import BtnCom from './components/btn.vue'
	import RaffleCom from './components/raffle.vue'
	import LineCom from './components/line.vue'
	import TopCom from './components/top.vue'
	import floatWindow from '@/pages/components/floatWindow.vue'
	import BuyCom from './components/buy.vue'
	import TipCom from './components/tip.vue'
	import BuyBoxCom from './components/buyBox.vue'
	import coinDeficitCom from './components/coinDeficit.vue'
	import NoOpenCom from './components/noOpen.vue'
	import {
		loginXc
	} from '@/API/login.js'
	import {
		noticeTopApi,
		popupAdApi,
		customerApi,
		userInfo,
		coinPaidApi
	} from '@/API/user.js'
	import md5 from 'crypto-js/md5';
	import Hex from 'crypto-js/enc-hex';
	import {
		myMixins
	} from "@/mixins/mixins.js";
	import {
		boxesPinnedApi,
		boxesTagsApi,
		boxesApi,
		boxActivityApi,
		promptCountApi
	} from '@/API/index.js'

	export default {
		data() {
			return {
				list: [],
				current: 0,
				customer: '',
				adStoreVisible: '', //是否第一次进入
				infoDetail: {
					point: 0,
				},
				adVisible: false,
				activityShow: false,
				activityDetail:{
					coverResource:{},
					price:{}
				},
				buyVisible:false,
				tipVisible:false,
				buyType:'',//几连抽
				
				popupList:[],
				optionTxt:'',
				optionSign:'',
				
				
				
				
				// 预加载图片
				boxList: ['static/an/box/1.png', 'static/an/box/2.png', 'static/an/box/3.png', 'static/an/box/4.png',
					'static/an/box/5.png', 'static/an/box/6.png', 'static/an/box/7.png', 'static/an/box/8.png',
					'static/an/box/9.png', 'static/an/box/10.png', 'static/an/box/11.png', 'static/an/box/12.png',
					'static/an/box/13.png', 'static/an/box/14.png', 'static/an/box/15.png', 'static/an/box/16.png',
					'static/an/box/17.png', 'static/an/box/18.png', 'static/an/box/19.png', 'static/an/box/20.png',
					'static/an/box/21.png', 'static/an/box/22.png', 'static/an/box/23.png', 'static/an/box/24.png',
					'static/an/box/25.png', 'static/an/box/26.png', 'static/an/box/27.png', 'static/an/box/28.png',
					'static/an/box/29.png', 'static/an/box/30.png', 'static/an/box/31.png', 'static/an/box/32.png',
					'static/an/box/33.png', 'static/an/box/34.png', 'static/an/box/35.png', 'static/an/box/36.png',
					'static/an/box/37.png', 'static/an/box/38.png', 'static/an/box/39.png', 'static/an/box/40.png',
					'static/an/box/41.png', 'static/an/box/42.png', 'static/an/box/43.png', 'static/an/box/44.png',
					'static/an/box/45.png', 'static/an/box/46.png', 'static/an/box/47.png', 'static/an/box/48.png',
					'static/an/box/49.png', 'static/an/box/50.png', 'static/an/box/51.png', 'static/an/box/52.png',
					'static/an/box/53.png', 'static/an/box/54.png', 'static/an/box/55.png', 'static/an/box/56.png',
					'static/an/box/57.png', 'static/an/box/58.png', 'static/an/box/59.png', 'static/an/box/60.png',
					'static/an/box/61.png', 'static/an/box/62.png', 'static/an/box/63.png', 'static/an/box/64.png',
					'static/an/box/65.png', 'static/an/box/66.png', 'static/an/box/67.png', 'static/an/box/68.png',
					'static/an/box/69.png', 'static/an/box/70.png', 'static/an/box/71.png', 'static/an/box/72.png'
				],
				liHuaList: ['static/an/lihua/1.png', 'static/an/lihua/2.png', 'static/an/lihua/3.png',
					'static/an/lihua/4.png', 'static/an/lihua/5.png', 'static/an/lihua/6.png', 'static/an/lihua/7.png',
					'static/an/lihua/8.png', 'static/an/lihua/9.png', 'static/an/lihua/10.png',
					'static/an/lihua/11.png', 'static/an/lihua/12.png', 'static/an/lihua/13.png',
					'static/an/lihua/14.png', 'static/an/lihua/15.png', 'static/an/lihua/16.png',
					'static/an/lihua/17.png', 'static/an/lihua/18.png', 'static/an/lihua/19.png',
					'static/an/lihua/20.png', 'static/an/lihua/21.png', 'static/an/lihua/22.png',
					'static/an/lihua/23.png', 'static/an/lihua/24.png', 'static/an/lihua/25.png',
					'static/an/lihua/26.png', 'static/an/lihua/27.png', 'static/an/lihua/28.png',
					'static/an/lihua/29.png', 'static/an/lihua/30.png', 'static/an/lihua/31.png',
					'static/an/lihua/32.png', 'static/an/lihua/33.png', 'static/an/lihua/34.png',
					'static/an/lihua/35.png', 'static/an/lihua/36.png', 'static/an/lihua/37.png',
					'static/an/lihua/38.png', 'static/an/lihua/39.png', 'static/an/lihua/40.png',
					'static/an/lihua/41.png', 'static/an/lihua/42.png', 'static/an/lihua/43.png'
				],
				gxList: ['static/an/g/1.png', 'static/an/g/2.png', 'static/an/g/3.png', 'static/an/g/4.png',
					'static/an/g/5.png', 'static/an/g/6.png', 'static/an/g/7.png', 'static/an/g/8.png',
					'static/an/g/9.png', 'static/an/g/10.png', 'static/an/g/11.png', 'static/an/g/12.png',
					'static/an/g/13.png', 'static/an/g/14.png', 'static/an/g/15.png', 'static/an/g/16.png',
					'static/an/g/17.png', 'static/an/g/18.png', 'static/an/g/19.png', 'static/an/g/20.png',
					'static/an/g/21.png', 'static/an/g/22.png', 'static/an/g/23.png', 'static/an/g/24.png',
					'static/an/g/25.png'
				],
				gradeList:[
					'static/result/NORMAL.png','static/result/HIDDEN.png','static/result/RARE.png','static/result/SUPREME.png','static/box/d-box.png'
				],
				
				
				
				show:false,
				boxType:'',//盲盒类型
				isTopUp:false,
				isTip:false,
				rookieTimer:null
			}
		},
		components: {
			QpCom,
			BtnCom,
			RaffleCom,
			LineCom,
			floatWindow,
			TopCom,
			BuyCom,
			TipCom,
			BuyBoxCom,
			coinDeficitCom,
			NoOpenCom
		},

		filters: {
			million: function(
			num) { //过万处理  let num; if(value > 9999){//大于9999显示x.xx万    num=(Math.floor(value/1000)/10) + 'W'; }else if( value < 9999 && value>-9999){   num=value }else if(value<-9999){//小于-9999显示-x.xx万
				var fixedNum = 2
				num = num ? Number(num) : 0
				if (num >= 10000) {
					var digit = num / 10000
					var count = digit.toFixed(6).slice(0, -(6 - fixedNum))
					count = Math.max(count)
					return count + 'w'
				} else {
					return num
				}
			}

		},
		onLoad(option) {
			this.loginParams = option
			// url里有appid和userid的时候需要登录
			if (option.sign) {
				this.login(option)
			} else if (!option.sign && option.appid && option.user_id) {
				this.loginParams.userid = option.user_id
				// 获取当前时间的秒级时间戳
				const currentTimeInSeconds = Math.floor(Date.now() / 1000);
				this.appid = option.appid
				this.userid = option.user_id
				this.gotoPath = option.gotoPath ? option.gotoPath : ""
				this.time = currentTimeInSeconds
				let md5Str = ''
				if (this.gotoPath) {
					md5Str =
						`appid=${this.appid}&gotoPath=${this.gotoPath}&time=${this.time}&userid=${this.userid}&key=${this.appid}`
				} else {
					md5Str = `appid=${this.appid}&time=${this.time}&userid=${this.userid}&key=${this.appid}`
				}
				// md5加密
				let sign = this.generate16BitMD5(md5Str)
				this.optionSign = sign
				this.loginParams.sign = sign
				this.loginParams.time = this.time
				this.login(this.loginParams)
			} else {
				// this.getBoxesTags()
				// this.getNoticeTop()
				this.getPopupAd('HOMEPAGE_CAROUSEL')
				this.getPopupAd('HOMEPAGE_POPUP')
				this.getBoxesPinned()
				// if(this.categoriesIndex === 0){
				// 	this.getBoxesPinned()
				// }else{
				// 	this.getBoxes()
				// }
			}
		},
		onShow() {
			if (uni.getStorageSync('box-token')) {
				this.getUserInfo()
				this.getCustomer()
				this.getBoxActivity()
				this.getBoxesPinned()
			}else{
				this.getBoxesPinned()
			}
			// console.log(this.$childComponent)
			// this.$refs.childComponent.startAnimation();
		},
		methods: {
			// 新手盲盒订单支付轮训
			payPaid(val){
				// {boxOrderNo:res.data.boxOrderNo,no:res.data.no,boxId:this.previewData.boxId,type:1}
				
				this.getCoinPaid(val.no,val.boxOrderNo,val.boxId)
				this.rookieTimer = setInterval(() => {
					this.getCoinPaid(val.no,val.boxOrderNo,val.boxId)
				}, 3000);
			},
			
			// 查询新手盲盒支付订单
			getCoinPaid(no,boxOrderNo,boxId) {
				coinPaidApi({
					no
				}).then(payResult => {
					if (payResult.data) {
						clearInterval(this.rookieTimer); // 清除定时器
						this.rookieTimer = null;
						this.show = false
						this.$api.msg('支付成功')
						uni.navigateTo({
							url: `/pages/index/draw?no=${boxOrderNo}&boxId=${boxId}&type=1`
						})
						// uni.redirectTo({
						// 	url: `/pages/index/boxPaySuccess?no=${this.boxOrderNo}&boxId=${this.previewData.boxId}&name=${this.previewData.name}&type=${this.previewData.type}&sale=${this.previewData.amount.sale}`
						// })
						uni.hideLoading()
					}
				}).catch(err => {
					clearInterval(this.timer); // 清除定时器
					this.timer = null;
					uni.hideLoading()
				})
			},
			// 代币不足
			coinDeficit(){
				this.isTopUp = true
			},
			closeTop(){
				this.isTopUp = false
				this.getUserInfo()
			},
			sucClose(){
				this.isTopUp = false
				this.isTip = true
				this.getUserInfo()
				setTimeout(() => {
					this.isTip = false
				},1500)
			},
			// 购买成功
			buySuccess(){
				this.show = false
			},
			rule(){
				console.log("aaa")
				uni.navigateTo({
					url:`/pages/agreement/rule`
				})
			},
			preloadImages(type) {
				if(type === 'box'){
					this.boxList.forEach((imgSrc) => {
					  const img = new Image();
					  img.src = imgSrc;
					});
				}else if(type === 'lihua'){
					this.liHuaList.forEach((imgSrc) => {
					  const img = new Image();
					  img.src = imgSrc;
					});
				}else if(type === 'gx'){
					this.gxList.forEach((imgSrc) => {
					  const img = new Image();
					  img.src = imgSrc;
					});
				}else if(type === 'grade'){
					
					this.gradeList.forEach((imgSrc) => {
					  const img = new Image();
					  img.src = imgSrc;
					});
				}
			      
			    },
			generate16BitMD5(data) {
			    let md5Digest = md5(data).toString(Hex);
			    return md5Digest.substring(8, 24); // 截取前16位
			},
			more(){
				if(this.popupList.length === 0){
					this.$api.msg('暂无活动')
					return
				}
				this.adVisible = true
				
			},
			rollingLink(item) {
				this.adVisible = false
				if (item.link) {
					if (item.link.type === 'INSIDE') {
						uni.navigateTo({
							url: `${item.link.url}`
						})
					} else {
						window.open(item.link.url)
						// uni.navigateTo({
						// 	url: `/pages/webView/index?url=${item.link}`
						// })
					}
			
				}
			},
			// 获取活动盲盒详情
			getBoxActivity(){
				boxActivityApi().then(res => {
					if(res.code === 200){
						this.activityDetail = res.data
						if(this.activityDetail){
							if (!uni.getStorageSync('activityShow')) {
							  this.activityShow = true
							  // 设置标记，表示已经弹出过
							  localStorage.setItem('activityShow', 'true');
							}
						}
					}else{
						this.$api.msg(res.message)
					}
				})
			},
			goDetail(item){
				uni.navigateTo({
					url: `/pages/index/boxDetail?id=${item.id}`
				})
			},
			goActivityDetail(){
				uni.navigateTo({
					url: `/pages/index/boxDetail?type=${this.activityDetail.source}`
				})
			},
			// 活动盲盒订单预览
			goActivityPre(){
				this.boxType = this.activityDetail.source
				// console.log(this.activityDetail)
				this.show = true
				this.activityClose()
			},
			activityClose() {
				uni.setStorageSync('ad','behind')
				this.activityShow = false
			},
			close() {
				uni.setStorageSync('ad', 'behind')
				this.adVisible = false
			},
			login(data) {
				loginXc(data).then(res => {
					if (res.code === 200) {
						try {
							this.adStoreVisible = uni.getStorageSync('ad') ? uni.getStorageSync('ad') : 'frist'
						} catch (e) {
							//TODO handle the exception
							this.adStoreVisible = 'frist'
						}
						// this.getBoxesTags()
						// this.getNoticeTop()
						this.getPopupAd('HOMEPAGE_CAROUSEL')
						this.getPopupAd('HOMEPAGE_POPUP')
						this.getBoxesPinned()
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			// 获取用户信息
			getUserInfo() {
				userInfo().then(res => {
					if (res.code === 200) {
						this.infoDetail = res.data
					} else if (res.code == 400) {
						uni.removeStorageSync('userInfo')
						uni.removeStorageSync('info')
						this.$api.msg(res.message)
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			getCustomer() {
				customerApi().then(res => {
					if (res.code === 200) {
						this.customer = res.data
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			handleCustomer() {
				window.open(this.customer)
			},
			topUpCk() {
				uni.navigateTo({
					url: `/pages/mine/topUp`
				})
			},
			notice() {
				uni.navigateTo({
					url: `/pages/mine/notice`
				})
			},
			// 获取广告弹窗/轮播
			getPopupAd(type) {
				// HOMEPAGE_CAROUSEL 轮播
				// HOMEPAGE_POPUP 弹窗
				popupAdApi({
					type
				}).then(res => {
					if (res.code === 200) {
						if (type === 'HOMEPAGE_CAROUSEL') {
							this.bannerTopList = res.data
						}
						if (type === 'HOMEPAGE_POPUP') {
							this.popupList = res.data
							if (this.popupList.length > 0) {
								// this.adVisible = true
							}
						}
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			// 获取首页盲盒
			getBoxesPinned() {
				let data = {
					name: this.search
				}
				boxesPinnedApi(data).then(res => {
					if (res.code === 200) {
						this.list = res.data
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			swiperChange(val) {
				this.current = val.detail.current
			},
			swiperCk(index) {
				this.current = index
			},
			changeSwiper(type) {
				if (type === 'right') {
					if (this.current === this.list.length - 1) {
						this.current = 0
					} else {
						this.current += 1
					}
				} else {
					if (this.current === 0) {
						this.current = this.list.length - 1
					} else {
						this.current -= 1
					}
				}
			},
			
			// 不使用提示卡
			nonuse(){
				this.tipVisible = false
				uni.navigateTo({
					url:`/pages/index/boxOrderConfirm?boxId=${this.list[this.current].id}&type=${this.buyType}`
				})
			},
			// 使用提示卡
			immediate(){
				
			},
			// 打开购买组件
			buy(){
				this.boxType = 'buy'
				this.show = true
			},
			// 关闭购买弹窗组件
			buyClose(){
				this.buyVisible = false
			},
			floatCk(type){
				this.boxType = type
				console.log(this.boxType)
				if(type){
					// 每日优惠
					if(this.activityDetail && this.activityDetail.source){
						this.activityShow = true
					}
				}
			},
			// 购买组件 购买
			goBuy(type){
				this.buyVisible = false
			}
			// goBuy(type){
			// 	this.buyType = type
			// 	// 用提示卡时打开提示卡组件
			// 	promptCountApi().then(res => {
			// 		if(res.data === '0'){
			// 			uni.navigateTo({
			// 				url:`/pages/index/boxOrderConfirm?boxId=${this.list[this.current].id}&type=${type}`
			// 			})
			// 		}else{
			// 			this.tipVisible = true
			// 		}
			// 	})
				
			// },
			
		},
		onHide() {
			// console.log("aaa")
		    // 在页面离开时销毁子组件中的定时器
			this.btnTimer = Math.floor(Math.random() * (1 - 100000 + 1)) + 100000
			clearInterval(this.btnTimer)
		    // this.$refs.childComponent && this.$refs.childComponent.$destroy();
		  },
		onUnload() {
			// 在页面离开时清除定时器
			clearInterval(this.rookieTimer)
		}
	}
</script>

<style lang="scss" scoped>
	page {}

	.new-index-page {
		width: 100%;
		height: calc(100vh - 50px);
		// height: calc(100vh - 82px);
		overflow: hidden;
		// height: 1282rpx;
		// height: 1300rpx;
		background-image: url('@/static/new/bg.png');
		background-repeat: no-repeat;
		// border: 1px solid #000;
		background-size: 100%;
		
		// border: 1px solid red;

		.header {
			height: 200rpx;
			// background-image: url('@/static/new/header.png');
			background-repeat: no-repeat;
			background-size: 100%;
			display: flex;
			padding-top: 12rpx;
			z-index: 2;
			position: relative;
			
			.point {
				width: 202rpx;
				height: 96rpx;
				font-size: 36rpx;
				color: #3E688D;
				background-image: url('@/static/new/point-bg.png');
				background-repeat: no-repeat;
				background-size: 100%;
				font-family: YouSheBiaoTiHei;
				margin-left: 24rpx;
				display: flex;
				padding-top: 12rpx;
				// align-items: center;
				padding-left: 16rpx;
				z-index: 3;

				.point-icon {
					width: 56rpx;
					height: 56rpx;
				}

				.point-value {
					padding-top: 6rpx;
				}
			}

			.top-up {
				width: 116rpx;
				height: 96rpx;
				font-size: 36rpx;
				background-image: url('@/static/new/topup-bg.png');
				background-repeat: no-repeat;
				background-size: 100%;
				font-family: YouSheBiaoTiHei;
				color: #3E688D;
				padding-top: 18rpx;
				text-align: center;
				margin-right: 40rpx;
				z-index: 3;
			}

			.header-item {
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 24rpx;
				color: #385E80;
				height: 35rpx;
				margin-top: 16rpx;
				margin-right: 24rpx;
				z-index: 3;

				.item-img {
					margin-right: 8rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
			
			
			.tops{
				position: absolute;
				top: -80rpx;
				left: 0;
				z-index: 1;
			}
			.header-bg{
				width: 100%;
				height: 200rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
			}
		}
		.main {
			position: relative;
			z-index: 5;
			padding-top: 160rpx;
			.prize {
				position: absolute;
				top: -40rpx;
				left: 32rpx;

				.prize-item {
					width: 480rpx;
					height: 56rpx;
					background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
					border-radius: 28rpx 0px 0px 28rpx;
					opacity: 0.5;
					display: flex;
					align-items: center;
					padding: 0rpx 6rpx;

					.item-content {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #fff;

						.shop-icon {
							width: 40rpx;
							height: 40rpx;
							background-size: 100%;
							background-repeat: no-repeat;
							background-position: 50% 50%;
						}
					}

					.item-txt {
						margin-left: 16rpx;
						width: 320rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}

			.img {
				position: absolute;
				top: -40rpx;
				width: 750rpx;
				height: 520rpx;
			}

			.line {
				width: 100%;
				height: 500rpx;
				position: absolute;
				top: -60rpx;
				left: 0;
			}

			.raffle-main {
				position: absolute;
				top: 400rpx;
			}

			.arrows-left {
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				top: 360rpx;
				left: 24rpx;
				z-index: 6;
			}

			.arrows-right {
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				top: 360rpx;
				right: 24rpx;
				z-index: 6;
			}

			.swiper {
				z-index: 3;
				height: 360rpx;
				.swiper-items {
					width: 462rpx;
					height: 460rpx;
					display: flex;
					justify-content: center;


					.swiper-img {
						width: 462rpx;
						height: 360rpx;
						// background-size: 100%;
						// background-position: 50% 50%;
						// background-repeat: no-repeat;
					}
				}
			}
			
			.box-price{
				background-image: url('@/static/new/box/price.png');
				background-size: 100%;
				background-repeat: no-repeat;
				width: 320rpx;
				height: 112rpx;
				z-index: 41;
				position: absolute;
				// bottom: 0;
				left: 216rpx;
				top:540rpx;
				text-align: center;
				color: #1F6099;
				font-family: YouSheBiaoTiHei; 
				padding-top: 50rpx;
				.price{
					font-size: 40rpx;
				}
				.num{
					font-size: 32rpx;
				}
			}

			.footer-swiper {
				z-index: 4;
				margin-top: 140rpx;
				height: 240rpx;

				.footer-swiper-item {
					font-size: 28rpx;
					color: #335C80;
					font-family: YouSheBiaoTiHei;

					.swiper-tai {
						// padding-top: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;

						.box-icon {
							width: 152rpx;
							height: 120rpx;
							z-index: 4;
						}

						.box-icon-active {
							width: 176rpx;
							height: 140rpx;
							z-index: 4;
						}

						.tai-icon-select {
							width: 240rpx;
							height: 226rpx;
							margin-top: -140rpx;
							z-index: 3;
						}

						.tai-icon {
							width: 208rpx;
							height: 220rpx;
							margin-top: -133rpx;
							z-index: 3;
						}

						.tai-txt {
							width: 208rpx;
							height: 120rpx;
							font-size: 28rpx;
							color: #335C80;
							background-image: url('@/static/new/no.png');
							background-size: 100%;
							background-repeat: no-repeat;
							margin-top: -126rpx;
							z-index: 3;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.tai-txt-active {
							width: 240rpx;
							height: 144rpx;
							font-size: 28rpx;
							color: #335C80;
							background-image: url('@/static/new/y.png');
							background-size: 100%;
							background-repeat: no-repeat;
							margin-top: -143rpx;
							z-index: 3;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}

					.footer-swiper-img {
						width: 150rpx;
						height: 116rpx;
					}
				}
			}

			.footer {
				padding: 0rpx 0rpx 0 40rpx;
				margin-top: -70rpx;
				display: flex;
				align-items: center;

				.more {
					// display: inline-block;
					font-size: 28rpx;
					color: #FFFFFF;
					position: relative;

					.game-icon {
						width: 122rpx;
						height: 170rpx;
					}

					.more-txt {
						width: 132rpx;
						text-align: center;
						margin-top: -20rpx;
						// position: absolute;
						// bottom: 10rpx;
					}
				}

			}
		}

		.dlg {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 9999;
			display: flex;
			align-items: center;
			justify-content: center;

			.dlg-main {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.dlg-swiper {
					// width: 402rpx;
					width: 750rpx;
					height: 580rpx;
					border-radius: 20rpx;

					.dlg-swiper-item {
						width: 468rpx;
						height: 580rpx;
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.dlg-swiper-img {
							width: 468rpx;
							height: 580rpx;
							border-radius: 20rpx;
							background-repeat: no-repeat;
							background-size: 100%;
							background-position: center;
							transform: scale(1);
							transition: transform 0.3s ease-in-out 0s;
						}
					}

				}

				.dlg-close-img {
					margin-top: 23rpx;
					width: 64rpx;
					height: 64rpx;
					z-index: 9999;
				}
			}
			.activity-main{
				flex-direction: column;
				width: 480rpx;
				height: 608rpx;
				background-image: url('@/static/new/box/hdtc.png');
				background-repeat: no-repeat;
				background-size: 100%;
				.dlg-title{
					display: block;
					margin: 0 auto;
					width: 148rpx;
					height: 52rpx;
				}
				.activity-img{
					width: 448rpx;
					height: 440rpx;
					border-radius: 20rpx;
					display: block;
					margin: 20rpx auto;
					z-index: 2;
				}
				.now-buy{
					width: 348rpx;
					// height: 120rpx;
					display: block;
					margin: -120rpx auto 0 auto;
					z-index: 1;
				}
				.dlg-close-img {
					display: block;
					width: 64rpx;
					height: 64rpx;
					z-index: 9999;
					margin: -120rpx auto 0 auto;
				}
			}
			.buy-main{
				width: 480rpx;
				height: 640rpx;
				background-image: url('@/static/new/index/bg.png');
				background-size: 100%;
				background-repeat: no-repeat;
				.buy-header{
					padding-top: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.header-icon{
						width: 24rpx;
						height: 24rpx;
					}
					.header-txt{
						font-weight: 800;
						font-size: 32rpx;
						color: #143D66;
						margin: 0 16rpx;
					}
				}
				.dlg-tip{
					text-align: center;
					margin-top: 8rpx;
					font-size: 24rpx;
					color: #528FCC;
				}
				.btn-main{
					height: 480rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					.btn-buy{
						width: 400rpx;
						height: 188rpx;
						background-size: 100%;
						background-repeat: no-repeat;
						// display: flex;
						// justify-content: center;
						padding-left: 96rpx;
						padding-top: 52rpx;
						.buy-title{
							width: 208rpx;
							height: 72rpx;
						}
					}
					.one{
						background-image: url('@/static/new/index/1.png');
					}
					.three{
						background-image: url('@/static/new/index/3.png');
					}
					.five{
						background-image: url('@/static/new/index/5.png');
					}
				}
				
			}
			.close-buy{
				width: 64rpx;
				height: 64rpx;
				display: block;
				margin: 129rpx auto 0 auto;
			}
			.tip-dlg{
				.tip-main{
					width: 480rpx;
					height: 648rpx;
					background-image: url('@/static/new/tip/card.png');
					background-repeat: no-repeat;
					background-size: 100%;
					.tip-icon{
						width: 112rpx;
						height: 52rpx;
						display: block;
						margin: 0 auto;
					}
					.tip-txt{
						padding-top: 364rpx;
						font-weight: 800;
						font-size: 40rpx;
						color: #143D66;
						text-align: center;
					}
					.tip-sub{
						margin: 0 auto;
						margin-top: 24rpx;
						width: 352rpx;
						font-size: 24rpx;
						color: #528FCC;
					}
				}
				.tip-btn{
					margin-top: 64rpx;
					width: 480rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.btn-icon{
						width: 228rpx;
						height: 96rpx;
						font-size: 44rpx;
						color: rgba(255,255,255,0.9);
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: YouSheBiaoTiHei; 
					}
					.now{
						background-image: url('@/static/new/tip/btn.png');
						background-repeat: no-repeat;
						background-size: 100%;
					}
				}
				.close-tip{
					width: 64rpx;
					height: 64rpx;
					display: block;
					margin: 84rpx auto 0 auto;
				}
			}
		}
		.ad-scroll{
			height: 752rpx;
			padding: 44rpx 32rpx 0 32rpx;
			.ad-img{
				width: 686rpx;
				height: 202rpx;
				margin-bottom: 24rpx;
			}
		}
		
		.custom-toast{
			position: fixed;
			width: 100%;
			height: 100vh;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 999999;
			.toast-txt{
				z-index: 999999;
				border-radius: 6rpx;
				padding: 6rpx 26rpx;
				background-color: rgba(0,0,0,0.8);
				color: #fff;
				font-size: 28rpx;
			}
		}
	}
</style>