diff --git a/api/live.js b/api/live.js
new file mode 100644
index 0000000..a1d1b84
--- /dev/null
+++ b/api/live.js
@@ -0,0 +1,144 @@
+import request from "@/utils/requestc.js";
+import requesta from "@/utils/request.js";
+/**
+ * 直播列表
+ */
+export function live(data) {
+	return request.get("zhibo/live" ,data);
+}
+
+/**
+ * 直播详情
+ */
+export function liveDetail(data) {
+	return request.get("zhibo/liveDetail" ,data);
+}
+
+
+/**
+ * 获取直播详情接口
+ */
+
+
+/**
+ * 创建直播间
+ */
+export function createPushLive(data) {
+	return request.post("zhibo/createPushLive", data);
+}
+
+
+/**
+ * 关闭直播间
+ */
+export function stopPushLive(data) {
+	return request.post("zhibo/stopPushLive", data);
+}
+
+
+/**
+ *  绑定用户client客户
+ */
+export function bindUser(data) {
+	return request.post("zhibo/bindUser", data);
+}
+
+
+
+/**
+ * 加入直播间聊天室
+ */
+export function joinChatRoom(data) {
+	return request.post("zhibo/joinChatRoom", data);
+}
+
+
+/**
+ * 直播间聊天室发言
+ */
+export function sendGroupMessage(data) {
+	return request.post("zhibo/sendGroupMessage", data);
+}
+
+
+
+//商品列表
+export function good(data) {
+	return requesta.get("product/spu/lst", data);
+}
+
+/**
+ * 获取用户信息
+ * 
+ */
+export function getUserInfo() {
+  return request.get('user');
+}
+
+
+//关注
+export function getfans(id,data) {
+  return requesta.post('community/fans/'+id,data);
+}
+
+//我关注的人
+export function getfocuslst(data) {
+  return requesta.post('community/focus/lst',data);
+}
+
+//关注我的人
+export function getfanslst(data) {
+  return requesta.post('community/fans/lst',data);
+}
+
+//用户送礼
+export function reward(data) {
+  return request.post('zhibo/reward',data);
+}
+//获取礼物
+export function rewardList(data) {
+  return requesta.get('zhibo/rewardList',data);
+}
+
+//获取礼物
+export function giftList(data) {
+  return request.get('zhibo/giftList',data);
+}
+
+//获取房间人数
+export function liveAudience(data) {
+  return request.get('zhibo/liveAudience',data);
+}
+
+//获取用户余额
+export function getuser(data) {
+  return requesta.get('user',data);
+}
+
+
+//送礼
+export function sendGift(data) {
+  return request.post('zhibo/sendGift',data);
+}
+
+/**
+ * 充值金额选择
+ */
+export function getRechargeApi() {
+  return requesta.get("common/recharge_quota");
+}
+
+//历史直播记录
+
+export function playbackList(data) {
+  return request.get("zhibo/playbackList",data);
+}
+
+//获取直播回放详情
+export function playbackDetail(data) {
+  return request.get("zhibo/playbackDetail",data);
+}
+//获取观众关注主播状态
+export function getAjuser(id) {
+  return requesta.get(`community/user/info/${id}`);
+}
\ No newline at end of file
diff --git a/components/gb-popup/gb-popup.vue b/components/gb-popup/gb-popup.vue
new file mode 100644
index 0000000..fe710e0
--- /dev/null
+++ b/components/gb-popup/gb-popup.vue
@@ -0,0 +1,169 @@
+<template>
+	<view class="men-ban box " v-if ='isShow' @touchmove.stop.prevent="">
+		<view class="box_next">
+			<view class="box_next_title">
+				<text class="box_next_title_z">{{title}}</text>
+			</view>
+			<slot></slot>
+			<view class="box_next_but_d" v-if="isBut">
+				<view @click='show' class="box_next_but_d_but">
+					<text class="box_next_but_d_but_text">{{nName}}</text>
+				</view>
+			</view>
+			<view class="box_next_but_s" v-else>
+				<view class="box_next_but_s_lbut" @click="lEvent">
+					<text class="box_next_but_d_but_text">{{lName}}</text>
+				</view>
+				<view @click="rEvent" class="box_next_but_s_rbut" hover-class="zcolor-while1">
+					<text class="box_next_but_d_but_text">{{rName}}</text>
+				</view>
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			title: {
+				type: String,
+				default: "温馨提示"
+			},
+			isShow: {
+				type: Boolean,
+				default: true
+			},
+			nName: String,
+			lName: String,
+			rName: String,
+			isBut: {
+				type: Boolean,
+				default: true
+			}
+		},
+		
+		methods: {
+			show() {
+				
+				this.$emit('show');
+			},
+			lEvent() {
+				this.$emit('lEvent');
+			},
+			rEvent() {
+				this.$emit('rEvent');
+			},
+		}
+	}
+</script>
+
+<style scoped>
+	.men-ban {
+		position: fixed;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		top: 0;
+		z-index: 999999;
+	   background-color: rgba(0, 0, 0, 0);
+	}
+
+	.box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		
+	}
+
+	.box_next {
+		background-color: #ffffff;
+		width: 550rpx;
+		border-radius: 30rpx;
+	}
+
+	.box_next_title {
+		padding: 30rpx 30rpx 0 30rpx;
+	}
+
+	.box_next_title_z {
+		font-size: 31rpx;
+		font-weight: bold;
+	}
+
+	.box_next_but_d {
+		width: 550rpx;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		height: 130rpx;
+	}
+
+	.box_next_but_d_but {
+		width: 500rpx;
+
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		height: 80rpx;
+		border-radius: 50rpx;
+		background-color: #fee610;
+	}
+
+	.box_next_but_d_but_text {
+		font-size: 30rpx;
+		font-weight: bold;
+	}
+
+	.box_next_but_s {
+		width: 550rpx;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+
+		flex-direction: row;
+		justify-content: space-around;
+		align-items: center;
+		height: 130rpx;
+	}
+
+	.box_next_but_s_lbut {
+		width: 200rpx;
+		background-color: #f1f1f1;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		height: 80rpx;
+		border-radius: 50rpx;
+	}
+
+	.box_next_but_s_rbut {
+		width: 200rpx;
+		background-color: #fee610;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		height: 80rpx;
+		border-radius: 50rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/components/mh-msgList/mh-msgList.vue b/components/mh-msgList/mh-msgList.vue
new file mode 100644
index 0000000..859ef21
--- /dev/null
+++ b/components/mh-msgList/mh-msgList.vue
@@ -0,0 +1,183 @@
+<template>
+	<view class="msg-view">
+		<scroll-view class="msg-view-p" scroll-y="true" :scroll-top="msgPanelScrollTop">
+			<view id="chatArea">
+				<view class="chat-area-line" v-for="(item,index) in msgList">
+
+					<view class="system-msg"
+						:style="{'flex-direction':((item.userName.length + item.content.length)<15?'row':'')}"
+						v-if="item.msg_type == 'system'">
+						<view class="system-msg-detail ">
+							<text class="system-msg-detail-username " v-for="i in item.userName">{{i}}</text>
+							<text class="system-msg-detail-content " v-for="i in ':'">{{i}}</text>
+							<text class="system-msg-detail-content " v-for="i in item.content">{{i}}</text>
+						</view>
+					</view>
+
+					<view class="user-msg"
+						:style="{'flex-direction':((item.userName.length + item.content.length)<15?'row':'')}" v-else>
+						
+						<view class="user-msg-detail">
+							<view class="user-msg-detail-tag">
+								<!-- <text style="text-align: center;font-size: 20px;color: #DD524D;">★1</text> -->
+								<!-- 这里可以根据用户等级显示图片 -->
+								<image :src="item.avatar" class="user-msg-detail-tag"></image>
+							</view>
+							<text class="user-msg-detail-username" v-for="i in item.userName"
+								@click="test(item.userName)">{{i}}</text>
+							<text class="user-msg-detail-content" v-for="i in ':'">{{i}}</text>
+							<text class="user-msg-detail-content" v-for="i in item.content">{{i}}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+<script>
+	export default {
+		name: 'MhMsgList',
+		props: {
+			msgList: {
+				type: [Object, Array],
+				default: [{
+					userName: "系统通知",
+					content: "直播倡导绿色直播，严禁发布涉黄涉毒涉赌，严禁发布涉政、违法及低俗违规内容。健康直播，文明互动",
+					cmd: "say",
+
+					msg_type: "system"
+				}, ]
+			},
+			msgPanelScrollTop: {
+				type: [Number, String],
+				default: 0
+			}
+		},
+		mounted() {
+
+
+		},
+
+		methods: {
+			test(e) {
+				uni.showToast({
+					title: e,
+					icon: 'none'
+				})
+			},
+
+			setMsgPanelScroll() {
+				var that = this;
+				setTimeout(function() {
+					const query = uni.createSelectorQuery().in(that);
+					query.select('#chatArea').boundingClientRect(data => {
+						that.msgPanelScrollTop = data.height - 200;
+					}).exec();
+				}, 50)
+
+
+			},
+		}
+
+	}
+</script>
+<style lang="scss" scoped>
+	.msg-view-p {
+		display: flex;
+		width: 550rpx;
+		height: 550rpx;
+
+
+	}
+
+
+	.chat-area-line {
+		width: 550upx;
+
+		flex-direction: row;
+		margin-bottom: 5upx;
+	}
+
+	.system-msg {
+		width: 550upx;
+		margin-bottom: 5upx;
+	}
+
+	.system-msg-detail {
+		// max-width: 550upx;
+
+		padding: 10upx;
+		border-radius: 30upx;
+		background-color: rgba($color: #000000, $alpha: 0.4);
+		flex-direction: row;
+		flex-wrap: wrap;
+		margin-right: 14upx;
+
+		>.system-msg-detail-username {
+			color: red;
+			font-size: 32upx;
+			font-weight: 400;
+			line-height: 40upx;
+
+		}
+
+		>.system-msg-detail-content {
+			font-size: 32upx;
+			font-weight: 400;
+			line-height: 40upx;
+			color: #A0CFFF;
+		}
+	}
+
+	.user-line {
+		// max-width: 530upx;
+		padding: 10upx;
+		color: #FFFFFF;
+		flex-direction: row;
+		border-radius: 30upx;
+		background-color: rgba($color: #000000, $alpha: 0.4);
+		margin-right: 14upx;
+		font-size: 28upx;
+		font-weight: 400;
+		line-height: 40upx;
+	}
+
+	.user-msg {
+		width: 530upx;
+
+
+		margin-bottom: 5upx;
+	}
+
+	.user-msg-detail-tag {
+		width: 40upx;
+		height: 40upx;
+		border-radius: 50%;
+
+	}
+
+	.user-msg-detail {
+		padding: 10upx;
+		border-radius: 30upx;
+		background-color: rgba($color: #000000, $alpha: 0.4);
+		flex-direction: row;
+		flex-wrap: wrap;
+		margin-right: 14upx;
+
+
+
+		>.user-msg-detail-username {
+			color: #A0CFFF;
+			font-size: 32upx;
+			font-weight: 400;
+			line-height: 40upx;
+		}
+
+		>.user-msg-detail-content {
+			font-size: 32upx;
+			font-weight: 400;
+			line-height: 40upx;
+			color: #fff;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/components/sd-live-page/histroy.nvue b/components/sd-live-page/histroy.nvue
new file mode 100644
index 0000000..ca19d54
--- /dev/null
+++ b/components/sd-live-page/histroy.nvue
@@ -0,0 +1,2085 @@
+<template>
+	<view class="container" >
+		<view class="top-do-box">
+			<view class="room-info">
+				<view class="room-logo-box">
+					<image :src="room.cover" class="room-logo-box"></image>
+				</view>
+				<view class="room-info-message">
+					<view class="room-user-name">
+						<text
+							style="color: #fff;font-size: 25rpx;">{{room.live_name.length>6?room.live_name.substring(0, 6)+'...': room.live_name}}</text>
+					</view>
+					<view class="room-user-money">
+						<text style="color: #fff;font-size: 25rpx;">4000</text>
+					</view>
+				</view>
+			<!-- 	<view class="room-guanzhu" @click="interest">
+					<text class="guanzhu" v-if="!follow">关注</text>
+					<text class="guanzhu" v-else>已关注</text>
+				</view> -->
+			</view>
+			<!-- <view class="room-users-box">
+				<scroll-view class="right_top_scroll" scroll-x="true" scroll-left="0">
+					<view class="top-scroll-users-header" v-for="(bitem,bindex) in users" :key="bindex">
+						<image :src="bitem.app_user_avatar" class="top-scroll-users-header"
+							v-if="bitem.app_user_avatar"></image>
+						<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/default_avtar.png"
+							class="top-scroll-users-header" mode="aspectFill"></image>
+					</view>
+				</scroll-view>
+			</view> -->
+
+			<view class="users-count web-font">
+				<!-- <view class="users-count web-font">
+					<text class="users-count-text"> {{users.length}}</text>
+				</view> -->
+				<view class="users-count " @click="outroom">
+					<image src="@/static/img/close.png" class="users-count-img" mode="aspectFit"></image>
+				</view>
+			</view>
+		</view>
+
+
+	<!-- 	<view class="top-left" v-if="isshow">
+			<view class="top-left-a" @click="switchCamera">
+				<image class="left-img" src="/static/img/qiehuan.png" mode=""></image>
+			</view>
+		</view>
+		<view class="msgview">
+			<mh-msgList ref="msgList" :msgList="msgList"></mh-msgList>
+		</view> -->
+		<!-- 底部操作 -->
+
+
+	<!-- 	<view class="inpit-box-bg" v-if="focus">
+			<view class="inpit-box-body">
+				<input class="uni-input" @input="onKeyInput" maxlength="20" cursor-spacing="10" hold-keyboard
+					placeholder="说点什么吧..." :value="inputValue" :focus="focus" />
+				<view v-if="inputValue!=''" @click="send_message">
+					<text class="send-but">发送</text>
+				</view>
+			</view>
+		</view>
+		<view class="dobox" v-else>
+			<view class="inpit-box">
+				<view class="input-tpl" @click="set_focus">
+					<text class="input-tpls">说点什么..</text>
+				</view>
+				<view class="functionbox">
+					<view class="function-box">
+
+						<view class="ico-box" @click="send_liwu">
+							<image class="ico-box-img" src="@/static/img/li.png" mode="aspectFit"></image>
+						</view>
+						<view class="ico-box" @click="send_shop">
+							<image class="ico-box-img" src="@/static/img/shanpin.png" mode="aspectFit"></image>
+						</view>
+						<view class="ico-box" @click="send_lick">
+							<image class="ico-box-img" src="@/static/img/gn.png"></image>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view> -->
+
+		<!-- 底部分享弹窗 -->
+		<uni-popup ref="share" :type="type" :custom="true" @change="change">
+			<template v-if="popup==1">
+				<view class="uni-share" style="background-color: #333333;">
+
+					<view class="send-boj" id="tes">
+						<view class="send-boj-txt">
+							<text class="send-boj-txta">礼物</text>
+							<view class="gift-jb-con">
+								<image class="gift-jb-img" src="@/static/img/jb.png" mode=""></image>
+								<text class="gift-web-je">
+									{{now_money}}
+								</text>
+
+							</view>
+
+						</view>
+						<view class="send-boj-close" @tap="close">
+							<image class="send-boj-close-img" src="/static/img/close.png" mode=""></image>
+						</view>
+					</view>
+					<scroll-view scroll-y style="height: 480rpx;overflow: hidden;">
+
+						<view class="uni-share-content">
+							<view class="lw-box" v-for="(litem,lindex) in liwu" :key="lindex"
+								@click="send_liwu_obj(litem)" @touchstart="handleTouchStart(lindex)"
+								@touchend="handleTouchEnd(lindex)" :class="{ 'hovered': lindex== hoveredIndex }">
+								<image class="lw-ico" :src="litem.gift_img"></image>
+								<view class="lw-name">
+									<text class="lw-name">{{litem.gift_name}}</text>
+								</view>
+								<view class="lw-money">
+									<image class="lw-money-img" src="@/static/img/jb.png" mode=""></image>
+
+									<text class="lw-moneya">{{litem.gift_price}}
+									</text>
+								</view>
+								<text class="send-m" v-if="lindex== hoveredIndex">赠送</text>
+							</view>
+						</view>
+
+					</scroll-view>
+					<!-- <view class="gift-botton-view" @click="rechargejb">
+						<text class="gift-web-cz">充值</text>
+					</view> -->
+				</view>
+			</template>
+			<template v-if="popup==2">
+				<view class="uni-shop">
+
+					<view class="shop">
+						<view class="shop-top">
+							<image class="shop-top-img" :src="room.cover" mode=""></image>
+							<text class="shop-top-txt">{{roomDetail.live_name}}</text>
+						</view>
+						<view class="shop-close" @tap="close">
+							<image class="shop-close-img" src="/static/img/colse1.png" mode=""></image>
+						</view>
+					</view>
+					<scroll-view scroll-y style="height: 680rpx;overflow: hidden;">
+						<view class="uni-shop-content">
+
+							<view class="shop-content" v-for="(litem,lindex) in roomDetail.goods" :key="lindex">
+								<image class="shop-content-img" :src="litem.app_goods_pic"></image>
+								<view class="shop-content-txt">
+									<view class="sp-txta">{{litem.app_goods_name}}</view>
+									<view class="sp-txtb">
+										<view class="txtba">
+											<text class="txtba-a">￥</text>
+											<text class="txtba-b">{{litem.app_goods_price.split('.')[0]}}.</text>
+											<text class="txtba-c">{{litem.app_goods_price.split('.')[1]}}</text>
+										</view>
+										<text class="txtbb" @click="shopp(litem)">去抢购</text>
+									</view>
+								</view>
+							</view>
+						</view>
+
+					</scroll-view>
+
+				</view>
+			</template>
+		</uni-popup>
+		<uni-popup ref="recharge" :type="type" :custom="true" @change="change">
+			<view class="uni-recharge">
+				<view class="recharge">
+					<view class="recharge_title">
+						<text class="recharge_title">我的金币</text>
+					</view>
+					<view class="recharge-one">
+						<image class="recharge-one-img" src="../../static/img/jb.png" mode="aspectFit"></image>
+						<view class="recharge-one-txt"><text class="recharge-one-txt" {{now_money}}</text></view>
+					</view>
+					<view class="recharge-con">
+						<view class="recharge-con-title">
+							<text class="recharge-con-title">金币充值</text>
+						</view>
+						<view class="recharge-con-detail">
+
+							<view class="con-detail" v-for="(item,ik) in Recharglist" :key='ik'
+								@click="RechargClick(ik)" :class="{ 'carecharge': ik== regIndex }">
+								<view class="" v-if='item.id=="AA"'>
+									<!-- <text class="con-detaila">输入金额</text> -->
+									<input type="text" class="con-detaila" value="" placeholder="输入金额" />
+									<text class="con-detailb">最低可充值1元</text>
+								</view>
+								<view class="" v-else>
+									<text class="con-detaila">{{item.data.give}}金币</text>
+									<text class="con-detailb">{{item.data.price}}元</text>
+								</view>
+							</view>
+						</view>
+
+						<text class="recharge-conbottom">
+							立即充值
+						</text>
+					</view>
+				</view>
+			</view>
+
+		</uni-popup>
+		<!-- 礼物弹窗 -->
+		<view class="gift-alert" v-for="(gift,gindex) in giftobj" :key="gindex"
+			:style="{ top: gift.top + 'px', left: gift.left + 'px' }">
+
+			<view class="gift-alerta">
+				<view class="send-boj-user-header">
+					<image :src="gift.app_user_avatar" class="send-boj-user-header-img" mode="aspectFill"
+						v-if="gift.app_user_avatar"></image>
+					<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/default_avtar.png"
+						class="send-boj-user-header-img" mode="aspectFill"></image>
+				</view>
+				<view class="gift-detail">
+					<text class="gifta">{{gift.app_user_name}}</text>
+					<text class="giftb">送{{room.app_user_name}}{{gift.gift_name}}</text>
+				</view>
+				<view class="gift-ico">
+					<image :src="gift.gift_img" class="gift-ico-img" mode="aspectFill"></image>
+				</view>
+			</view>
+			<view class="gift-alertb">
+				<image class="gift-alertb-img" src="@/static/img/X.png" mode=""></image>
+				<view class="gift-alertb-txt"> <text class="gift-alertb-txt">{{gift.gift_num}}</text> </view>
+			</view>
+		</view>
+		<!-- 用户进入弹窗 -->
+		<view class="join-box" v-for="(join,jindex) in join_arr" :key="jindex" :animation="join.animationData">
+			<view class="user-lever" style="margin-right: 10upx;">
+				<view class="user-lever-ico-box">
+					<image class="user-lever-ico" src="/static/img/room-user-lever.png"></image>
+				</view>
+				<view class="web-font user-lever-text">2</view>
+			</view>
+			<text class="join-box-text web-font">
+				{{join.message}}
+			</text>
+		</view>
+		
+		<gb-popup :isShow="isShow1" rName="确定" :isBut="false" lName="取消" @lEvent="show1" @rEvent="copyData"
+			title="请输入礼物数量">
+			<view style="padding: 30rpx;">
+				<input type="value" v-model="gift_num" placeholder="请输入" />
+			</view>
+		</gb-popup>
+	</view>
+</template>
+
+<script>
+	import {
+		joinChatRoom,
+		sendGroupMessage,
+		bindUser,
+		stopPushLive,
+		liveDetail,
+		getfans,
+		rewardList,
+		giftList,
+		liveAudience,
+		getuser,
+		getRechargeApi,
+		sendGift,
+			getAjuser
+	} from '@/api/live.js'
+	import {
+		HTTP_REQUEST_URL_FIVE
+	} from '@/config/app.js';
+
+	import uniPopup from '@/components/unipopup/live-uni-popup.vue';
+	import msgList from '@/components/mh-msgList/mh-msgList.vue';
+import gbpopup from '@/components/gb-popup/gb-popup.vue';
+	export default {
+		name: "sd-float-page",
+		props: {
+			role_val: {
+				type: String,
+				default: '0'
+			},
+			roomid_val: {
+				type: String,
+				default: '0'
+			},
+			room: {
+				type: Object,
+			}
+		},
+		components: {
+			uniPopup,
+			'mh-msgList': msgList,
+			'gb-popup': gbpopup,
+		},
+		data() {
+			return {
+				windowWidth: '',
+				// room: [], //房间信息
+				roomobj: [],
+				users: [{
+						url: require('@/static/images/bg1.png'),
+					},
+					{
+						url: require('@/static/images/bg1.png'),
+					},
+					{
+						url: require('@/static/images/bg1.png'),
+					}, {
+						url: require('@/static/images/bg1.png'),
+					}
+				],
+				rid: 0, //房间id
+				role: '', //角色
+				focus: false,
+				inputValue: '',
+				isshow: false,
+				message_arr: [
+
+				],
+				msgList: [{
+					userName: "系统通知",
+					content: "倡导绿色直播，严禁发布涉黄涉毒涉赌，严禁发布涉政、违法及低俗违规内容。健康直播，文明互动",
+					cmd: "say",
+					msg_type: "system"
+				}, ],
+				view_id: '',
+				liwu: [],
+				liwu2: [],
+				liwu3: [],
+				type: 'bottom',
+				follow: false, //关注
+				popup: 3, //1礼物操作 2其他操作 3.商品
+				user: '',
+				giftobj: [], //礼物
+				join_arr: [],
+				userName: '',
+				now_money: 0,
+				roomDetail: '',
+				userinfo: null,
+				hoveredIndex: -1,
+				regIndex: -1,
+				gifts: [
+				],
+				gifsobj: {},
+				gift_num: '',
+				isShow1: false,
+			}
+			/*定义IM消息类型
+			1：进群通知
+			2：发送自定义消息
+			3：收到礼物
+			*/
+		},
+
+		mounted() {
+			// this.userinfo = JSON.parse(uni.getStorageSync('USER_INFO'))
+			// console.log(this.userinfo, '房间id 以及当前用户id')
+			// this.get_live_room(); //调用直播间信息
+			// this.rewardList()
+			// this.giftList()
+			// this.liveAudience()
+			// this.getuser()
+			// this.getRecharg()
+			// this.getjuser()
+		},
+		onReady() {
+			this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
+			const t = this;
+			t.role = this.$props.role_val;
+			t.rid = this.$props.roomid_val;
+			t.user = uni.getStorageSync('user');
+			console.log('浮动模板被加载的事件')
+			console.log(this.$props)
+			// 保持屏幕常亮
+			uni.setKeepScreenOn({
+				keepScreenOn: true,
+				success: (res) => {
+					console.log('手机长亮时间')
+					console.log(res)
+				},
+				fail: (e) => {
+					console.log(e)
+					console.log('手机长亮时间')
+				}
+			});
+			uni.onKeyboardHeightChange(res => {
+				if (res.height == 0) {
+					this.focus = false;
+				}
+			})
+
+
+		},
+		methods: {
+//关注
+			getjuser() {
+				getAjuser(this.userinfo.app_user_id).then((res) => {
+					console.log(res, 'AAAAAA')
+					if (res.code == 1) {
+
+
+						this.follow = res.data.is_start
+					}
+				})
+			},
+			//获取充值数据
+			getRecharg() {
+				getRechargeApi().then((res) => {
+					console.log(res.data.recharge_quota, '11111111')
+					this.Recharglist = res.data.recharge_quota
+					this.Recharglist.push({
+						data: {},
+						id: 'AA'
+					})
+					// this.now_money = res.data.now_money
+				})
+			},
+			//获取余额
+			getuser() {
+				getuser().then((res) => {
+
+					this.now_money = res.data.now_money
+				})
+			},
+			//获取房间人数列表
+			liveAudience() {
+				let data = {
+					app_name: 'shop',
+					live_stream_id: this.room.live_stream_id
+				}
+				liveAudience(data).then((res) => {
+					this.users = res.data.lists
+				})
+			},
+			//礼物列表
+			rewardList() {
+				rewardList().then((res) => {
+					console.log(res, '11111111')
+				})
+			},
+			//送礼
+	//送礼
+
+			bosendGift(gif) {
+				// 执行关闭模态对话框的操作
+				let data = {
+					app_name: 'shop',
+					gift_id: gif.gift_id,
+					live_stream_id: this.room.live_stream_id,
+					gift_num: gif.gift_num,
+				}
+				console.log(data)
+				sendGift(data).then((res) => {
+
+					if (res.code == 1) {
+						this.$refs.share.close()
+						uni.hideModal()
+					} else {
+						uni.showModal({
+							title: '提示',
+							content: res.msg,
+							confirmColor: '#ee6666', //确定字体颜色
+							showCancel: false, //没有取消按钮的弹框
+							buttonText: '确定',
+							success: function(res) {
+								if (res.confirm) {
+
+								} else if (res.cancel) {
+									console.log('用户点击取消');
+								}
+							},
+						})
+					}
+				})
+
+			},
+			//礼物列表
+			giftList() {
+				giftList().then((res) => {
+					this.liwu = res.data
+				})
+			},
+			//关注
+			interest() {
+				this.follow = !this.follow
+				if (this.follow) {
+					getfans(this.room.app_user_id, {
+						status: 1
+					}).then((res) => {
+						console.log(res, '11111111')
+						if (res.status == 200) {
+
+							console.log('关注成功')
+						}
+
+					}).catch((err) => {
+						console.log(err)
+					})
+				} else {
+					getfans(this.room.app_user_id, {
+						status: 0
+					}).then((res) => {
+						if (res.status == 200) {
+
+							console.log('已取消关注')
+						}
+					}).catch((err) => {
+						console.log(err)
+					})
+				}
+
+			},
+
+			//充值
+			RechargClick(index) {
+				this.regIndex = index
+			},
+			//hover效果设置
+			handleTouchStart(index) {
+				this.hoveredIndex = index;
+			},
+			handleTouchEnd(index) {
+				this.hoveredIndex = -1;
+			},
+			//加入直播间
+			joinChatRoom() {
+				let data = {
+					live_stream_id: this.room.live_stream_id,
+					app_name: 'shop',
+					app_user_id: uni.getStorageSync('UID'),
+					app_user_name: '用户' + uni.getStorageSync('UID'),
+					app_user_avatar: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png",
+				}
+				joinChatRoom(data).then((res) => {
+					if (res.code == 1) {
+						console.log('加入房间成功')
+					} else {
+						uni.showModal({
+							title: '提示',
+							content: res.msg,
+							confirmColor: '#ee6666', //确定字体颜色
+							showCancel: false, //没有取消按钮的弹框
+							buttonText: '确定',
+							success: function(res) {
+								if (res.confirm) {
+									uni.redirectTo({
+										url: '/pages/room/room_list'
+									})
+								} else if (res.cancel) {
+									console.log('用户点击取消');
+								}
+							}
+						});
+					}
+				})
+			},
+
+			//购买商品
+
+			shopp(item) {
+				uni.sendHostEvent('live_shop', item, (ret) => {
+					//发送消息成功回调
+					console.log('购买商品' + JSON.stringify(item));
+				});
+			},
+			//绑定用户id
+			bindUser(client_id) {
+				let data = {
+					app_name: 'shop',
+					app_user_id: uni.getStorageSync('UID'),
+					client_id: client_id
+				}
+				bindUser(data).then((res) => {
+					if (res.code == 1) {
+						console.log('绑定成功')
+						this.joinChatRoom()
+					}
+
+				}).catch((err) => {
+					console.log(err)
+				})
+			},
+
+			// 进入这个页面的时候创建websocket连接【整个页面随时使用】
+			connectSocketInit() {
+				console.log(VUE_APP_WS_URL)
+				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
+				this.socketTask = uni.connectSocket({
+					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
+					url: VUE_APP_WS_URL,
+					success(data) {
+						console.log("websocket连接成功", data);
+					},
+					fail() {
+						console.log("websocket连接失败", data);
+					},
+					complete(data) {
+						console.log("websocket连接完成", data);
+					}
+				});
+				this.socketTask.onError((res) => {
+					console.log("连接发生错误", res)
+				})
+				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
+				this.socketTask.onOpen(res => {
+					console.log(res, '连接打开');
+				})
+
+				this.socketTask.onMessage((res) => {
+					console.log("收到服务器内容：" + res.data);
+					let str = res.data
+					let obj = JSON.parse(str);
+					if (obj.type == 'init') {
+						this.bindUser(obj.client_id)
+					} else if (obj.type == 'message') {
+
+						// console.log(this.msgList.length, '11111111111')
+
+
+						let data1 = {
+							userName: obj.name,
+							content: obj.text,
+							avatar: obj.avatar,
+							cmd: "say",
+							msg_type: "user"
+						}
+						this.msgList.push(data1)
+						this.$refs.msgList.setMsgPanelScroll()
+					} else if (obj.type == 'sys_message') {
+						let data1 = {
+							userName: obj.name,
+							content: obj.text,
+							avatar: obj.avatar,
+							cmd: "say",
+							msg_type: "system"
+						}
+						this.msgList.push(data1)
+						this.$refs.msgList.setMsgPanelScroll()
+					} else if (obj.type == 'stream') {
+						if (obj.status == -1) {
+							uni.showModal({
+
+								title: '提示',
+								content: '直播间已关闭',
+								confirmColor: '#ee6666', //确定字体颜色
+								showCancel: false, //没有取消按钮的弹框
+								buttonText: '确定',
+								success: function(res) {
+									if (res.confirm) {
+										uni.redirectTo({
+											url: '/pages/room/room_list'
+										})
+									} else if (res.cancel) {
+										console.log('用户点击取消');
+									}
+								}
+							})
+
+						}
+					} else if (obj.type == 'gift_message') {
+						console.log(obj, '33333')
+						this.sendGift(obj)
+
+					}
+
+
+
+
+
+				});
+				// 这里仅是事件监听【如果socket关闭了会执行】
+				this.socketTask.onClose(() => {
+					console.log("已经被关闭了")
+				})
+			},
+			sendGift(gift) {
+				// userName: "11111111",
+				// number: 33330,
+				// gift_name: "333333333",
+				// userAvatar: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png",
+				// gift_ico: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png",
+
+				this.giftobj.push(gift);
+				setTimeout(() => {
+					this.giftobj.splice(this.gifts.indexOf(gift), 1); // 礼物消失
+				}, 3000);
+			},
+			start() {
+				this.timeoutObj = setTimeout(() => {
+					//这里发送一个心跳，后端收到后，返回一个心跳消息，
+					//onmessage拿到返回的心跳就说明连接正常
+					console.log('ping');
+					this.socketTask.send({
+						data: "ping"
+					});
+
+				}, this.timeout)
+			},
+			// 关闭websocket【离开这个页面的时候执行关闭】
+			closeSocket() {
+				this.socketTask.close({
+					success(res) {
+						this.is_open_socket = false;
+						console.log("关闭成功", res)
+					},
+					fail(err) {
+						console.log("关闭失败", err)
+					}
+				})
+			},
+
+
+			//关闭弹窗
+			close() {
+				this.$refs.share.close()
+
+			},
+			//切换摄像头
+			switchCamera() {
+				console.log('切换摄像头')
+				this.$emit('switchCamera', '')
+			},
+			onRoomFunc: function(e) {
+				const t = this;
+				var self = this;
+
+				var message = {
+					userName: '11111111',
+					number: 33330,
+					gift_name: '333333333',
+					userAvatar: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png",
+					gift_ico: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png"
+				};
+				var nowTime = new Date();
+				var animation = uni.createAnimation({
+					duration: 200,
+					timingFunction: 'linear'
+				});
+				animation.left(20).step({
+					duration: 200
+				});
+				message.animationData = animation;
+				message.tapTime = nowTime; //加入计时器
+				t.giftobj.push(message);
+				console.log('t.giftobj', t.giftobj)
+				var animation_del = uni.createAnimation({
+					duration: 200,
+					timingFunction: 'linear'
+				});
+				animation_del.left(-300).step({
+					duration: 200
+				});
+				setTimeout(function() {
+					for (var i = 0; i < t.giftobj.length; i++) {
+						if (new Date() - t.giftobj[i].tapTime > 3000) {
+							t.giftobj[i].animationData = animation_del;
+							// if (new Date() - t.giftobj[i].tapTime > 5000){
+							// 	t.giftobj.splice(i,1);//释放内存
+							// }
+						}
+					}
+					console.log('t.giftobj', t.giftobj)
+				}, 3000)
+				message.message = message.userName + '送了' + message.number + '个' + message.gift_name;
+				t.message_arr.push(message);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+				// switch (args.tag) {
+				// 	case 'recvTextMsg': {
+				// 		console.log('收到用户发送消息:', e.detail.detail);
+				// 		if (e.detail.detail.nature == 1) {
+				// 			var index = t.users.findIndex(i => i.userid == e.detail.detail.userid);
+				// 			if (index == -1) {
+				// 				t.users.push(e.detail.detail);
+				// 			}
+				// 			var str = e.detail.detail;
+				// 			str.tapTime = new Date();
+				// 			str.message = e.detail.detail.userName + " " + " 进入房间";
+				// 			var animation = uni.createAnimation({
+				// 				duration: 200,
+				// 				timingFunction: 'linear'
+				// 			});
+				// 			animation.left(20).step({
+				// 				duration: 200
+				// 			});
+				// 			str.animationData = animation;
+				// 			t.join_arr.push(str);
+				// 			console.log('t.join_arr', t.join_arr)
+				// 			var animation_del = uni.createAnimation({
+				// 				duration: 200,
+				// 				timingFunction: 'linear'
+				// 			});
+				// 			animation_del.left(-300).step({
+				// 				duration: 200
+				// 			});
+				// 			setTimeout(function() {
+				// 				for (var i = 0; i < t.join_arr.length; i++) {
+				// 					if (new Date() - t.join_arr[i].tapTime > 3000) {
+				// 						t.join_arr[i].animationData = animation_del;
+				// 						// if (new Date() - t.join_arr[i].tapTime > 5000){
+				// 						// 	t.join_arr.splice(i,1);//释放内存
+				// 						// }
+				// 					}
+				// 				}
+				// 				console.log('t.join_arr', t.join_arr)
+				// 				console.log('t.users', t.users)
+				// 			}, 3000)
+				// 		} else if (e.detail.detail.nature == 2) {
+				// 			t.message_arr.push(e.detail.detail);
+				// 		} else if (e.detail.detail.nature == 3) {
+				// 			var message = e.detail.detail;
+				// 			var nowTime = new Date();
+				// 			var animation = uni.createAnimation({
+				// 				duration: 200,
+				// 				timingFunction: 'linear'
+				// 			});
+				// 			animation.left(20).step({
+				// 				duration: 200
+				// 			});
+				// 			message.animationData = animation;
+				// 			message.tapTime = nowTime; //加入计时器
+				// 			t.giftobj.push(message);
+				// 			console.log('t.giftobj', t.giftobj)
+				// 			var animation_del = uni.createAnimation({
+				// 				duration: 200,
+				// 				timingFunction: 'linear'
+				// 			});
+				// 			animation_del.left(-300).step({
+				// 				duration: 200
+				// 			});
+				// 			setTimeout(function() {
+				// 				for (var i = 0; i < t.giftobj.length; i++) {
+				// 					if (new Date() - t.giftobj[i].tapTime > 3000) {
+				// 						t.giftobj[i].animationData = animation_del;
+				// 						// if (new Date() - t.giftobj[i].tapTime > 5000){
+				// 						// 	t.giftobj.splice(i,1);//释放内存
+				// 						// }
+				// 					}
+				// 				}
+				// 				console.log('t.giftobj', t.giftobj)
+				// 			}, 3000)
+				// 			message.message = message.userName + '送了' + message.number + '个' + message.gift_name;
+				// 			t.message_arr.push(message);
+				// 		} else if (e.detail.detail.nature == 4) {
+				// 			e.detail.detail.message = e.detail.detail.userName + '关注了主播';
+				// 			t.message_arr.push(e.detail.detail);
+				// 		} else {
+				// 			return;
+				// 		}
+				// 		console.log('t.message_arr', t.message_arr)
+				// 		t.view_id = 'demo' + t.message_arr.length;
+				// 		break;
+				// 	}
+				// 	default: {
+				// 		console.log('onRoomEvent default: ', e)
+				// 		break;
+				// 	}
+				// }
+			},
+			//关闭直播间
+			outroom: function() {
+				uni.redirectTo({
+					url: '/pages/room/index'
+				})
+			},
+
+			get_live_room() {
+
+				liveDetail({
+					app_name: 'shop',
+					live_stream_id: this.room.live_stream_id,
+				}).then(res => {
+
+					if (res.code == 1) {
+						this.roomDetail = res.data
+						// console.log(res.data, '房间id 以及当前用户id')
+						// console.log(this.room.app_user_id, uni.getStorageSync('user_id'), '房间id 以及当前用户id')
+						if (res.data.app_user_id == uni.getStorageSync('Uid')) {
+							this.isshow = true
+						}
+					}
+					this.connectSocketInit()
+				}).catch((err) => {})
+			},
+			togglePopup(type, open) {
+				this.type = type
+				if (open === 'tip') {
+					this.show = true
+				} else {
+					this.$refs[open].open()
+				}
+			},
+			cancel(type) {
+				if (type === 'tip') {
+					this.show = false
+					return
+				}
+				// this.$refs[type].close()
+			},
+			change(e) {
+				console.log('是否打开:' + e.show)
+			},
+			//充值
+			rechargejb: function() {
+				this.$refs['share'].close()
+				const t = this;
+				this.type = 'bottom'
+				this.$refs['recharge'].open()
+
+			},
+			send_liwu: function() {
+				const t = this;
+				t.popup = 1;
+				this.type = 'bottom'
+				t.togglePopup('bottom', 'share');
+
+				// this.$refs['recharge'].open()
+			},
+			send_shop: function() {
+				const t = this;
+				t.popup = 2;
+
+				this.type = 'bottom'
+				t.togglePopup('bottom', 'share');
+			},
+			send_lick: function() {
+				this.sendGift()
+
+			
+			},
+
+			//礼物弹窗
+			show1() {
+				this.isShow1 = !this.isShow1
+				this.gift_num = ''
+			},
+			//礼物弹窗0
+			copyData() {
+				this.gifsobj.gift_num = this.gift_num
+				this.bosendGift(this.gifsobj)
+				this.show1()
+			},
+			//礼物弹窗1
+			send_liwu_obj: function(gt) {
+				console.log(this.gift_num)
+				let gift = {
+					'gift_id': gt.id,
+			
+				}
+				this.isShow1 = true
+				this.gifsobj = gift
+			
+			},
+		//对话监听
+		set_focus: function() {
+			this.focus = !this.focus
+		},
+		
+		//对话输入监听
+		onKeyInput: function(event) {
+			this.inputValue = event.detail.value
+		
+		},
+		
+			send_message: function() {
+				const t = this;
+				t.focus = false;
+
+				if (t.to_userid == '') {
+					uni.showToast({
+						title: '内容不能为空',
+						duration: 2000,
+						icon: 'none'
+					});
+					return false;
+				}
+
+				let data = {
+					live_stream_id: this.room.live_stream_id,
+					app_name: 'shop',
+					app_user_id: uni.getStorageSync('UID'),
+					message: this.inputValue
+				}
+
+				sendGroupMessage(data).then(res => {
+					console.log('发送的消息' + JSON.stringify(res))
+					this.inputValue = ''
+					if (res.code == 1) {
+						console.log('发送的消息成功')
+					}
+				})
+				// let message = {
+				// 	userName: '大黄',
+				// 	content: this.inputValue,
+				// 	cmd: "say",
+				// 	msg_type: "user"
+				// };
+
+				// /** 实际应用应发送到服务端，通过监听服务端传回的消息加入的msgList **/
+				// if (this.msgList.length > 100) {
+				// 	this.msgList.splice(0, 1);
+				// 	this.msgList.push(message)
+				// 	this.$refs.msgList.setMsgPanelScroll()
+				// 	this.inputValue = ''
+				// } else {
+				// 	this.msgList.push(message)
+				// 	this.$refs.msgList.setMsgPanelScroll()
+				// 	this.inputValue = ''
+				// }
+				// console.log(this.msgList)
+
+			},
+		},
+		// onBackPress() {
+		// 	this.$refs['showpopup'].close()
+		// 	this.$refs['showtip'].close()
+		// 	this.$refs['showimage'].close()
+		// 	this.$refs['showshare'].close()
+		// }
+	}
+</script>
+
+<style lang="scss" scoped>
+	page {
+		position: relative;
+
+
+	}
+
+	.container {
+		width: 100%;
+		/* 设置容器的宽度 */
+	}
+
+	.dobox {
+		position: absolute;
+
+		bottom: 0rpx;
+		width: 750rpx;
+		background-color: #F8F8F8;
+	}
+
+	.inpit-box {
+		padding: 20upx 20rpx;
+		width: 700rpx;
+		flex-direction: row;
+		justify-content: space-between;
+		/* padding-top: 40upx; */
+	}
+
+	.inpit-box-bg {
+		position: absolute;
+
+		bottom: 0;
+		height: 80rpx;
+		width: 750rpx;
+		background-color: #F8F8F8;
+		z-index: 9999;
+	}
+
+	.inpit-box-body {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+
+	}
+
+	.uni-input {
+		font-size: 32upx;
+		height: 60upx;
+		margin-top: 10upx;
+		padding-left: 20rpx;
+		color: #333333;
+		background-color: #f8f8f8;
+		flex: 1;
+	}
+
+	.send-but {
+		width: 120upx;
+		background-color: #0081FF;
+		color: #FFFFFF;
+		text-align: center;
+		font-size: 28upx;
+		height: 60upx;
+		line-height: 60upx;
+		border-radius: 60upx;
+		margin-top: 10upx;
+	}
+
+
+
+	.function-box {
+		width: 380rpx;
+		flex-direction: row;
+		justify-content: space-around;
+		padding-left: 20upx;
+	}
+
+	.ico-box {
+		width: 77rpx;
+		height: 77rpx;
+		border-radius: 50%;
+		background-color: rgba(0, 0, 0, .1);
+		line-height: 77rpx;
+
+	}
+
+	.ico-box-img {
+		width: 77rpx;
+		height: 77rpx;
+		border-radius: 50%;
+		background-color: rgba(0, 0, 0, .1);
+		line-height: 77rpx;
+	}
+
+	.ico {
+
+		font-size: 48upx;
+	}
+
+	.input-tpl {
+		height: 70upx;
+		width: 300upx;
+		line-height: 70upx;
+		text-align: left;
+		background: rgba(0, 0, 0, 0.25);
+		opacity: 1;
+		border-radius: 39upx;
+	}
+
+	.input-tpls {
+		height: 70upx;
+		width: 300upx;
+		line-height: 70upx;
+		text-align: left;
+		padding-left: 20rpx;
+		font-size: 25upx;
+		color: #FFFFFF;
+		border-radius: 70upx;
+	}
+
+	.top-left {
+		// height: auto;
+		position: absolute;
+		width: 40rpx;
+		right: 20rpx;
+		top: 230rpx;
+		z-index: 99999;
+	}
+
+	.left-img {
+		width: 40rpx;
+		height: 40rpx;
+	}
+
+
+
+	.gifta {
+		font-size: 23rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #FFFFFF;
+		margin-bottom: 5rpx;
+		text-align: center;
+	}
+
+	.giftb {
+
+		font-size: 19rpx;
+		font-family: PingFang SC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #FFFFFF;
+		text-align: center;
+	}
+
+	.nickname {
+		font-size: 28upx;
+		color: #22c8ef;
+		/* font-weight: 800; */
+		padding: 0 10upx;
+		line-height: 40upx;
+		padding-left: 4upx;
+		font-weight: 800;
+	}
+
+	.message-scroll-box {
+		line-height: 40upx;
+		color: #f9f9f9;
+		font-size: 28upx;
+		white-space: pre-wrap;
+		font-weight: 800;
+	}
+
+	.message-scroll-box-xi {
+		line-height: 40upx;
+		color: #f9f9f9;
+		font-size: 28upx;
+		white-space: pre-wrap;
+	}
+
+	.message-scroll-box-gift {
+		color: #22c8ef;
+		line-height: 40upx;
+		font-size: 28upx;
+		white-space: pre-wrap;
+	}
+
+	.user-lever {
+		background-color: #ebc602;
+		padding: 4upx 10upx;
+		border-radius: 20upx;
+		height: 20upx;
+		line-height: 20upx;
+		float: left;
+		display: flex;
+		overflow: hidden;
+		margin-top: 10upx;
+	}
+
+	.msgview {
+		position: fixed;
+		width: 540rpx;
+		height: 540rpx;
+		left: 20rpx;
+		bottom: 180rpx;
+		overflow: hidden;
+		border: none;
+
+		z-index: 9;
+
+	}
+
+	.chat-area-line {
+		width: 550upx;
+		flex-direction: row;
+		margin-bottom: 5upx;
+	}
+
+	.system-msg {
+		width: 550upx;
+		margin-bottom: 5upx;
+	}
+
+	.system-msg-detail {
+		// max-width: 550upx;
+
+		padding: 10upx;
+		border-radius: 30upx;
+		background-color: rgba($color: #000000, $alpha: 0.4);
+		flex-direction: row;
+		flex-wrap: wrap;
+		margin-right: 14upx;
+
+		>.system-msg-detail-username {
+			color: red;
+			font-size: 32upx;
+			font-weight: 400;
+			line-height: 40upx;
+
+		}
+
+		>.system-msg-detail-content {
+			font-size: 32upx;
+			font-weight: 400;
+			line-height: 40upx;
+			color: #A0CFFF;
+		}
+	}
+
+	.user-line {
+		// max-width: 530upx;
+		padding: 10upx;
+		color: #FFFFFF;
+		flex-direction: row;
+		border-radius: 30upx;
+		background-color: rgba($color: #000000, $alpha: 0.4);
+		margin-right: 14upx;
+		font-size: 28upx;
+		font-weight: 400;
+		line-height: 40upx;
+	}
+
+	.user-msg {
+		width: 530upx;
+
+
+		margin-bottom: 5upx;
+	}
+
+	.user-msg-detail {
+		padding: 10upx;
+		border-radius: 30upx;
+		background-color: rgba($color: #000000, $alpha: 0.4);
+		flex-direction: row;
+		flex-wrap: wrap;
+		margin-right: 14upx;
+
+		>.user-msg-detail-tag {
+			color: #A0CFFF;
+			background-color: #53C21D;
+			width: 80upx;
+			height: 40upx;
+			border-radius: 20upx;
+			font-size: 32upx;
+			font-weight: 400;
+			line-height: 40upx;
+		}
+
+		>.user-msg-detail-username {
+			color: #A0CFFF;
+			font-size: 32upx;
+			font-weight: 400;
+			line-height: 40upx;
+		}
+
+		>.user-msg-detail-content {
+			font-size: 32upx;
+			font-weight: 400;
+			line-height: 40upx;
+			color: #fff;
+		}
+	}
+
+	.user-lever-ico-box {
+		width: 100rpx;
+		width: 15upx;
+		height: 15upx;
+		border-radius: 100%;
+		background-color: #e0ad07;
+		padding: 2upx;
+		margin-right: 5upx;
+	}
+
+	.user-lever-ico {
+		width: 15upx;
+		height: 15upx;
+
+		// margin: auto;
+	}
+
+	.user-lever-text {
+		color: #FFFFFF;
+		font-size: 22upx;
+		height: 20upx;
+		line-height: 20upx;
+	}
+
+	.uni-recharge {
+		background-color: #fff;
+		position: fixed;
+		bottom: 0;
+		flex: 1;
+		width: 750rpx;
+		background: #FFFFFF;
+		border-top-left-radius: 30upx;
+		border-top-right-radius: 30upx;
+
+
+	}
+
+	.recharge-one {
+		display: flex;
+		justify-content: center; //弹性盒子对象在主轴上的对齐方式
+		align-items: center;
+
+	}
+
+	.recharge_title {
+		font-size: 33rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 500;
+		text-align: center;
+		margin-top: 32rpx;
+		margin-bottom: 42rpx;
+	}
+
+	.recharge-one-img {
+		width: 72rpx;
+		height: 72rpx;
+
+
+		vertical-align: middle;
+
+
+	}
+
+	.recharge-one-txt {
+		font-size: 33rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #333333;
+		text-align: center;
+		margin-top: 18rpx;
+	}
+
+	.recharge-con {
+		padding: 0 32rpx;
+	}
+
+	.recharge-con-title {
+		font-size: 33rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #333333;
+	}
+
+	.recharge-con-detail {
+		flex-direction: row;
+
+		margin-top: 32rpx;
+		margin-bottom: 200rpx;
+	}
+
+	.recharge-conbottom {
+
+		width: 589rpx;
+		height: 84rpx;
+		line-height: 84rpx;
+		text-align: center;
+		position: absolute;
+		bottom: 30rpx;
+		left: 50%;
+		margin-left: -299.5rpx;
+		background: #F84221;
+		border-radius: 42rpx 42rpx;
+		font-size: 33rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #FFFFFF;
+	}
+
+	.con-detail {
+		width: 217rpx;
+		height: 159rpx;
+		margin-right: 18rpx;
+
+		border-radius: 21rpx 21rpx;
+		background: #F4F4F4;
+		text-align: center;
+	}
+
+	.carecharge {
+		border-width: 1px;
+		border-style: solid;
+		border-color: #F84221;
+	}
+
+	.con-detaila {
+		margin-top: 32rpx;
+		margin-bottom: 17rpx;
+		font-size: 37rpx;
+		font-family: PingFang SC-Semibold, PingFang SC;
+		font-weight: 600;
+		color: #333333;
+	}
+
+	.con-detailb {
+
+		font-size: 26rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #333333;
+	}
+
+	/* 底部分享 */
+	.uni-share {
+
+		background-color: #fff;
+		position: fixed;
+		bottom: 0;
+		width: 750rpx;
+		border-top-left-radius: 30upx;
+		border-top-right-radius: 30upx;
+	}
+
+	.uni-shop {
+
+		background-color: #fff;
+		position: fixed;
+		bottom: 0;
+		width: 750rpx;
+		border-top-left-radius: 30upx;
+		border-top-right-radius: 30upx;
+
+	}
+
+	.shop {
+		flex-direction: row;
+		justify-content: space-between;
+	}
+
+	.shop-top {
+		flex-direction: row;
+		margin-top: 20rpx;
+		margin-bottom: 20rpx;
+		margin-left: 20rpx;
+	}
+
+	.shop-top-img {
+		width: 80rpx;
+		height: 80rpx;
+		border-radius: 50%;
+	}
+
+	.shop-close {
+		margin: 20rpx 20rpx;
+	}
+
+	.shop-close-img {
+		width: 60rpx;
+		height: 60rpx;
+
+	}
+
+	.shop-top-txt {
+		line-height: 80rpx;
+		margin-left: 30rpx;
+	}
+
+	.uni-share-title {
+		line-height: 60rpx;
+		font-size: 24rpx;
+		padding: 15rpx 0;
+		text-align: center;
+	}
+
+
+	.uni-shop-content {
+		/* #ifndef APP-NVUE */
+		/* display: flex; */
+		/* #endif */
+		// width: 750rpx;
+
+		// display: flex;
+
+		flex-wrap: wrap;
+		// justify-content: center;
+
+
+		padding-left: 20rpx;
+		padding-bottom: 20rpx;
+		margin-top: 20rpx;
+
+
+
+		/* padding-bottom: 0; */
+	}
+
+	.shop-content {
+		width: 700rpx;
+		// border-width: 1px;
+		// border-style: solid;
+		// border-color: red;
+		flex-direction: row;
+		margin-bottom: 20rpx;
+	}
+
+	.shop-content-img {
+		width: 160rpx;
+		height: 160rpx;
+		// border-width: 1px;
+		// border-style: solid;
+		// border-color: red;
+	}
+
+	.shop-content-txt {
+		margin-left: 20rpx;
+		width: 500rpx;
+		position: relative;
+	}
+
+	.sp-txta {
+		font-size: 30rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #333333;
+	}
+
+	.sp-txtb {
+		position: absolute;
+		bottom: 20rpx;
+		width: 500rpx;
+
+		flex-direction: row;
+		justify-content: space-between;
+
+		.txtba {
+			color: red;
+			flex-direction: row;
+			height: 60rpx;
+			line-height: 60rpx;
+			font-size: 26rpx;
+			font-family: PingFang SC-Medium, PingFang SC;
+			font-weight: 400;
+			color: #F84221;
+		}
+
+		.txtba-a {
+			font-size: 26rpx;
+			font-family: PingFang SC-Medium, PingFang SC;
+			font-weight: 400;
+			color: #F84221;
+			line-height: 60rpx;
+		}
+
+		.txtba-b {
+			font-size: 33rpx;
+			font-family: PingFang SC-Medium, PingFang SC;
+			font-weight: 500;color: #F84221;
+			line-height: 60rpx;
+		}
+
+		.txtba-c {
+			font-size: 26rpx;
+			font-family: PingFang SC-Medium, PingFang SC;
+			font-weight: 400;
+			line-height: 60rpx;
+			color: #F84221;
+		}
+
+		.txtbb {
+			width: 120rpx;
+			height: 60rpx;
+			line-height: 60rpx;
+			background-color: red;
+			border-radius: 0px 11rpx 11rpx 0px;
+			text-align: center;
+			font-size: 30rpx;
+			font-family: PingFang SC-Medium, PingFang SC;
+			font-weight: 500;
+			color: #FFFFFF;
+		}
+	}
+
+	.uni-share-content {
+		/* #ifndef APP-NVUE */
+		/* display: flex; */
+		/* #endif */
+		// width: 750rpx;
+
+		// display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		// justify-content: center;
+		padding: 15px 28rpx;
+
+
+		/* padding-bottom: 0; */
+	}
+
+	.content-image {
+		width: 60rpx;
+		height: 60rpx;
+	}
+
+	.uni-share-content-text {
+		font-size: 26rpx;
+		color: #333;
+		padding-top: 5px;
+		padding-bottom: 10px;
+	}
+
+	.uni-share-btn {
+		height: 90rpx;
+		line-height: 90rpx;
+		font-size: 14px;
+		border-top-color: #f5f5f5;
+		border-top-width: 1px;
+		border-top-style: solid;
+		text-align: center;
+		color: #666;
+	}
+
+	.gift-botton-view {
+		line-height: 90rpx;
+		height: 90rpx;
+		font-size: 14px;
+		border-top-color: #5c1398;
+		border-top-width: 1px;
+		border-top-style: solid;
+		text-align: center;
+
+
+	}
+
+	.gift-jb-con {
+		width: 221rpx;
+		height: 43rpx;
+		background: rgba(0, 0, 0, 0.25);
+		border-radius: 39rpx 39rpx;
+		flex-direction: row;
+	}
+
+	.gift-web-je {
+		font-size: 23rpx;
+		line-height: 43rpx;
+		font-weight: normal;
+		color: #FFFFFF;
+	}
+
+	.gift-jb-img {
+		width: 33rpx;
+		height: 33rpx;
+		margin-top: 3rpx;
+		margin-left: 10rpx;
+		margin-right: 10rpx;
+	}
+
+	.gift-web-cz {
+		font-size: 25rpx;
+		color: #fff;
+		text-align: center;
+	}
+
+	/* 礼物 */
+	.lw-box {
+		width: 168rpx;
+		height: 224rpx;
+		background: rgba(0, 0, 0, 0.2);
+		border-radius: 21rpx 21rpx;
+		margin-bottom: 30upx;
+		position: relative;
+	}
+
+	.hovered {
+		border: 2rpx solid #707070;
+	}
+
+	.send-m {
+		width: 168rpx;
+		height: 49rpx;
+		line-height: 49rpx;
+		text-align: center;
+		position: absolute;
+		background: #F84221;
+		bottom: 0;
+		border-radius: 0 0 21rpx 21rpx;
+		font-size: 23rpx;
+		font-family: PingFang SC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #FFFFFF;
+	}
+
+	.lw-ico {
+		width: 100rpx;
+		height: 100rpx;
+		margin-left: 35rpx;
+		margin-top: 20rpx;
+		margin-bottom: 10rpx;
+
+
+
+	}
+
+	.lw-name {
+		font-size: 23rpx;
+		font-family: PingFang SC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #FFFFFF;
+		text-align: center;
+		margin-bottom: 10rpx;
+	}
+
+	.lw-money {
+		flex-direction: row;
+
+	}
+
+	.lw-moneya {
+		font-size: 23rpx;
+		font-family: PingFang SC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #FFFFFF;
+		text-align: center;
+		margin-top: 5rpx;
+	}
+
+	.lw-money-img {
+		width: 28rpx;
+		height: 28rpx;
+		margin-left: 38rpx;
+		margin-right: 5rpx;
+	}
+
+	.send-boj {
+		// display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		padding: 20upx 30upx;
+		// border-bottom: 2upx solid #5c1398;
+	}
+
+	.send-boj-txt {
+		flex: 1;
+	
+		padding-right: 40rpx;
+	
+		flex-direction: row;
+		justify-content: space-between;
+	}
+
+	.send-boj-txta {
+		font-size: 30rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #FFFFFF;
+	}
+
+	.send-boj-close {
+		width: 30rpx;
+		height: 30rpx;
+	}
+
+	.send-boj-close-img {
+		width: 30rpx;
+		height: 30rpx;
+	}
+
+	.gift-alert {
+		width: 430rpx;
+		flex-direction: row;
+		justify-content: space-between;
+		// background-color: green;
+		// animation: slideRight 1s linear forwards;
+	}
+
+	.gift-alerta {
+		width: 359rpx;
+		height: 70rpx;
+		background: rgba(0, 0, 0, 0.25);
+		border-radius: 39rpx 39rpx;
+		flex-direction: row;
+		justify-content: space-between;
+
+	}
+
+	.gift-alertb {
+		flex-direction: row;
+		height: 72rpx;
+		line-height: 72rpx;
+	}
+
+	.gift-alertb-img {
+		width: 44rpx;
+		height: 72rpx;
+	}
+
+	.gift-alertb-txt {
+		font-size: 45rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 700;
+		color: #FFFFFF;
+
+	}
+
+	@keyframes slideRight {
+		0% {
+			transform: translateX(0);
+		}
+
+		100% {
+			transform: translateX(100%);
+		}
+	}
+
+	.join-box {
+		position: fixed;
+		left: -500upx;
+		bottom: 350upx;
+		border-radius: 70upx;
+		display: flex;
+		padding: 10upx 30upx;
+		z-index: 9999;
+		background-color: #ef7526;
+	}
+
+	.join-box-text {
+		color: #F9F9F9;
+		line-height: 40upx;
+		font-size: 32upx;
+		white-space: pre-wrap;
+	}
+
+	.gift-ico {
+		width: 60upx;
+		height: 60upx;
+		margin-top: 10rpx;
+
+	}
+
+	.gift-ico-img {
+		width: 60upx;
+		height: 60upx;
+
+	}
+
+	.send-boj-user-header {
+		width: 63upx;
+		height: 63upx;
+		border-radius: 50%;
+		margin-top: 0rpx;
+		margin-left: -7rpx;
+
+	}
+
+	.send-boj-user-header-img {
+		width: 63upx;
+		height: 63upx;
+		border-radius: 50%;
+
+
+	}
+
+	.top-do-box {
+		width: 750rpx;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+
+		margin-top: 60rpx;
+	}
+
+	.room-info {
+		width: 350rpx;
+		display: flex;
+		flex-direction: row;
+		height: 80upx;
+		background-color: rgba(0, 0, 0, .2);
+
+		border-radius: 90upx;
+
+	}
+
+	.room-logo-box {
+		width: 80upx;
+		height: 80upx;
+		border-radius: 50%;
+
+	}
+
+
+	.room-info-message {
+		margin-left: 10rpx;
+	}
+
+	.room-user-name {
+		width: 150rpx;
+
+		font-size: 25upx;
+		color: #fff;
+		margin-top: 10rpx;
+
+	}
+
+	.room-user-money {
+		font-size: 28upx;
+		font-size: 25upx;
+		color: #fff;
+		margin-top: 5rpx;
+	}
+
+
+	.room-xin-box {
+		height: 30upx;
+		line-height: 30upx;
+		font-size: 20upx;
+		color: #FFFFFF;
+		border-radius: 30upx;
+		background-color: #f4305e;
+		margin-top: 10upx;
+		padding: 0 10upx;
+		margin-right: 4upx;
+	}
+
+	.room-money {
+		height: 30upx;
+		line-height: 30upx;
+		font-size: 20upx;
+		color: #FFFFFF;
+		border-radius: 30upx;
+		white-space: nowrap;
+		overflow: hidden;
+		margin-top: 10upx;
+	}
+
+	.room-guanzhu {
+		width: 105upx;
+		height: 60upx;
+		line-height: 60upx;
+		text-align: center;
+		color: #f4305e;
+		background-color: #FFFFFF;
+		border-radius: 50upx;
+		margin-top: 10rpx;
+
+	}
+
+	.guanzhu {
+		width: 105upx;
+		height: 60upx;
+		line-height: 60upx;
+		text-align: center;
+		font-size: 25rpx;
+		color: #f4305e;
+		background-color: #FFFFFF;
+		border-radius: 50upx;
+
+	}
+
+	.room-users-box {
+		width: 200rpx;
+		height: 65upx;
+
+		display: flex;
+
+	}
+
+	.right_top_scroll {
+		overflow: hidden;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		width: 200rpx;
+		height: 80upx;
+		margin-top: 10rpx;
+
+	}
+
+
+
+	.top-scroll-users-header {
+		width: 60upx;
+		height: 60upx;
+		border-radius: 50%;
+		margin-right: 10upx;
+		overflow: hidden;
+		
+
+	}
+
+	// .top-scroll-users-header image {
+	// 	width: 100%;
+	// 	height: 100%;
+	// }
+
+	.users-count {
+		display: flex;
+		flex-direction: row;
+		color: #FFFFFF;
+		font-size: 28upx;
+	}
+
+	.users-count-text {
+		margin-top: 10rpx;
+		width: 70upx;
+		height: 60upx;
+		line-height: 60upx;
+		text-align: center;
+		border-radius: 60upx;
+		background-color: rgba(0, 0, 0, .2);
+		margin-right: 30rpx;
+	}
+
+	.users-count-img {
+		width: 40rpx;
+		height: 40rpx;
+		margin-top: 20rpx;
+		margin-right: 20rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/components/sd-live-page/livepage.nvue b/components/sd-live-page/livepage.nvue
new file mode 100644
index 0000000..b819c2d
--- /dev/null
+++ b/components/sd-live-page/livepage.nvue
@@ -0,0 +1,2110 @@
+<template>
+	<view class="container">
+		<view class="top-do-box">
+			<view class="room-info">
+				<view class="room-logo-box">
+					<image :src="room.cover" class="room-logo-box"></image>
+				</view>
+				<view class="room-info-message">
+					<view class="room-user-name">
+						<text
+							style="color: #fff;font-size: 25rpx;">{{room.live_name.length>6?room.live_name.substring(0, 6)+'...': room.live_name}}</text>
+					</view>
+					<view class="room-user-money">
+						<text style="color: #fff;font-size: 25rpx;">4000</text>
+					</view>
+				</view>
+				<view class="room-guanzhu" @click="interest">
+					<text class="guanzhu" v-if="!follow">关注</text>
+					<text class="guanzhu" v-else>已关注</text>
+				</view>
+			</view>
+			<view class="room-users-box">
+				<scroll-view class="right_top_scroll" scroll-x="true" scroll-left="0">
+					<view class="top-scroll-users-header" v-for="(bitem,bindex) in users" :key="bindex">
+						<image :src="bitem.app_user_avatar" class="top-scroll-users-header"
+							v-if="bitem.app_user_avatar"></image>
+						<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/default_avtar.png"
+							class="top-scroll-users-header" mode="aspectFill"></image>
+					</view>
+				</scroll-view>
+			</view>
+
+			<view class="users-count web-font">
+				<view class="users-count web-font">
+					<text class="users-count-text"> {{users.length}}</text>
+				</view>
+				<view class="users-count " @click="outroom">
+					<image src="@/static/img/close.png" class="users-count-img" mode="aspectFit"></image>
+				</view>
+			</view>
+		</view>
+
+
+		<view class="top-left" v-if="isshow">
+			<view class="top-left-a" @click="switchCamera">
+				<image class="left-img" src="/static/img/qiehuan.png" mode=""></image>
+			</view>
+		</view>
+		<view class="msgview">
+			<mh-msgList ref="msgList" :msgList="msgList"></mh-msgList>
+		</view>
+		<!-- 底部操作 -->
+
+
+		<view class="inpit-box-bg" v-if="focus">
+			<view class="inpit-box-body">
+				<input class="uni-input" @input="onKeyInput" maxlength="20" cursor-spacing="10" hold-keyboard
+					placeholder="说点什么吧..." :value="inputValue" :focus="focus" />
+				<view v-if="inputValue!=''" @click="send_message">
+					<text class="send-but">发送</text>
+				</view>
+			</view>
+		</view>
+		<view class="dobox" v-else>
+			<view class="inpit-box">
+				<view class="input-tpl" @click="set_focus">
+					<text class="input-tpls">说点什么..</text>
+				</view>
+				<view class="functionbox">
+					<view class="function-box">
+
+						<view class="ico-box" @click="send_liwu">
+							<image class="ico-box-img" src="@/static/img/li.png" mode="aspectFit"></image>
+						</view>
+						<view class="ico-box" @click="send_shop">
+							<image class="ico-box-img" src="@/static/img/shanpin.png" mode="aspectFit"></image>
+						</view>
+						<view class="ico-box" @click="send_lick">
+							<image class="ico-box-img" src="@/static/img/gn.png"></image>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 底部分享弹窗 -->
+		<uni-popup ref="share" :type="type" :custom="true" @change="change">
+			<template v-if="popup==1">
+				<view class="uni-share" style="background-color: #333333;">
+
+					<view class="send-boj" id="tes">
+						<view class="send-boj-txt">
+							<text class="send-boj-txta">礼物</text>
+							<view class="gift-jb-con">
+								<image class="gift-jb-img" src="@/static/img/jb.png" mode=""></image>
+								<text class="gift-web-je">
+									{{now_money}}
+								</text>
+
+							</view>
+
+						</view>
+						<view class="send-boj-close" @tap="close">
+							<image class="send-boj-close-img" src="/static/img/close.png" mode=""></image>
+						</view>
+					</view>
+					<scroll-view scroll-y style="height: 480rpx;overflow: hidden;">
+
+						<view class="uni-share-content">
+							<view class="lw-box" v-for="(litem,lindex) in liwu" :key="lindex"
+								@click="send_liwu_obj(litem)" @touchstart="handleTouchStart(lindex)"
+								@touchend="handleTouchEnd(lindex)" :class="{ 'hovered': lindex== hoveredIndex }">
+								<image class="lw-ico" :src="litem.gift_img"></image>
+								<view class="lw-name">
+									<text class="lw-name">{{litem.gift_name}}</text>
+								</view>
+								<view class="lw-money">
+									<image class="lw-money-img" src="@/static/img/jb.png" mode=""></image>
+
+									<text class="lw-moneya">{{litem.gift_price}}
+									</text>
+								</view>
+								<text class="send-m" v-if="lindex== hoveredIndex">赠送</text>
+							</view>
+						</view>
+
+					</scroll-view>
+					<!-- <view class="gift-botton-view" @click="rechargejb">
+						<text class="gift-web-cz">充值</text>
+					</view> -->
+				</view>
+			</template>
+			<template v-if="popup==2">
+				<view class="uni-shop">
+
+					<view class="shop">
+						<view class="shop-top">
+							<image class="shop-top-img" :src="room.cover" mode=""></image>
+							<text class="shop-top-txt">{{roomDetail.live_name}}</text>
+						</view>
+						<view class="shop-close" @tap="close">
+							<image class="shop-close-img" src="/static/img/colse1.png" mode=""></image>
+						</view>
+					</view>
+					<scroll-view scroll-y style="height: 680rpx;overflow: hidden;">
+						<view class="uni-shop-content">
+
+							<view class="shop-content" v-for="(litem,lindex) in roomDetail.goods" :key="lindex">
+								<image class="shop-content-img" :src="litem.app_goods_pic"></image>
+								<view class="shop-content-txt">
+									<view class="sp-txta">{{litem.app_goods_name}}</view>
+									<view class="sp-txtb">
+										<view class="txtba">
+											<text class="txtba-a">￥</text>
+											<text class="txtba-b">{{litem.app_goods_price.split('.')[0]}}.</text>
+											<text class="txtba-c">{{litem.app_goods_price.split('.')[1]}}</text>
+										</view>
+										<text class="txtbb" @click="shopp(litem)">去抢购</text>
+									</view>
+								</view>
+							</view>
+						</view>
+
+					</scroll-view>
+
+				</view>
+			</template>
+		</uni-popup>
+		<uni-popup ref="recharge" :type="type" :custom="true" @change="change">
+			<view class="uni-recharge">
+				<view class="recharge">
+					<view class="recharge_title">
+						<text class="recharge_title">我的金币</text>
+					</view>
+					<view class="recharge-one">
+						<image class="recharge-one-img" src="../../static/img/jb.png" mode="aspectFit"></image>
+						<view class="recharge-one-txt"><text class="recharge-one-txt" {{now_money}}</text></view>
+					</view>
+					<view class="recharge-con">
+						<view class="recharge-con-title">
+							<text class="recharge-con-title">金币充值</text>
+						</view>
+						<view class="recharge-con-detail">
+
+							<view class="con-detail" v-for="(item,ik) in Recharglist" :key='ik'
+								@click="RechargClick(ik)" :class="{ 'carecharge': ik== regIndex }">
+								<view class="" v-if='item.id=="AA"'>
+									<!-- <text class="con-detaila">输入金额</text> -->
+									<input type="text" class="con-detaila" value="" placeholder="输入金额" />
+									<text class="con-detailb">最低可充值1元</text>
+								</view>
+								<view class="" v-else>
+									<text class="con-detaila">{{item.data.give}}金币</text>
+									<text class="con-detailb">{{item.data.price}}元</text>
+								</view>
+							</view>
+						</view>
+
+						<text class="recharge-conbottom">
+							立即充值
+						</text>
+					</view>
+				</view>
+			</view>
+
+		</uni-popup>
+		<!-- 礼物弹窗 -->
+		<view class="gift-alert" v-for="(gift,gindex) in giftobj" :key="gindex"
+			:style="{ top: gift.top + 'px', left: gift.left + 'px' }">
+
+			<view class="gift-alerta">
+				<view class="send-boj-user-header">
+					<image :src="gift.app_user_avatar" class="send-boj-user-header-img" mode="aspectFill"
+						v-if="gift.app_user_avatar"></image>
+					<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/default_avtar.png"
+						class="send-boj-user-header-img" mode="aspectFill"></image>
+				</view>
+				<view class="gift-detail">
+					<text class="gifta">{{gift.app_user_name}}</text>
+					<text class="giftb">送{{room.app_user_name}}{{gift.gift_name}}</text>
+				</view>
+				<view class="gift-ico">
+					<image :src="gift.gift_img" class="gift-ico-img" mode="aspectFill"></image>
+				</view>
+			</view>
+			<view class="gift-alertb">
+				<image class="gift-alertb-img" src="@/static/img/X.png" mode=""></image>
+				<view class="gift-alertb-txt"> <text class="gift-alertb-txt">{{gift.gift_num}}</text> </view>
+			</view>
+		</view>
+		<!-- 用户进入弹窗 -->
+		<view class="join-box" v-for="(join,jindex) in join_arr" :key="jindex" :animation="join.animationData">
+			<view class="user-lever" style="margin-right: 10upx;">
+				<view class="user-lever-ico-box">
+					<image class="user-lever-ico" src="/static/img/room-user-lever.png"></image>
+				</view>
+				<view class="web-font user-lever-text">2</view>
+			</view>
+			<text class="join-box-text web-font">
+				{{join.message}}
+			</text>
+		</view>
+
+		<gb-popup :isShow="isShow1" rName="确定" :isBut="false" lName="取消" @lEvent="show1" @rEvent="copyData"
+			title="请输入礼物数量">
+			<view style="padding: 30rpx;">
+				<input type="value" v-model="gift_num" placeholder="请输入" />
+			</view>
+		</gb-popup>
+	</view>
+</template>
+
+<script>
+	import {
+		joinChatRoom,
+		sendGroupMessage,
+		bindUser,
+		stopPushLive,
+		liveDetail,
+		getfans,
+		rewardList,
+		giftList,
+		liveAudience,
+		getuser,
+		getRechargeApi,
+		sendGift,
+		getAjuser
+	} from '@/api/live.js'
+	import {
+		VUE_APP_WS_URL_ONE
+	} from '@/config/app.js';
+
+	import uniPopup from '@/components/unipopup/live-uni-popup.vue';
+	import msgList from '@/components/mh-msgList/mh-msgList.vue';
+	import gbpopup from '@/components/gb-popup/gb-popup.vue';
+	export default {
+		name: "sd-float-page",
+		props: {
+			role_val: {
+				type: String,
+				default: '0'
+			},
+			roomid_val: {
+				type: String,
+				default: '0'
+			},
+			room: {
+				type: Object,
+			}
+		},
+		components: {
+			uniPopup,
+			'mh-msgList': msgList,
+			'gb-popup': gbpopup,
+		},
+		data() {
+			return {
+				windowWidth: '',
+				// room: [], //房间信息
+				roomobj: [],
+				users: [{
+						url: require('@/static/images/bg1.png'),
+					},
+					{
+						url: require('@/static/images/bg1.png'),
+					},
+					{
+						url: require('@/static/images/bg1.png'),
+					}, {
+						url: require('@/static/images/bg1.png'),
+					}
+				],
+				rid: 0, //房间id
+				role: '', //角色
+				focus: false,
+				inputValue: '',
+				isshow: false,
+				message_arr: [
+
+				],
+				msgList: [{
+					userName: "系统通知",
+					content: "倡导绿色直播，严禁发布涉黄涉毒涉赌，严禁发布涉政、违法及低俗违规内容。健康直播，文明互动",
+					cmd: "say",
+					msg_type: "system"
+				}, ],
+				view_id: '',
+				liwu: [],
+				liwu2: [],
+				liwu3: [],
+				type: 'bottom',
+				follow: false, //关注
+				popup: 3, //1礼物操作 2其他操作 3.商品
+				user: '',
+				giftobj: [], //礼物
+				join_arr: [],
+				userName: '',
+				now_money: 0,
+				roomDetail: '',
+				userinfo: null,
+				hoveredIndex: -1,
+				regIndex: -1,
+				gifts: [],
+				gifsobj: {},
+				gift_num: '',
+				isShow1: false,
+			}
+			/*定义IM消息类型
+			1：进群通知
+			2：发送自定义消息
+			3：收到礼物
+			*/
+		},
+
+		mounted() {
+
+
+			this.userinfo = JSON.parse(uni.getStorageSync('USER_INFO'))
+			this.getjuser()
+		
+			this.get_live_room(); //调用直播间信息
+			this.rewardList()
+			this.giftList()
+			this.liveAudience()
+			this.getuser()
+			this.getRecharg()
+
+		},
+		onReady() {
+			this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
+			const t = this;
+			t.role = this.$props.role_val;
+			t.rid = this.$props.roomid_val;
+			t.user = uni.getStorageSync('user');
+			console.log('浮动模板被加载的事件')
+			console.log(this.$props)
+			// 保持屏幕常亮
+			uni.setKeepScreenOn({
+				keepScreenOn: true,
+				success: (res) => {
+					console.log('手机长亮时间')
+					console.log(res)
+				},
+				fail: (e) => {
+					console.log(e)
+					console.log('手机长亮时间')
+				}
+			});
+			uni.onKeyboardHeightChange(res => {
+				if (res.height == 0) {
+					this.focus = false;
+				}
+			})
+
+
+		},
+		beforeDestroy() {
+			uni.closeSocket({
+				success: function() {
+					console.log('WebSocket连接已关闭')
+				},
+				fail: function(err) {
+					console.log('关闭WebSocket连接失败:', err)
+				}
+			})
+		},
+		methods: {
+			//关注
+			getjuser() {
+				getAjuser(this.room.app_user_id).then((res) => {
+					if (res.status == 200) {
+						this.follow = res.data.is_start
+					}
+				}).catch((err) => {
+
+				})
+			},
+			//获取充值数据
+			getRecharg() {
+				getRechargeApi().then((res) => {
+					console.log(res.data.recharge_quota, '11111111')
+					this.Recharglist = res.data.recharge_quota
+					this.Recharglist.push({
+						data: {},
+						id: 'AA'
+					})
+					// this.now_money = res.data.now_money
+				})
+			},
+			//获取余额
+			getuser() {
+				getuser().then((res) => {
+
+					this.now_money = res.data.now_money
+				})
+			},
+			//获取房间人数列表
+			liveAudience() {
+				let data = {
+					app_name: 'shop',
+					live_stream_id: this.room.live_stream_id
+				}
+				liveAudience(data).then((res) => {
+					this.users = res.data.lists
+				})
+			},
+			//礼物列表
+			rewardList() {
+				rewardList().then((res) => {
+					console.log(res, '11111111')
+				})
+			},
+			//送礼
+			//送礼
+
+			bosendGift(gif) {
+				// 执行关闭模态对话框的操作
+				let data = {
+					app_name: 'shop',
+					gift_id: gif.gift_id,
+					live_stream_id: this.room.live_stream_id,
+					gift_num: gif.gift_num,
+				}
+				console.log(data)
+				sendGift(data).then((res) => {
+
+					if (res.code == 1) {
+						this.$refs.share.close()
+						uni.hideModal()
+					} else {
+						uni.showModal({
+							title: '提示',
+							content: res.msg,
+							confirmColor: '#ee6666', //确定字体颜色
+							showCancel: false, //没有取消按钮的弹框
+							buttonText: '确定',
+							success: function(res) {
+								if (res.confirm) {
+
+								} else if (res.cancel) {
+									console.log('用户点击取消');
+								}
+							},
+						})
+					}
+				})
+
+			},
+			//礼物列表
+			giftList() {
+				giftList().then((res) => {
+					this.liwu = res.data
+				})
+			},
+			//关注
+			interest() {
+				this.follow = !this.follow
+				if (this.follow) {
+					getfans(this.room.app_user_id, {
+						status: 1
+					}).then((res) => {
+						console.log(res, '11111111')
+						if (res.status == 200) {
+
+							console.log('关注成功')
+						}
+
+					}).catch((err) => {
+						console.log(err)
+					})
+				} else {
+					getfans(this.room.app_user_id, {
+						status: 0
+					}).then((res) => {
+						if (res.status == 200) {
+
+							console.log('已取消关注')
+						}
+					}).catch((err) => {
+						console.log(err)
+					})
+				}
+
+			},
+
+			//充值
+			RechargClick(index) {
+				this.regIndex = index
+			},
+			//hover效果设置
+			handleTouchStart(index) {
+				this.hoveredIndex = index;
+			},
+			handleTouchEnd(index) {
+				this.hoveredIndex = -1;
+			},
+			//加入直播间
+			joinChatRoom() {
+				let data = {
+					live_stream_id: this.room.live_stream_id,
+					app_name: 'shop',
+					app_user_id: uni.getStorageSync('UID'),
+					app_user_name: '用户' + uni.getStorageSync('UID'),
+					app_user_avatar: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png",
+				}
+				joinChatRoom(data).then((res) => {
+					if (res.code == 1) {
+						console.log('加入房间成功')
+					} else {
+						uni.showModal({
+							title: '提示',
+							content: res.msg,
+							confirmColor: '#ee6666', //确定字体颜色
+							showCancel: false, //没有取消按钮的弹框
+							buttonText: '确定',
+							success: function(res) {
+								if (res.confirm) {
+									uni.redirectTo({
+										url: '/pages/room/index'
+									})
+								} else if (res.cancel) {
+									console.log('用户点击取消');
+								}
+							}
+						});
+					}
+				})
+			},
+
+			//购买商品
+
+			shopp(item) {
+				console.log(item)
+				uni.navigateTo({
+					url:'/pages/goods_details/index?id='+item.app_goods_id
+				})
+			},
+			//绑定用户id
+			bindUser(client_id) {
+				let data = {
+					app_name: 'shop',
+					app_user_id: uni.getStorageSync('UID'),
+					client_id: client_id
+				}
+				bindUser(data).then((res) => {
+					if (res.code == 1) {
+						console.log('绑定成功')
+						this.joinChatRoom()
+					}
+
+				}).catch((err) => {
+					console.log(err)
+				})
+			},
+
+			// 进入这个页面的时候创建websocket连接【整个页面随时使用】
+			connectSocketInit() {
+				console.log(VUE_APP_WS_URL_ONE)
+				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
+				this.socketTask = uni.connectSocket({
+					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
+					url: VUE_APP_WS_URL_ONE,
+					success(data) {
+						console.log("websocket连接成功", data);
+					},
+					fail() {
+						console.log("websocket连接失败", data);
+					},
+					complete(data) {
+						console.log("websocket连接完成", data);
+					}
+				});
+				this.socketTask.onError((res) => {
+					console.log("连接发生错误", res)
+				})
+				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
+				this.socketTask.onOpen(res => {
+					console.log(res, '连接打开');
+				})
+
+				this.socketTask.onMessage((res) => {
+					console.log("收到服务器内容：" + res.data);
+					let str = res.data
+					let obj = JSON.parse(str);
+					if (obj.type == 'init') {
+						this.bindUser(obj.client_id)
+					} else if (obj.type == 'message') {
+
+						// console.log(this.msgList.length, '11111111111')
+
+
+						let data1 = {
+							userName: obj.name,
+							content: obj.text,
+							avatar: obj.avatar,
+							cmd: "say",
+							msg_type: "user"
+						}
+						this.msgList.push(data1)
+						this.$refs.msgList.setMsgPanelScroll()
+					} else if (obj.type == 'sys_message') {
+						let data1 = {
+							userName: obj.name,
+							content: obj.text,
+							avatar: obj.avatar,
+							cmd: "say",
+							msg_type: "system"
+						}
+						this.msgList.push(data1)
+						this.$refs.msgList.setMsgPanelScroll()
+					} else if (obj.type == 'stream') {
+						if (obj.status == -1) {
+							uni.showModal({
+
+								title: '提示',
+								content: '直播间已关闭',
+								confirmColor: '#ee6666', //确定字体颜色
+								showCancel: false, //没有取消按钮的弹框
+								buttonText: '确定',
+								success: function(res) {
+									if (res.confirm) {
+										uni.redirectTo({
+											url: '/pages/room/index'
+										})
+									} else if (res.cancel) {
+										console.log('用户点击取消');
+									}
+								}
+							})
+
+						}
+					}  else if (obj.type == 'gift_message') {
+						let data1 = {
+							userName: '',
+							content: obj.text+'X'+obj.gift_num,
+							avatar: obj.app_user_avatar,
+							cmd: "say",
+							msg_type: "user"
+						}
+						this.msgList.push(data1)
+						this.$refs.msgList.setMsgPanelScroll()
+						this.sendGift(obj)
+
+					} else if (obj.type == 'audience') {
+						this.liveAudience()
+					}
+
+
+
+
+
+
+				});
+				// 这里仅是事件监听【如果socket关闭了会执行】
+				this.socketTask.onClose(() => {
+					console.log("已经被关闭了")
+				})
+			},
+			sendGift(gift) {
+				// userName: "11111111",
+				// number: 33330,
+				// gift_name: "333333333",
+				// userAvatar: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png",
+				// gift_ico: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png",
+
+				gift.top = Math.random() * 200 // 随机生成礼物的位置
+				gift.left = Math.random() * 200 // 随机生成礼物的位置
+				this.giftobj.push(gift);
+				setTimeout(() => {
+					this.giftobj.splice(this.gifts.indexOf(gift), 1); // 礼物消失
+				}, 3000);
+			},
+			start() {
+				this.timeoutObj = setTimeout(() => {
+					//这里发送一个心跳，后端收到后，返回一个心跳消息，
+					//onmessage拿到返回的心跳就说明连接正常
+					console.log('ping');
+					this.socketTask.send({
+						data: "ping"
+					});
+
+				}, this.timeout)
+			},
+			// 关闭websocket【离开这个页面的时候执行关闭】
+			closeSocket() {
+				this.socketTask.close({
+					success(res) {
+						this.is_open_socket = false;
+						console.log("关闭成功", res)
+					},
+					fail(err) {
+						console.log("关闭失败", err)
+					}
+				})
+			},
+
+
+			//关闭弹窗
+			close() {
+				this.$refs.share.close()
+
+			},
+			//切换摄像头
+			switchCamera() {
+				console.log('切换摄像头')
+				this.$emit('switchCamera', '')
+			},
+			onRoomFunc: function(e) {
+				const t = this;
+				var self = this;
+
+				var message = {
+					userName: '11111111',
+					number: 33330,
+					gift_name: '333333333',
+					userAvatar: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png",
+					gift_ico: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png"
+				};
+				var nowTime = new Date();
+				var animation = uni.createAnimation({
+					duration: 200,
+					timingFunction: 'linear'
+				});
+				animation.left(20).step({
+					duration: 200
+				});
+				message.animationData = animation;
+				message.tapTime = nowTime; //加入计时器
+				t.giftobj.push(message);
+				console.log('t.giftobj', t.giftobj)
+				var animation_del = uni.createAnimation({
+					duration: 200,
+					timingFunction: 'linear'
+				});
+				animation_del.left(-300).step({
+					duration: 200
+				});
+				setTimeout(function() {
+					for (var i = 0; i < t.giftobj.length; i++) {
+						if (new Date() - t.giftobj[i].tapTime > 3000) {
+							t.giftobj[i].animationData = animation_del;
+							// if (new Date() - t.giftobj[i].tapTime > 5000){
+							// 	t.giftobj.splice(i,1);//释放内存
+							// }
+						}
+					}
+					console.log('t.giftobj', t.giftobj)
+				}, 3000)
+				message.message = message.userName + '送了' + message.number + '个' + message.gift_name;
+				t.message_arr.push(message);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+				// switch (args.tag) {
+				// 	case 'recvTextMsg': {
+				// 		console.log('收到用户发送消息:', e.detail.detail);
+				// 		if (e.detail.detail.nature == 1) {
+				// 			var index = t.users.findIndex(i => i.userid == e.detail.detail.userid);
+				// 			if (index == -1) {
+				// 				t.users.push(e.detail.detail);
+				// 			}
+				// 			var str = e.detail.detail;
+				// 			str.tapTime = new Date();
+				// 			str.message = e.detail.detail.userName + " " + " 进入房间";
+				// 			var animation = uni.createAnimation({
+				// 				duration: 200,
+				// 				timingFunction: 'linear'
+				// 			});
+				// 			animation.left(20).step({
+				// 				duration: 200
+				// 			});
+				// 			str.animationData = animation;
+				// 			t.join_arr.push(str);
+				// 			console.log('t.join_arr', t.join_arr)
+				// 			var animation_del = uni.createAnimation({
+				// 				duration: 200,
+				// 				timingFunction: 'linear'
+				// 			});
+				// 			animation_del.left(-300).step({
+				// 				duration: 200
+				// 			});
+				// 			setTimeout(function() {
+				// 				for (var i = 0; i < t.join_arr.length; i++) {
+				// 					if (new Date() - t.join_arr[i].tapTime > 3000) {
+				// 						t.join_arr[i].animationData = animation_del;
+				// 						// if (new Date() - t.join_arr[i].tapTime > 5000){
+				// 						// 	t.join_arr.splice(i,1);//释放内存
+				// 						// }
+				// 					}
+				// 				}
+				// 				console.log('t.join_arr', t.join_arr)
+				// 				console.log('t.users', t.users)
+				// 			}, 3000)
+				// 		} else if (e.detail.detail.nature == 2) {
+				// 			t.message_arr.push(e.detail.detail);
+				// 		} else if (e.detail.detail.nature == 3) {
+				// 			var message = e.detail.detail;
+				// 			var nowTime = new Date();
+				// 			var animation = uni.createAnimation({
+				// 				duration: 200,
+				// 				timingFunction: 'linear'
+				// 			});
+				// 			animation.left(20).step({
+				// 				duration: 200
+				// 			});
+				// 			message.animationData = animation;
+				// 			message.tapTime = nowTime; //加入计时器
+				// 			t.giftobj.push(message);
+				// 			console.log('t.giftobj', t.giftobj)
+				// 			var animation_del = uni.createAnimation({
+				// 				duration: 200,
+				// 				timingFunction: 'linear'
+				// 			});
+				// 			animation_del.left(-300).step({
+				// 				duration: 200
+				// 			});
+				// 			setTimeout(function() {
+				// 				for (var i = 0; i < t.giftobj.length; i++) {
+				// 					if (new Date() - t.giftobj[i].tapTime > 3000) {
+				// 						t.giftobj[i].animationData = animation_del;
+				// 						// if (new Date() - t.giftobj[i].tapTime > 5000){
+				// 						// 	t.giftobj.splice(i,1);//释放内存
+				// 						// }
+				// 					}
+				// 				}
+				// 				console.log('t.giftobj', t.giftobj)
+				// 			}, 3000)
+				// 			message.message = message.userName + '送了' + message.number + '个' + message.gift_name;
+				// 			t.message_arr.push(message);
+				// 		} else if (e.detail.detail.nature == 4) {
+				// 			e.detail.detail.message = e.detail.detail.userName + '关注了主播';
+				// 			t.message_arr.push(e.detail.detail);
+				// 		} else {
+				// 			return;
+				// 		}
+				// 		console.log('t.message_arr', t.message_arr)
+				// 		t.view_id = 'demo' + t.message_arr.length;
+				// 		break;
+				// 	}
+				// 	default: {
+				// 		console.log('onRoomEvent default: ', e)
+				// 		break;
+				// 	}
+				// }
+			},
+			//关闭直播间
+			outroom: function() {
+				uni.redirectTo({
+					url: '/pages/room/index'
+				})
+			},
+
+			get_live_room() {
+
+				liveDetail({
+					app_name: 'shop',
+					live_stream_id: this.room.live_stream_id,
+				}).then(res => {
+
+					if (res.code == 1) {
+						this.roomDetail = res.data
+						// console.log(res.data, '房间id 以及当前用户id')
+						// console.log(this.room.app_user_id, uni.getStorageSync('user_id'), '房间id 以及当前用户id')
+						if (res.data.app_user_id == uni.getStorageSync('Uid')) {
+							this.isshow = true
+						}
+					}
+					this.connectSocketInit()
+				}).catch((err) => {})
+			},
+			togglePopup(type, open) {
+				this.type = type
+				if (open === 'tip') {
+					this.show = true
+				} else {
+					this.$refs[open].open()
+				}
+			},
+			cancel(type) {
+				if (type === 'tip') {
+					this.show = false
+					return
+				}
+				// this.$refs[type].close()
+			},
+			change(e) {
+				console.log('是否打开:' + e.show)
+			},
+			//充值
+			rechargejb: function() {
+				this.$refs['share'].close()
+				const t = this;
+				this.type = 'bottom'
+				this.$refs['recharge'].open()
+
+			},
+			send_liwu: function() {
+				const t = this;
+				t.popup = 1;
+				this.type = 'bottom'
+				t.togglePopup('bottom', 'share');
+
+				// this.$refs['recharge'].open()
+			},
+			send_shop: function() {
+				const t = this;
+				t.popup = 2;
+
+				this.type = 'bottom'
+				t.togglePopup('bottom', 'share');
+			},
+			send_lick: function() {
+				this.sendGift()
+
+
+			},
+
+			//礼物弹窗
+			show1() {
+				this.isShow1 = !this.isShow1
+				this.gift_num = ''
+			},
+			//礼物弹窗0
+			copyData() {
+				this.gifsobj.gift_num = this.gift_num
+				this.bosendGift(this.gifsobj)
+				this.show1()
+			},
+			//礼物弹窗1
+			send_liwu_obj: function(gt) {
+				console.log(this.gift_num)
+				let gift = {
+					'gift_id': gt.id,
+
+				}
+				this.isShow1 = true
+				this.gifsobj = gift
+
+			},
+			//对话监听
+			set_focus: function() {
+				this.focus = !this.focus
+			},
+
+			//对话输入监听
+			onKeyInput: function(event) {
+				this.inputValue = event.detail.value
+
+			},
+
+			send_message: function() {
+				const t = this;
+				t.focus = false;
+
+				if (t.to_userid == '') {
+					uni.showToast({
+						title: '内容不能为空',
+						duration: 2000,
+						icon: 'none'
+					});
+					return false;
+				}
+
+				let data = {
+					live_stream_id: this.room.live_stream_id,
+					app_name: 'shop',
+					app_user_id: uni.getStorageSync('UID'),
+					message: this.inputValue
+				}
+
+				sendGroupMessage(data).then(res => {
+					console.log('发送的消息' + JSON.stringify(res))
+					this.inputValue = ''
+					if (res.code == 1) {
+						console.log('发送的消息成功')
+					}
+				})
+				// let message = {
+				// 	userName: '大黄',
+				// 	content: this.inputValue,
+				// 	cmd: "say",
+				// 	msg_type: "user"
+				// };
+
+				// /** 实际应用应发送到服务端，通过监听服务端传回的消息加入的msgList **/
+				// if (this.msgList.length > 100) {
+				// 	this.msgList.splice(0, 1);
+				// 	this.msgList.push(message)
+				// 	this.$refs.msgList.setMsgPanelScroll()
+				// 	this.inputValue = ''
+				// } else {
+				// 	this.msgList.push(message)
+				// 	this.$refs.msgList.setMsgPanelScroll()
+				// 	this.inputValue = ''
+				// }
+				// console.log(this.msgList)
+
+			},
+		},
+		// onBackPress() {
+		// 	this.$refs['showpopup'].close()
+		// 	this.$refs['showtip'].close()
+		// 	this.$refs['showimage'].close()
+		// 	this.$refs['showshare'].close()
+		// }
+	}
+</script>
+
+<style lang="scss" scoped>
+	page {
+		position: relative;
+
+
+	}
+
+	.container {
+		width: 100%;
+		/* 设置容器的宽度 */
+	}
+
+	.dobox {
+		position: absolute;
+
+		bottom: 0rpx;
+		width: 750rpx;
+		background-color: #F8F8F8;
+	}
+
+	.inpit-box {
+		padding: 20upx 20rpx;
+		width: 700rpx;
+		flex-direction: row;
+		justify-content: space-between;
+		/* padding-top: 40upx; */
+	}
+
+	.inpit-box-bg {
+		position: absolute;
+
+		bottom: 0;
+		height: 80rpx;
+		width: 750rpx;
+		background-color: #F8F8F8;
+		z-index: 9999;
+	}
+
+	.inpit-box-body {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+
+	}
+
+	.uni-input {
+		font-size: 32upx;
+		height: 60upx;
+		margin-top: 10upx;
+		padding-left: 20rpx;
+		color: #333333;
+		background-color: #f8f8f8;
+		flex: 1;
+	}
+
+	.send-but {
+		width: 120upx;
+		background-color: #0081FF;
+		color: #FFFFFF;
+		text-align: center;
+		font-size: 28upx;
+		height: 60upx;
+		line-height: 60upx;
+		border-radius: 60upx;
+		margin-top: 10upx;
+	}
+
+
+
+	.function-box {
+		width: 380rpx;
+		flex-direction: row;
+		justify-content: space-around;
+		padding-left: 20upx;
+	}
+
+	.ico-box {
+		width: 77rpx;
+		height: 77rpx;
+		border-radius: 50%;
+		background-color: rgba(0, 0, 0, .1);
+		line-height: 77rpx;
+
+	}
+
+	.ico-box-img {
+		width: 77rpx;
+		height: 77rpx;
+		border-radius: 50%;
+		background-color: rgba(0, 0, 0, .1);
+		line-height: 77rpx;
+	}
+
+	.ico {
+
+		font-size: 48upx;
+	}
+
+	.input-tpl {
+		height: 70upx;
+		width: 300upx;
+		line-height: 70upx;
+		text-align: left;
+		background: rgba(0, 0, 0, 0.25);
+		opacity: 1;
+		border-radius: 39upx;
+	}
+
+	.input-tpls {
+		height: 70upx;
+		width: 300upx;
+		line-height: 70upx;
+		text-align: left;
+		padding-left: 20rpx;
+		font-size: 25upx;
+		color: #FFFFFF;
+		border-radius: 70upx;
+	}
+
+	.top-left {
+		// height: auto;
+		position: absolute;
+		width: 40rpx;
+		right: 20rpx;
+		top: 230rpx;
+		z-index: 99999;
+	}
+
+	.left-img {
+		width: 40rpx;
+		height: 40rpx;
+	}
+
+
+
+	.gifta {
+		font-size: 23rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #FFFFFF;
+		margin-bottom: 5rpx;
+		text-align: center;
+	}
+
+	.giftb {
+
+		font-size: 19rpx;
+		font-family: PingFang SC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #FFFFFF;
+		text-align: center;
+	}
+
+	.nickname {
+		font-size: 28upx;
+		color: #22c8ef;
+		/* font-weight: 800; */
+		padding: 0 10upx;
+		line-height: 40upx;
+		padding-left: 4upx;
+		font-weight: 800;
+	}
+
+	.message-scroll-box {
+		line-height: 40upx;
+		color: #f9f9f9;
+		font-size: 28upx;
+		white-space: pre-wrap;
+		font-weight: 800;
+	}
+
+	.message-scroll-box-xi {
+		line-height: 40upx;
+		color: #f9f9f9;
+		font-size: 28upx;
+		white-space: pre-wrap;
+	}
+
+	.message-scroll-box-gift {
+		color: #22c8ef;
+		line-height: 40upx;
+		font-size: 28upx;
+		white-space: pre-wrap;
+	}
+
+	.user-lever {
+		background-color: #ebc602;
+		padding: 4upx 10upx;
+		border-radius: 20upx;
+		height: 20upx;
+		line-height: 20upx;
+		float: left;
+		display: flex;
+		overflow: hidden;
+		margin-top: 10upx;
+	}
+
+	.msgview {
+		position: fixed;
+		width: 540rpx;
+		height: 540rpx;
+		left: 20rpx;
+		bottom: 180rpx;
+		overflow: hidden;
+		border: none;
+
+		z-index: 9;
+
+	}
+
+	.chat-area-line {
+		width: 550upx;
+		flex-direction: row;
+		margin-bottom: 5upx;
+	}
+
+	.system-msg {
+		width: 550upx;
+		margin-bottom: 5upx;
+	}
+
+	.system-msg-detail {
+		// max-width: 550upx;
+
+		padding: 10upx;
+		border-radius: 30upx;
+		background-color: rgba($color: #000000, $alpha: 0.4);
+		flex-direction: row;
+		flex-wrap: wrap;
+		margin-right: 14upx;
+
+		>.system-msg-detail-username {
+			color: red;
+			font-size: 32upx;
+			font-weight: 400;
+			line-height: 40upx;
+
+		}
+
+		>.system-msg-detail-content {
+			font-size: 32upx;
+			font-weight: 400;
+			line-height: 40upx;
+			color: #A0CFFF;
+		}
+	}
+
+	.user-line {
+		// max-width: 530upx;
+		padding: 10upx;
+		color: #FFFFFF;
+		flex-direction: row;
+		border-radius: 30upx;
+		background-color: rgba($color: #000000, $alpha: 0.4);
+		margin-right: 14upx;
+		font-size: 28upx;
+		font-weight: 400;
+		line-height: 40upx;
+	}
+
+	.user-msg {
+		width: 530upx;
+
+
+		margin-bottom: 5upx;
+	}
+
+	.user-msg-detail {
+		padding: 10upx;
+		border-radius: 30upx;
+		background-color: rgba($color: #000000, $alpha: 0.4);
+		flex-direction: row;
+		flex-wrap: wrap;
+		margin-right: 14upx;
+
+		>.user-msg-detail-tag {
+			color: #A0CFFF;
+			background-color: #53C21D;
+			width: 80upx;
+			height: 40upx;
+			border-radius: 20upx;
+			font-size: 32upx;
+			font-weight: 400;
+			line-height: 40upx;
+		}
+
+		>.user-msg-detail-username {
+			color: #A0CFFF;
+			font-size: 32upx;
+			font-weight: 400;
+			line-height: 40upx;
+		}
+
+		>.user-msg-detail-content {
+			font-size: 32upx;
+			font-weight: 400;
+			line-height: 40upx;
+			color: #fff;
+		}
+	}
+
+	.user-lever-ico-box {
+		width: 100rpx;
+		width: 15upx;
+		height: 15upx;
+		border-radius: 100%;
+		background-color: #e0ad07;
+		padding: 2upx;
+		margin-right: 5upx;
+	}
+
+	.user-lever-ico {
+		width: 15upx;
+		height: 15upx;
+
+		// margin: auto;
+	}
+
+	.user-lever-text {
+		color: #FFFFFF;
+		font-size: 22upx;
+		height: 20upx;
+		line-height: 20upx;
+	}
+
+	.uni-recharge {
+		background-color: #fff;
+		position: fixed;
+		bottom: 0;
+		flex: 1;
+		width: 750rpx;
+		background: #FFFFFF;
+		border-top-left-radius: 30upx;
+		border-top-right-radius: 30upx;
+
+
+	}
+
+	.recharge-one {
+		display: flex;
+		justify-content: center; //弹性盒子对象在主轴上的对齐方式
+		align-items: center;
+
+	}
+
+	.recharge_title {
+		font-size: 33rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 500;
+		text-align: center;
+		margin-top: 32rpx;
+		margin-bottom: 42rpx;
+	}
+
+	.recharge-one-img {
+		width: 72rpx;
+		height: 72rpx;
+
+
+		vertical-align: middle;
+
+
+	}
+
+	.recharge-one-txt {
+		font-size: 33rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #333333;
+		text-align: center;
+		margin-top: 18rpx;
+	}
+
+	.recharge-con {
+		padding: 0 32rpx;
+	}
+
+	.recharge-con-title {
+		font-size: 33rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #333333;
+	}
+
+	.recharge-con-detail {
+		flex-direction: row;
+
+		margin-top: 32rpx;
+		margin-bottom: 200rpx;
+	}
+
+	.recharge-conbottom {
+
+		width: 589rpx;
+		height: 84rpx;
+		line-height: 84rpx;
+		text-align: center;
+		position: absolute;
+		bottom: 30rpx;
+		left: 50%;
+		margin-left: -299.5rpx;
+		background: #F84221;
+		border-radius: 42rpx 42rpx;
+		font-size: 33rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #FFFFFF;
+	}
+
+	.con-detail {
+		width: 217rpx;
+		height: 159rpx;
+		margin-right: 18rpx;
+
+		border-radius: 21rpx 21rpx;
+		background: #F4F4F4;
+		text-align: center;
+	}
+
+	.carecharge {
+		border-width: 1px;
+		border-style: solid;
+		border-color: #F84221;
+	}
+
+	.con-detaila {
+		margin-top: 32rpx;
+		margin-bottom: 17rpx;
+		font-size: 37rpx;
+		font-family: PingFang SC-Semibold, PingFang SC;
+		font-weight: 600;
+		color: #333333;
+	}
+
+	.con-detailb {
+
+		font-size: 26rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #333333;
+	}
+
+	/* 底部分享 */
+	.uni-share {
+
+		background-color: #fff;
+		position: fixed;
+		bottom: 0;
+		width: 750rpx;
+		border-top-left-radius: 30upx;
+		border-top-right-radius: 30upx;
+	}
+
+	.uni-shop {
+
+		background-color: #fff;
+		position: fixed;
+		bottom: 0;
+		width: 750rpx;
+		border-top-left-radius: 30upx;
+		border-top-right-radius: 30upx;
+
+	}
+
+	.shop {
+		flex-direction: row;
+		justify-content: space-between;
+	}
+
+	.shop-top {
+		flex-direction: row;
+		margin-top: 20rpx;
+		margin-bottom: 20rpx;
+		margin-left: 20rpx;
+	}
+
+	.shop-top-img {
+		width: 80rpx;
+		height: 80rpx;
+		border-radius: 50%;
+	}
+
+	.shop-close {
+		margin: 20rpx 20rpx;
+	}
+
+	.shop-close-img {
+		width: 60rpx;
+		height: 60rpx;
+
+	}
+
+	.shop-top-txt {
+		line-height: 80rpx;
+		margin-left: 30rpx;
+	}
+
+	.uni-share-title {
+		line-height: 60rpx;
+		font-size: 24rpx;
+		padding: 15rpx 0;
+		text-align: center;
+	}
+
+
+	.uni-shop-content {
+		/* #ifndef APP-NVUE */
+		/* display: flex; */
+		/* #endif */
+		// width: 750rpx;
+
+		// display: flex;
+
+		flex-wrap: wrap;
+		// justify-content: center;
+
+
+		padding-left: 20rpx;
+		padding-bottom: 20rpx;
+		margin-top: 20rpx;
+
+
+
+		/* padding-bottom: 0; */
+	}
+
+	.shop-content {
+		width: 700rpx;
+		// border-width: 1px;
+		// border-style: solid;
+		// border-color: red;
+		flex-direction: row;
+		margin-bottom: 20rpx;
+	}
+
+	.shop-content-img {
+		width: 160rpx;
+		height: 160rpx;
+		// border-width: 1px;
+		// border-style: solid;
+		// border-color: red;
+	}
+
+	.shop-content-txt {
+		margin-left: 20rpx;
+		width: 500rpx;
+		position: relative;
+	}
+
+	.sp-txta {
+		font-size: 30rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #333333;
+	}
+
+	.sp-txtb {
+		position: absolute;
+		bottom: 20rpx;
+		width: 500rpx;
+
+		flex-direction: row;
+		justify-content: space-between;
+
+		.txtba {
+			color: red;
+			flex-direction: row;
+			height: 60rpx;
+			line-height: 60rpx;
+			font-size: 26rpx;
+			font-family: PingFang SC-Medium, PingFang SC;
+			font-weight: 400;
+			color: #F84221;
+		}
+
+		.txtba-a {
+			font-size: 26rpx;
+			font-family: PingFang SC-Medium, PingFang SC;
+			font-weight: 400;
+			color: #F84221;
+			line-height: 60rpx;
+		}
+
+		.txtba-b {
+			font-size: 33rpx;
+			font-family: PingFang SC-Medium, PingFang SC;
+			font-weight: 500;
+			color: #F84221;
+			line-height: 60rpx;
+		}
+
+		.txtba-c {
+			font-size: 26rpx;
+			font-family: PingFang SC-Medium, PingFang SC;
+			font-weight: 400;
+			line-height: 60rpx;
+			color: #F84221;
+		}
+
+		.txtbb {
+			width: 120rpx;
+			height: 60rpx;
+			line-height: 60rpx;
+			background-color: red;
+			border-radius: 0px 11rpx 11rpx 0px;
+			text-align: center;
+			font-size: 30rpx;
+			font-family: PingFang SC-Medium, PingFang SC;
+			font-weight: 500;
+			color: #FFFFFF;
+		}
+	}
+
+	.uni-share-content {
+		/* #ifndef APP-NVUE */
+		/* display: flex; */
+		/* #endif */
+		// width: 750rpx;
+
+		// display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		// justify-content: center;
+		padding: 15px 28rpx;
+
+
+		/* padding-bottom: 0; */
+	}
+
+	.content-image {
+		width: 60rpx;
+		height: 60rpx;
+	}
+
+	.uni-share-content-text {
+		font-size: 26rpx;
+		color: #333;
+		padding-top: 5px;
+		padding-bottom: 10px;
+	}
+
+	.uni-share-btn {
+		height: 90rpx;
+		line-height: 90rpx;
+		font-size: 14px;
+		border-top-color: #f5f5f5;
+		border-top-width: 1px;
+		border-top-style: solid;
+		text-align: center;
+		color: #666;
+	}
+
+	.gift-botton-view {
+		line-height: 90rpx;
+		height: 90rpx;
+		font-size: 14px;
+		border-top-color: #5c1398;
+		border-top-width: 1px;
+		border-top-style: solid;
+		text-align: center;
+
+
+	}
+
+	.gift-jb-con {
+		width: 221rpx;
+		height: 43rpx;
+		background: rgba(0, 0, 0, 0.25);
+		border-radius: 39rpx 39rpx;
+		flex-direction: row;
+	}
+
+	.gift-web-je {
+		font-size: 23rpx;
+		line-height: 43rpx;
+		font-weight: normal;
+		color: #FFFFFF;
+	}
+
+	.gift-jb-img {
+		width: 33rpx;
+		height: 33rpx;
+		margin-top: 3rpx;
+		margin-left: 10rpx;
+		margin-right: 10rpx;
+	}
+
+	.gift-web-cz {
+		font-size: 25rpx;
+		color: #fff;
+		text-align: center;
+	}
+
+	/* 礼物 */
+	.lw-box {
+		width: 168rpx;
+		height: 224rpx;
+		background: rgba(0, 0, 0, 0.2);
+		border-radius: 21rpx 21rpx;
+		margin-bottom: 30upx;
+		position: relative;
+	}
+
+	.hovered {
+		border: 2rpx solid #707070;
+	}
+
+	.send-m {
+		width: 168rpx;
+		height: 49rpx;
+		line-height: 49rpx;
+		text-align: center;
+		position: absolute;
+		background: #F84221;
+		bottom: 0;
+		border-radius: 0 0 21rpx 21rpx;
+		font-size: 23rpx;
+		font-family: PingFang SC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #FFFFFF;
+	}
+
+	.lw-ico {
+		width: 100rpx;
+		height: 100rpx;
+		margin-left: 35rpx;
+		margin-top: 20rpx;
+		margin-bottom: 10rpx;
+
+
+
+	}
+
+	.lw-name {
+		font-size: 23rpx;
+		font-family: PingFang SC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #FFFFFF;
+		text-align: center;
+		margin-bottom: 10rpx;
+	}
+
+	.lw-money {
+		flex-direction: row;
+
+	}
+
+	.lw-moneya {
+		font-size: 23rpx;
+		font-family: PingFang SC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #FFFFFF;
+		text-align: center;
+		margin-top: 5rpx;
+	}
+
+	.lw-money-img {
+		width: 28rpx;
+		height: 28rpx;
+		margin-left: 38rpx;
+		margin-right: 5rpx;
+	}
+
+	.send-boj {
+		// display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		padding: 20upx 30upx;
+		// border-bottom: 2upx solid #5c1398;
+	}
+
+	.send-boj-txt {
+		flex: 1;
+
+		padding-right: 40rpx;
+
+		flex-direction: row;
+		justify-content: space-between;
+	}
+
+	.send-boj-txta {
+		font-size: 30rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #FFFFFF;
+	}
+
+	.send-boj-close {
+		width: 30rpx;
+		height: 30rpx;
+	}
+
+	.send-boj-close-img {
+		width: 30rpx;
+		height: 30rpx;
+	}
+
+	.gift-alert {
+		width: 430rpx;
+		flex-direction: row;
+		justify-content: space-between;
+		// background-color: green;
+		// animation: slideRight 1s linear forwards;
+	}
+
+	.gift-alerta {
+		width: 359rpx;
+		height: 70rpx;
+		background: rgba(0, 0, 0, 0.25);
+		border-radius: 39rpx 39rpx;
+		flex-direction: row;
+		justify-content: space-between;
+
+	}
+
+	.gift-alertb {
+		flex-direction: row;
+		height: 72rpx;
+		line-height: 72rpx;
+	}
+
+	.gift-alertb-img {
+		width: 44rpx;
+		height: 72rpx;
+	}
+
+	.gift-alertb-txt {
+		font-size: 45rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 700;
+		color: #FFFFFF;
+
+	}
+
+	@keyframes slideRight {
+		0% {
+			transform: translateX(0);
+		}
+
+		100% {
+			transform: translateX(100%);
+		}
+	}
+
+	.join-box {
+		position: fixed;
+		left: -500upx;
+		bottom: 350upx;
+		border-radius: 70upx;
+		display: flex;
+		padding: 10upx 30upx;
+		z-index: 9999;
+		background-color: #ef7526;
+	}
+
+	.join-box-text {
+		color: #F9F9F9;
+		line-height: 40upx;
+		font-size: 32upx;
+		white-space: pre-wrap;
+	}
+
+	.gift-ico {
+		width: 60upx;
+		height: 60upx;
+		margin-top: 10rpx;
+
+	}
+
+	.gift-ico-img {
+		width: 60upx;
+		height: 60upx;
+
+	}
+
+	.send-boj-user-header {
+		width: 63upx;
+		height: 63upx;
+		border-radius: 50%;
+		margin-top: 0rpx;
+		margin-left: -7rpx;
+
+	}
+
+	.send-boj-user-header-img {
+		width: 63upx;
+		height: 63upx;
+		border-radius: 50%;
+
+
+	}
+
+	.top-do-box {
+		width: 750rpx;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+
+		margin-top: 60rpx;
+	}
+
+	.room-info {
+		width: 350rpx;
+		display: flex;
+		flex-direction: row;
+		height: 80upx;
+		background-color: rgba(0, 0, 0, .2);
+
+		border-radius: 90upx;
+
+	}
+
+	.room-logo-box {
+		width: 80upx;
+		height: 80upx;
+		border-radius: 50%;
+
+	}
+
+
+	.room-info-message {
+		margin-left: 10rpx;
+	}
+
+	.room-user-name {
+		width: 150rpx;
+
+		font-size: 25upx;
+		color: #fff;
+		margin-top: 10rpx;
+
+	}
+
+	.room-user-money {
+		font-size: 28upx;
+		font-size: 25upx;
+		color: #fff;
+		margin-top: 5rpx;
+	}
+
+
+	.room-xin-box {
+		height: 30upx;
+		line-height: 30upx;
+		font-size: 20upx;
+		color: #FFFFFF;
+		border-radius: 30upx;
+		background-color: #f4305e;
+		margin-top: 10upx;
+		padding: 0 10upx;
+		margin-right: 4upx;
+	}
+
+	.room-money {
+		height: 30upx;
+		line-height: 30upx;
+		font-size: 20upx;
+		color: #FFFFFF;
+		border-radius: 30upx;
+		white-space: nowrap;
+		overflow: hidden;
+		margin-top: 10upx;
+	}
+
+	.room-guanzhu {
+		width: 105upx;
+		height: 60upx;
+		line-height: 60upx;
+		text-align: center;
+		color: #f4305e;
+		background-color: #FFFFFF;
+		border-radius: 50upx;
+		margin-top: 10rpx;
+
+	}
+
+	.guanzhu {
+		width: 105upx;
+		height: 60upx;
+		line-height: 60upx;
+		text-align: center;
+		font-size: 25rpx;
+		color: #f4305e;
+		background-color: #FFFFFF;
+		border-radius: 50upx;
+
+	}
+
+	.room-users-box {
+		width: 200rpx;
+		height: 65upx;
+
+		display: flex;
+
+	}
+
+	.right_top_scroll {
+		overflow: hidden;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		width: 200rpx;
+		height: 80upx;
+		margin-top: 10rpx;
+
+	}
+
+
+
+	.top-scroll-users-header {
+		width: 60upx;
+		height: 60upx;
+		border-radius: 50%;
+		margin-right: 10upx;
+		overflow: hidden;
+
+
+	}
+
+	// .top-scroll-users-header image {
+	// 	width: 100%;
+	// 	height: 100%;
+	// }
+
+	.users-count {
+		display: flex;
+		flex-direction: row;
+		color: #FFFFFF;
+		font-size: 28upx;
+	}
+
+	.users-count-text {
+		margin-top: 10rpx;
+		width: 70upx;
+		height: 60upx;
+		line-height: 60upx;
+		text-align: center;
+		border-radius: 60upx;
+		background-color: rgba(0, 0, 0, .2);
+		margin-right: 30rpx;
+	}
+
+	.users-count-img {
+		width: 40rpx;
+		height: 40rpx;
+		margin-top: 20rpx;
+		margin-right: 20rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/components/unipopup/live-uni-popup.vue b/components/unipopup/live-uni-popup.vue
new file mode 100644
index 0000000..134c831
--- /dev/null
+++ b/components/unipopup/live-uni-popup.vue
@@ -0,0 +1,241 @@
+<template>
+	<view v-if="showPopup" class="uni-popup" @touchmove.stop.prevent="clear">
+		<uni-transition :mode-class="['fade']" :styles="maskClass" :show="showTrans" @click="onTap" />
+		<uni-transition :mode-class="ani" :styles="transClass" :show="showTrans" @click="onTap">
+			<view class="uni-popup__wrapper-box" @click.stop="clear">
+				<slot />
+			</view>
+		</uni-transition>
+	</view>
+</template>
+
+<script>
+
+	export default {
+		
+	
+		props: {
+			// 开启动画
+			animation: {
+				type: Boolean,
+				default: true
+			},
+			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
+			type: {
+				type: String,
+				default: 'center'
+			},
+			// maskClick
+			maskClick: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				ani: [],
+				showPopup: false,
+				showTrans: false,
+				maskClass: {
+					'position': 'fixed',
+					'bottom': 0,
+					'top': 0,
+					'left': 0,
+					'right': 0,
+					'backgroundColor': 'rgba(0, 0, 0, 0)'
+				},
+				transClass: {
+					'position': 'fixed',
+					'left': 0,
+					'right': 0,
+				}
+			}
+		},
+		watch: {
+			type: {
+				handler: function(newVal) {
+					switch (this.type) {
+						case 'top':
+							this.ani = ['slide-top']
+							this.transClass = {
+								'position': 'fixed',
+								'left': 0,
+								'right': 0,
+							}
+							break
+						case 'bottom':
+							this.ani = ['slide-bottom']
+							this.transClass = {
+								'position': 'fixed',
+								'left': 0,
+								'right': 0,
+								'bottom': 0
+							}
+							console.log('直播调用弹窗')
+							break
+						case 'center':
+							this.ani = ['zoom-out', 'fade']
+							this.transClass = {
+								'position': 'fixed',
+								/* #ifndef APP-NVUE */
+								'display': 'flex',
+								'flexDirection': 'column',
+								/* #endif */
+								'bottom': 0,
+								'left': 0,
+								'right': 0,
+								'top': 0,
+								'justifyContent': 'center',
+								'alignItems': 'center'
+							}
+
+							break
+					}
+				},
+				immediate: true
+			}
+		},
+		created() {},
+		methods: {
+			clear(e) {
+				// TODO nvue 取消冒泡
+				e.stopPropagation()
+			},
+			open() {
+				this.showPopup = true
+				this.$nextTick(() => {
+					setTimeout(() => {
+						this.showTrans = true
+					}, 0);
+				})
+				this.$emit('change', {
+					show: true
+				})
+			},
+			close(type) {
+				this.showTrans = false
+				this.$nextTick(() => {
+					clearTimeout(this.timer)
+					this.timer = setTimeout(() => {
+						this.$emit('change', {
+							show: false
+						})
+						this.showPopup = false
+					}, 0)
+				})
+			},
+			onTap() {
+				if (!this.maskClick) return
+				this.close()
+			}
+		}
+	}
+</script>
+<style scoped>
+	.uni-popup {
+		position: fixed;
+		/* #ifdef H5 */
+		top: var(--window-top);
+		/* #endif */
+		/* #ifndef H5 */
+		top: 0;
+		/* #endif */
+		bottom: 0;
+		left: 0;
+		right: 0;
+		/* #ifndef APP-NVUE */
+		z-index: 99;
+		/* #endif */
+	}
+
+	.uni-popup__mask {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background-color: rgba(0, 0, 0, 0.4);
+		opacity: 0;
+	}
+
+	.mask-ani {
+		transition-property: opacity;
+		transition-duration: 0.2s;
+	}
+
+	.uni-top-mask {
+		opacity: 1;
+	}
+
+	.uni-bottom-mask {
+		opacity: 1;
+	}
+
+	.uni-center-mask {
+		opacity: 1;
+	}
+
+	.uni-popup__wrapper {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: absolute;
+	}
+
+	.top {
+		top: 0;
+		left: 0;
+		right: 0;
+		transform: translateY(-500px);
+	}
+
+	.bottom {
+		bottom: 0;
+		left: 0;
+		right: 0;
+		transform: translateY(500px);
+	}
+
+	.center {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		flex-direction: column;
+		/* #endif */
+		bottom: 0;
+		left: 0;
+		right: 0;
+		top: 0;
+		justify-content: center;
+		align-items: center;
+		transform: scale(1.2);
+		opacity: 0;
+	}
+
+	.uni-popup__wrapper-box {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: relative;
+	}
+
+	.content-ani {
+		/* transition: transform 0.3s;
+ */
+		transition-property: transform, opacity;
+		transition-duration: 0.2s;
+	}
+
+
+	.uni-top-content {
+		transform: translateY(0);
+	}
+
+	.uni-bottom-content {
+		transform: translateY(0);
+	}
+
+	.uni-center-content {
+		transform: scale(1);
+		opacity: 1;
+	}
+</style>
\ No newline at end of file
diff --git a/components/unipopup/uni-popup.vue b/components/unipopup/uni-popup.vue
new file mode 100644
index 0000000..7408094
--- /dev/null
+++ b/components/unipopup/uni-popup.vue
@@ -0,0 +1,241 @@
+<template>
+	<view v-if="showPopup" class="uni-popup" @touchmove.stop.prevent="clear">
+		<uni-transition :mode-class="['fade']" :styles="maskClass" :show="showTrans" @click="onTap" />
+		<uni-transition :mode-class="ani" :styles="transClass" :show="showTrans" @click="onTap">
+			<view class="uni-popup__wrapper-box" @click.stop="clear">
+				<slot />
+			</view>
+		</uni-transition>
+	</view>
+</template>
+
+<script>
+
+	export default {
+	
+		props: {
+			// 开启动画
+			animation: {
+				type: Boolean,
+				default: true
+			},
+			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
+			type: {
+				type: String,
+				default: 'center'
+			},
+			// maskClick
+			maskClick: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				ani: [],
+				showPopup: false,
+				showTrans: false,
+				maskClass: {
+					'position': 'fixed',
+					'bottom': 0,
+					'top': 0,
+					'left': 0,
+					'right': 0,
+					'backgroundColor': 'rgba(0, 0, 0, 0.4)'
+				},
+				transClass: {
+					'position': 'fixed',
+					'left': 0,
+					'right': 0,
+				}
+			}
+		},
+		watch: {
+			type: {
+				handler: function(newVal) {
+					switch (this.type) {
+						case 'top':
+							this.ani = ['slide-top']
+							this.transClass = {
+								'position': 'fixed',
+								'left': 0,
+								'right': 0,
+							}
+							break
+						case 'bottom':
+							this.ani = ['slide-bottom']
+							this.transClass = {
+								'position': 'fixed',
+								'left': 0,
+								'right': 0,
+								'bottom': 0
+							}
+							console.log('底部条用')
+							console.log(this.type)
+							break
+						case 'center':
+							this.ani = ['zoom-out', 'fade']
+							this.transClass = {
+								'position': 'fixed',
+								/* #ifndef APP-NVUE */
+								'display': 'flex',
+								'flexDirection': 'column',
+								/* #endif */
+								'bottom': 0,
+								'left': 0,
+								'right': 0,
+								'top': 0,
+								'justifyContent': 'center',
+								'alignItems': 'center'
+							}
+
+							break
+					}
+				},
+				immediate: true
+			}
+		},
+		created() {},
+		methods: {
+			clear(e) {
+				// TODO nvue 取消冒泡
+				e.stopPropagation()
+			},
+			open() {
+				this.showPopup = true
+				this.$nextTick(() => {
+					setTimeout(() => {
+						this.showTrans = true
+					}, 50);
+				})
+				this.$emit('change', {
+					show: true
+				})
+			},
+			close(type) {
+				this.showTrans = false
+				this.$nextTick(() => {
+					clearTimeout(this.timer)
+					this.timer = setTimeout(() => {
+						this.$emit('change', {
+							show: false
+						})
+						this.showPopup = false
+					}, 300)
+				})
+			},
+			onTap() {
+				if (!this.maskClick) return
+				this.close()
+			}
+		}
+	}
+</script>
+<style scoped>
+	.uni-popup {
+		position: fixed;
+		/* #ifdef H5 */
+		top: var(--window-top);
+		/* #endif */
+		/* #ifndef H5 */
+		top: 0;
+		/* #endif */
+		bottom: 0;
+		left: 0;
+		right: 0;
+		/* #ifndef APP-NVUE */
+		z-index: 99;
+		/* #endif */
+	}
+
+	.uni-popup__mask {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background-color: rgba(0, 0, 0, 0.4);
+		opacity: 0;
+	}
+
+	.mask-ani {
+		transition-property: opacity;
+		transition-duration: 0.2s;
+	}
+
+	.uni-top-mask {
+		opacity: 1;
+	}
+
+	.uni-bottom-mask {
+		opacity: 1;
+	}
+
+	.uni-center-mask {
+		opacity: 1;
+	}
+
+	.uni-popup__wrapper {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: absolute;
+	}
+
+	.top {
+		top: 0;
+		left: 0;
+		right: 0;
+		transform: translateY(-500px);
+	}
+
+	.bottom {
+		bottom: 0;
+		left: 0;
+		right: 0;
+		transform: translateY(500px);
+	}
+
+	.center {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		flex-direction: column;
+		/* #endif */
+		bottom: 0;
+		left: 0;
+		right: 0;
+		top: 0;
+		justify-content: center;
+		align-items: center;
+		transform: scale(1.2);
+		opacity: 0;
+	}
+
+	.uni-popup__wrapper-box {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: relative;
+	}
+
+	.content-ani {
+		/* transition: transform 0.3s;
+ */
+		transition-property: transform, opacity;
+		transition-duration: 0.2s;
+	}
+
+
+	.uni-top-content {
+		transform: translateY(0);
+	}
+
+	.uni-bottom-content {
+		transform: translateY(0);
+	}
+
+	.uni-center-content {
+		transform: scale(1);
+		opacity: 1;
+	}
+</style>
\ No newline at end of file
diff --git a/config/app.js b/config/app.js
index 72b12bf..9bfd4f2 100644
--- a/config/app.js
+++ b/config/app.js
@@ -7,6 +7,7 @@ let httpApi
 let httpApiTwo
 let httpApiThree
 let httpApiFour
+let httpApiFive
 
 // 在打包之前请检查当前环境是否正确
 const env = 'dev'; // 开发
@@ -31,6 +32,7 @@ switch (env) {
 		httpApiTwo = "https://nk.lihaink.cn"
 		httpApiThree = 'http://ceshi-oa.lihaink.cn'
 		httpApiFour = 'https://ceshi-worker-task.lihaink.cn'
+		httpApiFive = 'https://ceshi-zhibo.lihaink.cn'
 }
 
 
@@ -39,6 +41,7 @@ switch (env) {
 // 聊天接口修改此字符 小程序聊天要求wss 例如：wss://mer.crmeb.net
 // let wsApi = 'ws://192.168.3.20:8324'
 let wsApi = 'wss://shop.lihaink.cn'
+let wsApi_one = 'wss://ceshi-zhibo.lihaink.cn/chat_room'
 module.exports = {
 	// 请求域名 格式： https://您的域名
 	// #ifdef MP || APP-PLUS
@@ -47,19 +50,23 @@ module.exports = {
 	HTTP_REQUEST_URL_TWO: httpApiTwo,
 	HTTP_REQUEST_URL_THREE: httpApiThree,
 	HTTP_REQUEST_URL_FOUR: httpApiFour,
+	HTTP_REQUEST_URL_FIVE: httpApiFive,
 	VUE_APP_WS_URL: `${wsApi}?type=user`,
+	VUE_APP_WS_URL_ONE:wsApi_one,
 	// #endif
 
 	// #ifdef H5
 	//H5接口是浏览器地址
 	HTTP_REQUEST_URL: process.env.NODE_ENV == 'development'? httpApi : window.location.protocol + "//" + window.location.host,
 	HTTP_REQUEST_URL_TWO: httpApiTwo,
+	HTTP_REQUEST_URL_FIVE: httpApiFive,
     HTTP_REQUEST_URL_FOUR: window.location.host == 'shop.lihaink.cn' ?'https://worker-task.lihaink.cn':window.location.host == 'test.shop.lihaink.cn'?'https://preview-worker-task.lihaink.cn':'https://ceshi-worker-task.lihaink.cn',
 
 	// 聊天长连接地址
 	VUE_APP_WS_URL: wsApi ? `${wsApi}?type=user` : VUE_APP_WS_URL,
 	// #endif
 	openPlantGrass: openPlantGrass,
+	
 	HEADER: {
 		'content-type': 'application/json',
 		//#ifdef H5
diff --git a/pages.json b/pages.json
index ad43be1..c4e8e9f 100644
--- a/pages.json
+++ b/pages.json
@@ -64,6 +64,27 @@
 				"navigationBarTitleText": "购物车"
 			}
 		},
+		{
+			"path": "pages/room/index",
+			"style": {
+				"navigationBarTitleText": "直播列表",
+				"enablePullDownRefresh": true
+			}
+		},
+		{
+			"path": "pages/room/spectator",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "直播间"
+			}
+		}
+		,{
+			"path": "pages/room/histroyroom",
+			"style": {
+				"navigationBarTitleText": "历史直播间",
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path": "pages/plant_grass/index",
 			"style": {
diff --git a/pages/gather/gather.vue b/pages/gather/gather.vue
index 1b682ec..9d9670e 100644
--- a/pages/gather/gather.vue
+++ b/pages/gather/gather.vue
@@ -210,6 +210,16 @@
 							url: 'https://ceshi-worker-task.lihaink.cn/uploads/files/20231019/20231019151519e8f484737.wgt',
 						},
 						type: 4,
+					},
+					{
+						name: '里海直播',
+						icon: '/static/applet/live.png',
+						data: {
+							id:  "__UNI__0E46DAD",
+							url: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/app/__UNI__0E46DAD.wgt',
+						},
+						type: 4,
+						
 					}
 					// {
 					// 	name: '大屏控制',
diff --git a/pages/index/index.vue b/pages/index/index.vue
index cd1760d..15d39e5 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -38,6 +38,9 @@
 			</zbpSwiper>
 
 
+			<view class="zhibo" @click="zhibo">
+				<image src="@/static/img/zhi.png" mode="aspectFit"></image>
+			</view>
 
 			<view class="tabs_wrapper">
 				<!-- 	<u-tabs :list="tabsData.list" @click="tabsChange" lineColor="#F84221" keyName="cate_name"
@@ -204,6 +207,7 @@
 		},
 
 		onPullDownRefresh() {
+			this.where.page=1
 			this.getCateList()
 			this.getGoods(true)
 			this.Area()
@@ -309,6 +313,13 @@
 			this.$bus.$off('value-updated')
 		},
 		methods: {
+			//直播
+			
+			zhibo(){
+				uni.navigateTo({
+					url:'/pages/room/index'
+				})
+			},
 			//弹出
 			open() {
 				this.$refs.popup.open()
@@ -741,6 +752,15 @@
 
 		// background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
 	}
+	.zhibo{
+		height: 130rpx;
+		image {
+			width: 100%;
+			height:  100%;
+	
+		
+		}
+	}
 
 	.location {
 		background-color: #f6f6f6;
diff --git a/pages/room/histroyroom.nvue b/pages/room/histroyroom.nvue
new file mode 100644
index 0000000..5bb7588
--- /dev/null
+++ b/pages/room/histroyroom.nvue
@@ -0,0 +1,104 @@
+<template>
+	<view class="container">
+		<view :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;z-inde:-1;'">
+			<!-- 
+			 1.这里的 swiper 不是用来控制视频滑动的，而是用来控制左右滑动的，如果不需要的可以改成 view
+			 2.为了 视频无限加载，已经把 21 行的 appear 去掉了，加上了 loadmore 方法（第10行）
+			 3.由于方法比较多，可以采取下面的方式查看代码：
+			 （1）Mac：按住 option 键，然后点击方法名，即可跳转到方法
+			 （2）windows：按住 Alt 键，然后鼠标左击，即可跳转到方法
+			 -->
+			<view class="root">
+				<video ref="videoPlayer" :src="currentSrc" controls @ended="playNext" :object-fit="object_fit" :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;z-inde:-1;'"></video>
+			</view>
+			<sd-float-page :room='room' :msgList='msgList'
+				:style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;position: absolute;' "></sd-float-page>
+		</view>
+
+
+
+
+	</view>
+</template>
+<script>
+	import sdFloatPage from '@/components/sd-live-page/histroy.nvue';
+
+	import {
+		playbackDetail
+	} from '@/api/live.js'
+	export default {
+		components: {
+			sdFloatPage
+		},
+		data() {
+			return {
+				rtmpSources: [],
+				currentIndex: 0,
+				room: {},
+				wHeight: 0, //获取的屏幕高度🌟💗
+				boxStyle: { //视频，图片封面样式🌟💗
+					'height': 0,
+					'width': 0,
+				},
+				object_fit: 'cover', //视频样式默认包含🌟💗
+			}
+		},
+
+		computed: {
+			currentSrc() {
+				return this.rtmpSources[this.currentIndex];
+			}
+		},
+		onLoad(options) {
+			this.room = JSON.parse(decodeURIComponent(options.data));
+			this.platform = uni.getSystemInfoSync().platform
+			this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
+			this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
+			this.wHeight = uni.getSystemInfoSync().screenHeight; //获取屏幕高度
+			this.boxStyle.height = this.wHeight; //改变视频高度
+			this.get()
+	
+		},
+		mounted() {
+		
+			// 初始化时播放第一个源
+			this.playCurrent();
+		},
+
+		methods: {
+			playCurrent() {
+				this.$refs.videoPlayer.load();
+				this.$refs.videoPlayer.play();
+			},
+			playNext() {
+				this.currentIndex++;
+				if (this.currentIndex >= this.rtmpSources.length) {
+					this.currentIndex = 0; // 回到第一个源
+				}
+				this.playCurrent();
+			},
+
+
+			get() {
+				let that = this
+				// console.log(this.room)
+				playbackDetail({
+					app_name: 'shop',
+					live_stream_id: this.room.live_stream_id
+				}).then((res) => {
+					console.log(res.data, '1111')
+
+					this.rtmpSources = res.data.playback_url;
+
+
+				})
+
+			},
+
+		},
+
+	}
+</script>
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/room/index.vue b/pages/room/index.vue
new file mode 100644
index 0000000..728e433
--- /dev/null
+++ b/pages/room/index.vue
@@ -0,0 +1,482 @@
+<template>
+	<view class="view_body">
+		<view>
+			<view class="search_content flex_a_c_j_sb">
+				<view class="flex_a_c">
+					<view class="iconfont icon-sousuo" style="font-size: 39rpx;"></view>
+					<input type="text" v-model="keyword" placeholder="搜索主播或关键字" placeholder-style="font-size: 30rpx;"
+						@input="change">
+				</view>
+				<button class="search_btn" @click="search">搜索</button>
+			</view>
+
+			<view class="banner">
+				<view class="banner-detail" v-for="(item,i) in list" :key='i' @click="zhisort(i)">
+					<view class="banner-name">
+						{{item.name}}
+					</view>
+					<view class="banner-t" v-if="isindex==i">
+
+					</view>
+				</view>
+			</view>
+
+			<scroll-view scroll-top="0" scroll-y="true" class="goods_body_scroll" v-if="isindex==0">
+				<view class="roomsbox">
+					<view class="roomblock" v-for="(room,index) in roomList" :key="index" @click="jump(room)"
+						style="border: 1px solid #e1d9d4;">
+						<image :src="room.cover" mode="aspectFill" v-if="room.cover"></image>
+						<image src="/static/lw/6.gif" mode="aspectFill" v-else></image>
+						<view class="livetitle">{{room.live_name}}</view>
+						<view class="roomstatus-d" v-if="room.status==1" style="background-color: #09BB07;">
+						</view>
+						<view class="roomstatus-d" v-else style="background-color:  #fa2306;">
+						</view>
+			
+						<view class="roomstatus" style="color: #00B26A;" v-if="room.status==1">直播中
+						</view>
+						<view class="roomstatus" style="color: #fa2306;" v-else>已停播
+						</view>
+			
+					</view>
+				</view>
+			
+			</scroll-view>
+			<scroll-view scroll-top="0" scroll-y="true" class="goods_body_scroll" v-if="isindex==1">
+				<view v-for="(pp,index) in roomList" :key="index">
+					<view class="roomsbox-a" v-for="(kk,i) in pp" :key="i">
+						<view class="roomsbox-title">
+							{{i}}
+						</view>
+						<view class="roomsbox">
+							<view class="roomblock" style="border: 1px solid #e1d9d4;" v-for="(room,j) in kk"
+								:key="j" @click="hsitroyjump(room)">
+								<image :src="room.cover" mode="aspectFill" v-if="room.cover"></image>
+								<image src="/static/lw/6.gif" mode="aspectFill" v-else></image>
+								<view class="livetitle">{{room.live_name}}</view>
+								<view class="roomstatus-d" v-if="room.status==1" style="background-color: #09BB07;">
+								</view>
+								<view class="roomstatus-d" v-if="room.status==2"
+									style="background-color:  #fa2306;">
+								</view>
+								<view class="roomstatus-d" v-if="room.status==3" style="background-color: #e1d9d4;">
+								</view>
+								<view class="roomstatus" style="color: #00B26A;" v-if="room.status==1">直播中
+								</view>
+								<view class="roomstatus" style="color: #fa2306;" v-else>已停播
+								</view>
+								
+							</view>
+						</view>
+					</view>
+			
+				</view>
+			
+			</scroll-view>
+			<view class="noshuju" v-if="roomList.length==0">
+				<emptyPage title="暂无房间信息"></emptyPage>
+			</view>
+		</view>
+
+
+	</view>
+</template>
+
+<script>
+	import emptyPage from '@/components/emptyPage.vue';
+	import {
+		live,
+		playbackList
+	} from '@/api/live.js'
+
+
+	export default {
+		components: {
+			emptyPage
+		},
+		data() {
+			return {
+				keyword: '',
+				device_height: 380,
+				page: 1,
+				dataindex: 1,
+				page_data: true,
+				list: [{
+						name: '直播精选'
+					},
+					{
+						name: '历史直播'
+					},
+
+				],
+				roomList: [],
+				user: [],
+				index: 0,
+				isGetLoginInfo: true,
+				isindex: 0,
+
+			};
+		},
+		onLoad() {
+
+
+		},
+		mounted() {
+			this.getRoomList()
+		},
+		onShow() {},
+		onReachBottom() {
+			this.getRoomList()
+		},
+
+		onPullDownRefresh: function() {
+			console.log('下拉刷新')
+			this.getRoomList()
+		},
+		methods: {
+
+			//输入
+			change(e) {
+				// console.log(e)
+				if (e.detail.value.length <= 0) {
+					this.page = 1
+					this.getRoomList()
+				}
+			},
+			//查询
+			search() {
+				this.page = 1
+				this.roomList=[]
+				if (this.isindex == 0) {
+					this.getRoomList()
+				} else {
+					this.getbackList()
+				}
+			},
+			//分类
+			zhisort(i) {
+				this.isindex = i
+				this.page = 1
+				this.keyword=''
+				this.roomList=[]
+				if (i == 0) {
+					this.getRoomList()
+				} else {
+					this.getbackList()
+				}
+			},
+			getbackList: function() {
+				playbackList({
+					page_size: 100,
+					page: this.page,
+					app_name: 'shop',
+				   keyword: this.keyword
+				}).then(res => {
+				
+					if (res.data.code = 1) {
+						uni.hideLoading()
+						const groupedArray = res.data.lists.reduce((acc, obj) => {
+							const date = obj.date;
+							if (!acc[date]) {
+								acc[date] = [];
+							}
+							acc[date].push(obj);
+							return acc;
+						}, {});
+			
+						this.roomList.push(groupedArray)
+						// 输出结果
+						// console.log(this.roomList);
+						// this.page = this.page + 1
+					}
+				})
+			},
+			/**
+			 * 拉取房间列表
+			 * @return {[type]}            
+			 * [description]
+			 */
+			getRoomList() {
+				live({
+					page_size: 10,
+					page: this.page,
+					app_name: 'shop',
+					keyword: this.keyword
+				}).then(res => {
+					console.log(res)
+					if (res.data.code = 1) {
+						uni.hideLoading()
+						if (res.data.lists.length > 0) {
+							let list = res.data.lists;
+							let productList = this.$util.SplitArray(list, this.roomList);
+							setTimeout(() => {
+								this.$set(this, 'roomList', productList);
+							}, 500)
+							this.page = this.page + 1
+						}
+			
+					}
+				})
+			},
+			//历史直播间
+			hsitroyjump: function(e) {
+				
+				uni.navigateTo({
+					url: '/pages/room/histroyroom'+'?data=' + encodeURIComponent(JSON.stringify(e))
+				})
+			
+			
+			},
+			
+			jump: function(e) {
+				uni.navigateTo({
+					url: '/pages/room/spectator' + '?data=' + encodeURIComponent(JSON.stringify(e))
+				});
+
+			},
+
+		}
+	}
+</script>
+<style lang="scss">
+	page {
+		background-color: #FFFFFF;
+	}
+
+	.goods_body_scroll {
+		margin-top: 50rpx;
+	}
+
+	.search_content {
+		margin: 0 auto;
+		width: 724rpx;
+		height: 64rpx;
+		padding: 2px 2px 2px 21.05rpx;
+		border-radius: 175rpx;
+		background: #fff;
+		margin-bottom: 21rpx;
+		position: relative;
+		box-sizing: border-box;
+		border: 2rpx solid #FCB9AD;
+		margin-top: 30rpx;
+
+		.icon-sousuo {
+			font-size: 26.32rpx;
+			font-weight: bold;
+			color: #c8c7c6;
+			margin-right: 17.54rpx;
+		}
+
+		.search_btn {
+			color: #fff;
+			width: 105.26rpx;
+			height: 56rpx;
+			line-height: 56rpx;
+			background: #f84221;
+			border-radius: 100px;
+			font-size: 28.07rpx;
+		}
+	}
+
+	.banner {
+		display: flex;
+		padding-left: 28rpx;
+
+	}
+
+	.banner-detail {
+		width: 133rpx;
+		margin-right: 30rpx;
+	}
+
+	.banner-name {
+		font-size: 33rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #333333;
+		margin-bottom: 10rpx;
+	}
+
+	.banner-t {
+		width: 46px;
+		height: 0rpx;
+		opacity: 1;
+		border: 2rpx solid #F84221;
+		margin: 0 auto;
+	}
+
+	.noshuju {
+		height: 760upx;
+	}
+
+	.mico-18 {
+		margin-top: 10upx;
+		color: #666666;
+	}
+
+	.view_body {
+		width: 100%;
+		height: 100%;
+		background-color: #FFFFFF;
+	}
+
+	.roomsbox-title {
+		font-size: 30rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #333333;
+
+		margin-bottom: 30rpx;
+		margin-left: 20rpx;
+	}
+	.roomstatus-d {
+		width: 20upx;
+		height: 20upx;
+		border-radius: 20upx;
+		position: absolute;
+		left: 20upx;
+		top: 20upx;
+	}
+
+	.roomstatus {
+		position: absolute;
+		left: 40upx;
+		top: 10upx;
+		font-size: 28upx;
+	}
+
+	.livetitle {
+		position: absolute;
+		bottom: 20upx;
+		width: 100%;
+		text-align: center;
+		height: 70upx;
+		line-height: 70upx;
+		color: #FFFFFF;
+	}
+
+	.top {
+		display: flex;
+		padding: 20upx;
+		top: 0;
+		position: fixed;
+		left: 0;
+		width: 95%;
+		background-color: #FFFFFF;
+		z-index: 9999;
+	}
+
+	.top_li {
+		font-size: 32upx;
+		padding: 0 20upx;
+		display: table-cell;
+		/* vertical-align:bottom; */
+		padding-top: 10upx;
+		color: #666666;
+	}
+
+	.top-lable-box {
+		/* #ifdef APP-PLUS */
+		/* flex: 1; */
+
+		/* #endif */
+		width: 80%;
+	}
+
+	.active {
+		font-size: 40upx;
+		font-weight: 800;
+		color: #333333;
+		padding-top: 0;
+	}
+
+	image {
+		width: 100%;
+	}
+
+	.roomsbox {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.roomblock {
+		width: 45%;
+		height: 300upx;
+		border-radius: 10upx;
+		overflow: hidden;
+		margin-bottom: 20upx;
+		position: relative;
+		margin-left: 2.5%;
+		background-color: #fff;
+	}
+
+	.right_top_scroll {
+		white-space: nowrap;
+		overflow: hidden;
+		width: 100%;
+	}
+
+	::-webkit-scrollbar {
+		width: 0;
+		height: 0;
+		color: transparent;
+	}
+
+	.scroll-view {
+		display: inline-block;
+		margin-right: 30rpx;
+		text-align: center;
+		font-size: 32rpx;
+		height: 60rpx;
+		line-height: 60rpx;
+		box-sizing: border-box;
+		padding: 0 10rpx;
+
+	}
+
+	.view_body {
+		background: #FFFFFF;
+		width: 100%;
+		overflow: hidden;
+	}
+
+	.mico-14 {
+		margin-right: 4upx;
+	}
+
+	.noshuju {
+		height: 750upx;
+	}
+
+	.noshuju_ico {
+		width: 120upx;
+		height: 80upx;
+		margin: 0 auto;
+		margin-top: 300rpx;
+
+	}
+
+	.noshuju_ico image {
+		width: 100%;
+		height: 100%;
+	}
+
+	.mico-18 {
+		margin-top: 10upx;
+		color: #666666;
+	}
+
+	.create-but {
+		background-color: #1ce0c5;
+		width: 120upx;
+		height: 60upx;
+		line-height: 60upx;
+		color: #FFFFFF;
+		text-align: center;
+		border-radius: 10upx;
+		/* #ifdef MP-WEIXIN */
+		margin-left: 40upx;
+		/* #endif */
+		margin-top: 4upx;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/room/spectator.nvue b/pages/room/spectator.nvue
new file mode 100644
index 0000000..1ce042d
--- /dev/null
+++ b/pages/room/spectator.nvue
@@ -0,0 +1,359 @@
+<template>
+	<view class="container">
+		<view :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;z-inde:-1;'">
+			<!-- 
+			 1.这里的 swiper 不是用来控制视频滑动的，而是用来控制左右滑动的，如果不需要的可以改成 view
+			 2.为了 视频无限加载，已经把 21 行的 appear 去掉了，加上了 loadmore 方法（第10行）
+			 3.由于方法比较多，可以采取下面的方式查看代码：
+			 （1）Mac：按住 option 键，然后点击方法名，即可跳转到方法
+			 （2）windows：按住 Alt 键，然后鼠标左击，即可跳转到方法
+			 -->
+			<list @loadmore="getData" @scroll="scrolls" :loadmoreoffset="wHeight*1" :show-scrollbar="false"
+				ref="listBox" :pagingEnabled="true" :scrollable="true">
+				<!-- 循环数据 -->
+				<cell v-for="(item,i) in dataList" :key="i">
+					<!-- 用div把视频模组套起来 -->
+					<div :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'">
+						<!-- <view v-if="Math.abs(k-i)<=1"> -->
+						<view v-if="Math.abs(k-i)<=1">
+							<view class="root">
+								<video :ref="'item'+i" :id="item.id" :loop="true" :autoplay="i == k"
+									:src="item.pull_url" :muted="item.isplay" :enable-progress-gesture="false"
+									:page-gesture="false" :controls="false" :show-loading="true" :is-live='true'
+									@error='vedioerr' :show-fullscreen-btn="false" :show-center-play-btn="false"
+									:style="boxStyle" :object-fit="object_fit" @timeupdate="timeupdate($event,i)">
+
+								</video>
+								<!-- {{item}} {{i}} -->
+
+							</view>
+							<sd-float-page :room='room' :msgList='msgList'
+								:style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;position: absolute;' "></sd-float-page>
+						</view>
+
+					</div>
+				</cell>
+			</list>
+		</view>
+
+
+	</view>
+</template>
+<script>
+	import list from '@/uni_modules/uview-ui/libs/config/props/list';
+	import sdFloatPage from '@/components/sd-live-page/livepage.nvue';
+	import {
+		VUE_APP_WS_URL
+	} from '@/config/app';
+
+	export default {
+		components: {
+			sdFloatPage
+		},
+		data() {
+			return {
+				imgHost: '',
+				//下面打🌟号的是必须要的基础字段
+				//下面打💗号的是拥有滑动条的必须字段
+				dataList: [
+					'rtmp://live.lihaink.cn/ceshi/ceshi?auth_key=1697453509-0-0-c086ad0c4d8c581e26438a7a99a9f40f',
+					'rtmp://live.lihaink.cn/ceshi/ceshi?auth_key=1697453509-0-0-c086ad0c4d8c581e26438a7a99a9f40f'
+				], //用于数据循环的列表🌟💗
+				wHeight: 0, //获取的屏幕高度🌟💗
+				boxStyle: { //视频，图片封面样式🌟💗
+					'height': 0,
+					'width': 0,
+				},
+				k: 0, //默认为0🌟💗
+				max: 2,
+				playIngIds: [], //正在播放的视频id列队，列队用于处理滑动过快导致的跳频问题🌟💗
+				ready: false, //可忽略
+				isDragging: false, //false代表停止滑动🌟💗
+				refreshing: true, //用于下拉刷新🌟💗
+				windowWidth: 0, //获取屏幕宽度🌟💗
+				windowHeight: 0,
+				dex: [0, 0], //用于判断是上滑还是下滑，第一个存旧值，第二个存新值【目前在1.0.7已经废弃】
+				currents: 0, //用于左右滑动，0代表视频界面，1代表右滑界面🌟💗
+				platform: '', //用于获取操作系统：ios、android🌟💗
+				playIng: false, //用于视频初始化时是否播放，默认不播放🌟💗
+				videoTime: '', //视频总时长，这个主要用来截取时间数值💗
+				videoTimes: '', //视频时长，用这个来获取时间值，例如：00:30这个时间值💗
+				changeTime: '', //显示滑动进度条时变化的时间💗
+				isShowimage: false, //是否显示封面【1.0.4已废弃，但是意思需要记住】
+				currenttimes: 0, //当前时间💗
+				isShowProgressBarTime: false, //是否拖动进度条，如果拖动（true）则显示进度条时间，否则不显示（false）【1.0.4已废弃，但是意思需要记住】
+				ProgressBarOpacity: 0.7, //进度条不拖动时的默认值，就是透明的💗
+				dotWidth: 0, //播放的小圆点，默认没有💗
+				deleteHeight: 0, //测试高度🌟💗
+				percent: 0, //百分小数💗
+				currentPosition: 0, //滑块当前位置💗//2.0已弃用，现已用于后端参数
+				currentPositions: 0, //滑块当前位置的副本💗//2.0已弃用，现已用于后端参数
+				newTime: 0, //跟手滑动后的最新时间💗
+				timeNumber: 0, //🌟💗
+				ProgressBarBottom: 20, //进度条离底部的距离💗
+				object_fit: 'cover', //视频样式默认包含🌟💗
+				mode: 'aspectFit', //图片封面样式🌟💗
+				timeout: "", //🌟用来阻止 setTimeout()方法
+				voice: "", //🌟用来阻止 setTimeout()方法
+				oldVideo: "",
+				isAutoplay: false, //是否开启自动播放(默认不开启)
+				autoplayText: "开启自动播放",
+				msgList: [],
+				room: {},
+				socketTask: null,
+				userName: '',
+
+
+			}
+		},
+
+		watch: {
+			async k(new_k, old_k) { //监听 k 值的变化，可以控制视频的播放与暂停
+				const max = new_k + 2;
+				if (this.max < max) {
+					this.max = max;
+				}
+				// if (this.oldCurrent != this.currentNav) {
+				// 	this.oldCurrent = this.currentNav
+				// 	return false
+				// }
+				this.dataList[old_k].playIng = false //如果视频暂停，就加载封面
+				this.dataList[old_k].isplay = true
+				this.dataList[old_k].state = 'pause'
+				// console.log('预留第' + (old_k) + '个视频：' + this.dataList[old_k].community_id)
+				// 2.0版本已经去掉了下面这一句，视频不用暂停，只需要把声音禁止就行
+				uni.createVideoContext(this.dataList[old_k].community_id, this)
+					.pause() //如果视频暂停，那么旧视频停止，这里的this.dataList[old_k].id + '' + old_k，后面加 old_k 是为了每一个视频的 id 值不同，这样就可以大程度的避免串音问题
+				// console.log('已经暂停 --> 第' + (old_k) + '个视频～') //提示
+				this.dataList[new_k].state = 'play'
+				this.dataList[new_k].isplay = false
+				this.dataList[new_k].playIng = true
+				uni.createVideoContext(this.dataList[new_k].community_id, this).play()
+			}
+		},
+		onShow() {
+			uni.hideLoading();
+			// console.log('回到前台' + this.dataList.length);
+			if (this.dataList.length !== 0) {
+				this.dataList[this.k].state = 'play';
+				setTimeout(() => {
+					uni.createVideoContext(this.dataList[this.k].id, this).play()
+				}, 250)
+			}
+		},
+		onHide() {
+			this.dataList[this.k].state = 'pause'; //界面隐藏也要停止播放视频
+			setTimeout(() => {
+				uni.createVideoContext(this.dataList[this.k].community_id, this).pause(); //暂停以后继续播放
+			}, 250)
+			// console.log('到后台');
+		},
+		onLoad(options) {
+			this.platform = uni.getSystemInfoSync().platform
+			this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
+			this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
+			this.wHeight = uni.getSystemInfoSync().screenHeight; //获取屏幕高度
+			this.boxStyle.height = this.wHeight; //改变视频高度
+			console.log(this.boxStyle.height)
+			this.room = JSON.parse(decodeURIComponent(options.data));
+			this.get()
+
+		},
+		mounted() {
+
+		},
+		Ready() {},
+		methods: {
+
+
+
+			autoPlay() {
+				this.isAutoplay = !this.isAutoplay;
+				if (!this.isAutoplay) {
+					this.autoplayText = "开启自动播放"
+					uni.showToast({
+						title: "关闭自动播放",
+						icon: 'none',
+						duration: 3000
+					})
+				} else {
+					this.autoplayText = "关闭自动播放"
+					uni.showToast({
+						title: "开启自动播放",
+						icon: 'none',
+						duration: 3000
+					})
+				}
+			},
+			getData() {
+				// 这里就是数据加载完以后再向后端发送数据的地方,
+
+
+			},
+			vedioerr(e) {
+				let timer = null
+				if (e.tye = 'error') {
+					timer = setInterval((res) => {
+						uni.createVideoContext('myVideo', this).play()
+						console.log('重新连接', '1111111111')
+					}, 600000)
+				} else {
+					timer = null
+				}
+
+			},
+
+			touchstart(event) {
+				this.dataList[this.k].isShowimage = true //刚触摸的时候就要显示预览视频图片了
+				this.dataList[this.k].isShowProgressBarTime = true //显示时间线
+				this.ProgressBarOpacity = 1 //让滑块显示起来更明显一点
+				this.dotWidth = 10 //让点显示起来更明显一点
+			},
+			touchend() { //当手松开后，跳到最新时间
+				uni.createVideoContext(this.dataList[this.k].community_id, this).seek(this.newTime)
+				if (this.dataList[this.k].state == 'pause') {
+					this.dataList[this.k].state = 'play'
+					uni.createVideoContext(this.dataList[this.k].community_id, this).play()
+				}
+				this.dataList[this.k].isShowProgressBarTime = false //触摸结束后，隐藏时间线
+				this.dataList[this.k].isShowimage = false //触摸结束后，隐藏时间预览
+				this.ProgressBarOpacity = 0.5 //隐藏起来进度条，不那么明显了
+				this.dotWidth = 0 //隐藏起来进度条，不那么明显了
+			},
+			touchmove(event) { //当手移动滑块时，计算位置、百分小数、新的时间
+				var msg = []
+				if (this.videoTime !== '') {
+					msg = this.videoTime.split(':')
+				}
+				var timeNumber = Number(msg[0]) * 60 + Number(msg[1])
+				this.currentPositions = event.changedTouches[0].screenX
+				this.percent = this.currentPositions / this.windowWidth
+				this.newTime = this.percent * timeNumber
+				this.currenttimes = parseInt(this.newTime)
+				let theTime = this.newTime
+				let middle = 0; // 分
+				if (theTime > 60) {
+					middle = parseInt(theTime / 60);
+					theTime = parseInt(theTime % 60);
+				}
+				this.changeTime =
+					`${Math.round(middle)>9?Math.round(middle):'0'+Math.round(middle)}:${Math.round(theTime)>9?Math.round(theTime):'0'+Math.round(theTime)}`
+			},
+			timeupdate(event, index) { //计算滑块当前位置，计算当前百分小数
+				if (index == this.k) {
+					var currenttime = event.detail.currentTime
+					this.timeNumber = Math.round(event.detail.duration)
+					this.getTime()
+					this.percent = currenttime / this.timeNumber
+					this.currentPosition = this.windowWidth * this.percent
+					let theTime = currenttime
+					let middle = 0; // 分
+					if (theTime > 60) {
+						middle = parseInt(theTime / 60);
+						theTime = parseInt(theTime % 60);
+					}
+					this.changeTime =
+						`${Math.round(middle)>9?Math.round(middle):'0'+Math.round(middle)}:${Math.round(theTime)>9?Math.round(theTime):'0'+Math.round(theTime)}`
+					//自动切换视频
+					if (this.isAutoplay) { //true,代表自动播放
+						if (Math.round(currenttime) == this.timeNumber - 1) {
+							const dom = uni.requireNativePlugin('dom')
+							let doms = 'item' + (this.k + 1)
+							setTimeout(() => {
+								let el = this.$refs[doms][0]
+								dom.scrollToElement(el, {
+									offset: 0,
+									animated: true
+								})
+							}, 500)
+						}
+					}
+				}
+			},
+			getTime() { //得到时间函数
+				this.videoTime = this.formatSeconds(this.timeNumber);
+				var msg = []
+				if (this.videoTime !== '') {
+					msg = this.videoTime.split(':')
+				}
+				this.videoTimes = `${msg[0]>9?msg[0]:'0'+msg[0]}:${msg[1]>9?msg[1]:'0'+msg[1]}`;
+			},
+			formatSeconds(value) { //获取时间函数
+				let theTime = parseInt(value); // 秒
+				let middle = 0; // 分
+				if (theTime > 60) {
+					middle = parseInt(theTime / 60);
+					theTime = parseInt(theTime % 60);
+				}
+				return `${middle>9?middle:middle}:${theTime>9?theTime:theTime}`;
+			},
+			moreVideo(index) {
+
+			},
+			toVideo(index) {
+
+			},
+			scrolls(event) {
+
+				this.showManage = false;
+				this.isDragging = event.isDragging;
+				if (!event.isDragging) { //isDragging：判断用户是不是在滑动，滑动：true，停止滑动：false。我们要用户停止滑动时才给 k 赋值，这样就可以避免很多麻烦
+					var i = Math.round(Math.abs(event.contentOffset.y) / (this.wHeight - this.deleteHeight +
+						1)) //先用绝对值取出滑动的距离，然后除以屏幕高度，取一个整，就知道你现在滑动到哪一个视频了
+					if (i !== this.k) { //这里加判断是因为这个方法会执行很多次，会造成重复请求，所以这里写一个限制
+						if (uni.getSystemInfoSync().platform == 'ios') {
+							this.k = i //判断了用户没有滑动，确认了用户的确是在看这个视频，然后就赋值啦
+							this.dataList[this.k].state = 'play'
+							// console.log('正在播放 --> 第' + (this.k + 1) + '个视频～')
+						} else {
+							clearTimeout(this.timers);
+							this.timers = setTimeout(() => {
+								this.k = i //判断了用户没有滑动，确认了用户的确是在看这个视频，然后就赋值啦
+								this.dataList[this.k].state = 'play'
+								// console.log('正在播放 --> 第' + (this.k + 1) + '个视频～')
+							}, 80)
+						}
+					}
+				}
+			},
+			get() {
+				let that = this
+				var msg = [this.room];
+				// console.log(this.room)
+				for (let i = 0; i < msg.length; i++) {
+					msg[i]['isMore'] = false
+					msg[i]['playIng'] = false
+					msg[i]['state'] = false
+					msg[i]['isplay'] = false
+					msg[i]['loading'] = false
+					msg[i]['id'] = msg[i]['live_stream_id'].toString()
+				}
+				this.dataList = msg;
+
+				if (this.dataList.length !== 0) {
+
+					this.dataList[this.k].state = 'play';
+					uni.createVideoContext(this.dataList[this.k].id, this).play()
+					this.page = that.page + 1
+				}
+
+				console.log(this.dataList, this.dataList[this.k].id, 222222)
+			},
+			onpullingdown() {
+				this.refreshing = true
+			},
+			onrefresh() {
+				setTimeout(() => {
+					this.refreshing = false
+				}, 1000)
+			},
+
+		},
+		onReachBottom() {
+			uni.$emit('onReachBottom');
+		},
+	}
+</script>
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/static/applet/live.png b/static/applet/live.png
new file mode 100644
index 0000000..c49bea1
Binary files /dev/null and b/static/applet/live.png differ
diff --git a/static/img/X.png b/static/img/X.png
new file mode 100644
index 0000000..74f2523
Binary files /dev/null and b/static/img/X.png differ
diff --git a/static/img/close.png b/static/img/close.png
new file mode 100644
index 0000000..74ea90c
Binary files /dev/null and b/static/img/close.png differ
diff --git a/static/img/colse1.png b/static/img/colse1.png
new file mode 100644
index 0000000..4c0e6c1
Binary files /dev/null and b/static/img/colse1.png differ
diff --git a/static/img/gn.png b/static/img/gn.png
new file mode 100644
index 0000000..c0bc715
Binary files /dev/null and b/static/img/gn.png differ
diff --git a/static/img/jb.png b/static/img/jb.png
new file mode 100644
index 0000000..2edce60
Binary files /dev/null and b/static/img/jb.png differ
diff --git a/static/img/li.png b/static/img/li.png
new file mode 100644
index 0000000..9e57558
Binary files /dev/null and b/static/img/li.png differ
diff --git a/static/img/shanpin.png b/static/img/shanpin.png
new file mode 100644
index 0000000..d4437e6
Binary files /dev/null and b/static/img/shanpin.png differ
diff --git a/static/img/zhi.png b/static/img/zhi.png
new file mode 100644
index 0000000..c9e7420
Binary files /dev/null and b/static/img/zhi.png differ
diff --git a/utils/requestc.js b/utils/requestc.js
new file mode 100644
index 0000000..20f5b52
--- /dev/null
+++ b/utils/requestc.js
@@ -0,0 +1,71 @@
+// +----------------------------------------------------------------------
+// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
+// +----------------------------------------------------------------------
+// | Author: CRMEB Team <admin@crmeb.com>
+// +----------------------------------------------------------------------
+import {
+	HTTP_REQUEST_URL_FIVE,
+	HEADER,
+	TOKENNAME
+} from '@/config/app.js';
+
+import store from '../store';
+/**
+ * 发送请求
+ */
+function baseRequest(url, method, data, {
+	noAuth = false,
+	noVerify = false
+}) {
+	let Url = HTTP_REQUEST_URL_FIVE,
+		header = HEADER;
+	if (store.state.app.token) header[TOKENNAME] = 'Bearer ' + store.state.app.token;
+
+	return new Promise((reslove, reject) => {
+		uni.request({
+			url: Url + '/api/' + url,
+			method: method || 'GET',
+			header: header,
+			data: data || {},
+			success: (res) => {
+				// #ifdef APP-PLUS
+			
+				// #endif
+				if (noVerify)
+					reslove(res.data, res);
+				else if (res.data.status == 200)
+					reslove(res.data, res);
+				else if ([410000, 410001, 410002, 40000].indexOf(res.data.status) !== -1) {
+
+					reject(res.data);
+				} else if (res.data.code==0||res.data.code==1) {
+					reslove(res.data, res);
+				}else if (res.data.status == 501) {
+					uni.reLaunch({
+						url: '/pages/error/index'
+					})
+					reject(res.data);
+				} else
+					reject(res.data.message || '系统错误');
+			},
+			fail: (message) => {
+				console.log(url, method, data)
+				reject('请求失败',message);
+			}
+		})
+	});
+}
+
+const request = {};
+
+['options', 'get', 'post', 'put', 'head', 'delete', 'trace', 'connect'].forEach((method) => {
+	request[method] = (api, data, opt) => baseRequest(api, method, data, opt || {})
+});
+
+
+
+export default request;
\ No newline at end of file