zhibo/pages_course/living.vue

<template>
	<view class="swiper-wrapper">
		<view class="container">
			<view class="content">
				<view style="position: fixed;top: 0;z-index: 5;" class="content-top">
					<view class="x-f">
						<image v-if="!scene" @click="goBack" class="w60 h64 mr26" 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 v-if="Array.isArray(filteredViewers)" class=" align-center" @click="toggleViewerList"
						style="margin-top: 120rpx;">
						<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">{{liveUserTotal||0}}</view>
					</view>
				</view>
				<!-- 右边的side -->
				<view class="side-group">
					<view class="side-item" @click="onLike">
						<LikeButton :initialCount="100" :heartsPerClick="5" @like="onLike" />
						<view>{{liveViewData && liveViewData.like||0}}</view>
					</view>

					<view class="side-item">
						<button open-type="share" class="button">
							<image class="image" src="/static/images/weixin.png" mode="widthFix" />
						</button>
						<view>分享</view>
					</view>
				</view>

				<view class="activity-box">
					<view class="item-box" @click="onRed()" v-if="isShowRed">
						<view class="x-f">
							<view class="tip">领红包</view>
							<view class="item">
								<image class="w70 img" src="/static/images/redbag.png" mode="widthFix" />
							</view>
						</view>
					</view>
					<view class="item-box" @click="onLottery()" v-if="isShowLottery&&countdown">
						<view class="x-f">
							<view class="tip">抽奖</view>
							<view class="item">
								<image class="w60" src="/static/images/lottery.png" mode="widthFix" />
							</view>
						</view>
					</view>

					<!-- v-if="isShowCoupon" -->
					<!-- <view class="item-box" @click="isShowCoupon=true">
						<view class="x-f">
							<view class="tip">优惠券</view>
							<view class="item">
								<image class="w60" src="/static/images/coupon.png" mode="widthFix" />
							</view>
						</view>
					</view> -->
				</view>
				<view class="shop-prompt f30 x-f"
					v-if="showPurchasePrompt&&orderUser&&orderUser.count&&liveItem.status==2">
					<image class="w32 h32 mr8" src="/static/images/shopping.png" />
					<text>{{ orderUser.count || 0 }}人正在去购买</text>
				</view>
				<view class="videolist" v-if="liveItem.status==2">
					<view class="video" :class="liveItem.showType == 1 ? 'video_row' : ''">
						<!-- 视频组件 -->
						<live-player v-if="liveItem.livingUrl && liveItem.liveType == 1" :id="'myLivePlayer_' + liveId"
							:src="liveItem.livingUrl" autoplay mode="live" object-fit="contain" :muted="false"
							orientation="vertical" :enable-play-gesture="true" min-cache="1" max-cache="3"
							@statechange="onLiveStateChange($event, liveItem)" @error="onLiveError($event, liveItem)"
							class="item"></live-player>
						<!-- 录播 -->
						<video v-if="liveItem.videoUrl&&liveItem.liveType==2" :id="`myVideo_${liveId}`" class="item"
							:src="liveItem.videoUrl" :controls="false" object-fit="contain" :custom-cache="false"
							:enable-progress-gesture="false" vslide-gesture-in-fullscreen="true"
							:show-center-play-btn="false" :http-cache="false" loop @error="videoError"
							@timeupdate="onVideoTimeUpdate" @loadeddata="onVideoLoaded"
							@loadedmetadata="onVideoMetaLoaded" @pause="onVideoPause" @play="onVideoPlay">
						</video>

						<!-- 直播回放 -->
						<video v-if="liveItem.videoUrl&&liveItem.liveType==3" :id="`myVideo_${liveId}`" class="item"
							:src="liveItem.videoUrl" :controls="true" object-fit="contain" :custom-cache="false"
							:enable-progress-gesture="liveItem.isSpeedAllowed" vslide-gesture-in-fullscreen="true"
							:show-center-play-btn="true" :http-cache="false" loop @error="videoError"
							@timeupdate="onVideoTimeUpdate" @loadeddata="onVideoLoaded"
							@loadedmetadata="onVideoMetaLoaded" @pause="onVideoPause" @play="onVideoPlay"
							@seek="onVideoSeek">
						</video>
						<view v-if="liveItem.videoUrl&&liveItem.liveType==2" class="time">{{liveItem.totalTime}}
						</view>
						<view v-if="liveItem.videoUrl&&liveItem.liveType==3" class="lable">直播回放</view>
					</view>
				</view>
				<view class="trailer-box" v-if="liveItem.status==1">
					<video v-if="liveItem.previewUrl" :id="`myVideo_${liveId}`" class="item" :src="liveItem.previewUrl"
						:autoplay="true" :controls="false" object-fit="contain" :custom-cache="false"
						:enable-progress-gesture="false" vslide-gesture-in-fullscreen="false"
						:show-center-play-btn="false" :http-cache="false" loop @error="videoError"
						@loadeddata="onVideoLoaded" @loadedmetadata="onVideoMetaLoaded" @pause="onVideoPause"
						@play="onVideoPlay" :disable-progress="true">
					</video>

					<image v-if="liveItem.status==1&&!liveItem.previewUrl" class="img" src="/static/images/no_live.png">
					</image>
					<view class="countdown-item mt30 mb30" v-if="liveItem.status==1&&liveCountdown">
						开播倒计时
						<view class="x-f">
							<view class="white">
								{{liveCountdown.hours||"00"}}
							</view>
							<view class="white">
								{{ liveCountdown.minutes||"00"}}
							</view>
							<view class="white">
								{{ liveCountdown.seconds||"00" }}
							</view>
						</view>
					</view>
					<view class="name"> {{liveItem.liveName}}</view>
					<view class="title" v-if="liveCountdown">暂未开播</view>
					<view class="button" v-if="!isAgreement" @click="handleAgreement">预约直播</view>
					<view class="button ash" v-if="isAgreement">已预约</view>
					<view class="title" v-if="!liveCountdown">主播还在来的路上</view>
				</view>
				<view class="trailer-box" v-if="!liveItem">
					<image class="img" src="/static/images/no_live.png">
					</image>
					<view class="title">暂无直播</view>
				</view>

				<!-- 底部聊天区域 -->
				<view :style="{position: 'fixed',width: '100%',bottom: chatHeight + 'rpx',zIndex:999}">
					<view class="mt20" :style="{ height: chatHeight ? '64rpx' : '30vh' }">
						<scroll-view v-if="Array.isArray(talklist)" enable-flex scroll-y="true"
							class=" pl20 scrolly flex-1 column" style="width: calc(100% - 20rpx); height: 100%;"
							:scroll-into-view="scrollIntoView">

							<view class="list justify-start" v-for="(item,talkIndex) in (talklist||[])" :key="talkIndex"
								:id="`list_${talkIndex}`" v-show="item.cmd!='red'&&item.cmd!='out'&&item.cmd!='entry'">
								<view class="talk-list  justify-start">
									<view class="fs30" style="max-width: 100%;">
										<text style="color: #FFDA73;">{{item.nickName||"未命名"}}：</text>
										<text class='colorf'>{{item.msg}}</text>
									</view>
								</view>
							</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>
						</scroll-view>
					</view>

					<!-- 底部输入框和操作按钮 -->
					<view :class="{'justify-between': true,'p24': true,'pb40': isFocus}"
						:style="{background: isFocus ? '#fff' : 'transparent',}">
						<view class="x-f"
							:style="{background: isFocus ? '#ededed' : '#393939' ,padding: '10rpx 14rpx 10rpx 32rpx',boxSizing: 'border-box',borderRadius: '36rpx',width: isFocus ? '100%' : '580rpx'}">
							<u-input :placeholder="placeholderText" border="none" customStyle='font-size:24rpx;'
								v-model="value" shape='circle' :color="isFocus ? '#000000' : '#ffffff'"
								:placeholderStyle="{color:isFocus ? '#888888' : '#e7e7e7' }" :adjust-position="false"
								:scroll-with-animation="false" class="ml20" @focus="inputFocus" @blur="inputBlur">
							</u-input>
							<view :class="isFocus ? 'send-input' : 'send'" @click="sendMsg()">发送</view>
						</view>
						<view class="justify-between mr15 align-center" v-if="!isFocus">
							<view class="icon-bg ml20" @click="openCart()">
								<image src="/static/images/shopping.png" class="w58 h58" />
							</view>
						</view>
					</view>
				</view>

			</view>

			<view class="goods" v-if="isShowGoods">
				<view class="top">
					<view class="left">
						<image class="w30 h30 mr8" src="/static/images/signal.png" />讲解中
					</view>
					<image @click="isShowGoods=false" class="w40 h40 " src="/static/images/del2.png" />
				</view>

				<image class="photo" :src="goodsCard.imgUrl" />
				<view class="item">
					<view class="price"><text class="red">￥{{goodsCard.price}} </text><text
							class="del">￥{{goodsCard.otPrice}}</text></view>
					<view class="title oneline-hide">{{goodsCard.productName}}</view>
					<view class="button" @click="goShop(goodsCard.productId,goodsCard.goodsId)">
						立即抢购
					</view>
				</view>
			</view>

			<u-popup :show="isShowLotteryPop&&countdown" round='40rpx'>
				<view class="prize-box" style="border-radius: 40rpx;height: fit-content;">
					<image class="nav-img " src="/static/images/red_head.png" mode="widthFix" />
					<image class="bg-img " src="/static/images/red_bg.png" />
					<view class="prize-content">
						<view class=" mr20">
							<u-icon class="x-end" name="close" color="#fff" size="20"
								@click="isShowLotteryPop=false"></u-icon>
						</view>
						<view class="column align-center ">
							<image class="w446 h80" src="/static/images/red_title.png" />
							<view class="fs24 colorf x-f mt30 mb30">
								开奖倒计时
								<view class="x-f">
									<view class="white-item">
										{{countdown.hours||"00"}}
									</view>
									<view class="white-item">
										{{ countdown.minutes||"00" }}
									</view>
									<view class="white-item">
										{{ countdown.seconds||"00" }}
									</view>
								</view>
							</view>
							<view class="item-group">
								<ThreeItemSwiper :products="lotteryProducts"></ThreeItemSwiper>
							</view>
							<view class="point-group" v-for="(item,index) in lotteryProducts" :key="index">
							</view>
							<view class="colorf fs28">
								观看直播参与抽奖
							</view>
							<view class="button" @click="onClaim">参与抽奖</view>
						</view>
					</view>
				</view>
			</u-popup>
			<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="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" 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">{{prizeInfo.length}}位幸运观众</view>
					<view class="prize-content" v-for="(item,index) in (prizeInfo||[])" :key="index">
						<view>{{item.userName}}</view>
						<view>{{item.userId}}</view>
						<view class="txt">{{item.prizeLevel}}等奖</view>
					</view>
					<view class="tip">请截图联系客服领取奖品</view>
					<view class="button" @click="isShowPrize=false">确认</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="isShowPrize=false">确认</view>
				</view>
			</u-popup>



			<!-- 观众列表弹窗 -->
			<u-popup :show="showadd" @close="close" @open="openViews" round='20rpx' bgColor='#ffffff' zIndex='10077'>
				<view class="view-box">
					<view class="fs32" style="text-align: center;">在线观众</view>
					<scroll-view v-if="Array.isArray(liveViewers)" scroll-y class="scroll-content"
						:style="{height: scrollHeight + 'px'}" @scrolltolower="handleScrollToLower">
						<view class="fs28 x-f mb20 mt20" v-for="(item,index) in (liveViewers||[])" :key="index">
							<view
								:style="{color: index === 0 ? '#FF3B30' : index === 1 ? '#FF9500' : index === 2 ? '#FFCC00' :  '#8E8E93',fontWeight: index < 3 ? 'bold' : 'normal',width: '50rpx'}"
								class="mr10">{{index+1}}</view>
							<u-avatar v-if="item.avatar" :src="item.avatar" :size="36"></u-avatar>
							<view v-else class="w72 h72"
								:style="{backgroundColor: getUserRandomColor(item.userId), borderRadius:'50%'}">
								<text class="text-white text-xs">{{getNicknameInitial(item.nickName)}}</text>
							</view>
							<text class="ml16 f30">{{item.nickName||"未命名"}}</text>
						</view>
					</scroll-view>
				</view>
			</u-popup>

			<!-- 商品弹窗 -->
			<u-popup :show="shopping" @close="closeShop" round='20rpx' bgColor='#f3f5f9' zIndex='10075'>
				<view class="shoppop">
					<view class="shoppop-top">
						<view class="search-input x-f">
							<image class="w24 mr16" src="/static/images/search.png" mode="widthFix" />
							<input placeholder="请搜索商品" v-model="inputInfo" @input="handleSearchInput" />
						</view>
						<view class=" search-top" @click="goOrderList()">
							<image class="w48 h48" src="/static/images/order.png" />
							<view>订单</view>
						</view>
					</view>

					<scroll-view enable-flex scroll-y class="shop-list" :style="{ height: boxHeight + 'px' }">
						<view class="list-item" v-for="(item,index) in products" :key="index">
							<view class="goods-img">
								<image class="img" :src="item.imgUrl" mode="widthFix" />
								<view class="goods-label">{{index+1}}</view>
							</view>
							<view class="goods-right">
								<view class="goods-title">{{item.productName}}</view>
								<view class="goods-people">{{item.sales}} 人已购</view>
								<view class="goods-shop">
									<text class="nummber"><text style="font-size: 20rpx;font-weight: 600;">￥</text><text
											style="font-size: 36rpx;font-weight: bold;">{{Math.trunc(item.price)}}</text>.{{getPureDecimal(item.price)?getPureDecimal(item.price):'00'}}</text>
									<view class="btn-group x-f">
										<view class="collect-btn">
											<image v-if="item.isFavorite" @click="onGoodsCollect(item)" class="w36 h36"
												style="vertical-align: middle;"
												src="/static/images/collect_select.png" />
											<image v-else @click="onGoodsCollect(item)" class="w36 h36"
												style="vertical-align: middle;" src="/static/images/collect.png" />
										</view>
										<view v-if="item.status==1" class="shop-btn"
											@click="goShop(item.productId,item.goodsId)">去购买 </view>
										<view v-else-if="item.status==0" class="shop-btn">
											已下架</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</u-popup>

			<!-- 优惠券弹窗 -->
			<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" 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>


			<!-- <u-popup :show="true" @close="closeShop" round='20rpx' bgColor='#f3f5f9' zIndex='10075'>
				<view class="coupon">
					<view class="coupon-top">
						<view class=" search-top">
							<image class="w48 h48" src="/static/images/order.png" />
							<view>我的券码</view>
						</view>
					</view>

					<scroll-view enable-flex scroll-y :style="{ height: boxHeight + 'px' }">
						<div class="coupon-list" v-if="couponsList.length > 0">
							<div class="item acea-row row-center-wrapper" v-for="(item, index) in couponsList"
								:key="index">
								<div class="money">
									<image v-if="item.status==0" class="img" src="/static/images/coupon1.png"
										mode="widthFix"></image>
									<image v-if="item.status!=0" class="img" src="/static/images/coupon2.png"
										mode="widthFix"></image>
									<div style="z-index: 999;">
										￥<span class="num">{{ item.couponPrice }}</span>
									</div>
									<div class="pic-num">满{{ item.useMinPrice }}元可用</div>
								</div>
								<div class="text">
									<div class="condition line1">
										{{ item.couponTitle }}
									</div>
									<div class="data acea-row row-between-wrapper">
										<div>{{ item.limitTime }}到期</div>
										<div class="bnt gray" v-if="item.status==1">已使用</div>
										<div class="bnt gray" v-if="item.status==-1">已过期</div>
										<div class="bnt bg-color-red" v-if="item.status==0">可使用</div>
									</div>
								</div>
							</div>
						</div>
					</scroll-view>
					<view v-if="couponsList.length == 0" class="no-data-box" @click="getMyCouponList()">
						<image src="/static/images/no_data.png" mode="aspectFit"></image>
						<view class="empty-title">暂无数据</view>
					</view>
				</view>
			</u-popup> -->
			<!-- <u-popup :show="true" @close="closeShop" round='20rpx' bgColor='#f3f5f9' zIndex='10075'>
				<view class="coupon">
					<scroll-view enable-flex scroll-y :style="{ height: boxHeight + 'px' }">
						<div class="coupon-list" v-if="couponsList.length > 0">
							<div class="item acea-row row-center-wrapper" v-for="(item, index) in couponsList"
								:key="index">
								<div class="money">
									<image v-if="item.status==0" class="img" src="/static/images/coupon1.png"
										mode="widthFix"></image>
									<image v-if="item.status!=0" class="img" src="/static/images/coupon2.png"
										mode="widthFix"></image>
									<div style="z-index: 999;">
										￥<span class="num">{{ item.couponPrice }}</span>
									</div>
									<div class="pic-num">满{{ item.useMinPrice }}元可用</div>
								</div>
								<div class="text">
									<div class="condition line1">
										{{ item.couponTitle }}
									</div>
									<div class="data acea-row row-between-wrapper">
										<div>{{ item.limitTime }}到期</div>
										<div class="bnt gray" v-if="item.status==1">已使用</div>
										<div class="bnt gray" v-if="item.status==-1">已过期</div>
										<div class="bnt bg-color-red" v-if="item.status==0">可使用</div>
									</div>
								</div>
							</div>
						</div>
					</scroll-view>
					<view v-if="couponsList.length == 0" class="no-data-box" @click="getMyCouponList()">
						<image src="/static/images/no_data.png" mode="aspectFit"></image>
						<view class="empty-title">暂无数据</view>
					</view>
				</view>
			</u-popup> -->
		</view>

	</view>
</template>
<script>
	import LikeButton from '@/pages_course/components/like.vue'
	import ThreeItemSwiper from '@/pages_course/components/ThreeItemSwiper.vue'
	import CryptoJS from 'crypto-js'
	import {
		coupon, //领取优惠券
		liveLottery, // 抽奖查询
		claim, //抽奖
		liveRed, // 点击领红包
		liveDataLike, // 点赞
		collectStore, // 店铺收藏/取消收藏
		collectGoods, // 商品收藏/取消收藏
		watchUserList, //获取直播间用户(展示在线用户)
		liveMsg, //获取最近聊天记录
		// 小黄车
		liveStore, //店铺展示,
		liveOrderUser, //正在购买
		getLiveInfo, //获取直播间信息接口
		getLiveViewData, //直播间点赞、关注、在线人数数据
		currentActivities, //红包 卡片 抽奖
		getlive,
		subNotifyLive
	} from '@/api/living.js'
	import {
		getUserInfo
	} from '@/api/user'
	import {
		nextTick
	} from "vue"

	// var wsUrl = "wss://live.test.ylrztop.com/ws/live-api/app/webSocket"; //余红奇
	// var pingpangTimes = null;
	// var initTimes = null;
	var isSocketOpen = false;
	var socket = null;

	export default {
		components: {
			ThreeItemSwiper,
			LikeButton
		},
		data() {
			return {
				isOnload: false,
				isConnecting: false, // 是否正在连接中
				previousToken: null,
				hasInitialized: false,


				couponsList: [{
					status: 0,
					couponPrice: 59,
					useMinPrice: 99,
					couponTitle: '包装袋',
					limitTime: 2
				}],
				liveViewersData: [],
				liveUserCalled: false, //调用过watchUserList没
				liveViewDataTimer: null,
				userRandomColors: {}, // 缓存用户ID -> 随机色的映射
				randomColor: '#8978e2',
				heartBeatRetryCount: 0, // 心跳发送重试次数（避免一次失败就重连）
				maxHeartBeatRetries: 2, // 心跳最大重试次数
				pingTimeout: 20000, // 心跳超时时间从10s延长到20s（应对网络波动）
				shownEntryUsers: new Set(), // 存储已显示过「进入提示」的用户ID
				isPageUnloading: false, // 标记页面是否正在卸载（区分主动离开vs重连out）



				templateId: 'fxYJu817lxHNKXl0hJypb54UnGRCNAoI72Qf-xjKCik',
				isAgreement: false,
				socket: null, // WebSocket 实例
				isSocketOpen: false, // 连接是否已打开
				heartBeatTimer: null, // 心跳定时器
				heartBeatInterval: 15000, // 心跳发送间隔（15秒）
				reconnectTimer: null, // 重连定时器
				reconnectCount: 0, // 当前重连次数
				maxReconnectAttempts: 3, // 最大重连次数
				isManualClose: false, // 是否手动关闭（用于区分主动关闭和异常断开）
				// pingTimeout: 10000, // 心跳响应超时时间（10秒）
				pingTimeoutTimer: null, // 心跳超时定时器



				// wsNewUrl: 'ws://192.168.10.126:7014/app/webSocket',
				// wsNewUrl: 'wss://api.fhhx.runtzh.com/app/webSocket',
				wsNewUrl: 'wss://api.fhhx.runtzh.com/ws/app/webSocket',
				// wsNewUrl: 'ws://192.168.10.166:7114/ws/app/webSocket',
				// wsNewUrl:'ws://192.168.10.166:7014/app/webSocket',
				qrFrom: null,
				scene: '',

				liveCountdown: {},
				countdown: {},

				liveViewData: {},

				chatHeight: 0,

				keyboardHeight: 0,
				videoCurrentTime: 0, // 当前视频播放时间
				isVideoPlaying: false, // 视频是否正在播放
				videoProgressKey: '', // 存储进度的key
				inAndOut: {},

				isShowPrize: false,
				isShowCoupon: false,
				prizeInfo: [],
				timeData: {},
				countDownKey: 0,
				lotteryProducts: [],
				lotteryList: [],
				talklist: [],
				isShowLotteryPop: false,
				liveItem: {},
				isSending: false,

				welcomeTimer: null,
				redTimer: null,
				liveStartTimer: null,
				lotteryTimer: null,

				isShowLottery: false,
				isShowRedCard: false,
				redCard: null, //点击红包出现弹窗
				integral: {},
				lotteryInfo: {},
				goodsCard: {},
				couponInfo: {},
				redInfo: {},
				storeId: null,
				isFocus: false,
				shopping: false,

				inputInfo: '',
				showWelcomeMessage: false,
				scrollIntoView: '',

				isShowGoods: false,
				isShowRed: false,

				lastClickTime: 0,
				clickDelay: 300, // 300ms内只响应一次点击

				videoRetryCounts: {}, // 记录每个直播间的视频重试次数，格式: { liveId: 次数 }

				placeholderText: '说点什么...',

				liveUserTotal: 0,
				viewPageSize: 10, // 每页数量
				viewPageNum: 1, // 当前页码
				viewLoading: false, // 是否正在加载
				scrollHeight: 0,
				scrollTimer: null, // 滚动防抖定时器




				showRed: true,
				searchTimer: null,
				isCollect: false,
				showPurchasePrompt: false,
				purchasePromptTimer: null,
				prevOrderCount: 0, // 用于记录上一次的购买人数
				videoUrl: null,
				showType: 1, //横屏1 竖屏2
				boxHeight: 300, //小黄车高度
				liveViewers: [], //观众
				likeName: 0,
				hlsPlayer: null, // HLS播放器实例,
				livingUrl: "",
				products: [],
				store: {},
				orderUser: {}, //正在购买
				userType: 0,
				timestamp: '',
				liveId: null,
				userinfo: '', //用户信息
				// path: 'http://192.168.10.166/dev-api', //余红奇
				// path: 'http://v56c9b8e.natappfree.cc', //余红奇
				// path: 'live.test.ylrztop.com/prod-api', //余红奇
				value: '',
				talkdisabled: false, //输入框是否禁用
				autoplay: false, //视频自动播放
				showadd: false,
				videoContext: '',
				livedata: {}, //直播间点赞、关注、在线人数数据
				userData: {},
			};
		},


		onLoad(options) {
			if (options.liveId) {
				this.liveId = options.liveId;
			}
			this.getUserInfo()
			this.previousToken = uni.getStorageSync('AppToken')
			this.initTime();
			this.userinfo = uni.getStorageSync("userInfo")
			this.userData = uni.getStorageSync("userData")



			console.log("全部参数", options)
			//获取键盘高度
			this.keyboardListener = uni.onKeyboardHeightChange(res => {
				console.log('键盘高度', res.height);
				this.keyboardHeight = res.height * 2;
			});

			// 扫码传来的参数
			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}`;
			}


			// 初始化直播间列表
			this.$nextTick(() => {
				if (this.liveId) {
					this.getliving(this.liveId);
					this.isOnload = true
				} else {
					console.error("直播间 ID（liveId）未获取到");
				}
			})
			// if (!this.previousToken) {
			// 	console.log("未检测到AppToken，跳转到登录页");
			// 	// let backUrl = '/pages_course/living?liveId=' + (this.liveId || '');
			// 	uni.navigateTo({
			// 		url: '/pages/auth/login?&isLive=ture'
			// 	});
			// 	return;
			// }

		},
		async onShow() {
			if (this.liveId && !this.isOnload) {
				await this.getLiveMsg(this.liveItem);
			}
			if (!this.userData) {
				await this.getUserInfo()
			}
			const currentToken = await uni.getStorageSync('AppToken')
			console.log("token在这里", currentToken)
			const isLiveLogin = uni.getStorageSync('isLiveLogin')
			this.share = uni.getStorageSync('share')
			this.scene = uni.getStorageSync('scene')
			console.log("onshow分享", this.share)
			console.log("onshow扫码", this.scene)
			if (this.share && this.share.length > 0) {
				this.liveId = this.share.liveId
				this.qrFrom = `&companyId=${this.share.companyId}&companyUserId=${this.share.companyUserId}`;
			}
			if (this.scene) {
				console.log("有扫码")
				const decodedScene = decodeURIComponent(this.scene);
				console.log("有扫码decodedScene", decodedScene)
				const params = {};
				decodedScene.split('&').forEach(item => {
					const [key, value] = item.split('=');
					params[key] = value;
					console.log("扫码参数", params)
					this.liveId = params.a;
				})
				if (params.b && params.c) {
					this.qrFrom = `&companyId=${params.b}&companyUserId=${params.c}`;
				}
			}
			if (isLiveLogin) {
				console.log("登录了")
				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 = JSON.parse(uni.getStorageSync("userInfo"))
			// this.userData =await uni.getStorageSync("userData")

			this.isAgreement = uni.getStorageSync('isAgreement')
			this.previousToken = currentToken
			this.randomColor = this.getRandomHexColor()
			this.$nextTick(() => {
				this.setVideoProgress();
			});
			console.log("预约liveiD", this.liveId)
		},

		//分享给好友
		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);
				}
			};
		},
		computed: {
			filteredViewers() {
				// 1. 强制兜底：若 liveViewers 不是数组（如 null/undefined），直接返回空数组
				const safeLiveViewers = Array.isArray(this.liveViewersData) ? this.liveViewersData : [];
				// 2. 截取前3项（空数组 slice 不会报错）
				return safeLiveViewers.slice(0, 3);
			},
			isCurrentUserWon() {
				// 兜底条件：确保prizeInfo是数组、当前用户ID存在
				if (!Array.isArray(this.prizeInfo) || !this.userData?.userId) {
					return false;
				}
				// 匹配逻辑：检查prizeInfo中是否有userId与当前用户一致的项
				return this.prizeInfo.some(item => {
					// 兼容item.userId可能是数字/字符串的情况，统一转为字符串比较
					return String(item.userId) === String(this.userData.userId);
				});
			}
		},
		onHide() {

		},

		onUnload() {
			this.suspendPageActivity()
			this.liveUserCalled = false
			// if (this.liveItem) {
			// 	this.pauseVideo();
			// 	this.clearTimeTimer();
			// }


			this.loadUserColorsFromStorage();
			if (this.liveViewDataTimer) {
				clearInterval(this.liveViewDataTimer);
				this.liveViewDataTimer = null;
			}
			// console.log('页面卸载，清理资源');
			this.isPageUnloading = true; // 标记为主动离开

			// 1. 先关闭WebSocket
			this.closeWebSocket(true);

			// 2. 清除所有定时器
			this.clearAllTimers();

			// 3. 暂停视频
			const videoId = `myVideo_${this.liveId}`;
			const videoContext = uni.createVideoContext(videoId, this);
			if (videoContext) {
				videoContext.pause();
			}

			// 4. 移除事件监听

			// 5. 清除特定定时器
			if (this.redTimer) {
				clearInterval(this.redTimer);
				this.redTimer = null;
			}
			if (this.liveStartTimer) {
				clearInterval(this.liveStartTimer);
				this.liveStartTimer = null;
			}
			if (this.lotteryTimer) {
				clearInterval(this.lotteryTimer);
				this.lotteryTimer = null;
			}
			if (this.welcomeTimer) {
				clearInterval(this.welcomeTimer);
				this.welcomeTimer = null;
			}
		},

		mounted() {
			this.getCurrentActivities();
			this.getliveOrder()

		},
		watch: {
			// 新增：监听liveItem.status的变化
			'liveItem.status': {
				// status变化时执行的逻辑
				handler(newStatus, oldStatus) {
					// 1. 过滤无效场景：避免初始值/空值触发无效请求
					if (newStatus === undefined || oldStatus === undefined) return;
					// 2. 过滤相同状态：仅当状态真的变化时才请求（避免重复调用）
					if (newStatus === oldStatus) return;
					// 3. 确保liveId存在（getliving依赖liveId）
					if (!this.liveId) {
						console.warn("liveId不存在，无法触发getliving请求");
						return;
					}

					// 4. 状态变化时，调用getliving更新直播间数据
					console.log(`liveItem.status从${oldStatus}变为${newStatus}，触发getliving请求`);
					this.getliving(this.liveId);
				},
				deep: true,
				// immediate: true（若需页面初始化时就触发一次，根据需求决定是否开启）
			},

			// 监听orderUser.count的变化
			'orderUser.count': {
				handler(newVal, oldVal) {
					if (newVal !== this.prevOrderCount) {
						this.prevOrderCount = newVal;
						this.showPurchaseMessage();
					}
				},
				immediate: true
			}
		},
		methods: {
			// 恢复页面活动
			async resumePageActivity() {
				console.log("恢复了")
				if (this.liveItem) {
					this.playVideo()
					this.startTimeTimer(this.liveItem)

				}
				if (!this.isSocketAvailable()) {
					this.initSocket()
				}

			},

			// 暂停页面活动
			suspendPageActivity() {
				this.stopHeartBeat()
				this.saveVideoProgress()

				if (this.liveItem) {
					this.pauseVideo()
					this.clearTimeTimer()
				}
			},
			// 获取用户专属随机色（缓存机制：同一用户始终用同一颜色）
			getUserRandomColor(userId) {
				if (!userId) {
					return '#8978e2'; // 默认颜色
				}
				//如果缓存中已有该用户的颜色，直接返回
				if (this.userRandomColors[userId]) {
					return this.userRandomColors[userId];
				}
				//为新用户生成固定颜色（基于用户ID生成，不是完全随机）
				const color = this.generateStableColor(userId);
				this.userRandomColors[userId] = color;
				// 存储到本地缓存，确保页面刷新后颜色不变
				this.saveUserColorsToStorage();

				return color;
			}, // 基于用户ID生成稳定颜色（不是完全随机）
			generateStableColor(userId) {
				// 将用户ID转换为数字种子
				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();
			},
			// 引入前面的随机颜色方法
			getRandomHexColor() {
				const getValidValue = () => Math.floor(Math.random() * 130) + 100;
				const red = getValidValue().toString(16).padStart(2, '0');
				const green = getValidValue().toString(16).padStart(2, '0');
				const blue = getValidValue().toString(16).padStart(2, '0');
				return `#${red}${green}${blue}`;
			},
			async getUserInfo() {
				await getUserInfo().then(
					res => {
						if (res.code == 200) {
							console.log("用户信息>>", res)
							this.userData = res.user;

						} else {
							uni.showToast({
								icon: 'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			}, // 检查WebSocket连接状态
			getSocketState() {
				if (!this.socket) return 'CLOSED';

				const states = {
					0: 'CONNECTING',
					1: 'OPEN',
					2: 'CLOSING',
					3: 'CLOSED'
				};
				return states[this.socket.readyState] || 'UNKNOWN';
			},

			// 在控制台输出连接状态（调试用）
			logSocketState() {
				console.log('WebSocket状态:', {
					socket: !!this.socket,
					isSocketOpen: this.isSocketOpen,
					readyState: this.getSocketState(),
					reconnectCount: this.reconnectCount
				});
			},
			handleAgreement() {
				const templateId = this.templateId; // 先保存到局部变量
				uni.requestSubscribeMessage({
					tmplIds: [templateId],
					success: (res) => { // 使用箭头函数保持this指向
						console.log("订阅结果", res);
						console.log("模板订阅状态", res[templateId]);

						if (res[templateId] === "accept") {

							uni.showToast({
								title: '订阅成功，开播将提醒您',
								icon: 'success'
							});

							this.callSendMessageApi()
						} else if (res[templateId] === 'reject') {
							uni.showToast({
								title: '您已拒绝订阅，将无法收到提醒',
								icon: 'none'
							});
						} else if (res[templateId] === 'ban') {
							uni.showToast({
								title: '您已关闭所有订阅权限，请在设置中开启',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('订阅消息失败', err);
						uni.showToast({
							title: '订阅失败，请重试',
							icon: 'none'
						});
					}
				});
			},
			// 调用后端发送订阅消息的接口
			async callSendMessageApi() {
				if (!this.userData.userId) return;
				console.log("订阅在这里", this.userData.userId)
				const templateData = {
					taskName: this.liveId,
					userId: this.userData.userId,
					templateId: this.templateId, // 你的模板ID
					data: {
						thing6: this.liveItem.liveName,
						date7: this.liveItem.startTime,
					}
				};
				// 调用后端接口（后端负责调用微信订阅消息发送接口）
				subNotifyLive(templateData).then(res => {
						if (res.code == 200) {
							this.isAgreement = true;
							uni.setStorageSync('isAgreement', true);
							console.log("订阅消息", res)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					rej => {}
				);
			},


			sendHeartBeat() {
				if (!this.isSocketAvailable()) return;
				try {
					const heartBeatMsg = JSON.stringify({
						cmd: "heartbeat",
						msg: "ping",
						userId: this.userData.userId || '',
						liveId: this.liveId
					});

					this.socket.send({
						data: heartBeatMsg,
						success: () => {
							this.heartBeatRetryCount = 0; // 成功后重置重试次数
							this.startPingTimeout(); // 启动超时检测
						},
						fail: (err) => {
							console.error("心跳包发送失败:", err);
							this.heartBeatRetryCount++;

							// 心跳失败先重试，重试次数用完再重连
							if (this.heartBeatRetryCount < this.maxHeartBeatRetries) {
								setTimeout(() => this.sendHeartBeat(), 2000); // 2秒后重试
							} else {
								this.heartBeatRetryCount = 0;
								this.handleReconnect(); // 重试用完才重连
							}
						}
					});
				} catch (err) {
					console.error("心跳发送异常:", err);
					this.heartBeatRetryCount++;
					if (this.heartBeatRetryCount < this.maxHeartBeatRetries) {
						setTimeout(() => this.sendHeartBeat(), 2000);
					} else {
						this.heartBeatRetryCount = 0;
						this.handleReconnect();
					}
				}
			}, // 启动心跳超时检测
			startPingTimeout() {
				// 清除之前的超时定时器
				if (this.pingTimeoutTimer) {
					clearTimeout(this.pingTimeoutTimer);
					this.pingTimeoutTimer = null;
				}
				// 超时后触发重连
				this.pingTimeoutTimer = setTimeout(() => {
					// console.error("心跳响应超时，连接异常");
					this.handleReconnect();
				}, this.pingTimeout);
			},
			stopHeartBeat() {
				if (this.heartBeatTimer) {
					clearInterval(this.heartBeatTimer);
					this.heartBeatTimer = null;
				}
				if (this.pingTimeoutTimer) {
					clearTimeout(this.pingTimeoutTimer);
					this.pingTimeoutTimer = null;
				}
			}, // 封装通用的连接状态校验方法
			isSocketAvailable() {
				// WebSocket readyState：0=CONNECTING, 1=OPEN, 2=CLOSING, 3=CLOSED
				return this.socket && this.isSocketOpen && this.socket.readyState === 1;
			},
			// 处理重连逻辑
			handleReconnect() {
				this.resetReconnectState();
				this.stopHeartBeat();
				if (this.reconnectCount < this.maxReconnectAttempts) {
					this.reconnectCount++;
					const delay = 1000;
					console.log(`第${this.reconnectCount}次重连，延迟${delay}ms`);

					this.reconnectTimer = setInterval(() => {
						this.initSocket();
					}, delay);
				} else {
					console.log(`停止重连（手动关闭/已达最大次数）`);
					this.closeWebSocket(true);
				}
			},
			// 重置重连状态
			resetReconnectState() {
				this.reconnectCount = 0;
				if (this.reconnectTimer) {
					clearInterval(this.reconnectTimer);
					this.reconnectTimer = null;
				}
			},

			//输入框
			inputFocus() {
				this.chatHeight = this.keyboardHeight - 10;
				this.isFocus = true;
			},
			inputBlur() {
				this.chatHeight = 0;
				this.isFocus = false
			},
			getTimeDifferenceInSeconds(createTimeStr) {
				const createTime = new Date(createTimeStr.replace(/-/g, '/'));
				const now = new Date();
				const timeDiffMs = now - createTime;
				const timeDiffSeconds = Math.floor(timeDiffMs / 1000);
				return Math.max(0, timeDiffSeconds);
			},
			// 录播时间点
			onVideoMetaLoaded(e) {
				this.videoProgressKey = `videoProgress_${this.liveId}`;
				this.setVideoProgress();
			},
			setVideoProgress() {
				// 只有录播和回放需要设置进度
				if (this.liveItem.liveType !== 2 && this.liveItem.liveType !== 3) {
					return;
				}

				let currentTime = 0;
				if (this.liveItem.liveType === 2) {
					// 录播：计算当前时间与开始时间的差值，对视频总时长取模
					const diff = this.getTimeDifferenceInSeconds(this.liveItem.startTime);
					currentTime = diff % this.liveItem.duration;
				} else if (this.liveItem.liveType === 3) {
					// 回放：从存储中获取进度
					const storedProgress = uni.getStorageSync(this.videoProgressKey);
					currentTime = storedProgress || 0;
				}

				const videoId = `myVideo_${this.liveId}`;
				const videoContext = uni.createVideoContext(videoId, this);
				if (videoContext) {
					videoContext.seek(currentTime);
					console.log(`设置视频播放位置: ${currentTime}秒`);
				}
			},
			// 视频数据加载完成
			onVideoLoaded(e) {
				console.log('视频数据加载完成');
			},

			// 视频时间更新
			onVideoTimeUpdate(e) {
				// 获取当前播放时间
				this.videoCurrentTime = e.detail.currentTime;

				// 每隔5秒保存一次进度（避免频繁存储）
				if (Math.floor(this.videoCurrentTime) % 5 === 0) {
					this.saveVideoProgress();
				}
			},

			// 视频暂停
			onVideoPause(e) {
				// this.isVideoPlaying = false;
				// 暂停时保存进度
				this.saveVideoProgress();
			},

			// 视频播放
			onVideoPlay(e) {
				// this.isVideoPlaying = true;
			},
			// 设置视频当前时间
			// setVideoCurrentTime(time) {
			// 	if (!time) return;
			// 	const videoId = `myVideo_${this.liveId}`;
			// 	const videoContext = uni.createVideoContext(videoId, this);

			// 	if (videoContext) {
			// 		videoContext.seek(time);
			// 		console.log(`设置视频播放位置: ${time}秒`);
			// 	}
			// },

			// 保存视频进度
			saveVideoProgress() {
				if (this.videoProgressKey) {
					uni.setStorage({
						key: this.videoProgressKey,
						data: this.videoCurrentTime,
						success: () => {},
						fail: (err) => {
							console.error('保存视频进度失败:', err);
						}
					});
				}
			},







			// 点击红包
			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 => {
						if (res.code == 200) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
							this.isShowCoupon = false
							// const couponData = res.data || {};
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});

						}
					})
					.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 || {}; // 兜底 res.data 为对象，避免访问 res.data.products 报错
							this.lotteryList = Array.isArray(resData) ? resData : [];
							// 兜底 products 为数组
							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
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					rej => {}
				);
			},









			// 商品收藏
			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 => {}
				);
			},

			//正在购买
			getliveOrder(item) {
				if (!this.liveId) {
					return;
				}
				liveOrderUser(this.liveId).then(res => {
						// console.log("正在购买", res)
						if (res.code == 200) {
							this.orderUser = res;
						} else {
							console.log('获取正在购买用户失败');
						}
					},
					rej => {}
				);
			},
			onLiveStateChange(e, liveItem) {
				// console.log('直播状态变化:', e.detail.code, e.detail);
				// 可以根据状态码处理不同的直播状态
				const stateCode = e.detail.code;
				// 2001: 已经连接服务器
				// 2002: 已经连接服务器,开始拉流
				// 2003: 网络接收到首个视频数据包(IDR)
				// 2004: 视频播放开始
				// 2005: 视频播放进度
				// 2006: 视频播放结束
				// 2007: 视频播放Loading
				// 2008: 解码器启动
				// -2301: 网络断连，且经多次重连抢救无效，更多重试请自行重启播放
				// -2302: 获取加速拉流地址失败
			}, // 直播错误事件
			onLiveError(e, liveItem) {
				this.videoError(e, liveItem);
			},
			//  红包 卡片 抽奖
			getCurrentActivities() {
				if (!this.liveId) return;
				currentActivities(this.liveId).then(res => {
					if (res.code === 200) {
						// 提取数据（默认空数组/对象避免报错）
						this.redInfo = (res.red || [])[0];
						this.lotteryInfo = (res.lottery || [])[0];
						this.goodsCard = res.goods || {};


						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.isShowLottery) {
							this.lotteryTimer = setInterval(() => {
								this.countdown = this.handleTime(this.lotteryInfo.updateTime, this
									.lotteryInfo
									.duration)
							}, 1000);
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				}, rej => {});

			},

			// 计算当前时间与 liveItem.startTime 的差值，并更新 totalTime
			calculateTimeDiff(item) {
				// 防御1：item 不存在直接返回
				if (!item.startTime) return;
				// 步骤1：提取对应场景的时间字符串（直播用startTime，抽奖用updateTime）
				let timeStr = item.startTime;

				// 转换时间格式（适配iOS，将 "-" 替换为 "/"）
				const iosCompatibleTime = timeStr.replace(/-/g, "/");
				const time = new Date(iosCompatibleTime);

				if (isNaN(time.getTime())) {
					return;
				}
				const now = new Date();
				let diffMs = Math.max(0, now - time); // 直播：已播放时长（现在-开始时间）
				// 步骤4：转换为 时:分:秒（补零处理）
				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.$set(this.liveItem, "totalTime", `${hours}:${minutes}:${seconds}`);
				this.$set(this.liveItem, "totalSeconds", totalSeconds);
			},

			padZero(num) {
				return num < 10 ? `0${num}` : num;
			},
			// 启动当前直播间的时间差值定时器
			startTimeTimer(item) {
				// 防御：若 item 不存在，直接返回
				if (!item) return;
				// 立即计算一次（避免等待1秒才显示）
				const totalTime = this.calculateTimeDiff(item);
				item.timeTimer = setInterval(() => {
					const totalTime = this.calculateTimeDiff(item);
				}, 1000);

			},
			// 清除指定直播间的时间定时器
			clearTimeTimer() {
				if (this.liveItem.timeTimer) {
					clearInterval(this.liveItem.timeTimer);
					this.liveItem.timeTimer = null; // 清空定时器标识
				}
			},
			toggleViewerList() {
				const now = Date.now();
				if (now - this.lastClickTime > this.clickDelay) {
					this.showadd = !this.showadd;
					if (this.showadd) {
						this.getliveUser(false); // 加载第一页观众
					}
					this.lastClickTime = now;
				}
			},
			closeAllWebSockets() {
				this.isManualClose = true;
				this.isSocketOpen = false; // 应该是 this.isSocketOpen
				this.closeWebSocket(true);
			},
			// 清理所有定时器
			clearAllTimers() {
				if (this.intervalId) {
					clearInterval(this.intervalId);
					this.intervalId = null;
				}

				// if (this.pingpangTimes) {
				// 	clearInterval(this.pingpangTimes);
				// 	this.pingpangTimes = null;
				// }

				if (this.reconnectTimer) {
					clearInterval(this.reconnectTimer);
					this.reconnectTimer = null;
				}

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

				if (this.searchTimer) {
					clearTimeout(this.searchTimer);
					this.searchTimer = null;
				}

				if (this.purchasePromptTimer) {
					clearTimeout(this.purchasePromptTimer);
					this.purchasePromptTimer = null;
				}
			},
			// 播放视频
			playVideo() {
				if (!this.liveItem) {
					console.log('liveItem 为空，无法播放视频');
					return;
				}
				try {
					// 直播流使用live-player
					if (this.liveItem.liveType === 1 && this.liveItem.livingUrl && this.liveItem.status == 2) {
						const livePlayerId = `myLivePlayer_${this.liveId}`;
						const livePlayerContext = uni.createLivePlayerContext(livePlayerId, this);
						if (livePlayerContext) {
							livePlayerContext.play();
						}
					} else if (this.liveItem.status == 1 && this.liveItem.previewUrl) {
						const videoId = `myVideo_${this.liveId}`;
						const videoContext = uni.createVideoContext(videoId, this);
						if (videoContext) {
							videoContext.play();
						}
					}
					// 回放视频使用video
					else if (this.liveItem.liveType === 2 && this.liveItem.videoUrl && this.liveItem.status == 2) {
						const videoId = `myVideo_${this.liveId}`;
						const videoContext = uni.createVideoContext(videoId, this);
						if (videoContext) {
							videoContext.play();
						}
					} else if (this.liveItem.liveType === 3 && this.liveItem.videoUrl && this.liveItem.status == 2) {
						const videoId = `myVideo_${this.liveId}`;
						const videoContext = uni.createVideoContext(videoId, this);
						if (videoContext) {
							videoContext.play();
						}
					}
				} catch (error) {
					console.error("播放视频失败:", error);
				}
			},

			pauseVideo() {
				if (!this.liveItem) return;

				try {
					// 直播流使用live-player
					if (this.liveItem.status == 1) {
						const videoId = `myVideo_${this.liveId}`;
						const videoContext = uni.createVideoContext(videoId, this);
						if (videoContext) {
							videoContext.pause();
						}
					} else if (this.liveItem.status == 2) {
						if (this.liveItem.liveType === 1) {
							const livePlayerId = `myLivePlayer_${this.liveId}`;
							const livePlayerContext = uni.createLivePlayerContext(livePlayerId, this);
							if (livePlayerContext) {
								livePlayerContext.pause();
							}
						} else if (this.liveItem.liveType === 2) {
							const videoId = `myVideo_${this.liveId}`;
							const videoContext = uni.createVideoContext(videoId, this);
							if (videoContext) {
								videoContext.pause();
							}
						}
					}
				} catch (error) {
					console.error("暂停视频失败:", error);
				}
			},
			// 视频错误处理
			videoError(e, liveItem) {
				if (!liveItem || !this.liveId) return;

				// 初始化重试计数
				if (this.videoRetryCounts[liveItem.liveId] === undefined) {
					this.videoRetryCounts[liveItem.liveId] = 0;
				}

				// 限制重试次数
				if (this.videoRetryCounts[liveItem.liveId] >= 3) {
					console.error(`直播间 ${this.liveId} 视频加载失败，停止重试`);
					// 显示错误提示
					uni.showToast({
						title: "视频加载失败，请检查网络",
						icon: 'none',
						duration: 2000
					});
					return;
				}

				this.videoRetryCounts[this.liveId]++;

				// 延迟重试
				setTimeout(() => {
					if (this.liveId === this.liveId) {
						console.log(`第${this.videoRetryCounts[this.liveId]}次重试播放视频`);
						this.playVideo();
					}
				}, 2000);
			},



			openViews() {
				// 计算scroll-view高度
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.view-box').boundingClientRect(data => {
						if (data) {
							// 减去标题和底部固定区域的高度
							this.scrollHeight = data.height - 80 - 120; // 80是标题高度，120是底部高度
						}
					}).exec();
				});
			},
			// 滚动到底部触发
			handleScrollToLower() {
				// 清除上一次未执行的定时器，避免重复请求
				if (this.scrollTimer) {
					clearTimeout(this.scrollTimer);
				}
				// 延迟0.5秒（500毫秒）执行接口请求
				this.scrollTimer = setTimeout(() => {
					this.getliveUser(true); // 加载更多数据
				}, 1000); // 延迟时间：500毫秒
			},
			async getLiveMsg(liveItem) {
				// 强化校验：确保 liveItem 存在且包含 liveId
				if (!liveItem || !this.liveId) {
					console.error('getLiveMsg 错误：无效的 liveItem', {
						liveItem: liveItem,
						currentIndex: this.currentSwiperIndex,
					});
					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();
						// .reverse();
						this.talklist = Array.isArray(reversedTalkList) ? reversedTalkList : [];
						this.$nextTick(() => {
							this.scrollIntoView = `list_${reversedTalkList.length - 1}`;
						});
					} else {
						this.talklist = [];
					}
				} catch (error) {
					this.talklist = [];
					console.error("获取聊天记录失败:", error);
				}
			},
			// 获取直播间用户
			// getliveUser(isLoadMore = false) {
			// 	this.viewLoading = true;

			// 	watchUserList(this.liveId, this.viewPageSize, this.viewPageNum, false)
			// 		.then(res => {
			// 			if (res.code === 200) {
			// 				const userRows = Array.isArray(res.rows) ? res.rows : [];
			// 				this.liveViewersData = userRows.map(item => ({
			// 					avatar: item.avatar || '',
			// 					userId: item.userId || '',
			// 					nickName: item.nickName || '未命名'
			// 				}));
			// 				console.log("请求到了",this.liveViewersData)

			// 				this.liveUserTotal = res.total || 0;
			// 				const newRows = Array.isArray(res.rows) ? res.rows : [];
			// 				const currentViewers = Array.isArray(this.liveViewers) ? this.liveViewers : [];
			// 				this.liveViewers = isLoadMore ? [...currentViewers, ...newRows] : newRows;
			// 				this.viewPageNum++;
			// 			} else {
			// 				this.liveViewers = []; // 接口失败时强制置空数组
			// 			}
			// 		})
			// 		.catch(error => {
			// 			console.error('获取观众列表失败:', error);
			// 			this.liveViewers = []; // 捕获异常时强制置空数组
			// 		})
			// 		.finally(() => {
			// 			this.viewLoading = false; // 无论成功失败都关闭加载状态
			// 		});
			// },
			async getliveUser(isLoadMore = false) {
				this.viewLoading = true;

				try {
					const res = await watchUserList(this.liveId, this.viewPageSize, this.viewPageNum, false);
					if (res.code === 200) {
						const userRows = Array.isArray(res.rows) ? res.rows : [];
						this.liveViewersData = userRows.map(item => ({
							avatar: item.avatar || '',
							userId: item.userId || '',
							nickName: item.nickName || '未命名'
						}));
						this.liveUserTotal = res.total || 0;
						const newRows = Array.isArray(res.rows) ? res.rows : [];
						const currentViewers = Array.isArray(this.liveViewers) ? this.liveViewers : [];
						this.liveViewers = isLoadMore ? [...currentViewers, ...newRows] : newRows;
						this.viewPageNum++;
					}
				} catch (error) {
					console.error('获取观众列表失败:', error);
				} finally {
					this.viewLoading = false;
				}
			},

			//小黄车搜索商品
			handleSearchInput() {
				// 使用防抖优化性能，避免频繁请求
				clearTimeout(this.searchTimer);
				this.searchTimer = setTimeout(() => {
					this.queryCollect();
				}, 500); // 500毫秒延迟
			},


			// 显示购买提示信息
			showPurchaseMessage() {
				// 清除之前的定时器
				if (this.purchasePromptTimer) {
					clearTimeout(this.purchasePromptTimer);
				}

				// 显示提示
				this.showPurchasePrompt = true;

				// 2秒后自动隐藏
				this.purchasePromptTimer = setTimeout(() => {
					this.showPurchasePrompt = false;
				}, 2000);
			},

			//名字超过省略
			truncateString(str, maxLength) {
				if (typeof str !== 'string' || str.length <= maxLength) {
					return str;
				}
				return str.slice(0, maxLength) + '...'; // 截断后加省略号
			},

			// 去订单列表
			goOrderList() {
				uni.navigateTo({
					url: "/pages_shopping/live/order"
				})
			},

			// 修改获取直播信息方法
			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;
					}
					// 关键：用 Object.assign 合并旧数据与新数据，确保原有响应式属性不丢失
					// 同时通过 $set 触发整体更新（若 liveItem 初始为空，需先初始化）
					this.liveItem = Object.assign({}, this.liveItem, res.data);
					// this.liveItem = res.data;
					this.talklist = Array.isArray((res.data || {}).talklist) ? res.data.talklist : [];
					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) {
								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;
							console.log("地址在", this.liveItem.livingUrl)
							this.$set(this.liveItem, 'livingUrl', livingUrl);
							this.$set(this.liveItem, 'videoUrl', ''); // 清空回放视频
						} else if (res.data.liveType === 2 || res.data.liveType === 3) {
							// 回放视频   2录播 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', '');
						}
					}
					await this.getLiveMsg(this.liveItem);
					await this.getliveViewData(this.liveItem);

					this.$set(this.liveItem, 'autoplay', res.data.liveType !== 0);
					this.$set(this.liveItem, 'showType', res.data.showType);
					this.storeId = res.storeId;
					// 2. 启动“10秒刷新直播间数据”的定时器
					this.startLiveViewDataTimer();

					this.playVideo();
					// live_start 时主动初始化播放组件
					// this.initPlayerComponent();
				} catch (err) {
					console.error("获取直播信息失败:", err);
					uni.showToast({
						title: "获取直播信息失败",
						icon: 'none'
					});
				}
			},
			// initPlayerComponent() {
			// 	const {
			// 		liveType,
			// 		status,
			// 		liveId,
			// 		livingUrl,
			// 		videoUrl
			// 	} = this.liveItem;
			// 	// 仅在“直播中”（status:2）时初始化
			// 	if (status !== 2) return;
			// 	this.$nextTick(() => { // 等待视图更新后再操作组件
			// 		// 1. 直播流（liveType:1）：初始化 live-player
			// 		if (liveType === 1 && livingUrl) {
			// 			const livePlayerId = `myLivePlayer_${liveId}`;
			// 			const livePlayerContext = uni.createLivePlayerContext(livePlayerId, this);
			// 			if (livePlayerContext) {
			// 				livePlayerContext.stop(); // 先停止旧流
			// 				livePlayerContext.play(); // 播放新流
			// 			}
			// 		}

			// 		// 2. 录播/回放（liveType:2/3）：初始化 video
			// 		if ((liveType === 2 || liveType === 3) && videoUrl) {
			// 			const videoId = `myVideo_${liveId}`;
			// 			const videoContext = uni.createVideoContext(videoId, this);
			// 			if (videoContext) {
			// 				videoContext.stop(); // 停止旧视频
			// 				videoContext.seek(0); // 重置到开头
			// 				videoContext.play(); // 播放新视频
			// 			}
			// 		}
			// 	});
			// },
			// 设置视频播放
			maskString(str, maskChar = '*') {
				// 如果str是undefined或null，直接返回空字符串
				if (!str) return '';
				// 确保str是字符串（如果是数字等类型，先转为字符串）
				const strVal = String(str);
				return strVal.split('').map((char, index) => (index === 0 ? char : maskChar)).join(
					'');
			},

			getPureDecimal(num, precision = 6) {
				const decimalPart = Math.abs(num).toFixed(precision).split('.')[1];
				return decimalPart?.replace(/0+$/, '') || ''; // 移除末尾多余的0
			},

			// 返回上一个页面并关闭WebSocket
			goBack() {
				// 暂停当前视频
				if (this.liveItem) {
					this.pauseVideo();
				}
				// 关闭WebSocket连接
				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(liveItem) {
				if (!liveItem || !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;
				}
				// 启动新定时器，每3秒执行一次
				this.liveViewDataTimer = setInterval(() => {
					// 安全校验：确保liveItem和liveId存在（避免无效请求）
					if (this.liveItem && this.liveId) {
						this.getliveViewData(this.liveItem);
					}
				}, 10000);
			},
			// 去购买,跳商品详情
			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() {
				if (!this.liveId) return;
				if (this.inputInfo == null) this.inputInfo = ''
				try {
					const res = await liveStore(this.liveId, this.inputInfo);
					if (res.code === 200) {
						// 数据绑定到当前 liveItem，避免全局污染
						this.products = Array.isArray(res.data) ? res.data : [];
					}
				} catch (error) {
					console.error('获取小黄车商品失败:', error);
				}
			},
			// 时间戳
			initTime() {
				const now = new Date();
				this.timestamp = now.getTime(); // 例如：'2023-04-01 12:00:00'
			},

			openCart() {
				this.queryCollect()
				this.shopping = true
			},
			close() {
				this.showadd = false
			},

			// 关闭小黄车
			closeShop() {
				this.shopping = false;
			},
			// 修改关闭WebSocket方法
			// closeWebSocket() {
			// 	this.socket?.close();
			// },
			// 关闭WebSocket连接（isManual：是否手动关闭）
			closeWebSocket(isManual = true) {
				// 修复判断条件：当 socket 为 null 或未打开时，直接返回
				if (!this.socket || !this.isSocketOpen) {
					console.warn("WebSocket 任务不存在或未打开，无需关闭");
					return;
				}

				console.log("websocket 连接关闭");
				this.isManualClose = isManual;
				this.stopHeartBeat();
				this.resetReconnectState();

				try {
					// 先保存引用，避免在关闭过程中被置为null
					const socketToClose = this.socket;
					this.socket = null;
					this.isSocketOpen = false;

					socketToClose.close({
						code: 1000,
						reason: isManual ? "主动关闭" : "异常关闭"
					});
					console.log("WebSocket连接已发起关闭");
				} catch (err) {
					console.error("关闭WebSocket失败:", err);
					// 即使关闭失败，也要重置状态
					this.socket = null;
					this.isSocketOpen = false;
				}
			},
			startHeartBeat() {
				this.stopHeartBeat(); // 先停止现有心跳，防止重复
				this.sendHeartBeat(); // 立即发送一次心跳
				// 按间隔循环发送心跳
				this.heartBeatTimer = setInterval(() => {
					this.sendHeartBeat();
				}, this.heartBeatInterval);
			},
			initSocket() {
				if (!this.userData) {
					this.getUserInfo()
				}
				if (this.isConnecting) {
					return;
				}
				// 如果已经存在连接且状态为open，则退出
				if (this.socket && this.socket.readyState === 1) {
					return;
				}
				if (this.socket && (this.socket.readyState === 0 || this.socket.readyState === 1)) {
					console.log('关闭现有WebSocket连接，创建新连接');
					this.closeWebSocket(true);
				}
				// 校验必要参数
				if (!this.liveId) {
					console.error("缺失直播间ID，无法初始化WebSocket");
					return;
				}
				console.log("用户信息", this.userData)
				if (!this.userData || !this.userData.userId) {
					console.error("用户信息缺失，无法初始化WebSocket");
					return;
				}
				// 清除之前的重连定时器
				this.resetReconnectState();

				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://api.fhhx.runtzh.com/ws/app/webSocket';
					// const baseWsUrl = 'ws://192.168.10.166:7114/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("创建新的WebSocket连接:", wsUrl);

					const socketTask = uni.connectSocket({
						url: wsUrl,
						success: () => console.log("Socket连接请求发送成功"),
						fail: (err) => {
							console.error("Socket连接请求失败:", err);
							this.handleReconnect();
						}
					});

					// 连接打开事件
					socketTask.onOpen((res) => {
						console.log("WebSocket连接已打开");
						this.socket = socketTask;
						this.isConnecting = false;
						this.isSocketOpen = true;
						this.reconnectCount = 0;
						this.resetReconnectState();
						this.heartBeatRetryCount = 0; // 重置心跳重试次数
						this.shownEntryUsers.clear(); // 重连后重置进入提示记录
						this.startHeartBeat();
					});

					// 消息接收事件
					socketTask.onMessage((res) => {
						try {
							const data = JSON.parse(res.data);
							// 处理服务端心跳响应（根据服务端协议调整cmd字段）
							if (data.cmd === "heartBeatAck") {
								this.stopHeartBeat(); // 清除当前超时检测
								this.startHeartBeat(); // 重新启动心跳周期
								return;
							}
							this.handleSocketMessage(res);
						} catch (err) {
							console.error("消息解析异常:", err);
						}
					});
					// 连接错误事件
					socketTask.onError((err) => {
						console.error("WebSocket连接错误:", err);
						this.isSocketOpen = false;
						this.stopHeartBeat();
						this.isConnecting = false;
						this.handleReconnect(); // 错误直接触发重连
					});
					// 连接关闭事件
					socketTask.onClose((res) => {
						console.log("WebSocket连接关闭:", res);
						this.isSocketOpen = false;
						this.isConnecting = false;
						this.stopHeartBeat(); // 清除心跳定时器（复用之前的停止方法）
						if (!this.isManualClose && this.reconnectCount < this.maxReconnectAttempts) {
							this.handleReconnect();
						} else {}
					});
				} catch (e) {
					console.error("创建WebSocket异常:", e);
					this.handleReconnect();
				}
			},
			handleTime(time, duration) {
				// 前置处理：将time转换为毫秒级时间戳
				let timeStamp;

				// 1. 如果time是数字且合理（毫秒级时间戳通常为13位左右的正数），视为有效时间戳
				if (typeof time === 'number' && time > 0 && time < 9999999999999) { // 上限约为3000年
					timeStamp = time;
				}
				// 2. 如果是字符串，尝试解析为日期后转为时间戳
				else if (typeof time === 'string' && time.trim() !== '') {
					// 处理兼容性：将"2025-09-25 17:30:00"转为ISO格式"2025-09-25T17:30:00"
					const isoTime = time.replace(' ', 'T');
					const date = new Date(isoTime);
					// 校验日期是否有效
					if (!isNaN(date.getTime())) {
						timeStamp = date.getTime();
					} else {
						console.error('无效的日期格式:', time);
						return false; // 格式错误时返回false
					}
				} else {
					console.error('time参数必须是有效的时间戳（数字）或日期字符串');
					return false;
				}

				// 后续逻辑保持不变（基于转换后的timeStamp计算）
				const targetTimestamp = timeStamp + duration * 60 * 1000;
				const currentTimestamp = new Date().getTime();
				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)
				};
			},
			// 处理Socket消息
			async handleSocketMessage(message) {
				let data = JSON.parse(message.data)
				const socketMessage = data.data // 服务端返回的消息体
				if (data.code == 200) {
					const messageData = {
						...socketMessage,
						cmd: socketMessage.cmd || '', // 确保cmd字段存在
						ts: Date.now() // 时间戳
					};

					// 处理服务端返回的sendMsg消息，加入本地列表
					if (socketMessage.cmd == 'sendMsg') {
						if (!this.isSocketAvailable()) {
							uni.showToast({
								title: '连接已断开，正在重试...',
								icon: 'none'
							});
							this.handleReconnect(); // 主动触发重连
							return;
						}
						const oldList = Array.isArray(this.talklist) ? this.talklist : [];
						const newList = [...oldList, messageData];
						this.talklist = newList;
						// 1. 将消息追加到当前直播间的talklist中（响应式更新）
						this.talklist = newList;
						// 2. 延迟下一帧滚动到最新消息（确保DOM已更新）
						this.$nextTick(() => {
							const lastIndex = this.talklist.length - 1;
							this.scrollIntoView = `list_${lastIndex}`;
						});
					} else if (socketMessage.cmd == 'red') {
						this.redInfo = JSON.parse(socketMessage.data);
						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') {
						this.goodsCard = JSON.parse(socketMessage.data);
						this.isShowGoods = socketMessage.status == 1;

					} else if (socketMessage.cmd == 'coupon') {
						this.couponInfo = JSON.parse(socketMessage.data);
						this.isShowCoupon = socketMessage.status === 1;
						if (this.isShowCoupon) {
							// this.couponTimer = setInterval(() => {
							// 	const couponCountdown = this.handleTime(this.couponInfo.updateTime, this.couponInfo.duration)
							// 	if (!couponCountdown) {
							// 		this.isShowCoupon = false
							// 		clearInterval(this.couponTimer)
							// 	}
							// }, 1000);
						}

					} else if (socketMessage.cmd == 'lottery') {

						const parsedData = JSON.parse(socketMessage.data || '{}'); // 默认为空对象
						this.lotteryInfo = parsedData || {}; // 确保是对象，避免 null
						this.isShowLottery = socketMessage.status === 1;
						if (socketMessage.status != 1) {
							this.isShowLotteryPop = false
						}
						// 清除已有定时器（无论状态是否为1，先清掉旧的）
						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 == 'entry') {
						try {


							if (!this.liveUserCalled) {
								await this.getliveUser(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);
								console.log("在这里>>>", this.liveViewersData);
								this.liveUserTotal++;
							}

							// 解析用户ID（根据实际接口字段调整，此处假设data含userId）
							const userData = JSON.parse(socketMessage.data || '{}');
							const userId = userData.userId || socketMessage.userId; // 兼容不同字段
							if (!userId) return; // 无用户ID不处理

							// 仅新用户（未显示过）才触发提示
							if (!this.shownEntryUsers.has(userId)) {
								this.inAndOut = socketMessage;
								this.showWelcomeMessage = true;
								this.shownEntryUsers.add(userId); // 加入已显示集合

								// 3秒后隐藏提示（可调整时长）
								if (this.welcomeTimer) clearTimeout(this.welcomeTimer);
								this.welcomeTimer = setTimeout(() => {
									this.showWelcomeMessage = false;
								}, 3000);


							}
						} catch (err) {
							console.error("解析entry用户数据失败:", err);
						}
					} else if (socketMessage.cmd == 'out') {
						// console.log("用户离开");
						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--; // 根据userId删除对应的用户数据
							}
						}


						this.inAndOut = socketMessage;
						this.showWelcomeMessage = true;

						// 3秒后隐藏提示
						if (this.welcomeTimer) clearTimeout(this.welcomeTimer);
						this.welcomeTimer = setTimeout(() => {
							this.showWelcomeMessage = false;
						}, 3000);
					} else if (socketMessage.cmd == 'live_start' || socketMessage.cmd ==
						'live_end') {
						// this.getliving(this.liveId);
						// 开始直播,关闭直播
						if (this.liveStartTimer) {
							clearInterval(this.liveStartTimer);
							this.liveStartTimer = null;
						}
						if (this.redTimer) {
							clearInterval(this.redTimer);
							this.redTimer = null;
						}

						// 2. 请求最新直播间数据
						this.getliving(this.liveId); // 注意：需用 await 确保数据更新完成

						// 3. 强制触发视图更新（兜底方案，若上述步骤仍不生效）
						// this.$forceUpdate(); 

					} else if (socketMessage.cmd == 'Integral') {
						this.integral = {
							msg: socketMessage.msg,
							status: true
						}
					} else if (socketMessage.cmd == 'LotteryDetail') {
						try {
							// 1. 兜底空数据为 "[]"，避免 JSON.parse(undefined) 报错
							const parseData = socketMessage.data || '[]';
							// 2. 解析 JSON 并捕获异常
							const prizeData = JSON.parse(parseData);
							// 3. 强制转为数组
							this.prizeInfo = Array.isArray(prizeData) ? prizeData : [];
						} catch (err) {
							console.error('解析抽奖结果失败:', err);
							// 4. 异常时兜底为数组
							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'
					});
				}
			},
			sendMsg(retries = 1) {
				// 防止连续点击发送两次（短时锁定）
				if (this.isSending) return;
				this.isSending = true;
				setTimeout(() => {
					this.isSending = false;
				}, 800); // 800ms 内禁止再次发送

				const text = (this.value || '').trim();
				if (!text) {
					uni.showToast({
						title: "不能发送空消息",
						icon: 'none'
					});
					return;
				}

				// 1. 连接状态校验：使用定义后的 retries
				if (!this.isSocketAvailable()) {
					if (retries > 0) {
						uni.showToast({
							title: `连接不稳定，正在重试（${retries}次）...`,
							icon: 'none'
						});
						// 延迟500ms重试，重试次数减1
						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'
				};

				// 发送socket消息
				try {
					this.socket.send({
						data: JSON.stringify(data),
						success: () => {
							// console.log("发送成功");
							this.value = '';
						},
						fail: (err) => {
							console.error("消息发送失败:", err);
							// 2. 发送失败重试：使用定义后的 retries
							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">
	::v-deep .u-icon--right {
		justify-content: flex-end !important;
	}

	// 无头像用户文字样式
	.text-white {
		color: #ffffff;
	}

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

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

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

	.coupon {
		padding: 20rpx;

		.coupon-top {}

		.coupon-list {
			margin-top: 0.25 * 100rpx;
			box-sizing: border-box;

			.item {
				display: flex;
				width: 100%;
				height: 1.7 * 100rpx;
				margin-bottom: 0.16 * 100rpx;

				.money {
					background-size: 100% 100%;
					width: 2.4 * 100rpx;
					height: 100%;
					color: #fff;
					font-size: 0.36 * 100rpx;
					font-weight: bold;
					text-align: center;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;

					.img {
						position: absolute;
						width: 2.4 * 100rpx;
						height: 100%;
						color: #fff;

					}

					.num {
						font-size: 0.6 * 100rpx;
					}

					.pic-num {
						font-size: 20rpx;
						z-index: 99;
					}

				}

				.text {
					width: 4.5 * 100rpx;
					padding: 0 0.17 * 100rpx 0 0.24 * 100rpx;
					background-color: #fff;
					box-sizing: border-box;

					.condition {
						font-size: 0.3 * 100rpx;
						color: #282828;
						height: 0.93 * 100rpx;
						line-height: 0.93 * 100rpx;
						border-bottom: 1px solid #f0f0f0;
					}

					.data {
						font-size: 0.2 * 100rpx;
						color: #999;
						height: 0.76 * 100rpx;

						.bnt {
							width: 1.36 * 100rpx;
							height: 0.44 * 100rpx;
							border-radius: 0.22 * 100rpx;
							font-size: 0.22 * 100rpx;
							color: #fff;
							text-align: center;
							line-height: 0.44 * 100rpx;
							background-color: red;

							.gray {
								background-color: #ccc;
							}
						}
					}
				}

			}
		}
	}

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

		.container {
			width: 100%;
			height: 100%;
			position: relative;
			transition: opacity 0.3s ease;
			transform: translateZ(0); // 开启GPU加速
			will-change: opacity; // 告诉浏览器提前优化该属性
		}


	}



	.loading-tip {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 10;

		.loading-text {
			color: #ffffff;
			font-size: 28rpx;
			margin-top: 20rpx;
		}
	}

	.loading-more,
	.no-more {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
		color: #999;
		font-size: 24rpx;
	}

	.loading-more {
		flex-direction: column;
	}



	/* button自带样式清除 */
	button::after {
		border: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}

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

	.welcome-message {
		position: fixed;
		width: 100%;
		bottom: 38vh;
		left: 50%;
		transform: translateX(-50%);
		color: white;
		padding: 10px 20px;
		border-radius: 20px;
		z-index: 10;
		transition: opacity 0.3s ease;
	}

	@keyframes fadeOut {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	.send {
		background-color: #fafafa;
		border-radius: 28rpx;
		padding: 14rpx 16rpx;
		color: #181818;
		font-weight: 500;
	}

	.send-input {
		background-color: #ffb082;
		border-radius: 28rpx;
		padding: 14rpx 16rpx;
		color: #ffffff;
		font-weight: 500;
	}

	.talk-list {
		max-width: 100%;
		border-radius: 30rpx;
		background-color: rgba(33, 33, 33, 0.5);
		padding: 10rpx 30rpx;
	}

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



		.activity-box {
			position: fixed;
			top: 188rpx;
			left: 30rpx;
			z-index: 5;
			display: flex;
			align-items: center;

			.item-box {
				border-radius: 16rpx;
				background-color: rgba(77, 77, 77, 0.5);
				width: 90rpx;
				height: 100rpx;
				margin-right: 20rpx;
				position: relative;
				z-index: 999;

				.tip {
					position: absolute;
					width: 100%;
					bottom: 0;
					color: #fafcff;
					font-size: 26rpx;
					background-color: rgba(15, 15, 15, 0.8);
					border-radius: 16rpx;
					text-align: center;
				}

				.item {
					margin: 0 auto;
					padding: 10rpx 0;

					.img {
						height: 100%;
					}
				}
			}
		}


		.side-group {
			position: absolute;
			top: 65%;
			right: 30rpx;
			z-index: 1000;
			display: flex;
			flex-direction: column;
			align-items: center;

			.side-item {
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				margin-bottom: 32rpx;
				text-align: center;

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

		.content-top {
			width: 100%;
			margin-top: 48rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 24rpx;
			box-sizing: border-box;



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

			}
		}

		.follow-btn {
			padding: 8rpx 16rpx;
			background: linear-gradient(270deg, #FF5C03 0%, #FFAC64 100%);
			border-radius: 26rpx;
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;
		}
	}

	.trailer-box {
		position: relative;
		top: 15%;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #ffffff;
		padding: 20rpx;

		.button {
			margin-top: 20rpx;
			background: #6d7bd4;
			color: #fff;
			border-radius: 20rpx;
			padding: 20rpx 30rpx;
			position: relative;
			z-index: 99999;
		}

		.ash {
			background: #636363;
		}

		.countdown-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.white {
				width: 60rpx;
				height: 60rpx;
				text-align: center;
				overflow: hidden;
				background: #FFFFFF;
				border-radius: 8rpx;
				margin: 30rpx 10rpx 0;
				font-weight: 600;
				font-size: 24rpx;
				color: #000000;
				line-height: 60rpx;
			}
		}

		.item {
			width: 100%;
			height: 400rpx;
		}

		.name {

			font-size: 34rpx;
		}

		.img {
			margin-bottom: 40rpx;
			width: 240rpx;
			height: 240rpx;
		}

		.title {
			margin-top: 30rpx;
			font-size: 42rpx;
			font-weight: 500;
		}

	}


	.videolist {
		position: relative;
		height: 100vh;
		width: 100%;

		.video {
			height: 100vh;
			width: 100%;
			background-color: rgba(57, 57, 57, 0.4);

			.item {
				width: 100%;
				height: 100%;
			}

			.time {

				color: #ffffff;
				font-size: 20rpx;
				margin-left: 10rpx;
			}

			.lable {
				position: absolute;
				top: 50rpx;
				right: 16rpx;
				background-color: rgba(57, 57, 57, 0.6);
				padding: 4rpx 10rpx;
				color: #fff;
				border-radius: 15rpx;
			}
		}

		.video_row {
			position: absolute;
			top: 20%;
			max-height: 450rpx;
			z-index: 99;
		}
	}

	.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 48rpx 48rpx 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 4px 8px 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;
			}
		}
	}

	.goods {
		position: fixed;
		bottom: 140rpx;
		right: 104rpx;
		z-index: 5;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		width: 280rpx;
		padding: 4rpx;

		.top {
			position: absolute;
			top: 4rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #fff;
			width: 100%;
			padding-right: 10rpx;
			box-sizing: border-box;

			.left {
				background-color: rgba(0, 0, 0, 0.8);
				padding: 12rpx;
				font-size: 22rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 10rpx;
			}
		}

		.photo {
			width: 100%;
			height: 180rpx;
			border-radius: 16rpx 16rpx 0 0;
			overflow: hidden;
		}

		.item {
			padding: 4rpx;

			.price {
				font-size: 30rpx;

				.red {
					color: #FF5701;
					font-weight: 600;
					margin-right: 10rpx;
				}

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

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

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

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

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

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

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

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

			.close {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
			}
		}




	}

	.icon-bg {
		background-color: rgba(57, 57, 57, 0.8);
		border-radius: 50%;
		width: 88rpx;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: transform 0.2s ease;

	}

	.list {
		width: 80%;
		margin-bottom: 20rpx;
		animation: xxxawdawd .2s;
	}

	@keyframes xxxawdawd {
		from {
			margin-top: 0rpx;
			opacity: 0;
		}

		to {
			margin-top: 20rpx;
			opacity: 1;
		}
	}

	.shop-prompt {
		position: absolute;
		bottom: 750rpx;
		left: 24rpx;
		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;
	}



	.red-box {

		.button {
			margin: 0 auto;
			width: 80%;
			line-height: 88rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #FF5701 0%, #FFB501 100%);
			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(238, 124, 80, 0.2);
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}

	.view-box {
		position: relative;
		height: 40vh;
		/* 设置弹出层高度为视窗高度的70% */
		padding: 40rpx 0rpx 120rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.scroll-content {
			flex: 1;
			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;
		}
	}

	// 抽奖
	.prize-box {
		position: relative;

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

		}

		.bg-img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;

		}

		.prize-content {
			position: relative;
			z-index: 2;
			padding: 24rpx 0 68rpx;

			.white-item {
				width: 40rpx;
				height: 40rpx;
				text-align: center;
				overflow: hidden;
				background: #FFFFFF;
				box-shadow: inset 0rpx 2rpx 8rpx 0rpx #FFEBB2;
				border-radius: 8rpx;
				margin: 4rpx;
				font-weight: 600;
				font-size: 24rpx;
				color: #F85D22;
				line-height: 40rpx;
			}

			.item-group {
				width: 100%;
			}

			.point-group {
				margin: 20rpx 0 50rpx;
				display: flex;
				gap: 6rpx;

				.item {
					width: 20rpx;
					height: 8rpx;
					background: rgba(255, 255, 255, 0.5);
					border-radius: 4rpx 4rpx 4rpx 4rpx;
				}

				.selected {
					background: #FFEB66;
				}
			}

			.button {
				margin-top: 30rpx;
				width: 520rpx;
				height: 88rpx;
				line-height: 88rpx;
				background: linear-gradient(180deg, #FFF4D6 0%, #FFEB66 100%);
				box-shadow: 0rpx 10rpx 8rpx 4rpx rgba(246, 82, 25, 0.5);
				border-radius: 44rpx;
				font-weight: 500;
				font-size: 36rpx;
				color: #F4410B;
				text-align: center;

			}
		}


	}

	.shoppop {
		padding: 22rpx 16rpx;

		.shoppop-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 16rpx 22rpx;

			.search-input {
				width: 414rpx;
				height: 76rpx;
				background: #FFFFFF;
				border-radius: 36rpx;
				margin-left: 20rpx;
				padding: 0 32rpx;
				box-sizing: border-box;
				font-size: 24rpx;
				margin-right: 24rpx;

			}

			.search-top {
				font-size: 20rpx;
				color: #222222;
			}
		}


		.shop-list {
			overflow: hidden;

			.list-item {
				display: flex;
				align-items: center;
				padding: 20rpx 16rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 16rpx;

				.goods-img {
					width: 200rpx;
					height: 200rpx;
					border-radius: 16rpx;
					overflow: hidden;
					position: relative;
					margin-right: 24rpx;

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

					.goods-label {
						position: absolute;
						top: 0;
						width: 64rpx;
						height: 40rpx;
						background: rgba(0, 0, 0, 0.5);
						border-radius: 16rpx 0rpx 16rpx 0rpx;
						text-align: center;
						font-weight: 500;
						font-size: 28rpx;
						color: #FFFFFF;
					}
				}

				.goods-right {
					flex: 1;

					.goods-title {
						font-weight: 500;
						font-size: 30rpx;
						color: #000000;
						margin-bottom: 10rpx;

					}

					.goods-details {
						font-size: 24rpx;
						color: #999999;
						margin: 10rpx 0 20rpx;
					}

					.goods-people {
						font-size: 22rpx;
						color: #E69A22;
						height: 56rpx;
					}

					.goods-shop {
						display: flex;
						justify-content: space-between;

						.nummber {
							color: #FF5C03;
							font-size: 22rpx;
							font-weight: 500;
						}

						.btn-group {
							text-align: center;
							line-height: 56rpx;

							.collect-btn {
								width: 72rpx;
								height: 100%;
								background: #F5F7FA;
								border-radius: 8rpx 0rpx 0rpx 8rpx;

							}

							.shop-btn {
								width: 152rpx;
								background: linear-gradient(270deg, #FF5C03 0%, #FFAC64 100%);
								border-radius: 0rpx 8rpx 8rpx 0rpx;
								font-weight: 500;
								font-size: 30rpx;
								color: #FFFFFF;

							}
						}
					}
				}
			}
		}
	}
</style>