<!--
盒子详情
-->
<template>
	<page-container :title="$c.detailPageTitle((pageData && pageData.goods))" :showBack="true">
		<view class="content">
			<view class="header relative" v-if="pageData && pageData.goods"
				:style="{ background: 'url(' + pageData.goods.imgurl_detail + ') no-repeat 0 0 / 100% 100%', }">

				<view class="header-wuzhe flex" v-if="pageData.goods.is_shou_zhe == 1">
					<image class="img100" :src="$img1('common/chouBanjia.png')" mode="aspectFit"></image>
				</view>

				<view class="header-goodsTitel">{{ pageData.goods.title }}</view>

				<view class="header-suoxiang center"
					v-if="pageData.goods.lock_is == 1 && pageData.lock_info.goods_lock_surplus_time > 0">
					<image :src="pageData.lock_info.goods_lock_user_headimg" mode="aspectFill"></image>
					<view class="hidden ml10">{{
						pageData.lock_info.goods_lock_user_nickname
					}}</view>
					<image class="ml20" :src="$img1('index/suoxiang.png')" mode="aspectFit"></image>
					<view class="ml30">倒计时：{{ secNum }}S</view>
				</view>

				<view class="header-title center">
					<text>
						<template></template>
					</text>
					<text>
						<template v-if="pageData.goods.type != 5">￥</template>
						<template>{{ pageData.goods.price }}</template>
						<template v-if="pageData.goods.type == 5">积分</template>
					</text>
					<text>
						<template v-if="pageData.goods.type != 5">/含明信片</template>
					</text>
				</view>

				<collect-btn v-if="pageData && pageData.goods && pageData.goods.collection_is != null"
					:goods-id="pageData.goods.id" :goods-num="pageData.goods.num"
					:is-collected="pageData.goods.collection_is ? true : false"
					@collection-changed="onCollectionChanged"></collect-btn>

				<view
					style="width: 100%; height: 232rpx; position: absolute; bottom: 0; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));" />

			</view>
			<!--选项卡-->
			<detail-toolbar v-if="pageData != null && pageData.goods != null" :goods-type="pageData.goods.type"
				:current-tab="tabCur" @rule-click="handleRuleClick" @tab-change="tabChange"
				@change-box="changeBox"></detail-toolbar>

			<view class="spylView" v-if="tabCur == 1 && pageData">
				<view class="spylView-head align-center justify-between">
					<view class="column align-center" @click="prev">
						<view class="center" style="width: 64rpx; height: 64rpx; background-color: #FFFFFF;">
							<uni-icons type="left" color="#999999"></uni-icons>
						</view>
					</view>
					<view class="">
						<view class="flex" style="background-color: #F5F5F5;">
							<text :style="{ width: '80%' }"></text>
						</view>
						<view class="align-center" v-if="pageData.goods">
							<view class="align-center">第 <text>{{ pageData.goods.num }}</text> /{{ pageData.goods.stock
							}}箱
							</view>
							<view style="margin-left: 58rpx;">赏品余量</view>
							<view class="align-center">
								<text>{{ pageData.goods.goodslist_surplus_stock }}</text>/{{
									pageData.goods.goodslist_stock }}
							</view>
						</view>
					</view>
					<view class="column align-center" @click="next">
						<view class="center" style="width: 64rpx; height: 64rpx;  background-color: #FFFFFF;">
							<uni-icons type="right" color="#999999"></uni-icons>
						</view>
					</view>
				</view>
				<!-- 赏品列表 -->
				<view class="list">
					<detail-list-item v-for="(item, i) in pageData.goodslist" :key="i" :item="item"
						@click="previewDetail">
						<template #content>
							<view class="item-info">
								<view class="item-title hang1">
									<text>{{ item.title }}</text>
								</view>
								<view class="item-probability hang1">
									<text>{{ item.pro }}</text>
								</view>
								<view class="item-price hang1">
									<text>售价:<text style="font-size: 22rpx;">￥{{ item.sc_money }}</text></text>
								</view>
							</view>
						</template>
					</detail-list-item>
				</view>
			</view>

			<!-- 中赏记录 -->
			<template v-if="tabCur == 2">
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="getLog"
					:down="downOption" :up="upOption">
					<detail-prize-log :sub-tab="subTab" :log-list="logList" :current-sub-tab="subTabCur"
						@sub-tab-change="subTabChange"></detail-prize-log>
				</mescroll-body>
			</template>

			<!-- 按钮  冲一发 -->
			<detail-button v-if="pageData" :pageData="pageData" :isWuxian="false"
				@button-click="confirmSubmit"></detail-button>

			<!-- 确认订单弹窗 -->
			<order-confirm-popup ref="buyPop" v-if="orderData" :order-data="orderData" :page-data="pageData"
				:use-money="useMoney" :use-money2="useMoney2" :use-integral="useIntegral" :coupon-data="couponData"
				:is-agree="isAgree" :send-rule-data="sendRuleData" :buy-num="buyNum" @close="close('buyPop')"
				@change-pay="changePay" @toggle-agree="isAgree = !isAgree" @to-coupon="toCoupon"
				@confirm="$c.noDouble1(confirmSubmit, [1, buyNum], choujiangloading)" :effect-switch="effectSwitch"
				@on-effect-switch="onEffectSwitch"></order-confirm-popup>

			<buy-notice ref="buyNotice"
				@confirm="$c.noDouble(confirmSubmit, [1, buyNum, true], choujiangloading)"></buy-notice>
			<!-- 抽奖结果 -->
			<detail-results ref="resPop" @to-bag="toBag">
			</detail-results>


			<view v-if="aniShow" class="ani-pop">
				<image :src="aniSrc" lazy-load></image>
			</view>
			<rule-pop ref="rulePop"></rule-pop>
			<coupon-pop ref="couponPop"></coupon-pop>
			<!-- 添加直接引用的预览组件 -->
			<detail-preview-popup ref="localPreviewPopup"></detail-preview-popup>
			<!-- 使用抽取的老虎机组件 -->
			<DetailLucky ref="detailLucky" @end="onLuckyEnd" />

			<PayDialog ref="payDialog" />
		</view>
	</page-container>
</template>

<script>
	import PageContainer from '@/components/page-container/page-container.vue'
	import OrderConfirmPopup from '@/components/order-confirm-popup/order-confirm-popup.vue'
	import DetailListItem from '@/components/detail-list-item/detail-list-item.vue'
	import DetailButton from '@/components/detail-button/detail-button.vue'
	// 导入预览组件和方法
	import DetailPreviewPopup from '@/components/detail-preview-popup/detail-preview-popup.vue'
	import preview from '@/components/detail-preview-popup/index.js'
	// 导入抽取的抽奖组件
	import DetailLucky from "@/components/detail-lucky/detail-lucky.vue";

	import DetailResults from '@/components/detail-results/detail-results.vue'
	import {
		sleep
	} from '@/common/util'
	import {
		getGoodsDetail,
		getGoodsPrizeLogs
	} from '@/common/server/goods'
	import {
		calcOrderMoney,
		createOrder,
		getPrizeOrderLogByNum
	} from '@/common/server/order'
	export default {
		components: {
			PageContainer,
			OrderConfirmPopup,
			DetailListItem,
			DetailButton,
			DetailPreviewPopup,
			DetailLucky,
			DetailResults
		},
		data() {
			return {
				optData: "",
				boxNum: "",
				buyNum: 0,
				title: "",
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					auto: false,
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					auto: true,
					page: {
						size: 15, // 每页数据的数量,默认10
					},
				},
				tabList: {
					1: {
						title: "商品预览",
					},
					2: {
						title: "中赏记录",
					},
				},
				tabCur: 1,
				subTab: [],
				subTabCur: 0,
				payType: {
					1: {
						title: this.$config.getAppSetting('currency1_name') || "HH币",
						icon: "/static/img/pay_type1.png",
					},
					2: {
						title: "星钻",
						icon: "/static/img/pay_type2.png",
					},
				},
				payTypeCur: 1,
				isAgree: true,
				pageData: "",
				couponData: "",
				orderData: "",
				prizeData: "",
				secTimer: null,
				secNum: 0,
				aniSrc: "",
				aniShow: false,

				logList: [],
				sendRuleData: "",
				choujiangloading: false,
				useMoney: true,
				useIntegral: true,
				useMoney2: true,
				isPrizeLoading: false, // 是否显示抽奖loading
				effectSwitch: false, // 特效开关
			};
		},
		created() {

		},
		computed: {
			getGoodList() {
				if (this.pageData?.goodslist == null) {
					return [];
				}
				return this.pageData.goodslist;
			}

		},
		onShareAppMessage() {
			if (this.$refs["couponPop"] != null) {
				var co = this.$refs["couponPop"].getfengxiaodata();
				if (co != null) {
					console.log(co);
					return co;
				}
			}
			// 使用小写 id，兼容新版 .NET API
			const userinfo = uni.getStorageSync("userinfo") || {};
			const pid = userinfo.id || userinfo.ID || '';
			return {
				title: this.$config.getAppSetting("app_name") +
					`${this.pageData.goods.title}系列 第${this.pageData.goods.num}套`,
				imageUrl: this.pageData.goods.imgurl_detail,
				path: "/pages/shouye/detail" +
					this.$c.qs({
						goods_id: this.pageData.goods.id,
						goods_num: this.pageData.goods.num,
						pid: pid,
					}),
			};
		},

		onLoad(options) {
			console.log(options);
			this.optData = options;

			this.tabChange(this.tabCur);

			uni.$on("chooseCoupon", (data) => {
				// console.log('data', data)

				this.couponData = data;
				this.confirmSubmit([0, this.buyNum]);
			});
			this.effectSwitch = uni.getStorageSync('effectSwitch') === 1;
			// uni.getImageInfo({
			//   src: this.$img('/static/img/animation.png'),
			//   success: ({ path }) => {
			//     this.aniSrc = path
			//   }
			// })

			this.$c.getRule(10).then((res) => {
				if (res.status == 1) {
					this.sendRuleData = res.data;
				}
			});


		},
		onShow() {
			this.$platform.getOrderNo(this).then(order_num => {
				if (order_num != null && order_num != "") {
					this.getPrize(order_num);
				}
			});
		},

		onReady() {
			// this.open('dPop')
			// this.open('buyPop')
			// this.open('buyNotice')
			// this.open('resPop')
		},

		onUnload() {
			uni.$off("chooseCoupon");
		},

		methods: {
			onEffectSwitch(value) {
				this.effectSwitch = value;
				uni.setStorageSync('effectSwitch', value ? 1 : 0);
			},
			// 老虎机结束抽奖回调
			onLuckyEnd(isSkip) {
				console.log("抽奖结束", isSkip);
				this.$refs.resPop.open(this.prizeData.data, isSkip);
			},
			previewDetail(item) {
				console.log(item);
				// 使用本地引入的方法调用预览弹窗
				preview({
					productType: this.title,
					dataItem: item,
					goods: this.pageData.goods
				}).then(() => {
					console.log('预览弹窗打开成功');
				});
			},

			resetSec() {
				clearInterval(this.secTimer);
				this.secTimer = null;
				this.secNum = 0;
			},

			runSec(time) {
				const nowTime = Math.floor(Date.now() / 1000);

				if (time < nowTime) {
					this.resetSec();
					return;
				}

				this.secTimer && clearInterval(this.secTimer);

				this.secNum = time - nowTime;
				this.secTimer = setInterval(() => {
					if (this.secNum <= 0) {
						this.resetSec();

						uni.showLoading({
							title: "加载中",
							mask: true,
						});
						setTimeout(() => {
							// uni.hideLoading()
							this.doRefresh();
						}, 1000);
						return;
					}

					this.secNum -= 1;
				}, 1000);
			},

			toCoupon() {
				this.$c.to({
					url: "/pages/user/coupon",
					query: {
						type: 2,
						total_price: this.orderData.order_total,
					},
				});
			},

			async getPrize(order_num) {
				if (!order_num) {
					return;
				}

				let that = this;
				if (!this.isPrizeLoading) {
					this.isPrizeLoading = true;
					uni.showLoading({
						title: '加载中...'
					});
				}

				await sleep(500);
				const res = await getPrizeOrderLogByNum(order_num);
				if (res.status == 1) {
					res.data.data.map(item => {
						item.isChoose = false
					})
					console.log(res.data);

					this.prizeData = res.data

					if (res.data.data.length <= 0) {
						this.getPrize(order_num)
						return
					}

					if (that.buyNum == 0 || that.buyNum == null) {
						if (res.data.prize_num != null) {
							that.buyNum = res.data.prize_num;
							this.$refs.detailLucky.init(this.getGoodList, this.buyNum);
						}
					}
					this.isPrizeLoading = false;
					uni.hideLoading();
					if (!this.effectSwitch) {
						this.onLuckyEnd(true);
						return;
					}
					await sleep(200);
					let chaoshen = this.prizeData.data.findIndex(it => it.shang_id == 34);
					//获取奖品下标
					let resultIndices = this.prizeData.data.map(it => {
						const index = this.getGoodList.findIndex(item => item.id == it.goodslist_id);
						return index;
					});
					this.$refs.detailLucky.startDrawWithResult(this, resultIndices, chaoshen);
				}

			},

			changePay(e) {
				if (e === 'useIntegral') {
					if (this.couponData != null && this.couponData.id != '') {
						this.couponData = null;
					}
				}
				this[e] = !this[e];

				this.confirmSubmit([0, this.buyNum]);
			},

			confirmSubmit([type, num, fromNotice = false]) {
				if (type === 0) {
					// 计算订单
					this.calculateOrder(num);
				} else if (type === 1) {
					// 提交订单
					this.submitOrder(num, fromNotice);
				}
			},

			async calculateOrder(num) {
				this.buyNum = num;
				let coupon_id = (this.couponData && this.couponData.id) || ''
				if (coupon_id != '' && this.useIntegral) {
					this.useIntegral = false;
				} else if (this.useIntegral && coupon_id != '') {
					this.couponData = null;
					coupon_id = '';
				}
				let data = {
					goods_id: this.pageData.goods.id,
					prize_num: this.buyNum,
					num: this.pageData.goods.num,
					use_money_is: this.useMoney ? 1 : 2,
					use_integral_is: this.useIntegral ? 1 : 2,
					coupon_id: coupon_id,
					use_money2_is: this.useMoney2 ? 1 : 2
				};

				if (this.pageData.goods.type == 5) {
					data.coupon_id = "";
				}
				this.$refs.detailLucky.init(this.getGoodList, this.buyNum);
				const res = await calcOrderMoney(data);
				if (res.status == 1) {
					if (res.data.coupon_id) {
						this.couponData = {
							id: res.data.coupon_id,
							price: res.data.coupon_price,
						};
					}

					this.orderData = res.data;

					// 使用this.$nextTick确保视图已更新，组件已挂载
					this.$nextTick(() => {
						if (this.$refs.buyPop) {
							this.$refs.buyPop.open();
						} else {
							console.error('buyPop组件引用不存在');
						}
					});
				}
			},

			async submitOrder(num, fromNotice = false) {
				if (this.$refs.buyNotice.getIsShow() && !fromNotice) {
					this.$refs.buyNotice.getRule(6);
					return;
				}

				this.buyNum = num;
				let coupon_id = (this.couponData && this.couponData.id) || ''
				if (coupon_id != '' && this.useIntegral) {
					this.useIntegral = false;
				} else if (this.useIntegral && coupon_id != '') {
					this.couponData = null;
					coupon_id = '';
				}
				let data = {
					goods_id: this.pageData.goods.id,
					prize_num: this.buyNum,
					num: this.pageData.goods.num,
					use_money_is: this.useMoney ? 1 : 2,
					use_integral_is: this.useIntegral ? 1 : 2,
					coupon_id: coupon_id,
					use_money2_is: this.useMoney2 ? 1 : 2
				};

				if (this.pageData.goods.type == 5) {
					data.coupon_id = "";
				}

				this.close("buyPop");

				const res = await createOrder(data);
				if (res.status == 1) {
					if (res.data.status == 1) {
						const status = await this.$platform.pay({
							data: res.data.res
						}, this)

						if (status == "success") {
							this.getPrize(res.data.order_num);
							this.doRefresh();
						}
					} else {
						this.$c.toast({
							title: res.msg,
							duration: 500,
							success: () => {
								this.getPrize(res.data.order_num);
								this.doRefresh();
							},
						});
					}
				}
			},

			onCollectionChanged() {
				this.doRefresh();
			},

			handleRuleClick(ruleId, title) {
				this.$refs.rulePop.getRule(ruleId, title);
			},

			toBag() {
				this.close("resPop");

				this.$c.to({
					type: 3,
					url: "/pages/hegui/hegui",
				});
			},

			changeBox() {
				this.$c.to({
					url: "/pages/shouye/huanxiang",
					query: {
						id: this.pageData.goods.id,
						type_text: this.optData.type_text,
					},
				});
			},

			doRefresh() {
				this.getData();

				if (this.tabCur == 2) {
					this.tabChange(this.tabCur);
				}
			},

			subTabChange(i) {
				this.subTabCur = i;
				this.logList = [];

				this.$nextTick(() => {
					setTimeout(() => {
						this.mescroll.resetUpScroll();
						this.mescroll.scrollTo(0, 0);
					}, 100);
				});
			},

			tabChange(i) {
				this.tabCur = i;

				switch (Number(i)) {
					case 1:
						this.getData();
						break;
					case 2:
						this.subTabChange(this.subTabCur);
						break;
				}
			},

			next() {
				if (this.optData.goods_num >= this.pageData.goods.stock) {
					this.optData.goods_num = this.pageData.goods.stock;

					this.$c.toast({
						title: "已经是最后一箱了",
					});
					return;
				}

				this.optData.goods_num += 1;
				this.getData();
			},

			prev() {
				if (this.optData.goods_num <= 1) {
					this.optData.goods_num = 1;

					this.$c.toast({
						title: "已经是第一箱了",
					});
					return;
				}

				this.optData.goods_num -= 1;
				this.getData();
			},

			async getLog({
				num,
				size
			}) {
				if (num > 1) return this.mescroll.endByPage(this.logList.length, 1);
				const res = await getGoodsPrizeLogs({
					page: num,
					goods_id: this.optData.goods_id,
					goods_num: this.optData.goods_num,
					shang_id: this.subTab.length > 0 ? this.subTab[this.subTabCur].shang_id : "",
				});
				if (res.status == 1) {
					this.subTab = res.data.category;

					if (num == 1) {
						this.logList = [];
					}

					this.logList = this.logList.concat(res.data.data);
					this.mescroll.endByPage(res.data.data.length, res.data.last_page);
				}
			},

			async getData() {
				const res = await getGoodsDetail(this.optData.goods_id, this.optData.goods_num);
				if (res.status == 1) {
					this.optData.goods_num = Number(res.data.goods.num);

					if (
						res.data.goods.lock_is == 1 &&
						res.data.lock_info.goods_lock_surplus_time > 0
					) {
						this.runSec(res.data.lock_info.goods_lock_surplus_time);
					}

					this.pageData = res.data;
					let goodType = this.$config.getGoodTypeFind(this.pageData.goods.type);
					this.useMoney = goodType.pay_balance == 1 ? true : false;
					this.useIntegral = goodType.pay_currency == 1 ? true : false;
					this.useMoney2 = goodType.pay_currency2 == 1 ? true : false;
					console.log(this.pageData);
				}
			},

			close(e) {
				console.log('关闭弹窗:', e, this.$refs[e]);
				if (e === 'buyPop') {
					if (this.$refs[e]) {
						this.$refs[e].close();
					} else {
						console.error('找不到buyPop组件引用');
					}
				} else {
					if (this.$refs[e]) {
						this.$refs[e].close();
					} else {
						console.error('找不到组件引用:', e);
					}
				}

				if (e == "resPop") {
					if (this.prizeData && this.prizeData["user_coupon"] != null) {
						this.$refs["couponPop"].open(this.prizeData["user_coupon"]);
					}
				}
			},

			open(e) {
				console.log('打开弹窗:', e, this.$refs[e]);
				if (e === 'buyPop') {
					this.$refs.resPop.open();
					// if (this.$refs[e]) {
					// 	this.$refs[e].open();
					// } else {
					// 	uni.showToast({
					// 		title: '找不到buyPop组件引用',
					// 		icon: 'none',
					// 	});
					// 	console.error('找不到buyPop组件引用');
					// }
				} else {
					if (this.$refs[e]) {
						this.$refs[e].open();
					} else {
						uni.showToast({
							title: '找不到组件引用:',
							icon: 'none',
						});
						console.error('找不到组件引用:', e);
					}
				}
			},
		},
	};
</script>

<style lang="scss">
	.navLeft {
		width: 100%;
		position: fixed;
		left: 30rpx;
		z-index: 100;
		height: 44px;

		>view {
			font-weight: 600;
			font-size: 50rpx;
			color: #ffffff;
		}
	}

	.content {
		padding: 0 0 300rpx;
		background-color: #F3F3F3;

		.header {
			width: 100%;
			height: 722rpx;
			// margin-top: 130rpx;
			background-color: #d8d8d8;

			&-wuzhe {
				width: 160rpx;
				height: 60rpx;
				position: absolute;
				top: 300rpx;
				left: 0;
			}

			&-goodsTitel {
				position: absolute;
				font-weight: 400;
				font-size: 32rpx;
				width: 90%;
				max-width: 650rpx;
				color: #ffffff;
				left: 50%;
				text-align: center;
				transform: translateX(-50%);
				bottom: 130rpx;
				z-index: 2;
				word-wrap: break-word;
				word-break: break-all;
				line-height: 1.4;
			}

			&-suoxiang {
				position: absolute;
				width: 584rpx;
				height: 120rpx;
				background: rgba(0, 0, 0, 0.73);
				left: 50%;
				transform: translateX(-50%);
				bottom: 390rpx;
				z-index: 2;

				>image:nth-of-type(1) {
					width: 46rpx;
					height: 46rpx;
					border: 2rpx solid #ffffff;
					border-radius: 50rpx;
				}

				>image:nth-of-type(2) {
					width: 144rpx;
					height: 68rpx;
				}

				>view:nth-of-type(1) {
					width: 140rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #ffffff;
				}

				>view:nth-of-type(2) {
					font-weight: 400;
					font-size: 24rpx;
					color: #ffffff;
				}
			}

			&-title {
				position: absolute;
				padding: 0 20rpx;
				width: 298.8rpx;
				height: 60.16rpx;
				left: 50%;
				transform: translateX(-50%);
				background-color: #FFF33E;
				bottom: 54rpx;
				border-radius: 10rpx;
				z-index: 10;

				>text:nth-child(2n + 1) {
					font-weight: 400;
					font-size: 18rpx;
					color: #333333;
				}

				>text:nth-child(2) {
					font-weight: 700;
					font-size: 24rpx;
					color: #333333;
				}
			}

			&-footer {
				width: 750rpx;
				position: absolute;
				left: 0;
				bottom: 0;

				&-one {
					width: 186rpx;
					height: 106rpx;
					display: flex;
					position: absolute;
					left: 0;
					bottom: 0;
					z-index: 1;

					>image {
						width: 100%;
						height: 100%;
					}
				}

				&-two {
					width: 224rpx;
					height: 119rpx;
					display: flex;
					position: absolute;
					left: 160rpx;
					bottom: 0;
					z-index: 1;

					>image {
						width: 100%;
						height: 100%;
					}
				}

				&-three {
					width: 224rpx;
					height: 119rpx;
					display: flex;
					position: absolute;
					right: 160rpx;
					bottom: 0;

					>image {
						width: 100%;
						height: 100%;
					}
				}

				&-four {
					width: 186rpx;
					height: 106rpx;
					display: flex;
					position: absolute;
					right: 0;
					bottom: 0;

					>image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.spylView {
			// background: #ffffff;

			&-head {
				box-sizing: border-box;
				padding: 24rpx 30rpx;
				width: 750rpx;

				>view:nth-child(2n + 1) {
					>view:nth-child(1) {
						width: 74rpx;
						height: 56rpx;
						background: #f5f5f5;
						border-radius: 12rpx;
						// border: 2rpx solid #000000;
					}

					>view:nth-child(2) {
						margin-top: 8rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #ffffff;
						text-align: center;
					}
				}

				>view:nth-child(2) {
					width: 420rpx;

					>view:nth-child(1) {
						width: 420rpx;
						height: 14rpx;
						border-radius: 40rpx;

						>text {
							height: 14rpx;
							border-radius: 40rpx;
							background: #cdf022;
						}
					}

					>view:nth-child(2) {
						padding: 14rpx 30rpx 0;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;

						>view {
							>text {
								font-weight: 400;
								color: #333333;
							}
						}
					}
				}
			}

			.list {
				padding: 30rpx;
				display: grid;
				grid-template-columns: repeat(3, 31.5%);
				gap: 30rpx 20rpx;
			}
		}

		.fixed-btns {
			position: fixed;
			z-index: 10;
			right: 20rpx;
			bottom: 300rpx;

			.btn {
				width: 94rpx;
				height: 110rpx;
				margin-top: 40rpx;
			}
		}

		.ft-fixed {
			position: fixed;
			z-index: 10;
			left: 0;
			bottom: 0;
			width: 100%;
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			padding-bottom: 40rpx;
			background: #ffffff;
			padding-top: 20rpx;

			.lt-btn {
				width: 690rpx;
				height: 60rpx;
				background: linear-gradient(90deg, #2dcbff 0%, #ff873a 100%);
				border-radius: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 20rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #ffffff;
			}

			.btn {
				width: 120rpx;
				height: 68rpx;
				position: relative;

				>view {
					white-space: nowrap;
					font-weight: 400;
					font-size: 52rpx;
					color: #ffffff;
					position: relative;
					text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;

					// &::before {
					// 	content: '';
					// 	position: absolute;
					// 	bottom: 10rpx;
					// 	left: -8rpx;
					// 	width: 22rpx;
					// 	height: 22rpx;
					// 	background: url($imgurl+'common/jiantou1.png') no-repeat 0 0 / 100% 100%;
					// }

					// &::after {
					// 	content: '';
					// 	position: absolute;
					// 	top: 0rpx;
					// 	right: -10rpx;
					// 	width: 22rpx;
					// 	height: 22rpx;
					// 	background: url($imgurl+'common/jiantou2.png') no-repeat 0 0 / 100% 100%;
					// }
				}
			}
		}


		.res-pop {
			width: 100%;
			height: 100vh;
			position: relative;
			background: url($imgurl + "common/yb.png") no-repeat 0 0 / 100% 100%;

			.res-pop-hd {
				width: 400rpx;
				height: 108rpx;
				background: url($imgurl + "common/gxhd.png") no-repeat 0 0 / 100% 100%;
			}

			.res-pop-bd {
				width: 636rpx;
				height: 760rpx;
				background-color: #ffffff;
				border-radius: 16rpx;
				margin: 36rpx auto;

				.res-list {
					padding: 20rpx 10rpx;
					display: grid;
					grid-template-columns: repeat(3, 210rpx);
					gap: 24rpx 10rpx;

					.res-item {
						width: 180rpx;
						height: 240rpx;
						background-color: #f8f8f8;
						border-radius: 16rpx;

						.pic {
							width: 180rpx;
							height: 180rpx;
							position: relative;
							background: #d8d8d8;
							border-radius: 16rpx 16rpx 0rpx 0rpx;

							>image {
								width: 180rpx;
								height: 180rpx;
								border-radius: 16rpx 16rpx 0rpx 0rpx;
							}

							.type-tag {
								position: absolute;
								left: 12rpx;
								top: 12rpx;
								z-index: 2;
								width: 68rpx;
								height: 32rpx;
								background: url($imgurl + "common/chouLabel.png") no-repeat 0 0 / 100% 100%;
								font-weight: 400;
								font-size: 14rpx;
								color: #ffffff;
							}

							.num {
								position: absolute;
								z-index: 2;
								left: 50%;
								transform: translateX(-50%);
								bottom: 10rpx;
								min-width: 42rpx;
								height: 28rpx;
								font-weight: 400;
								font-size: 14rpx;
								color: #ffffff;
								background: rgba(0, 0, 0, 0.5);
								border-radius: 18rpx;
							}
						}

						.title {
							padding: 22rpx 10rpx 0;
							font-weight: 400;
							font-size: 16rpx;
							color: #333333;
						}

						.exchange {
							padding: 10rpx 10rpx;
							font-weight: 400;
							font-size: 20rpx;
							color: #ffffff;
						}
					}
				}
			}

			.res-pop-ft {
				width: 750rpx;
				display: flex;
				justify-content: space-evenly;

				.ft-btn {
					width: 200rpx;
					height: 68rpx;
					font-weight: 400;
					font-size: 24rpx;
				}

				>view:nth-child(1) {
					color: #333333;
				}

				>view:nth-child(2) {
					color: #333333;
				}
			}
		}

		.ani-pop {
			width: 100vw;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 88;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #000;

			image {
				width: 100%;
				height: 1624rpx;
			}
		}


		.item-info {
			padding: 5rpx 0;
		}

		.item-title {
			padding: 0 2%;
			margin: 1rpx 0;
			width: 100%;
			font-size: 21rpx;
			text-align: left;
			height: 35rpx;
			line-height: 35rpx;
			font-weight: 500;
			color: #333333;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.item-probability {
			padding: 0 2%;
			margin: 1rpx 0;
			width: 100%;
			font-size: 21rpx;
			text-align: left;
			height: 35rpx;
			line-height: 35rpx;
			color: #f39205;
		}

		.item-price {
			padding: 0 2%;
			margin: 1rpx 0;
			width: 100%;
			font-size: 21rpx;
			text-align: left;
			height: 35rpx;
			line-height: 35rpx;
			color: #333333;
		}

		// 售罄遮罩
		.sold-out-mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.6);
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 16rpx 16rpx 0 0;
			z-index: 10;

			text {
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
			}
		}
	}
</style>