<!--
 * @Date: 2023-11-13 15:46:52
 * @LastEditTime: 2024-03-09 14:09:26
 * @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 class="">{{$c.detailPageTitle((pageData && pageData.goods) || '')}}</view> -->
		</view>

		<view class="center relative" style="z-index: 10;" :style="{top:$sys().statusBarHeight+'px'}">
			<!-- <image :src="$img1('index/ljLeft.png')"></image> -->
			<text class="" style="padding-top: 20rpx;">连击赏</text>
			<!-- <image :src="$img1('index/ljRight.png')"></image> -->
		</view>


		<view v-if="pageData" class="page-hd common_bg relative">

			<view v-if="pageData" class="user-btns">
				<view class="user-num">
					<view class="user-list">
						<view class="avatar" v-for="(item, i) in pageData.goods.join_user.slice(0, 3)" :key="i"
							:style="{'z-index': i}">
							<image :src="item" lazy-load></image>
						</view>
					</view>
					{{ pageData.goods.join_count }}次参与
				</view>
			</view>

			<!-- 首抽半价 -->
			<view v-if="pageData.goods.is_shou_zhe == 1" class="half-tag flex">
				<image class="img100" :src="$img1('common/chouBanjia.png')" mode="aspectFit"></image>
			</view>

			<view v-if="pageTabCur == 0" class="link-num center">
				连击×{{ pageData.goods.user_lian_ji_number }}
			</view>


			<view class="swiper_view1 center" @click="swCur&&swCur--">
				<uni-icons type="left" color="#D8D8D8"></uni-icons>
			</view>
			<view class="swiper_view2 center" @click="(pageData.goods_list.data.length-1) != swCur&&swCur++">
				<uni-icons type="right" color="#D8D8D8"></uni-icons>
			</view>


			<view class="align-center swiperAll" style="width: 100%; height: 100%; position: absolute;">

				<swiper class="swiper" :indicator-dots="false" :current="swCur" @change="swChange" :autoplay="autoplay"
					:interval="5000" :duration="500">
					<swiper-item class="center" v-for="(item, i) in pageData.goods_list.data" :key="i">
						<view class="swiper-item flex">
							<image class="img100" :src="item.imgurl" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<text class="goods-name hidden" style="">{{pageData.goods_list.data[swCur].title}}</text>

			<view class="center swiperItemInfo" v-if="pageData&&pageData.goods_list.data[swCur]">
				<text>￥{{pageData.goods_list.data[swCur].price}}/ <text style="font-size: 18rpx;">抽</text></text>
			</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 class="align-center ml30 column" style="position: absolute; top: 56rpx; right: 32rpx;"
				@tap="toggleCollect">
				<image style="width: 64rpx; height: 64rpx;"
					:src="pageData.goods&&pageData.goods.collection_is?$img1('index/sc1.png'):$img1('index/sc2.png')">
				</image>
				<text style="color: #FFFFFF; font-size: 20rpx;">收藏</text>
			</view>

		</view>


		<view class="page-tab justify-center relative">
			<view class="page-tab-item center" v-for="(item, i) in pageTab" :key="i" :class="{ act: pageTabCur == i }"
				@click="pageTabChange(i)">
				<!-- <image v-if="i==0" :src="$img1('index/ljLeft.png')"></image> -->
				<text>{{ item.title }}</text>
				<!-- <image v-if="i==1" :src="$img1('index/ljRight.png')"></image> -->
			</view>
		</view>


		<view class="center" style="width: 100%; margin-top: 30rpx;">
			<view class="tab">
				<view class="tab-item1 center" @click="$refs.rulePop.getRule(15, '规则说明')">
					<text>规则说明</text>
				</view>
				<view class="tab-item2 center" :class="[tabCur == 1 ? 'act' : 'unact']" @click="tabChange(1)">
					<text>概率</text>
				</view>
				<view class="tab-item3 center" :class="[tabCur == 2 ? 'act' : 'unact']" @click="tabChange(2)">
					<text>记录</text>
				</view>


			</view>

			<!-- 	<view class="align-center guizeSc">
				<view class="align-center">
					<image :src="$img1('index/guize.png')"></image>
					<text>规则</text>
				</view>
			</view> -->


		</view>

		<view v-if="tabCur == 1 && pageData" class="list">
			<view class="list-item common_bg mb30" v-for="(item, i) in pageData.goodslist" :key="i">
				<view class="list-title common_bg align-center">
					<view class="flex-1 align-center">
						<image :src="item.shang_imgurl"></image>
						<text class="ml20">{{ item.pro }}</text>
					</view>
				</view>
				<!-- <scroll-view scroll-x></scroll-view> -->
				<view class="goods-list">
					<template v-for="(a, b) in item.goods_list">
						<view class="goods-item column" :key="b" @click="previewDetail(item, a)">
							<view class="pic">
								<image :src="a.imgurl" lazy-load></image>
								<view v-if="a.goods_type == 2" class="yu-tag ziti">预售</view>
							</view>
							<view class="title hang1">
								{{ a.title }}
							</view>
							<view class="price">售价:{{ a.price }}</view>
						</view>
					</template>
				</view>
			</view>
		</view>

		<template v-if="tabCur == 2">
			<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 common_bg" v-for="(item, i) in subTab" :key="i"
						:class="{ act: subTabCur == i }" @click="subTabChange(i)">
						{{ item.shang_title }}
					</view>
				</scroll-view>

				<view class="log-list">
					<view class="log-item br10" 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" :src="item.goodslist_imgurl"></image>
							</view>
							<view class="align-end column">
								<view class="center" :style="{background: item.shang_color}">{{item.shang_title}}</view>
								<view class="align-center mt10">
									<view class="title hang1">
										{{ item.goodslist_title }}
									</view>
									<view class="num">×1</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</template>

		<view class="btFixed column align-center" v-if="false">
			<template v-if="pageTabCur == 0">
				<view class="btFixed-top center">
					<image @click="jian" :src="$img('/static/img/jian1.png')"></image>
					<view class="center" @click="$c.noDouble(confirmSubmit, [0])">
						购买
					</view>
					<image @click="jia" :src="$img('/static/img/jia1.png')"></image>
				</view>
				<view class="btFixed-footer mt20 align-center justify-around">
					<view class="btFixed-footer-one center" @click="doMax">连击MAX</view>
					<view class="btFixed-footer-two center">连击 {{buyNum}} 次</view>
					<view class="btFixed-footer-three center">{{ pageData.goods?pageData.goods.user_mb_number:0 }}次夺取秘宝
					</view>
				</view>
			</template>
			<template v-if="pageTabCur == 1">
				<view class="btFixed-top center">
					<image @click="jian" :src="$img('/static/img/jian1.png')"></image>
					<view class="center" @click="$c.noDouble(confirmSubmit, [0])">
						使用密保{{buyNum}}次
					</view>
					<image @click="jia" :src="$img('/static/img/jia1.png')"></image>
				</view>
				<view class="btFixed-footer2 mt20 align-center justify-around">
					<view class="btFixed-footer2-one center" @click="doMax">连击MAX</view>
					<view class="btFixed-footer2-two center">连击 1 次</view>
					<view class="btFixed-footer2-three center">{{ pageData.goods?pageData.goods.user_mb_number:0 }}次夺取秘宝
					</view>
				</view>
			</template>
		</view>
		<view class="btnFixed column align-center">
			<view style="width: 100%; height: 75rpx; display: flex; align-items: center; position: relative;">

				<view class="btnFixed-numBox align-center justify-between">
					<image @click="jian" :src="$img1('index/jian.png')"></image>
					<text class="flex-1 center" style="margin-bottom: 10rpx;">{{buyNum}}</text>
					<image @click="jia" :src="$img1('index/jia.png')"></image>
				</view>

				<!-- 进度条-->
				<view class="center" v-if="pageTabCur!=1"
					style="min-width: 112rpx; height: 40rpx; background-color: #F5F5F5; border-radius: 20rpx; position: absolute; left: 38rpx;">
					<view class="center row" style="color: #999999; font-size: 20rpx;">
						<text style="font-size: 16rpx; margin-right: 8rpx;">cp:</text>
						<text>{{pageData.goods?pageData.goods.user_lian_ji_number:0}}/{{pageData.goods?pageData.goods.lian_ji_num:0}}</text>
					</view>
				</view>

			</view>

			<view class="btnFixed-btns relative center">
				<view :class="pageTabCur==0?'btnFixed-btns-one':'btnFixed-btns-one2 filter'"
					@click="pageTabCur==0 && $c.noDouble(confirmSubmit, [0])">连击{{ pageTabCur==0?buyNum:0}}次</view>
				<view :class="pageTabCur==0?'':'filter'" class="btnFixed-btns-lianji column center" @click="doMax">
					<!-- <text>连击</text>
					<text>MAX</text> -->
				</view>
				<view :class="pageTabCur==1?'btnFixed-btns-two':'btnFixed-btns-two2 filter'"
					@click="pageTabCur==1 && $c.noDouble(confirmSubmit, [0])">
					{{ pageData.goods?pageData.goods.user_mb_number:0 }}次夺取秘宝
				</view>
			</view>
		</view>

		<uni-popup ref="resPop" type="center" mask-background-color="rgba(0,0,0,0.8)">
			<view 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"
							@click="item.isChoose = !item.isChoose">
							<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">×1</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>
		<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_title }}</view>
				</view>

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

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

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

				<view class="close icon" @click="close('dPop')">
					<image :src="$img('/static/img/close.png')" lazy-load></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"></view>
					<text>确认订单</text>
					<view class="close icon" @click="close('buyPop')">
						<image :src="$img('/static/img/close2.png')" lazy-load></image>
					</view>
				</view>
				<view class="buy-card">
					<view class="buy-info">
						<view class="pic">
							<image :src="orderData.goods.imgurl_detail" lazy-load></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">
										¥
										<text>{{ orderData.goods.shou_zhe_price }}</text>
									</view>
									<view class="num">×{{ 1 }}</view>
								</view>
								<view v-if="orderData.goods.prize_num > 1" class="price-num">
									<view class="price">
										¥
										<text>{{ orderData.goods.price }}</text>
									</view>
									<view class="num">
										×{{ orderData.goods.prize_num * 1 - 1 }}
									</view>
								</view>
							</template>
							<view v-else class="price-num">
								<view class="price">
									¥<text>{{ orderData.goods.price }}</text>
								</view>
								<view class="num">×{{ orderData.goods.prize_num }}</view>
							</view>
						</view>
					</view>


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


				<view class="card-row" @click="toCoupon">
					<view class="title align-center">
						<text class="ml20">优惠券</text>
					</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="mt20" style="background: #FFFFFF; border-radius: 16rpx;">
					<view class="pay-type" @click="changePay('useIntegral')">
						<view class="title align-center">
							使用{{$config.getAppSetting('currency1_name')}}抵扣¥{{ orderData.use_integral_money }} <text
								style="color: #676767; font-size: 16rpx; margin-left: 10rpx;">(剩余:{{ orderData.integral }}个)</text>
						</view>
						<view class="icon">
							<image v-if="useIntegral" :src="$img1('common/check_act.png')" lazy-load></image>

							<image v-else :src="$img1('common/check.png')" lazy-load></image>
						</view>
					</view>
					<view class="pay-type" @click="changePay('useMoney')">
						<view class="title align-center">
							{{$config.getAppSetting('balance_name')}}支付¥{{ orderData.use_money }} <text
								style="color: #676767; font-size: 16rpx; margin-left: 10rpx;">(剩余:{{ orderData.money }})</text>
						</view>

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

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

				<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])">
					<text>立即支付</text>
					<text>
						{{
						  pageData.goods.type == 5
						    ? ` ${orderData.price}积分`
						    : ` ¥${orderData.price}`
						}}
					</text>
				</view>
			</view>
		</uni-popup>

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

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

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

<script>
	import { getLianJiGoodsDetail, getInfiniteShangLog } from '@/common/server/goods.js';
	import { calcInfiniteOrderMoney, createInfiniteOrder, createInfiniteMibaoOrder, getInfinitePrizeOrderLogByNum } from '@/common/server/order.js';
	import { toggleCollection } from '@/common/server/collection.js';

	export default {
		data() {
			return {
				optData: '',
				buyNum: 0,
				useMoney: true,
				useIntegral: true,
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					auto: false
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					auto: true,
					page: {
						size: 15 // 每页数据的数量,默认10
					}
				},
				pageTab: {
					0: {
						title: '连击赏'
					},
					1: {
						title: '秘宝池'
					}
				},
				pageTabCur: 0,
				tabList: {
					1: {
						title: '赏品预览'
					},
					2: {
						title: '中赏记录'
					}
				},
				tabCur: 1,
				swCur: 0,
				autoplay: false,
				subTab: [],
				subTabCur: 0,
				pageData: '',
				previewData: '',
				orderData: '',
				prizeData: '',
				sendRuleData: '',
				couponData: '',
				isAgree: true,
				aniShow: false,
				logList: []
			}
		},

		computed: {
			reChooseNum() {
				if (!this.prizeData || this.prizeData.data.length <= 0) {
					return 0
				}

				const arr = this.prizeData.data.filter(item => item.isChoose)

				return arr.length
			}
		},

		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}系列`,
				imageUrl: this.pageData.goods.imgurl_detail,
				path: '/package/index/lian-ji' +
					this.$c.qs({
						goods_id: this.pageData.goods.id,
						goods_num: this.pageData.goods.num,
						pid: pid
					})
			}
		},

		onLoad(options) {
			this.optData = options

			this.tabChange(this.tabCur)

			uni.$on('chooseCoupon', data => {
				this.couponData = data
				this.confirmSubmit([0])
			})
			this.$c.getRule(10).then(res => {
				if (res.status == 1) {
					this.sendRuleData = res.data
				}
			})
		},

		onShow() {
			this.autoplay = true
		},

		onReady() {
		},

		onHide() {
			this.autoplay = false
		},

		onUnload() {
			uni.$off('chooseCoupon')
		},

		methods: {
			openZhankai(item) {
				item.open = !item.open
			},
			doMax() {
				if (this.pageTabCur != 0) return false
				let max =
					Number(this.pageData.goods.max_fa) -
					Number(this.pageData.goods.user_lian_ji_number)

				this.buyNum = max
			},
			jia() {
				if (this.pageTabCur == 0) {
					let max =
						Number(this.pageData.goods.max_fa) -
						Number(this.pageData.goods.user_lian_ji_number)

					if (this.buyNum >= max) {
						this.buyNum = max
						this.$c.toast({
							title: '已达到最大值'
						})
						return
					}

					this.buyNum += 1
				}

				if (this.pageTabCur == 1) {
					if (this.buyNum >= this.pageData.goods.user_mb_number) {
						this.buyNum = this.pageData.goods.user_mb_number
						this.$c.toast({
							title: '已达到最大值'
						})
						return
					}

					this.buyNum += 1
				}
			},

			jian() {
				if (this.buyNum <= 0) {
					this.buyNum = 0
					return
				}

				this.buyNum -= 1
			},

			previewDetail(item, a) {
				const obj = {
					imgurl: a.imgurl,
					title: a.title,
					shang_title: item.shang_title,
					pro: item.pro
				}

				console.log(obj)
				this.previewData = obj

				this.open('dPop')
			},

			doReDraw() {
				if (this.orderData.item_card_count < this.reChooseNum) {
					this.$c.toast({
						title: '重置卡不足'
					})

					return
				}
			},

			swChange(e) {
				this.swCur = e.detail.current
			},

			async toggleCollect() {
				try {
					const res = await toggleCollection(this.pageData.goods.id);
					if (res.status == 1) {
						this.getData()
					}
				} catch (error) {
					console.error('收藏操作失败:', error);
				}
			},

			toBag() {
				this.close('resPop')

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

			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(async () => {
					try {
						const res = await getInfinitePrizeOrderLogByNum(order_num);
						if (res.status == 1) {
							res.data.data.map(item => {
								item.isChoose = false
							})

							this.prizeData = res.data

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

							this.bgmCtx.openBgm.stop()
							this.bgmCtx.openBgm.play()
							this.open('resPop')
						}
					} catch (error) {
						console.error('获取抽奖结果失败:', error);
					}
				}, 500)
			},

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

				this.confirmSubmit([0])
			},

			async confirmSubmit([type, fromNotice = false]) {
				if (this.buyNum <= 0) {
					this.$c.toast({
						title: '次数不能为零'
					})
					return
				}

				let data = {
					goods_id: this.pageData.goods.id,
					prize_num: this.buyNum,
					use_money_is: this.useMoney ? 1 : 2,
					use_integral_is: this.useIntegral ? 1 : 2,
					coupon_id: (this.couponData && this.couponData.id) || '',
					is_mibao: this.pageTabCur
				}

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

				try {
					let res;
					if (type == 0) {
						res = await calcInfiniteOrderMoney(data);
					} else if (type == 1) {
						if (this.pageTabCur == 1) {
							res = await createInfiniteMibaoOrder({
								goods_id: this.pageData.goods.id,
								prize_num: this.buyNum,
								is_mibao: this.pageTabCur
							});
						} else {
							res = await createInfiniteOrder(data);
						}
					}

					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()
									}
								})
							}
						}
					}
				} catch (error) {
					console.error('订单操作失败:', error);
				}
			},
			doRefresh() {
				this.getData()
				if (this.tabCur == 2) {
					this.tabChange(this.tabCur)
				}
			},
			subTabChange(i) {
				this.subTabCur = i
				this.logList = []

				this.$nextTick(() => {
					setTimeout(() => {
						this.mescroll.resetUpScroll()
					}, 100)
				})
			},
			tabChange(i) {
				this.tabCur = i
				switch (Number(i)) {
					case 1:
						this.getData()
						break
					case 2:
						this.getData()
						this.subTabChange(this.subTabCur)
						break
				}
			},
			async getLog({
				num,
				size
			}) {
				if (num > 1) return this.mescroll.endByPage(this.logList.length, 1)
				try {
					const res = await getInfiniteShangLog({
						page: num,
						goods_id: this.optData.goods_id,
						shang_id: this.subTab.length > 0 ? this.subTab[this.subTabCur].shang_id : '',
						is_mibao: this.pageTabCur
					});
					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)
					}
				} catch (error) {
					console.error('获取中奖记录失败:', error);
					this.mescroll.endErr();
				}
			},
			pageTabChange(i) {
				this.pageTabCur = i
				this.buyNum = 0
				this.tabChange(this.tabCur)
			},
			async getData() {
				try {
					const res = await getLianJiGoodsDetail(this.optData.goods_id, this.pageTabCur);
					if (res.status == 1) {
						res.data.goodslist.forEach(item => {
							this.$set(item, 'open', false)
						})
						this.pageData = res.data

						if (this.pageTabCur == 0) {
							let max =
								Number(this.pageData.goods.max_fa) -
								Number(this.pageData.goods.user_lian_ji_number)

							if (this.buyNum > max) {
								this.buyNum = max
							}
						}

						if (this.pageTabCur == 1) {
							if (this.buyNum >= this.pageData.goods.user_mb_number) {
								this.buyNum = this.pageData.goods.user_mb_number
							}
						}
					}
				} catch (error) {
					console.error('获取商品详情失败:', error);
				}
			},

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

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


			computedPercentage(numerator, denominator) {
				// 确保分母不为0，以避免除以零的错误
				if (this.denominator === 0) return 0;
				// 计算百分比并乘以100（如果需要百分比形式的输出）
				return (numerator / denominator) * 100;
			}

		}
	}
</script>

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

		>view {
			font-weight: 400;
			font-size: 50rpx;
			color: #FFFFFF;
		}
	}

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

		image {
			width: 100%;
			height: 100%;
			border-radius: inherit;
		}

		.page-tab {
			margin: 36rpx auto 0;
			width: 532rpx;
			height: 72rpx;
			z-index: 10;
			border: 2rpx solid #F5F5F5;
			border-radius: 16rpx;

			.page-tab-item {
				width: 266rpx;
				height: 72rpx;
				position: relative;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;

				>image {
					width: 40rpx;
					height: 42rpx;
				}

				>text {
					width: 532rpx;
					height: 72rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 16rpx;
					background-color: #FFFFFF;
					padding: 0 20rpx;
				}

				&.act {
					text {
						color: #D8FD24;
						background-color: #333333;
					}
				}
			}
		}

		.page-hd {
			width: 100%;
			height: 750rpx;
			box-sizing: border-box;
			position: relative;
			margin-top: 130rpx;
			background-color: #FFFFFF;

			.half-tag {
				width: 160rpx;
				height: 60rpx;
				position: absolute;
				left: 0;
				top: 200rpx;
				z-index: 1;

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

			.link-num {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 168rpx;
				min-width: 128rpx;
				height: 40rpx;
				background-color: rgba(51, 51, 51, 0.50);
				z-index: 10;
				box-sizing: border-box;
				font-weight: 400;
				font-size: 20rpx;
				color: #FECF97;
			}

			.swiper_view1 {
				position: absolute;
				width: 56rpx;
				height: 56rpx;
				top: 346rpx;
				left: 32rpx;
				background: rgba(51, 51, 51, 0.5);
				border-radius: 50%;
				z-index: 10;
			}

			.swiper_view2 {
				position: absolute;
				width: 56rpx;
				height: 56rpx;
				top: 346rpx;
				right: 32rpx;
				background: rgba(51, 51, 51, 0.5);
				border-radius: 50%;
				z-index: 10;
			}

			.swiperAll {
				height: 100%;

				>view {
					width: 74rpx;
					height: 56rpx;
					background: #FFFFFF;
					border-radius: 12rpx;
					border: 2rpx solid #000000;
				}

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

			.swiper {
				width: 100%;
				height: 100%;

				.swiper-item {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 100%;
				}
			}

			.goods-name {
				z-index: 10;
				position: absolute;
				bottom: 24rpx;
				left: 50%;
				transform: translateX(-50%);
				font-size: 24rpx;
				color: #FFFFFF;
			}

			.swiperItemInfo {
				min-width: 280rpx;
				height: 44rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 78rpx;
				font-weight: 500;
				z-index: 10;
				font-size: 24rpx;
				background: url($imgurl + "index/leitai.png") no-repeat 0 0 / 100% 100%;

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

			}

			.goods-title {
				margin: 30rpx auto 0;
				width: 630rpx;
				height: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				padding: 0 20rpx;

				.hang1 {}

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

			.user-btns {
				display: flex;
				position: absolute;
				bottom: 136rpx;
				left: 50%;
				transform: translateX(-50%);
				justify-content: space-between;
				align-items: center;
				z-index: 1;

				.user-num {
					display: flex;
					align-items: center;

					font-size: 18rpx;
					font-weight: 500;
					color: #FFFFFF;

					.user-list {
						display: flex;
						padding-left: 26rpx;
						padding-right: 10rpx;

						.avatar {
							width: 24rpx;
							height: 24rpx;
							background: #7f7f7f;
							border-radius: 50%;
							box-sizing: border-box;
							position: relative;
							margin-left: -16rpx;
						}
					}
				}

				.btns {
					display: flex;
					align-items: center;

					.btn {
						display: flex;
						align-items: center;
						margin-left: 40rpx;

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

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

						&.pd {
							padding-left: 60rpx;
						}

						&.dis {
							filter: grayscale(1);
						}
					}
				}
			}

		}

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

			.tab-item1 {
				width: 160rpx;
				height: 92rpx;
				font-weight: 400;
				margin-right: 30rpx;
				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;

				&.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;
				}
			}
		}

		.list {
			padding: 40rpx 20rpx 0;

			.list-item {
				box-sizing: border-box;

				.list-title {
					height: 52rpx;

					>view:nth-child(1) {
						>image {
							width: 56rpx;
							height: 56rpx;
						}

						>text {
							font-weight: 400;
							font-size: 20rpx;
							color: #999999;
						}
					}
				}

				.goods-list {
					padding: 30rpx 10rpx 10rpx 10rpx;
					display: grid;
					grid-template-columns: repeat(3, 220rpx);
					grid-gap: 20rpx;

					.goods-item {
						display: inline-flex;
						width: 220rpx;
						background-color: #F8F8F8;
						border-radius: 16rpx;

						.pic {
							width: 220rpx;
							height: 220rpx;
							border-radius: 16rpx 16rpx 0rpx 0rpx;
							position: relative;
							margin: 0 auto;

							.yu-tag {
								position: absolute;
								right: 10rpx;
								bottom: 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;
							}
						}

						.title {
							width: 200rpx;
							margin: 28rpx auto 0;
							font-size: 20rpx;
							font-weight: 500;
							color: #333333;
						}

						.price {
							width: 200rpx;
							margin: 24rpx auto 28rpx;
							font-weight: 500;
							font-size: 16rpx;
							color: #333333;
						}
					}
				}
			}
		}

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

			.sub-tab-item {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				min-width: 88rpx;
				height: 44rpx;
				margin-left: 30rpx;
				font-weight: 500;
				font-size: 20rpx;
				color: #333333;
				background: #F5F5F5;
				border-radius: 8rpx;

				&.act {
					background: #E6F791;
				}

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

		}

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

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

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

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

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

					.hang1 {}

					.time {
						margin-top: 12rpx;
						white-space: nowrap;
						font-size: 16rpx;
						font-weight: 500;
						color: #999999;
					}
				}

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

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

					>view:nth-child(2) {
						>view:nth-child(1) {
							min-width: 68rpx;
							height: 32rpx;
							box-sizing: border-box;
							line-height: 40rpx;
							border-radius: 18rpx;
							font-weight: 500;
							font-size: 14rpx;
							color: #FFFFFF;
						}

					}

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

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

		.btFixed {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 10;
			box-sizing: border-box;
			width: 100%;
			padding-bottom: 30rpx;

			&-top {
				>image {
					width: 90rpx;
					height: 66rpx;
				}

				>view {
					min-width: 210rpx;
					height: 66rpx;
					font-family: YouSheBiaoTiHei;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					background: url($imgurl+'img/goumai.png') no-repeat 0 0 / 100% 100%;
				}
			}

			&-footer {
				width: 750rpx;

				>view {
					width: 210rpx;
					height: 80rpx;
				}

				&-one {
					font-family: YouSheBiaoTiHei;
					font-weight: 400;
					font-size: 34rpx;
					color: #00FFBC;
					background: url($imgurl+'img/lainmax.png') no-repeat 0 0 / 100% 100%;
				}

				&-two {
					font-family: YouSheBiaoTiHei;
					font-weight: 400;
					font-size: 34rpx;
					color: #00FFBC;
					background: url($imgurl+'img/liannum.png') no-repeat 0 0 / 100% 100%;
				}

				&-three {
					font-family: YouSheBiaoTiHei;
					font-weight: 400;
					font-size: 34rpx;
					color: rgba(0, 255, 188, 0);
					line-height: 113rpx;
					text-stroke: 1px #00FFBB;
					-webkit-text-stroke: 1px #00FFBB;
					background: url($imgurl+'img/lianzero.png') no-repeat 0 0 / 100% 100%;
				}
			}

			&-footer2 {
				width: 750rpx;

				>view {
					width: 210rpx;
					height: 80rpx;
				}

				&-one {
					font-family: YouSheBiaoTiHei;
					font-weight: 400;
					font-size: 34rpx;
					color: rgba(0, 255, 188, 0);
					line-height: 113rpx;
					text-stroke: 1px #00FFBB;
					-webkit-text-stroke: 1px #00FFBB;
					background: url($imgurl+'img/lainmax.png') no-repeat 0 0 / 100% 100%;
				}

				&-two {
					font-family: YouSheBiaoTiHei;
					font-weight: 400;
					font-size: 34rpx;
					color: rgba(0, 255, 188, 0);
					line-height: 113rpx;
					text-stroke: 1px #00FFBB;
					-webkit-text-stroke: 1px #00FFBB;
					background: url($imgurl+'img/liannum.png') no-repeat 0 0 / 100% 100%;
				}

				&-three {
					font-family: YouSheBiaoTiHei;
					font-weight: 400;
					font-size: 34rpx;
					color: #00FFBC;
					background: url($imgurl+'img/lianzero.png') no-repeat 0 0 / 100% 100%;
				}
			}
		}

		.btnFixed {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 10;
			box-sizing: border-box;
			width: 100%;
			padding: 30rpx 30rpx 80rpx;
			background: #FFFFFF;

			&-numBox {
				width: 224rpx;
				height: 92rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				// background: url($imgurl+'index/numBox.png') no-repeat 0 0 / 100% 100%;

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

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

			&-btns {
				margin: 30rpx 0 0;
				border: 2rpx solid #F5F5F5;
				border-radius: 16rpx;

				&-one {
					width: 342rpx;
					height: 92rpx;
					font-weight: 500;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #D8FD24;
					box-sizing: border-box;
					background: url($imgurl+'index/lianjiBtn1.png') no-repeat 0 0 / 100% 100%;
				}

				&-one2 {
					width: 342rpx;
					height: 92rpx;
					font-weight: 500;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #333333;
					box-sizing: border-box;
				}

				&-lianji {
					position: absolute;
					// bottom: -25rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 118.79rpx;
					height: 118.79rpx;
					z-index: 4;
					line-height: 1;
					background: url($imgurl+'index/lianjiMax.png') no-repeat 0 0 / 100% 100%;

					>text {
						color: #FFFFFF;
						font-family: YouSheBiaoTiHei;
						text-shadow: #894DD3 1px 0 0, #894DD3 0 1px 0, #894DD3 -1px 0 0, #894DD3 0 -1px 0;
					}

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

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

				}

				&-two {
					width: 342rpx;
					height: 92rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #D8FD24;
					display: flex;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					text-align: right;
					background: url($imgurl+'index/duoquBtn1.png') no-repeat 0 0 / 100% 100%;
				}

				&-two2 {
					width: 342rpx;
					height: 92rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					display: flex;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					text-align: right;
				}
			}
		}

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

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

			.pic {
				width: 570rpx;
				height: 598rpx;
				// background: #8953DC;
				background: #FFFFFF;
				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;

				>text {
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
				}

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

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

				.buy-info {
					display: flex;

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

					.info-r {
						width: calc(100% - 190rpx);
						box-sizing: border-box;
						display: flex;
						flex-flow: column nowrap;
						justify-content: space-between;
						padding: 32rpx 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 {
								ffont-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;
				}

				.yhfs {
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.card-row {
					padding: 16rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						>image {
							width: 32rpx;
							height: 32rpx;
						}

						>text {
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
						}
					}

					.row-r {
						display: flex;
						align-items: center;

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

						.icon {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}

				.card-row {
					.title {}

					.row-r {
						.icon {}
					}
				}
			}

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

				.title {
					>image {
						width: 32rpx;
						height: 32rpx;
					}

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

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

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

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

			.pay-type {
				padding: 24rpx;
				border-radius: 20rpx;
				display: flex;
				align-items: center;


				.icon {
					width: 32rpx;
					height: 32rpx;
				}

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

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

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

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

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

			.pay-btn {
				margin: 30rpx auto;
				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;
				}
			}
		}

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