<template>
	<view class="box-detail-page">
		<HeaderCom></HeaderCom>
		<image src="@/static/shop/fx.png" mode="aspectFit" class="share-icon" @click="copy" v-if="!cellBuy"></image>
		<view class="main">
			<view class="box">
				<image src="@/static/box/box.png" mode="" class="box-icon"></image>
				<image src="@/static/box/tai.png" mode="" class="tai-icon"></image>
				<!-- <view class="name-icon">{{detailData.name}}</view> -->
				<view class="name-icon">
					<view class="name">一发入魂</view>
				</view>
			</view>
			<view class="probability">
				<view class="probability-header">
					<view class="probability-header-title">奖池概率</view>
					<view class="probability-header-num">共{{detailData.items.length}}款</view>
				</view>
				<view class="probability-item" style="background-image: url(/static/zy/index/zz.png);color: #526180;">
					<view>
						{{detailData.probability && detailData.probability['SUPREME'] || 0}}
						<text style="font-size: 16rpx;">％</text>
					</view>
					<view class="probability-total">共{{countByGrade('SUPREME') || 0}}个</view>
				</view>
				<view class="probability-item" style="background-image: url(/static/zy/index/xy.png);color: #3D6E99;">
					<view>{{detailData.probability && detailData.probability['RARE'] || 0}}<text style="font-size: 16rpx;">％</text></view>
					<view class="probability-total">共{{countByGrade('RARE') || 0}}个</view>
				</view>
				<view class="probability-item" style="background-image: url(/static/zy/index/yc.png);color: #5361A6;">
					<view>{{detailData.probability && detailData.probability['HIDDEN'] || 0}}<text style="font-size: 16rpx;">％</text></view>
					<view class="probability-total">共{{countByGrade('HIDDEN') || 0}}个</view>
				</view>
				<view class="probability-item" style="background-image: url(/static/zy/index/pt.png);color: #99754C;">
					<view>{{detailData.probability && detailData.probability['NORMAL'] || 0}}<text style="font-size: 16rpx;">％</text></view>
					<view class="probability-total">共{{countByGrade('NORMAL') || 0}}个</view>
				</view>
			</view>
		</view>
		<view class="headerline">
			<!-- <view class="title">奖池</view> -->
			<!-- <image src="@/static/box/qhh.png" mode="" class="swiper" @click="switchover" v-if="isGrid"></image>
			<image src="@/static/box/qh.png" mode="" class="swiper" @click="switchover" v-if="!isGrid"></image> -->
		</view>
		<template>
			<view class="list" v-if="!isGrid">
				<view class="item" v-for="(item,index) in detailData.items" :key="index" @click="goShopDetail(item)">
					<view class="item-shop">
						<image :src="gradeData[item.grade]" mode="" class="grade-icon"></image>
						<image v-if="item.coverResource" :src="item.coverResource.url" mode="" class="shop-icon"></image>
					</view>
					<view class="item-detail">
						<view class="name">{{item.abbreviation}}</view>
						<view class="detail">
							<!-- <view class="point">¥ {{item.sellPrice}}</view> -->
							<!-- <view class="price">¥{{item.sellPrice}}</view> -->
							<!-- <view class="point">{{item.sellPrice}}积分</view>
							<view class="price">¥{{item.sellPrice}}</view> -->
						</view>
					</view>
				</view>
			</view>
		</template>

		<template v-if="isGrid">
			<view class="grid-list">
				<view class="grid" v-for="(item,index) in detailData.items" :key="index" @click="goShopDetail(item)">
					<view class="item-shop">
						<view class="dlg-shop" v-if="item.curStock == 0">售罄</view>
						<image :src="gradeData[item.grade]" mode="" class="grade-icon"></image>
						<image v-if="item.coverResource" :src="item.coverResource.url" mode="" class="shop-icon"></image>
						<!-- <view class="shop-icon"></view> -->
					</view>
					<view class="item-detail">
						<view class="name">{{item.abbreviation}}</view>
						<!-- <view class="detail"> -->
							<!-- <view class="point">¥ {{item.sellPrice}}</view> -->
							<!-- <view class="price">¥{{item.sellPrice}}</view> -->
							<!-- <view class="point">{{item.sellPrice}}积分</view>
							<view class="price">¥{{item.sellPrice}}</view> -->
						<!-- </view> -->
					</view>
				</view>
			</view>
		</template>
		<view class="footer" v-if="isNo">
			<template v-if='activity === "buy"'>
				<view class="btn-tip" @click="tip">提示卡使用</view>
				<view class="btn-open" @click="sellBox">立即开盒</view>
			</template>
			<template v-else>
				<view class="now-buy" @click="confirmBuy">立即支付</view>
			</template>
			
		</view>
		<view class="footer" v-if="cellBuy">
			<view class="now-buy" @click="cellConfirmBuy">立即支付</view>
		</view>
		
		<popup-view v-model="cellShow" mode="bottom" border-radius="15" z-index="999" :maskCloseAble="false" closeable>
			<BuyBoxRunCom :detailData="detailBoxData" @payStatus="payStatus" @isOk="buySuccess" boxType="buy" :payNum="payNum" :isActivityReport="true" isActivity="runActivity" :curTaskId="curTaskId" :activityId="activityId" :activityType="activityType" :isNormal="isNormal"></BuyBoxRunCom>
		</popup-view>
		
		
		
		<BuyCom :visible="buyVisible" :item="detailData" @close="buyClose" @click="goBuy"></BuyCom>
		
		
		<!-- 购买弹窗 -->
		<popup-view v-model="show" mode="bottom" border-radius="15" zIndex="1000" :maskCloseAble="false" closeable>
			<BuyBoxCom :typeNum="prizeType" :detailData="detailData" @isOk="buySuccess" @payStatus="payStatus" :boxType="activity" @coinDeficit="coinDeficit" :isDetail="true" :payNum="payNum"></BuyBoxCom>
		</popup-view>
		<popup-view v-model="showActivity" mode="bottom" border-radius="45" zIndex="1000" :maskCloseAble="false" >
			<BuyActivityBox :detailData="detailData" @isOk="buySuccess" @payStatus="payStatus" :boxType="activity" @coinDeficit="coinDeficit" :isDetail="true" :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" zIndex="1000">
			<coinDeficitCom @close="closeTop" @sucClose="sucClose"></coinDeficitCom>
		</popup-view>
		<view class="custom-toast" v-if="isTip">
		    <view class="toast-txt">支付成功</view>
		  </view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/index/boxDetail"></page-popup>
	</view>
</template>

<script>
	import {
		myMixins
	} from "@/mixins/mixins.js";
	import {
		boxesDetail,
		boxOrderApi,
		activityDetailApi,
		activityDetailSourceApi,
		promptCountApi,
		boxOrderPaidApi
	} from '@/API/index.js'
	import {
		shareApi
	} from '@/API/user.js'
	import { mathMul } from '@/utils/mathUtils.js'
	import HeaderCom from '@/pages/components/header.vue'
	import BuyCom from './components/buy.vue'
	import BuyBoxCom from './components/buyBox.vue'
	import coinDeficitCom from './components/coinDeficit.vue'
	import reportClickFn from '@/utils/report.js'
	import BuyActivityBox from './components/buyActivityBox.vue'
	import isPayDlgVue from '@/pages/components/isPayDlg.vue'
	import BuyBoxRunCom from './components/buyBoxRun.vue'
	
	// import {numAdd,numSub,numMulti,numDiv} from '@/utils/precisionNum';
	import Decimal from 'decimal.js';

	export default {
		data() {
			return {
				id: "", //盲盒id
				detailData: {
					items: [],
					price: []
				},
				priceTypeObj: {
					SINGLE: "一发入魂",
					TRIPLE: "三连抽",
					PENTA: "五连抽"
				},
				priceTypeNum:{
					SINGLE: "1",
					TRIPLE: "3",
					PENTA: "5"
				},
				gradeData: {
					NORMAL: '../../static/grade/pt.png',
					HIDDEN: '../../static/grade/yc.png',
					RARE: '../../static/grade/xy.png',
					SUPREME: '../../static/grade/zz.png',
				},
				isGrid: true, //是否表个显示
				buyVisible:false,
				activity:'',
				isTopUp:false,
				show:false,
				isTip:false,
				shareUrl:'',
				shareqr:'',
				showActivity:false,
				isPayDlgVisible:false,
				paidData:{},
				payNum:0,
				isNo:true,//一元购盲盒不显示购买
				prize:'',//中奖播报进入 有值直接拉起支付
				prizeType:'',
				cellBuy:'',//跳格子活动 特殊（活动不再首页展示的）盲盒
				cellShow:false,
				detailBoxData:{},
				curTaskId:'',
				activityId:'',
				activityType:'',
				isNormal:false
			}
		},
		components:{HeaderCom,BuyCom,BuyBoxCom,coinDeficitCom,BuyActivityBox,isPayDlgVue,BuyBoxRunCom},
		onLoad(option) {
			console.log(option)
			if(option.prize){
				this.prize = option.prize
			}else{
				this.prize = ''
			}
			if(option.prizeType){
				this.prizeType = option.prizeType
			}
			// else{
			// 	this.prizeType = ''
			// }
			
			if(option.isNo){
				this.isNo = false
			}
			if(option.cellBuy){
				this.cellBuy = option.cellBuy
			}else{
				this.cellBuy = ''
			}
			if(option.curTaskId){
				this.curTaskId = option.curTaskId
			}
			if(option.activityId){
				this.activityId = option.activityId
			}
			if(option.activityType){
				this.activityType = option.activityType
			}
			if(option.isNormal){
				this.isNormal = option.isNormal === 'true' ? true : false
			}
			if(option.shareqr){
				this.shareqr = option.shareqr
			}
			if(option.type){
				// 活动盲盒详情 ROOKIE 新手盲盒   PREFERENTIAL_DAY 每日优惠
				this.activity = option.type
				
				this.getActivityDetail()
			}else{
				this.activity = 'buy'
				this.id = option.id
				this.getDetail()
			}
			
			this.getShare()
			
		},
		methods: {
			cellConfirmBuy(){
				boxesDetail({
					id:this.id
				}).then(res => {
					if (res.code === 200) {
						this.detailBoxData = res.data
						this.cellShow = true
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			
			
			
			againPay(){
				this.payNum += 1
			},
			isCancelCk(){
				this.isPayDlgVisible = false
			},
			// 购买弹框回传回来的方法 用于是否打开是否支付弹框
			payStatus(val){
				this.isPayDlgVisible = true
				console.log(val)
				this.paidData = val
			},
			
			isPayStatus(){
					boxOrderPaidApi({
						no:this.paidData.no
					}).then(payResult => {
						if (payResult.data) {
							this.$api.msg('支付成功')
							this.isPayDlgVisible = false
							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.paidDatano.no}&boxId=${this.paidData.boxId}&type=${this.paidData.type}`
							})
							uni.hideLoading()
						}else{
							this.$api.msg('未查询到支付结果')
							uni.hideLoading()
						}
					}).catch(err => {
						uni.hideLoading()
					})
			},
			getShare(){
				shareApi().then(res => {
					console.log(res)
					if(res.code === 200){
						if(res.data){
							this.shareUrl = res.data
						}
					}
				})
			},
			// 代币不足
			coinDeficit(){
				this.isTopUp = true
			},
			closeTop(){
				this.isTopUp = false
			},
			
			sucClose(){
				this.isTopUp = false
				this.isTip = true
				setTimeout(() => {
					this.isTip = false
				},1500)
			},
			// 购买成功
			buySuccess(){
				this.isPayDlgVisible = false
				this.show = false
				this.cellShow = false
				this.showActivity = false
			},
			// 切换商品排列方式
			switchover() {
				this.isGrid = !this.isGrid
			},
			// 购买盲盒
			sellBox(item) {
				console.log(item)
				// this.boxType = 'buy'
				this.show = true
				
				
				// 盲盒预览埋点
				reportClickFn('box_buy_review_clk')
				
				// this.buyVisible = true
				// uni.navigateTo({
				// 	url: `/pages/index/boxOrderConfirm?boxId=${this.detailData.id}&type=SINGLE`
				// })
			},
			// 查看详情
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/product/detail?id=${item.productId}`
				})
			},
			// 获取活动盲盒详情
			getActivityDetail(){
				let header = {}
				if(this.shareqr){
					header = {'share-qr':this.shareqr}
				}else{
					header = {}
				}
				activityDetailSourceApi({source:this.activity
				},header).then(res => {
					if (res.code === 200) {
						this.detailData = res.data
						const num2 = new Decimal(100);
						
						this.detailData.probability['NORMAL'] = this.detailData.probability['NORMAL'] ? num2.times(Number(this.detailData.probability['NORMAL'])).toString() :  0;
						this.detailData.probability['HIDDEN'] = this.detailData.probability['HIDDEN'] ? num2.times(Number(this.detailData.probability['HIDDEN'])).toString() : 0;
						this.detailData.probability['RARE'] = this.detailData.probability['RARE'] ? num2.times(Number(this.detailData.probability['RARE'])).toString() : 0;
						this.detailData.probability['SUPREME'] = this.detailData.probability['SUPREME'] ? num2.times(Number(this.detailData.probability['SUPREME'])).toString() : 0;
						console.log(this.detailData.probability)
						// this.detailData.probability['NORMAL'] = numMulti(Number(this.detailData.probability['NORMAL']),100)
						// this.detailData.probability['HIDDEN'] = numMulti(Number(this.detailData.probability['HIDDEN']),100)
						// this.detailData.probability['RARE'] = numMulti(Number(this.detailData.probability['RARE']),100)
						// this.detailData.probability['SUPREME'] = numMulti(Number(this.detailData.probability['SUPREME']),100)
						
						// setNavigationBarTitle
						uni.setNavigationBarTitle({
							title: `${this.detailData.name}`
						})
					} else {
						this.$api.msg(res.message)
					}
				})
				// activityDetailApi({
				// },header).then(res => {
				// 	if (res.code === 200) {
				// 		this.detailData = res.data
				// 		const num2 = new Decimal(100);
						
				// 		this.detailData.probability['NORMAL'] = this.detailData.probability['NORMAL'] ? num2.times(Number(this.detailData.probability['NORMAL'])).toString() :  0;
				// 		this.detailData.probability['HIDDEN'] = this.detailData.probability['HIDDEN'] ? num2.times(Number(this.detailData.probability['HIDDEN'])).toString() : 0;
				// 		this.detailData.probability['RARE'] = this.detailData.probability['RARE'] ? num2.times(Number(this.detailData.probability['RARE'])).toString() : 0;
				// 		this.detailData.probability['SUPREME'] = this.detailData.probability['SUPREME'] ? num2.times(Number(this.detailData.probability['SUPREME'])).toString() : 0;
				// 		console.log(this.detailData.probability)
				// 		// this.detailData.probability['NORMAL'] = numMulti(Number(this.detailData.probability['NORMAL']),100)
				// 		// this.detailData.probability['HIDDEN'] = numMulti(Number(this.detailData.probability['HIDDEN']),100)
				// 		// this.detailData.probability['RARE'] = numMulti(Number(this.detailData.probability['RARE']),100)
				// 		// this.detailData.probability['SUPREME'] = numMulti(Number(this.detailData.probability['SUPREME']),100)
						
				// 		// setNavigationBarTitle
				// 		uni.setNavigationBarTitle({
				// 			title: `${this.detailData.name}`
				// 		})
				// 	} else {
				// 		this.$api.msg(res.message)
				// 	}
				// })
			},
			// 获取盲盒详情
			getDetail() {
				let header = {}
				if(this.shareqr){
					header = {'share-qr':this.shareqr}
				}else{
					header = {}
				}
				boxesDetail({
					id: this.id
				},header).then(res => {
					if (res.code === 200) {
						this.detailData = res.data
						reportClickFn(`boxId_derail_${this.detailData.id}`)
						console.log("this.detailData.probability:",this.detailData.probability)
						const num2 = new Decimal(100);
						
						this.detailData.probability['NORMAL'] = this.detailData.probability['NORMAL'] ? num2.times(Number(this.detailData.probability['NORMAL'])).toString() :  0;
						this.detailData.probability['HIDDEN'] = this.detailData.probability['HIDDEN'] ? num2.times(Number(this.detailData.probability['HIDDEN'])).toString() : 0;
						this.detailData.probability['RARE'] = this.detailData.probability['RARE'] ? num2.times(Number(this.detailData.probability['RARE'])).toString() : 0;
						this.detailData.probability['SUPREME'] = this.detailData.probability['SUPREME'] ? num2.times(Number(this.detailData.probability['SUPREME'])).toString() : 0;
						// this.detailData.probability['NORMAL'] = numMulti(Number(this.detailData.probability['NORMAL']),100)
						// this.detailData.probability['HIDDEN'] = numMulti(Number(this.detailData.probability['HIDDEN']),100)
						// this.detailData.probability['RARE'] = numMulti(Number(this.detailData.probability['RARE']),100)
						// this.detailData.probability['SUPREME'] = numMulti(Number(this.detailData.probability['SUPREME']),100)
						// setNavigationBarTitle
						uni.setNavigationBarTitle({
							title: `${this.detailData.name}`
						})
						if(this.prize){
							this.sellBox()
						}
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			goBack() {
				uni.navigateBack({
					url: '/pages/index/index'
				})
			},
			cueCard() {
				uni.navigateTo({
					url: `/pages/index/card`
				})
			},
			tip(){
				// promptCountApi().then(res => {
				// 	if(res.data === '0'){
				// 		this.$api.msg('暂无提示卡')
				// 	}else{
				// 		uni.navigateTo({
				// 			url:`/pages/index/card?boxId=${this.detailData.id}`
				// 		})
				// 	}
				// })
				uni.navigateTo({
					url:`/pages/index/card?boxId=${this.detailData.id}`
				})
			},
			buyClose(){
				this.buyVisible = false
			},
			confirmBuy(){
				if(this.activity === 'buy'){
					this.show = true
				}else{
					this.showActivity = true
				}
				// uni.navigateTo({
				// 	url:`/pages/index/boxOrderConfirm?activity=activity&boxId=${this.detailData.id}`
				// })
			},
			goShopDetail(item){
				// uni.navigateTo({
				// 	url:`/pages/shop/detail?id=${item.productId}`
				// })
				// uni.switchTab({
				// 	url:`/pages/shop/index`
				// })
			},
			copy() {
				let search = window.location.href
				uni.setClipboardData({
					data: `${search}&shareqr=${this.shareUrl}`,
				})
				console.log(search);
			
			},
			countByGrade(grade) {
			  return this.detailData.items.filter(item => item.grade === grade).length;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F5F5F5;
	}

	.box-detail-page {
		padding-bottom: 144rpx;
		.main{
			width: 100%;
			height: 746rpx;
			background-image: url('@/static/box/bg.png');
			background-repeat: no-repeat;
			background-size: 100%;
			padding-top: 112rpx;
			.box{
				width: 100%;
				height: 438rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				padding-top: 54rpx;
				position: relative;
				.box-icon{
					width: 322rpx;
					height: 260rpx;
					z-index: 2;
				}
				.tai-icon{
					width: 750rpx;
					height: 256rpx;
					margin-top: -100rpx;
					z-index: 1;
				}
				.name-icon{
					width: 402rpx;
					height: 200rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding-top: 40rpx;
					background-image: url('@/static/box/name.png');
					background-repeat: no-repeat;
					background-size: 100%;
					font-size: 60rpx;
					color: #335C80;
					font-family: YouSheBiaoTiHei; 
					text-align: center;
					position: absolute;
					top: 240rpx;
					z-index: 3;
					.name{
						width: 280rpx;
						overflow: hidden;
						white-space: normal;
						text-overflow: ellipsis;
					}
				}
			}
			.probability{
				width: 100%;
				height: 244rpx;
				background-image: url('@/static/zy/index/gl.png');
				background-repeat: no-repeat;
				background-size: 100%;
				padding: 56rpx 32rpx 0 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				.probability-header{
					width: 100%;
					position: absolute;
					left: 0;
					top: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					.probability-header-title{
						font-size: 28rpx;
						color: #FFFFFF;
					}
					.probability-header-num{
						// width: 68rpx;
						height: 28rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 20rpx;
						color: #FFFFFF;
						background-image:url('@/static/zy/index/num.png');
						background-size: 100%;
						background-repeat: no-repeat;
						margin-left: 8rpx;
					}
				}
				.probability-item{
					background-repeat: no-repeat;
					background-size: 100%;
					width: 160rpx;
					height: 164rpx;
					display: flex;
					// justify-content: center;
					flex-direction: column;
					align-items: center;
					font-size: 28rpx;
					color: #666666;
					padding-top: 68rpx;
					.probability-total{
						margin-top: 22rpx;
						font-size: 20rpx;
						color: #666666;
					}
				}
			}
		}
		.headerline {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			margin-top: 64rpx;

			.title {
				font-weight: 800;
				font-size: 28rpx;
				color: #000000;
			}

			.swiper {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.list {
			margin-top: 14rpx;
			padding: 0 32rpx;

			.item {
				background-color: #FFFFFF;
				border-radius: 8rpx;
				width: 686rpx;
				height: 160rpx;
				margin-bottom: 16rpx;
				display: flex;
				align-items: center;

				.item-shop {
					width: 160rpx;
					height: 160rpx;
					position: relative;
					border-radius: 8rpx 0 0 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				  background-image: url('@/static/new/box-bg.png');
				  background-size: contain;
				 
					.shop-icon {
						width: 116rpx;
						height: 120rpx;
					}
					.grade-icon{
						position: absolute;
						top: 0;
						left: 0;
						width: 108rpx;
						height: 72rpx;
						z-index: 1;
					}
				}

				.item-detail {
					margin-left: 32rpx;
					width: 462rpx;

					.name {
						width: 462rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 28rpx;
						color: #000000;
					}

					.detail {
						margin-top: 32rpx;
						width: 462rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.point {
							font-weight: 800;
							font-size: 28rpx;
							color: #000000;
						}

						.price {
							font-weight: 500;
							font-size: 28rpx;
							color: #999999;
							text-decoration: line-through;
						}
					}
				}
			}

		}

		.grid-list {
			padding: 0 32rpx;
			display: grid;
			gap: 14rpx;
			grid-template-rows: 1fr;
			margin: 0px auto;
			grid-template-columns: repeat(2, 1fr);
			border-bottom: none;
			border-radius: 8rpx;
			margin-top: 14rpx;

			.grid {
				width: 336rpx;
				height: 320rpx;
				background-color: #fff;

				.item-shop {
					width: 336rpx;
					height: 240rpx;
					background-image: url('@/static/new/card-shop.png');
				  background-repeat: no-repeat;
				  background-size: 100%;
					// background: linear-gradient(180deg, rgba(98, 126, 153, 0) 0%, #627E99 100%), #E6EBF0;
					border-radius: 8rpx 8rpx 0px 0px;

					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					.dlg-shop{
						width: 336rpx;
						height: 240rpx;
						background-color: rgba(0,0,0,0.4);
						position: absolute;
						top: 0;
						left: 0;
						z-index: 3;
						font-family: Zhxs;
						font-size: 60rpx;
						color: #F26378;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.shop-icon {
						width: 192rpx;
						height: 196rpx;
						background-repeat: no-repeat;
						background-size: 100%;
					}
					.grade-icon{
						position: absolute;
						top: 0;
						right: 0;
						width: 108rpx;
						height: 72rpx;
						z-index: 2;
					}
				}

				.item-detail {
					padding: 16rpx;
					width: 336rpx;
					background-color: #fff;
					border-radius: 0 0 8rpx 8rpx;

					.name {
						width: 304rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 28rpx;
						color: #000000;
					}

					.detail {
						height: 40rpx;
						width: 304rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.point {
							font-weight: 800;
							font-size: 28rpx;
							color: #000000;
						}

						.price {
							font-weight: 500;
							font-size: 28rpx;
							color: #999999;
							text-decoration: line-through;
						}
					}
				}
			}
		}
		.footer{
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			height: 144rpx;
			width: 100%;
			position: fixed;
			bottom: 0;
			padding: 0 32rpx;
			z-index: 4;
			.now-buy{
				
				width: 706rpx;
				height: 88rpx;
				background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
				border-radius: 16rpx;
				
				
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				color: #FFFFFF;
			}
			.btn-tip{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 328rpx;
				height: 96rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #EBEBEB;
				font-weight: 500;
				font-size: 32rpx;
				color: #666666;
			}
			.btn-open{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 328rpx;
				height: 96rpx;
				background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
				border-radius: 8rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}
	.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;
		}
	}
	.share-icon{
		position: fixed;
		top: 42rpx;
		right: 32rpx;
		width: 40rpx;
		height: 40rpx;
		z-index: 100;
	}
</style>