zhibo/pages/home/living.vue

<template>
	<view class="container">
		<!-- <view class="popup-video " v-if="!autoplay">
			<view class="fs36 bold" v-if="livedata.status==1">——直播还未开始——</view>
			<view class="fs36 bold" v-if="livedata.status==3">——直播已经结束——</view>
			<view class="fs28 mtb20">了解更多，点击下方联系老师</view>
			<view class="more" @click="showadd=!showadd">联系老师</view>
		</view> -->

		<!-- <image :src="livedata.liveImgUrl" 
	 :class="livedata.status!=2?'background-images':'background-image'"></image> -->
		<view class="blackbg"></view>
		<view class="content">
			<!-- 页面内容 -->
			<view style=" position: fixed;top: 0;z-index: 5;" class="content-top">
				<view class="u-flex-y-center">
					<image @click="goBack" style="width: 60rpx;height: 64rpx;margin-right: 26rpx;"
						src="@/static/images/live/return.png"></image>
					<view class=" align-center"
						style="padding: 6rpx 4rpx;height: 64rpx;background: rgba(0,0,0,0.5);border-radius: 32rpx;">
						<u-avatar :src="livedata.liveImgUrl" size="32"></u-avatar>
						<view class="colorf" style="margin-left: 8rpx;">
							<view>{{livedata.liveName?livedata.liveName:"芳华未来"}}</view>
							<view style="font-size: 16rpx;">
								{{ liveViewData.follow || liveViewData.follow === 0 ? liveViewData.follow : 0 }}位粉丝
							</view>
						</view>
						<view v-if="isFollow" @click="onFollow" class="follow-btn ml20">关注</view>
						<view v-else @click="onFollow" class="follow-btn ml20">已关注</view>
					</view>
				</view>
				<view class="u-flex-end align-center">
					<image class="w52 h52 mr4" v-for="(item,index) in filteredViewers" :key="index"
						style="border-radius: 26rpx;" :src="item.avatar"></image>
					<view class="sum">{{liveViewData.online}}</view>
				</view>
			</view>

			<!-- 右边的 -->
			<view class="side-group">
				<view class="side-item">
					<image @click="onLike()" src="/static/images/live/like.png"></image>
					<view>{{liveViewData.like}}</view>
					<!-- <view>{{liveData likeName}}</view> -->
				</view>
				<view class="side-item" @click="goStore()">
					<image src="/static/images/live/shop.png"></image>
					<view>店铺</view>
				</view>
				<view class="side-item">
					<image src="/static/images/live/share.png"></image>
					<view>分享</view>
				</view>
			</view>

			<view class="shop-prompt u-flex-y-center">
				<image class="w32 h32 mr8" src="/static/images/live/shopping.png"></image>
				<text> {{orderUser.userName ? maskString(orderUser.userName) : ''}} 等 {{orderUser.count || 0}}
					人正在去购买</text>
			</view>




			<!-- <view class="videolist " style="margin: auto 0">
				<view class="vedio" :style="{height:isScreen?'100vh':''}">
					<video id="myVideo" class="videotop" :src="livingUrl" :autoplay="autoplay" :controls='false'
						vslide-gesture-in-fullscreen='true' :show-center-play-btn="false"></video>
				</view>
			</view> -->
			<!-- object-fit:fill; -->
			<view class="videolist " style="margin: auto 0">
				<view class="vedio" :style="{height:isScreen?'100vh':''}">
					<!-- 修改video组件以支持HLS -->
					<video id="myVideo" class="videotop" :src="livingUrl" :autoplay="autoplay" :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" @error="videoError" >
					</video>
				</view>
			</view>
			<view class="pb40  mt90" style="position: fixed;bottom: 0;">
				<view class="w100 h300 mt20">
					<scroll-view enable-flex scroll-y="true" class="talk p20 scrolly flex-1 column"
						style="width: calc(100% - 40rpx);height: calc(100% - 40rpx);"
						:scroll-into-view="scrollIntoView">
						<view>
							<view class="list justify-start" v-for="(item,index) in talklist" :key="item.index"
								:id="`list_${index}`" v-show="item.cmd=='announcement'">
								<view class="talk-list ml16 justify-start">
									<view class="fs24">
										<text class='fs24 colorf'> {{item.msg}}直播间{{messageContent}}</text>
									</view>
								</view>
							</view>
						</view>




						<!-- 弹幕 -->
						<!-- 	<u-list class="chat-list" height="184" @scrolltolower="scrollchat">
							<u-list-item class="chat-item" v-for="(item,index) in chatList" :key="index">
								<view class="chat-lable u-flex-y-center mr8" v-if="item.lable">
									<image class="w24 h24 mr8" src="@/static/images/live/diamond.png"></image>
									<text>{{item.lable}}</text>
								</view>
								<text style="color: #FFDA73;white-space: nowrap;" class=" mr8">{{item.name}}：</text>
								<text style="flex: 1;min-width: 0;word-break: break-word;">{{item.txt}}</text>
							</u-list-item>
						</u-list> -->



						<view class="list justify-start" v-for="(item,index) in talklist" :key="item.index"
							:id="`list_${index}`" v-show="item.cmd=='sendMsg'">

							<view class="talk-list ml16 justify-start">
								<view class="fs24">
									<!-- <text style="color: #3fc69b;transform: scale(0.8);display: inline-block; "v-if="item.userId==userinfo.userId&&item.cmd=='sendMsg'">我</text> -->
									<!-- <text style="color: #c84e1e;transform: scale(0.8);display: inline-block;" v-if="item.userType==1">[ 管理员 ]</text> -->
									<text style="color: #FFDA73;">{{item.nickName}}：</text>
									<text class='fs24 colorf'>{{item.msg}}</text>
								</view>
							</view>
						</view>
						<!-- <view class="list justify-start" v-for="(item,index) in talklist" :key="item.index"
							:id="`list_${index}`" v-show="item.cmd=='sendMsg'">
						
							<view class="talk-list ml16 justify-start">
								<view class="fs24">
									<text style="color: #3fc69b;transform: scale(0.8);display: inline-block; "
										v-if="item.userId==userinfo.userId&&item.cmd=='sendMsg'">我</text>
									<text style="color: #c84e1e;transform: scale(0.8);display: inline-block;" v-if="item.userType==1">
										[ 管理员 ]</text>
									<text style="color: #FFDA73;">{{item.nickName}}：</text>
									<text class='fs24 colorf'>{{item.msg}}</text>
								</view>
							</view>
						</view> -->
						<view v-if="showWelcomeMessage" class="welcome-message">
							<view class="list justify-start" v-for="(item,index) in talklist" :key="item.index"
								:id="`list_${index}`" v-show="item.cmd=='entry'||item.cmd=='out'">
								<view class="talk-list ml16 justify-start">
									<view class="fs24">
										<text style="color: #ff89d6;">{{item.nickName}} </text>
										<text class='fs24 colorf'> {{item.msg}}直播间{{messageContent}}</text>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="justify-between p24">
					<view class="u-flex-y-center"
						style="background:rgba(255,255,255,0.2);padding:18rpx 14rpx 18rpx 32rpx;width: 526rpx;box-sizing:border-box;border-radius:36rpx;">
						<u-input :placeholder="placeholderText" border="none" customStyle='font-size:24rpx;'
							v-model="value" shape='circle' color='#fff' placeholderStyle='color:#e7e7e7' class="ml20"
							@keydown.enter="sendMsg" @confirm="sendMsg">
						</u-input>
						<!-- <image @click="sendMsg" class="w44 h44" src="@/static/images/live/like.png"></image> -->
					</view>
					<!-- :disabled='talkdisabled' ></u-input> -->
					<!-- <view @click="sendMsg" class="colorf center ml10 fs24">发送</view> -->
					<view class="justify-between mr30  align-center">
						<!-- <view class="icon-bg ml20" @click="answerbtn=!answerbtn">
							<image src="/static/images/redbag.png" class="w40 h40"></image>
						</view> -->
						<view class="icon-bg ml20" @click="shopping=!shopping">
							<image src="/static/images/shopping.png" class="w48 h48"></image>
						</view>
						<view class="icon-bg ml20" @click="showziliao=!showziliao">
							<image src="/static/images/more-icon.png" class="w48 h48"></image>
						</view>
						<!-- <view class="icon-bg ml20" :class="{ 'zoom-button-active': isZoom }"
							@touchstart="handleTouchStart" @touchend="handleTouchEnd">
							<image src="/static/images/dianzan.png" class="w40 h40"></image>
						</view> -->
					</view>
				</view>
			</view>
		</view>

		<!-- <u-popup :show="showadd" @close="close" @open="open" round='20rpx' bgColor='#fffee1'>
			<view class="addchat p20">
				<view class="u-flex-row-reverse u-flex">
					<u-icon name="close" size="18" @click="showadd=!showadd"></u-icon>
				</view>
				<view class="column align-center">
					<view class="fs36" style="color: #ff5c03;">扫码添加助教老师</view>
					<view class="fs28 color6">扫码添加助教老师</view>
					<view class="p10 mt40" style="border: #ff5c03 solid 2rpx;">
						<image :src="codeimg" class="wh180" @touchstart="longPress" @touchend="cancelLongPress">
						</image>
					</view>
					<view class="color6 mt20">长按识别二维码</view>
				</view>
			</view>
		</u-popup> -->
		<u-popup :show="showziliao" @close="closes" round='20' bgColor='#fffee1'>
			<view class="addchat p20 bgf" style="border-radius: 20rpx;">
				<view class="u-flex-row-reverse u-flex">
					<u-icon name="close" size="18" @click="showziliao=!showziliao"></u-icon>
				</view>
				<view class="column align-center h400">
					<view class="fs36 " style="color: #ff5c03;">资料</view>
					<view v-html="livedata.liveDesc"></view>
				</view>
			</view>
		</u-popup>



		<!-- 抽奖 -->
		<!-- <u-popup :show="answerbtn" @close="closeanswer" round='40rpx' bgColor='#fff'>
			<view class=" p20 bgf" style="border-radius: 40rpx;height: fit-content;">
				<view class="u-flex-row-reverse u-flex">
					<u-icon name="close" size="18" @click="answerbtn=!answerbtn"></u-icon>
				</view>
				<view class="column align-center h400">
					<view class="fs36 " style="color: #000000;font-weight: bold;">答题获取红包/积分奖励</view>
					<view class="answerpop" @click="noredanswer">
						<view class="color6 w350 fs24">
							边玩边学，解锁你的知识巅峰！
						</view>
						<view class="answera">答题挑战</view>
					</view>
					<view class="answerpop">

						<view class="color6 fs24" v-if='redanswertips&&redanswertips.length>0'>
							🔥 <text style="color: #ff5c03;" class="fs30 bold">{{redanswertips[1].probability}}</text>
							%用户首抽得
							<text style="color: #ff5c03;" class="fs40 bold">{{redanswertips[1].maxAmount}}</text>元
						</view>
						<view v-else class="color6 w350 fs24">
							随机奖励
						</view>
						<view class="answera" @click="redbagAnswer">
							<image src="/static/images/baganswer.png"></image>
							<view> 获得红包</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup> -->


		<!-- <u-popup :show="showAnswer" @close="closest" round='40' bgColor='#fffee1' mode="center">
			<view class="answerbox p20 bgf">
				<view class="u-flex-row-reverse u-flex">
					<u-icon name="close" size="18" @click="closest"></u-icon>
				</view>
				<view class="column align-center ">
					<view v-if="answerlist.type==1" style="width: 100%;">
						<view class="mb40" style="text-align: center;">
							<text class="color9 fs24">（单选）</text>{{answerlist.title}}
						</view>
						<view v-for="(item,index) in answerlist.content" :key="index"
							:class=" checkboxValue[0]== item.label?'answeract itemanswer':'itemanswer' "
							@click="handleCheckboxSelect(item.label)">{{item.label}}. {{item.content}}</view>
					</view>
					<view v-if="answerlist.type==2" style="width: 100%;">
						<view class="mb40 " style="text-align: center;">
							<text class="color9 fs24">（多选）</text>{{answerlist.title}}
						</view>
						<view v-for="(item,index) in answerlist.content" :key="index"
							:class=" checkboxValue.includes(item.label)?'answeract itemanswer':'itemanswer' "
							@click="handleCheckboxSelect(item.label)">{{item.label}}. {{item.content}}</view>
						<view class=" submitbtn" @click="submitAnswers">确认</view>
					</view>
					<view class="fs24 mtb20 " style="color: #717171;">
						{{answerfrist+1}}/{{Answerlistall}}
					</view>
				</view>
			</view>
		</u-popup> -->


		<!-- 	<u-popup :show="showAnswerred" @close="closestred" round='40' bgColor='#fffee1' mode="center">
			<view class="answerbox p20 bgf">
				<view class="u-flex-row-reverse u-flex">
					<u-icon name="close" size="18" @click="closestred"></u-icon>
				</view>
				<view class="column align-center ">
					<view v-if="answerlist.type==1" style="width: 100%;">
						<view class="mb40" style="text-align: center;">
							<text class="color9 fs24">（单选）</text>{{answerlist.title}}
						</view>
						<view v-for="(item,index) in answerlist.content" :key="index"
							:class=" checkboxValue[0]== item.label?'answeract itemanswer':'itemanswer' "
							@click="handleCheckboxSelect(item.label)">{{item.label}}. {{item.content}}</view>
					</view>
					<view v-if="answerlist.type==2" style="width: 100%;">
						<view class="mb40 " style="text-align: center;">
							<text class="color9 fs24">（多选）</text>{{answerlist.title}}
						</view>
						<view v-for="(item,index) in answerlist.content" :key="index"
							:class=" checkboxValue.includes(item.label)?'answeract itemanswer':'itemanswer' "
							@click="handleCheckboxSelect(item.label)">{{item.label}}. {{item.content}}</view>
						<view class=" submitbtn" @click="submitAnswers">确认</view>
					</view>
					<view class="fs24 mtb20 " style="color: #717171;">
						{{answerfrist+1}}/{{Answerlistall}}
					</view>
				</view>
			</view>
		</u-popup> -->

		<!-- 小黄车弹窗 -->
		<u-popup :show="shopping" @close="closeshop" @open="open" round='20rpx' bgColor='#f3f5f9'>
			<view class="shoppop">
				<view class="shoppop-top">
					<u-avatar :src="livedata.liveImgUrl" size="36" class="ml16"></u-avatar>
					<view class="search-input u-flex-y-center">
						<image style="width: 24rpx;height: 24rpx;margin-right: 16rpx;" src="@/static/images/search.png">
						</image>
						<input placeholder="搜索商品或序号" />
					</view>
					<view class="t-c search-top" style="margin-right: 48rpx;" @click="onCollect">
						<image style="width: 32rpx;height: 32rpx;" src="@/static/images/collect.png"></image>
						<view>收藏</view>
					</view>
					<view class="t-c search-top" @click="goOrderList">
						<image style="width: 32rpx;height: 32rpx;" src="@/static/images/order.png"></image>
						<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 :src="item.imgUrl" mode="widthFix"></image>
							<view class="goods-label">{{index+1}}</view>
						</view>
						<view class="goods-right">
							<view class="goods-title">{{item.productName}}</view>
							<view class="goods-details">{{item.productIntroduce}}</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  u-flex-y-center">
									<view class="collect-btn">
										<image @click="onCollect(item)" style="width: 32rpx;height: 32rpx;"
											src="/static/images/collect.png">
										</image>
									</view>
									<view v-if="item.status==1" class="shop-btn" @click="goShop(item.productId)">去购买
									</view>
									<view v-else-if="item.status==0" @click="goShop(item.productId)" class="shop-btn">
										已下架</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Hls from 'hls.js';
	import CryptoJS from 'crypto-js'
	import {
		liveDataLike, // 点赞
		collectStore, // 收藏/取消收藏
		follow, // 关注/取消关注
		getRecentLiveViewers, //获取直播间用户(展示在线用户)
		// 小黄车
		liveStore, //店铺展示,
		// liveGoodsDetail, //商品详情,
		liveOrderUser, //正在购买
		getLiveInfo, //获取直播间信息接口
		getLiveViewData //直播间点赞、关注、在线人数数据
	} from '@/api/live'
	import {
		liveOrderList, // 订单列表
	} from '@/api/order'

	import parse from '../../uni_modules/uview-plus/libs/config/props/parse';
	import {
		LiveWS
	} from '@/utils/liveWS.js'
	import {
		getlive,
		gettextlist,
		getAnswerlist,
		submitAnswer
	} from '@/api/home'
	// var wsUrl = "ws://192.168.10.166:17114/app/webSocket";

	// var wsUrl = "ws://192.168.10.166:7114/app/webSocket"; //余红奇
	var wsUrl = "ws://live.test.ylrztop.com/prod-api/app/webSocket"; //余红奇
	// var wsUrl = "ws://nd383294.natappfree.cc/app/webSocket"; //余红奇
	// var wsUrl = "ws://v56c9b8e.natappfree.cc/app/webSocket"; //余红奇
	// var wsUrl = "ws://192.168.10.170:7114/app/webSocket"; //陈果
	// var wsUrl = "ws://live.ylrzcloud.com/socket/app/webSocket";
	var pingpangTimes = null;
	var initTimes = null;
	var isSocketOpen = false;
	var socket = null;

	export default {
		data() {
			return {
				boxHeight: 300, //小黄车高度
				isFollow: true,
				liveViewData: {},
				liveViewers: [], //观众
				likeName: 0,
				hlsPlayer: null, // HLS播放器实例,
				livingUrl: "",
				products: {},
				store: {},
				orderUser: {}, //正在购买
				userType: 0,
				timestamp: '',
				liveId: null,
				// userId: uni.getStorageSync("userInfo.userId"),
				livedata: {},
				codeimg: '',
				placeholderText: '说点什么...',
				isZoom: false, //点赞按钮控制是否放大
				userinfo: '', //用户信息
				// path: 'http://192.168.10.166/dev-api', //余红奇
				// path: 'http://v56c9b8e.natappfree.cc', //余红奇
				path: 'live.test.ylrztop.com/prod-api', //余红奇
				// path: 'http://192.168.10.170/dev-api', //陈果
				value: '',
				talkdisabled: false, //输入框是否禁用
				autoplay: false, //视频自动播放
				showadd: false,
				talklist: [],
				scrollIntoView: '',
				bufferRate: 0, //视频缓冲时间
				playDuration: 0, //视频播放时间
				videoContext: '',
				thistime: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss'),
				upDown: true, //是否视频显示隐藏
				isLongPress: false, // 是否长按
				timeout: null, // 计时器
				showWelcomeMessage: false,
				isSubmit: false,
				messageContent: "",
				showziliao: false,
				isScreen: true,
				showAnswer: false, //展示答题
				Answerlistall: {}, //所有题目
				answerlist: {}, //当前题目
				answerfrist: 0, //当前选择
				checkboxValue: [], //多选数据
				checkboxFormValue: "", //多选数据
				allAnswerLists: [], // 新增：存储所有题目列表
				showAnswerred: false, //展示红包答题
				answerbtn: false, //答题按钮弹窗
				redallAnswerLists: [], //储存所有红包答题列表
				redanswerAll: [], //红包当前题目
				redanswerList: [], //红包答题列表
				redanswertips: [], //红包答题提示
				shopping: false, //小黄车弹窗
				scrollTop: 0, //弹幕
				old: {
					scrollTop: 0
				},
				liveData: {}, //直播间点赞、关注、在线人数数据

				// shopList: [{
				// 	title: '史士昊老师四神汤健脾消食疗法',
				// 	details: '看它来喘口气，小小震撼，',
				// 	people: '45708 '
				// },{
				// 	title: '史士昊老师四神汤健脾消食疗法',
				// 	details: '看它来喘口气，小小震撼，',
				// 	people: '45708 '
				// }],
				// chatList: [{
				// 		lable: '达人',
				// 		name: '锅巴',
				// 		txt: '中医调节身体确实'
				// 	},
				// 	{
				// 		lable: '',
				// 		name: '从芯开始',
				// 		txt: '来了'
				// 	}
				// 	{
				// 		lable: '',
				// 		name: '北京的帅小伙：',
				// 		txt: '来了来了，上茶'
				// 	},
				// 	{
				// 		lable: '',
				// 		name: '萍萍',
				// 		txt: '来了'
				// 	}
				// ]

			};
		},
		onLoad(options) {

			if (options.liveId) {
				this.liveId = options.liveId;
				// this.liveId = decodeURIComponent(options.liveId);
				console.log("接收到的liveId:", this.liveId);
			}

		},
		computed: {
			filteredViewers() {
				// 只返回前3项（索引0、1、2）
				return this.liveViewers.slice(0, 3);
			}
		},
		// computed: {
		// 	 userId() {
		// 	       return this.$store.state.user.userId
		// 	     }
		// },
		mounted() {
			// this.onLike() 
			this.getliveViewData() ////直播间点赞、关注、在线人数数据
			this.intervalId = setInterval(() => {
				this.getliveViewData();
			}, 60 * 1000);
			// this.getLiveinformation() // 获取直播间信息接口
			this.getliveOrder() //正在购买
			this.getliveStore() // 获取小黄车 店铺展示
			// this.getliveGoods() // 获取小黄车 商品详情
			this.getliveUser() // 获取直播间用户
			this.initTime()
			// this.initWebSocket()
			this.initSocket()
			var that = this;
			uni.$on('initSocket', () => {
				that.initSocket()
			})
			uni.$on('sendMsg', (item) => {
				that.sendMsg(item)
			})
			uni.$on('closeWebSocket', () => {
				that.closeWebSocket()
			})
			this.getEWechatSdk();

			this.getliving() //hls
			this.gettalklist()
			// this.getAnswerlists()
			this.userinfo = JSON.parse(uni.getStorageSync("userInfo"))

		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo')
			// console.log(this.videoContext)
		},
		onUnload() {
			// 销毁HLS播放器
			if (this.hlsPlayer) {
				this.hlsPlayer.destroy();
				this.hlsPlayer = null;
			}
		},
		methods: {
			goStore() {
				uni.navigateTo({
					url: '/pages_shop/store?liveId=' + this.liveId
				})
				// uni.navigateTo({
				// 	url: "/pages_shop/store"
				// })
			},
			// 去订单列表
			goOrderList() {
				uni.navigateTo({
					url: "/pages_shop/order"
				})
			},

			// 初始化HLS播放器
			initHlsPlayer() {
				if (Hls.isSupported() && this.livingUrl) {
					const video = document.getElementById('myVideo');
					if (video) {
						this.hlsPlayer = new Hls();
						this.hlsPlayer.loadSource(this.livingUrl);
						this.hlsPlayer.attachMedia(video);
						this.hlsPlayer.on(Hls.Events.MANIFEST_PARSED, () => {
							video.play();
						});
					}
				}
			},

			// 视频错误处理
			videoError(e) {
				console.error('视频播放错误:', e.detail.errMsg);
				// 尝试重新加载或切换到备用流
				if (this.livingUrl) {
					setTimeout(() => {
						this.videoContext.play();
					}, 2000);
				}
			},

			getliving() {
				const param = {
					id: this.liveId
				}
				getlive(param).then(res => {
					if (res.code == 200) {
						this.livedata = res.data
						// this.codeimg = res.data.qwQrCode
						this.livingUrl = res.data.livingUrl; // 确保设置livingUrl

						// 检查是否是HLS流
						if (this.livingUrl && this.livingUrl.indexOf('.m3u8') > -1) {
							// 在H5平台初始化HLS播放器
							// #ifdef H5
							this.initHlsPlayer();
							// #endif

							// 其他平台（App、小程序）原生支持HLS
							this.$nextTick(() => {
								if (this.videoContext) {
									this.videoContext.play();
								}
							});
						} else {
							// 非HLS流正常播放
							if (this.livedata.liveType == 1) {
								this.autoplay = true
								this.livingUrl=res.videoUrl
								this.videoContext.seek(this.livedata.nowDuration)
							} else if(this.livedata.liveType == 2) {
								this.autoplay = true
								this.getLiveinformation()
								// this.livingUrl=res.livingUrl
							} else {
								this.autoplay = false
								this.placeholderText = "直播开始才能发言讨论"
								this.talkdisabled = true
							}
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			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() {
				uni.navigateBack();
				closeWebSocket();
			},
			// // 收藏商品
			// collectProducts(){

			// },

			//直播间点赞、关注、在线人数数据
			getliveViewData() {
				getLiveViewData(this.liveId).then(res => {
						if (res.code == 200) {
							// console.log("直播间点赞、关注、在线人数数据>>>>", res)
							this.liveViewData = res
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					rej => {}
				);
			},
			//正在购买
			getliveOrder() {
				liveOrderUser(this.liveId).then(res => {
						if (res.code == 200) {
							console.log("正在购买>>>>", res)
							this.orderUser = res

						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					rej => {}
				);
			},
			//小黄车 店铺展示
			getliveStore() {
				let data = {
					pageSize: 10,
					page: 1
				}
				liveStore(this.liveId, data).then(res => {
						if (res.code == 200) {
							console.log("小黄车 店铺展示>>>>", res)
							this.products = res.data
							// this.store = res.store
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					rej => {}
				);
			},
			// 获取直播间信息接口
			getLiveinformation() {
				getLiveInfo(this.liveId).then(res => {
						if (res.code == 200) {
							console.log("获取直播间信息接口>>>>", res)
							this.livingUrl = res.livingUrl

						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					rej => {}
				);
			},

			// 获取直播间用户
			getliveUser() {
				getRecentLiveViewers(this.liveId).then(res => {
						if (res.code == 200) {
							console.log("获取直播间用户>>>>", res)
							this.liveViewers = res.recentLiveViewers
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					rej => {}
				);
			},

			// 点赞
			onLike() {
				liveDataLike(this.liveId).then(res => {
						if (res.code == 200) {
							if (
								typeof res.msg === 'number' || (typeof res.msg === 'string' && /^\d+$/.test(res.msg
									.trim()))
							) {
								this.liveData++
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					rej => {}
				);

			},
			// 去购买,跳商品详情
			goShop(item) {
				console.log("去购买,跳商品详情", item)
				uni.navigateTo({
					url: '/pages_shop/goods?productId=' + item + '&liveId=' + this.liveId
				})
			},

			// 收藏
			onCollect(item) {
				console.log("item>>>", item.productId)
				uni.setStorageSync("storeId", storeId);
				let data = {
					liveId: this.liveId,
					productId: item.productId,
					storeId: this.store.storeId
				}
				collectStore(data).then(res => {
						if (res.code == 200) {
							console.log("收藏lcollectStore>>>>", res)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					rej => {}
				);
			},
			// 关注
			onFollow() {
				follow(this.liveId).then(res => {
						this.isFollow = !this.isFollow
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					},
					rej => {}
				);
			},
			initTime() {
				const now = new Date();
				this.timestamp = now.getTime(); // 例如：'2023-04-01 12:00:00'
				// 或者使用其他格式化方法，例如：
				// this.currentTime = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()} ${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
			},
			// initWebSocket() {
			//       const liveWS = new LiveWS('ws://your-server.com', 123, 456);

			//       // 从 URL 中解析 timestamp
			//       const urlParams = new URL(liveWS.url).searchParams;
			//       this.timestamp = urlParams.get('timestamp');
			//       // console.log('Timestamp:', timestamp);
			//     },

			// 弹幕滚动
			lowerChat: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},


			loadmore() {
				// for (let i = 0; i < 30; i++) {
				//   this.indexList.push({
				//     url: this.shopList[uni.$u.random(0, this.shopList.length - 1)],
				//   });
				// }
			},

			// 弹幕
			scrollchat() {
				// this.loadmore();
			},


			noredanswer() {
				if (this.Answerlistall > 0) {
					this.showAnswer = !this.this.showAnswer
				} else {
					uni.showToast({
						title: '暂无题目',
						icon: 'none',
					});
				}
			},
			redbagAnswer() {
				this.showAnswerred = !this.showAnswerred
				this.answerbtn = !this.answerbtn

			},
			submitAnswers() {
				if (this.isSubmit) return;
				this.isSubmit = true;
				const data = {
					questionId: this.answerlist.id,
					answer: this.checkboxFormValue
				}
				submitAnswer(data).then(res => {
					if (res.code == 200) {

						uni.showToast({
							title: res.msg,
							icon: 'none',
						});
					}
					// 本地切换下一题
					if (this.answerfrist < this.Answerlistall - 1) {
						this.answerfrist++;
						this.answerlist = this.allAnswerLists[this.answerfrist];
						this.answerlist.content = JSON.parse(this.answerlist.content);
					} else {
						uni.showToast({
							title: '已是最后一题',
							icon: 'none'
						});
						this.showAnswer = false; // 自动关闭弹窗
					}
					this.checkboxValue = []
					this.checkboxFormValue = "";
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}).finally(e => {
					this.isSubmit = false;
				})
			},
			handleCheckboxSelect(value) {
				const index = this.checkboxValue.indexOf(value)
				console.log(value)
				if (this.answerlist.type == 1) {
					this.checkboxValue = [value]
					this.checkboxFormValue = this.checkboxValue.join(',')
					// setTimeout(() => {
					//       uni.showToast({
					//         title: '准备下一题',
					//         icon: 'none',
					//         duration: 2000
					//       });
					//     }, 1000);
					this.submitAnswers()
					console.log(this.checkboxValue)
				} else if (this.answerlist.type == 2) {
					if (index > -1) {
						this.checkboxValue.splice(index, 1)
						this.checkboxFormValue = this.checkboxValue.join(',')
					} else {
						this.checkboxValue.push(value)
						this.checkboxFormValue = this.checkboxValue.join(',')
					}
					console.log(this.checkboxFormValue)
				}
			},
			getAnswerlists() {
				console.log(123)
				const data = {
					liveId: this.liveId
				}
				getAnswerlist(data).then(res => {
					if (res.code == 200) {
						if (res.data.length > 0) {
							this.allAnswerLists = res.data; // 存储所有题目
							this.Answerlistall = res.data.length;
							if (this.allAnswerLists.length > 0) {
								this.answerlist = this.allAnswerLists[0];
								this.answerlist.content = JSON.parse(this.allAnswerLists[0].content);
							}
							this.showAnswer = true
						} else {
							this.showAnswer = false
						}

					}
				})
			},
			gettalklist() {
				const param = {
					id: this.liveId
				}
				gettextlist(param).then(res => {
					if (res.code == 200) {
						this.talklist = res.data
						// console.log(res.data);
						this.$nextTick(() => {
							this.scrollIntoView = `list_${this.talklist.length-1}`
						})
					}
				})
			},
			open() {

			},
			close() {
				this.showadd = !this.showadd
			},
			closes() {
				this.showziliao = !this.showziliao
			},
			closest() {
				this.showAnswer = !this.showAnswer
			},
			closestred() {
				this.showAnswerred = !this.showAnswerred
			},
			closeanswer() {
				this.answerbtn = !this.answerbtn
			},
			// 关闭小黄车
			closeshop() {
				this.shopping = !this.shopping
			},
			longPress() {
				this.timeout = setTimeout(() => {
					this.isLongPress = true;
					// 执行保存图片的操作
					uni.saveImageToPhotosAlbum({
						filePath: this.livedata.qwQrCode, // 图片的本地路径或网络路径
						success: () => {
							uni.showToast({
								title: '保存成功'
							});
						},
						fail: () => {
							uni.showToast({
								title: '',
								icon: 'none'
							});
						}
					});
				}, 500); // 设置长按的阈值时间，这里是500毫秒
			},
			cancelLongPress() {
				clearTimeout(this.timeout);
				this.isLongPress = false;
			},
			// 触摸开始
			handleTouchStart() {
				this.isZoom = true; // 触发放大效果
			},
			// 触摸结束
			handleTouchEnd() {
				this.isZoom = false; // 恢复原状
			},
			// getliving() {
			// 	const param = {
			// 		id: this.liveId
			// 	}
			// 	getlive(param).then(res => {
			// 		if (res.code == 200) {
			// 			this.livedata = res.data
			// 			this.codeimg = res.data.qwQrCode
			// 			if (this.livedata.status == 1) {
			// 				this.autoplay = true
			// 				this.videoContext.seek(this.livedata.nowDuration)
			// 				// console.log(this.autoplay)
			// 			} else {
			// 				this.autoplay = false
			// 				this.placeholderText = "直播开始才能发言讨论"
			// 				this.talkdisabled = true
			// 			}
			// 			console.log(this.autoplay)
			// 		} else {
			// 			uni.showToast({
			// 				title: res.msg,
			// 				icon: 'none',
			// 				duration: 2000
			// 			});
			// 		}
			// 	})
			// },
			getEWechatSdk() {
				// 只在H5平台执行
				// #ifdef H5
				let eWechatSdk = '';
				if (/(Android)/i.test(navigator.userAgent)) {
					eWechatSdk = 'jWeixin';
				} else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
					eWechatSdk = 'wx';
				} else {
					eWechatSdk = 'jWeixin';
				}
				uni.setStorageSync("wxSdk", eWechatSdk);
				// #endif
			},
			closeWebSocket() {
				if (socket != null) {
					uni.closeSocket();
				}
				clearInterval(pingpangTimes)
			},
			reConnect() {
				var that = this;
				try {
					uni.closeSocket();
				} catch (e) {

				}
				setTimeout(function() {
					that.initSocket();
				}, 10000);

			},
			initSocket() {
				this.userinfo = JSON.parse(uni.getStorageSync("userInfo"))
				// console.log("liveId", this.liveId);
				// console.log("userId", this.userinfo.userId);
				// console.log("userType", this.userType);
				// console.log("timestamp", this.timestamp);
				let signature = CryptoJS.HmacSHA256(
					CryptoJS.enc.Utf8.parse(this.liveId.toString() + this.userinfo.userId + this.userType + this
						.timestamp),
					CryptoJS.enc.Utf8.parse(this.timestamp)).toString(CryptoJS.enc.Hex)

				var that = this;
				// console.log("initSocket")
				//创建一个socket连接
				socket = uni.connectSocket({
					// url: wsUrl+"?userId=40486&liveId=2",
					// 	url: wsUrl + "?userId=" + this.userid + "&liveId=" +
					// this.liveId+"&AppToken="+'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiI0IiwiaWF0IjoxNzQwNzIxMDQ1LCJleHAiOjE3NDEzMjU4NDV9.PgS83JTMSJgVFD6vGAhUsEPbS6Az4yMyX8wVug61TZNTB3092CtvANo-AB9ZG4NdSBLgLrf4litM3vvTk-FK0g',
					// 

					// url: wsUrl + "?userId=" + this.userId + "&liveId=" + this.liveId + "&AppToken=" + uni
					// 	.getStorageSync('AppToken'),

					url: wsUrl + "?userId=" + this.userinfo.userId + "&liveId=" + this.liveId + "&userType=" + this
						.userType +
						"&timestamp=" + this.timestamp + "&signature=" + signature,
					multiple: true,
					success: res => {
						//先确保清除了之前的心跳定时器
						clearInterval(pingpangTimes)
						uni.onSocketMessage((res) => {
							if (res.data.code == 500) {
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
									duration: 2000
								});
							}
							const redata = JSON.parse(res.data);
							console.log("WebSocket拿到的东西", redata)
							this.talklist.push(redata.data)
							this.$nextTick(() => {
								this.scrollIntoView = `list_${this.talklist.length-1}`
							})
							if (redata.cmd == 'deleteId') {
								uni.$emit('deleteId');
							} else if (redata.cmd == 'init') {
								uni.$emit('init', redata.data);
							} else if (redata.cmd == 'reload') {
								uni.$emit('reload');
							} else if (redata.data.cmd == 'sendRedPacketQuestion') {
								const list = JSON.parse(redata.data.data)
								this.redanswerAll = [...this.redanswerAll, ...list]
								if (this.redanswerAll[1].randomAmount !== null) {
									this.redanswertips = JSON.parse(this.redanswerAll[0].randomAmount)
								}
								console.log(this.redanswertips)
								console.log(this.redanswerAll)
							} else if (redata.data.cmd == 'entry') {
								this.showWelcomeMessage = true
								// setTimeout(() => {
								// 	this.showWelcomeMessage = false;
								//   }, 1000);
								uni.$emit('entry', redata.data);
								// console.log(redata.data)/
							}

						})
					},
					error: res => {
						uni.$emit('websocket', 0);
						console.log(res)
					},
				})
				//监听socket打开
				uni.onSocketOpen(() => {
					isSocketOpen = true
					console.log('WebSocket连接已打开！!');
					// uni.$emit('websocket',1);
					uni.showToast({
						title: "插件已打开",
						icon: 'none',
					});
				})
				//监听socket关闭
				uni.onSocketClose(() => {
					isSocketOpen = false
					clearInterval(pingpangTimes)
					console.log('WebSocket连接已关闭！');
					// uni.$emit('websocket',0);
					uni.showToast({
						title: "插件离线",
						icon: 'none',
					});
					//重连
					that.reConnect()
				})
				//监听socket错误
				uni.onSocketError(() => {
					isSocketOpen = false
					clearInterval(pingpangTimes)
					console.log('WebSocket连接打开失败');
					// uni.$emit('websocket',0);
					uni.showToast({
						title: "插件离线",
						icon: 'none',
					});
					uni.showModal({
						content: '聊天连接失败是否重新尝试连接',
						success() {
							that.reConnect()
						}
					})
				})
			},
			sendMsg() {
				// this.userinfo = JSON.parse(uni.getStorageSync("userInfo"))
				if (isSocketOpen) {
					const data = {
						liveId: this.liveId,
						userId: this.userinfo.userId,
						userType: 0,
						cmd: "sendMsg",
						msg: this.value,
						nickName: this.userinfo.nickName,
						avatar: this.userinfo.avatar
					}
					if (this.value == "") {
						uni.showToast({
							title: "不能发送空消息",
							icon: 'none',

						});
					} else {
						socket.send({
							data: JSON.stringify(data),
							success: () => {
								// this.gettalklist()
								console.log("发送成功")
								this.value = ''
							},
							fail: () => {
								console.log("发送失败")
							}
						})
					}
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	// 抽奖
	// .answerpop {
	// 	background: linear-gradient(to right, #fff7f8, #fee1e2);
	// 	margin-top: 30rpx;
	// 	padding: 10rpx 20rpx;
	// 	width: calc(100% - 40rpx);
	// 	border-radius: 20rpx;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-between;
	// 	box-shadow: 2px 2px 4px 0 rgba(255, 124, 126, 0.1);

	// 	.answera {
	// 		display: flex;
	// 		justify-content: center;
	// 		background-color: #fff;
	// 		padding: 20rpx 0;
	// 		width: 35%;
	// 		border-radius: 40rpx;
	// 		align-items: center;
	// 		margin: 10rpx 0;
	// 		box-shadow: 2px 2px 4px 0 rgba(72, 72, 72, 0.1);

	// 		image {
	// 			width: 40rpx;
	// 			height: 40rpx;
	// 			margin-right: 10rpx;
	// 		}
	// 	}
	// }

	// .submitbtn {
	// 	width: 260rpx;
	// 	margin: 0 auto;
	// 	text-align: center;
	// 	border-radius: 80rpx;
	// 	padding: 20rpx 0;
	// 	color: #fff;
	// 	background-color: #ff5c03;
	// }

	// .itemanswer {
	// 	padding: 20rpx 20rpx;
	// 	text-align: center;
	// 	border-radius: 80rpx;
	// 	border: 2rpx solid #dddddd;
	// 	margin: 12rpx 0;
	// 	color: #555;
	// 	width: calc(100% - 40rpx);
	// }

	// .answeract {
	// 	background-color: rgba(0, 202, 166, 1);
	// 	color: #fff;
	// }

	// .answerbox {
	// 	width: 600rpx;
	// 	border-radius: 20rpx;
	// }

	// .welcome-message {
	// 	position: fixed;
	// 	width: 100%;
	// 	bottom: 120rpx;
	// 	left: 50%;
	// 	transform: translateX(-50%);
	// 	color: white;
	// 	padding: 10px 20px;
	// 	border-radius: 20px;
	// 	animation: fadeOut 1s ease 1s forwards;
	// 	z-index: 1000;
	// }

	// @keyframes fadeOut {
	// 	from {
	// 		opacity: 1;
	// 	}

	// 	to {
	// 		opacity: 0;
	// 	}
	// }

	// .container {
	// 	position: relative;
	// 	width: 100%;
	// 	height: 100vh;
	// 	overflow: hidden;
	// }

	// .talktext {
	// 	border-radius: 8rpx;
	// 	background-color: rgba(255, 255, 255, 0.1);

	// 	view {
	// 		width: 100%;
	// 	}
	// }

	// .talk-list {
	// 	border-radius: 30rpx;
	// 	background-color: rgba(255, 255, 255, 0.1);
	// 	padding: 10rpx 30rpx;
	// }

	// .zoom-button-active {
	// 	transform: scale(1.5);
	// }

	// .background-image {
	// 	position: absolute;
	// 	top: 0;
	// 	left: -40rpx;
	// 	width: 110%;
	// 	height: 110%;
	// 	object-fit: cover;
	// 	filter: blur(20px);
	// 	z-index: 0;
	// }

	// .background-images {
	// 	position: absolute;
	// 	top: 0;
	// 	left: -40rpx;
	// 	width: 110%;
	// 	height: 110%;
	// 	object-fit: cover;
	// 	filter: blur(20px);
	// 	z-index: 6;
	// }

	// .blackbg {
	// 	position: absolute;
	// 	top: 0;
	// 	left: 0;
	// 	width: 100%;
	// 	height: 100%;
	// 	background: rgba(0, 0, 0, 0.7);
	// 	object-fit: cover;
	// 	filter: blur(10px);
	// 	z-index: 1;
	// }

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

		.content-top {
			width: 100%;
			margin-top: 150rpx;
			display: flex;
			align-items: center;
			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;
		}
	}

	.videolist {
		position: relative;
	}

	.vedio {
		// height: 500rpx;
		height: 100vh;
		/* 占屏幕高度的80% */
		width: 100%;
		background-color: rgba(0, 0, 0, 0.6);
	}

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

	.popup-video {
		position: absolute;
		top: 30%;
		height: 500rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		color: #fff;
		z-index: 9;

		.more {
			background-color: #3280fe;
			border-radius: 80rpx;
			width: 280rpx;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
		}
	}

	.icon-bg {
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		width: 72rpx;
		height: 72rpx;
		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: 600rpx;
		left: 24rpx;
		padding: 6rpx 20rpx;
		background: rgba(230, 154, 34, 0.7);
		border-radius: 24rpx;
		z-index: 9;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
	}

	.side-group {
		position: absolute;
		top: 30%;
		right: 50rpx;
		z-index: 9;
		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;
			}
		}


	}

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

					image {
						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: 28rpx;
						color: #000000;

					}

					.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;
								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: 26rpx;
								color: #FFFFFF;

							}
						}
					}
				}
			}
		}
	}

	:deep(.u-list-item) {
		width: 100%;
		display: flex;
		align-items: center;
	}
</style>