<template>
	<view class="new-index-page">
		
		<view class="free-main">
			<view class="free" @click="freeCk">免费试玩</view>
		</view>
		<!-- 背景头部 -->
		<image src="@/static/home/zm.gif" mode="aspectFit" class="top-zm-icon"></image>
		<image src="@/static/home/top.png" mode="aspectFit" class="top-img"></image>
		<view class="home-main">
			<view class="home-header">
				<view class="header-activity">
					<!-- <view class="header-activity-item coupon">
						<view class="activity-dian" v-if="isCouponRed"></view>
						天天领劵
					</view>
					<view class="header-activity-item card">
						<view class="activity-dian" v-if="isCardRed"></view>
						卡包
					</view>
					<view class="header-activity-item wechat">
						<view class="activity-dian" v-if="isWechatRed"></view>
						微信福利
					</view> -->
					<view class="header-activity-item task" @click="signCk">
						<!-- <view class="activity-dian" v-if="isTaskRed"></view> -->
						<image src="@/static/home/7.png" mode="aspectFit" class="activity-dian" v-if="isTaskRed"></image>
						<image src="@/static/home/qd.gif" mode="aspectFit" style="width: 107rpx;height: 109rpx;" class=""></image>
						<!-- <image src="@/static/home/rw.gif" mode="aspectFit" style="width: 107rpx;height: 109rpx;" class=""></image> -->
					</view>
					<!-- <view class="header-activity-item task">
						<view class="activity-dian" v-if="isTaskRed"></view>
						<image src="@/static/activity-icon/yhxy.png" mode="aspectFit" style="width: 109rpx;height: 109rpx;" class=""></image>
					</view> -->
					
					<!-- <view class="header-activity-item task" @click="signCk">
						<view class="activity-dian" v-if="isTaskRed"></view>
						任务签到
					</view> -->
				</view>
				<view class="header-rule">
					<view class="rule-item" @click="rule">
						玩法
					</view>
					<!-- <a :href="customer" class="rule-item" target="_blank">客服</a> -->
					<!-- <web-view :src="customer" v-if="isCustomerPath" style="position: fixed;top: -1000rpx;"></web-view> -->
					<view class="rule-item" @click="handleCustomer">客服</view>
					
						<view class="rule-item" @click="goAgreement">
							协议
							<image src="@/static/home/7.png" mode="aspectFit" class="dian" v-if="isAgreementRed"></image>
						</view>
					<!-- <image src="@/static/activity-icon/yhxy.png" mode="" style="width: 64rpx;height: 64rpx;margin-left: 11rpx;" @click="goAgreement"></image> -->
					<!-- <view class="rule-item rotate-music">
						<image src="@/static/home/music.png" mode="" class="music"></image>
					</view> -->
				</view>
			</view>
			<!-- <view class="rank" @click="rankingCk">
				<view class="rank-item">
					积分排行
					<image src="@/static/home/7.png" mode="aspectFit" class="activity-dian" v-if="isRankRed"></image>
				</view>
			</view> -->

			<image src="@/static/home/z.png" mode="" class="left-icon" @click="changeSwiper('left')"></image>
			<image src="@/static/home/y.png" mode="" class="right-icon" @click="changeSwiper('right')"></image>



			<!-- <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> -->
			<!-- 中奖播报 -->
			<view class="prize" v-if="boxResultList.length > 0">
				<view class="prize-item">
					<swiper vertical="true" class="trumpet-swiper" circular autoplay disable-touch>
					      <swiper-item class="trumpet-swiper-item" v-for="(item,index) in boxResultList" :key="index" @click="prizeCk(item)">
					       <view class="item-txt">
							   {{item.nickName}}开启<text style="color: red;">{{item.boxName}}</text>得到了<text style="color: yellow;">{{item.productName}}</text>
						   </view>
					      </swiper-item>
					</swiper>
				</view>
			</view>

			<!-- <view class="trumpet">
			   <image src="@/static/zy/index/trumpet.png" mode="aspectFit" class="trumpet-icon"></image>
			   <swiper vertical="true" class="trumpet-swiper" circular autoplay disable-touch>
			         <swiper-item class="trumpet-swiper-item" v-for="(item,index) in boxResultList" :key="index">
			          <view class="trumpet-txt">{{item}}</view>
			         </swiper-item>
			   </swiper>
			  </view> -->
			
			


			
			<view class="box-main">
				<image src="@/static/home/bj.gif" mode="aspectFit" class="jt-icon"></image>
				<swiper class="swiper" circular :current="current" @change="swiperChange" :autoplay="autoplay" :interval="interval">
					<swiper-item class="swiper-items" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
						<!-- 气泡 -->
						<view style="position: absolute;top: 0;width: 100%;height: 100%;top: 10%;z-index: 11;">
							<bubbleCom></bubbleCom>
						</view>
						<view class="swiper-img-view">
							<template v-if="item.coverResource">
								<image v-if="item.coverResource" :src="item.coverResource.url"
									mode="aspectFit" class="swiper-img"></image>
							</template>
						</view>
						
						<!-- <view class="seal" v-if="list.length > 0">
							<view class="seal-txt">
								<view v-if="item.itemFirst">{{gradeObj[item.itemFirst.grade]}}</view>
								<template v-if="item.itemFirst">
									<view class="seal-num" v-if="Number(item.itemFirst.curStock) == -1">无限量</view>
									<view class="seal-num" v-else>剩{{Number(item.itemFirst.curStock) || 0}}件</view>
								</template>
								
							</view>
						</view> -->


					</swiper-item>
				</swiper>
				<view class="look" @click="goDetail(list[current])">
					<image src="@/static/home/shou.png" mode="" class="look-img"></image>
					<view class="look-txt">查看宝贝</view>
				</view>
				<!-- 新手引导 -->
				<!-- <image src="@/static/guidance-index/xsyd.png" mode="aspectFit" class="guidance-icon" @click="guidanceOpen"></image> -->
				<view class="footer-tai">
					<!-- <template v-for="(item,index) in list[current].price">
						<text class="price" v-if="item.type === 'SINGLE'" :key="index">{{item.settlement || '/'}}</text>
					</template> -->
					<template v-if="list.length > 0 && list[current]">
						<template v-for="(item,index) in list[current].price">
							<view class="box-price" v-if="item.type === 'SINGLE'" :key="index">
								<text class="price-last">¥</text>
								{{Number(item.settlement)}}
								<text class="price-last">元/个</text>
							</view>
						</template>
					</template>
				</view>
				
				<view class="footer">
					<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 active-box" v-if="current === index">
								<image src="@/static/home/box-s-h.png" mode="" class="box-s-h"></image>
								<image src="@/static/home/box-s-t.png" mode="" class="box-s-t"></image>
								<view class="swiper-name-active">{{item.name}}</view>
							</view>
							<view class="swiper-tai" v-else>
								<image src="@/static/home/box-h.png" mode="" class="box-h"></image>
								<image src="@/static/home/box-t.png" mode="" class="box-t"></image>
								<view class="swiper-name">{{item.name}}</view>
							</view>
						</swiper-item>
					</swiper>
					<view class="footer-btn">
						<!-- <view class="footer-activity"><view>更多</view><view style="margin-top: -16rpx;">活动</view></view> -->
						<!-- <view class="footer-activity"><view>更多</view><view style="margin-top: -16rpx;">活动</view></view> -->
						<image src="@/static/home/gdhd.gif" class="footer-activity-gif" mode="aspectFit" @click="lookMore"></image>
						<image src="@/static/home/7.png" mode="aspectFit" class="dian" v-if="isMoreRed"></image>
						<!-- <view class="footer-open" @click="buy">立即开启</view> -->
						<image src="@/static/home/ljkqq.gif" class="footer-open-gif" mode="aspectFit" @click="buy"></image>
						<!-- <view class="footer-open" @click="buy">立即开启</view> -->
					</view>
					<view class="footer-txt">谢绝未成年人使用或在监护人的监督下使用</view>
				</view>

			</view>
		</view>
 <!-- v-if="activityDetail" -->
		<!-- 右侧浮窗 -->
		<floatWindow :isClick="guidanceFloatWindow" :zIndex="zIndex" :activityObj="activityObj" :list="boxActivityLeftList" :consumptionTime="activityDetail.expireTime" :source="activityDetail.source" :isConsumption="activityDetail.source === 'PREFERENTIAL_DAY'" :isDiscounts="activityDetail.source === 'ROOKIE'" :icon='lastTopObj.icon.coverResource.url' @handleActivityTopLast='handleActivityTopLastFn' @click="floatCk"></floatWindow>
	
		
		<!-- 活动盲盒弹窗 && !guidanceVisible -->
		 <!-- & !cellVisible -->
		<view class="dlg" v-if="activityShow">
			<template v-for="(item,index) in boxActivityList">
				<template v-if="activityShow && item.visible">
					<view class="activity-main" :key="index">
						<template v-if="item.img">
							<image v-if="item.img.coverResource" :src="item.img.coverResource.url" mode="aspectFit" class="activity-img" @click="goActivityDetail(item)"></image>
						</template>
						<image v-if="item.button.coverResource" :src="item.button.coverResource.url" @click="goActivityPre(item)" class="now-buy" mode=""></image>
						<image src="@/static/order/close.png" mode="" class="dlg-close-img" @click="activityClose(index)"></image>
					</view>
				</template>
			</template>
		</view>
		<!-- 点击打开活动盲盒弹窗 -->
		<view class="dlg" v-if="activityClickShow">
			<template v-for="(item,index) in boxActivityLeftList">
				<template v-if="activityClickShow && item.visible">
					<view class="activity-main" :key="index">
						<template v-if="item.img">
							<image v-if="item.img.coverResource" :src="item.img.coverResource.url" mode="aspectFit" class="activity-img" @click="goActivityDetail(item)"></image>
						</template>
						<image v-if="item.button.coverResource" :src="item.button.coverResource.url" @click="goActivityPre(item)" class="now-buy" mode=""></image>
						<image src="@/static/order/close.png" mode="" class="dlg-close-img" @click="activityClickShow = false"></image>
					</view>
				</template>
			</template>
		</view>
		<!-- 免费试玩 -->
		<popup-view v-model="freeVisible" mode="bottom" border-radius="15" z-index="1000" :maskCloseAble="false" closeable>
			<BuyFreeBoxCom :detailData="freeDetail" @isOk="freeVisible = false" :boxType="boxType" @coinDeficit="coinDeficit" :payNum="payNum"></BuyFreeBoxCom>
		</popup-view>
		<popup-view v-model="show" mode="bottom" border-radius="15" z-index="1000" :maskCloseAble="false" closeable>
			<BuyBoxCom :detailData="detailData" @payStatus="payStatus" @isOk="buySuccess" :boxType="boxType" @coinDeficit="coinDeficit" :isActivityClick="isActivityClick"
				@payPaid="payPaid" :payNum="payNum" :typeNum="typeNum"></BuyBoxCom>
		</popup-view>
		<!-- 活动购买 -->
		<popup-view v-model="showActivity" mode="bottom" border-radius="45" z-index="1000" backgroundColor="transparent !important">
			<BuyActivityBox :detailData="activeDetail" @isOk="buySuccess" @payStatus="payStatus" :boxType="boxType" @coinDeficit="coinDeficit" :isActivityClick="isActivityClick"
				@payPaid="payPaid" :payNum="payNum" @close="showActivity = false"></BuyActivityBox>
		</popup-view>
		<template v-if="isPayDlgVisible">
			<isPayDlgVue @isOk="isPayStatus" @isCancel="isCancelCk" v-if="isPayDlgVisible" @againPay="againPay"></isPayDlgVue>
		</template>

		<!-- 去充值 -->
		<popup-view v-model="isTopUp" mode="bottom" border-radius="15" z-index="1000" :maskCloseAble="false"
			:closeable="true" @input="coinDeficitComClose">
			<coinDeficitCom @close="closeTop" @sucClose="sucClose" :close='isClose'></coinDeficitCom>
		</popup-view>
		<NoOpenCom></NoOpenCom>
		<view class="custom-toast" v-if="isTip">
			<view class="toast-txt">支付成功</view>
		</view>
		
		<popup-view v-model="isPayTip" mode="center" border-radius="15" z-index="1000">
			<view class="log-out">
				<view class="log-out-tip">您今日在本商城的消费已达到1000元。为了确保您的消费安全，请确认是否继续购买。</view>
				<view class="log-out-footer">
					<view class="cancel" @click="closePay">取消支付</view>
					<view class="shu"></view>
					<view class="log-out-submit" @click="submitPay">确定支付</view>
				</view>
			</view>
		</popup-view>
		<!-- 签到 -->
		<view class="dlg" v-if="isSign" @click.stop="closeSign">
			<SignCom @signOk="signOkFn" @close="closeSign"></SignCom>
		</view>
		<!-- 所有页面的弹框 && !guidanceVisible -->
		 <!-- v-if="!activityShow" -->
		<page-popup page="/pages/index/new-index" @click="getPopupMore"></page-popup>
		<!-- 更多活动弹窗 && !guidanceVisible -->
		<view class="dlg" v-if="moreVisible" @click.stop="moreVisible = false">
			<view class="more-bg" @click.stop="">
				<view class="more-header">
					<image src="@/static/home/gdhd-title.png" mode="aspectFit" class="more-title"></image>
					<image src="@/static/home/gdhd-close.png" mode="aspectFit" class="more-close" @click="moreVisible = false"></image>
				</view>
				<scroll-view scroll-y="true" class="more-content">
					<view class="more-item" v-for="(item,index) in moreList" :key="index" :style="{backgroundImage:`url(${item.img.coverResource.url})`}" @click="moreCk(item)">
						<!-- <view class="more-item-title">
							<view class="titles">{{item.title}}</view>
							<image src="@/static/new/mine/back.png" class="title-imgs" mode=""></image>
						</view> -->
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- <customerCom v-if="customerVisible" @isClose="customerVisible = false"></customerCom> -->
		<!-- 查询是否支付 -->
		<!-- <isPayDlgVue @isOk="isPayStatus"></isPayDlgVue> -->
		
		
		<view class="prize-dlg" v-if="prizeVisible">
			<view class="prize-main">
				<view class="header">{{prizeData.nickName | nameFilter}}</view>
				<view class="header-box">{{prizeData.boxName}}-{{priceTypeObj[prizeData.type]}}</view>
				<view class="card" :class="{'rare-icon':prizeData.grade === 'RARE','supreme-icon':prizeData.grade === 'SUPREME','hidden-icon':prizeData.grade === 'HIDDEN','normal-icon':prizeData.grade === 'NORMAL'}">
					<image :src="prizeData.productCoverResource.url" mode="aspectFit" class="shop-img"></image>
					<view class="shop">
						<view class="name">{{prizeData.productName}}</view>
						<view class="name point">商城积分：{{prizeData.productMall}}</view>
						<!--  -->
					</view>
				</view>
				<view style="display: flex;align-items: center;justify-content: center;">
					<view  class="again-icon" @click="buyPrize">来发试试</view>
				</view>
				<image src="@/static/result/close.png" class="close-icon" mode="aspectFit" @click="prizeClose"></image>
			</view>
		</view>
		
		<!-- 新手引导弹窗 guidanceVisible -->
		<view class="guidance-dlg" v-if="false" @click.stop="guidanceAccomplish" @touchmove.stop.prevent>
			<image src="@/static/guidance-index/close.png" class="guidance-close" mode="" @click.stop="guidanceClose"></image>
			<view class="guidance-main">
				<image src="@/static/guidance-index/active-bg.png" mode="" class="guidance-active-icon" v-show="guidanceIndex === 0"></image>
				<view v-show="guidanceIndex === 1" class="guidance-box">
					<image src="@/static/guidance-index/left.png" mode="" class="guidance-box-arr left-arr"></image>
					<image src="@/static/guidance-index/right.png" mode="" class="guidance-box-arr right-arr"></image>
					<image src="@/static/guidance-index/box-icon.png" mode="" class="guidance-box-icon"></image>
				</view>
				<view v-show="guidanceIndex === 2" class="guidance-box-btn">
					<image src="@/static/home/ljkqq.gif" class="guidance-box-btn-gif" mode="aspectFit"></image>
					<!-- <image src="@/static/guidance-index/sz.png" mode="" class="finger-icon"></image> -->
				</view>
				<image src="@/static/guidance-index/buy-icon.png" mode="" class="guidance-buy-icon" v-show="guidanceIndex === 2"></image>
				<view class="free-gu" v-show="guidanceIndex === 3">
					<view class="free">免费试玩</view>
					<image src="@/static/guidance-index/sz.png" mode="" class="finger-icon"></image>
				</view>
				<image src="@/static/guidance-index/free-icon.png" mode="" class="guidance-free-icon" v-show="guidanceIndex === 3"></image>
				<image src="@/static/guidance-index/next.png" mode="" class="guidance-next" @click.stop="guidanceNext" v-show="guidanceIndex < 3"></image>
			</view>
		</view>
		
		
		<view class="agreement-page" :class="{whitePage:isWhite}" v-if="isAgreement">
			<view class="agreement-dlg" v-if="!isWhite">
				<view class="agreement-tip">请阅读并同意以下条款</view>
				<view class="agreement-center">
					为保障您的合法权益，请您先阅读并同意<text class="red" @click.stop="goPage('agreement')">《用户协议》</text>以及<text class="red" @click.stop="goPage('privacy')">《隐私政策》</text>
				</view>
				<view class="agreement-footer">
					<view class="cancel" @click="disagreeCk">不同意并退出</view>
					<view class="shu"></view>
					<view class="agreement-submit" @click="consentCk">同意</view>
				</view>
			</view>
		</view>
		
		<popup-view v-model="isModal" mode="center" border-radius="15" z-index="9999" centerBoxBgColor='transparent'>
			<view class="activity-rank-modal">
				<view class="rank">
					<template v-if="lastTopObj.topList">
						<template v-for="(item,index) in lastTopObj.topList">
							<view class="rank-item" :key="index" v-if="index <= 4">
								<view class="rank-item-info">
									<view class="name">{{index+1}}.{{item.nickname}}</view>
									<view class="num"><view>{{Number(item.period) + 1}}轮{{Number(item.periodNum) + 1}}关</view></view>
								</view>
								<view class="award">
									<image src="@/static/activity/lw.png" mode="" class="award-icon"></image>
									<view class="award-txt">排名奖励：
										<template v-if="item.rewardEntityList">
											<span v-for="(childItem,childIndex) in item.rewardEntityList" :key="childIndex+22">
												{{childItem.info.abbreviation}}*{{childItem.num}}、
											</span>
										</template>
									
								</view>
								</view>
							</view>
						</template>
					</template>
					<view class="rank-footer" v-if="lastTopObj.rewardRule">{{lastTopObj.rewardRule}}</view>
				</view>
				<image src="@/static/order/close.png" mode="" class="activity-rank-close" @click="modalClose"></image>
			</view>
		</popup-view>
		
		
		<!-- <popup-view v-model="cellVisible" mode="center" border-radius="15" z-index="9999" centerBoxBgColor='transparent'>
			<view class="activity-rank-dlg" @click.stop="">
				<image src="@/static/activity/dlg.png" mode="aspectFit" style="" class="activity-rank-dlg-img" @click="goActivity"></image>
				<image src="@/static/order/close.png" class="activity-rank-dlg-close" mode="aspectFit" @click="cellClose"></image>
			</view>
		</popup-view> -->
		
		
	</view>
</template>

<script>
	import floatWindow from '@/pages/components/floatWindow.vue'
	import BuyBoxCom from './components/buyBox.vue'
	import BuyFreeBoxCom from './components/buyFreeBox.vue'
	import BuyActivityBox from './components/buyActivityBox.vue'
	import coinDeficitCom from './components/coinDeficit.vue'
	import NoOpenCom from './components/noOpen.vue'
	import trumpetCom from './components/trumpet.vue'
	import reportClickFn from '@/utils/report.js'
	import bubbleCom from './components/bubble.vue'
	import SignCom from './components/sign.vue'
	import isPayDlgVue from '@/pages/components/isPayDlg.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,
		boxActivityListApi,
		promptCountApi,
		boxResultApi,
		noOpenListApi,
		boxesChannelPinnedApi,
		popupAdPageApi,
		popupAdPageChannelApi,
		boxOrderPaidApi,
		boxesDetail,
		activityIconApi,
		indexGuideApi,
		setIndexGuideApi,
		activityTopLastApi
	} from '@/API/index.js'
	import {
		mpScheme
	} from '@/API/pay.js'
import { signInInfo,signIn,taskListApi,taskReceive } from '@/API/sign.js'
import customerCom from '@/pages/components/customer.vue'

	import {
		showWebview
	} from '@/utils/webViewCom.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: [],
				bannerTopList: [],
				optionTxt: '',
				optionSign: '',
				footerCurrent: 0,
				gradeObj: {
					NORMAL: "普通",
					HIDDEN: "隐藏",
					RARE: "稀有",
					SUPREME: "至尊"
				},

				priceTypeObj: {
					SINGLE: "一发入魂",
					TRIPLE: "欧气三连",
					PENTA: "霸气五连"
				},
				show: false,
				boxType: '', //盲盒类型
				isTopUp: false,
				isTip: false,
				rookieTimer: null,
				boxResultTimer: null,
				boxResultList: [], //开奖结果
				isOpen: false,
				isClose: false,
				visible: false,
				autoplay:true,//是否自动播放
				interval:10000,
				isRankRed:false,//排行榜小红点是否显示
				isCouponRed:false,//天天领劵小红点
				isCardRed:false,//卡包小红点
				isWechatRed:false,//微信福利小红点
				isTaskRed:false,//任务签到小红点
				isAgreementRed:false,//协议小红点
				isMoreRed:false,//协议小红点
				
				
				isActivityClick:false,//是否点击打开弹窗
				isPayTip:false,//已经支付超过一千元显示
				boxActivityList:[],
				boxActivityLeftList:[],//用于右侧浮窗按钮
				activityShowIndex:null,
				floatCkVis:false,//true时点击右侧浮窗打开
				isPay:false,//是否支付跳转
				isSign:false,//签到弹窗
				timeCur:'',
				moreVisible:false,
				moreList:[],
				
				showActivity:false,//活动购买弹窗
				isPayDlgVisible:false,
				paidData:{},//用于支付轮训参数
				payNum:0,
				customerVisible:false,
				isCustomerPath:false,
				
				
				detailData:{},
				activityClickShow:false,
				activityObj:{
					endTime: "",
					icon: {
						cover: "",
						coverResource: {path: "",url:''},
						type: "",
					},
					id: ""
				},
				freeVisible:false,//免费试玩
				prizeData:{
					productCoverResource:{}
				},
				prizeVisible:false,
				guidanceVisible:false,//新手引导
				guidanceIndex:0,
				zIndex:10,//右侧浮床层级
				guidanceFloatWindow:false,//右侧浮窗是否显示新手引导背景
				guidanceBtn:false,
				isAgreement:false,
				isWhite:false,
				activeDetail:{},
				freeDetail:{},
				typeNum:'',
				isModal:false,
				lastTopObj:{
					icon:{
						coverResource:{
							url:''
						}
					}
				},
				typeObj:{
					POINTS:'积分',
					COUPON:'优惠券',
					PROMPT:'提示卡',
					FORMULA:'组合奖励',
					PRODUCT:'商品'
				},
				cellVisible:false,//跳格子广告弹窗
			}
		},
		components: {
			floatWindow,
			BuyBoxCom,
			coinDeficitCom,
			NoOpenCom,
			trumpetCom,
			bubbleCom,
			SignCom,
			BuyActivityBox,
			isPayDlgVue,
			customerCom,
			BuyFreeBoxCom
		},

		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
				}
			},
			nameFilter: function(
				value
				) { //过万处理  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万
				if (!value) return ''; // 如果value是null、undefined或空字符串，则直接返回空字符串
				  const length = value.length;
				  if (length >= 3) {
				    // 长度超过3个字符，保留头尾，中间用**代替
				    return value.charAt(0) + '**' + value.charAt(length - 1);
				  } else if (length === 2) {
				    // 长度为2个字符，保留头位，后面用*代替
				    return value.charAt(0) + '*';
				  } else {
				    return value;
				  }
			}

		},
		watch:{
			show(){
				console.log("---------show-----------:",this.show)
				if(!this.show){
					this.typeNum = ''
				}
			},
			freeVisible(){
				if(!this.freeVisible){
					this.autoplay = true
				}
			},
		},
		onLoad(option) {
			// if(option.token){
			// 	uni.setStorageSync('box-token',token)
			// }
			
			this.loginParams = option
			let userId = ''
			if (option.user_id) {
				userId = option.user_id
			}
			if (option.userid) {
				userId = option.userid
			}
			// url里有appid和userid的时候需要登录
			if (option.sign) {
				this.login(option)
			} else if (!option.sign && option.appid && userId) {
				uni.setStorageSync('box-appid',option.appid)
				// uni.setStorageSync('box-appid', option.appid)
				this.loginParams.userid = userId
				// 获取当前时间的秒级时间戳
				const currentTimeInSeconds = Math.floor(Date.now() / 1000);
				this.appid = option.appid
				this.userid = userId
				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.getPopupAdPage()
				this.getBoxesPinned()
				// if(this.categoriesIndex === 0){
				// 	this.getBoxesPinned()
				// }else{
				// 	this.getBoxes()
				// }
			}
			
			// this.getNoOpenList()
			// this.getBoxResult()
			// this.boxResultTimer = setInterval(() => {
			// 	this.getBoxResult()
			// }, 6000)
			
			
			
			// 是否第一次打开页面(第一次进入页面排行榜小红点显示)
			if (!uni.getStorageSync('firstTime')) {
				this.isRankRed = true//排行榜小红点
				this.isCouponRed = true//天天领劵小红点
				this.isCardRed = true//卡包小红点
				this.isWechatRed = true//微信福利小红点
				this.isTaskRed = true//任务签到小红点
				this.isAgreementRed = true//协议小红点
				this.isMoreRed = true
				uni.setStorageSync('firstTime', true)
			}
			this.getBoxActivity()
		},
		onShow() {
			
			this.getBoxResult()
			this.boxResultTimer = setInterval(() => {
				this.getBoxResult()
			}, 6000)
			if (uni.getStorageSync('box-token')) {
				this.getActivityIcon()
				this.getIndexGuide()
			}
			
			// if(this.isCustomerPath){
			// 	this.isCustomerPath = false
			// 	uni.switchTab({
			// 		url:`/pages/index/new-index`
			// 	})
			// }
			uni.$on('updateTabData', (data) => {
				// console.log("----------data------------:",data)
				this.visible = false
				this.showActivity = false
				if(data.type){
					this.typeNum = data.type
				}
				if(data.boxId){
					this.boxType = 'buy'
					this.visible = false
					this.show = false
					boxesDetail({
						id: data.boxId,type:data.type
					}).then(res => {
						// console.log("----------res------------:",res)
						if (res.code === 200) {
							this.detailData = res.data
							this.show = true
						} else {
							this.$api.msg(res.message)
						}
					})
				}else{
					setTimeout(() => {
						this.activityShow = false
						this.activityClickShow = false
						// this.visible = true
						if (uni.getStorageSync('box-token')) {
							this.getSignInInfo()
							this.getBoxActivity()
						}
					}, 500)
				}
				
				
			});
			if(!this.isPay){
				if (uni.getStorageSync('box-token')) {
					this.getUserInfo()
					// this.getCustomer()
					// this.getBoxActivity()
					this.getBoxesPinned()
					this.getSignInInfo()
				} else {
					this.getBoxesPinned()
				}
			}
			this.getSignInInfo()
			this.getActivityTopLast()
		},
		methods: {
			// 关闭跳格子弹窗
			cellClose(){
				this.visible = true
				this.cellVisible = false
			},
			goActivity(){
				uni.navigateTo({
					url:'/pages/index/activity'
				})
			},
			handleActivityTopLastFn(){
				this.isModal = true
			},
			getActivityTopLast(){
				uni.showLoading()
				activityTopLastApi().then(res => {
					uni.hideLoading()
					console.log("================",res)
					if(res.code === 200){
						if(res.data){
							this.lastTopObj = res.data
						}else{
							this.lastTopObj = {
								icon:{
									coverResource:{
										url:''
									}
								}
							}
						}
						
					}else{
						this.$api.msg(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			goAgreement(){
				this.isAgreementRed = false
				uni.navigateTo({
					url:`/pages/agreement/total`
				})
			},
			disagreeCk(){
				this.isWhite = true
				// uni.reLaunch({
				// 	url:`/pages/mine/white`
				// })
			},
			consentCk(){
				this.isAgreement = false
				this.guidanceVisible = true
			},
			goPage(type){
				let path = ''
				if(type === 'agreement'){
					path = '/pages/agreement/index'
				}else{
					path = '/pages/agreement/privacy'
				}
				uni.navigateTo({
					url:path
				})
			},
			closeSign(){
				uni.showLoading()
				signInInfo().then(res => {
					uni.hideLoading()
					if(res.code === 200){
						this.getTime()
						this.isSign = false
						if(res.data.details.length > 0){
							let signObj = {}
							res.data.details.forEach(item => {
								signObj[item.dt] = item.sign
							})
							if(signObj[this.timeCur]){
								this.isTaskRed = false
							}else{
								this.isTaskRed = true
							}
						}
					}else{
						this.$api.msg(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			getIndexGuide(){
				indexGuideApi().then(res => {
					if(res.code === 200){
						this.guidanceVisible = res.data
						// this.isAgreement = res.data
					}else{
						this.$api.msg(res.message)
					}
				})
			},
			// 免费试玩
			freeCk(){
				console.log(this.list[this.current])
				// 1788480746537656322  固定玩转电竞
				this.list.forEach(item => {
					if(item.id === '1788516794714071041'){
						this.freeDetail = item
					}
				})
				
				this.autoplay = false
				this.freeVisible = true
				this.guidanceVisible = false
			},
			getActivityIcon(){
				activityIconApi().then(res => {
					console.log(res)
					if(res.code === 200){
						if(res.data){
							if (!uni.getStorageSync('activityShow')) {
								this.cellVisible = true
							}
						}
						this.activityObj = res.data
						console.log("this.activityObj:",this.activityObj)
						// let endTime = res.data.endTime
						
						// setInterval(() => {
						// 	if(this.activityObj.endTime){
						// 		const currentTime = Math.floor(Date.now() / 1000);
						// 		const targetTime = new Date(endTime).getTime() / 1000;
						// 		const countdown = targetTime - currentTime;
						// 		if (countdown <= 0) {
						// 			this.isShow = false
						// 			this.endTime = 'Expired'
						// 			// this.$set(this.activityObj,'endTime','Expired')
						// 		} else {
						// 			this.isShow = true
						// 			const hours = Math.floor(countdown / 3600);
						// 			const minutes = Math.floor((countdown % 3600) / 60);
						// 			const seconds = countdown % 60;
						// 			this.endTime = `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`
						// 			// this.$set(this.activityObj,'endTime',`${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`)
						// 		}
						// 	}
						// },1000)
						
						
					}else{
					}
				})
			},
			// getActivityIcon(){
			// 	activityIconApi().then(res => {
			// 		console.log(res)
			// 	})
			// },
			isCancelCk(){
				this.isPayDlgVisible = false
			},
			// 购买弹框回传回来的方法 用于是否打开是否支付弹框
			payStatus(val){
				this.isPayDlgVisible = true
				console.log(val)
				this.paidData = val
			},
			isPayStatus(){
				console.log("this.paidData.no:",this.paidData.no)
					boxOrderPaidApi({
						no:this.paidData.no
					}).then(payResult => {
						console.log("payResult:",payResult)
						if (payResult.data) {
							this.$api.msg('支付成功')
							this.isPayDlgVisible = false
							try{
								console.log(`/pages/index/draw?no=${this.paidData.no}&boxId=${this.paidData.boxId}&type=${this.paidData.type}`)
							}catch(e){
								console.log("我出错了---------------")
							}
							
							
							
							
							if(this.paidData && this.paidData.no && this.paidData.boxId && this.paidData.type){
								console.log(`--------------------/pages/index/draw?no=${this.paidData.no}&boxId=${this.paidData.boxId}&type=${this.paidData.type}`)
								uni.navigateTo({
									url: `/pages/index/draw?no=${this.paidData.no}&boxId=${this.paidData.boxId}&type=${this.paidData.type}`
								})
							}else{
								// 直接跳转开奖结果
								noOpenListApi().then(resss => {
									console.log("resss:",resss)
									if(resss.code === 200){
										if(resss.data.length > 0){
											uni.redirectTo({
												url:`/pages/index/draw?noOpen=noOpen`
											})
										}
									}else{
										this.$api.msg(resss.message)
									}
								}).catch(err => {
									
								})
							}
							
							
							// uni.navigateTo({
							// 	url: `/pages/index/draw?no=${this.paidDatano.no}&boxId=${this.paidData.boxId}&type=${this.paidData.type}`
							// })
							uni.hideLoading()
						}else{
							this.$api.msg('未查询到支付结果')
							uni.hideLoading()
						}
					}).catch(err => {
						uni.hideLoading()
					})
			},
			againPay(){
				this.payNum += 1
			},
			lookMore(){
				this.isMoreRed = false
				// this.$api.msg('暂未开放，敬请期待')
				this.getMore()
			},
			moreCk(item){
				if (item.img.type === 'INSIDE') {
					if (item.img.url === '/pages/index/new-index' || item.img.url === '/pages/shop/index' || item.img
						.url === '/pages/mine/boxRecrd' || item.img.url === '/pages/mine/mine') {
							uni.switchTab({
								url: `${item.img.url}`,
							});
							uni.$emit('updateTabData', {newData:'newData'});
					} else {
						uni.navigateTo({
							url: `${item.img.url}`
						})
					}
				
				} else {
					window.location.href = item.img.url
				}
				this.moreVisible = false
			},
			getPopupMore(item,val){
				if(val === 'img'){
					if(item.img.url){
						uni.navigateTo({
							url:item.img.url
						})
					}else{
						this.getMore()
					}
				}else{
					if(item.button.url){
						uni.navigateTo({
							url:item.button.url
						})
					}else{
						this.getMore()
					}
				}
				
			},
			getMore(){
				popupAdPageChannelApi({
					page:'/pages/index/new-index',
					type: 'CAROUSEL'
				}).then(res => {
					if (res.code === 200) {
						this.moreList = res.data.reverse()
						this.moreVisible = true
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			getTime(){
				let now = new Date();
				let year = now.getFullYear();
				let month = now.getMonth() + 1;  // 月份从0开始，所以要加1
				let day = now.getDate();
				let hour = now.getHours();
				let minute = now.getMinutes();
				let second = now.getSeconds();
				month = month < 10 ? `0${month}` : month
				day = day < 10 ? `0${day}` : day
				this.timeCur = `${year}-${month}-${day}`
			},
			getSignInInfo(){
				uni.showLoading()
				signInInfo().then(res => {
					uni.hideLoading()
					if(res.code === 200){
						this.getTime()
						console.log(res)
						if(res.data.details.length > 0){
							let signObj = {}
							res.data.details.forEach(item => {
								signObj[item.dt] = item.sign
							})
							if(signObj[this.timeCur]){
								this.isTaskRed = false
							}else{
								this.isTaskRed = true
							}
						}
					}else{
						this.$api.msg(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			signOkFn(){
				// this.isTaskRed = false
				this.getSignInInfo()
			},
			closePay(){
				this.isPayTip = false
			},
			submitPay(){
				this.isPayTip = false
			},
			// 签到
			signCk(){
				// 首页签到点击次数
				reportClickFn('index_sign_clk');
				if (uni.getStorageSync('box-token')) {
					// this.isSign = true
					uni.navigateTo({
						url:`/pages/index/sign`
					})
				}else{
					uni.navigateTo({
						url:`/pages/login/login`
					})
				}
				
			},
			rankingCk() {
				this.isRankRed = false
				// 首页排行榜点击次数
				reportClickFn('index_ranging_clk');
				uni.navigateTo({
					url: `/pages/index/ranking`
				})
			},
			getPopupAdPage() {
				popupAdPageApi({
					page: '/pages/index/new-index',
					type: "CAROUSEL"
				}).then(res => {
					if (res.code === 200) {
						this.bannerTopList = res.data
						// if(this.list.length > 0){
						// 	this.visible = true
						// }
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			// 关闭充值弹窗
			coinDeficitComClose() {
				this.isClose = !this.isClose
				console.log("aasdsds")
			},
			async openWeapp(amount) {
				console.log("uniCloud:", uniCloud)
				try {
					const res = await uniCloud.callFunction({
						name: 'public',
						data: {
							action: 'getUrlScheme',
							options: `amount=${amount}`
						}
					});

					if (res.result && res.result.openlink) {
						// 跳转到微信小程序
						uni.navigateTo({
							url: res.result.openlink
						});
					} else {
						console.error('未能获取有效的链接：', res);
					}
				} catch (error) {
					console.error('调用云函数失败：', error);
				}
			},
			// // 获取是否有开奖记录
			// getNoOpenList(){
			// 	noOpenListApi().then(res => {
			// 		console.log(res)
			// 		if(res.code === 200){
			// 			// this.list = res.data
			// 			this.isOpen = res.data.length > 0 ? true : false
			// 		}else{
			// 			this.$api.msg(res.message)
			// 		}
			// 	}).catch(err => {

			// 	})
			// },
			goxcx() {
				mpScheme().then(res => {
					console.log(res)
					if (res.code === 200) {
						location.href = res.data
					} else {
						this.$api.msg(res.message)
					}
				})
				// document.write('weixin://dl/business/?t=8LzmkyltYAh')
				// location.href = "weixin://dl/business/?t=8LzmkyltYAh"
			},
			// // 获取滚动公告
			getBoxResult() {
				boxResultApi().then(res => {
					if (res.code === 200) {
						let arr = []
						res.data.forEach(item => {
							let time = ''
							const date = new Date(item.time * 1000);
							const now = new Date();
							const diffInSeconds = Math.abs(Math.floor((now - date) / 1000));
							if (diffInSeconds === 0) {
								time = `刚刚`
							} else {
								time = `${diffInSeconds}秒前`
							}
							let nickName = item.nickName.length > 4 ? item.nickName.substring(0, 3) +
								'...' : item.nickName;
							arr.unshift({text:`开启得到了`,boxName:item.boxName,productName:item.productName,data:item,nickName,productMall:item.productMall})
						})

						arr.forEach(item => {
							const match = this.boxResultList.find(bItem => bItem === item);
							if (!match) {
								this.boxResultList.unshift(item);
							}
						})
						if (this.boxResultList.length > 20) {
							this.boxResultList = this.boxResultList.slice(0, 20);
						}
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			// 新手盲盒订单支付轮训
			payPaid(val) {
				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.isPay = 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.isPayDlgVisible = false
				this.show = false
				this.showActivity = false
				this.isPay = false
				this.activityClickShow = 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位
			},
			rollingLink(item) {
				this.adVisible = false
				if (item.img.type === 'INSIDE') {
					if (item.img.url === '/pages/index/new-index' || item.img.url === '/pages/shop/index' || item.img
						.url === '/pages/mine/sign' || item.img.url === '/pages/mine/mine') {
						uni.switchTab({
							url: `${item.img.url}`
						})
					} else {
						uni.navigateTo({
							url: `${item.img.url}`
						})
					}

				} else {
					window.location.href = item.img.url
				}
			},
			// 获取活动盲盒详情
			getBoxActivity() {
				// /boxes/activity/list
				boxActivityListApi().then(res => {
					if (res.code === 200) {
						this.visible = false
						
						// 定义一个排序顺序的映射
						// let sortOrderMap = {
						//     'PREFERENTIAL_DAY': 1,
						//     'ROOKIE': 2,
						//     'SPECIAL_PRICE': 3,
						// 	'TRIPLE':4
						// };
						let arr = []
						res.data.forEach(item => {
							// if(item.source === 'SPECIAL_PRICE' || item.source === 'ROOKIE'){
							// 	arr.push(item)
							// }
							// if(item.source === 'ROOKIE'){
								arr.push(item)
							// }
						})
						let resDataList = JSON.parse(JSON.stringify(arr))
						// let resDataList = JSON.parse(JSON.stringify(res.data))
						
						// let sortOrderMap = {
						//     'PERIOD': 1,
						//     'NINE': 2,
						//     'SPECIAL_PRICE': 3,
						// 	'ROOKIE':4
						// };
						let sortOrderMap = {
							'ROOKIE':1,
						    'PERIOD': 2,
						    'NINE': 3,
						    'SPECIAL_PRICE': 4,
						};
						
						// PERIOD 1
						// NINE 2
						// SPECIAL_PRICE 3
						// ROOKIE  4
						// 使用 sort() 方法进行排序
						res.data.sort((a, b) => {
						    // 获取 a 和 b 的 source 在 sortOrderMap 中的值
						    let orderA = sortOrderMap[a.source] || Number.MAX_SAFE_INTEGER;
						    let orderB = sortOrderMap[b.source] || Number.MAX_SAFE_INTEGER;
						
						    // 使用这些值进行比较
						    return orderA - orderB;
						});
						
						console.log("res.data:",res.data)
						
						
						
						
						// this.boxActivityLeftList = JSON.parse(JSON.stringify(arr))
						this.boxActivityLeftList = JSON.parse(JSON.stringify(res.data))
						if(this.boxActivityLeftList.length > 0){
							this.boxActivityLeftList.forEach((item,index) => {
								// item.visible = true
								this.$set(this.boxActivityLeftList[index],'visible',false)
							})
						}
						// res.data.forEach((item,index) => {
						// 	if(item.source === "ROOKIE"){
						// 		res.data.splice(index,1)
						// 	}
						// })
						
						
						resDataList.sort((a, b) => {
						    // 获取 a 和 b 的 source 在 sortOrderMap 中的值
						    let orderA = sortOrderMap[a.source] || Number.MAX_SAFE_INTEGER;
						    let orderB = sortOrderMap[b.source] || Number.MAX_SAFE_INTEGER;
						
						    // 使用这些值进行比较
						    return orderB - orderA;
						});
						
						
						this.boxActivityList = JSON.parse(JSON.stringify(resDataList))
						console.log("this.boxActivityList:",this.boxActivityList)
						if(this.boxActivityList.length > 0){
							this.boxActivityList.forEach((item,index) => {
								// item.visible = true
								this.$set(this.boxActivityList[index],'visible',false)
							})
							// this.boxActivityList[0].visible = true
							this.boxActivityList[this.boxActivityList.length-1].visible = true
							// this.boxActivityLeftList = JSON.parse(JSON.stringify(res.data))
							// activityShowIndex
							if(this.boxActivityList.length > 0){
								console.log("this.boxActivityList:",this.boxActivityList)
								this.activityShowIndex = this.boxActivityList.length-1
								try {
									if (!uni.getStorageSync('activityShow')) {
										this.activityShow = true
										this.autoplay = false
										// 设置标记，表示已经弹出过
										uni.setStorageSync('activityShow', true)
									}
								} catch (e) {
									//TODO handle the exception
								}
							}
						}else{
							this.visible = true
						}
						console.log(this.boxActivityLeftList)
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/index/boxDetail?id=${item.id}`
				})
			},
			goActivityDetail(item) {
				// console.log("------------")
				// this.getMore()
				// this.activityShow = false
				// return
				uni.navigateTo({
					url: `/pages/index/boxDetail?type=${item.source}`
				})
			},
			// 活动盲盒订单预览
			goActivityPre(item) {
				console.log("+++++++++++",item)
				// this.getMore()
				// this.activityShow = false
				// // console.log("gggggggggg")
				// return
				if(item.source === "SPECIAL_PRICE"){
					uni.navigateTo({
						url: `/pages/index/boxDetail?type=${item.source}`
					})
				}else{
					this.boxType = item.source
					this.showActivity = true
					this.isPay = true
					this.activeDetail = item
				}
				
				
				// this.activityShow = false
			},
			activityClose(index) {
				uni.setStorageSync('ad', 'behind')
				if(this.floatCkVis){
					this.activityShow = false
					this.autoplay = true
				}else{
					if (index === 0) {
						this.activityShow = false
						this.autoplay = true
						
						console.log("JSON.stringify(this.activityObj:",JSON.stringify(this.activityObj))
						if(JSON.stringify(this.activityObj) !== '{}'){
							// if (!uni.getStorageSync('firstTime')) {
								// this.cellVisible = true
							// }
						}else{
							this.visible = true
						}
						
						
						
					} else {
						this.$set(this.boxActivityList[index],'visible',false)
						this.$set(this.boxActivityList[index-1],'visible',true)
					}
				}
				this.floatCkVis = false
				
			},
			close() {
				uni.setStorageSync('ad', 'behind')
				this.adVisible = false
			},
			login(data) {
				loginXc(data).then(res => {
					if (res.code === 200) {
						console.log("box-token:",uni.getStorageSync('box-token'))
						// uni.setStorageSync('box-nickname', res.data.nickname)
						// uni.setStorageSync('box-id', res.data.id)
						try {
							this.adStoreVisible = uni.getStorageSync('ad') ? uni.getStorageSync('ad') : 'frist'
						} catch (e) {
							this.adStoreVisible = 'frist'
						}
						this.getPopupAd('HOMEPAGE_CAROUSEL')
						this.getPopupAd('HOMEPAGE_POPUP')
						this.getPopupAdPage()
						this.getBoxesPinned()
						this.getBoxActivity()
					} else {
						this.$api.msg(res.message)
						reportClickFn('xc_login_error');
					}
				}).catch(err => {
					console.log("aaaaaa")
					reportClickFn('xc_login_error');
				})
			},
			// 获取用户信息
			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() {
				// this.isCustomerPath = true
				// window.location.href = 'https://work.weixin.qq.com/kfid/kfcdd500903e17d36af'
				
				uni.navigateTo({
					url:`/pages/mine/customer`
				})
				
				
				
				// uni.showLoading()
				// 	customerApi().then(res => {
				// 		uni.hideLoading()
				// 		if (res.code === 200) {
				// 			this.isCustomerPath = true
				// 			showWebview(res.data)
				// 			this.customer = res.data
				// 			setTimeout(() => {
				// 				// window.top.location.replace(res.data)
				// 				// window.location.href = res.data
				// 			},50)
				// 			// uni.navigateTo({
				// 			// 	url:`/pages/index/webview?customer=${this.customer}`
				// 			// })
				// 			// this.customerVisible = true
				// 			// window.location.href = res.data
				// 			// uni.navigateBack()
				// 			// uni.switchTab({
				// 			// 	url:`/pages/index/new-index`
				// 			// })
							
				// 		} else {
				// 			this.$api.msg(res.message)
				// 		}
				// 	}).catch(err => {
				// 		uni.hideLoading()
				// 	})
				
				// 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) {
						console.log(type)
						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
				}
				boxesChannelPinnedApi(data).then(res => {
					if (res.code === 200) {
						this.list = res.data
					} else {
						this.$api.msg(res.message)
					}
				})
				// boxesPinnedApi(data).then(res => {
				// 	if (res.code === 200) {
				// 		this.list = res.data
				// 	} else {
				// 		this.$api.msg(res.message)
				// 	}
				// })
			},
			swiperFooterChange(val) {
				this.footerCurrent = val.detail.current
			},
			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() {
				if (uni.getStorageSync('box-token')) {
					console.log(this.current)
					this.detailData = this.list[this.current]
					this.boxType = 'buy'
					this.show = true
					this.isPay = true
					this.autoplay = false
					// 盲盒预览埋点
					// reportClickFn('box_buy_review_clk')
				} else {
					uni.navigateTo({
						url: `/pages/login/login`
					})
				}

			},
			// 关闭购买弹窗组件
			buyClose() {
				this.buyVisible = false
			},
			floatCk(type) {
				this.floatCkVis = true
				this.isActivityClick = true
				this.boxType = type
				console.log(this.boxType)
				
				
				this.boxActivityLeftList.forEach((item,index) => {
					
					this.$set(this.boxActivityLeftList[index],'visible',false)
				})
				this.boxActivityLeftList.forEach((item,index) => {
					if(type === item.source){
						this.activeDetail = this.boxActivityLeftList[index]
						this.$set(this.boxActivityLeftList[index],'visible',true)
						console.log("this.boxActivityLeftList[index]:",this.boxActivityLeftList[index])
					}
				})
				console.log(this.boxActivityLeftList)
				if(type === 'SPECIAL_PRICE'){
					this.activityClickShow = true
				}
				if(type === 'PREFERENTIAL_DAY'){
					this.activityClickShow = true
				}
				if(type === 'ROOKIE'){
					this.activityClickShow = true
					// 点击打开新人福利数
					reportClickFn('box_clk_activity_num')
				}
				if(type === 'PERIOD'){
					this.activityClickShow = true
				}
				if(type === 'SPECIAL_PRICE'){
					// 点击打开薅羊毛数
					reportClickFn('box_special_price_clk_activity_num')
				}
				if(type === 'NINE'){
					// 点击打开九连抽数
					reportClickFn('box_nine_clk_num')
					this.activityClickShow = true
				}
				if(type === 'PERIOD'){
					// 点击打开周期活动
					reportClickFn('box_period_clk_num')
					this.activityClickShow = true
				}
				// this.floatCkVis = true
				// this.isActivityClick = true
				// this.boxType = type
				// console.log(this.boxType)
				
				
				// // this.boxActivityLeftList
				// // activityClickShow
				
				
				// this.boxActivityList.forEach((item,index) => {
				// 	this.$set(this.boxActivityList[index],'visible',false)
				// })
				// this.boxActivityList.forEach((item,index) => {
				// 	if(type === item.source){
				// 		this.$set(this.boxActivityList[index],'visible',true)
				// 	}
				// })
				// console.log(this.boxActivityList)
				// if(type === 'SPECIAL_PRICE'){
				// 	this.activityShow = true
				// }
				// if(type === 'PREFERENTIAL_DAY'){
				// 	this.activityShow = true
				// }
				// if(type === 'ROOKIE'){
				// 	this.activityShow = true
				// 	// 点击打开新人福利数
				// 	reportClickFn('box_clk_activity_num')
				// }
				// if(type === 'SPECIAL_PRICE'){
				// 	// 点击打开薅羊毛数
				// 	reportClickFn('box_special_price_clk_activity_num')
				// }
			},
			// 购买组件 购买
			goBuy(type) {
				this.buyVisible = false
			},
			// 点击中奖播报
			prizeCk(item){
				console.log(item)
				this.prizeData = item.data
				this.prizeVisible = true
			},
			prizeClose(){
				this.prizeVisible = false
			},
			buyPrize(){
				uni.navigateTo({
					url:`/pages/index/boxDetail?id=${this.prizeData.boxId}&prize=prize&prizeType=${this.prizeData.type}`
				})
				this.prizeVisible = false
			},
			// 新手引导下一步
			guidanceNext(){
				this.zIndex = 10
				this.guidanceFloatWindow = false
				if(this.guidanceIndex < 3){
					this.guidanceIndex += 1
				}else{
					this.guidanceVisible = false
					this.freeCk()
				}
				
			},
			guidanceAccomplish(){
				if(this.guidanceIndex === 3){
					setTimeout(() => {
						this.guidanceBtn = false
					},2000)
					if(this.guidanceBtn){
						return
					}
					this.guidanceBtn = true
					setIndexGuideApi({status:false}).then(res => {
						if(res.code !== 200){
							this.$api.msg(res.message)
						}
						this.guidanceVisible = false
						uni.navigateTo({
							url:`/pages/index/drawFree?type=PENTA&boxId=${this.list[this.current].id}`
						})
					}).catch(err => {
						this.guidanceVisible = false
						uni.navigateTo({
							url:`/pages/index/drawFree?type=PENTA&boxId=${this.list[this.current].id}`
						})
					})
					
				}
			},
			guidanceClose(){
				this.guidanceVisible = false
				this.guidanceFloatWindow = false
				setIndexGuideApi({status:false}).then(res => {
					if(res.code !== 200){
						this.$api.msg(res.message)
					}
				}).catch(err => {
					
				})
			},
			guidanceOpen(){
				this.zIndex = 9999
				this.guidanceIndex = 0
				this.guidanceFloatWindow = true
				this.guidanceVisible = true
			},
			modalClose(){
				this.isModal = false
			}
		},
		onHide() {
			// 在页面离开时清除定时器
			clearInterval(this.rookieTimer)
			clearInterval(this.boxResultTimer)
			this.isCustomerPath = false
			// if(this.isCustomerPath){
			// 	this.isCustomerPath = false
			// 	// uni.navigateBack()
			// 	// uni.switchTab({
			// 	// 	url:`/pages/index/new-index`
			// 	// })
			// 	console.log("我返回了")
			// }
			
		},
		onUnload() {
			// 在页面离开时清除定时器
			clearInterval(this.rookieTimer)
			clearInterval(this.boxResultTimer)
		},
		onTabItemTap() {
			// 首页tabbar点击次数home_ranging_clk
			// reportClickFn('index_tabbar');
			// console.log("我点击了首页的bar")
		},
	}
</script>

<style lang="scss" scoped>
	.new-index-page {
		width: 100%;
		// height: 100vh;
		overflow: hidden;
		background-image: url('@/static/home/bg.jpg');
		background-repeat: no-repeat;
		background-size: 100%;
		position: relative;
		.free-main{
			width: 126rpx;
			height: 127rpx;
			position: absolute;
			left: 16rpx;
			top: 750rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 10;
			.free{
				width: 91rpx;
				height: 91rpx;
				background-image: url('@/static/home/mfsw.png');
				background-size: 100%;
				background-repeat: no-repeat;
				font-weight: 500;
				font-size: 15rpx;
				color: #EBF9FE;
				text-align: center;
				padding-top: 70rpx;
			}
		}
		.top-img {
			position: absolute;
			top: 0;
			// top: -160rpx;
			width: 750rpx;
			height: 653rpx;
			z-index: 1;
		}
		.top-zm-icon{
			position: absolute;
			width: 650rpx;
			top: -140rpx;
			left: 50rpx;
			z-index: 2;
			// border: 1px solid red;
			// width: 100%;
		}

		.home-main {
			z-index: 3;
			position: relative;

			.home-header {

				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 9rpx 23rpx 0 29rpx;

				.header-activity {
					z-index: 3;
					display: flex;
					align-items: center;

					.header-activity-item {
						margin-right: 3rpx;
						width: 147rpx;
						height: 149rpx;
						// width: 107rpx;
						// height: 109rpx;
						position: relative;
						background-size: 100%;
						background-repeat: no-repeat;
						font-weight: 500;
						font-size: 15rpx;
						color: #FFFFFF;
						text-align: center;
						// padding-top: 80rpx;

						.activity-dian {
							position: absolute;
							// top: 11rpx;
							// right: 3rpx;
							bottom: 38rpx;
							right: 14rpx;
							width: 28rpx;
							height: 28rpx;
							// background: #FF0000;
							border-radius: 50%;
							z-index: 2;
						}
					}

					.coupon {
						background-image: url('@/static/home/ttlq.png');
					}

					.card {
						background-image: url('@/static/home/kb.png');
					}

					.wechat {
						background-image: url('@/static/home/wxfl.png');
					}

					.task {
						// background-image: url('@/static/home/rwqd.png');
					}
				}

				.header-rule {
					display: flex;
					align-items: center;
					z-index: 3;

					.rule-item {
						width: 64rpx;
						height: 64rpx;
						background-image: url('@/static/home/wf.png');
						background-size: 100%;
						background-repeat: no-repeat;
						margin-left: 11rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: 500;
						font-size: 15rpx;
						color: #1C4362;
						position: relative;
						.dian{
							position: absolute;
							width: 28rpx;
							height: 28rpx;
							bottom: 0;
							right: 0;
						}
						.music{
							width: 21rpx;
							height: 21rpx;
						}
					}
					@keyframes rotateAnimation {
					  from {
						transform: rotate(0deg);
					  }
					  to {
						transform: rotate(360deg);
					  }
					}
					
					.rotate-music {
					  animation: rotateAnimation 3s linear infinite; /* 2秒旋转一周，线性过渡，无限循环 */
					}
				}
			}

			.rank {
				
				z-index: 11;
				// width: 121rpx;
				// height: 96rpx;
				width: 141rpx;
				height: 116rpx;
				font-weight: 500;
				font-size: 22rpx;
				// font-size: 15rpx;
				color: #FFFFFF;
				display: flex;
				text-align: center;
				
				justify-content: center;
				background-image: url('@/static/home/phb.png');
				background-size: 100%;
				background-repeat: no-repeat;
				position: absolute;
				// top: 127rpx;
				// left: 36rpx;
				    top: 14rpx;
				    left: 188rpx;
				// left: 29rpx;
				.rank-item{
					position: relative;
					width: 121rpx;
					height: 96rpx;
					// padding-top: 43rpx;
					padding-top: 46rpx;
					.activity-dian {
						position: absolute;
						bottom: -12rpx;
						right: 13rpx;
						// top: 11rpx;
						// right: 13rpx;
						width: 28rpx;
						height: 28rpx;
						// background: #FF0000;
						border-radius: 50%;
					}
				}
				
			}

			.left-icon {
				width: 61rpx;
				height: 61rpx;
				position: absolute;
				left: 41rpx;
				top: 444rpx;
				z-index: 11;
			}

			.right-icon {
				width: 61rpx;
				height: 61rpx;
				position: absolute;
				right: 41rpx;
				top: 444rpx;
				z-index:11;
			}

			.box-main {
				// padding-top: 225rpx;
				position: relative;
				.jt-icon{
					position: absolute;
					top: 80rpx;
					left: 0;
					width: 100%;
					z-index: 1;
				}
				.swiper {
					position: relative;
					z-index: 10;
					// height: 295rpx;
					height: 520rpx;
					

					.swiper-items {
						z-index: 10;
						padding-top: 225rpx;
						height: 520rpx;
						position: relative;

						.swiper-img-view {
							z-index: 10;
							width: 100%;
							height: 295rpx;

							.swiper-img {
								z-index: 10;
								display: block;
								margin: 0 auto;
								width: 495rpx;
								height: 295rpx;
							}
						}
					}
				}
				.look{
					position: absolute;
					z-index: 11;
					top: 400rpx;
					right: 90rpx;
					.look-img{
						width: 104rpx;
						height: 104rpx;
						animation: pressAnimation 2s linear infinite;
					}
					.look-txt{
						width: 104rpx;
						text-align: right;
						font-family: YouSheBiaoTiHei;
						font-size: 23rpx;
						color: #FF4800;
						margin-top: -20rpx;
					}
					@keyframes pressAnimation {
						// 0% {
						// 	transform: translateX(0) translateY();
						//   }
						//   100% {
						//   	transform: translateX(-10px) translateY(0px); /* 向左上方移动10px */
						//   }
						0% {
							transform: translateX(0) translateY() rotate(0deg);
						  }
						  25% {
							transform: translateX(0px) translateY(-10rpx) rotate(0deg); /* 向左上方移动10px */
						  }
						  50% {
							  transform: translateX(-10rpx) translateY(0rpx) rotate(-10deg);
						  }
						  100% {
							transform: translateX(0) translateY() rotate(0deg);
						  }
					}
				}
				.guidance-icon{
					position: absolute;
					width: 49rpx;
					height: 149rpx;
					left: 0;
					z-index: 20;
					top: 560rpx;
				}
				.footer-tai {
					position: relative;
					width: 661rpx;
					height: 215rpx;
					z-index: 2 !important;
					background-image: url('@/static/home/tai.gif');
					// background-image: url('@/static/home/tai.png');
					background-size: 100%;
					background-repeat: no-repeat;
					text-align: center;
					margin-top: -50rpx;
					margin-left: 45rpx;

					.box-price {
						padding-top: 96rpx;
						color: #1C4362;
						font-size: 46rpx;
						font-family: YouSheBiaoTiHei;
						.price-last{
							font-size: 26rpx;
						}
					}
					
					.free-gu{
						position: absolute;
						right: -38rpx;
						bottom: -30rpx;
						width: 126rpx;
						height: 127rpx;
						background-image: url('@/static/guidance-index/free-gl.png');
						background-size: 100%;
						background-repeat: no-repeat;
						z-index: 9999;
					}
					

				}

				.footer {
					position: relative;
					width: 100%;
					z-index: 1 !important;
					background-image: url('@/static/home/footer.png');
					background-size: 100%;
					background-repeat: no-repeat;
					padding-top: 175rpx;
					margin-top: -150rpx;

					.footer-swiper {
						height: 244rpx;
						.footer-swiper-item {
							width: 199rpx;
							height: 244rpx;
							.swiper-tai {
								width: 199rpx;
								height: 244rpx;
								position: relative;
								display: flex;
								flex-direction: column;
								align-items: center;
								.box-s-h{
									position: absolute;
									width: 184rpx;
									height: 175rpx;
									left: 7rpx;
									top: 0;
									z-index: 1;
								}
								.box-s-t{
									position: absolute;
									bottom: 0;
									width: 199rpx;
									height: 244rpx;
								}
								.box-h{
									position: absolute;
									width: 148rpx;
									height: 161rpx;
									left: 26rpx;
									top: 7rpx;
									z-index: 1;
								}
								.box-t{
									position: absolute;
									bottom: 0;
									width: 161rpx;
									height: 204rpx;
								}
								.swiper-name{
									font-size: 31rpx;
									color: #7DA9B8;
									font-family: YouSheBiaoTiHei;
									z-index: 2;
									padding-top: 166rpx;
									width: 141rpx;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
									margin: 0 auto;
									text-align: center;
								}
								
								.swiper-name-active{
									z-index: 2;
									font-size: 38rpx;
									color: #7DA9B8;
									font-family: YouSheBiaoTiHei;
									padding-top: 166rpx;
									width: 179rpx;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
									text-align: center;
								}
							}
						}
					}

					.footer-btn {
						display: flex;
						align-items: center;
						margin-top: 9rpx;
						position: relative;
						
						.footer-activity {
							margin-left: 33rpx;
							width: 188rpx;
							height: 188rpx;
							background-image: url('@/static/home/gdhd.png');
							background-size: 100%;
							background-repeat: no-repeat;
							display: flex;
							align-items: center;
							// justify-content: center;
							padding-top: 40rpx;
							flex-direction: column;
							font-family: YouSheBiaoTiHei;
							font-size: 39rpx;
							color: #FFFFFF;
						}
						.dian{
							position: absolute;
							width: 34rpx;
							height: 34rpx;
							bottom: 24rpx;
							left: 180rpx;
						}
						.footer-activity-gif{
							margin-left: 33rpx;
							width: 188rpx;
							height: 188rpx;
						}

						.footer-open {
							margin-left: 6rpx;
							width: 495rpx;
							height: 188rpx;
							background-image: url('@/static/home/ljkq.png');
							background-size: 100%;
							background-repeat: no-repeat;
							font-family: YouSheBiaoTiHei;
							font-size: 71rpx;
							color: #FFFFFF;
							display: flex;
							// align-items: center;
							justify-content: center;
							padding-top: 36rpx;
							// padding: 57rpx 0 0 109rpx;
						}
						.footer-open-gif{
							margin-left: 6rpx;
							width: 495rpx;
							height: 188rpx;
							// border: 1px solid red;
						}
					}

					.footer-txt {
						font-size: 16rpx;
						color: #75B0C4;
						text-align: center;
						padding: 29rpx 0 19rpx 0;
					}
				}
			}
		}



	}
	
	.dlg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		

		.activity-main {
			position: absolute;
			top: 0;
			left: 0;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 579rpx;
			.activity-img {
				width: 579rpx;
				height: 549rpx;
				border-radius: 20rpx;
				display: block;
				margin: 20rpx auto;
				z-index: 2;
			}

			.now-buy {
				width: 296rpx;
				height: 95rpx;
				// background-image: url('@/static/home/dlg-ljgm.png');
				// background-repeat: no-repeat;
				// background-size: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: YouSheBiaoTiHei;
				font-size: 45rpx;
				color: #FFFFFF;
				margin: 0 auto;
				// width: 348rpx;
				// // height: 120rpx;
				// display: block;
				// margin: -120rpx auto 0 auto;
				// z-index: 1;
			}

			.dlg-close-img {
				display: block;
				width: 81rpx;
				height: 81rpx;
				z-index: 9999;
				margin: 55rpx auto 0 auto;
			}
		}
		.more-bg{
			width: 100%;
			height: 1174rpx;
			background-image: url('@/static/home/gdhdbj.png');
			background-repeat: no-repeat;
			background-size: 100%;
			position: absolute;
			bottom: 0;
			.more-header{
				padding-top: 16rpx;
				padding-left:32rpx;
				height: 138rpx;
				position: relative;
				.more-title{
					width: 292rpx;
					height: 88rpx;
					
				}
				.more-close{
					position: absolute;
					top:2rpx;
					right: 32rpx;
					width: 50rpx;
					height: 50rpx;
				}
			}
			.more-content{
				height: 1036rpx;
				.more-item{
					width: 686rpx;
					height: 280rpx;
					border-radius: 16rpx;
					border: 2rpx solid #FFFFFF;
					margin-left: 32rpx;
					margin-top: 24rpx;
					position: relative;
					background-position: 50%;
					background-size: 100%;
					background-repeat: no-repeat;
					.more-item-title{
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 72rpx;
						// background: rgba(255,255,255,0.4);
						border-radius: 0px 0px 16rpx 16rpx;
						padding: 0 24rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.titles{
							width: 450rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;
						}
						.title-imgs{
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}
	}
		.log-out{
			width: 590rpx;
			height: 300rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			.log-out-tip{
				height: 200rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: rgba(0,0,0,0.85);
				text-align: center;
				padding: 64rpx 30rpx;
			}
			.log-out-footer{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top: 2rpx solid rgba(0,0,0,0.06);
				height: 100rpx;
				.cancel{
					width: 294rpx;
					height: 100rpx;
					line-height: 100rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					text-align: center;
					border-right: 1px solid rgba(0,0,0,0.06);
				}
				.log-out-submit{
					width: 294rpx;
					height: 100rpx;
					line-height: 100rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #E55353;
					text-align: center;
				}
			}
		}
		
		
		.prize {
			position: absolute;
			top: 140rpx;
			left: 32rpx;
			z-index: 30;
		
			.prize-item {
				width: 520rpx;
				height: 66rpx;
				background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
				border-radius: 28rpx 0px 0px 28rpx;
				opacity: 0.8;
				display: flex;
				align-items: center;
				padding: 0rpx 6rpx;
				
				
				.trumpet-swiper{
					width: 520rpx;
					height: 66rpx;
					.trumpet-swiper-item{
						width: 520rpx;
						height: 66rpx;
						line-height: 66rpx;
						.item-txt{
							margin-left: 16rpx;
							width: 520rpx;
							font-size: 28rpx;
							color: #FFFFFF;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}
		
				.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;
				}
			}
		}
		.prize-dlg{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background-color: rgba(0,0,0,0.3);
			z-index: 999;
			display: flex;
			align-items: center;
			justify-content: center;
			.prize-main{
				// border: 1px solid red;
				// position: relative;
				.header{
					width: 100%;
					text-align: center;
					// font-family: YouSheBiaoTiHei;
					font-size: 50rpx;
					color: #fff;
					// position: absolute;
					// top: -150rpx;
				}
				.header-box{
					width: 100%;
					text-align: center;
					font-family: YouSheBiaoTiHei;
					font-size: 58rpx;
					color: #fff;
					// position: absolute;
					// top: -70rpx;
				}
				.card{
					width: 660rpx;
					height: 890rpx;
					background-repeat: no-repeat;
					background-size: 100%;
					z-index: 20;
					padding-top: 220rpx;
					// position: relative;
					// border: 1px solid red;
					.shop-img{
						width: 450rpx;
						height: 450rpx;
						display: block;
						margin: 0 auto;
						// border: 1px solid red;
						
					}
					.shop{
						// position: absolute;
						// // top: 548rpx;
						// top: 668rpx;
						// left: 70rpx;
						width: 410rpx;
						margin: 0 auto;
						margin-top: 60rpx;
						// border: 1px solid red;
						.name{
							width: 410rpx;
							text-align: center;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-weight: bold;
							font-size: 30rpx;
							// color: #99754D;
						}
						.point{
							width: 410rpx;
							text-align: center;
							margin-top: 12rpx;
							font-size: 30rpx;
							// color: #99754D;
						}
						.price{
							width: 410rpx;
							text-align: center;
							margin-top: 12rpx;
							font-size: 60rpx;
							// color: #99754D;
						}
					}
				}
				.rare-icon{
					background-image:url('@/static/grade/RARE.png');
					color: #5a2fc8 ;
				}
				.supreme-icon{
					background-image:url('@/static/grade/SUPREME.png');
					color: #7d451e;
				}
				.hidden-icon{
					background-image:url('@/static/grade/HIDDEN.png');
					color: #2c4dbb;
				}
				.normal-icon{
					background-image:url('@/static/grade/NORMAL.png');
					color:#203456
				}
			}
			.again-icon{
				width: 228rpx;
				height: 96rpx;
				font-size: 44rpx;
				// display: block;
				// margin-top: -40rpx;
				z-index: 21;
				color: rgba(255,255,255,0.9);
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: YouSheBiaoTiHei; 
				margin: 20rpx;
				background-image: url('@/static/new/tip/btn.png');
				background-repeat: no-repeat;
				background-size: 100%;
				position: relative;
				.no-like{
					position: absolute;
					color: #fff;
					font-size: 20rpx;
					font-family: serif;
					bottom: 0;
				}
				// margin: 8rpx auto 8rpx auto;
			}
			.close-icon{
				width: 64rpx;
				height: 64rpx;
				display: block;
				margin: 20rpx auto;
				z-index: 22;
			}
		}
		
		.guidance-dlg{
			position: fixed;
			width: 100%;
			height: 100vh;
			z-index: 9990;
			top: 0;
			left: 0;
			background-color: rgba(0,0,0,0.6);
			display: flex;
			// align-items: center;
			justify-content: center;
			.guidance-close{
				width: 65rpx;
				height: 65rpx;
				position: absolute;
				top: 30rpx;
				right: 30rpx;
			}
			.guidance-main{
				.guidance-active-icon{
					margin-top: 410rpx;
					width: 656rpx;
					height: 431rpx;
					margin-left: 87rpx;
				}
				.guidance-box{
					margin-top: 190rpx;
					position: relative;
					width: 569rpx;
					height: 643rpx;
					.guidance-box-arr{
						position: absolute;
						width: 152rpx;
						height: 93rpx;
						top: 320rpx;
					}
					.left-arr{
						left: -60rpx;
						animation: leftAnimation 1s ease-in-out infinite;
					}
					
					.right-arr{
						right: -60rpx;
						animation: rightAnimation 1s ease-in-out infinite;
					}
					.guidance-box-icon{
						width: 569rpx;
						height: 643rpx;
					}
					
					@keyframes leftAnimation {
					  0% {
					  	transform: translateX(0) translateY() rotate(0deg);
					    }
					    50% {
					  	  transform: translateX(20rpx) translateY(0rpx) rotate(0deg);
					    }
					    100% {
					  	transform: translateX(0) translateY() rotate(0deg);
					    }
					}
					@keyframes rightAnimation {
					  0% {
					  	transform: translateX(0) translateY() rotate(0deg);
					    }
					    50% {
					  	  transform: translateX(-20rpx) translateY(0rpx) rotate(0deg);
					    }
					    100% {
					  	transform: translateX(0) translateY() rotate(0deg);
					    }
					}
				}
				.guidance-box-btn{
					// background-color: #FEFEFE;
					// border: 8rpx solid #778E93;
					// border-radius: 50px;
					position: absolute;
					top: 1100rpx;
					left: 250rpx;
					width: 431rpx;
					height: 200rpx;
					background-image: url('@/static/guidance-index/open-gl.png');
					background-size: 100%;
					background-repeat: no-repeat;
					display: flex;
					align-items: center;
					justify-content: center;
					.guidance-box-btn-gif{
						position: absolute;
						width: 495rpx;
						height: 188rpx;
					}
					
					.finger-icon {
					  width: 79rpx;
					  height: 85rpx;
					  position: absolute;
					  bottom: -30rpx;
					  right: 40rpx;
					  animation: fingerAnimation 1s ease-in-out infinite;
					}
					
					@keyframes fingerAnimation {
					  0% {
					  	transform: translateX(0) translateY() rotate(0deg);
					    }
					   //  25% {
					  	// transform: translateX(0px) translateY(0rpx) rotate(0deg); /* 向左上方移动10px */
					   //  }
					    50% {
					  	  transform: translateX(0rpx) translateY(-15rpx) rotate(0deg);
					    }
					    100% {
					  	transform: translateX(0) translateY() rotate(0deg);
					    }
					}
				}
				.guidance-buy-icon{
					margin-top: 130rpx;
					width: 507rpx;
					height: 707rpx;
				}
				.guidance-free-icon{
					margin-top: 410rpx;
					width: 509rpx;
					height: 403rpx;
				}
				.guidance-next{
					width: 216rpx;
					height: 73rpx;
					display: block;
					margin: 0 auto;
					margin-top: 66rpx;
				}
			}
			.free-gu{
				width: 126rpx;
				height: 127rpx;
				position: absolute;
				right: 16rpx;
				top: 750rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 20;
				background-image: url('@/static/guidance-index/free-gl.png');
				background-size: 100%;
				background-repeat: no-repeat;
				.free{
					width: 91rpx;
					height: 91rpx;
					background-image: url('@/static/home/mfsw.png');
					background-size: 100%;
					background-repeat: no-repeat;
					font-weight: 500;
					font-size: 15rpx;
					color: #EBF9FE;
					text-align: center;
					padding-top: 70rpx;
				}
				.finger-icon {
				  width: 79rpx;
				  height: 85rpx;
				  position: absolute;
				  bottom: -60rpx;
				  right: 0rpx;
				  animation: fingerAnimation 1s ease-in-out infinite;
				}
				
				@keyframes fingerAnimation {
				  0% {
				  	transform: translateX(0) translateY() rotate(0deg);
				    }
				   //  25% {
				  	// transform: translateX(0px) translateY(0rpx) rotate(0deg); /* 向左上方移动10px */
				   //  }
				    50% {
				  	  transform: translateX(0rpx) translateY(-15rpx) rotate(0deg);
				    }
				    100% {
				  	transform: translateX(0) translateY() rotate(0deg);
				    }
				}
			}
		}
		.agreement-page{
			width: 100%;
			height: 100vh;
			background-color: rgba(0,0,0,0.6);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99999;
			display: flex;
			align-items: center;
			justify-content: center;
			.agreement-dlg{
				width: 590rpx;
				// height: 300rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				.agreement-tip{
					// height: 200rpx;
					font-weight: 500;
					font-size: 42rpx;
					color: rgba(0,0,0,0.85);
					// line-height: 200rpx;
					text-align: center;
					padding-top: 30rpx;
				}
				.agreement-center{
					margin: 20rpx 0;
					font-size: 26rpx;
					color: #000;
					padding: 0 50rpx;
					text-align: center;
					.red{
						color: #409EFF;
					}
				}
				.agreement-footer{
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-top: 2rpx solid rgba(0,0,0,0.06);
					height: 100rpx;
					.cancel{
						width: 294rpx;
						height: 100rpx;
						line-height: 100rpx;
						font-weight: 500;
						font-size: 32rpx;
						color: #000000;
						text-align: center;
						border-right: 1px solid rgba(0,0,0,0.06);
					}
					.agreement-submit{
						width: 294rpx;
						height: 100rpx;
						line-height: 100rpx;
						font-weight: 500;
						font-size: 32rpx;
						color: #E55353;
						text-align: center;
					}
				}
			}
		}
		.whitePage{
			background-color: #fff;
		}
		.activity-rank-modal{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.rank{
				width: 601rpx;
				height: 903rpx;
				background-image: url('@/static/activity/dlg-bg.png');
				background-size: 100%;
				background-repeat: no-repeat;
				padding-top: 110rpx;
				.rank-item{
					width: 480rpx;
					height: 125rpx;
					margin: 0 auto;
					background-image: url('@/static/activity/11.png');
					background-size: 100%;
					background-repeat: no-repeat;
					padding: 22rpx;
					.rank-item-info{
						display: flex;
						align-items: center;
						justify-content: space-between;
						color: #FFFAEB;
						.name{
							font-weight: bold;
							font-size: 24rpx;
							background-color: rgba(0,0,0,0.3);
							border-radius: 50rpx;
							padding: 4rpx 20rpx;
							width: 155rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.num{
							font-weight: bold;
							font-size: 28rpx;
						}
					}
					.award{
						display: flex;
						align-items: center;
						font-weight: bold;
						font-size: 22rpx;
						color: #FFFAEB;
						margin-top: 6rpx;
						.award-icon{
							width: 39rpx;
							height: 33rpx;
						}
						.award-txt{
							width: 369rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							margin-left: 10rpx;
						}
					}
				}
				.rank-item:nth-child(2){
					background-image: url('@/static/activity/22.png');
				}
				.rank-item:nth-child(3){
					background-image: url('@/static/activity/33.png');
				}
				.rank-item:nth-child(4){
					background-image: url('@/static/activity/44.png');
				}
				.rank-item:nth-child(5){
					background-image: url('@/static/activity/55.png');
				}
				.rank-footer{
					margin: 20rpx auto;
					width: 433rpx;
					font-size: 18rpx;
					color: #FFFAEB;
					text-align: center;
				}
			}
			.activity-rank-close{
				width: 81rpx;
				height: 81rpx;
				margin-top: 20rpx;
			}
		}
		.activity-rank-dlg{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.activity-rank-dlg-img{
				width: 700rpx;
				height: 720rpx;
			}
			.activity-rank-dlg-close{
				width: 81rpx;
				height: 81rpx;
				margin-top: 20rpx;
			}
		}
</style>