zhibo/pages_course/living.vue

<template>
	<view class="swiper-wrapper">
		<!-- 状态栏占位 -->
		<image src="https://fs-1323137866.cos.ap-chongqing.myqcloud.com/live_bg.jpg" class="live-bg"></image>
		<view class="container" :class="isFullscreen ? 'fullscreen ' : ''">
			<view class="content">
				<view style="position: fixed; top: 0; z-index: 5" class="content-top">
					<view class="">
						<view class="x-f">
							<image v-if="!scene" @click="goBack" class="w60 h64  mr6"
								src="/static/images/return3.png" />
							<view class="align-center"
								style="padding: 6rpx 8rpx; height: 64rpx; background: rgba(0,0,0,0.5); border-radius: 32rpx">
								<u-avatar :src="liveItem.liveImgUrl || '/static/images/avatar.png'"
									:size="32"></u-avatar>
								<view class="colorf ml10 mr6">
									<view>{{ liveItem.liveName ? truncateString(liveItem.liveName, 8) : '未命名' }}</view>
								</view>
							</view>
						</view>
						<!-- 积分倒计时 -->
						<view class="progress-countdown" :class="liveItem.showType == 2 ? ' progress-vertical' : ''"
							:style="{ 'display': isFocus ? 'none' : '' }"
							v-if="countdownPercentage != 100 && liveItem.completionPointsEnabled && liveItem.status == 2 && !isPreview">
							<image class="title" src="/static/images/points_title.png"></image>
							<view class="progress-bar-bg">
								<view class="progress-bar-fill" :style="{ width: countdownPercentage + '%' }"></view>
							</view>
							<view class="progress-text">
								倒计时{{ formattedCountdown.hours || '00' }}:{{ formattedCountdown.minutes || '00' }}:{{
									formattedCountdown.seconds ||'00' }}
							</view>
						</view>
					</view>

					<view class="end">
						<view v-if="Array.isArray(filteredViewers)" class="align-center" @click="toggleViewerList"
							style="margin-top: 88rpx">
							<view v-for="(item, viewerIndex) in filteredViewers" :key="viewerIndex">
								<image v-if="item.avatar" class="w52 h52 mr4" style="border-radius: 26rpx"
									:src="item.avatar" />
								<view v-else class="w52 h52 mr4"
									:style="{ backgroundColor: getUserRandomColor(item.userId), borderRadius: '50%' }">
									<text class="text-white text-xs">{{ getNicknameInitial(item.nickName) }}</text>
								</view>
							</view>
							<view class="sum">{{ formattedWatchCount || 0 }}</view>
						</view>

						<view class="complaint-box" @click="navgetTo('/pages_shopping/live/complaintList')">
							<image class="image w32 h32 mr10" src="/static/images/complaint.png" mode="widthFix" />
							<view class="fs26">投诉</view>
						</view>
					</view>
				</view>

				<!-- 积分倒计时 -->
				<!-- <view class="progress-countdown end" :class="liveItem.showType==2?' progress-vertical':''"
					:style="{ 'display':isFocus?'none':''}"
					v-if="countdownPercentage!=100&&liveItem.completionPointsEnabled&&liveItem.status==2&&!isPreview">
					<image class="title" src="/static/images/points_title.png"></image>
					<view class="progress-bar-bg">
						<view class="progress-bar-fill" :style="{ width: countdownPercentage + '%' }"></view>
					</view>
					<view class="progress-text">
						倒计时{{ formattedCountdown.hours||'00' }}:{{ formattedCountdown.minutes||'00' }}:{{ formattedCountdown.seconds||'00' }}
					</view>
				</view> -->

				<!-- 右边的side -->
				<view v-show="!isFocus" class="side-group" :class="{
					'top2': (!isShowRed && !(isShowLottery && countdown)),
					'top3': (isShowRed || (isShowLottery && countdown))
				}">
					<view class="side-item" @click="onRed()" v-if="isShowRed">
						<button class="button button-reset" style="height: 70rpx;">
							<image class="image" style="width: 72rpx;" src="/static/images/redbag.png"
								mode="widthFix" />
						</button>
						<view class="fs30">领红包</view>
					</view>
					<view class="side-item" @click="onLottery()" v-if="isShowLottery && countdown">
						<button class="button button-reset">
							<image class="image" src="/static/images/lottery.png" mode="widthFix" />
						</button>
						<view class="fs30">抽奖</view>
					</view>
					<view class="side-item" @click="onLike">
						<LikeButton :initialCount="100" :heartsPerClick="5" @like="onLike" />
						<view class="txt" style="font-size: 30rpx;">{{ formattedLikeCount || 0 }}</view>
					</view>
					<view class="side-item">
						<button open-type="share" class="button button-reset">
							<image class="image" src="/static/images/weixin1.png" mode="widthFix" />
						</button>
						<view class="txt" style="font-size: 30rpx;">分享</view>
					</view>
				</view>

				<!-- 直播 -->
				<LiveVideo class="live-video" ref="liveVideo" :isAgreement="isAgreement" :liveItem="liveItem"
					:hasSubscribed="hasSubscribed" :liveId="liveId" :userData="userData" @liveStart="handleLiveStart"
					@videoError="handleVideoError" @liveStateChange="handleLiveStateChange"
					@agreementClick="handleAgreement" @fullscreen-change="handleFullscreenChange" />

				<!-- 底部聊天区域 -->
				<view class="chat-area-container" :class="{ 'chat-area-focused': isFocus }"
					:style="{ '--keyboard-height': keyboardHeight + 'rpx' }">
					<view class="mt20 chat-content"
						:class="{ 'chat-content-focused': isFocus, 'chat-content-preview': liveItem.status == 1 }">
						<view v-if="showPurchasePrompt && orderUser && orderUser.count && liveItem.status == 2"
							class="shop-prompt f30 mb20">
							<image class="w32 h32 mr8" src="/static/images/shopping.png" />
							<text>{{ orderUser.count || 0 }}人正在去购买</text>
						</view>

						<view v-if="showWelcomeMessage" class="welcome-message" style="max-width: 100%">
							<view class="list justify-start" v-show="inAndOut.cmd == 'entry' || inAndOut.cmd == 'out'">
								<view class="talk-list justify-start">
									<view class="fs30">
										<text style="color: #ff89d6">{{ inAndOut.nickName || '未命名' }}</text>
										<text class="colorf">{{ inAndOut.msg }}直播间</text>
									</view>
								</view>
							</view>
						</view>

						<view class="notice-message" v-if="!isFocus && isShowNotice">
							公告消息: {{ notice.msg }}
						</view>

						<scroll-view id="msgScroll" v-if="Array.isArray(talklist)" enable-flex scroll-y="true"
							:enhanced="true" :bounces="false" :show-scrollbar="false" :fast-deceleration="false"
							:enable-back-to-top="false" class="scrolly flex-1 column"
							style="width: calc(100% - 20rpx); -webkit-overflow-scrolling: touch;"
							:scroll-top="scrollTop" :scroll-into-view="scrollIntoView" @scroll="onScroll"
							ref="scrollView" scroll-with-animation="true" :scroll-animation-duration="300">
							<view class="list justify-start" v-for="(item, talkIndex) in talklist || []"
								:key="talkIndex" :id="`list_${item.uniqueId || talkIndex}`"
								v-show="item.cmd != 'red' && item.cmd != 'out' && item.cmd != 'entry'">
								<view class="talk-list justify-start">
									<view class="fs30 talk-item" style="max-width: 100%;">
										<text class="nickname" style="color: #ffda73;">{{ item.nickName || '未命名'
											}}：</text>
										<text class="message colorf">{{ item.msg }}</text>
									</view>
								</view>
							</view>
						</scroll-view>

						<!-- 一键弹幕 -->
						<u-scroll-list :indicator="false" v-if="!isFocus">
							<view class="barrage" v-for="(item, index) in barrageList" :key="index"
								@click="onBarrage(item)">
								{{ item }}
							</view>
						</u-scroll-list>
					</view>

					<!-- 聊天输入组件 -->
					<ChatInput ref="chatInput" :value="value" :focused="isFocus" :placeholderText="placeholderText"
						@focus="onInputFocus" @blur="onInputBlur" @send="onSendMessage" @open-cart="openCart"
						@show-gift="showGift" @input="onInputChange" @show-more="handleShowMore" />
				</view>
			</view>

			<!-- 商品卡片 -->
			<LiveGoods class="shop-card" :isShow="isShowGoods" :goodsData="goodsCard" @goShop="handleGoShop"
				@close="handleCloseGoods" />

			<!-- 抽奖弹窗 -->
			<LotteryPopup :show="isShowLotteryPop && countdown" :countdown="countdown" :products="lotteryProducts"
				@close="handleLotteryClose" @claim="handleLotteryClaim" />

			<u-popup :show="!!integral.status" round="20rpx" mode="center" bgColor="#ffffff" zIndex="10076">
				<view class="integral-box">
					<view class="top">
						<view class="title">观看视频领芳华币</view>
						<image class="photo" src="/static/images/integral_bg.png" mode="widthFix" />
					</view>
					<view class="item">
						<view class="title">{{ integral.msg }}</view>
						<view class="button" @click="integral.status = false">确认</view>
					</view>
				</view>
			</u-popup>

			<u-popup :show="shouldShowIntegralPopup" round="20rpx" mode="center" bgColor="#ffffff" zIndex="10076">
				<view class="integral-popup color9">
					<view class="integral-header">
						<view class="integral-title">观看视频领积分</view>
						<image class="integral-background-image"
							src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/integral_bg.png"
							mode="widthFix" />
					</view>
					<view class="integral-content">
						<view class="integral-message">积分发放成功</view>
					</view>
				</view>
			</u-popup>

			<u-popup :show="isShowRedCard" round="20rpx" mode="center" bgColor="transparent" zIndex="10076">
				<view class="red-card">
					<image class="img" src="/static/images/red_card.png" />
					<view class="red-content">
						<view class="title">{{ redCard.msg }}</view>
						<view class="txt">直播惊喜芳华币</view>
						<view class="button" @click="isShowRedCard = false">确认</view>
					</view>
				</view>
			</u-popup>

			<!-- 中奖和未中奖 -->
			<u-popup :show="isShowPrize && havePrize" round="20rpx" mode="center" bgColor="#fff" zIndex="10076">
				<view class="prize-card" v-if="isCurrentUserWon">
					<image class="nav-img" src="/static/images/red_head.png" mode="widthFix" />
					<view class="title">恭喜您 中奖啦！</view>
					<view class="prize-content" v-for="(item, index) in prizeInfo || []" :key="index">
						<view class="item">{{ item.userName }}</view>
						<view class="item">{{ item.userId }}</view>
						<view class="txt item">{{ item.prizeLevel }}等奖</view>
					</view>
					<view class="tip">请填写收货地址，主播将会将奖品发给您</view>
					<view class="button"
						@click="navgetTo('/pages_shopping/live/confirmCreateOrder?type=win&productId=' + getCurrentUserPrizeProductId + '&liveId=' + liveId + '&recordId=' + getCurrentUserPrizeRecordId), confirm()">
						填写地址
					</view>
				</view>
				<view class="no-prize-card" v-else>
					<image class="img" src="/static/images/no-prize.png" mode="widthFix" />
					<view class="tip">很遗憾 您未中奖</view>
					<view class="button" @click="confirm">确认</view>
				</view>
			</u-popup>

			<!-- 中奖记录 -->
			<WinningPopup :show="winning" :prizeList="prizeAll" :liveId="liveId" @close="closeWin"
				@fill-address="handleFillAddress" />

			<!-- 观众列表弹窗 -->
			<Viewer ref="viewer" :show="showViewerList" :viewers="liveViewers" :lookAudsCount="lookAudsCount"
				:loading="viewLoading" :scrollHeight="scrollHeight" @close="closeViewerList" @open="openViewerList"
				@loadMore="handleViewerLoadMore" />

			<!-- 更多弹窗 -->
			<u-popup :show="isMore" @close="closeMore" round="20rpx" bgColor="#f3f5f9" zIndex="10076">
				<view class="more-block">
					<view class="item" @click="navgetTo('/pages_shopping/live/integral'), (isMore = false)">
						<image class="w48 h48" src="/static/images/order.png" />
						<view style="text-align: center">芳华币</view>
					</view>
					<view class="item"
						@click="navgetTo('/pages_shopping/live/storeOrderRefundList?liveId=' + liveId), (isMore = false)">
						<image class="w48 h48" src="/static/images/after_sales.png" />
						<view style="text-align: center">售后订单</view>
					</view>
					<view class="item" @click="goMiniProgram(), (isMore = false)">
						<image class="w48 h48" src="/static/images/points.png" />
						<view style="text-align: center">兑换好礼</view>
					</view>
					<view class="item" @click="getMyLottery(), (isMore = false), (winning = true)">
						<image class="w48 h48" src="/static/images/health_sel.png" />
						<view style="text-align: center">中奖记录</view>
					</view>
				</view>
			</u-popup>

			<!-- 送礼物 -->
			<u-popup :show="isShowGift" @close="closeGift" round="20rpx" bgColor="#242424" zIndex="10076">
				<view class="gift">
					<view class="gift-top">
						<view class="left">
							送花给<text class="ml8 orange">{{ liveItem.liveName }}</text>
						</view>
						<view class="align-center" @click="navgetTo('/pages_shopping/live/integral')">
							<image class="w32 h32" src="/static/images/coin.png" />
							<text class="ml6 mr6 f24">{{ integralNum }}</text>
							<image class="w24 h24" src="/static/images/arrow_white.png" />
						</view>
					</view>
					<view class="gift-block">
						<view :class="['item', { 'active': activeIndex === index }]" @click="activeIndex = index"
							v-for="(item, index) in giftList" :key="index">
							<image class="w104 h104" :src="item.img" />
							<view class="name">{{ item.giftName }}</view>
							<view v-if="activeIndex === index" class="button" @click="sendliveGift(item)">赠送</view>
							<view class="number" v-else>{{ item.price }}芳华币</view>
						</view>
					</view>
				</view>
			</u-popup>

			<!-- 微信昵称授权弹窗 -->
			<u-popup :show="userlogo" mode="bottom" round='12'>
				<view class="userlogo column">
					<view class="bold fs36 mt42">授权你的昵称信息</view>
					<view class=" justify-between align-center  mt42">
						<view class="button-container">
							<input type="nickname" class="hidden-input"
								placeholder-style="color:#ffffff; font-size:32rpx;" @blur="onNickNameInput"
								placeholder="请点击授权微信昵称" @input="onNickNameInput" />
						</view>
					</view>
					<view class="submitname" @click="confimrname">确定</view>
				</view>
			</u-popup>

			<!-- 商品弹窗组件 -->
			<ShopPopup class="shop" :show="shopping" :searchKeyword="inputInfo" :products="products"
				:loading="loadingProducts" :boxHeight="boxHeight" @close="closeShop" @search="handleSearchInput"
				@navigate-to-order="handleNavigateToOrder" @show-more="handleShowMore" @collect="onGoodsCollect"
				@go-shop="handleGoShopFromCart" />

			<!-- 优惠券弹窗 -->
			<view class="coupon-pop" v-if="isShowCoupon">
				<view class="coupon-block">
					<image class="bg" src="/static/images/coupon_bg.png" />
					<image class="nav" src="/static/images/coupon_top.png" />
					<image @click="isShowCoupon = false" class="w40 h40 close" style="z-index: 99"
						src="/static/images/close1.png" />
					<view class="item">
						<view class="title">{{ couponInfo.couponName }}</view>
						<view class="price">
							￥
							<text class="bold">{{ couponInfo.couponPrice }}</text>
						</view>
						<view class="txt">满{{ couponInfo.useMinPrice }}元可用</view>
						<view class="txt" style="margin-top: 26rpx">指定商品可用</view>
						<view class="txt">自领取起{{ couponInfo.couponTime }}天内有效</view>
						<view class="button" @click="onCoupon()">立即领券</view>
					</view>
				</view>
			</view>
			<view class="custom-toast" v-if="showToast">
				<view class="toast-content">
					观看奖励已到账
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ChatInput from '@/pages_course/components/chatInput.vue'
	import Viewer from '@/pages_course/components/viewer.vue'
	import LiveVideo from '@/pages_course/components/liveVideo.vue'
	import ShopPopup from '@/pages_course/components/shopPopup.vue'
	import LotteryPopup from '@/pages_course/components/lotteryPopup.vue'
	import WinningPopup from '@/pages_course/components/winningPopup.vue'
	import LiveGoods from '@/pages_course/components/liveGoods.vue'
	import LikeButton from '@/pages_course/components/like.vue'
	import CryptoJS from 'crypto-js'
	import {
		myLottery,
		coupon,
		liveLottery,
		claim,
		liveRed,
		liveDataLike,
		collectStore,
		collectGoods,
		watchUserList,
		liveMsg,
		liveStore,
		liveOrderUser,
		getLiveInfo,
		getLiveViewData,
		currentActivities,
		getlive,
		subNotifyLive,
		internetTraffic,
		liveInternetTraffic,
		remainingTime,
		updateWatchDuration,
		receivePoints,
		activeList,
		sendliveGift,
		getUserIntegralInfo ,//芳华币
		loginByMp
	} from '@/api/living.js'
	import {
		getUserInfo,
		editUser
	} from '@/api/user'
	import {
		generateRandomString
	} from '@/utils/common.js'
	import dayjs from 'dayjs'
	import {
		nextTick
	} from 'vue'

	var isSocketOpen = false
	var socket = null

	export default {
		components: {
			LikeButton,
			LiveGoods,
			LotteryPopup,
			WinningPopup,
			ShopPopup,
			LiveVideo,
			Viewer,
			ChatInput
		},
		data() {
			return {
				hasSubscribed: false, // 已成功订阅（永久禁用）
				integralNum: null, //礼物芳华币数量
				isPreview: true, //是否预告
				hasReplayGeneration: false, //是否经历回放生成
				diffLiveStartTime: 0, //距离直播开始时间差值
				diffLiveEndTime: 0, //距离直播结束时间差值
				diffReplayGenerationSeconds: 0, //经历回放生成的秒速
				completionTime: 0, //领取积分所需时间
				hasLiveEnd: false, //是否经历过首播结束
				isPageLoadFirst: true, //是否首次加载直播间
				pointsRetryTimer: null, // 积分领取重试定时器
				showToast: false,
				videoDuration: 0, //要看的时长
				pointsRemainingTime: 0,
				hasReceived: false,
				completionRate: 0,

				liveBeginWatchTime: 0,
				showPoints: false,
				pointsRemainingTime: null,
				remainingTime: null,
				// receiveStatus: false,
				watchDuration: null,
				isFullscreen: null,
				notice: [],
				isShowNotice: false,
				showViewerList: false,
				giftList: [{
						img: '/static/images/gift1.png',
						name: '人气票',
						number: 1
					},
					{
						img: '/static/images/gift2.png',
						name: '小心心',
						number: 1
					},
					{
						img: '/static/images/gift3.png',
						name: '棒棒糖',
						number: 9
					},
					{
						img: '/static/images/gift4.png',
						name: '玫瑰',
						number: 50
					},
					{
						img: '/static/images/gift5.png',
						name: '鲜花',
						number: 88
					},
					{
						img: '/static/images/gift6.png',
						name: '水晶球',
						number: 99
					},
					{
						img: '/static/images/gift7.png',
						name: '啤酒',
						number: 128
					},
					{
						img: '/static/images/gift8.png',
						name: '浪漫热气球',
						number: 1000
					}
				],
				activeIndex: -1,
				barrageList: ['支持你!', '谢谢你!', '平台真好!', '666', '欢迎回家!'],
				uuId: '',
				totalTraffic: 0,
				bitrate: 800,
				bitrateLive: 1600,
				trafficTimer: null,
				pingTimeoutTimer: null,
				heartBeatTimer: null,
				liveViewDataTimer: null,
				lookAudsCount: 0, //更多的观众人数
				reconnectTimer: null,
				scrollTimer: null,
				lastScrollTime: 0,
				scrollDebounceDelay: 200,
				searchTimer: null,
				purchasePromptTimer: null,
				welcomeTimer: null,
				redTimer: null,
				liveStartTimer: null,
				lotteryTimer: null,
				memoryMonitorTimer: null,
				networkStatusTimer: null,
				networkRetryTimer: null,
				lastHeartBeatTime: 0,
				connectionStartTime: 0,
				connectionLatency: 0,
				messageCount: 0,
				errorCount: 0,
				lastPerformanceCheck: 0,
				stayTime: 0,
				startTime: 0,
				scrollTop: 0,
				currentScrollTop: 0,
				scrollIntoView: '',
				messageIdCounter: 0,
				scrollPending: false,
				isOnload: false,
				isConnecting: false,
				hasInitialized: false,
				liveViewersData: [],
				liveTopViewersData: [],
				liveUserCalled: false,
				userRandomColors: Object.create(null),
				heartBeatRetryCount: 0,
				maxHeartBeatRetries: 3,
				pingTimeout: 25000,
				shownEntryUsers: new Set(),
				socket: null,
				isSocketOpen: false,
				heartBeatInterval: 15000,
				adaptiveHeartBeatInterval: 15000,
				reconnectCount: 0,
				maxReconnectAttempts: 5,
				isManualClose: false,
				networkType: 'unknown',
				isNetworkAvailable: true,
				templateId: 'bpc9DOFwugg7_cNDN260TRclIgmIjDOuvLxIbM-c0mg',
				isAgreement: false,
				wsNewUrl: 'wss://api.fhhx.runtzh.com/ws/app/webSocket',
				qrFrom: null,
				scene: '',
				liveCountdown: {},
				countdown: {},
				liveViewData: {},
				keyboardHeight: 0,
				videoCurrentTime: 0,
				videoProgressKey: '',
				inAndOut: {},
				winning: false,
				isShowPrize: false,
				isShowCoupon: false,
				isShowGift: false,
				prizeInfo: [],
				havePrize: uni.getStorageSync('havePrize') || false,
				countDownKey: 0,
				lotteryProducts: [],
				lotteryList: [],
				talklist: [],
				isShowLotteryPop: false,
				liveItem: {},
				isSending: false,
				isMore: false,
				value: '',
				placeholderText: '说点什么...',
				prizeAll: [],
				isShowLottery: false,
				isShowRedCard: false,
				redCard: null,
				integral: {},
				lotteryInfo: {},
				goodsCard: {},
				couponInfo: {},
				redInfo: {},
				storeId: null,
				isFocus: false,
				shopping: false,
				systemInfo: null,
				inputInfo: '',
				showWelcomeMessage: false,
				isShowGoods: false,
				isShowRed: false,
				lastClickTime: 0,
				videoRetryCounts: Object.create(null),
				clickDelay: 300,
				liveUserTotal: 0,
				viewPageSize: 10,
				viewPageNum: 1,
				viewLoading: false,
				scrollHeight: 0,
				showPurchasePrompt: false,
				prevOrderCount: 0,
				videoUrl: null,
				boxHeight: 300,
				liveViewers: [],
				products: [],
				loadingProducts: false,
				orderUser: {},
				userType: 0,
				timestamp: '',
				liveId: null,
				userinfo: '',
				userData: {},
				diffTotalTime: '',
				virtualTotal: 0,
				userlogo: false,
				user: {},
				userInfo: '',
				urlOption: {},
			}
		},
		async onLoad(options) {
			if (options.liveId) {
				this.liveId = options.liveId
			}
			if (options.scene) {
				this.scene = options.scene
				const decodedScene = decodeURIComponent(this.scene)
				const params = {}
				decodedScene.split('&').forEach((item) => {
					const [key, value] = item.split('=')
					params[key] = value
					this.liveId = params.a
				})
				if (params.b && params.c) {
					this.qrFrom = `&companyId=${params.b}&companyUserId=${params.c}`
				}
			}

			if (options.companyId && options.companyUserId) {
				this.qrFrom = `&companyId=${options.companyId}&companyUserId=${options.companyUserId}`
			}

			// 保存url参数
			this.urlOption = options;

			this.userinfo = uni.getStorageSync('userInfo')
			this.userData = uni.getStorageSync('userData')
			this.hasSubscribed = uni.getStorageSync('subscribe_status_' + this.liveId) || false;
			try {
				const isLogin = await this.utils.checkLiveToken();
				this.hasCheckedLogin = true;
				if (isLogin) {
					// 登录后：优先加载直播间信息，然后加载视频资源
					await this.haveLogin();
				} else {
					// 未登录：先登录，登录成功后再加载数据
					this.goLogin();
				}
			} catch (error) {
				console.error('初始化失败:', error);
				this.hasCheckedLogin = true;
			}

			this.startMemoryMonitor();

			//获取礼物列表
			this.getActiveList();

			uni.onKeyboardHeightChange((res) => {
				console.log('键盘高度变化:', res.height, '平台:', this.systemInfo.platform)
				if (this.systemInfo.platform === 'ios') {
					if (res.height > 0) {
						this.isKeyboardShow = true
						let calculatedHeight = res.height * 2
						if (this.systemInfo.model) {
							if (this.systemInfo.model.includes('iPhone X') ||
								this.systemInfo.model.includes('iPhone 11') ||
								this.systemInfo.model.includes('iPhone 12') ||
								this.systemInfo.model.includes('iPhone 13') ||
								this.systemInfo.model.includes('iPhone 14') ||
								this.systemInfo.model.includes('iPhone 15') ||
								this.systemInfo.model.includes('iPhone 16') ||
								this.systemInfo.model.includes('iPhone 17')) {
								calculatedHeight = calculatedHeight + 20
							}
						}

						const safeAreaBottom = this.systemInfo.safeAreaInsets ? this.systemInfo.safeAreaInsets
							.bottom : 0
						if (safeAreaBottom > 0) {
							calculatedHeight = calculatedHeight - (safeAreaBottom * 3.0)
						}
						this.keyboardHeight = Math.max(400, calculatedHeight)
					} else {
						this.isKeyboardShow = false
						this.keyboardHeight = 0
					}
				} else {
					console.log('手机型号是>>>>', this.systemInfo.model)
					if (res.height > 0) {
						this.isKeyboardShow = true
						const safeAreaBottom = this.systemInfo.safeAreaInsets ? this.systemInfo.safeAreaInsets
							.bottom : 0
						if (this.systemInfo.brand == 'vivo') {
							this.keyboardHeight = res.height * 2
						} else {
							this.keyboardHeight = (res.height * 1.78) + 20
						}
						console.log('高度是', this.keyboardHeight)
					} else {
						this.isKeyboardShow = false
						this.keyboardHeight = 0
					}
				}
			})

			this.initNetworkStatusListener();
			this.getUserIntegralInfo();
		},
		onPullDownRefresh() {
			this.getLiveMsg(this.liveItem);
			this.getliveUserInit();
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		async onShow() {
			try {
				const isLogin = await this.utils.checkLiveToken()
				if (isLogin) {
					await this.haveLogin();
				} else {
					this.goLogin();

				}
			} catch (error) {
				console.error('初始化失败:', error)
			}
			if (this.liveId) {
				await this.getLiveMsg(this.liveItem)
			}
			if (!this.liveViewData) {
				this.getliveViewData()
			}
			this.uuId = generateRandomString(16)
			const isLiveLogin = uni.getStorageSync('isLiveLogin')
			this.share = uni.getStorageSync('share')
			this.scene = uni.getStorageSync('scene')

			if (this.share && this.share.length > 0) {
				this.liveId = this.share.liveId
				this.qrFrom = `&companyId=${this.share.companyId}&companyUserId=${this.share.companyUserId}`
				uni.removeStorageSync('share')
			}

			if (this.scene) {
				const decodedScene = decodeURIComponent(this.scene)
				const params = {}
				decodedScene.split('&').forEach((item) => {
					const [key, value] = item.split('=')
					params[key] = value
					this.liveId = params.a
				})
				if (params.b && params.c) {
					this.qrFrom = `&companyId=${params.b}&companyUserId=${params.c}`
				}
				uni.removeStorageSync('scene')
			}

			if (isLiveLogin) {
				if (this.liveId) {
					await this.getliving(this.liveId)
					this.getCurrentActivities()
					this.getliveOrder()
					this.initSocket()
				}
				this.hasInitialized = true
				uni.removeStorageSync('isLiveLogin')
			}

			await this.resumePageActivity()
			this.userinfo = uni.getStorageSync('userInfo')
			this.isAgreement = uni.getStorageSync('isAgreement')

			this.$nextTick(() => {
				if (this.$refs.liveVideo && this.$refs.liveVideo.setVideoProgress) {
					this.$refs.liveVideo.setVideoProgress()
				}
			});
			if (this.lookTimer) {
				clearInterval(this.lookTimer)
				this.lookTimer = null
				this.stayTime = 0
				this.startTime = 0
			}


			if (this.trafficTimer) {
				clearInterval(this.trafficTimer)
				this.trafficTimer = null
				this.startTime = 0
				this.totalTraffic = 0
			}

			if (this.$refs.liveVideo && this.$refs.liveVideo.startTimer) {
				this.$refs.liveVideo.startTimer()
			}

			this.$nextTick(() => {
				if (!this.userData.unionId) {
					uni.navigateTo({
						url: '/pages/auth/login'
					})
				}
			})
			if (this.liveItem.completionPointsEnabled) {
				setTimeout(() => {
					this.startCountdown();
				}, 500);
			}
		},
		onShareAppMessage() {
			return {
				title: '邀请你来观看直播：' + this.liveItem.liveName,
				path: '/pages_course/living?companyId=-2&companyUserId=' + this.userData.userId + '&liveId=' + this.liveId,
				imageUrl: '/static/images/logo.png',
				success(res) {
					console.log('分享成功', res)
				},
				fail(err) {
					console.error('分享失败', err)
				}
			}
		},
		onShareTimeline() {
			return {
				title: '邀请你来观看直播：' + this.liveItem.liveName,
				query: 'companyId=-2&companyUserId=' + this.userData.userId + '&liveId=' + this.liveId
			}
		},
		computed: {
			appid() {
				return this.$store.state.appid
			},
			shouldShowIntegralPopup() {
				//只有当 showPoints 为 true 且 receiveList 有数据时才显示
				return this.showPoints;
			},
			countdownPercentage() {
				return this.getCountdownPercentage()
			},
			formattedCountdown() {
				return this.formatCountdown(this.pointsRemainingTime)
			},
			formattedWatchCount() {
				return this.formatNumber(this.liveUserTotal || 0)
			},
			formattedLikeCount() {
				return this.formatNumber(this.liveViewData.like || 0)
			},
			filteredViewers() {
				const safeLiveViewers = Array.isArray(this.liveTopViewersData) ? this.liveTopViewersData : []
				return safeLiveViewers.slice(0, 3)
			},
			isCurrentUserWon() {
				if (!Array.isArray(this.prizeInfo) || !this.userData?.userId) {
					return false
				}
				return this.prizeInfo.some((item) => {
					return String(item.userId) === String(this.userData.userId)
				})
			},
			getCurrentUserPrizeProductId() {
				if (!Array.isArray(this.prizeInfo) || !this.userData?.userId) {
					return null
				}
				const userPrize = this.prizeInfo.find(item => {
					return String(item.userId) == String(this.userData.userId)
				})
				return userPrize ? userPrize.productId : null
			},
			getCurrentUserPrizeRecordId() {
				if (!Array.isArray(this.prizeInfo) || !this.userData?.userId) {
					return null
				}
				const userPrize = this.prizeInfo.find(item => {
					return String(item.userId) == String(this.userData.userId)
				})
				return userPrize ? userPrize.recordId : null
			}
		},
		onHide() {
			if (this.talklist && this.talklist.length > 20) {
				this.talklist = this.talklist.slice(-20)
			}
			// 保存观看时长
			this.updateWatchDuration();
			this.stopCountdown();
		},
		onUnload() {
			if (this.$refs.liveVideo && this.$refs.liveVideo.saveVideoProgress) {
				this.$refs.liveVideo.saveVideoProgress()
			}
			if (this.liveItem) {
				if (this.$refs.liveVideo && this.$refs.liveVideo.pauseVideo) {
					this.$refs.liveVideo.pauseVideo()
				}
				if (this.liveItem.timeTimer) {
					clearInterval(this.liveItem.timeTimer)
					this.liveItem.timeTimer = null
				}
			}
			// 更新后端观看时长
			this.updateWatchDuration();
			this.stopCountdown();
			this.closeWebSocket(true);
			this.clearAllTimersEnhanced();
			const videoId = `myVideo_${this.liveId}`
			const videoContext = uni.createVideoContext(videoId, this)
			if (videoContext) {
				videoContext.pause();
			}
			try {
				uni.offNetworkStatusChange();
			} catch (err) {
				console.warn('移除网络状态监听失败:', err)
			}
			this.clearBigData();
			this.resetAllStates();
		},
		mounted() {
			this.systemInfo = uni.getSystemInfoSync()
			console.log('系统信息:', this.systemInfo.platform, this.systemInfo.model)
			this.getCurrentActivities()
			this.getliveOrder()
		},
		watch: {
			'orderUser.count': {
				handler(newVal, oldVal) {
					if (newVal !== this.prevOrderCount) {
						this.prevOrderCount = newVal
						this.showPurchaseMessage()
					}
				},
				immediate: true
			}
		},
		methods: { // 芳华币
			// 微信昵称授权相关方法
			shouquan() {
				if (this.user.nickname == '') {
					uni.showToast({
						icon: 'none',
						title: "请先授权微信昵称",
					});
				}
			},
			confimrname() {
				if (this.user.nickname == '') {
					uni.showToast({
						icon: 'none',
						title: "请授权微信昵称",
					});
					return
				}
				this.editUser();
				uni.setStorageSync('userInfo', this.userInfo);

				if (this.user.nickname) {
					this.userlogo = false;
				}
			},
			onNickNameInput(e) {
				this.user.nickname = e.detail.value;
			},
			editUser() {
				this.user.nickName = this.user.nickname;
				editUser(this.user).then(
					res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'success',
								title: "修改成功",
							});
							this.getUserInfo()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			// 静默登录
			goLogin(data) {
				let provider = 'weixin'
				uni.login({
					provider: provider,
					success: async loginRes => {
						uni.getUserInfo({
							provider: provider,
							success: (infoRes) => {
								uni.showToast({
									title: '登录中...',
									icon: 'loading'
								});
								loginByMp({
									code: loginRes.code,
									encryptedData: infoRes.encryptedData,
									iv: infoRes.iv,
									appId: this.appid
								}).then(res => {
									uni.hideLoading();
									if (res.code == 200) {
										uni.setStorageSync('AppToken', res
											.token);
										uni.setStorageSync('userInfo', JSON
											.stringify(res
												.user));
										this.userInfo = uni.getStorageSync(
											'userInfo');
										// uni.setStorageSync('auto_userInfo', JSON.stringify(res.user));
										// this.user = res.user
										this.$store.commit('setCoureLogin', 1);
										this.isLogin = true
										this.haveLogin()
										this.userlogo = true
										// console.log("TOKEN_KEYAuto",TOKEN_KEYAuto)
										if (this.urlOption.qwUserId) {
											this.getIsAddKf() //this.getIsAddKf()
										}
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none'
										});
									}
								}).catch(err => {
									uni.hideLoading();
									uni.showToast({
										icon: 'none',
										title: "登录失败,请重新登录",
									});
								});
							}
						});
					}
				})
			},
			async haveLogin() {
				// 防止重复执行
				if (this.isOnload) {
					return;
				}
				this.userInfo = uni.getStorageSync('userInfo');
				if (this.userInfo) {
					await this.getUserInfo();
				}
				if (this.liveId) {
					// 优先加载直播间信息（包含视频资源URL）
					this.isOnload = true;
					await this.getliving(this.liveId);
					Promise.all([
						this.getLiveMsg(this.liveItem),
						this.getliveViewData()
					]).catch(err => {
						console.error('加载数据失败:', err);
					});
					// 其他非关键数据异步加载
					this.getCurrentActivities();
					this.getliveOrder();
					this.initSocket();
				}
			},
			getUserIntegralInfo() {
				getUserIntegralInfo().then(res => {
					if (res.code == 200) {
						this.integralNum = res.data.integral
					}
				}).catch(error => {
					console.error("获取芳华币数据失败:", error);

				});
			},
			//礼物列表
			getActiveList() {
				activeList().then((res) => {
					if (res.code == 200) {
						this.giftList = res.data
						console.log('正常状态的礼物列表', res.data)
					}
				}).catch((error) => {})
			},
			// 送礼物
			sendliveGift(item) {
				if (!this.liveId) return
				const data = {
					liveId: this.liveId,
					giftId: item.giftId,
					// giftId: this.giftId,
					// cn: this.cn
					cn: 1
				}
				sendliveGift(data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})

						console.log('用户送礼物', res)
						this.getUserIntegralInfo();

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch((error) => {})
			},
			// 查询当前用户当前直播间领取积分的剩余时长
			getRemainingTime() {
				if (!this.liveId) return
				const data = {
					liveId: this.liveId
				}
				remainingTime(data).then((res) => {
					if (res.code == 200) {
						this.hasReceived = res.data.hasReceived
						this.videoDuration = res.data.videoDuration
						this.watchDuration = res.data.watchDuration
						this.remainingTime = res.data.remainingTime
						this.completionRate = res.data.completionRate
						console.log('查询当前用户当前直播间领取积分的剩余时长', res)
					}
				}).catch((error) => {})
			},
			// 查询用户积分领取记录
			// completionRecords() {
			// 	if (!this.liveId) return
			// 	const data = {
			// 		liveId: this.liveId
			// 	}
			// 	completionRecords(data).then((res) => {
			// 		if (res.code == 200) {
			// 			const targetData = res.data.find(item => item.liveId == this.liveId)
			// 			if (targetData) {
			// 				const receiveStatus = targetData.receiveStatus
			// 				this.receiveStatus = receiveStatus
			// 			} else {
			// 				console.log('未找到liveId为', this.liveId, '的数据')
			// 				this.receiveStatus = false
			// 			}
			// 			console.log('查询用户积分领取记录', res)
			// 		}
			// 	}).catch((error) => {})
			// },
			// 更新用户的看课时长
			updateWatchDuration() {
				if (!this.liveId) return;
				if (this.isPreview) return;
				//const watchDuration = Math.floor((Date.now() - this.liveBeginWatchTime) / 1000)
				const watchDuration = this.totalWatchTime - this.watchDuration;
				updateWatchDuration(this.liveId, watchDuration).then((res) => {
					if (res.code == 200) {
						console.log("更新用户的看课时长", res);
						this.receivePoints();
					}
				}).catch((error) => {

				});
			},
			// 用户领取看课积分 (传入直播间id)
			receivePoints(retryCount = 0) {
				if (!this.liveId) return;
				// const data = {
				// 	liveId: this.liveId
				// }
				receivePoints(this.liveId).then((res) => {
					if (res.code == 200) {
						console.log("用户领取看课积分", res);
						//清除重试定时器
						if (this.pointsRetryTimer) {
							clearTimeout(this.pointsRetryTimer);
							this.pointsRetryTimer = null;
						}
					}
				}).catch((error) => {
					console.log("用户领取积分失败error", error);
					// 增加重试机制：最多重试3次
					if (retryCount < 3) {
						const delay = (retryCount + 1) * 2000; // 递增延迟: 2s, 4s, 6s
						console.log(`领取积分失败，${delay}ms后进行第${retryCount + 1}次重试`);
						if (this.pointsRetryTimer) {
							clearTimeout(this.pointsRetryTimer);
						}
						this.pointsRetryTimer = setTimeout(() => {
							this.receivePoints(retryCount + 1);
						}, delay);
					}
				});
			},
			// 开始观看时长统计
			// startWatchDurationTracking() {
			// 	if (this.watchStartTime > 0) {
			// 		console.log('观看时长统计已启动，跳过')
			// 		return
			// 	}
			// 	this.watchStartTime = Date.now()
			// 	this.isPageVisible = true
			// 	console.log('开始观看时长统计', new Date(this.watchStartTime).toLocaleString())
			// 	this.initPageVisibilityListener()
			// },
			// getCurrentWatchDuration() {
			// 	if (this.watchStartTime === 0) {
			// 		return this.accumulatedWatchDuration
			// 	}
			// 	if (this.isPageVisible) {
			// 		const currentDuration = Math.floor((Date.now() - this.watchStartTime) / 1000)
			// 		return this.accumulatedWatchDuration + currentDuration
			// 	}
			// 	return this.accumulatedWatchDuration
			// },
			// pauseWatchDurationTracking() {
			// 	if (!this.isPageVisible || this.watchStartTime === 0) {
			// 		return
			// 	}
			// 	const currentSessionDuration = Math.floor((Date.now() - this.watchStartTime) / 1000)
			// 	this.accumulatedWatchDuration += currentSessionDuration
			// 	this.lastPauseTime = Date.now()
			// 	this.isPageVisible = false
			// 	console.log(`暂停观看统计: 本次=${currentSessionDuration}秒, 累计=${this.accumulatedWatchDuration}秒`)
			// },
			// resumeWatchDurationTracking() {
			// 	if (this.isPageVisible) {
			// 		return
			// 	}
			// 	this.watchStartTime = Date.now()
			// 	this.isPageVisible = true
			// 	const pauseDuration = this.lastPauseTime > 0 ? Math.floor((Date.now() - this.lastPauseTime) / 1000) : 0
			// 	console.log(`恢复观看统计: 暂停了${pauseDuration}秒, 当前累计=${this.accumulatedWatchDuration}秒`)
			// },
			// stopWatchDurationTracking() {
			// 	if (this.isPageVisible && this.watchStartTime > 0) {
			// 		const currentSessionDuration = Math.floor((Date.now() - this.watchStartTime) / 1000)
			// 		this.accumulatedWatchDuration += currentSessionDuration
			// 	}
			// 	console.log(`停止观看统计: 总时长=${this.accumulatedWatchDuration}秒`)
			// 	this.watchStartTime = 0
			// 	this.isPageVisible = true
			// 	this.lastPauseTime = 0
			// 	this.removePageVisibilityListener()
			// },
			// initPageVisibilityListener() {
			// 	uni.onAppShow(() => {
			// 		console.log('小程序回到前台')
			// 		this.resumeWatchDurationTracking()
			// 	})
			// 	uni.onAppHide(() => {
			// 		console.log('小程序切换到后台')
			// 		this.pauseWatchDurationTracking()
			// 	})
			// },
			removePageVisibilityListener() {},
			calculateLiveTimeDiff(timeStr) {
				if (!timeStr) {
					return 0
				}
				const now = Date.now()
				const safeTimeStr = String(timeStr).replace(/-/g, '/')
				const liveStartTime = Date.parse(safeTimeStr)
				const diffInSeconds = Math.floor((now - liveStartTime) / 1000)
				return diffInSeconds
			},
			calculateLiveEndTime(startTime, duration) {
				if (!startTime) return ''
				const safeStartTime = String(startTime).replace(/-/g, '/')
				const startDate = new Date(safeStartTime)
				if (isNaN(startDate.getTime())) return ''
				const endTimeMs = startDate.getTime() + (Number(duration) * 1000)
				const endDate = new Date(endTimeMs)
				const year = endDate.getFullYear()
				const month = this.padZero(endDate.getMonth() + 1)
				const day = this.padZero(endDate.getDate())
				const hours = this.padZero(endDate.getHours())
				const minutes = this.padZero(endDate.getMinutes())
				const seconds = this.padZero(endDate.getSeconds())
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
			},
			startCountdown() {
				this.isCountdownActive = true
				this.countdownTimer = setInterval(() => {
					this.updateCountdown()
				}, 1000)
			},
			updateCountdown() {
				if (!this.liveItem) {
					return;
				}
				// console.log("开始倒计时", this.liveItem.duration, this.completionRate,this.watchDuration)
				this.completionTime = this.liveItem.duration * this.completionRate * 0.01;
				// 已达成观看时间
				if (this.watchDuration > this.completionTime) {
					if (this.countdownTimer) {
						clearInterval(this.countdownTimer);
						this.countdownTimer = null;
						this.isPreview = true;
						return;
					}
				}
				// 倒计时已结束
				if (this.pointsRemainingTime < 0) {
					this.stopCountdown();
					return;
				}
				this.showPoints = false;
				this.diffLiveStartTime = this.calculateLiveTimeDiff(this.liveItem.startTime);
				this.diffLiveEndTime = this.calculateLiveTimeDiff(this.liveItem.startTime) - this.liveItem.duration;
				if (!this.liveItem.finishTime) {
					this.liveItem.finishTime = this.calculateLiveEndTime(this.liveItem.startTime, this.liveItem.duration);
				}
				// 预告状态
				if (this.diffLiveStartTime < 0) {
					this.isPreview = true;
					return;
				}
				// 直播已开始
				if (this.diffLiveStartTime >= 0) {
					// 计算总观看时长
					this.totalWatchTime = this.watchDuration + Math.floor((Date.now() - this.liveBeginWatchTime) / 1000);
					// 积分领取满足条件
					if (this.totalWatchTime >= this.completionTime) {
						if (this.countdownTimer) {
							clearInterval(this.countdownTimer);
							this.countdownTimer = null;
							this.onCountdownComplete();
							return;
						}
					}
					this.isPreview = false;
					// 直播中或回放状态都计算剩余时间
					console.log("这个时间怎么这么多", this.completionTime, this.totalWatchTime)
					this.pointsRemainingTime = Math.max(0, this.completionTime - this.totalWatchTime);
				}
				// 更新显示
				this.updateCountdownDisplay();
			},
			stopCountdown() {
				if (this.countdownTimer) {
					clearInterval(this.countdownTimer)
					this.countdownTimer = null
				}
				this.isCountdownActive = false
				this.updateWatchDuration()
			},
			onCountdownComplete() {
				console.log('倒计时完成!')
				this.stopCountdown()
				this.pointsRemainingTime = -1
				this.triggerWatchComplete()
				setTimeout(() => {
					this.showToast = true
					setTimeout(() => {
						this.showToast = false
					}, 5000)
				}, 1000)
			},
			async triggerWatchComplete() {
				if (!this.userInfo?.userId || !this.liveId) return
				try {
					console.log('用户已完成观看')
					uni.removeStorageSync(this.watchProgressKey)
				} catch (error) {
					console.error('触发观看完成事件失败:', error)
				}
			},
			padZero(num) {
				return num < 10 ? `0${num}` : num.toString()
			},
			formatCountdown(seconds) {
				const totalSeconds = Math.max(0, Math.floor(Number(seconds) || 0))
				const hours = Math.floor(totalSeconds / 3600)
				const remainingAfterHours = totalSeconds % 3600
				const minutes = Math.floor(remainingAfterHours / 60)
				const secs = remainingAfterHours % 60
				return {
					hours: this.padZero(hours),
					minutes: this.padZero(minutes),
					seconds: this.padZero(secs),
					total: totalSeconds
				}
			},
			getCountdownPercentage() {
				if (!this.getRemainingTime) {
					console.log('进度条计算：liveItem.duration无效', this.liveItem?.duration)
					return 0
				}
				if (this.hasReachedTarget || this.pointsRemainingTime <= 0) {
					return 100
				}
				const watchedTime = this.videoDuration - this.pointsRemainingTime
				if (watchedTime <= 0) {
					return 0
				}
				const percentage = (watchedTime / this.videoDuration) * 100
				return Math.min(100, Math.max(0, percentage))
			},
			updateCountdownDisplay() {
				this.$forceUpdate()
			},
			initWatchTime() {
				const userId = this.userInfo?.userId || 'anonymous'
				this.watchTimeStorageKey = `watchTime_${userId}_${this.liveId}`
				try {
					const storedTime = uni.getStorageSync(this.watchTimeStorageKey)
					this.totalWatchTime = storedTime ? parseInt(storedTime) : 0
					console.log(`加载累计观看时间: ${this.totalWatchTime}秒`)
				} catch (error) {
					console.error('加载观看时间失败:', error)
					this.totalWatchTime = 0
				}
			},
			saveWatchTime() {
				if (!this.watchTimeStorageKey) return
				try {
					uni.setStorageSync(this.watchTimeStorageKey, this.totalWatchTime)
					console.log(`保存观看时间: ${this.totalWatchTime}秒`)
				} catch (error) {
					console.error('保存观看时间失败:', error)
				}
			},
			formatWatchTime(seconds) {
				const hours = Math.floor(seconds / 3600)
				const minutes = Math.floor((seconds % 3600) / 60)
				const secs = seconds % 60
				return {
					hours: this.padZero(hours),
					minutes: this.padZero(minutes),
					seconds: this.padZero(secs),
					total: seconds
				}
			},
			handleFullscreenChange(isFullscreen) {
				console.log('收到子组件全屏状态:', isFullscreen)
				this.isFullscreen = isFullscreen

				if (isFullscreen) {
					this.shopping = false
					this.isShowGift = false
					this.isMore = false
					this.showViewerList = false
					this.isShowLotteryPop = false
					this.winning = false
					this.isFocus = false
				}

				this.$nextTick(() => {
					this.$forceUpdate()
				})
			},
			onInputFocus(value) {
				this.isFocus = true
				console.log('输入框聚焦:', value)
			},
			onInputBlur(value) {
				this.isFocus = false
				console.log('输入框失焦:', value)
			},
			onSendMessage(message) {
				console.log('发送消息:', message)
				this.sendMsg()
			},
			onInputChange(value) {
				this.value = value
			},
			handleLiveStart() {
				console.log('直播开始')
				this.getliving(this.liveId)
			},
			handleSearchInput(keyword) {
				this.inputInfo = keyword
				clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.queryCollect()
				}, 500)
			},
			handleVideoError(error) {
				console.error('视频播放错误:', error)
			},
			handleLiveStateChange(state) {
				console.log('直播状态变化:', state)
			},
			handleNavigateToOrder() {
				this.navgetTo('/pages_shopping/live/order')
			},
			handleShowMore() {
				this.isMore = true
				this.shopping = false
			},
			handleFillAddress(data) {
				const {
					productId,
					recordId,
					liveId
				} = data
				this.winning = false
				this.navgetTo(
					`/pages_shopping/live/confirmCreateOrder?type=win&productId=${productId}&liveId=${liveId}&recordId=${recordId}`
				)
			},
			handleLotteryClose() {
				this.isShowLotteryPop = false
			},
			handleLotteryClaim() {
				this.onClaim()
			},
			handleGoShop(goodsData) {
				this.goShop(goodsData.productId, goodsData.goodsId)
			},
			handleCloseGoods() {
				this.isShowGoods = false
			},
			formatNumber(num) {
				if (typeof num !== 'number') {
					num = Number(num) || 0
				}
				if (num < 10000) {
					return num.toString()
				}
				const wan = num / 10000
				if (wan < 10) {
					const rounded = Math.round(wan * 100) / 100
					return rounded.toFixed(2).replace(/\.?0+$/, '') + 'w'
				} else if (wan < 10000) {
					const rounded = Math.round(wan * 10) / 10
					return rounded.toFixed(1).replace(/\.0$/, '') + 'w'
				} else {
					const yi = wan / 10000
					const rounded = Math.round(yi * 100) / 100
					return rounded.toFixed(2).replace(/\.?0+$/, '') + '亿'
				}
			},
			resetAllStates() {
				this.liveUserCalled = false
				this.talklist = []
				this.liveViewersData = []
				this.liveViewers = []
				this.products = []
				this.liveItem = []
				this.isSocketOpen = false
				this.isConnecting = false
				this.isManualClose = true
				this.reconnectCount = 0
				this.heartBeatRetryCount = 0
				this.lastHeartBeatTime = 0
				this.adaptiveHeartBeatInterval = this.heartBeatInterval
				this.isNetworkAvailable = true
				this.networkType = 'unknown'
				this.connectionStartTime = 0
				this.connectionLatency = 0
				this.messageCount = 0
				this.errorCount = 0
				this.lastPerformanceCheck = 0
			},
			getWebSocketPerformanceStats() {
				const now = Date.now()
				const uptime = this.connectionStartTime > 0 ? now - this.connectionStartTime : 0
				return {
					connectionLatency: this.connectionLatency,
					uptime: uptime,
					messageCount: this.messageCount,
					errorCount: this.errorCount,
					errorRate: this.messageCount > 0 ? (this.errorCount / this.messageCount * 100).toFixed(2) : 0,
					messagesPerSecond: uptime > 0 ? (this.messageCount / (uptime / 1000)).toFixed(2) : 0,
					networkType: this.networkType,
					isConnected: this.isSocketAvailable(),
					reconnectCount: this.reconnectCount
				}
			},
			performanceCheck() {
				const now = Date.now()
				if (now - this.lastPerformanceCheck > 300000) {
					const stats = this.getWebSocketPerformanceStats()
					console.log('WebSocket性能统计:', stats)
					this.lastPerformanceCheck = now

					if (stats.errorRate > 10) {
						console.warn(`WebSocket错误率过高: ${stats.errorRate}%`)
					}

					if (stats.connectionLatency > 5000) {
						console.warn(`WebSocket连接延迟过高: ${stats.connectionLatency}ms`)
					}
				}
			},
			startVideoCacheCleanup() {
				if (this.videoCleanupTimer) {
					clearInterval(this.videoCleanupTimer)
				}

				this.videoCleanupTimer = setInterval(() => {
					this.cleanupVideoCache()
				}, 30000)
			},
			cleanupVideoCache() {
				if (!this.liveItem || !this.liveId) return

				if (this.liveItem.liveType === 2 && this.liveItem.videoUrl) {
					this.reloadVideoPlayer()
				}
			},
			reloadVideoPlayer() {
				const videoId = `myVideo_${this.liveId}`
				const videoContext = uni.createVideoContext(videoId, this)

				if (videoContext) {
					const currentTime = this.videoCurrentTime
					videoContext.pause()
					setTimeout(() => {
						this.$set(this.liveItem, 'videoUrl', this.liveItem.videoUrl + '&t=' + Date.now())
						setTimeout(() => {
							if (videoContext.seek) {
								videoContext.seek(currentTime)
							}
							videoContext.play()
						}, 500)
					}, 100)
				}
			},
			startMemoryMonitoring() {
				if (this.memoryMonitorTimer) {
					clearInterval(this.memoryMonitorTimer)
				}
				this.memoryMonitorTimer = setInterval(() => {
					this.checkMemoryUsage()
				}, 15000)
			},
			checkMemoryUsage() {
				try {
					const timerCount = this.getActiveTimerCount()
					if (timerCount > 10) {
						console.warn(`检测到过多定时器: ${timerCount}个，可能存在内存泄漏`)
						this.cleanupUnusedTimers()
					}

					if (this.messageQueue && this.messageQueue.length > 100) {
						console.warn(`消息队列过长: ${this.messageQueue.length}条，清理旧消息`)
						this.messageQueue = this.messageQueue.slice(-50)
					}

					if (this.userRandomColors && Object.keys(this.userRandomColors).length > 500) {
						console.warn('用户颜色缓存过大，清理部分缓存')
						const keys = Object.keys(this.userRandomColors)
						const keysToRemove = keys.slice(0, keys.length - 200)
						keysToRemove.forEach(key => delete this.userRandomColors[key])
					}

					if (Date.now() - this.lastPerformanceCheck > 60000) {
						this.triggerGarbageCollection()
						this.lastPerformanceCheck = Date.now()
					}
				} catch (error) {
					console.error('内存检查失败:', error)
				}
			},
			forceMemoryCleanup() {
				console.log('执行强制内存清理')
				this.cleanupVideoPlayer()
				this.clearBigData()
				this.triggerGarbageCollection()
			},
			cleanupVideoPlayer() {
				const videoId = `myVideo_${this.liveId}`
				const videoContext = uni.createVideoContext(videoId, this)

				if (videoContext) {
					videoContext.stop()
					setTimeout(() => {
						this.$set(this.liveItem, 'videoUrl', '')
						setTimeout(() => {
							this.$set(this.liveItem, 'videoUrl', this.getFreshVideoUrl())
							if (this.$refs.liveVideo && this.$refs.liveVideo.playVideo) {
								this.$refs.liveVideo.playVideo()
							}
						}, 500)
					}, 100)
				}
			},
			getFreshVideoUrl() {
				if (!this.liveItem.originalVideoUrl) {
					this.liveItem.originalVideoUrl = this.liveItem.videoUrl
				}

				const separator = this.liveItem.originalVideoUrl.includes('?') ? '&' : '?'
				return this.liveItem.originalVideoUrl + separator + 't=' + Date.now()
			},
			clearBigData() {
				if (this.talklist.length > 50) {
					this.talklist = this.talklist.slice(-50)
				}
				if (this.liveViewersData.length > 100) {
					this.liveViewersData = this.liveViewersData.slice(-100)
				}
				if (this.liveViewers.length > 100) {
					this.liveViewers = this.liveViewers.slice(-100)
				}
				if (this.products.length > 50) {
					this.products = this.products.slice(0, 50)
				}
				if (typeof gc === 'function') {
					gc()
				}
			},
			triggerGarbageCollection() {
				if (wx && wx.triggerGC) {
					wx.triggerGC()
				}
			},
			forceScrollToBottom() {
				console.log('执行强制滚动到底部')
				this.scrollTop = 999999

				this.$nextTick(() => {
					if (this.talklist && this.talklist.length > 0) {
						const lastMessage = this.talklist[this.talklist.length - 1]
						const targetId = `list_${lastMessage.uniqueId || (this.talklist.length - 1)}`
						console.log(
							`尝试滚动到元素: ${targetId}, 当前消息数量: ${this.talklist.length}, 最后消息ID: ${lastMessage.uniqueId}`
						)
						this.scrollIntoView = targetId

						setTimeout(() => {
							this.scrollIntoView = ''
						}, 200)
					}
					setTimeout(() => {
						this.scrollTop = 999999
						console.log('延迟设置scrollTop为999999')
					}, 100)

					setTimeout(() => {
						this.nativeScrollToBottom()
					}, 300)
				})
			},
			simpleScrollToBottom() {
				const now = Date.now()

				if (now - this.lastScrollTime < this.scrollDebounceDelay) {
					console.log('滚动防抖：忽略频繁调用')
					return
				}

				this.lastScrollTime = now
				console.log('执行可靠滚动到底部')

				if (this.scrollTimer) {
					clearTimeout(this.scrollTimer)
					this.scrollTimer = null
				}

				this.scrollTop = 999999999
				console.log('方案1: 设置scrollTop为999999999')

				if (this.talklist.length > 0) {
					const lastMessage = this.talklist[this.talklist.length - 1]
					if (lastMessage && lastMessage.uniqueId) {
						this.scrollIntoView = `msg-${lastMessage.uniqueId}`
						console.log(`方案2: 设置scrollIntoView为msg-${lastMessage.uniqueId}`)
					}
				}

				this.scrollTimer = setTimeout(() => {
					this.scrollTop = 999999999
					console.log('方案3: 延迟设置scrollTop为999999999')
					this.scrollTimer = null
				}, 50)
			},
			forceScrollToBottomOnSend() {
				console.log('执行强制滚动到底部（发送消息专用）')

				if (this.scrollTimer) {
					clearTimeout(this.scrollTimer)
					this.scrollTimer = null
				}

				this.lastScrollTime = Date.now()
				this.scrollIntoView = ''

				if (this.talklist.length > 0) {
					const lastMessage = this.talklist[this.talklist.length - 1]
					if (lastMessage && lastMessage.uniqueId) {
						this.scrollIntoView = `list_${lastMessage.uniqueId}`
					}
				}

				const targetScrollTop = Date.now()
				this.scrollTop = targetScrollTop
				this.nativeScrollToBottom()

				this.$nextTick(() => {
					this.scrollIntoView = ''
					this.scrollTop = targetScrollTop + 1
					setTimeout(() => {
						this.nativeScrollToBottom()
					}, 50)
				})

				this.scrollTimer = setTimeout(() => {
					this.checkAndForceScroll(targetScrollTop)
					this.scrollTimer = null
				}, 200)
			},
			checkAndForceScroll(targetScrollTop) {
				if (this.talklist.length > 0) {
					const lastMessage = this.talklist[this.talklist.length - 1]
					if (lastMessage && lastMessage.uniqueId) {
						this.scrollIntoView = `list_${lastMessage.uniqueId}`
					}
				}
				this.scrollTop = Date.now() + Math.random() * 1000
				this.nativeScrollToBottom()

				setTimeout(() => {
					this.nativeScrollToBottom()
				}, 100)
			},
			nativeScrollToBottom() {
				try {
					const query = uni.createSelectorQuery().in(this)
					query.select('#msgScroll').node((res) => {
						if (res && res.node) {
							console.log('找到msgScroll节点，执行原生滚动')
							const scrollHeight = res.node.scrollHeight
							res.node.scrollTop = scrollHeight

							setTimeout(() => {
								res.node.scrollTop = scrollHeight + 100
							}, 50)
						}
					}).exec()
				} catch (error) {
					console.error('原生滚动失败:', error)
				}
			},
			onScroll(e) {
				this.currentScrollTop = e.detail.scrollTop
			},
			stopMemoryMonitor() {
				if (this.memoryMonitorTimer) {
					clearInterval(this.memoryMonitorTimer)
					this.memoryMonitorTimer = null
				}
			},
			getActiveTimerCount() {
				const timers = [
					'trafficTimer', 'pingTimeoutTimer', 'heartBeatTimer', 'liveViewDataTimer',
					'reconnectTimer', 'scrollTimer', 'searchTimer', 'purchasePromptTimer',
					'welcomeTimer', 'redTimer', 'liveStartTimer', 'lotteryTimer', 'noticeTimer',
					'memoryMonitorTimer', 'networkStatusTimer', 'networkRetryTimer'
				];
				return timers.filter(timer => this[timer] !== null).length
			},
			cleanupUnusedTimers() {
				const timers = [
					'trafficTimer', 'pingTimeoutTimer', 'heartBeatTimer', 'liveViewDataTimer',
					'reconnectTimer', 'scrollTimer', 'searchTimer', 'purchasePromptTimer',
					'welcomeTimer', 'redTimer', 'liveStartTimer', 'lotteryTimer',
					'networkStatusTimer', 'networkRetryTimer'
				];
				timers.forEach(timerName => {
					if (this[timerName] && typeof this[timerName] === 'number') {
						if (timerName.includes('Interval')) {
							clearInterval(this[timerName])
						} else {
							clearTimeout(this[timerName])
						}
						this[timerName] = null
						console.log(`清理了可能泄漏的定时器: ${timerName}`)
					}
				})
			},
			clearAllTimersEnhanced() {
				this.clearAllTimers()

				if (this.networkRetryTimer) {
					clearTimeout(this.networkRetryTimer)
					this.networkRetryTimer = null
				}

				this.stopMemoryMonitor()
				this.userRandomColors = Object.create(null)
				this.shownEntryUsers.clear()
				this.messageCount = 0
				this.errorCount = 0
				this.connectionLatency = 0
				this.lastPerformanceCheck = 0

				console.log('增强清理完成：所有定时器和缓存已清理')
			},
			goMiniProgram() {
				uni.showToast({
					title: '系统升级中，兑换请联系伴学助手！',
					icon: 'none'
				})
			},
			preventDoubleClick(e) {
				e.preventDefault();
				e.stopPropagation();
				return false
			},
			clearAllTimers() {
				const timers = [
					'noticeTimer',
					'scrollTimer',
					'liveViewDataTimer',
					'redTimer',
					'liveStartTimer',
					'lotteryTimer',
					'welcomeTimer',
					'trafficInterval',
					'lookTimer',
					'trafficTimer',
					'intervalId',
					'reconnectTimer',
					'searchTimer',
					'purchasePromptTimer',
					'heartBeatTimer',
					'pingTimeoutTimer'
				]

				timers.forEach((timer) => {
					if (this[timer]) {
						if (timer.includes('Interval') || timer.includes('Timer')) {
							clearInterval(this[timer])
						} else {
							clearTimeout(this[timer])
						}
						this[timer] = null
					}
				})

				this.stayTime = 0
				this.startTime = 0
				this.totalTraffic = 0
				this.scrollPending = false
				this.reconnectCount = 0
				this.heartBeatRetryCount = 0
			},
			scrollToBottom() {
				const now = Date.now()
				if (now - this.lastScrollTime < this.scrollDebounceDelay) {
					console.log('滚动防抖：忽略频繁调用')
					return
				}
				this.lastScrollTime = now
				if (this.scrollTimer) {
					clearTimeout(this.scrollTimer)
					this.scrollTimer = null
				}
				this.scrollTop = 999999999
			},
			startMemoryMonitor() {
				if (this.memoryMonitorTimer) {
					clearInterval(this.memoryMonitorTimer)
				}
				this.memoryMonitorTimer = setInterval(() => {
					this.checkAndCleanMemory()
				}, 5 * 60 * 1000);
			},
			checkAndCleanMemory() {
				try {
					if (this.talklist && this.talklist.length > 25) {
						const keepCount = 20
						this.talklist.splice(0, this.talklist.length - keepCount)
					}

					if (this.userRandomColors && Object.keys(this.userRandomColors).length > 50) {
						const entries = Object.entries(this.userRandomColors)
						const keepEntries = entries.slice(-50)
						this.userRandomColors = Object.fromEntries(keepEntries)
					}

					if (this.shownEntryUsers && this.shownEntryUsers.size > 100) {
						const array = Array.from(this.shownEntryUsers)
						this.shownEntryUsers.clear()
						array.slice(-100).forEach((id) => this.shownEntryUsers.add(id))
					}

					console.log('内存清理完成')
				} catch (error) {
					console.error('内存清理失败:', error)
				}
			},
			async resumePageActivity() {
				if (this.liveItem) {
					await this.getliving(this.liveId)
					this.startTimeTimer(this.liveItem)
				}
				if (!this.isSocketAvailable()) {
					this.initSocket()
				}
			},
			getUserRandomColor(userId) {
				if (!userId) {
					return '#8978e2'
				}
				if (this.userRandomColors[userId]) {
					return this.userRandomColors[userId]
				}
				const color = this.generateStableColor(userId)
				this.userRandomColors[userId] = color
				this.saveUserColorsToStorage()
				return color
			},
			generateStableColor(userId) {
				let seed = 0
				for (let i = 0; i < userId.length; i++) {
					seed = (seed * 31 + userId.charCodeAt(i)) % 1000000
				}
				const colorPool = [
					'#FF6B6B',
					'#4ECDC4',
					'#45B7D1',
					'#96CEB4',
					'#FFEAA7',
					'#DDA0DD',
					'#98D8C8',
					'#F7DC6F',
					'#BB8FCE',
					'#85C1E9',
					'#F8C471',
					'#82E0AA',
					'#F1948A',
					'#85C1E9',
					'#D7BDE2'
				]
				return colorPool[seed % colorPool.length]
			},
			saveUserColorsToStorage() {
				try {
					uni.setStorageSync('userRandomColors', this.userRandomColors)
				} catch (e) {
					console.warn('保存用户颜色缓存失败:', e)
				}
			},
			loadUserColorsFromStorage() {
				try {
					const cached = uni.getStorageSync('userRandomColors')
					if (cached) {
						this.userRandomColors = cached
					}
				} catch (e) {
					console.warn('加载用户颜色缓存失败:', e)
				}
			},
			getNicknameInitial(nickName) {
				if (!nickName || typeof nickName !== 'string') return '未'
				if (/^[\u4e00-\u9fa5]/.test(nickName[0])) {
					return nickName[0]
				}
				return nickName[0].toUpperCase()
			},
			async getUserInfo() {
				await getUserInfo().then((res) => {
						if (res.code == 200) {
							this.userData = res.user
						} else {
							uni.showToast({
								icon: 'none',
								title: '请求失败'
							})
						}
					},
					(rej) => {}
				)
			},
			handleAgreement() {
				const templateId = this.templateId
				if (this.hasSubscribed) return;
				uni.requestSubscribeMessage({
					tmplIds: [templateId],
					success: (res) => {
						if (res[templateId] === 'accept') {
							uni.showToast({
								title: '订阅成功，开播将提醒您',
								icon: 'success',
								duration: 2500 // 成功提示延长到2.5秒
							})
							this.hasSubscribed = true;
							uni.setStorageSync('subscribe_status_' + this.liveId, true);
							this.callSendMessageApi()
						} else if (res[templateId] === 'reject') {
							uni.showToast({
								title: '您已拒绝订阅，将无法收到提醒',
								icon: 'none',
								duration: 2500 // 成功提示延长到2.5秒
							})
						} else if (res[templateId] === 'ban') {
							uni.showToast({
								title: '您已关闭所有订阅权限，请在设置中开启',
								icon: 'none',
								duration: 2500 // 成功提示延长到2.5秒
							})
						}
					},
					fail: (err) => {
						console.error('订阅消息失败', err)
						uni.showToast({
							title: '订阅失败，请重试',
							icon: 'none',
							duration: 2500 // 成功提示延长到2.5秒
						})
					}
				})
			},
			async callSendMessageApi() {
				if (!this.userData.userId) return
				const templateData = {
					liveId: this.liveId,
					userId: this.userData.userId,
					templateId: this.templateId || '',
					maOpenId: this.userData.maOpenId || '',
					appid: this.appid || '',
					data: {
						thing6: this.liveItem.liveName,
						date7: this.liveItem.startTime
					}
				}
				subNotifyLive(templateData).then(
					(res) => {
						if (res.code == 200) {
							this.isAgreement = true
							uni.setStorageSync('isAgreement', true)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					(rej) => {}
				)
			},
			sendHeartBeat() {
				if (!this.isSocketAvailable() || !this.isNetworkAvailable) {
					console.warn('网络不可用或Socket连接异常，跳过心跳发送')
					return
				}

				this.lastHeartBeatTime = Date.now()

				try {
					const heartBeatMsg = JSON.stringify({
						cmd: 'heartbeat',
						msg: 'ping',
						userId: this.userData.userId || '',
						liveId: this.liveId,
						timestamp: this.lastHeartBeatTime,
						networkType: this.networkType
					})

					this.socket.send({
						data: heartBeatMsg,
						success: () => {
							this.heartBeatRetryCount = 0
							this.adjustHeartBeatInterval(true)
							this.startPingTimeout()
						},
						fail: (err) => {
							console.error('心跳包发送失败:', err)
							this.heartBeatRetryCount++
							this.adjustHeartBeatInterval(false)

							const retryDelay = this.getRetryDelay()

							if (this.heartBeatRetryCount < this.maxHeartBeatRetries) {
								setTimeout(() => this.sendHeartBeat(), retryDelay)
							} else {
								this.heartBeatRetryCount = 0
								this.handleReconnect()
							}
						}
					})
				} catch (err) {
					console.error('心跳发送异常:', err)
					this.heartBeatRetryCount++

					const retryDelay = this.getRetryDelay()
					if (this.heartBeatRetryCount < this.maxHeartBeatRetries) {
						setTimeout(() => this.sendHeartBeat(), retryDelay)
					} else {
						this.heartBeatRetryCount = 0
						this.handleReconnect()
					}
				}
			},
			getRetryDelay() {
				const baseDelay = 2000
				const retryMultiplier = Math.pow(1.5, this.heartBeatRetryCount)

				let networkMultiplier = 1
				switch (this.networkType) {
					case '2g':
						networkMultiplier = 3
						break
					case '3g':
						networkMultiplier = 2
						break
					case '4g':
					case '5g':
						networkMultiplier = 1
						break
					case 'wifi':
						networkMultiplier = 0.8
						break
					default:
						networkMultiplier = 1.5
				}

				return Math.min(baseDelay * retryMultiplier * networkMultiplier, 10000)
			},
			adjustHeartBeatInterval(isSuccess) {
				if (isSuccess) {
					this.adaptiveHeartBeatInterval = Math.min(this.adaptiveHeartBeatInterval * 1.1, 30000)
				} else {
					this.adaptiveHeartBeatInterval = Math.max(this.adaptiveHeartBeatInterval * 0.9, 10000)
				}
			},
			startPingTimeout() {
				if (this.pingTimeoutTimer) {
					clearTimeout(this.pingTimeoutTimer)
					this.pingTimeoutTimer = null
				}

				this.pingTimeoutTimer = setTimeout(() => {
					console.warn('心跳超时，触发重连')
					this.pingTimeoutTimer = null
					this.heartBeatRetryCount++
					if (this.heartBeatRetryCount < this.maxHeartBeatRetries) {
						console.log(`心跳超时，尝试重发 (${this.heartBeatRetryCount}/${this.maxHeartBeatRetries})`)
						setTimeout(() => this.sendHeartBeat(), 1000)
					} else {
						console.log('心跳重试次数用尽，触发重连')
						this.heartBeatRetryCount = 0
						this.handleReconnect()
					}
				}, this.pingTimeout)
			},
			stopHeartBeat() {
				if (this.heartBeatTimer) {
					clearInterval(this.heartBeatTimer)
					this.heartBeatTimer = null
				}
				if (this.pingTimeoutTimer) {
					clearTimeout(this.pingTimeoutTimer)
					this.pingTimeoutTimer = null
				}
			},
			isSocketAvailable() {
				return this.socket && this.isSocketOpen && this.socket.readyState === 1
			},
			handleReconnect() {
				if (this.isManualClose) {
					console.log('手动关闭连接，不进行重连')
					return
				}

				if (this.reconnectTimer) {
					console.log('重连已在进行中，跳过重复重连')
					return
				}

				this.stopHeartBeat()

				if (!this.isNetworkAvailable) {
					console.warn('网络不可用，延迟重连')
					this.reconnectTimer = setTimeout(() => {
						this.reconnectTimer = null
						this.handleReconnect()
					}, 5000)
					return
				}

				if (this.reconnectCount < this.maxReconnectAttempts) {
					this.reconnectCount++

					const baseDelay = 1000
					const exponentialDelay = baseDelay * Math.pow(2, this.reconnectCount - 1)
					const jitter = Math.random() * 1000
					const totalDelay = Math.min(exponentialDelay + jitter, 30000)

					console.log(`第${this.reconnectCount}次重连，延迟${Math.round(totalDelay)}ms，网络类型：${this.networkType}`)

					this.reconnectTimer = setTimeout(() => {
						this.reconnectTimer = null
						if (this.isNetworkAvailable && !this.isManualClose && !this.isSocketAvailable()) {
							console.log('开始执行重连...')
							this.initSocket()
						} else if (this.isSocketAvailable()) {
							console.log('连接已恢复，取消重连')
							this.reconnectCount = 0
						} else {
							console.warn('重连时网络不可用或已手动关闭')
							this.handleReconnect()
						}
					}, totalDelay)
				} else {
					console.log(`已达最大重连次数(${this.maxReconnectAttempts})，停止重连`)
					this.showReconnectFailedMessage()
				}
			},
			showReconnectFailedMessage() {
				uni.showToast({
					title: '网络连接异常，请检查网络后重新进入',
					icon: 'none',
					duration: 3000
				})
			},
			handleConnectionError(errorType, error) {
				console.error(`WebSocket ${errorType}:`, error)

				if (errorType === '连接请求失败') {
					if (!this.isNetworkAvailable) {
						console.warn('网络不可用，等待网络恢复后重连')
						return
					}
				}

				this.handleReconnect()
			},
			resetReconnectState() {
				this.reconnectCount = 0
				this.heartBeatRetryCount = 0

				if (this.reconnectTimer) {
					clearTimeout(this.reconnectTimer)
					this.reconnectTimer = null
				}

				this.adaptiveHeartBeatInterval = this.heartBeatInterval
			},
			initNetworkStatusListener() {
				uni.getNetworkType({
					success: (res) => {
						this.networkType = res.networkType
						this.isNetworkAvailable = res.networkType !== 'none'
						console.log('当前网络类型:', res.networkType)
					}
				})

				uni.onNetworkStatusChange((res) => {
					const oldNetworkType = this.networkType
					const oldNetworkAvailable = this.isNetworkAvailable

					this.networkType = res.networkType
					this.isNetworkAvailable = res.isConnected

					console.log(`网络状态变化: ${oldNetworkType} -> ${res.networkType}, 连接状态: ${res.isConnected}`)

					if (!oldNetworkAvailable && res.isConnected) {
						console.log('网络恢复，尝试重连WebSocket')
						this.resetReconnectState()
						setTimeout(() => {
							if (!this.isSocketAvailable()) {
								this.initSocket()
							}
						}, 1000)
					}

					if (oldNetworkType !== res.networkType && res.isConnected) {
						this.adjustHeartBeatForNetworkType(res.networkType)
					}

					if (!res.isConnected) {
						console.warn('网络断开，停止心跳')
						this.stopHeartBeat()
					}
				})
			},
			adjustHeartBeatForNetworkType(networkType) {
				let newInterval = this.heartBeatInterval
				switch (networkType) {
					case '2g':
						newInterval = 30000
						break
					case '3g':
						newInterval = 20000
						break
					case '4g':
					case '5g':
						newInterval = 15000
						break
					case 'wifi':
						newInterval = 10000
						break
					default:
						newInterval = 15000
				}

				if (newInterval !== this.adaptiveHeartBeatInterval) {
					this.adaptiveHeartBeatInterval = newInterval
					console.log(`根据网络类型(${networkType})调整心跳间隔为${newInterval}ms`)

					if (this.heartBeatTimer && this.isSocketAvailable()) {
						this.startHeartBeat()
					}
				}
			},
			inputFocus() {
				this.isFocus = true
				this.isKeyboardShow = true
			},
			inputBlur() {
				this.isFocus = false
			},
			onRed() {
				if (!this.liveId) return
				if (!this.redInfo?.redId) return
				if (this.redTimer) {
					clearInterval(this.redTimer)
					this.redTimer = null
				}
				let data = {
					liveId: this.liveId,
					userId: this.userData.userId,
					redId: this.redInfo.redId
				}
				liveRed(data).then(
					(res) => {
						this.isShowRed = false
						this.redCard = res
						this.isShowRedCard = true
					},
					(rej) => {}
				)
			},
			onCoupon() {
				if (!this.couponInfo.couponIssueId) return
				let data = {
					goodsId: this.couponInfo.goodsId,
					couponIssueId: this.couponInfo.couponIssueId,
					liveId: this.liveId
				}
				coupon(data).then((res) => {
					this.isShowCoupon = false
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch((rej) => {})
			},
			getMyLottery() {
				this.winning = true
				myLottery()
					.then((res) => {
						if (res.code == 200) {
							this.prizeAll = res.data.list || {}
						} else {}
					})
					.catch((rej) => {})
			},
			onLottery() {
				if (!this.lotteryInfo) return

				let data = {
					lotteryId: this.lotteryInfo.lotteryId
				}

				liveLottery(data)
					.then((res) => {
						if (res.code == 200) {
							const resData = res.data || {}
							this.lotteryList = Array.isArray(resData) ? resData : []
							this.lotteryProducts = Array.isArray(resData.products) ? resData.products : []

							if (resData.duration) {
								this.isShowLotteryPop = true
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							this.lotteryList = []
							this.lotteryProducts = []
						}
					})
					.catch((rej) => {
						uni.showToast({
							title: '获取抽奖信息失败',
							icon: 'none'
						})
						this.lotteryList = []
						this.lotteryProducts = []
					})
			},
			onClaim() {
				let data = {
					liveId: this.liveId,
					lotteryId: this.lotteryInfo.lotteryId
				}
				claim(data).then(
					(res) => {
						if (res.code == 200) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							this.isShowLotteryPop = false
							this.havePrize = true
							uni.setStorageSync('havePrize', this.havePrize)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					(rej) => {}
				)
			},
			confirm() {
				this.isShowPrize = false
				this.havePrize = false
				uni.setStorageSync('havePrize', this.havePrize)
			},
			onGoodsCollect(item) {
				if (!item || item.length === 0 || !item.goodsId) {
					return
				}
				collectGoods(item.goodsId).then(
					(res) => {
						if (res.code == 200) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							item.isFavorite = !item.isFavorite
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					(rej) => {}
				)
			},
			handleGoShopFromCart(item) {
				this.goShop(item.productId, item.goodsId)
			},
			getliveOrder(item) {
				if (!this.liveId) {
					return
				}
				liveOrderUser(this.liveId).then(
					(res) => {
						if (res.code == 200) {
							this.orderUser = res
						} else {
							console.log('获取正在购买用户失败')
						}
					},
					(rej) => {}
				)
			},
			onLiveStateChange(e, liveItem) {
				const stateCode = e.detail.code
				if (e.detail.code == -2301 || e.detail.code == -2302) {
					if (this.$refs.liveVideo && this.$refs.liveVideo.playVideo) {
						this.$refs.liveVideo.playVideo()
					}
				} else if (e.detail.code == 2004) {
					this.calculateTimeDiff(this.liveItem)
					this.startTrafficCalculation(this.bitrateLive)
				}
			},
			onLiveError(e, liveItem) {
				this.videoError(e, liveItem)
				console.log('错误')
			},
			getCurrentActivities() {
				if (!this.liveId) return
				currentActivities(this.liveId).then(
					(res) => {
						if (res.code === 200) {
							this.redInfo = (Array.isArray(res.red) ? res.red : [])[0] || {}
							this.lotteryInfo = (Array.isArray(res.lottery) ? res.lottery : [])[0] || {}
							this.goodsCard = res.goods || {}
							this.notice = res.topMsg || {}
							this.isShowGoods = this.goodsCard && this.goodsCard.status == 1
							this.isShowRed = this.redInfo && this.redInfo.redStatus == 1
							this.isShowLottery = this.lotteryInfo && this.lotteryInfo.lotteryStatus == 1
							if (this.isShowRed) {
								this.redTimer = setInterval(() => {
									const redCountdown = this.handleTime(this.redInfo.updateTime, this.redInfo
										.duration)
									if (!redCountdown) {
										this.isShowRed = false
										clearInterval(this.redTimer)
									}
								}, 1000)
							}
							if (this.notice.msg) {
								this.noticeTimer = setInterval(() => {
									const noticeCountdown = this.handleTime(this.notice.endTime, 0)
									console.log('出现1>>>', noticeCountdown)
									if (!noticeCountdown) {
										this.isShowNotice = false
										clearInterval(this.noticeTimer)
									} else {
										this.isShowNotice = true
									}
								}, 1000)
							}
							if (this.isShowLottery) {
								this.lotteryTimer = setInterval(() => {
									this.countdown = this.handleTime(this.lotteryInfo.updateTime, this
										.lotteryInfo.duration)
								}, 1000)
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					(rej) => {}
				)
			},
			calculateTimeDiff(item) {
				if (!item.startTime) return
				let timeStr = item.startTime

				const time = new Date(timeStr.replace(/-/g, '/'))

				if (isNaN(time.getTime())) {
					return
				}
				const now = new Date()
				let diffMs = Math.max(0, now.getTime() - time.getTime())
				const totalSeconds = Math.floor(diffMs / 1000)
				const hours = this.padZero(Math.floor(totalSeconds / 3600))
				const minutes = this.padZero(Math.floor((totalSeconds % 3600) / 60))
				const seconds = this.padZero(totalSeconds % 60)
				this.diffTotalTime = `${hours}:${minutes}:${seconds}`
			},
			padZero(num) {
				return num < 10 ? `0${num}` : num
			},
			startTimeTimer(item) {
				if (!item) return
				const totalTime = this.calculateTimeDiff(item)
				item.timeTimer = setInterval(() => {
					const totalTime = this.calculateTimeDiff(item)
				}, 1000);
			},
			toggleViewerList() { //加载直播间观众
				const now = Date.now()
				if (now - this.lastClickTime > this.clickDelay) {
					this.showViewerList = !this.showViewerList
					// if (this.showViewerList) {
					// 	this.getliveUser(false);
					// }
					this.lastClickTime = now;
				}
			},
			closeViewerList() {
				this.showViewerList = false
			},
			openViewerList() {
				// this.$nextTick(() => {
				// 	this.calculateScrollHeight()
				// })
			},
			calculateScrollHeight() {
				// const query = uni.createSelectorQuery().in(this)
				// query.select('.viewer-list-popup').boundingClientRect((data) => {
				// 	if (data) {
				// 		this.scrollHeight = data.height - 120
				// 	}
				// }).exec()
			},
			openViews() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this)
					query.select('.view-box').boundingClientRect((data) => {
						if (data) {
							this.scrollHeight = data.height - 80
						}
					}).exec();
				})
			},
			async handleViewerLoadMore(page) {
				if (this.viewLoading) return;
				this.viewPageNum = page.num;
				await this.getliveUser(page.num > 1);
			},
			async getLiveMsg(liveItem) {
				if (!liveItem || !this.liveId) {
					console.error('getLiveMsg 错误：无效的 liveItem')
					return
				}
				try {
					const res = await liveMsg(this.liveId, 30, 1)
					if (res.code == 200) {
						const rows = Array.isArray(res.rows) ? res.rows : []
						const reversedTalkList = [...rows].reverse()
						this.talklist = Array.isArray(reversedTalkList) ? reversedTalkList : []
						this.$nextTick(() => {
							this.scrollToBottom()
						})
					} else {
						this.talklist = []
					}
				} catch (error) {
					this.talklist = []
					console.error('获取聊天记录失败:', error)
				}
			},
			generateRandomChineseName() {
				const prefixes = [
					'幸福', '快乐', '安康', '吉祥', '如意', '平安', '健康', '长寿', '福气', '美满',
					'和谐', '团圆', '富贵', '荣华', '宁静', '淡泊', '知足', '常乐', '悠然', '自在',
					'夕阳', '晚霞', '金秋', '银发', '老顽童', '开心', '笑口常开', '岁月静好', '云淡风轻', '海阔天空'
				]

				const suffixes = [
					'老人', '大爷', '大妈', '爷爷', '奶奶', '伯伯', '阿姨', '前辈', '先生', '女士',
					'长者', '翁', '婆', '哥', '姐', '友', '客', '迷', '粉丝', '达人',
					'爱好者', '之家', '之人', '之心', '之情', '之乐', '之旅', '之梦', '之歌', '之韵'
				]

				const specialNames = [
					'老有所乐', '知足常乐', '笑看人生', '云淡风轻', '岁月如歌', '夕阳红', '金色年华', '老当益壮',
					'鹤发童颜', '老骥伏枥', '闲云野鹤', '淡泊明志', '宁静致远', '随遇而安', '顺其自然',
					'老来俏', '开心果', '老宝贝', '不老松', '常青树'
				]

				if (Math.random() < 0.3) {
					return specialNames[Math.floor(Math.random() * specialNames.length)]
				} else {
					const prefix = prefixes[Math.floor(Math.random() * prefixes.length)]
					const suffix = suffixes[Math.floor(Math.random() * suffixes.length)]
					return prefix + suffix
				}
			},
			async getliveUser(isLoadMore = false) {
				if (!isLoadMore) {
					this.liveViewers = []
					this.viewPageNum = 1
				}
				this.viewLoading = true;
				try {
					const res = await watchUserList(this.liveId, this.viewPageSize, this.viewPageNum, false);
					console.log("qxj watchUserList res", res);
					if (res.code === 200) {
						const newRows = Array.isArray(res.rows) ? res.rows : []

						const newViewers = newRows.map((item) => ({
							avatar: item.avatar || '',
							userId: item.userId || '',
							nickName: item.nickName || '未命名'
						}));

						let virtualData = [];
						if (!isLoadMore) {
							// 首次加载时，固定生成10条虚拟数据，避免数量跳动
							let virtualTotal = 10;
							for (let i = 0; i < virtualTotal; i++) {
								let data = {
									avatar: '',
									userId: '8565' + i,
									nickName: this.generateRandomChineseName()
								}
								virtualData.push(data);
							}
							this.liveViewersData = [...newViewers, ...virtualData];
						}

						// 过滤掉旧列表中的虚拟数据，保留真实用户
						let currentRealViewers = isLoadMore ? this.liveViewers.filter(v => !String(v.userId)
							.startsWith('8565')) : [];

						// 合并真实用户
						let allRealViewers = [...currentRealViewers, ...newViewers];

						// 加上虚拟用户放在最后（只在首次加载时）
						this.liveViewers = isLoadMore ? allRealViewers : [...allRealViewers, ...virtualData];

						let hasMore = newRows.length >= this.viewPageSize;
						if (this.liveViewers.length >= 100) {
							hasMore = false;
							this.lookAudsCount = this.liveUserTotal - 100;
						} else {
							this.lookAudsCount = 0;
						}

						if (this.$refs.viewer) {
							this.$refs.viewer.endSuccess(newRows.length, hasMore);
						}
					} else {
						if (this.$refs.viewer) this.$refs.viewer.endErr();
					}
				} catch (error) {
					console.error('获取观众列表失败:', error)
					if (this.$refs.viewer) this.$refs.viewer.endErr();
				} finally {
					this.viewLoading = false
				}
			},
			async getliveUserInit(isLoadMore = false) {
				try {
					const res = await watchUserList(this.liveId, this.viewPageSize, 1, false);
					console.log("qxj watchUserList res", res);
					if (res.code === 200) {
						const userRows = Array.isArray(res.rows) ? res.rows : []
						let array = userRows.map((item) => ({
							avatar: item.avatar || '',
							userId: item.userId || '',
							nickName: item.nickName || '未命名'
						}));
						let virtualData = [];
						let virtualTotal = res.total * 2 + 50;
						//this.virtualTotal= virtualTotal;
						this.liveUserTotal = virtualTotal;
						// for (let i = 0; i < 5; i++) {
						// 	let data = {
						// 		avatar: '',
						// 		userId: '8565' + i,
						// 		nickName: this.generateRandomChineseName()
						// 	}
						// 	virtualData.push(data)
						// }
						this.liveTopViewersData = [...array];

					}
				} catch (error) {
					console.error('获取观众列表失败:', error)
				} finally {}
			},

			showPurchaseMessage() {
				if (this.purchasePromptTimer) {
					clearTimeout(this.purchasePromptTimer)
				}

				this.showPurchasePrompt = true

				this.purchasePromptTimer = setTimeout(() => {
					this.showPurchasePrompt = false
				}, 2000)
			},
			truncateString(str, maxLength) {
				if (typeof str !== 'string' || str.length <= maxLength) {
					return str
				}
				return str.slice(0, maxLength) + '...'
			},
			navgetTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			async getliving(liveId) {
				if (!liveId) return
				const param = {
					id: liveId
				}
				try {
					const res = await getlive(param)
					if (res.code !== 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
					this.liveItem = Object.assign({}, this.liveItem, res.data)
					this.startTimeTimer(this.liveItem)
					if (this.liveStartTimer) {
						clearInterval(this.liveStartTimer)
						this.liveStartTimer = null
					}
					if (res.data.status == 1) {
						this.liveStartTimer = setInterval(async () => {
							this.liveCountdown = this.handleTime(res.data.startTime, 0)
							if (!this.liveCountdown) {
								uni.removeStorageSync('isAgreement')
								await this.getliving(this.liveId)
								clearInterval(this.liveStartTimer)
							}
						}, 1000)
						this.$set(this.liveItem, 'previewUrl', res.data.previewUrl)
						this.$set(this.liveItem, 'livingUrl', '')
						this.$set(this.liveItem, 'videoUrl', '')
					} else if (res.data.status == 2) {
						if (res.data.liveType == 1) {
							let cTime = Math.floor(Math.random() * 10000) + 1
							let livingUrl = res.data.flvHlsUrl + '&t=' + cTime
							this.$set(this.liveItem, 'livingUrl', livingUrl)
							this.$set(this.liveItem, 'videoUrl', '')
						} else if (res.data.liveType === 2) {
							this.$set(this.liveItem, 'videoUrl', res.data.videoUrl)
							this.$set(this.liveItem, 'livingUrl', '')
						}
					} else if (res.data.status == 4 && res.data.liveType == 3) {
						this.$set(this.liveItem, 'videoUrl', res.data.videoUrl)
						this.$set(this.liveItem, 'livingUrl', '')
					} else {
						this.$set(this.liveItem, 'livingUrl', '')
						this.$set(this.liveItem, 'videoUrl', '')
					}
					// if (this.liveItem.configJson) {
					//    this.completionRate = JSON.parse(this.liveItem.configJson).completionRate * 0.01;
					//  }
					this.$set(this.liveItem, 'autoplay', res.data.liveType !== 0)
					this.$set(this.liveItem, 'showType', res.data.showType)
					this.storeId = res.storeId
					this.diffLiveStartTime = this.calculateLiveTimeDiff(this.liveItem.startTime);
					if (this.diffLiveStartTime < 0) { //预告
						this.isPreview = true;
						this.liveBeginWatchTime = Date.now();
					} else {
						if (!this.hasLiveEnd) { //没经历过直播结束
							this.liveBeginWatchTime = Date.now();
						}
					}

					console.log("是否调用积分列表", this.liveItem.completionPointsEnabled)
					if (this.liveItem.completionPointsEnabled) {
						console.log("是否调用积分列表")
						this.getRemainingTime()
					}
					// 初始化累计观看时间
					this.initWatchTime();
					this.startLiveViewDataTimer()
					if (this.$refs.liveVideo && this.$refs.liveVideo.playVideo) {
						this.$refs.liveVideo.playVideo()
					}
				} catch (err) {
					console.error('获取直播信息失败:', err)
					uni.showToast({
						title: '获取直播信息失败',
						icon: 'none'
					})
				}
			},
			getPureDecimal(num, precision = 6) {
				const decimalPart = Math.abs(num).toFixed(precision).split('.')[1]
				return decimalPart?.replace(/0+$/, '') || ''
			},
			goBack() {
				if (this.liveItem) {
					if (this.$refs.liveVideo && this.$refs.liveVideo.pauseVideo) {
						this.$refs.liveVideo.pauseVideo()
					}
				}
				this.closeWebSocket(true)
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack()
				} else {
					uni.reLaunch({
						url: '/pages_course/livingList'
					})
				}
			},
			async onLike() {
				if (!this.liveId) return
				try {
					const res = await liveDataLike(this.liveId)
					if (res?.like) {
						this.liveViewData.like++
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('点赞失败:', error)
				}
			},
			getliveViewData() {
				if (!this.liveId) return
				getLiveViewData(this.liveId).then((res) => {
					if (res.code == 200) {
						this.liveViewData = res
					}
				}).catch((error) => {
					console.error('获取直播间数据失败:', error)
					this.liveViewData = {
						like: 0,
						watchCount: 0
					}
				})
			},
			startLiveViewDataTimer() {
				if (this.liveViewDataTimer) {
					clearInterval(this.liveViewDataTimer)
					this.liveViewDataTimer = null
				}
				this.getliveViewData()
				this.liveViewDataTimer = setInterval(() => {
					if (this.liveId) {
						this.getliveViewData()
					}
				}, 20000)
			},
			goShop(productId, goodsId) {
				if (!this.liveId) return
				uni.navigateTo({
					url: '/pages_shopping/live/goods?productId=' + productId + '&liveId=' + this.liveId +
						'&goodsId=' + goodsId + '&storeId=' + this.storeId
				})
			},
			async queryCollect() {
				this.loadingProducts = true
				if (!this.liveId) return
				if (this.inputInfo == null) this.inputInfo = ''
				uni.showLoading({
					title: '加载中'
				})
				try {
					const res = await liveStore(this.liveId, this.inputInfo)
					uni.hideLoading()
					this.shopping = true
					if (res.code === 200) {
						this.products = Array.isArray(res.data) ? res.data : []
					}
				} catch (error) {
					console.error('获取小黄车商品失败:', error)
				} finally {
					this.loadingProducts = false
				}
			},
			initTime() {
				const now = new Date()
				this.timestamp = now.getTime()
			},
			showGift() {
				this.isShowGift = true
			},
			clearChatInput() {
				this.$refs.chatInput.clearInput()
			},
			openCart() {
				this.queryCollect()
			},
			closeGift() {
				this.isShowGift = false
			},
			closeShop() {
				this.shopping = false
			},
			closeMore() {
				this.isMore = false
			},
			closeWin() {
				this.winning = false
			},
			closeWebSocket(isManual = true) {
				if (!this.socket || !this.isSocketOpen) {
					console.warn('WebSocket 任务不存在或未打开，无需关闭')
					return
				}

				console.log(`WebSocket连接关闭 - ${isManual ? '手动' : '自动'}`)
				this.isManualClose = isManual

				this.cleanupAllResources()

				try {
					const socketToClose = this.socket
					this.socket = null
					this.isSocketOpen = false
					this.isConnecting = false

					socketToClose.close({
						code: 1000,
						reason: isManual ? '主动关闭' : '异常关闭'
					})
					console.log('WebSocket连接已发起关闭')
				} catch (err) {
					console.error('关闭WebSocket失败:', err)
					this.socket = null
					this.isSocketOpen = false
					this.isConnecting = false
				}
			},
			cleanupAllResources() {
				this.stopHeartBeat()

				if (this.pingTimeoutTimer) {
					clearTimeout(this.pingTimeoutTimer)
					this.pingTimeoutTimer = null
				}

				if (this.networkStatusTimer) {
					clearTimeout(this.networkStatusTimer)
					this.networkStatusTimer = null
				}

				this.resetReconnectState()

				this.heartBeatRetryCount = 0
				this.lastHeartBeatTime = 0
				this.adaptiveHeartBeatInterval = this.heartBeatInterval
			},
			startHeartBeat() {
				this.stopHeartBeat()
				this.heartBeatTimer = setInterval(() => {
					this.sendHeartBeat()
				}, this.adaptiveHeartBeatInterval)
			},
			initSocket() {
				if (this.isConnecting) {
					console.log('WebSocket正在连接中，跳过重复连接')
					return
				}

				if (!this.isNetworkAvailable) {
					console.warn('网络不可用，延迟WebSocket连接')
					if (!this.networkRetryTimer) {
						this.networkRetryTimer = setTimeout(() => {
							this.networkRetryTimer = null
							this.initSocket()
						}, 3000)
					}
					return
				}

				if (this.socket && this.socket.readyState === 1) {
					console.log('WebSocket连接已存在且正常，无需重新连接')
					this.reconnectCount = 0
					return
				}

				if (this.socket && (this.socket.readyState === 0 || this.socket.readyState === 1)) {
					console.log('关闭现有WebSocket连接，创建新连接')
					this.closeWebSocket(false)
					setTimeout(() => {
						this.createWebSocketConnection()
					}, 100)
					return
				}
				this.createWebSocketConnection()
			},
			createWebSocketConnection() {
				if (!this.liveId) {
					console.error('缺失直播间ID，无法初始化WebSocket')
					return
				}
				if (!this.userData || !this.userData.userId) {
					console.error('用户信息缺失，无法初始化WebSocket')
					return
				}

				this.isConnecting = true
				this.isSocketOpen = false
				this.connectionStartTime = Date.now()
				this.resetReconnectState()

				setTimeout(() => {
					this.getliveUserInit(false)
				}, 200)

				const now = new Date()
				this.timestamp = now.getTime()
				const signature = CryptoJS.HmacSHA256(
					`${this.liveId}${this.userData.userId}${this.userType}${this.timestamp}`, this.timestamp.toString()
				).toString(CryptoJS.enc.Hex)

				try {
					const baseWsUrl = 'wss://im.fhhx.runtzh.com/ws/app/webSocket'
					let wsUrl =
						`${baseWsUrl}?userId=${this.userData.userId}&liveId=${this.liveId}&userType=${this.userType}&timestamp=${this.timestamp}&signature=${signature}`
					if (this.qrFrom) {
						wsUrl += this.qrFrom
					}

					console.log('qxj wsUrl', wsUrl)
					const socketTask = uni.connectSocket({
						url: wsUrl,
						success: () => {
							console.log('WebSocket连接请求发送成功')
						},
						fail: (err) => {
							console.error('WebSocket连接请求失败:', err)
							this.isConnecting = false
							this.handleConnectionError('连接请求失败', err)
						}
					})

					socketTask.onOpen((res) => {
						console.log('WebSocket连接已打开')
						this.socket = socketTask
						this.isConnecting = false
						this.isSocketOpen = true

						if (this.connectionStartTime > 0) {
							this.connectionLatency = Date.now() - this.connectionStartTime
							console.log(`WebSocket连接延迟: ${this.connectionLatency}ms`)
						}

						this.reconnectCount = 0
						this.resetReconnectState()
						this.heartBeatRetryCount = 0
						this.shownEntryUsers.clear()

						if (this.reconnectCount === 0) {
							console.log('WebSocket连接建立成功')
						} else {
							console.log(`WebSocket重连成功（第${this.reconnectCount}次尝试）`)
						}
						this.startHeartBeat()
					})

					socketTask.onMessage((res) => {
						this.messageCount++
						try {
							const data = JSON.parse(res.data)
							if (!!data.data && data.data.cmd === 'heartbeat') {
								if (this.pingTimeoutTimer) {
									clearTimeout(this.pingTimeoutTimer)
									this.pingTimeoutTimer = null
								}
								this.heartBeatRetryCount = 0
								this.adjustHeartBeatInterval(true)
								return
							}
							this.handleSocketMessage(res)
						} catch (err) {
							console.error('消息解析异常:', err)
							this.errorCount++
						}
					})

					socketTask.onError((err) => {
						console.error('WebSocket连接错误:', err)
						this.errorCount++
						this.isSocketOpen = false
						this.isConnecting = false
						this.stopHeartBeat()
						this.handleConnectionError('连接错误', err)
					})

					socketTask.onClose((res) => {
						console.log('WebSocket连接关闭:', res)
						this.isSocketOpen = false
						this.isConnecting = false
						this.stopHeartBeat()

						if (!this.isManualClose) {
							if (res.code === 1000) {
								console.log('WebSocket正常关闭，不进行重连')
							} else {
								console.warn(`WebSocket异常关闭 (code: ${res.code}, reason: ${res.reason})`)
								this.handleReconnect()
							}
						} else {
							console.log('WebSocket手动关闭，不进行重连')
						}
					})
				} catch (e) {
					console.error('创建WebSocket异常:', e)
					this.handleReconnect()
				}
			},
			handleTime(time, duration) {
				let timeStamp

				if (typeof time === 'number' && time > 0 && time < 9999999999999) {
					timeStamp = time
				} else if (typeof time === 'string' && time.trim() !== '') {
					const match = time.match(/^(\w{3}) (\w{3}) (\d{1,2}) (\d{1,2}):(\d{2}):(\d{2}) CST (\d{4})$/)

					if (match) {
						const [, day, month, date, hours, minutes, seconds, year] = match

						const monthMap = {
							'Jan': 0,
							'Feb': 1,
							'Mar': 2,
							'Apr': 3,
							'May': 4,
							'Jun': 5,
							'Jul': 6,
							'Aug': 7,
							'Sep': 8,
							'Oct': 9,
							'Nov': 10,
							'Dec': 11
						}

						const jsDate = new Date(
							parseInt(year),
							monthMap[month],
							parseInt(date),
							parseInt(hours),
							parseInt(minutes),
							parseInt(seconds)
						)
						timeStamp = jsDate.getTime()
					} else {
						const date = new Date(time)
						if (!isNaN(date.getTime())) {
							timeStamp = date.getTime()
						} else {
							console.error('无效的日期格式:', time)
							return false
						}
					}
				} else {
					console.error('time参数必须是有效的时间戳（数字）或日期字符串')
					return false
				}

				const targetTimestamp = timeStamp + duration * 60 * 1000
				const currentTimestamp = Date.now()
				const timeDiffMs = targetTimestamp - currentTimestamp

				if (timeDiffMs <= 0) {
					return false
				}

				const hours = Math.floor(timeDiffMs / (1000 * 60 * 60))
				const minutes = Math.floor((timeDiffMs % (1000 * 60 * 60)) / (1000 * 60))
				const seconds = Math.floor((timeDiffMs % (1000 * 60)) / 1000)

				const formatNum = (num) => num.toString().padStart(2, '0')
				return {
					hours: formatNum(hours),
					minutes: formatNum(minutes),
					seconds: formatNum(seconds)
				}
			},
			addToTalkList(message) {
				const MAX_TALK_ITEMS = 30

				if (!Array.isArray(this.talklist)) {
					this.talklist = []
				}

				const wasAtLimit = this.talklist.length >= MAX_TALK_ITEMS
				const isMyMessage = message.userId === this.userData.userId

				try {
					message.uniqueId = ++this.messageIdCounter

					let msgdata = {}
					try {
						msgdata = JSON.parse(message.data)
					} catch (e) {
						console.warn('JSON解析失败:', e)
						msgdata = {}
					}

					message.msgId = msgdata.msgId || Date.now()
					this.talklist.push(message)
				} catch (error) {
					console.error('处理消息时出错:', error)
				}

				if (this.talklist.length > MAX_TALK_ITEMS) {
					const removeCount = this.talklist.length - MAX_TALK_ITEMS
					this.talklist.splice(0, removeCount)
				}

				this.$forceUpdate()

				this.$nextTick(() => {
					this.forceScrollToBottomOnSend()
				})
			},
			async handleSocketMessage(message) {
				try {
					let data = JSON.parse(message.data)
					const socketMessage = data.data
					if (data.code == 200) {
						const messageData = {
							...socketMessage,
							cmd: socketMessage.cmd || '',
							ts: Date.now()
						}
						if (socketMessage.cmd == 'sendMsg') {
							if (!this.isSocketAvailable()) {
								uni.showToast({
									title: '连接已断开，正在重试...',
									icon: 'none'
								})
								this.handleReconnect()
								return
							}
							this.addToTalkList(messageData)
						} else if (socketMessage.cmd == 'red') {
							const redData = socketMessage.data ? JSON.parse(socketMessage.data) : {}
							this.redInfo = redData || {}
							this.isShowRed = socketMessage.status === 1
							if (this.isShowRed) {
								this.redTimer = setInterval(() => {
									const redCountdown = this.handleTime(this.redInfo.updateTime, this.redInfo
										.duration)
									if (!redCountdown) {
										this.isShowRed = false
										clearInterval(this.redTimer)
									}
								}, 1000)
							}
						} else if (socketMessage.cmd == 'goods') {
							const goodsData = socketMessage.data ? JSON.parse(socketMessage.data) : {}
							this.goodsCard = goodsData || {}
							this.isShowGoods = socketMessage.status == 1
						} else if (socketMessage.cmd == 'coupon') {
							const couponData = socketMessage.data ? JSON.parse(socketMessage.data) : {}
							this.couponInfo = couponData || {}
							this.isShowCoupon = socketMessage.status === 1
						} else if (socketMessage.cmd == 'likeDetail') {
							this.liveViewData.like = socketMessage.data
						} else if (socketMessage.cmd == 'lottery') {
							const lotteryData = socketMessage.data ? JSON.parse(socketMessage.data) : {}
							this.lotteryInfo = lotteryData || {}
							this.isShowLottery = socketMessage.status === 1
							if (socketMessage.status != 1) {
								this.isShowLotteryPop = false
							}
							clearTimeout(this.lotteryTimer)
							if (this.isShowLottery) {
								this.lotteryTimer = setInterval(() => {
									this.countdown = this.handleTime(this.lotteryInfo.updateTime, this
										.lotteryInfo.duration)
									if (!this.countdown) {
										console.log('倒计时', this.countdown)
										this.isShowLottery = false
										this.isShowLotteryPop = false
										clearInterval(this.lotteryTimer)
									}
								}, 1000)
							} else {
								this.isShowLottery = false
							}
						} else if (socketMessage.cmd == 'deleteMsg') {
							const index = this.talklist.findIndex(item => item.msgId == socketMessage.msg)
							if (index !== -1) {
								this.talklist.splice(index, 1)
							}
						} else if (socketMessage.cmd == 'globalVisible') {} else if (socketMessage.cmd ==
							'singleVisible') {} else if (socketMessage.cmd == 'entry') {
							try {
								//if (!this.liveUserCalled) {
								await this.getliveUserInit(false)
								this.liveUserCalled = true;
								//}
								const userIdToEntry = socketMessage.userId
								const existingIndex = this.liveViewersData.findIndex((item) => item.userId ===
									userIdToEntry);
								if (existingIndex === -1) {
									const liveViewers = {
										userId: socketMessage.userId,
										nickName: socketMessage.nickName,
										avatar: socketMessage.avatar
									}
									this.liveViewersData.push(liveViewers)
									this.liveUserTotal++
								}


								const userData = JSON.parse(socketMessage.data || '{}')
								const userId = userData.userId || socketMessage.userId
								if (!userId) return

								if (!this.shownEntryUsers.has(userId)) {
									this.inAndOut = socketMessage;
									this.showWelcomeMessage = true;
									this.shownEntryUsers.add(userId);
									if (this.welcomeTimer) clearTimeout(this.welcomeTimer)
									this.welcomeTimer = setTimeout(() => {
										this.showWelcomeMessage = false
									}, 3000)
								}
							} catch (err) {
								console.error('解析entry用户数据失败:', err)
							}
						} else if (socketMessage.cmd == 'out') {
							if (this.liveUserTotal > 0) {
								const userIdToRemove = socketMessage.userId
								const index = this.liveViewersData.findIndex((item) => item.userId === userIdToRemove)
								if (index !== -1) {
									this.liveViewersData.splice(index, 1)
									this.liveUserTotal--
								}
							}
							this.inAndOut = socketMessage
							this.showWelcomeMessage = true

							if (this.welcomeTimer) clearTimeout(this.welcomeTimer)
							this.welcomeTimer = setTimeout(() => {
								this.showWelcomeMessage = false
							}, 3000)
						} else if (socketMessage.cmd == 'sendTopMsg') {
							clearInterval(this.noticeTimer)
							console.log('公告消息>>>>', socketMessage)
							const noticeData = socketMessage.data ? JSON.parse(socketMessage.data) : {}
							this.notice = noticeData || {}
							this.isShowNotice = true
							if (this.isShowNotice) {
								this.noticeTimer = setInterval(() => {
									const noticeCountdown = this.handleTime(this.notice.endTime, 0)
									if (!noticeCountdown) {
										this.isShowNotice = false
										clearInterval(this.noticeTimer)
									}
								}, 1000)
							}
						} else if (socketMessage.cmd == 'live_start' || socketMessage.cmd == 'live_end') {
							if (this.liveStartTimer) {
								clearInterval(this.liveStartTimer)
								this.liveStartTimer = null
							}
							if (this.redTimer) {
								clearInterval(this.redTimer)
								this.redTimer = null
							}
							await this.getliving(this.liveId)
						} else if (socketMessage.cmd == 'Integral') {
							this.integral = {
								msg: socketMessage.msg,
								status: true
							}
						} else if (socketMessage.cmd == 'LotteryDetail') {
							try {
								this.prizeInfo = Array.isArray(JSON.parse(socketMessage.data || '[]')) ? JSON.parse(
									socketMessage.data || '[]') : []
							} catch (err) {
								console.error('解析抽奖结果失败:', err)
								this.prizeInfo = []
							}
							this.isShowPrize = true
							this.isShowLottery = false
							this.isShowLotteryPop = false
						} else if (socketMessage.cmd == 'blockUser') {
							uni.removeStorage({
								key: 'AppToken',
								success: () => {
									uni.reLaunch({
										url: '/pages/auth/login'
									})
								}
							})
						}
					} else {
						uni.showToast({
							title: data.msg,
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('Socket消息处理失败:', error)
				}
			},
			onBarrage(item) {
				if (this.isSending) return
				this.isSending = true
				setTimeout(() => {
					this.isSending = false
				}, 800)
				const text = (item || '').trim()
				if (!text) {
					uni.showToast({
						title: '不能发送空消息',
						icon: 'none'
					})
					return
				}
				if (!this.isSocketAvailable()) {
					if (retries > 0) {
						uni.showToast({
							title: `连接不稳定，正在重试（${retries}次）...`,
							icon: 'none'
						})
						setTimeout(() => this.sendMsg(retries - 1), 500)
					} else {
						uni.showToast({
							title: '连接已断开，发送失败',
							icon: 'none'
						})
					}
					return
				}
				const liveId = this.liveId
				const data = {
					liveId,
					userId: this.userData.userId,
					userType: 0,
					cmd: 'sendMsg',
					msg: text,
					nickName: this.userData.nickname || '未命名',
					avatar: this.userData.avatar || '/static/images/avatar.png'
				}
				try {
					this.socket.send({
						data: JSON.stringify(data),
						success: () => {
							this.forceScrollToBottomOnSend()
						},
						fail: (err) => {
							console.error('消息发送失败:', err)
							if (retries > 0) {
								uni.showToast({
									title: `发送失败，正在重试（${retries}次）`,
									icon: 'none'
								})
								setTimeout(() => this.sendMsg(retries - 1), 500)
							} else {
								uni.showToast({
									title: '发送失败，请稍后再试',
									icon: 'none'
								})
							}
						}
					})
				} catch (err) {
					console.error('发送消息异常:', err)
					if (retries > 0) {
						setTimeout(() => this.sendMsg(retries - 1), 500)
					} else {
						uni.showToast({
							title: '发送失败，请稍后再试',
							icon: 'none'
						})
					}
				}
			},
			sendMsg(retries = 1) {
				if (this.isSending) return
				this.isSending = true
				setTimeout(() => {
					this.isSending = false
				}, 800)
				const text = (this.value || '').trim()
				if (!text) {
					uni.showToast({
						title: '不能发送空消息',
						icon: 'none'
					})
					return
				}
				if (!this.isSocketAvailable()) {
					if (retries > 0) {
						uni.showToast({
							title: `连接不稳定，正在重试（${retries}次）...`,
							icon: 'none'
						})
						setTimeout(() => this.sendMsg(retries - 1), 500)
					} else {
						uni.showToast({
							title: '连接已断开，发送失败',
							icon: 'none'
						})
						this.value = text
					}
					return
				}
				const liveId = this.liveId
				this.value = ''
				const data = {
					liveId,
					userId: this.userData.userId,
					userType: 0,
					cmd: 'sendMsg',
					msg: text,
					nickName: this.userData.nickname || '未命名',
					avatar: this.userData.avatar || '/static/images/avatar.png'
				}
				try {
					this.socket.send({
						data: JSON.stringify(data),
						success: () => {
							this.value = ''
							this.forceScrollToBottomOnSend()
						},
						fail: (err) => {
							console.error('消息发送失败:', err)
							if (retries > 0) {
								uni.showToast({
									title: `发送失败，正在重试（${retries}次）`,
									icon: 'none'
								})
								setTimeout(() => this.sendMsg(retries - 1), 500)
							} else {
								uni.showToast({
									title: '发送失败，请稍后再试',
									icon: 'none'
								})
								this.value = text
							}
						}
					})
				} catch (err) {
					console.error('发送消息异常:', err)
					if (retries > 0) {
						setTimeout(() => this.sendMsg(retries - 1), 500)
					} else {
						uni.showToast({
							title: '发送失败，请稍后再试',
							icon: 'none'
						})
						this.value = text
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	// 弹窗
	.custom-toast {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999999;
	}

	.toast-content {
		background-color: rgba(0, 0, 0, 0.7);
		color: white;
		padding: 20rpx 40rpx;
		border-radius: 16rpx;
		max-width: 80vw;
		text-align: center;
		line-height: 1.5;
		font-weight: 500;
		font-size: 32rpx;
	}

	.swiper-wrapper {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #000000;

		.live-bg {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
		}

		.container {
			width: 100%;
			height: 100%;
			position: relative;
			transition: opacity 0.3s ease;
			transform: translateZ(0);
			will-change: opacity;

			&.fullscreen {

				.content-top,
				.side-group,
				.chat-area-container,
				.shop-popup,
				.lottery-popup,
				.more-popup,
				.shop-card,
				.gift-popup,
				.coupon-pop,
				.prize-popup,
				.winning-popup,
				.integral-popup,
				.red-card-popup,
				.viewer-popup {
					display: none !important;
					visibility: hidden !important;
					opacity: 0 !important;
					pointer-events: none !important;
				}

				.live-video {
					position: fixed !important;
					top: 0 !important;
					left: 0 !important;
					width: 100vw !important;
					height: 100vh !important;
					z-index: 99999 !important;
					background: #000 !important;
				}
			}
		}
	}

	.content {
		position: relative;
		z-index: 2;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.progress-countdown {
			margin-top: 24rpx;
			z-index: 9000;
			width: 180rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: rgba(0, 0, 0, 0.3);
			border-radius: 16rpx;
			padding: 16rpx;
			flex-direction: column;

			&.progress-vertical {
				top: 15%;
				left: 24rpx;
			}

			.title {
				width: 148rpx;
				height: 28rpx;
			}

			.progress-bar-bg {
				width: 148rpx;
				height: 8rpx;
				margin-top: 16rpx;
				background: #ffffff;
				border-radius: 6rpx;
				overflow: hidden;
				margin-bottom: 16rpx;

				.progress-bar-fill {
					height: 100%;
					background: #face15;
					border-radius: 6rpx;
					transition: width 1s linear;
				}
			}

			.progress-text {
				color: #fff;
				font-size: 20rpx;
			}
		}
	}

	.content-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 0 24rpx;
		box-sizing: border-box;
		position: fixed;
		margin-top: 88rpx;
		top: 0;
		z-index: 5;
		will-change: transform;

		.x-f {
			display: flex;
			align-items: center;

			.avatar-container {
				padding: 6rpx 8rpx;
				height: 64rpx;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 32rpx;
				display: flex;
				align-items: center;
			}
		}

		.end {
			display: flex;
			flex-direction: column;
			align-items: flex-end;

			.viewer-preview {
				margin-top: 120rpx;
				display: flex;
				align-items: center;

				.sum {
					width: 80rpx;
					height: 52rpx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 26rpx;
					font-size: 30rpx;
					color: #ffffff;
					text-align: center;
					line-height: 52rpx;
				}
			}

			.complaint-box {
				width: 140rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: rgba(0, 0, 0, 0.3);
				padding: 16rpx 0;
				color: #fff;
				border-radius: 28rpx;
				z-index: 999;
			}
		}
	}



	.side-group {
		position: absolute;
		top: 52%;
		right: 24rpx;
		z-index: 1000;
		display: flex;
		flex-direction: column;
		align-items: center;
		will-change: transform;

		&.top2 {
			top: 65%;
		}

		&.top3 {
			top: 55%;
		}

		.side-item {
			font-weight: 500;
			font-size: 22rpx;
			color: #ffffff;
			margin-bottom: 26rpx;
			text-align: center;

			.button-reset {
				background-color: transparent !important;
				padding: 0 !important;
				line-height: 1 !important;
				margin: 0 !important;
				width: auto !important;
				font-weight: 500 !important;
				border-radius: none !important;

				&::after {
					border: none !important;
					padding: 0 !important;
					margin: 0 !important;
				}
			}

			.image {
				width: 72rpx;
				height: auto;
			}

			.txt {
				font-size: 30rpx;
				margin-top: 4rpx;
			}
		}
	}

	.chat-area-container {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 100;
		transform: translateZ(0);
		will-change: transform;
		backface-visibility: hidden;

		&.chat-area-focused {
			transform: translateY(calc(-1 * var(--keyboard-height, 0rpx))) translateZ(0);
			// z-index: 1000;
		}
	}

	.chat-content {
		height: 36vh;
		overflow: hidden;
		padding-left: 20rpx;
		transform: translateZ(0);
		will-change: height;
		display: flex;
		flex-direction: column;

		&.chat-content-preview {
			height: 20vh;
		}

		&.chat-content-focused {
			height: 64rpx;
		}
	}

	.shop-prompt {
		width: auto;
		display: inline-flex !important;
		max-width: max-content;
		padding: 6rpx 20rpx;
		background: rgba(230, 154, 34, 0.7);
		border-radius: 24rpx;
		z-index: 9;
		font-weight: 500;
		color: #ffffff;
		transition: opacity 0.3s ease;
		margin-bottom: 20rpx;
	}

	.welcome-message {
		width: 100%;
		color: white;
		border-radius: 20rpx;
		z-index: 10;
		transition: opacity 0.3s ease;
	}

	.notice-message {
		max-width: 80%;
		padding: 24rpx;
		background: linear-gradient(135deg,
				rgba(255, 220, 41, 0.8) 0%,
				rgba(218, 187, 30, 0.4) 100%);
		margin-bottom: 10rpx;
		border-radius: 20rpx;
		color: #ffffff;
	}

	.scrolly {
		width: calc(100% - 20rpx);
		-webkit-overflow-scrolling: touch;
	}

	.list {
		width: 80%;
		margin-bottom: 20rpx;
		animation: simpleFade 0.2s;

		.talk-list {
			will-change: transform;
			contain: layout style paint;
			backface-visibility: hidden;
			transform: translateZ(0);
			max-width: 100%;
			border-radius: 30rpx;
			background: rgba(0, 0, 0, 0.3);
			padding: 10rpx 30rpx;

			.talk-item {
				line-height: 1.4;
				word-break: break-all;
				word-wrap: break-word;
				overflow-wrap: break-word;

				.nickname {
					color: #ffda73;
				}

				.message {
					color: #ffffff;
				}
			}
		}
	}

	.barrage {
		background: rgba(0, 0, 0, 0.3);
		padding: 12rpx 20rpx;
		color: #fff;
		margin: 30rpx 20rpx 0 20rpx;
		border-radius: 30rpx;
		white-space: nowrap;
	}

	.prize-card {
		width: 504rpx;
		padding: 40rpx 40rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		align-items: center;
		background: linear-gradient(180deg, #f7823f 0%, #ffd4be 27%, #ffffff 100%);
		position: relative;

		.nav-img {
			width: 311rpx;
			position: absolute;
			top: -122rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		.title {
			color: #c32008;
			font-size: 34rpx;
			font-weight: 600;
			margin: 20rpx 0 40rpx;
		}

		.prize-content {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			margin: 10rpx 0;

			.txt {
				font-weight: 600;
			}
		}

		.tip {
			font-size: 28rpx;
			color: #414141;
			margin: 40rpx 0;
		}

		.button {
			width: 200rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: linear-gradient(180deg, #ff7c30 0%, #ff3a1e 100%);
			border-radius: 28rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #ffffff;
			text-align: center;
		}
	}

	.no-prize-card {
		width: 504rpx;
		padding: 40rpx 40rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		align-items: center;
		position: relative;

		.img {
			margin-top: 40rpx;
			width: 300rpx;
			height: 300rpx;
		}

		.tip {
			font-size: 36rpx;
			color: #414141;
			margin: 40rpx 0;
		}

		.button {
			width: 220rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: linear-gradient(180deg, #fdfbb8 0%, #b79243 100%);
			border-radius: 28rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #ffffff;
			text-align: center;
		}
	}

	.red-card {
		width: 550rpx;
		height: 636rpx;
		position: relative;

		.img {
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.red-content {
			position: relative;
			z-index: 5;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				font-size: 36rpx;
				color: #ff3a1e;
				margin: 180rpx 0 90rpx;
			}

			.txt {
				font-size: 28rpx;
				color: #ffecc3;
				margin: 80rpx 0 40rpx;
			}

			.button {
				width: 392rpx;
				height: 96rpx;
				line-height: 96rpx;
				background: linear-gradient(180deg, #fff4d5 0%, #ffe5b1 100%);
				border-radius: 48rpx;
				font-weight: 600;
				font-size: 36rpx;
				color: #c32008;
				text-align: center;
			}
		}
	}

	.integral-box {
		min-width: 400rpx;
		max-width: 600rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 20rpx;
		overflow: hidden;

		.top {
			width: 100%;
			position: relative;

			.title {
				width: 100%;
				font-weight: 600;
				font-size: 40rpx;
				color: #ffffff;
				text-shadow: 0px 4rpx 8rpx rgba(255, 89, 2, 0.8);
				position: absolute;
				top: 50rpx;
				text-align: center;
			}

			.photo {
				width: 100%;
			}
		}

		.item {
			padding: 20rpx;

			.title {
				font-weight: 500;
				font-size: 32rpx;
				text-align: center;
			}

			.button {
				font-size: 32rpx;
				margin-top: 20rpx;
				background: linear-gradient(270deg, #ff4702 0%, #fe6304 100%);
				color: #fff;
				text-align: center;
				padding: 18rpx 60rpx;
				border-radius: 10rpx;
				font-weight: 500;
			}
		}
	}

	.coupon-pop {
		position: fixed;
		bottom: 140rpx;
		right: 100rpx;
		z-index: 5;
		border-radius: 20rpx;
		width: 320rpx;

		.coupon-block {
			width: 100%;
			position: relative;

			.bg {
				height: 452rpx;
				width: 100%;
			}

			.nav {
				position: absolute;
				height: 120rpx;
				top: -120rpx;
				left: 0;
				width: 100%;
				z-index: 6;
			}

			.close {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				z-index: 99;
			}

			.item {
				width: 100%;
				position: absolute;
				top: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #fff;

				.title {
					font-weight: 500;
					font-size: 30rpx;
					margin: 16rpx 0 12rpx;
				}

				.price {
					font-size: 40rpx;

					.bold {
						font-size: 56rpx;
						font-weight: 600;
					}
				}

				.txt {
					font-weight: 500;
					font-size: 30rpx;
					margin: 5rpx 0;
				}

				.button {
					background: linear-gradient(270deg, #fffce1 0%, #ffeaaf 100%);
					color: #ff0004;
					text-align: center;
					padding: 16rpx 0;
					border-radius: 40rpx;
					font-weight: 500;
					font-size: 30rpx;
					width: 70%;
					margin-top: 26rpx;
				}
			}
		}
	}

	.more-block {
		border-radius: 20rpx 0 0 20rpx;
		padding: 70rpx 30rpx;
		display: flex;
		justify-content: space-between;

		.item {
			text-align: center;
		}
	}

	.integral-popup {
		min-width: 400rpx;
		max-width: 600rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 20rpx;
		overflow: hidden;

		.integral-header {
			width: 100%;
			position: relative;

			.integral-title {
				width: 100%;
				font-weight: 600;
				font-size: 40rpx;
				color: #ffffff;
				text-shadow: 0px 4rpx 8rpx rgba(255, 89, 2, 0.8);
				position: absolute;
				top: 50rpx;
				text-align: center;
			}

			.integral-background-image {
				width: 100%;
			}
		}

		.integral-content {
			padding: 20rpx;

			.integral-message {
				font-weight: 500;
				font-size: 32rpx;
				text-align: center;
			}

			.integral-confirm-button {
				font-size: 32rpx;
				margin-top: 20rpx;
				background: linear-gradient(270deg, #ff4702 0%, #fe6304 100%);
				color: #fff;
				text-align: center;
				padding: 18rpx 60rpx;
				border-radius: 10rpx;
				font-weight: 500;
			}
		}
	}

	.gift {
		padding: 32rpx 24rpx;
		color: #ffffff;

		.gift-top {
			margin-bottom: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				font-weight: 600;
				font-size: 28rpx;

				.orange {
					color: #f4a007;
				}
			}
		}

		.gift-block {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.item {
				width: 162rpx;
				height: 212rpx;
				text-align: center;
				margin-bottom: 20rpx;
				border: 1rpx solid transparent;

				.name {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.8);
					margin: 16rpx 0 12rpx;
				}

				.number {
					font-size: 18rpx;
					color: rgba(255, 255, 255, 0.4);
				}

				.button {
					font-size: 24rpx;
					width: 100%;
					height: 56rpx;
					line-height: 56rpx;
					background: linear-gradient(270deg, #ff5701 0%, #ffb501 100%);
				}
			}

			.active {
				overflow: hidden;
				background: #333333;
				border-radius: 16rpx;
				border: 1rpx solid rgba(255, 255, 255, 0.1);

				.name {
					margin: 4rpx 0 14rpx;
				}
			}
		}
	}

	.view-box {
		position: relative;
		height: 40vh;
		padding: 40rpx 0rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.scroll-content {
			flex: 1;
			margin-top: 50rpx;
			overflow-y: auto;
			padding: 0 40rpx;
		}

		.bottom {
			padding: 20rpx 40rpx;
			position: absolute;
			bottom: 0;
			width: 100%;
			box-shadow: 0rpx -4rpx 10rpx 0rpx rgba(195, 195, 195, 0.3);
			background: #fff;
		}
	}

	@keyframes simpleFade {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.skeleton-item {
		display: flex;
		padding: 20rpx;
		background: #fff;
		margin-bottom: 16rpx;
		border-radius: 16rpx;
	}

	.skeleton-img {
		width: 200rpx;
		height: 200rpx;
		background: #f0f0f0;
		border-radius: 8rpx;
		margin-right: 24rpx;
		animation: pulse 1.5s ease-in-out infinite;
	}

	.skeleton-content {
		flex: 1;
	}

	.skeleton-line {
		height: 20rpx;
		background: #f0f0f0;
		margin-bottom: 16rpx;
		border-radius: 4rpx;
		animation: pulse 1.5s ease-in-out infinite;

		&.short {
			width: 60%;
		}

		&.medium {
			width: 80%;
		}

		&.long {
			width: 95%;
		}
	}

	@keyframes pulse {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0.5;
		}

		100% {
			opacity: 1;
		}
	}

	.text-white {
		color: #ffffff;
	}

	.text-xs {
		font-size: 18rpx;
	}

	.text-sm {
		font-size: 24rpx;
	}

	.w52,
	.w72 {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.w52.h52.mr4 {
		border-radius: 26rpx;
	}

	.x-f {
		display: flex;
		align-items: center;
	}

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

	.justify-start {
		display: flex;
		justify-content: flex-start;
	}

	.flex-1 {
		flex: 1;
	}

	.column {
		flex-direction: column;
	}

	.colorf {
		color: #ffffff;
	}

	.orange {
		color: #f4a007;
	}

	::v-deep .u-icon--right {
		justify-content: flex-end !important;
	}

	/* 微信昵称授权弹窗样式 */
	.userlogo {
		padding: 36rpx 40rpx;
		color: #000000;

		.mt42 {
			margin-top: 42rpx;
		}

		.boxweixin {
			width: 44rpx;
			height: 44rpx;
			border-radius: 50%;
			text-align: center;
			line-height: 34rpx;
			color: #0a0;
		}

		.button-container {
			position: relative;
			margin: auto;

			.hidden-input {
				width: calc(100vw - 80rpx);
				text-align: center;
				height: 104rpx;
				background: #07C160;
				padding: 30rpx 0;
				box-sizing: border-box;
				border-radius: 12rpx;
				font-size: 32rpx !important;
				color: #FFFFFF !important;
				/* 输入文字大小 */
			}

			/* 针对 placeholder 的样式 */
			.hidden-input::placeholder {
				font-size: 44rpx !important;
				color: #FFFFFF !important;
			}

			/* 兼容微信小程序的 placeholder 样式 */
			.hidden-input .placeholder {
				font-size: 44rpx !important;
				color: #FFFFFF !important;
			}
		}

		.submitname {
			height: 104rpx;
			line-height: 104rpx;
			background: #F2F2F2;
			border-radius: 12rpx;
			font-size: 32rpx;
			color: #07C160;
			margin-top: 32rpx;
			text-align: center;
		}
	}
</style>