<!--
 * @Date: 2023-11-13 15:46:52
 * @LastEditTime: 2024-03-05 15:54:07
 * @Description: content
-->
<template>
	<view class="content">
		<view class="navLeft align-center" :style="{ top: $sys().statusBarHeight + 'px' }" @tap="$c.back(1)">
			<uni-icons type="left" color="#000000"></uni-icons>
		</view>

		<view class="header" v-if="pageData.goods">
			<view class="header-title center relative">
				<!-- <image :src="$img1('index/ljLeft.png')"></image> -->
				<text class="" style="padding-top: 20rpx;">擂台赏</text>
				<!-- <image :src="$img1('index/ljRight.png')"></image> -->
			</view>

			<view class="header-main">

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

				<view class="header-main-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-main-swiper relative">
					<view class="header-main-swiper-item flex">
						<image class="img100" :src="pageData.goods.imgurl_detail" mode="aspectFill"></image>
					</view>
					<view class="header-main-swiper-num center">第{{ pageData.goods.num }}/{{ pageData.goods.stock }}箱
					</view>
					<view class="header-main-swiper-huanxiang center" @click="changeBox">换箱</view>
				</view>

				<view class="header-main-price center">
					<text>￥{{ pageData.goods.price }}</text>
					<text>/含明信片</text>
				</view>

				<view class="header-main-huanxiang flex justify-between mt30">
					<view class="column align-center" @click="prev">
						<view class="center">
							<uni-icons type="left" color="#D8D8D8"></uni-icons>
						</view>
						<!-- <view class="">上一箱</view> -->
					</view>

					<view class="column align-center" @click="next">
						<view class="center">
							<uni-icons type="right" color="#D8D8D8"></uni-icons>
						</view>
						<!-- <view class="">下一箱</view> -->
					</view>
				</view>
				<view class="header-main-jidu column align-center">
					<view class="flex">
						<text :style="{ width: '80%' }"></text>
					</view>
					<view class="">剩余库存{{ pageData.goods.goodslist_surplus_stock }}/{{
						pageData.goods.goodslist_stock
					}}
					</view>
				</view>

				<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>

			</view>

		</view>

		<view class="tab pd30">
			<view class="tab-item1 center" :class="[tabCur == 1 ? 'act' : 'unact']" @click="tabChange(1)">
				<text>赏品预览</text>
			</view>
			<view class="tab-item2 center" :class="[tabCur == 2 ? 'act' : 'unact']" @click="tabChange(2)">
				<text>概率</text>
			</view>
			<view class="tab-item3 center" :class="[tabCur == 3 ? 'act' : 'unact']" @click="tabChange(3)">
				<text>记录</text>
			</view>
		</view>

		<view class="spylView" v-if="tabCur == 1 && pageData">
			<view class="list">
				<view class="list-item" v-for="(item, i) in pageData.goodslist" :key="i" @click="previewDetail(item)">
					<view class="pic center relative">
						<image class="pic-img" :src="item.imgurl" mode="aspectFit"></image>
						<view class="type-tag center" :style="{ background: item.shang_info.color }">
							{{ item.shang_info.title }}
						</view>
						<view class="num center bgfff">{{ item.surplus_stock }}/{{ item.stock }}</view>
						<view v-if="item.goods_type == 2" class="yu-tag ziti">预售</view>

						<view v-if="item.surplus_stock <= 0" class="shadow center">
							<image :src="$img1('common/sold_out.png')"></image>
						</view>
					</view>

					<view class="title hang1">
						{{ item.title }}
					</view>
					<view class="desc">{{ item.pro }}</view>
					<view class="price">
						<text>售价:￥{{ item.sc_money }}</text>
					</view>

				</view>
			</view>
		</view>


		<template v-if="tabCur == 2">
			<view class="gailvList">
				<view class="gailvList-item br10 align-center" v-for="(i, index) in pageData.goodslist" :key="index">
					<view class="center">{{ i.shang_info.title }}</view> <!-- :style="{ color: i.shang_info.color }" -->
					<view class="flex-1">
						<text>{{ i.surplus_stock }}/{{ i.stock }}</text>
						<text class="ml10">{{ i.title }}</text>
					</view>
					<view class="ml40">{{ i.pro }}</view>
				</view>
			</view>
		</template>


		<template v-if="tabCur == 3">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="getLog" :down="downOption"
				:up="upOption">
				<scroll-view class="sub-tab" scroll-x>
					<view class="sub-tab-item" v-for="(item, i) in subTab" :key="i"
						:class="subTabCur == i ? 'act' : 'unact'" @click="subTabChange(i)">
						{{ item.shang_title }}
					</view>
				</scroll-view>

				<view class="log-list">
					<view class="log-item br20" v-for="(item, i) in logList" :key="i">
						<view class="avatar">
							<image :src="item.user_info.headimg" lazy-load></image>
						</view>

						<view class="info">
							<view class="name hang1">
								{{ item.user_info.nickname }}
							</view>
							<view class="time">{{ item.addtime }}</view>
						</view>

						<view class="prize">
							<view class="pic flex">
								<image class="img100" style="border-radius: 16rpx;" :src="item.goodslist_imgurl"
									lazy-load></image>
							</view>
							<view class="column align-end" style="margin-left: 20rpx;">
								<view class="prize-shang center">{{ item.shang_title }}</view>
								<view class="flex mt10">
									<view class="title hang1">
										{{ item.goodslist_title }}
									</view>
									<view class="num">×1</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</template>

		<view v-if="pageData" class="ft-fixed">
			<view class="lt-btn center" @click="confirmSubmit([0, 1])">
				<text>抽1发</text>
			</view>
		</view>

		<uni-popup ref="dPop" type="center" maskBackgroundColor="rgba(0,0,0,0.9)">
			<view v-if="previewData" class="d-pop">
				<view class="pic center relative">
					<image :src="previewData.imgurl" lazy-load></image>
					<view class="justify-center">{{ previewData.shang_info.title }}</view>
				</view>

				<view class="title">
					<text class="hang1">
						{{ previewData.title }}
					</text>
				</view>

				<view class="d-list">
					<view class="d-item">
						{{ previewData.shang_info.title }} {{ previewData.pro }}
					</view>

					<view class="d-item">产品类型:{{ optData.type_text }}</view>
				</view>

				<view class="close icon" @click="close('dPop')">
					<image :src="$img1('common/close.png')"></image>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="buyPop" type="bottom">
			<view v-if="orderData" class="buy-pop relative">
				<view class="buy-pop-hd">
					<view class="close icon">
					</view>
					<text class="">确认订单</text>
					<view class="close icon" @click="close('buyPop')">
						<image :src="$img1('index/close.png')"></image>
					</view>
				</view>

				<view class="buy-card">
					<view class="buy-info">
						<view class="pic flex">
							<image class="img100" style="border-radius: 16rpx;" :src="orderData.goods.imgurl_detail">
							</image>
						</view>

						<view class="info-r">
							<view class="title hang1">
								{{ orderData.goods.title }}
							</view>

							<view class="type">类型:明信片</view>

							<template
								v-if="orderData.goods.is_shou_zhe == 1 && orderData.goods.shou_zhe_price * 1 > 0">
								<view class="price-num">
									<view class="price">
										<template v-if="pageData.goods.type != 5">¥</template>
										<text>{{ orderData.goods.shou_zhe_price }}</text>
										<template v-if="pageData.goods.type == 5">积分</template>
										(首抽5折)
									</view>

									<view class="num">×{{ 1 }}</view>
								</view>

								<view v-if="orderData.goods.prize_num > 1" class="price-num">
									<view class="price">
										<template v-if="pageData.goods.type != 5">¥</template>
										<text>{{ orderData.goods.price }}</text>
										<template v-if="pageData.goods.type == 5">积分</template>
									</view>

									<view class="num">
										×{{ orderData.goods.prize_num * 1 - 1 }}
									</view>
								</view>
							</template>

							<view v-else class="price-num">
								<view class="price">
									<template v-if="pageData.goods.type != 5">¥</template>
									<text>{{ orderData.goods.price }}</text>
									<template v-if="pageData.goods.type == 5">积分</template>
								</view>

								<view class="num">×{{ orderData.goods.prize_num }}</view>
							</view>
						</view>
					</view>

					<!-- <view class="line"></view> -->


				</view>

				<template v-if="pageData.goods.type != 5">
					<view class="card-row" @click="toCoupon">
						<view class="title">优惠券</view>

						<view class="row-r">
							{{ couponData && orderData.coupon_price > 0 ? `-${couponData.price}` : "未选择" }}
							<view class="icon">
								<image :src="$img1('common/right1.png')" lazy-load></image>
							</view>
						</view>

					</view>
					<!-- <view class="card-row" @click="$c.to({ url: '/pages/user/vip' })">
						<view class="title">
							{{
				  orderData.zhe
				    ? `会员折扣 (${orderData.zhe}折)`
				    : "暂无会员抵扣"
				}}
						</view>
						<view class="row-r">
							详情
							<view class="icon">
								<image :src="$img1('common/right1.png')" lazy-load></image>
							</view>
						</view>
					</view> -->
				</template>

				<!-- <view class="pay-title ziti">请选择抵扣方式</view> -->

				<view v-if="pageData.goods.type == 5" class="pay-type">
					<view class="title">
						使用积分抵扣
						{{ orderData.use_score }} (剩余:{{ orderData.score }})
					</view>

					<view class="icon">
						<image v-if="true" :src="$img1('common/check_act.png')" lazy-load></image>

						<image v-else :src="$img1('common/check.png')" lazy-load></image>
					</view>
				</view>

				<template v-else>
					<!-- <view class="pay-type" @click="changePay('useIntegral')">
						<view class="title">
							使用友达币抵扣¥ {{ orderData.use_integral_money }} (剩余:{{ orderData.integral }}个)
						</view>
						<view class="icon">
							<image style="width: 20px;height: 20px;" v-if="useIntegral" :src="$img1('common/check_act.png')" lazy-load></image>
							<image style="width: 20px;height: 20px;" v-else :src="$img1('common/check.png')" lazy-load></image>
						</view>
					</view> -->

					<view class="pay-type" @click="changePay('useMoney')">
						<view class="title align-center">
							使用星钻抵扣¥{{ orderData.use_money }} <text
								style="color: #676767; font-size: 16rpx; margin-left: 10rpx;">(剩余:{{ orderData.money
								}})</text>
						</view>
						<view class="icon">
							<image style="width: 20px; height: 20px" v-if="useMoney"
								:src="$img1('common/check_act.png')" lazy-load></image>
							<image style="width: 20px; height: 20px" v-else :src="$img1('common/check.png')" lazy-load>
							</image>
						</view>
					</view>
				</template>
				<view class="rule">
					<scroll-view class="rule-inner" scroll-y>
						<view v-html="sendRuleData"></view>
					</scroll-view>
				</view>
				<view class="agree" @click="isAgree = !isAgree">
					<view class="icon">
						<image v-if="isAgree" :src="$img1('common/check_act.png')" lazy-load></image>

						<image v-else :src="$img1('common/check.png')" lazy-load></image>
					</view>

					我已满18岁,阅读并同意

					<text @click.stop="$c.to({ url: '/pages/guize/guize?type=4' })">
						《用户协议》
					</text>

					<text @click.stop="$c.to({ url: '/pages/guize/guize?type=5' })">
						《隐私政策》
					</text>
				</view>

				<view class="pay-btn" @click="$c.noDouble(confirmSubmit, [1, buyNum])">
					<text>确认支付</text>
					<text>{{
						pageData.goods.type == 5
							? ` ${orderData.use_score}积分`
							: ` ¥${orderData.price}`
					}}</text>
				</view>
			</view>
		</uni-popup>

		<buy-notice ref="buyNotice" @confirm="$c.noDouble(confirmSubmit, [1, buyNum, true])"></buy-notice>

		<uni-popup ref="resPop" type="center" mask-background-color="rgba(0,0,0,0.8)">
			<view v-if="prizeData" class="res-pop common_bg column center">
				<view class="res-pop-hd"></view>
				<scroll-view class="res-pop-bd" scroll-y>
					<view class="res-list">
						<view class="res-item" v-for="(item, i) in prizeData.data" :key="i">
							<view class="pic center">
								<image :src="item.goodslist_imgurl" lazy-load></image>
								<view class="type-tag center">{{ item.shang_title }}</view>
								<view class="num center">×{{ item.prize_num }}</view>
							</view>
							<view class="title hang1">
								{{ item.goodslist_title }}
							</view>
							<view class="exchange">
								{{
									item.goodslist_money * 1 > 0
										? `可兑换:${item.goodslist_money}`
										: `不可兑换`
								}}
							</view>
						</view>
					</view>
				</scroll-view>

				<view class="res-pop-ft mt20">
					<view class="ft-btn common_bg justify-center" :style="{
						backgroundImage: `url(${$img1('common/quhegui.png')})`,
					}" @click="toBag">
						<text>去发货</text>
					</view>

					<view class="ft-btn common_bg justify-center" :style="{
						backgroundImage: `url(${$img1('common/jixuchou.png')})`,
					}" @click="close('resPop')">
						<text>继续抽</text>
					</view>
				</view>
			</view>
		</uni-popup>

		<view v-if="aniShow" class="ani-pop">
			<image :src="aniSrc" lazy-load></image>
		</view>

		<rule-pop ref="rulePop"></rule-pop>
	</view>
</template>

<script>
export default {
	data() {
		return {
			optData: "",
			boxNum: "",
			buyNum: 0,
			useMoney: true,
			useIntegral: false,
			// 下拉刷新的配置(可选, 绝大部分情况无需配置)
			downOption: {
				auto: false,
			},
			// 上拉加载的配置(可选, 绝大部分情况无需配置)
			upOption: {
				auto: true,
				page: {
					size: 15, // 每页数据的数量,默认10
				},
			},
			tabList: {
				1: {
					title: "商品预览",
				},
				2: {
					title: "概率",
				},
				3: {
					title: "记录",
				},
			},
			tabCur: 1,
			subTab: [],
			subTabCur: 0,
			payType: {
				1: {
					title: "友达币",
					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: "",
			previewData: "",
			current: 0,
		};
	},

	onShareAppMessage() {
		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: uni.getStorageSync("userinfo").ID,
				}),
		};
	},

	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.$c.getRule(10).then((res) => {
			if (res.status == 1) {
				this.sendRuleData = res.data;
			}
		});
	},

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

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

	methods: {
		previewDetail(item) {
			console.log(item);
			this.previewData = item;

			this.open("dPop");
		},

		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,
				},
			});
		},

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

			setTimeout(() => {
				this.req({
					url: "prizeorderlog",
					data: {
						order_num,
					},
					success: (res) => {
						if (res.status == 1) {
							this.prizeData = res.data;

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

							// this.aniShow = true
							// setTimeout(() => {
							//   this.aniShow = false
							this.bgmCtx.openBgm.stop();
							this.bgmCtx.openBgm.play();
							this.open("resPop");
							// }, 1300)
						}
					},
				});
			}, 500);
		},

		changePay(e) {
			this[e] = !this[e];

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

		confirmSubmit([type, num, fromNotice = false]) {
			let url = "ordermoney";

			if (type == 1) {
				url = "orderbuy";

				if (this.$refs.buyNotice.getIsShow() && !fromNotice) {
					this.$refs.buyNotice.getRule(6);
					return;
				}
			}

			this.buyNum = num;

			let data = {
				goods_id: this.pageData.goods.id,
				prize_num: this.buyNum,
				goods_num: this.pageData.goods.num,
				use_money_is: this.useMoney ? 1 : 2,
				use_integral_is: this.useIntegral ? 1 : 2,
				coupon_id: (this.couponData && this.couponData.id) || "",
				// ad_id: uni.getStorageSync('_ad_id')
			};

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

			this.req({
				url,
				data,
				success: async (res) => {
					if (res.status == 1) {
						if (type == 0) {
							if (res.data.coupon_id) {
								this.couponData = {
									id: res.data.coupon_id,
									price: res.data.coupon_price,
								};
							}

							this.orderData = res.data;

							this.open("buyPop");
						}

						if (type == 1) {
							this.close("buyPop");

							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();
									},
								});
							}
						}
					}
				},
			});
		},

		toggleCollect() {
			this.req({
				url: "addCollect",
				data: {
					goods_id: this.pageData.goods.id,
					goods_num: this.pageData.goods.num,
				},
				success: (res) => {
					if (res.status == 1) {
						this.doRefresh();
					}
				},
			});
		},

		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,
					type: 3,
				},
			});
		},

		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.getData();
					break;
				case 3:
					this.subTabChange(this.subTabCur);
					break;
				case 4:
					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();
		},

		getLog({
			num,
			size
		}) {
			if (num > 1) return this.mescroll.endByPage(this.logList.length, 1);
			this.req({
				url: "shang_log",
				data: {
					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 : "",
				},
				Loading: true,
				success: (res) => {
					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);
					}
				},
			});
		},

		getData() {
			this.req({
				url: "goodsdetail",
				data: {
					goods_id: this.optData.goods_id,
					goods_num: this.optData.goods_num,
				},
				success: (res) => {
					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;
					}
				},
			});
		},

		close(e) {
			this.$refs[e].close();
		},

		open(e) {
			this.$refs[e].open();
		},
	},
};
</script>

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

	>view {
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		font-size: 50rpx;
		color: #ffffff;
	}
}

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

	.gailvList {
		width: 686rpx;
		margin: 0 auto 0;

		&-item {
			margin: 28rpx 0 0;
			box-sizing: border-box;
			padding: 28rpx 32rpx;
			border-radius: 16rpx;
			background-color: #F8F8F8;

			>view:nth-child(1) {
				width: 68rpx;
				height: 32rpx;
				background-color: #9A8EF6;
				border-radius: 18rpx;
				font-weight: 500;
				font-size: 14rpx;
				color: #FFFFFF;
			}

			>view:nth-child(2) {
				font-weight: 400;
				font-size: 20rpx;
				color: #333333;
				margin-left: 48rpx;

				>text:nth-child(1) {
					flex: 1;
				}

				>text:nth-child(2) {
					flex: 3;
				}
			}

			>view:nth-child(3) {
				font-weight: 500;
				font-size: 16rpx;
				color: #F39205;
			}
		}
	}

	.sub-tab {
		white-space: nowrap;
		padding: 30rpx 0 10rpx;

		.sub-tab-item {
			display: inline-flex;
			align-items: center;
			padding: 0 20rpx;
			height: 50rpx;
			margin-left: 30rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: #333333;
			font-weight: 400;
			border-radius: 8rpx;

			&.act {
				background: #E6F791;
				border-radius: 8rpx;
			}

			&.unact {
				background: #F5F5F5;
				border-radius: 8rpx;
			}

			&:last-child {
				margin-right: 30rpx;
			}
		}
	}

	.log-list {
		padding: 1rpx 30rpx 30rpx;

		.log-item {
			height: 144rpx;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			background: #F8F8F8;
			border-radius: 16rpx;

			.avatar {
				width: 76rpx;
				height: 76rpx;
				background: #D8D8D8;
				border-radius: 50%;
				overflow: hidden;
			}

			.info {
				width: 230rpx;
				margin-left: 20rpx;

				.name {
					font-size: 20rpx;
					font-weight: 500;
					color: #333333;
				}

				.time {
					margin-top: 12rpx;
					white-space: nowrap;

					font-size: 16rpx;
					font-weight: 500;
					color: #999999;
				}
			}

			.prize {
				flex: 1;
				padding-left: 60rpx;
				display: flex;
				align-items: center;

				.prize-shang {
					height: 32rpx;
					padding: 0 20rpx;
					background: #9A8EF6;
					border-radius: 18rpx;
					font-weight: 500;
					font-size: 14rpx;
					color: #ffffff;
				}

				.pic {
					width: 76rpx;
					height: 76rpx;
				}

				.title {
					width: 100rpx;
					margin-left: 20rpx;
					font-size: 16rpx;
					font-weight: 500;
					color: #333333;
					text-align: right;
					margin-top: 10rpx;
				}

				.num {
					font-size: 16rpx;
					font-weight: 500;
					color: #333333;
					margin-top: 10rpx;
				}
			}
		}
	}

	.header {
		padding: 80rpx 0 0;

		&-title {
			z-index: 10;

			>text {
				color: #000000;
				margin: 10rpx 0;
				font-weight: 600;
				font-size: 34rpx;

			}

			>image {
				width: 24rpx;
				height: 32rpx;
			}
		}

		&-main {
			width: 100%;
			height: 750rpx;
			position: relative;
			background-color: #3bfff9;
			// margin: -28rpx auto 0;
			// background: url($imgurl + "index/lianji.png") no-repeat 0 0 / 100% 100%;

			&-title {
				font-weight: 400;
				font-size: 24rpx;
				color: #ffffff;
				text-align: center;
				position: absolute;
				z-index: 1;
				left: 50%;
				bottom: 24rpx;
				transform: translateX(-50%);

			}

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

			&-swiper {
				margin-top: 14rpx;
				width: 100%;
				height: 100%;
				z-index: 0;

				&-item {
					width: 100%;
					height: 100%;
					overflow: hidden;
				}

				&-num {
					height: 38rpx;
					background: rgba(0, 0, 0, 0.3);
					padding: 0 20rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #ffffff;
					position: absolute;
					bottom: 196rpx;
					left: 50%;
					transform: translateX(-50%);
					z-index: 10;
				}

				&-huanxiang {
					width: 64rpx;
					height: 64rpx;
					background: #F5F5F5;
					border-radius: 50%;
					font-weight: 400;
					font-size: 18rpx;
					color: #333333;
					position: absolute;
					bottom: 136rpx;
					right: 32rpx;
					z-index: 10;
				}
			}

			&-price {
				min-width: 280rpx;
				height: 44rpx;
				z-index: 20;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 78rpx;
				background: url($imgurl + "index/leitai.png") no-repeat 0 0 / 100% 100%;

				>text:nth-child(1) {
					font-weight: bold;
					font-size: 24rpx;
					color: #000000;
				}

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

			&-huanxiang {
				width: 646rpx;
				position: absolute;
				top: 346rpx;
				left: 50%;
				transform: translateX(-50%);


				>view {
					>view:nth-child(1) {
						width: 56rpx;
						height: 56rpx;
						background: rgba(51, 51, 51, 0.5);
						border-radius: 50%;
					}

				}
			}

			&-jidu {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 142rpx;
				z-index: 10;

				>view:nth-child(1) {
					width: 116rpx;
					height: 8rpx;
					background: rgba(255, 255, 255, 0.40);
					border-radius: 40rpx;

					>text {
						height: 8rpx;
						background: #D8FD24;
						border-radius: 40rpx;
					}
				}

				>view:nth-child(2) {
					font-weight: 400;
					font-size: 18rpx;
					color: #ffffff;
					margin-top: 4rpx;
				}
			}
		}
	}

	.tab {
		display: flex;
		align-items: center;
		justify-content: center;

		.tab-item1 {
			width: 160rpx;
			height: 92rpx;
			font-weight: 400;
			margin-right: 30rpx;

			&.act {
				background: url($imgurl + "index/checkTab1.png") no-repeat 0 0 / 100% 100%;

				>text {
					font-weight: 600;
					font-size: 24rpx;
					color: #333333;
				}
			}

			&.unact {
				background: url($imgurl + "index/uncheckTab1.png") no-repeat 0 0 / 100% 100%;

				>text {
					font-weight: 600;
					font-size: 24rpx;
					color: #333333;
				}
			}
		}

		.tab-item2 {
			width: 160rpx;
			height: 92rpx;
			font-weight: 400;
			margin-right: 30rpx;

			&.act {
				background: url($imgurl + "index/checkTab2.png") no-repeat 0 0 / 100% 100%;

				>text {
					font-weight: 600;
					font-size: 24rpx;
					color: #333333;
				}
			}

			&.unact {
				background: url($imgurl + "index/uncheckTab2.png") no-repeat 0 0 / 100% 100%;

				>text {
					font-weight: 600;
					font-size: 24rpx;
					color: #333333;
				}

			}
		}

		.tab-item3 {
			width: 160rpx;
			height: 92rpx;
			font-weight: 400;
			margin-right: 30rpx;

			&.act {
				background: url($imgurl + "index/checkTab3.png") no-repeat 0 0 / 100% 100%;

				>text {
					font-weight: 600;
					font-size: 24rpx;
					color: #333333;
				}
			}

			&.unact {
				background: url($imgurl + "index/uncheckTab3.png") no-repeat 0 0 / 100% 100%;

				>text {
					font-weight: 600;
					font-size: 24rpx;
					color: #333333;
				}

			}
		}
	}

	.guizeSc {
		>view {
			>image {
				width: 28rpx;
				height: 28rpx;
			}

			>text {
				font-weight: 400;
				font-size: 24rpx;
				color: #ffffff;
				margin-left: 6rpx;
			}
		}
	}

	.spylView {

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

			>view:nth-child(2n + 1) {
				>view:nth-child(1) {
					width: 74rpx;
					height: 56rpx;
					background: #ffffff;
					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: #b07af3;
					}
				}

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

					>view {
						>text {
							font-family: YouSheBiaoTiHei;
							font-weight: 400;
							font-size: 36rpx;
							color: #b07af3;
						}
					}
				}
			}
		}

		.list {
			padding: 30rpx;
			display: grid;
			grid-template-columns: repeat(3, 202rpx);
			gap: 40rpx 40rpx;

			.list-item {
				width: 202rpx;
				box-sizing: border-box;
				background-color: #F8F8F8;
				border-radius: 16rpx;

				.pic {
					width: 202rpx;
					height: 202rpx;
					box-sizing: border-box;
					position: relative;
					background: #D8D8D8;
					border-radius: 16rpx 16rpx 0rpx 0rpx;

					.pic-img {
						width: 100%;
						height: 100%;
						border-radius: 16rpx 16rpx 0rpx 0rpx;
					}

					.type-tag {
						position: absolute;
						top: 12rpx;
						left: 12rpx;
						border-radius: 18rpx;
						font-weight: 400;
						font-size: 14rpx;
						color: #ffffff;
						min-width: 68rpx;
						height: 32rpx;
						box-sizing: border-box;
					}

					.num {
						position: absolute;
						left: 50%;
						bottom: 8rpx;
						transform: translateX(-50%);
						border-radius: 18rpx;
						min-width: 66rpx;
						height: 38rpx;
						font-weight: 400;
						background-color: rgba(51, 51, 51, 0.50);
						font-size: 20rpx;
						color: #FFFFFF;
					}

					.yu-tag {
						position: absolute;
						right: 10rpx;
						top: 10rpx;
						z-index: 1;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: 400;
						font-size: 32rpx;
						color: #894dd3;
						text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0,
							#fff 0 -1px 0;
					}

					.shadow {
						position: absolute;
						z-index: 1;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						background: rgba(0, 0, 0, 0.6);

						>image {
							width: 86rpx;
							height: 156rpx;
						}
					}
				}

				.title {
					padding: 28rpx 18rpx 0;
					font-size: 20rpx;
					font-weight: 400;
					color: #333333;
				}

				.desc {
					padding: 24rpx 18rpx 0;
					font-size: 18rpx;
					font-weight: 500;
					color: #F39205;
				}

				.price {
					padding: 24rpx 18rpx 20rpx;
					font-weight: 400;
					font-size: 16rpx;
					color: #333333;
				}
			}
		}
	}

	.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: 40rpx;

		.lt-btn {
			width: 342rpx;
			height: 92rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #D8FD24;
			background: url($imgurl + "index/chouleitai.png") no-repeat 0 0 / 100% 100%;


		}

		.btn {
			width: 122rpx;
			height: 111rpx;
			position: relative;

			>view {
				white-space: nowrap;
				font-family: YouSheBiaoTiHei;
				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%;
				}
			}
		}
	}

	.d-pop {
		position: relative;
		width: 570rpx;
		box-sizing: border-box;

		.pic {
			width: 570rpx;
			height: 598rpx;
			background: #8953dc;
			border: 2rpx solid #ffffff;

			>image {
				width: 548rpx;
				height: 549rpx;
			}

			>view {
				width: 130rpx;
				height: 46rpx;
				position: absolute;
				top: -12rpx;
				left: 0;
				font-weight: 400;
				font-size: 20rpx;
				color: #ffdf46;
				box-sizing: border-box;
				background: url($imgurl + "common/chouLabel.png") no-repeat 0 0 / 100% 100%;
			}
		}

		.title {
			margin: 40rpx auto 0;
			width: 574rpx;
			height: 82rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			padding: 20rpx;
			border: 2rpx solid #894dd3;
			border-radius: 12rpx;
			background: #313133;

			>text {
				font-weight: 400;
				font-size: 32rpx;
				color: #ffffff;
			}
		}

		.d-list {
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;
			padding: 20rpx 0 0;

			.d-item {
				margin-top: 14rpx;

				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;
			}
		}

		.close {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translate(-50%, 160%);
		}
	}

	.buy-pop {
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #F7F7F7;
		padding-bottom: 30rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;


		.buy-pop-hd {
			padding: 40rpx 0;
			padding-left: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			font-size: 28rpx;
			font-weight: 500;
			color: #333333;

			.close {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.buy-card {
			border-radius: 20rpx;
			padding: 30rpx 30rpx 30rpx;
			background: #FFFFFF;

			.buy-info {
				display: flex;

				.pic {
					width: 180rpx;
					height: 180rpx;
					border-radius: 16rpx;
				}

				.info-r {
					width: calc(100% - 190rpx);
					box-sizing: border-box;
					display: flex;
					flex-flow: column nowrap;
					justify-content: space-between;
					padding: 10rpx 0 10rpx 30rpx;

					.title {
						font-size: 24rpx;
						font-weight: 500;
						color: #333333;
					}

					.hang1 {}

					.type {
						font-size: 20rpx;
						font-weight: 500;
						color: #999999;
					}

					.price-num {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.price {
							font-weight: 500;
							font-size: 16rpx;
							color: #333333;

							text {
								font-size: 28rpx;
							}
						}

						.num {
							font-size: 20rpx;
							font-weight: 500;
							color: #999999;
						}
					}
				}
			}

			.line {
				height: 1px;
				background: #222222;
				margin: 30rpx 0 10rpx;
			}


		}

		.card-row {
			padding: 16rpx 24rpx;
			display: flex;
			height: 82rpx;
			margin-top: 24rpx;
			justify-content: space-between;
			align-items: center;
			border-radius: 16rpx;
			background-color: #FFFFFF;

			.title {
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
			}

			.row-r {
				display: flex;
				align-items: center;
				font-size: 20rpx;
				font-weight: 500;
				color: #999999;

				.icon {
					margin-left: 10rpx;
					width: 10rpx;
					height: 17.14rpx;
				}
			}
		}

		.pay-title {
			margin-top: 30rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #ffffff;
		}

		.pay-type {
			padding: 30rpx 24rpx;
			border-radius: 20rpx;
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			background: #FFFFFF;

			.title {
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
			}
		}

		.agree {
			display: flex;
			margin-top: 30rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: #999999;
			line-height: 32rpx;

			.icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}

		.rule {
			padding: 20rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			margin: 20rpx 0 0;
			height: 160rpx;
			background: #F9F8E1;
			border-radius: 20rpx;

			.rule-inner {
				max-height: 120rpx;
				font-size: 20rpx;
				font-weight: 500;
				color: #333333;
			}
		}

		.pay-btn {
			margin: 30rpx auto 0;
			width: 686rpx;
			height: 84rpx;
			background: url($imgurl + "common/payBtn.png") no-repeat 0 0 / 100% 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			color: #CDEF27;

			>text:nth-child(1) {
				font-size: 24rpx;
			}

			>text:nth-child(2) {
				font-size: 24rpx;
			}
		}
	}

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

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

		.res-pop-bd {
			width: 750rpx;
			height: 40vh;

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

				.res-item {
					width: 100%;
					box-sizing: border-box;

					.pic {
						width: 100%;
						height: 210rpx;
						position: relative;
						background: #8953dc;
						border: 2rpx solid #ffffff;

						>image {
							width: 202rpx;
							height: 202rpx;
						}

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

						.num {
							position: absolute;
							z-index: 2;
							top: -20rpx;
							right: -22rpx;
							min-width: 42rpx;
							height: 48rpx;
							font-weight: 400;
							font-size: 20rpx;
							color: #ffdf46;
							background: url($imgurl + "common/chouNum.png") no-repeat 0 0 / 100% 100%;
							text-shadow: #000 1rpx 0 0, #000 0 1rpx 0, #000 -1rpx 0 0,
								#000 0 -1rpx 0;
						}
					}

					.title {
						padding: 10rpx 10rpx 0;
						font-weight: 400;
						font-size: 28rpx;
						color: #ffffff;
					}

					.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: 244rpx;
				height: 116rpx;
				font-weight: 400;
				font-size: 28rpx;

				>text {
					margin-top: 36rpx;
				}
			}

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

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

	.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;
		}
	}
}
</style>