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">
					<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'
						: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 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="u-flex-y-center" style="margin-bottom: 22rpx;">
					<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="getOrderList">
						<image style="width: 32rpx;height: 32rpx;" src="@/static/images/order.png"></image>
						<view>订单</view>
					</view>
				</view>
				<view class=""></view>
				<u-list height="350" class="shop-list" @scrolltolower="scrolltolower">
					<!-- <view class="list-item">
						<view class="goods-img">
							<image src="/static/images/a.jpg"></image>
							<view class="goods-label">1</view>
						</view>
						<view class="goods-right">
							<view class="goods-title">史士昊老师四神汤健脾消食疗法</view>
							<view class="goods-details">看它来喘口气，小小震撼，</view>
							<view class="goods-people">45708 人已购</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;">0</text>.00/日</text>
								<view class="btn-group  u-flex-y-center">
									<view class="collect-btn">
										<image style="width: 32rpx;height: 31rpx;" src="/static/images/collect.png">
										</image>
									</view>
									<view class="shop-btn">去购买</view>
								</view>
							</view>
						</view>
					</view> -->

					<u-list-item class="list-item " v-for="(item,index) in products" :key="index">
						<view class="goods-img">
							<image :src="item.imgUrl"></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 class="shop-btn">去购买</view>
								</view>
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Hls from 'hls.js';
	import CryptoJS from 'crypto-js'
	import {
		liveDataLike, // 点赞
		collectStore, // 收藏/取消收藏
		follow, // 关注/取消关注
		getRecentLiveViewers, //获取直播间用户(展示在线用户)
		// 小黄车
		liveStore, //店铺展示,
		liveGoodsDetail, //商品详情,
		liveOrderUser, //正在购买
		getLive, //获取直播间信息接口
		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://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 {
				isFollow: true,
				liveViewData: {},
				liveViewers: [], //观众
				likeName: 0,
				hlsPlayer: null, // HLS播放器实例,
				livingUrl: "",
				products: {},
				store: {},
				orderUser: {}, //正在购买
				userType: 0,
				timestamp: '',
				liveId: uni.getStorageSync("liveId"),
				// userId: uni.getStorageSync("userInfo.userId"),
				livedata: {},
				codeimg: '',
				placeholderText: '说点什么...',
				isZoom: false, //点赞按钮控制是否放大
				userinfo: '', //用户信息
				path: 'http://192.168.10.166/dev-api', //余红奇
				// path: 'http://192.168.10.170/dev-api', //陈果
				value: '',
				talkdisabled: false, //输入框是否禁用
				autoplay: true, //视频自动播放
				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 '
				// }, {
				// 	title: '史士昊老师四神汤健脾消食疗法',
				// 	details: '看它来喘口气，小小震撼，',
				// 	people: '45708 '
				// }, {
				// 	title: '史士昊老师四神汤健脾消食疗法',
				// 	details: '看它来喘口气，小小震撼，',
				// 	people: '45708 '
				// }, {
				// 	title: '史士昊老师四神汤健脾消食疗法',
				// 	details: '看它来喘口气，小小震撼，',
				// 	people: '45708 '
				// }, {
				// 	title: '史士昊老师四神汤健脾消食疗法',
				// 	details: '看它来喘口气，小小震撼，',
				// 	people: '45708 '
				// }],
				// chatList: [{
				// 		lable: '达人',
				// 		name: '锅巴',
				// 		txt: '中医调节身体确实'
				// 	},
				// 	{
				// 		lable: '',
				// 		name: '从芯开始',
				// 		txt: '来了'
				// 	},
				// 	{
				// 		lable: '',
				// 		name: '观众2',
				// 		txt: '已点赞'
				// 	},
				// 	{
				// 		lable: '',
				// 		name: '北京的帅小伙：',
				// 		txt: '来了来了，上茶'
				// 	},
				// 	{
				// 		lable: '',
				// 		name: '萍萍',
				// 		txt: '来了'
				// 	},
				// 	{
				// 		lable: '',
				// 		name: '豆爱生活：',
				// 		txt: '试试看有没有效果'
				// 	},
				// 	{
				// 		lable: '达人',
				// 		name: '锅巴',
				// 		txt: '中医调节身体确实'
				// 	},
				// 	{
				// 		lable: '达人',
				// 		name: '锅巴',
				// 		txt: '中医调节身体确实'
				// 	},
				// 	{
				// 		lable: '达人',
				// 		name: '锅巴',
				// 		txt: '中医调节身体确实中医调节身体确实中医调节身体确实中医调节身体确实'
				// 	}
				// ]

			};
		},
		onLoad(options) {
			// if (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: {
			//获取订单列表
			getOrderList() {
				let data = {
					page: 1,
					pageSize: 10
				}
				liveOrderList(data).then(res => {
						console.log("订单列表>>>>", res)
						this.orderList = res

					},
					rej => {
						console.log("qxj rej:" + JSON.stringify(rej));
					}
				);
			},
			// 初始化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.status == 1) {
								this.autoplay = true
								this.videoContext.seek(this.livedata.nowDuration)
							} 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 => {
						console.log("qxj rej:" + JSON.stringify(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 => {
						console.log("qxj rej:" + JSON.stringify(rej));
					}
				);
			},
			//小黄车 店铺展示
			getliveStore() {
				let data = {
					pageSize: 10,
					page: 1
				}
				liveStore(this.liveId, data).then(res => {
						if (res.code == 200) {
							console.log("小黄车 店铺展示>>>>", res)
							this.products = res.products
							this.store = res.store
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					rej => {
						console.log("qxj rej:" + JSON.stringify(rej));
					}
				);
			},
			//小黄车 商品详情
			getliveGoods() {
				liveGoodsDetail(this.products.productId).then(res => {
						if (res.code == 200) {
							console.log("小黄车 商品详情>>>>", res)
							// this.=res.
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					rej => {
						console.log("qxj rej:" + JSON.stringify(rej));
					}
				);
			},
			// 获取直播间信息接口
			getLiveinformation() {
				getLive(this.liveId).then(res => {
						if (res.code == 200) {
							console.log("获取直播间信息接口>>>>", res)
							this.livingUrl = res.livingUrl

						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					rej => {
						console.log("qxj rej:" + JSON.stringify(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 => {
						console.log("qxj rej:" + JSON.stringify(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 => {
						console.log("qxj rej:" + JSON.stringify(rej));
					}
				);

			},
			// 收藏
			onCollect(item) {
				console.log("item>>>", item.productId)
				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 => {
						console.log("qxj rej:" + JSON.stringify(rej));
					}
				);

			},
			// 关注
			onFollow() {
				follow(this.liveId).then(res => {
						this.isFollow = !this.isFollow
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					},
					rej => {
						console.log("qxj rej:" + JSON.stringify(rej));
					}
				);
			},
			// 店铺
			onShop() {

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

			// 小黄车
			scrolltolower() {
				this.loadmore();
			},
			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)
							// console.log(111,this.talklist)
							this.talklist.push(redata.data)
							this.$nextTick(() => {
								this.scrollIntoView = `list_${this.talklist.length-1}`
							})
							// console.log(222,this.talklist)
							// console.info(redata)
							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: 300rpx;
			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;

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

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

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

					image {
						width: 200rpx;
						height: 200rpx;
					}

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