<template>
	<view class="new-index-page" style="background-position: center top -90rpx;">
		<view class="header">
			<view class="header-info">
				<view class="photo">
					<image src="@/static/mine/logo.png" class="phone-icon" mode="aspectFit"></image>
				</view>
				<!-- <view class="coin" @click="rankingCk">
					<view class="coin-num">排行榜</view>
				</view> -->
				<!-- <view class="coin">
					<image src="@/static/zy/index/coin.png" mode="aspectFit" class="coin-icon"></image>
					<view class="coin-num">{{infoDetail.coins | million}}</view>
					<image src="@/static/zy/index/add.png" mode="aspectFit" class="add-icon" @click="topUpCk"></image>
				</view> -->
			</view>
			<image src="@/static/zy/index/rule.png" mode="" class="rule-icon" @click="rule"></image>
		</view>
		<!-- <trumpetCom ref="childComponent"></trumpetCom> -->
		<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="main">
			<view class="title-icon">
				<template v-if="list.length > 0 && list[current]">{{list[current].name}}</template>
			</view>
			<image src="@/static/zy/index/left.png" mode="" class="left-icon" @click="changeSwiper('left')"></image>
			<image src="@/static/zy/index/right.png" mode="" class="right-icon" @click="changeSwiper('right')"></image>
			<view class="box-main">
				<swiper class="swiper" circular :current="current" @change="swiperChange" v-if="list.length > 0">
					<swiper-item class="swiper-items" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
						<template v-if="item.itemFirst">
							<image v-if="item.itemFirst.coverResource" :src="item.itemFirst.coverResource.url" mode="aspectFit" class="swiper-img"></image>
						</template>
						
						<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>
				
				
				<template v-if="list.length > 0 && list[current]">
					<view class="box-name" v-if="list[current].itemFirst">{{list[current].itemFirst.abbreviation}}</view>
				</template>
			</view>
			<view class="open" @click="buy">
				<image src="@/static/zy/index/btn-top.png" mode="" class="top-icon"></image>
				<image src="@/static/zy/index/btn-bottom.png" mode="" class="bottom-icon"></image>
			</view>
			<view class="submit-txt">（就它了，现在抽，抽中概率更大呦）</view>
			<swiper class="footer-swiper" circular autoplay :current="footerCurrent" @change="swiperFooterChange">
				<swiper-item class="footer-swiper-items" v-for="(item,index) in bannerTopList" :key="index" @click="rollingLink(item)">
					<image v-if="item.img" :src="item.img.coverResource.url" mode="" class="footer-swiper-img"></image>
				</swiper-item>
			</swiper>
			<view class="dto">
				<view class="dto-icon" :class="{'dto-active':footerCurrent === index}" v-for="(item,index) in bannerTopList" :key="index" ></view>
			</view>
			<!-- <view @click="goxcx">跳转小程序</view> -->
			 <!-- <button @click="openWeapp(100)">Open Weapp with Amount 100</button> -->
		</view>
		<floatWindow v-if="activityDetail" :consumptionTime="activityDetail.expireTime" :source="activityDetail.source" :isConsumption="activityDetail.source === 'PREFERENTIAL_DAY'" :isDiscounts="activityDetail.source === 'ROOKIE'" @click="floatCk"></floatWindow>
		<!-- 活动盲盒弹窗 -->
		<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>
		<!-- 购买弹窗 -->
		<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" :maskCloseAble="false" :closeable="true" @input="coinDeficitComClose">
			<coinDeficitCom @close="closeTop" @sucClose="sucClose" :close='isClose'></coinDeficitCom>
		</popup-view>
		<!-- 是否有未开完的奖品 -->
		<!-- <view v-if="isOpen"> -->
			<NoOpenCom></NoOpenCom>
		<!-- </view> -->
		<view class="custom-toast" v-if="isTip">
		    <view class="toast-txt">支付成功</view>
		</view>
		
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/index/new-index" v-if="visible"></page-popup>
	</view>
</template>

<script>
	import floatWindow from '@/pages/components/floatWindow.vue'
	import BuyBoxCom from './components/buyBox.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 {
		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,
		boxResultApi,
		noOpenListApi,
		boxesChannelPinnedApi,
		popupAdPageApi
	} from '@/API/index.js'
	import {
		mpScheme
	} from '@/API/pay.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:"至尊"
				},
				
				
				show:false,
				boxType:'',//盲盒类型
				isTopUp:false,
				isTip:false,
				rookieTimer:null,
				boxResultTimer:null,
				boxResultList:[],//开奖结果
				isOpen:false,
				isClose:false,
				visible:false
			}
		},
		components: {
			floatWindow,
			BuyBoxCom,
			coinDeficitCom,
			NoOpenCom,
			trumpetCom
		},

		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.visible = true
			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)
				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()
				// }
			}
			if (uni.getStorageSync('box-token')) {
				this.getUserInfo()
				this.getCustomer()
				this.getBoxActivity()
				this.getBoxesPinned()
			}else{
				this.getBoxesPinned()
			}
			// this.getNoOpenList()
			this.getBoxResult()
			this.boxResultTimer = setInterval(() => {
				this.getBoxResult()
			}, 6000)
		},
		onShow() {
			uni.$on('updateTabData', (data) => {
			  this.visible = false
			  setTimeout(() => {
				  this.visible = true
			  },500)
			});
			// if (uni.getStorageSync('box-token')) {
			// 	this.getUserInfo()
			// 	this.getCustomer()
			// 	this.getBoxActivity()
			// 	this.getBoxesPinned()
			// }else{
			// 	this.getBoxesPinned()
			// }
			// // this.getNoOpenList()
			// this.getBoxResult()
			// this.boxResultTimer = setInterval(() => {
			// 	this.getBoxResult()
			// }, 6000)
			
		},
		methods: {
			rankingCk(){
				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(`${nickName}开启${item.boxName}得到了${item.productName}`)
							})
							
							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.$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位
			},
			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(){
				boxActivityApi().then(res => {
					if(res.code === 200){
						this.activityDetail = res.data
						if(this.activityDetail){
							
							
							try{
								if (!uni.getStorageSync('activityShow')) {
								  this.activityShow = true
								  // 活动页面埋点
								  reportClickFn('box_activity_clk');
								  // 设置标记，表示已经弹出过
								  uni.setStorageSync('activityShow', true)
								}
							}catch(e){
								//TODO handle the exception
							}
							
							
							
							// if (!uni.getStorageSync('activityShow')) {
							//   this.activityShow = true
							//   // 活动页面埋点
							//   reportClickFn('box_activity_clk');
							//   // 设置标记，表示已经弹出过
							//   uni.setStorageSync('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) {
						// 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)
					}
				})
			},
			// 获取用户信息
			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) {
						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')){
					this.boxType = 'buy'
					this.show = true
					// 盲盒预览埋点
					// reportClickFn('box_buy_review_clk')
				}else{
					uni.navigateTo({
						url:`/pages/login/login`
					})
				}
				
			},
			// 关闭购买弹窗组件
			buyClose(){
				this.buyVisible = false
			},
			floatCk(type){
				this.boxType = type
				console.log(this.boxType)
				if(type){
					// 每日优惠
					if(this.activityDetail && this.activityDetail.source){
						  // 活动页面埋点
						  reportClickFn('box_activity_clk');
						this.activityShow = true
					}
				}
			},
			// 购买组件 购买
			goBuy(type){
				this.buyVisible = false
			}
		},
		onHide() {
			// 在页面离开时清除定时器
			clearInterval(this.rookieTimer)
			clearInterval(this.boxResultTimer)
		},
		onUnload() {
			// 在页面离开时清除定时器
			clearInterval(this.rookieTimer)
			clearInterval(this.boxResultTimer)
		},
		onTabItemTap(){
			// 首页tabbar点击次数
			reportClickFn('index_tabbar');
			console.log("我点击了首页的bar")
		},
	}
</script>

<style lang="scss" scoped>
	.new-index-page {
		width: 100%;
		// height: calc(100vh - 50px);
		overflow: hidden;
		background-image: url('@/static/zy/index/bg.png');
		background-repeat: no-repeat;
		background-size: 100%;
		// background-position: center top -90rpx;
		// background-position: 50% 50%;
		.header{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 0 0 45rpx;
			.header-info{
				display: flex;
				align-items: center;
				.photo{
					width: 121rpx;
					height: 121rpx;
					background: #FFFFFF;
					border-radius: 50%;
					border: 4rpx solid #F26378;
					display: flex;
					align-items: center;
					justify-content: center;
					overflow: hidden;
					.phone-icon{
						width: 122rpx;
						height: 122rpx;
						border-radius: 50%;
					}
				}
				.coin{
					display: flex;
					align-items: center;
					background: #FFFFFF;
					border-radius: 32rpx;
					border: 4rpx solid #F26378;
					height: 58rpx;
					padding: 0 17rpx 0 13rpx;
					margin-left: 23rpx;
					.coin-icon{
						width: 45rpx;
						height: 45rpx;
					}
					// .coin-num{
					// 	font-weight: 600;
					// 	font-size: 40rpx;
					// 	color: #FFB432;
					// 	min-width: 120rpx;
					// 	margin: 0 10rpx;
					// 	text-align: center;
					// }
					.coin-num{
						// font-weight: 600;
						font-size: 30rpx;
						color: #FFB432;
						min-width: 120rpx;
						margin: 0 10rpx;
						text-align: center;
					}
					.add-icon{
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
			.rule-icon{
				width: 133rpx;
				height: 73rpx;
			}
		}
		.trumpet{
			display: flex;
			align-items: center;
			margin-top: 45rpx;
			margin-left: 67rpx;
			width: 617rpx;
			height: 64rpx;
			background: #F26378;
			border-radius: 32rpx;
			border: 0px solid #AFA08D;
			padding: 0 20rpx;
			.trumpet-icon{
				width: 35rpx;
				height: 35rpx;
			}
			.trumpet-swiper{
				margin-left: 23rpx;
				margin-top: 4rpx;
				width: 503rpx;
				height: 60rpx;
				.trumpet-swiper-item{
					width: 503rpx;
					height: 60rpx;
					
					.trumpet-txt{
						width: 503rpx;
						height: 60rpx;
						line-height: 60rpx;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}
		.main{
			// width: 514rpx;
			margin: 0 auto;
			position: relative;
			.title-icon{
				display: block;
				margin: 83rpx auto 0 auto;
				width: 313rpx;
				height: 66rpx;
				background-image: url('@/static/zy/index/title.png');
				background-repeat: no-repeat;
				background-size: 100%;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Zhxs;
				font-size: 31rpx;
			}
			.left-icon{
				width: 37rpx;
				height: 77rpx;
				position: absolute;
				top: 271rpx;
				left: 47rpx;
			}
			.right-icon{
				width: 37rpx;
				height: 77rpx;
				position: absolute;
				top: 271rpx;
				right: 48rpx;
			}
			.box-main{
				margin: 0 auto;
				width: 514rpx;
				height: 489rpx;
				background: #FFFFFF;
				border-radius: 32rpx;
				border: 4rpx solid #FF9D5C;
				display: flex;
				align-items: center;
				// justify-content: center;
				flex-direction: column;
				padding-top: 67rpx;
				.swiper{
					width: 500rpx;
					height: 380rpx;
					.swiper-items{
						width: 401rpx;
						height: 380rpx;
						position: relative;
						.swiper-img{
							width: 401rpx;
							height: 330rpx;
							display: block;
							margin: 0 auto;
						}
						.seal{
							border: 1px solid red;
							border-radius: 50%;
							width: 121rpx;
							height: 121rpx;
							color: #F26378;
							position: absolute;
							bottom: 0rpx;
							right: 15rpx;
							text-align: center;
							background-image: url('@/static/zy/index/yz.png');
							background-size: 100%;
							background-repeat: no-repeat;
							z-index: 999;
							.seal-txt{
								width: 121rpx;
								height: 121rpx;
								font-family: Zhxs;
								font-size: 31rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								flex-direction: column;
								transform: rotate(-30deg);
								.seal-num{
									font-size: 22rpx;
								}
							}
						}
					}
				}
				
				.box-name{
					margin-top: -15rpx;
					text-align: center;
					font-weight: 500;
					font-size: 24rpx;
					color: #BCBCBC;
				}
			}
			.open{
				position: relative;
				margin-top: 56rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.top-icon{
					width: 128rpx;
					height: 89rpx;
					z-index: 2;
				}
				.bottom-icon{
					position: absolute;
					width: 191rpx;
					height: 135rpx;
					left: 270rpx;
					top: 6rpx;
					z-index: 1;
				}
			}
			.submit-txt{
				font-weight: 400;
				font-size: 24rpx;
				color: #DD4939;
				margin-top: 55rpx;
				text-align: center;
			}
			.footer-swiper{
				margin-top: 24rpx;
				margin-left: 45rpx;
				width: 660rpx;
				height: 260rpx;
				background: #F26378;
				border-radius: 32rpx;
				border: 0px solid #AFA08D;
				overflow: hidden;
				.footer-swiper-items{
					border-radius: 32rpx;
					width: 660rpx;
					height: 260rpx;
					.footer-swiper-img{
						border-radius: 32rpx;
						width: 660rpx;
						height: 260rpx;
					}
				}
			}
		}
		.dto{
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 34rpx 0 81rpx 0;
			.dto-icon{
				margin: 0 10rpx;
				width: 14rpx;
				height: 14rpx;
				background-color: #fff;
				border-radius: 50Rpx;
			}
			.dto-active{
				background-color: #F26378;
			}
		}
		.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;
			}
		}
	}
	.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;
		.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;
			}
		}
	}
</style>