diff --git a/.hbuilderx/launch.json b/.hbuilderx/launch.json
new file mode 100644
index 0000000..4ccd172
--- /dev/null
+++ b/.hbuilderx/launch.json
@@ -0,0 +1,20 @@
+{
+    // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
+    // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
+    "version" : "0.0",
+    "configurations" : [
+        {
+            "app-plus" : {
+                "launchtype" : "local"
+            },
+            "default" : {
+                "launchtype" : "local"
+            },
+            "type" : "uniCloud"
+        },
+        {
+            "playground" : "custom",
+            "type" : "uni-app:app-android"
+        }
+    ]
+}
diff --git a/ai1.png b/ai1.png
deleted file mode 100644
index 3bcf4bd..0000000
Binary files a/ai1.png and /dev/null differ
diff --git a/api/api.js b/api/api.js
new file mode 100644
index 0000000..4e46a77
--- /dev/null
+++ b/api/api.js
@@ -0,0 +1,168 @@
+import request from "@/utils/request.js";
+import requesta from "@/utils/requesta.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(data) {
+  return requesta.get("community/user/info/"+data);
+}
+
+/**
+ * 滑块信息
+ * @param {Object} data
+ */
+export function getAjcaptcha(data) {
+  return requesta.get("ajcaptcha", data, {
+    noAuth: true
+  });
+}
+
+
+
+/**
+ * 滑块验证
+ * @param {Object} data
+ */
+export function ajcaptchaCheck(data) {
+  return requesta.post("ajcheck", data, {
+    noAuth: true
+  });
+}
+
+
diff --git a/api/public.js b/api/public.js
new file mode 100644
index 0000000..d4cae52
--- /dev/null
+++ b/api/public.js
@@ -0,0 +1,21 @@
+// +----------------------------------------------------------------------
+// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
+// +----------------------------------------------------------------------
+// | Author: CRMEB Team <admin@crmeb.com>
+// +----------------------------------------------------------------------
+import request from "@/utils/requesta.js";
+
+export function getVersion() {
+	return request.get("version",{},{noAuth: true});
+}
+export function commonAuth(data) {
+	return request.post(
+		"auth", data, {
+			noAuth: true
+		}
+	);
+}
diff --git a/api/user.js b/api/user.js
new file mode 100644
index 0000000..56e0b83
--- /dev/null
+++ b/api/user.js
@@ -0,0 +1,106 @@
+// +----------------------------------------------------------------------
+// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
+// +----------------------------------------------------------------------
+// | Author: CRMEB Team <admin@crmeb.com>
+// +----------------------------------------------------------------------
+import request from "@/utils/requesta.js";
+
+
+export function getAdminApplyListAPI(merId) {
+  return request.get(`admin/${merId}/lis_apply`);
+}
+/**
+ * 获取用户信息
+ * 
+ */
+export function getUserInfo() {
+  return request.get('user');
+}
+/**
+ * 头像
+ * 
+ */
+export function editAvatar(data) {
+  return request.post('user/change/info', data);
+}
+
+// 修改昵称
+export function updateInfo(data) {
+  return request.post('user/change/avatar', data);
+}
+/**
+ * h5用户登录
+ * @param data object 用户账号密码
+ */
+export function loginH5(data) {
+  return request.post("auth/login", data, {
+    noAuth: true
+  });
+}
+/**
+ * h5用户手机号登录
+ * @param data object 用户手机号 也只能
+ */
+export function loginMobile(data) {
+  return request.post("auth/smslogin", data, {
+    noAuth: true
+  });
+}
+/**
+ * h5用户手机号登录
+ * @param data object 用户手机号 也只能
+ */
+export function loginMpPhone(data) {
+  return request.post("auth/mp_phone", data, {
+    noAuth: true
+  });
+}
+/**
+ * 验证码key
+ */
+export function getCodeApi() {
+  return request.get("verify_code", {}, {
+    noAuth: true
+  });
+}
+
+/**
+ * h5用户发送验证码
+ * @param data object 用户手机号
+ */
+export function registerVerify(data) {
+  return request.post("auth/verify", data, {
+    noAuth: true
+  });
+}
+/**
+ * h5用户手机号注册
+ * @param data object 用户手机号 验证码 密码
+ */
+export function register(data) {
+  return request.post("auth/register", data, {
+    noAuth: true
+  });
+}
+
+/**
+ * 用户手机号修改密码
+ * @param data object 用户手机号 验证码 密码
+ */
+export function registerReset(data) {
+  return request.post("/register/reset", data, {
+    noAuth: true
+  });
+}
+/**
+ * 用户手机号忘记密码
+ */
+export function registerForget(data) {
+  return request.post("user/change_pwd", data, {
+    noAuth: true
+  });
+}
diff --git a/components/emptyPage.vue b/components/emptyPage.vue
new file mode 100644
index 0000000..0f2ba27
--- /dev/null
+++ b/components/emptyPage.vue
@@ -0,0 +1,45 @@
+<template>
+	<view class="empty-box">
+		<image src="/static/images/empty-box.png"></image>
+		<view class="txt">{{title}}</view>
+	</view>
+</template>
+
+<script>
+	// +----------------------------------------------------------------------
+	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
+	// +----------------------------------------------------------------------
+	// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
+	// +----------------------------------------------------------------------
+	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
+	// +----------------------------------------------------------------------
+	// | Author: CRMEB Team <admin@crmeb.com>
+	// +----------------------------------------------------------------------
+	export default{
+		props: {
+			title: {
+				type: String,
+				default: '暂无记录',
+			},
+		},
+	}
+	
+</script>
+
+<style lang="scss">
+	.empty-box{
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		margin-top: 200rpx;
+		image{
+			width: 414rpx;
+			height: 240rpx;
+		}
+		.txt{
+			font-size: 26rpx;
+			color: #999;
+		}
+	}
+</style>
diff --git a/components/gb-popup/gb-popup.vue b/components/gb-popup/gb-popup.vue
new file mode 100644
index 0000000..12dcd71
--- /dev/null
+++ b/components/gb-popup/gb-popup.vue
@@ -0,0 +1,168 @@
+<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/jyf-parser/jyf-parser.vue b/components/jyf-parser/jyf-parser.vue
new file mode 100644
index 0000000..6294c26
--- /dev/null
+++ b/components/jyf-parser/jyf-parser.vue
@@ -0,0 +1,815 @@
+<!--
+  parser 主模块组件
+  github：https://github.com/jin-yufeng/Parser 
+  docs：https://jin-yufeng.github.io/Parser
+  插件市场：https://ext.dcloud.net.cn/plugin?id=805
+  author：JinYufeng
+  update：2020/04/14
+-->
+<template>
+	<view>
+		<slot v-if="!nodes.length" />
+		<!--#ifdef APP-PLUS-NVUE-->
+		<web-view id="top" ref="web" :src="src" :style="'margin-top:-2px;height:'+height+'px'" @onPostMessage="_message" />
+		<!--#endif-->
+		<!--#ifndef APP-PLUS-NVUE-->
+		<view id="top" :style="showAm+(selectable?';user-select:text;-webkit-user-select:text':'')" :animation="scaleAm" @tap="_tap"
+		 @touchstart="_touchstart" @touchmove="_touchmove">
+			<!--#ifdef H5-->
+			<div :id="'rtf'+uid"></div>
+			<!--#endif-->
+			<!--#ifndef H5-->
+			<trees :nodes="nodes" :lazy-load="lazyLoad" :loadVideo="loadVideo" />
+			<image v-for="(item, index) in imgs" v-bind:key="index" :id="index" :src="item" hidden @load="_load" />
+			<!--#endif-->
+			<image v-for="(item, index) in imgs" v-bind:key="index" :id="index" :src="item" hidden @load="_load" />
+		</view>
+		<!--#endif-->
+	</view>
+</template>
+
+<script>
+	// #ifndef H5 || APP-PLUS-NVUE
+	import trees from './libs/trees';
+	var cache = {},
+		// #ifdef MP-WEIXIN || MP-TOUTIAO
+		fs = uni.getFileSystemManager ? uni.getFileSystemManager() : null,
+		// #endif
+		Parser = require('./libs/MpHtmlParser.js');
+	var document; // document 补丁包 https://jin-yufeng.github.io/Parser/#/instructions?id=document
+	// 计算 cache 的 key
+	function hash(str) {
+		for (var i = str.length, val = 5381; i--;)
+			val += (val << 5) + str.charCodeAt(i);
+		return val;
+	}
+	// #endif
+	// #ifdef H5 || APP-PLUS-NVUE
+	var rpx = uni.getSystemInfoSync().screenWidth / 750,
+		cfg = require('./libs/config.js');
+	// #endif
+	// #ifdef APP-PLUS-NVUE
+	var dom = weex.requireModule('dom');
+	// #endif
+	export default {
+		name: 'parser',
+		data() {
+			return {
+				// #ifdef APP-PLUS
+				loadVideo: false,
+				// #endif
+				// #ifdef H5
+				uid: this._uid,
+				// #endif
+				// #ifdef APP-PLUS-NVUE
+				src: '',
+				height: 1,
+				// #endif
+				// #ifndef APP-PLUS-NVUE	
+				scaleAm: '',
+				showAm: '',
+				imgs: [],
+				// #endif
+				nodes: []
+			}
+		},
+		// #ifndef H5 || APP-PLUS-NVUE
+		components: {
+			trees
+		},
+		// #endif
+		props: {
+			'html': null,
+			// #ifndef MP-ALIPAY
+			'autopause': {
+				type: Boolean,
+				default: true
+			},
+			// #endif
+			'autosetTitle': {
+				type: Boolean,
+				default: true
+			},
+			// #ifndef H5 || APP-PLUS-NVUE
+			'compress': Number,
+			'useCache': Boolean,
+			'xml': Boolean,
+			// #endif
+			'domain': String,
+			// #ifndef MP-BAIDU || MP-ALIPAY || APP-PLUS
+			'gestureZoom': Boolean,
+			// #endif
+			// #ifdef MP-WEIXIN || MP-QQ || H5 || APP-PLUS
+			'lazyLoad': Boolean,
+			// #endif
+			'selectable': Boolean,
+			'tagStyle': Object,
+			'showWithAnimation': Boolean,
+			'useAnchor': Boolean
+		},
+		watch: {
+			html(html) {
+				this.setContent(html);
+			}
+		},
+		mounted() {
+			// 图片数组
+			this.imgList = [];
+			this.imgList.each = function(f) {
+				for (var i = 0, len = this.length; i < len; i++)
+					this.setItem(i, f(this[i], i, this));
+			}
+			this.imgList.setItem = function(i, src) {
+				if (i == void 0 || !src) return;
+				// #ifndef MP-ALIPAY || APP-PLUS
+				// 去重
+				if (src.indexOf('http') == 0 && this.includes(src)) {
+					var newSrc = '';
+					for (var j = 0, c; c = src[j]; j++) {
+						if (c == '/' && src[j - 1] != '/' && src[j + 1] != '/') break;
+						newSrc += Math.random() > 0.5 ? c.toUpperCase() : c;
+					}
+					newSrc += src.substr(j);
+					return this[i] = newSrc;
+				}
+				// #endif
+				this[i] = src;
+				// 暂存 data src
+				if (src.includes('data:image')) {
+					var filePath, info = src.match(/data:image\/(\S+?);(\S+?),(.+)/);
+					if (!info) return;
+					// #ifdef MP-WEIXIN || MP-TOUTIAO
+					filePath = `${wx.env.USER_DATA_PATH}/${Date.now()}.${info[1]}`;
+					fs && fs.writeFile({
+						filePath,
+						data: info[3],
+						encoding: info[2],
+						success: () => this[i] = filePath
+					})
+					// #endif
+					// #ifdef APP-PLUS
+					filePath = `_doc/parser_tmp/${Date.now()}.${info[1]}`;
+					var bitmap = new plus.nativeObj.Bitmap();
+					bitmap.loadBase64Data(src, () => {
+						bitmap.save(filePath, {}, () => {
+							bitmap.clear()
+							this[i] = filePath;
+						})
+					})
+					// #endif
+				}
+			}
+			if (this.html) this.setContent(this.html);
+		},
+		beforeDestroy() {
+			// #ifdef H5
+			if (this._observer) this._observer.disconnect();
+			// #endif
+			this.imgList.each(src => {
+				// #ifdef APP-PLUS
+				if (src && src.includes('_doc')) {
+					plus.io.resolveLocalFileSystemURL(src, entry => {
+						entry.remove();
+					});
+				}
+				// #endif
+				// #ifdef MP-WEIXIN || MP-TOUTIAO
+				if (src && src.includes(uni.env.USER_DATA_PATH))
+					fs && fs.unlink({
+						filePath: src
+					})
+				// #endif
+			})
+			clearInterval(this._timer);
+		},
+		methods: {
+			// #ifdef H5 || APP-PLUS-NVUE
+			_Dom2Str(nodes) {
+				var str = '';
+				for (var node of nodes) {
+					if (node.type == 'text')
+						str += node.text;
+					else {
+						str += ('<' + node.name);
+						for (var attr in node.attrs || {})
+							str += (' ' + attr + '="' + node.attrs[attr] + '"');
+						if (!node.children || !node.children.length) str += '>';
+						else str += ('>' + this._Dom2Str(node.children) + '</' + node.name + '>');
+					}
+				}
+				return str;
+			},
+			_handleHtml(html, append) {
+				if (typeof html != 'string') html = this._Dom2Str(html.nodes || html);
+				// 处理 rpx
+				if (html.includes('rpx'))
+					html = html.replace(/[0-9.]+\s*rpx/g, $ => parseFloat($) * rpx + 'px');
+				if (!append) {
+					// 处理 tag-style 和 userAgentStyles
+					var style = '<style>@keyframes show{0%{opacity:0}100%{opacity:1}}';
+					for (var item in cfg.userAgentStyles)
+						style += `${item}{${cfg.userAgentStyles[item]}}`;
+					for (item in this.tagStyle)
+						style += `${item}{${this.tagStyle[item]}}`;
+					style += '</style>';
+					html = style + html;
+				}
+				return html;
+			},
+			// #endif
+			setContent(html, append) {
+				// #ifdef APP-PLUS-NVUE
+				if (!html) {
+					this.src = '';
+					this.height = 1;
+					return;
+				}
+				if (append) return;
+				plus.io.resolveLocalFileSystemURL('_doc', entry => {
+					entry.getDirectory('parser_tmp', {
+						create: true
+					}, entry => {
+						var fileName = Date.now() + '.html';
+						entry.getFile(fileName, {
+							create: true
+						}, entry => {
+							entry.createWriter(writer => {
+								writer.onwriteend = () => {
+									this.nodes = [1];
+									this.src = '_doc/parser_tmp/' + fileName;
+									this.$nextTick(function() {
+										entry.remove();
+									})
+								}
+								html =
+									'<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1' +
+									(this.selectable ? '' : ',user-scalable=no') +
+									'"><script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></' +
+									'script><base href="' + this.domain + '">' + this._handleHtml(html) +
+									'<script>"use strict";function post(t){uni.postMessage({data:t})}' +
+									(this.showWithAnimation ? 'document.body.style.animation="show .5s",' : '') +
+									'document.addEventListener("UniAppJSBridgeReady",function(){post({action:"load",text:document.body.innerText});var t=document.getElementsByTagName("title");t.length&&post({action:"getTitle",title:t[0].innerText});for(var e,o=document.getElementsByTagName("img"),n=[],i=0,r=0;e=o[i];i++)e.onerror=function(){post({action:"error",source:"img",target:this})},e.hasAttribute("ignore")||"A"==e.parentElement.nodeName||(e.i=r++,n.push(e.src),e.onclick=function(){post({action:"preview",img:{i:this.i,src:this.src}})});post({action:"getImgList",imgList:n});for(var a,s=document.getElementsByTagName("a"),c=0;a=s[c];c++)a.onclick=function(){var t,e=this.getAttribute("href");if("#"==e[0]){var r=document.getElementById(e.substr(1));r&&(t=r.offsetTop)}return post({action:"linkpress",href:e,offset:t}),!1};;for(var u,m=document.getElementsByTagName("video"),d=0;u=m[d];d++)u.style.maxWidth="100%;",u.onerror=function(){post({action:"error",source:"video",target:this})}' +
+									(this.autopause ? ',u.onplay=function(){for(var t,e=0;t=m[e];e++)t!=this&&t.pause()}' : '') +
+									';for(var g,l=document.getElementsByTagName("audio"),p=0;g=l[p];p++)g.onerror=function(){post({action:"error",source:"audio",target:this})};window.onload=function(){post({action:"ready",height:document.body.scrollHeight})}});</' +
+									'script>';
+								writer.write(html);
+							});
+						})
+					})
+				})
+				// #endif
+				// #ifdef H5
+				if (!html) {
+					if (this.rtf && !append) this.rtf.parentNode.removeChild(this.rtf);
+					return;
+				}
+				var div = document.createElement('div');
+				if (!append) {
+					if (this.rtf) this.rtf.parentNode.removeChild(this.rtf);
+					this.rtf = div;
+				} else {
+					if (!this.rtf) this.rtf = div;
+					else this.rtf.appendChild(div);
+				}
+				div.innerHTML = this._handleHtml(html, append);
+				for (var styles = this.rtf.getElementsByTagName('style'), i = 0, style; style = styles[i++];) {
+					style.innerHTML = style.innerHTML.replace(/body/g, '#rtf' + this._uid);
+					style.setAttribute('scoped', 'true');
+				}
+				// 懒加载
+				if (!this._observer && this.lazyLoad && IntersectionObserver) {
+					this._observer = new IntersectionObserver(changes => {
+						for (let item, i = 0; item = changes[i++];) {
+							if (item.isIntersecting) {
+								item.target.src = item.target.getAttribute('data-src');
+								item.target.removeAttribute('data-src');
+								this._observer.unobserve(item.target);
+							}
+						}
+					}, {
+						rootMargin: '900px 0px 900px 0px'
+					})
+				}
+				var _ts = this;
+				// 获取标题
+				var title = this.rtf.getElementsByTagName('title');
+				if (title.length && this.autosetTitle)
+					uni.setNavigationBarTitle({
+						title: title[0].innerText
+					})
+				// 图片处理
+				this.imgList.length = 0;
+				var imgs = this.rtf.getElementsByTagName('img');
+				for (let i = 0, j = 0, img; img = imgs[i]; i++) {
+					img.style.maxWidth = '100%';
+					var src = img.getAttribute('src');
+					if (this.domain && src) {
+						if (src[0] == '/') {
+							if (src[1] == '/')
+								img.src = (this.domain.includes('://') ? this.domain.split('://')[0] : '') + ':' + src;
+							else img.src = this.domain + src;
+						} else if (!src.includes('://')) img.src = this.domain + '/' + src;
+					}
+					if (!img.hasAttribute('ignore') && img.parentElement.nodeName != 'A') {
+						img.i = j++;
+						_ts.imgList.push(img.src || img.getAttribute('data-src'));
+						img.onclick = function() {
+							var preview = true;
+							this.ignore = () => preview = false;
+							_ts.$emit('imgtap', this);
+							if (preview) {
+								uni.previewImage({
+									current: this.i,
+									urls: _ts.imgList
+								});
+							}
+						}
+					}
+					img.onerror = function() {
+						_ts.$emit('error', {
+							source: 'img',
+							target: this
+						});
+					}
+					if (_ts.lazyLoad && this._observer && img.src && img.i != 0) {
+						img.setAttribute('data-src', img.src);
+						img.removeAttribute('src');
+						this._observer.observe(img);
+					}
+				}
+				// 链接处理
+				var links = this.rtf.getElementsByTagName('a');
+				for (var link of links) {
+					link.onclick = function() {
+						var jump = true,
+							href = this.getAttribute('href');
+						_ts.$emit('linkpress', {
+							href,
+							ignore: () => jump = false
+						});
+						if (jump && href) {
+							if (href[0] == '#') {
+								if (_ts.useAnchor) {
+									_ts.navigateTo({
+										id: href.substr(1)
+									})
+								}
+							} else if (href.indexOf('http') == 0 || href.indexOf('//') == 0)
+								return true;
+							else {
+								uni.navigateTo({
+									url: href
+								})
+							}
+						}
+						return false;
+					}
+				}
+				// 视频处理
+				var videos = this.rtf.getElementsByTagName('video');
+				_ts.videoContexts = videos;
+				for (let video, i = 0; video = videos[i++];) {
+					video.style.maxWidth = '100%';
+					video.onerror = function() {
+						_ts.$emit('error', {
+							source: 'video',
+							target: this
+						});
+					}
+					video.onplay = function() {
+						if (_ts.autopause)
+							for (let item, i = 0; item = _ts.videoContexts[i++];)
+								if (item != this) item.pause();
+					}
+				}
+				// 音频处理
+				var audios = this.rtf.getElementsByTagName('audios');
+				for (var audio of audios)
+					audio.onerror = function() {
+						_ts.$emit('error', {
+							source: 'audio',
+							target: this
+						});
+					}
+				this.document = this.rtf;
+				if (!append) document.getElementById('rtf' + this._uid).appendChild(this.rtf);
+				this.$nextTick(() => {
+					this.nodes = [1];
+					this.$emit('load');
+				})
+				setTimeout(() => this.showAm = '', 500);
+				// #endif
+				// #ifndef H5 || APP-PLUS-NVUE
+				var nodes;
+				if (!html)
+					return this.nodes = [];
+				else if (typeof html == 'string') {
+					let parser = new Parser(html, this);
+					// 缓存读取
+					if (this.useCache) {
+						var hashVal = hash(html);
+						if (cache[hashVal])
+							nodes = cache[hashVal];
+						else {
+							nodes = parser.parse();
+							cache[hashVal] = nodes;
+						}
+					} else nodes = parser.parse();
+					this.$emit('parse', nodes);
+				} else if (Object.prototype.toString.call(html) == '[object Array]') {
+					// 非本插件产生的 array 需要进行一些转换
+					if (html.length && html[0].PoweredBy != 'Parser') {
+						let parser = new Parser(html, this);
+						(function f(ns) {
+							for (var i = 0, n; n = ns[i]; i++) {
+								if (n.type == 'text') continue;
+								n.attrs = n.attrs || {};
+								for (var item in n.attrs)
+									if (typeof n.attrs[item] != 'string') n.attrs[item] = n.attrs[item].toString();
+								parser.matchAttr(n, parser);
+								if (n.children && n.children.length) {
+									parser.STACK.push(n);
+									f(n.children);
+									parser.popNode(parser.STACK.pop());
+								} else n.children = void 0;
+							}
+						})(html);
+					}
+					nodes = html;
+				} else if (typeof html == 'object' && html.nodes) {
+					nodes = html.nodes;
+					console.warn('错误的 html 类型：object 类型已废弃');
+				} else
+					return console.warn('错误的 html 类型：' + typeof html);
+				// #ifdef APP-PLUS
+				this.loadVideo = false;
+				// #endif
+				if (document) this.document = new document(this.nodes, 'nodes', this);
+				if (append) this.nodes = this.nodes.concat(nodes);
+				else this.nodes = nodes;
+				if (nodes.length && nodes[0].title && this.autosetTitle)
+					uni.setNavigationBarTitle({
+						title: nodes[0].title
+					})
+				this.$nextTick(() => {
+					this.imgList.length = 0;
+					this.videoContexts = [];
+					// #ifdef MP-TOUTIAO
+					setTimeout(() => {
+						// #endif
+						var f = (cs) => {
+							for (let i = 0, c; c = cs[i++];) {
+								if (c.$options.name == 'trees') {
+									for (var j = c.nodes.length, item; item = c.nodes[--j];) {
+										if (item.c) continue;
+										if (item.name == 'img') {
+											this.imgList.setItem(item.attrs.i, item.attrs.src);
+											// #ifndef MP-ALIPAY
+											if (!c.observer && !c.imgLoad && item.attrs.i != '0') {
+												if (this.lazyLoad && uni.createIntersectionObserver) {
+													c.observer = uni.createIntersectionObserver(c);
+													c.observer.relativeToViewport({
+														top: 900,
+														bottom: 900
+													}).observe('._img', () => {
+														c.imgLoad = true;
+														c.observer.disconnect();
+													})
+												} else
+													c.imgLoad = true;
+											}
+											// #endif
+										}
+										// #ifndef MP-ALIPAY
+										else if (item.name == 'video') {
+											var ctx = uni.createVideoContext(item.attrs.id, c);
+											ctx.id = item.attrs.id;
+											this.videoContexts.push(ctx);
+										}
+										// #endif
+										// #ifdef MP-BAIDU || MP-ALIPAY || APP-PLUS
+										if (item.attrs && item.attrs.id) {
+											this.anchors = this.anchors || [];
+											this.anchors.push({
+												id: item.attrs.id,
+												node: c
+											})
+										}
+										// #endif
+									}
+								}
+								if (c.$children.length)
+									f(c.$children)
+							}
+						}
+						f(this.$children);
+						// #ifdef MP-TOUTIAO
+					}, 200)
+					this.$emit('load');
+					// #endif
+					// #ifdef APP-PLUS
+					setTimeout(() => {
+						this.loadVideo = true;
+					}, 3000);
+					// #endif
+				})
+				// #endif
+				// #ifndef APP-PLUS-NVUE
+				var height;
+				clearInterval(this._timer);
+				this._timer = setInterval(() => {
+					// #ifdef H5
+					var res = [this.rtf.getBoundingClientRect()];
+					// #endif
+					// #ifndef H5
+					// #ifdef APP-PLUS
+					uni.createSelectorQuery().in(this)
+					// #endif
+					// #ifndef APP-PLUS
+					this.createSelectorQuery()
+						// #endif
+						.select('#top').boundingClientRect().exec(res => {
+							// #endif
+							this.width = res[0].width;
+							if (res[0].height == height) {
+								this.$emit('ready', res[0])
+								clearInterval(this._timer);
+							}
+							height = res[0].height;
+							// #ifndef H5
+						});
+					// #endif
+				}, 350)
+				if (this.showWithAnimation && !append) this.showAm = 'animation:show .5s';
+				// #endif
+			},
+			getText(ns = this.nodes) {
+				// #ifdef APP-PLUS-NVUE
+				return this._text;
+				// #endif
+				// #ifdef H5
+				return this.rtf.innerText;
+				// #endif
+				// #ifndef H5 || APP-PLUS-NVUE
+				var txt = '';
+				for (var i = 0, n; n = ns[i++];) {
+					if (n.type == 'text') txt += n.text.replace(/&nbsp;/g, '\u00A0').replace(/&lt;/g, '<').replace(/&gt;/g, '>')
+						.replace(/&amp;/g, '&');
+					else if (n.type == 'br') txt += '\n';
+					else {
+						// 块级标签前后加换行
+						var block = n.name == 'p' || n.name == 'div' || n.name == 'tr' || n.name == 'li' || (n.name[0] == 'h' && n.name[1] >
+							'0' && n.name[1] < '7');
+						if (block && txt && txt[txt.length - 1] != '\n') txt += '\n';
+						if (n.children) txt += this.getText(n.children);
+						if (block && txt[txt.length - 1] != '\n') txt += '\n';
+						else if (n.name == 'td' || n.name == 'th') txt += '\t';
+					}
+				}
+				return txt;
+				// #endif
+			},
+			navigateTo(obj) {
+				if (!this.useAnchor)
+					return obj.fail && obj.fail({
+						errMsg: 'Anchor is disabled'
+					})
+				// #ifdef APP-PLUS-NVUE
+				if (!obj.id)
+					dom.scrollToElement(this.$refs.web);
+				else
+					this.$refs.web.evalJs('var pos=document.getElementById("' + obj.id +
+						'");if(pos)post({action:"linkpress",href:"#",offset:pos.offsetTop})');
+				return obj.success && obj.success({
+					errMsg: 'pageScrollTo:ok'
+				});
+				// #endif
+				// #ifdef H5
+				if (!obj.id) {
+					window.scrollTo(0, this.rtf.offsetTop);
+					return obj.success && obj.success({
+						errMsg: 'pageScrollTo:ok'
+					});
+				}
+				var target = document.getElementById(obj.id);
+				if (!target) return obj.fail && obj.fail({
+					errMsg: 'Label not found'
+				});
+				obj.scrollTop = this.rtf.offsetTop + target.offsetTop;
+				uni.pageScrollTo(obj);
+				// #endif
+				// #ifndef H5
+				var Scroll = (selector, component) => {
+					uni.createSelectorQuery().in(component ? component : this).select(selector).boundingClientRect().selectViewport()
+						.scrollOffset()
+						.exec(res => {
+							if (!res || !res[0])
+								return obj.fail && obj.fail({
+									errMsg: 'Label not found'
+								});
+							obj.scrollTop = res[1].scrollTop + res[0].top;
+							uni.pageScrollTo(obj);
+						})
+				}
+				if (!obj.id) Scroll('#top');
+				else {
+					// #ifndef MP-BAIDU || MP-ALIPAY || APP-PLUS
+					Scroll('#top >>> #' + obj.id + ', #top >>> .' + obj.id);
+					// #endif
+					// #ifdef MP-BAIDU || MP-ALIPAY || APP-PLUS
+					for (var anchor of this.anchors)
+						if (anchor.id == obj.id)
+							Scroll('#' + obj.id + ', .' + obj.id, anchor.node);
+					// #endif
+				}
+				// #endif
+			},
+			getVideoContext(id) {
+				// #ifndef APP-PLUS-NVUE
+				if (!id) return this.videoContexts;
+				else
+					for (var i = this.videoContexts.length; i--;)
+						if (this.videoContexts[i].id == id) return this.videoContexts[i];
+				// #endif
+			},
+			// 预加载
+			preLoad(html, num) {
+				// #ifdef H5 || APP-PLUS-NVUE
+				if (html.constructor == Array)
+					html = this._Dom2Str(html);
+				var script = "var contain=document.createElement('div');contain.innerHTML='" + html.replace(/'/g, "\\'") +
+					"';for(var imgs=contain.querySelectorAll('img'),i=imgs.length-1;i>=" + num +
+					";i--)imgs[i].removeAttribute('src');";
+				// #endif
+				// #ifdef APP-PLUS-NVUE
+				this.$refs.web.evalJs(script);
+				// #endif
+				// #ifdef H5
+				eval(script);
+				// #endif
+				// #ifndef H5 || APP-PLUS-NVUE
+				if (typeof html == 'string') {
+					var id = hash(html);
+					html = new Parser(html, this).parse();
+					cache[id] = html;
+				}
+				var wait = [];
+				(function f(ns) {
+					for (var i = 0, n; n = ns[i++];) {
+						if (n.name == 'img' && n.attrs.src && !wait.includes(n.attrs.src))
+							wait.push(n.attrs.src);
+						f(n.children || []);
+					}
+				})(html);
+				if (num) wait = wait.slice(0, num);
+				this._wait = (this._wait || []).concat(wait);
+				if (!this.imgs) this.imgs = this._wait.splice(0, 15);
+				else if (this.imgs.length < 15)
+					this.imgs = this.imgs.concat(this._wait.splice(0, 15 - this.imgs.length));
+				// #endif
+			},
+			// #ifdef APP-PLUS-NVUE
+			_message(e) {
+				// 接收 web-view 消息
+				var data = e.detail.data[0];
+				if (data.action == 'load') {
+					this.$emit('load');
+					this._text = data.text;
+				} else if (data.action == 'getTitle') {
+					if (this.autosetTitle)
+						uni.setNavigationBarTitle({
+							title: data.title
+						})
+				} else if (data.action == 'getImgList') {
+					this.imgList.length = 0;
+					for (var i = data.imgList.length; i--;)
+						this.imgList.setItem(i, data.imgList[i]);
+				} else if (data.action == 'preview') {
+					var preview = true;
+					data.img.ignore = () => preview = false;
+					this.$emit('imgtap', data.img);
+					if (preview)
+						uni.previewImage({
+							current: data.img.i,
+							urls: this.imgList
+						})
+				} else if (data.action == 'linkpress') {
+					var jump = true,
+						href = data.href;
+					this.$emit('linkpress', {
+						href,
+						ignore: () => jump = false
+					})
+					if (jump && href) {
+						if (href[0] == '#') {
+							if (this.useAnchor)
+								dom.scrollToElement(this.$refs.web, {
+									offset: data.offset
+								})
+						} else if (href.includes('://'))
+							plus.runtime.openWeb(href);
+						else
+							uni.navigateTo({
+								url: href
+							})
+					}
+				} else if (data.action == 'error')
+					this.$emit('error', {
+						source: data.source,
+						target: data.target
+					})
+				else if (data.action == 'ready') {
+					this.height = data.height;
+					this.$nextTick(() => {
+						uni.createSelectorQuery().in(this).select('#top').boundingClientRect().exec(res => {
+							this.rect = res[0];
+							this.$emit('ready', res[0]);
+						})
+					})
+				}
+			},
+			// #endif
+			// #ifndef APP-PLUS-NVUE
+			// #ifndef H5
+			_load(e) {
+				if (this._wait.length)
+					this.$set(this.imgs, e.target.id, this._wait.shift());
+			},
+			// #endif
+			_tap(e) {
+				// #ifndef MP-BAIDU || MP-ALIPAY || APP-PLUS
+				if (this.gestureZoom && e.timeStamp - this._lastT < 300) {
+					var initY = e.touches[0].pageY - e.currentTarget.offsetTop;
+					if (this._zoom) {
+						this._scaleAm.translateX(0).scale(1).step();
+						uni.pageScrollTo({
+							scrollTop: (initY + this._initY) / 2 - e.touches[0].clientY,
+							duration: 400
+						})
+					} else {
+						var initX = e.touches[0].pageX - e.currentTarget.offsetLeft;
+						this._initY = initY;
+						this._scaleAm = uni.createAnimation({
+							transformOrigin: `${initX}px ${this._initY}px 0`,
+							timingFunction: 'ease-in-out'
+						});
+						// #ifdef MP-TOUTIAO
+						this._scaleAm.opacity(1);
+						// #endif
+						this._scaleAm.scale(2).step();
+						this._tMax = initX / 2;
+						this._tMin = (initX - this.width) / 2;
+						this._tX = 0;
+					}
+					this._zoom = !this._zoom;
+					this.scaleAm = this._scaleAm.export();
+				}
+				this._lastT = e.timeStamp;
+				// #endif
+			},
+			_touchstart(e) {
+				// #ifndef MP-BAIDU || MP-ALIPAY || APP-PLUS
+				if (e.touches.length == 1)
+					this._initX = this._lastX = e.touches[0].pageX;
+				// #endif
+			},
+			_touchmove(e) {
+				// #ifndef MP-BAIDU || MP-ALIPAY || APP-PLUS
+				var diff = e.touches[0].pageX - this._lastX;
+				if (this._zoom && e.touches.length == 1 && Math.abs(diff) > 20) {
+					this._lastX = e.touches[0].pageX;
+					if ((this._tX <= this._tMin && diff < 0) || (this._tX >= this._tMax && diff > 0))
+						return;
+					this._tX += (diff * Math.abs(this._lastX - this._initX) * 0.05);
+					if (this._tX < this._tMin) this._tX = this._tMin;
+					if (this._tX > this._tMax) this._tX = this._tMax;
+					this._scaleAm.translateX(this._tX).step();
+					this.scaleAm = this._scaleAm.export();
+				}
+				// #endif
+			}
+			// #endif
+		}
+	}
+</script>
+
+<style>
+	@keyframes show {
+		0% {
+			opacity: 0
+		}
+
+		100% {
+			opacity: 1;
+		}
+	}
+
+	/* #ifdef MP-WEIXIN */
+	:host {
+		display: block;
+		overflow: scroll;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	/* #endif */
+</style>
diff --git a/components/jyf-parser/libs/CssHandler.js b/components/jyf-parser/libs/CssHandler.js
new file mode 100644
index 0000000..f286db3
--- /dev/null
+++ b/components/jyf-parser/libs/CssHandler.js
@@ -0,0 +1,111 @@
+// +----------------------------------------------------------------------
+// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
+// +----------------------------------------------------------------------
+// | Author: CRMEB Team <admin@crmeb.com>
+// +----------------------------------------------------------------------
+/*
+  解析和匹配 Css 的选择器
+  github：https://github.com/jin-yufeng/Parser
+  docs：https://jin-yufeng.github.io/Parser
+  author：JinYufeng
+  update：2020/03/15
+*/
+var cfg = require('./config.js');
+class CssHandler {
+	constructor(tagStyle) {
+		var styles = Object.assign({}, cfg.userAgentStyles);
+		for (var item in tagStyle)
+			styles[item] = (styles[item] ? styles[item] + ';' : '') + tagStyle[item];
+		this.styles = styles;
+	}
+	getStyle = data => this.styles = new CssParser(data, this.styles).parse();
+	match(name, attrs) {
+		var tmp, matched = (tmp = this.styles[name]) ? tmp + ';' : '';
+		if (attrs.class) {
+			var items = attrs.class.split(' ');
+			for (var i = 0, item; item = items[i]; i++)
+				if (tmp = this.styles['.' + item])
+					matched += tmp + ';';
+		}
+		if (tmp = this.styles['#' + attrs.id])
+			matched += tmp + ';';
+		return matched;
+	}
+}
+module.exports = CssHandler;
+class CssParser {
+	constructor(data, init) {
+		this.data = data;
+		this.floor = 0;
+		this.i = 0;
+		this.list = [];
+		this.res = init;
+		this.state = this.Space;
+	}
+	parse() {
+		for (var c; c = this.data[this.i]; this.i++)
+			this.state(c);
+		return this.res;
+	}
+	section = () => this.data.substring(this.start, this.i);
+	isLetter = c => (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z');
+	// 状态机
+	Space(c) {
+		if (c == '.' || c == '#' || this.isLetter(c)) {
+			this.start = this.i;
+			this.state = this.Name;
+		} else if (c == '/' && this.data[this.i + 1] == '*')
+			this.Comment();
+		else if (!cfg.blankChar[c] && c != ';')
+			this.state = this.Ignore;
+	}
+	Comment() {
+		this.i = this.data.indexOf('*/', this.i) + 1;
+		if (!this.i) this.i = this.data.length;
+		this.state = this.Space;
+	}
+	Ignore(c) {
+		if (c == '{') this.floor++;
+		else if (c == '}' && !--this.floor) this.state = this.Space;
+	}
+	Name(c) {
+		if (cfg.blankChar[c]) {
+			this.list.push(this.section());
+			this.state = this.NameSpace;
+		} else if (c == '{') {
+			this.list.push(this.section());
+			this.Content();
+		} else if (c == ',') {
+			this.list.push(this.section());
+			this.Comma();
+		} else if (!this.isLetter(c) && (c < '0' || c > '9') && c != '-' && c != '_')
+			this.state = this.Ignore;
+	}
+	NameSpace(c) {
+		if (c == '{') this.Content();
+		else if (c == ',') this.Comma();
+		else if (!cfg.blankChar[c]) this.state = this.Ignore;
+	}
+	Comma() {
+		while (cfg.blankChar[this.data[++this.i]]);
+		if (this.data[this.i] == '{') this.Content();
+		else {
+			this.start = this.i--;
+			this.state = this.Name;
+		}
+	}
+	Content() {
+		this.start = ++this.i;
+		if ((this.i = this.data.indexOf('}', this.i)) == -1) this.i = this.data.length;
+		var content = this.section();
+		for (var i = 0, item; item = this.list[i++];)
+			if (this.res[item]) this.res[item] += ';' + content;
+			else this.res[item] = content;
+		this.list = [];
+		this.state = this.Space;
+	}
+}
diff --git a/components/jyf-parser/libs/MpHtmlParser.js b/components/jyf-parser/libs/MpHtmlParser.js
new file mode 100644
index 0000000..30c59e9
--- /dev/null
+++ b/components/jyf-parser/libs/MpHtmlParser.js
@@ -0,0 +1,586 @@
+// +----------------------------------------------------------------------
+// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
+// +----------------------------------------------------------------------
+// | Author: CRMEB Team <admin@crmeb.com>
+// +----------------------------------------------------------------------
+/*
+  将 html 解析为适用于小程序 rich-text 的 DOM 结构
+  github：https://github.com/jin-yufeng/Parser
+  docs：https://jin-yufeng.github.io/Parser
+  author：JinYufeng
+  update：2020/04/13
+*/
+var cfg = require('./config.js'),
+	blankChar = cfg.blankChar,
+	CssHandler = require('./CssHandler.js'),
+	{
+		screenWidth,
+		system
+	} = wx.getSystemInfoSync();
+// #ifdef MP-BAIDU || MP-ALIPAY || MP-TOUTIAO
+var entities = {
+	lt: '<',
+	gt: '>',
+	amp: '&',
+	quot: '"',
+	apos: "'",
+	nbsp: '\xA0',
+	ensp: '\u2002',
+	emsp: '\u2003',
+	ndash: '–',
+	mdash: '—',
+	middot: '·',
+	lsquo: '‘',
+	rsquo: '’',
+	ldquo: '“',
+	rdquo: '”',
+	bull: '•',
+	hellip: '…',
+	permil: '‰',
+	copy: '©',
+	reg: '®',
+	trade: '™',
+	times: '×',
+	divide: '÷',
+	cent: '￠',
+	pound: '£',
+	yen: '¥',
+	euro: '€',
+	sect: '§'
+};
+// #endif
+var emoji; // emoji 补丁包 https://jin-yufeng.github.io/Parser/#/instructions?id=emoji
+class MpHtmlParser {
+	constructor(data, options = {}) {
+		this.attrs = {};
+		this.compress = options.compress;
+		this.CssHandler = new CssHandler(options.tagStyle, screenWidth);
+		this.data = data;
+		this.domain = options.domain;
+		this.DOM = [];
+		this.i = this.start = this.audioNum = this.imgNum = this.videoNum = 0;
+		this.protocol = this.domain && this.domain.includes('://') ? this.domain.split('://')[0] : '';
+		this.state = this.Text;
+		this.STACK = [];
+		this.useAnchor = options.useAnchor;
+		this.xml = options.xml;
+	}
+	parse() {
+		if (emoji) this.data = emoji.parseEmoji(this.data);
+		for (var c; c = this.data[this.i]; this.i++)
+			this.state(c);
+		if (this.state == this.Text) this.setText();
+		while (this.STACK.length) this.popNode(this.STACK.pop());
+		// #ifdef MP-BAIDU || MP-TOUTIAO
+		// 将顶层标签的一些样式提取出来给 rich-text
+		(function f(ns) {
+			for (var i = ns.length, n; n = ns[--i];) {
+				if (n.type == 'text') continue;
+				if (!n.c) {
+					var style = n.attrs.style;
+					if (style) {
+						var j, k, res;
+						if ((j = style.indexOf('display')) != -1)
+							res = style.substring(j, (k = style.indexOf(';', j)) == -1 ? style.length : k);
+						if ((j = style.indexOf('float')) != -1)
+							res += ';' + style.substring(j, (k = style.indexOf(';', j)) == -1 ? style.length : k);
+						n.attrs.contain = res;
+					}
+				} else f(n.children);
+			}
+		})(this.DOM);
+		// #endif
+		if (this.DOM.length) {
+			this.DOM[0].PoweredBy = 'Parser';
+			if (this.title) this.DOM[0].title = this.title;
+		}
+		return this.DOM;
+	}
+	// 设置属性
+	setAttr() {
+		var name = this.getName(this.attrName);
+		if (cfg.trustAttrs[name]) {
+			if (!this.attrVal) {
+				if (cfg.boolAttrs[name]) this.attrs[name] = 'T';
+			} else if (name == 'src') this.attrs[name] = this.getUrl(this.attrVal.replace(/&amp;/g, '&'));
+			else this.attrs[name] = this.attrVal;
+		}
+		this.attrVal = '';
+		while (blankChar[this.data[this.i]]) this.i++;
+		if (this.isClose()) this.setNode();
+		else {
+			this.start = this.i;
+			this.state = this.AttrName;
+		}
+	}
+	// 设置文本节点
+	setText() {
+		var back, text = this.section();
+		if (!text) return;
+		text = (cfg.onText && cfg.onText(text, () => back = true)) || text;
+		if (back) {
+			this.data = this.data.substr(0, this.start) + text + this.data.substr(this.i);
+			let j = this.start + text.length;
+			for (this.i = this.start; this.i < j; this.i++) this.state(this.data[this.i]);
+			return;
+		}
+		if (!this.pre) {
+			// 合并空白符
+			var tmp = [];
+			for (let i = text.length, c; c = text[--i];)
+				if (!blankChar[c] || (!blankChar[tmp[0]] && (c = ' '))) tmp.unshift(c);
+			text = tmp.join('');
+			if (text == ' ') return;
+		}
+		// 处理实体
+		var siblings = this.siblings(),
+			i = -1,
+			j, en;
+		while (1) {
+			if ((i = text.indexOf('&', i + 1)) == -1) break;
+			if ((j = text.indexOf(';', i + 2)) == -1) break;
+			if (text[i + 1] == '#') {
+				en = parseInt((text[i + 2] == 'x' ? '0' : '') + text.substring(i + 2, j));
+				if (!isNaN(en)) text = text.substr(0, i) + String.fromCharCode(en) + text.substring(j + 1);
+			} else {
+				en = text.substring(i + 1, j);
+				// #ifdef MP-WEIXIN || MP-QQ || APP-PLUS
+				if (en == 'nbsp') text = text.substr(0, i) + '\xA0' + text.substr(j + 1); // 解决 &nbsp; 失效
+				else if (en != 'lt' && en != 'gt' && en != 'amp' && en != 'ensp' && en != 'emsp' && en != 'quot' && en != 'apos') {
+					i && siblings.push({
+						type: 'text',
+						text: text.substr(0, i)
+					})
+					siblings.push({
+						type: 'text',
+						text: `&${en};`,
+						en: 1
+					})
+					text = text.substr(j + 1);
+					i = -1;
+				}
+				// #endif
+				// #ifdef MP-BAIDU || MP-ALIPAY || MP-TOUTIAO
+				if (entities[en]) text = text.substr(0, i) + entities[en] + text.substr(j + 1);
+				// #endif
+			}
+		}
+		text && siblings.push({
+			type: 'text',
+			text
+		})
+	}
+	// 设置元素节点
+	setNode() {
+		var node = {
+				name: this.tagName.toLowerCase(),
+				attrs: this.attrs
+			},
+			close = cfg.selfClosingTags[node.name] || (this.xml && this.data[this.i] == '/');
+		this.attrs = {};
+		if (!cfg.ignoreTags[node.name]) {
+			this.matchAttr(node);
+			if (!close) {
+				node.children = [];
+				if (node.name == 'pre' && cfg.highlight) {
+					this.remove(node);
+					this.pre = node.pre = true;
+				}
+				this.siblings().push(node);
+				this.STACK.push(node);
+			} else if (!cfg.filter || cfg.filter(node, this) != false)
+				this.siblings().push(node);
+		} else {
+			if (!close) this.remove(node);
+			else if (node.name == 'source') {
+				var parent = this.STACK[this.STACK.length - 1],
+					attrs = node.attrs;
+				if (parent && attrs.src)
+					if (parent.name == 'video' || parent.name == 'audio')
+						parent.attrs.source.push(attrs.src);
+					else {
+						var i, media = attrs.media;
+						if (parent.name == 'picture' && !parent.attrs.src && !(attrs.src.indexOf('.webp') && system.includes('iOS')) &&
+							(!media || (media.includes('px') &&
+								(((i = media.indexOf('min-width')) != -1 && (i = media.indexOf(':', i + 8)) != -1 && screenWidth > parseInt(
+										media.substr(i + 1))) ||
+									((i = media.indexOf('max-width')) != -1 && (i = media.indexOf(':', i + 8)) != -1 && screenWidth < parseInt(
+										media.substr(i + 1)))))))
+							parent.attrs.src = attrs.src;
+					}
+			} else if (node.name == 'base' && !this.domain) this.domain = node.attrs.href;
+		}
+		if (this.data[this.i] == '/') this.i++;
+		this.start = this.i + 1;
+		this.state = this.Text;
+	}
+	// 移除标签
+	remove(node) {
+		var name = node.name,
+			j = this.i;
+		while (1) {
+			if ((this.i = this.data.indexOf('</', this.i + 1)) == -1) {
+				if (name == 'pre' || name == 'svg') this.i = j;
+				else this.i = this.data.length;
+				return;
+			}
+			this.start = (this.i += 2);
+			while (!blankChar[this.data[this.i]] && !this.isClose()) this.i++;
+			if (this.getName(this.section()) == name) {
+				// 代码块高亮
+				if (name == 'pre') {
+					this.data = this.data.substr(0, j + 1) + cfg.highlight(this.data.substring(j + 1, this.i - 5), node.attrs) +
+						this.data.substr(this.i - 5);
+					return this.i = j;
+				} else if (name == 'style')
+					this.CssHandler.getStyle(this.data.substring(j + 1, this.i - 7));
+				else if (name == 'title')
+					this.title = this.data.substring(j + 1, this.i - 7);
+				if ((this.i = this.data.indexOf('>', this.i)) == -1) this.i = this.data.length;
+				// 处理 svg
+				if (name == 'svg') {
+					var src = this.data.substring(j, this.i + 1);
+					if (!node.attrs.xmlns) src = ' xmlns="http://www.w3.org/2000/svg"' + src;
+					var i = j;
+					while (this.data[j] != '<') j--;
+					src = this.data.substring(j, i) + src;
+					var parent = this.STACK[this.STACK.length - 1];
+					if (node.attrs.width == '100%' && parent && (parent.attrs.style || '').includes('inline'))
+						parent.attrs.style = 'width:300px;max-width:100%;' + parent.attrs.style;
+					this.siblings().push({
+						name: 'img',
+						attrs: {
+							src: 'data:image/svg+xml;utf8,' + src.replace(/#/g, '%23'),
+							ignore: 'T'
+						}
+					})
+				}
+				return;
+			}
+		}
+	}
+	// 处理属性
+	matchAttr(node) {
+		var attrs = node.attrs,
+			style = this.CssHandler.match(node.name, attrs, node) + (attrs.style || ''),
+			styleObj = {};
+		if (attrs.id) {
+			if (this.compress & 1) attrs.id = void 0;
+			else if (this.useAnchor) this.bubble();
+		}
+		if ((this.compress & 2) && attrs.class) attrs.class = void 0;
+		switch (node.name) {
+			case 'img':
+				if (attrs['data-src']) {
+					attrs.src = attrs.src || attrs['data-src'];
+					attrs['data-src'] = void 0;
+				}
+				if (attrs.src && !attrs.ignore) {
+					if (this.bubble()) attrs.i = (this.imgNum++).toString();
+					else attrs.ignore = 'T';
+				}
+				break;
+			case 'a':
+			case 'ad':
+			// #ifdef APP-PLUS
+			case 'iframe':
+			case 'embed':
+			// #endif
+				this.bubble();
+				break;
+			case 'font':
+				if (attrs.color) {
+					styleObj['color'] = attrs.color;
+					attrs.color = void 0;
+				}
+				if (attrs.face) {
+					styleObj['font-family'] = attrs.face;
+					attrs.face = void 0;
+				}
+				if (attrs.size) {
+					var size = parseInt(attrs.size);
+					if (size < 1) size = 1;
+					else if (size > 7) size = 7;
+					var map = ['xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large'];
+					styleObj['font-size'] = map[size - 1];
+					attrs.size = void 0;
+				}
+				break;
+			case 'video':
+			case 'audio':
+				if (!attrs.id) attrs.id = node.name + (++this[`${node.name}Num`]);
+				else this[`${node.name}Num`]++;
+				if (node.name == 'video') {
+					if (attrs.width) {
+						style = `width:${parseFloat(attrs.width) + (attrs.width.includes('%') ? '%' : 'px')};${style}`;
+						attrs.width = void 0;
+					}
+					if (attrs.height) {
+						style = `height:${parseFloat(attrs.height) + (attrs.height.includes('%') ? '%' : 'px')};${style}`;
+						attrs.height = void 0;
+					}
+					if (this.videoNum > 3) node.lazyLoad = true;
+				}
+				attrs.source = [];
+				if (attrs.src) attrs.source.push(attrs.src);
+				if (!attrs.controls && !attrs.autoplay)
+					console.warn(`存在没有 controls 属性的 ${node.name} 标签，可能导致无法播放`, node);
+				this.bubble();
+				break;
+			case 'td':
+			case 'th':
+				if (attrs.colspan || attrs.rowspan)
+					for (var k = this.STACK.length, item; item = this.STACK[--k];)
+						if (item.name == 'table') {
+							item.c = void 0;
+							break;
+						}
+		}
+		if (attrs.align) {
+			styleObj['text-align'] = attrs.align;
+			attrs.align = void 0;
+		}
+		// 压缩 style
+		var styles = style.replace(/&quot;/g, '"').replace(/&amp;/g, '&').split(';');
+		style = '';
+		for (var i = 0, len = styles.length; i < len; i++) {
+			var info = styles[i].split(':');
+			if (info.length < 2) continue;
+			let key = info[0].trim().toLowerCase(),
+				value = info.slice(1).join(':').trim();
+			if (value.includes('-webkit') || value.includes('-moz') || value.includes('-ms') || value.includes('-o') || value
+				.includes(
+					'safe'))
+				style += `;${key}:${value}`;
+			else if (!styleObj[key] || value.includes('import') || !styleObj[key].includes('import'))
+				styleObj[key] = value;
+		}
+		if (node.name == 'img' && parseInt(styleObj.width || attrs.width) > screenWidth)
+			styleObj.height = 'auto';
+		for (var key in styleObj) {
+			var value = styleObj[key];
+			if (key.includes('flex') || key == 'order' || key == 'self-align') node.c = 1;
+			// 填充链接
+			if (value.includes('url')) {
+				var j = value.indexOf('(');
+				if (j++ != -1) {
+					while (value[j] == '"' || value[j] == "'" || blankChar[value[j]]) j++;
+					value = value.substr(0, j) + this.getUrl(value.substr(j));
+				}
+			}
+			// 转换 rpx
+			else if (value.includes('rpx'))
+				value = value.replace(/[0-9.]+\s*rpx/g, $ => parseFloat($) * screenWidth / 750 + 'px');
+			else if (key == 'white-space' && value.includes('pre'))
+				this.pre = node.pre = true;
+			style += `;${key}:${value}`;
+		}
+		style = style.substr(1);
+		if (style) attrs.style = style;
+	}
+	// 节点出栈处理
+	popNode(node) {
+		// 空白符处理
+		if (node.pre) {
+			node.pre = this.pre = void 0;
+			for (let i = this.STACK.length; i--;)
+				if (this.STACK[i].pre)
+					this.pre = true;
+		}
+		if (node.name == 'head' || (cfg.filter && cfg.filter(node, this) == false))
+			return this.siblings().pop();
+		var attrs = node.attrs;
+		// 替换一些标签名
+		if (node.name == 'picture') {
+			node.name = 'img';
+			if (!attrs.src && (node.children[0] || '').name == 'img')
+				attrs.src = node.children[0].attrs.src;
+			if (attrs.src && !attrs.ignore)
+				attrs.i = (this.imgNum++).toString();
+			return node.children = void 0;
+		}
+		if (cfg.blockTags[node.name]) node.name = 'div';
+		else if (!cfg.trustTags[node.name]) node.name = 'span';
+		// 处理列表
+		if (node.c) {
+			if (node.name == 'ul') {
+				var floor = 1;
+				for (let i = this.STACK.length; i--;)
+					if (this.STACK[i].name == 'ul') floor++;
+				if (floor != 1)
+					for (let i = node.children.length; i--;)
+						node.children[i].floor = floor;
+			} else if (node.name == 'ol') {
+				for (let i = 0, num = 1, child; child = node.children[i++];)
+					if (child.name == 'li') {
+						child.type = 'ol';
+						child.num = ((num, type) => {
+							if (type == 'a') return String.fromCharCode(97 + (num - 1) % 26);
+							if (type == 'A') return String.fromCharCode(65 + (num - 1) % 26);
+							if (type == 'i' || type == 'I') {
+								num = (num - 1) % 99 + 1;
+								var one = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX'],
+									ten = ['X', 'XX', 'XXX', 'XL', 'L', 'LX', 'LXX', 'LXXX', 'XC'],
+									res = (ten[Math.floor(num / 10) - 1] || '') + (one[num % 10 - 1] || '');
+								if (type == 'i') return res.toLowerCase();
+								return res;
+							}
+							return num;
+						})(num++, attrs.type) + '.';
+					}
+			}
+		}
+		// 处理表格的边框
+		if (node.name == 'table') {
+			var padding = attrs.cellpadding,
+				spacing = attrs.cellspacing,
+				border = attrs.border;
+			if (node.c) {
+				this.bubble();
+				if (!padding) padding = 2;
+				if (!spacing) spacing = 2;
+			}
+			if (border) attrs.style = `border:${border}px solid gray;${attrs.style || ''}`;
+			if (spacing) attrs.style = `border-spacing:${spacing}px;${attrs.style || ''}`;
+			if (border || padding)
+				(function f(ns) {
+					for (var i = 0, n; n = ns[i]; i++) {
+						if (n.name == 'th' || n.name == 'td') {
+							if (border) n.attrs.style = `border:${border}px solid gray;${n.attrs.style}`;
+							if (padding) n.attrs.style = `padding:${padding}px;${n.attrs.style}`;
+						} else f(n.children || []);
+					}
+				})(node.children)
+		}
+		this.CssHandler.pop && this.CssHandler.pop(node);
+		// 自动压缩
+		if (node.name == 'div' && !Object.keys(attrs).length) {
+			var siblings = this.siblings();
+			if (node.children.length == 1 && node.children[0].name == 'div')
+				siblings[siblings.length - 1] = node.children[0];
+		}
+	}
+	// 工具函数
+	bubble() {
+		for (var i = this.STACK.length, item; item = this.STACK[--i];) {
+			if (cfg.richOnlyTags[item.name]) {
+				if (item.name == 'table' && !Object.hasOwnProperty.call(item, 'c')) item.c = 1;
+				return false;
+			}
+			item.c = 1;
+		}
+		return true;
+	}
+	getName = val => this.xml ? val : val.toLowerCase();
+	getUrl(url) {
+		if (url[0] == '/') {
+			if (url[1] == '/') url = this.protocol + ':' + url;
+			else if (this.domain) url = this.domain + url;
+		} else if (this.domain && url.indexOf('data:') != 0 && !url.includes('://'))
+			url = this.domain + '/' + url;
+		return url;
+	}
+	isClose = () => this.data[this.i] == '>' || (this.data[this.i] == '/' && this.data[this.i + 1] == '>');
+	section = () => this.data.substring(this.start, this.i);
+	siblings = () => this.STACK.length ? this.STACK[this.STACK.length - 1].children : this.DOM;
+	// 状态机
+	Text(c) {
+		if (c == '<') {
+			var next = this.data[this.i + 1],
+				isLetter = c => (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z');
+			if (isLetter(next)) {
+				this.setText();
+				this.start = this.i + 1;
+				this.state = this.TagName;
+			} else if (next == '/') {
+				this.setText();
+				if (isLetter(this.data[++this.i + 1])) {
+					this.start = this.i + 1;
+					this.state = this.EndTag;
+				} else
+					this.Comment();
+			} else if (next == '!') {
+				this.setText();
+				this.Comment();
+			}
+		}
+	}
+	Comment() {
+		var key;
+		if (this.data.substring(this.i + 2, this.i + 4) == '--') key = '-->';
+		else if (this.data.substring(this.i + 2, this.i + 9) == '[CDATA[') key = ']]>';
+		else key = '>';
+		if ((this.i = this.data.indexOf(key, this.i + 2)) == -1) this.i = this.data.length;
+		else this.i += key.length - 1;
+		this.start = this.i + 1;
+		this.state = this.Text;
+	}
+	TagName(c) {
+		if (blankChar[c]) {
+			this.tagName = this.section();
+			while (blankChar[this.data[this.i]]) this.i++;
+			if (this.isClose()) this.setNode();
+			else {
+				this.start = this.i;
+				this.state = this.AttrName;
+			}
+		} else if (this.isClose()) {
+			this.tagName = this.section();
+			this.setNode();
+		}
+	}
+	AttrName(c) {
+		var blank = blankChar[c];
+		if (blank) {
+			this.attrName = this.section();
+			c = this.data[this.i];
+		}
+		if (c == '=') {
+			if (!blank) this.attrName = this.section();
+			while (blankChar[this.data[++this.i]]);
+			this.start = this.i--;
+			this.state = this.AttrValue;
+		} else if (blank) this.setAttr();
+		else if (this.isClose()) {
+			this.attrName = this.section();
+			this.setAttr();
+		}
+	}
+	AttrValue(c) {
+		if (c == '"' || c == "'") {
+			this.start++;
+			if ((this.i = this.data.indexOf(c, this.i + 1)) == -1) return this.i = this.data.length;
+			this.attrVal = this.section();
+			this.i++;
+		} else {
+			for (; !blankChar[this.data[this.i]] && !this.isClose(); this.i++);
+			this.attrVal = this.section();
+		}
+		this.setAttr();
+	}
+	EndTag(c) {
+		if (blankChar[c] || c == '>' || c == '/') {
+			var name = this.getName(this.section());
+			for (var i = this.STACK.length; i--;)
+				if (this.STACK[i].name == name) break;
+			if (i != -1) {
+				var node;
+				while ((node = this.STACK.pop()).name != name);
+				this.popNode(node);
+			} else if (name == 'p' || name == 'br')
+				this.siblings().push({
+					name,
+					attrs: {}
+				});
+			this.i = this.data.indexOf('>', this.i);
+			this.start = this.i + 1;
+			if (this.i == -1) this.i = this.data.length;
+			else this.state = this.Text;
+		}
+	}
+}
+module.exports = MpHtmlParser;
diff --git a/components/jyf-parser/libs/config.js b/components/jyf-parser/libs/config.js
new file mode 100644
index 0000000..c7985ad
--- /dev/null
+++ b/components/jyf-parser/libs/config.js
@@ -0,0 +1,89 @@
+// +----------------------------------------------------------------------
+// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
+// +----------------------------------------------------------------------
+// | Author: CRMEB Team <admin@crmeb.com>
+// +----------------------------------------------------------------------
+/* 配置文件 */
+// #ifdef MP-WEIXIN
+const canIUse = wx.canIUse('editor'); // 高基础库标识，用于兼容
+// #endif
+module.exports = {
+	// 过滤器函数
+	filter: null,
+	// 代码高亮函数
+	highlight: null,
+	// 文本处理函数
+	onText: null,
+	blankChar: makeMap(' ,\xA0,\t,\r,\n,\f'),
+	// 块级标签，将被转为 div
+	blockTags: makeMap('address,article,aside,body,caption,center,cite,footer,header,html,nav,section' + (
+		// #ifdef MP-WEIXIN
+		canIUse ? '' :
+		// #endif
+		',pre')),
+	// 将被移除的标签
+	ignoreTags: makeMap(
+		'area,base,basefont,canvas,command,frame,input,isindex,keygen,link,map,meta,param,script,source,style,svg,textarea,title,track,use,wbr'
+		// #ifdef MP-WEIXIN
+		+ (canIUse ? ',rp' : '')
+		// #endif
+		// #ifndef APP-PLUS
+		+ ',embed,iframe'
+		// #endif
+	),
+	// 只能被 rich-text 显示的标签
+	richOnlyTags: makeMap('a,colgroup,fieldset,legend,picture,table'
+		// #ifdef MP-WEIXIN
+		+ (canIUse ? ',bdi,bdo,caption,rt,ruby' : '')
+		// #endif
+	),
+	// 自闭合的标签
+	selfClosingTags: makeMap(
+		'area,base,basefont,br,col,circle,ellipse,embed,frame,hr,img,input,isindex,keygen,line,link,meta,param,path,polygon,rect,source,track,use,wbr'
+	),
+	// 信任的属性
+	trustAttrs: makeMap(
+		'align,alt,app-id,author,autoplay,border,cellpadding,cellspacing,class,color,colspan,controls,data-src,dir,face,height,href,id,ignore,loop,media,muted,name,path,poster,rowspan,size,span,src,start,style,type,unit-id,width,xmlns'
+	),
+	// bool 型的属性
+	boolAttrs: makeMap('autoplay,controls,ignore,loop,muted'),
+	// 信任的标签
+	trustTags: makeMap(
+		'a,abbr,ad,audio,b,blockquote,br,code,col,colgroup,dd,del,dl,dt,div,em,fieldset,h1,h2,h3,h4,h5,h6,hr,i,img,ins,label,legend,li,ol,p,q,source,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,title,ul,video'
+		// #ifdef MP-WEIXIN
+		+ (canIUse ? ',bdi,bdo,caption,pre,rt,ruby' : '')
+		// #endif
+		// #ifdef APP-PLUS
+		+ ',embed,iframe'
+		// #endif
+	),
+	// 默认的标签样式
+	userAgentStyles: {
+		address: 'font-style:italic',
+		big: 'display:inline;font-size:1.2em',
+		blockquote: 'background-color:#f6f6f6;border-left:3px solid #dbdbdb;color:#6c6c6c;padding:5px 0 5px 10px',
+		caption: 'display:table-caption;text-align:center',
+		center: 'text-align:center',
+		cite: 'font-style:italic',
+		dd: 'margin-left:40px',
+		img: 'max-width:100%',
+		mark: 'background-color:yellow',
+		picture: 'max-width:100%',
+		pre: 'font-family:monospace;white-space:pre;overflow:scroll',
+		s: 'text-decoration:line-through',
+		small: 'display:inline;font-size:0.8em',
+		u: 'text-decoration:underline'
+	}
+}
+
+function makeMap(str) {
+	var map = {},
+		list = str.split(',');
+	for (var i = list.length; i--;)
+		map[list[i]] = true;
+	return map;
+}
diff --git a/components/jyf-parser/libs/handler.sjs b/components/jyf-parser/libs/handler.sjs
new file mode 100644
index 0000000..e8743fa
--- /dev/null
+++ b/components/jyf-parser/libs/handler.sjs
@@ -0,0 +1,44 @@
+// +----------------------------------------------------------------------
+// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
+// +----------------------------------------------------------------------
+// | Author: CRMEB Team <admin@crmeb.com>
+// +----------------------------------------------------------------------
+var inlineTags = {
+	abbr: 1,
+	b: 1,
+	big: 1,
+	code: 1,
+	del: 1,
+	em: 1,
+	i: 1,
+	ins: 1,
+	label: 1,
+	q: 1,
+	small: 1,
+	span: 1,
+	strong: 1
+}
+export default {
+	// 从顶层标签的样式中取出一些给 rich-text
+	getStyle: function(style) {
+		if (style) {
+			var i, j, res = '';
+			if ((i = style.indexOf('display')) != -1)
+				res = style.substring(i, (j = style.indexOf(';', i)) == -1 ? style.length : j);
+			if ((i = style.indexOf('float')) != -1)
+				res += ';' + style.substring(i, (j = style.indexOf(';', i)) == -1 ? style.length : j);
+			return res;
+		}
+	},
+	getNode: function(item) {
+		return [item];
+	},
+	// 是否通过 rich-text 显示
+	useRichText: function(item) {
+		return !item.c && !inlineTags[item.name] && (item.attrs.style || '').indexOf('display:inline') == -1;
+	}
+}
diff --git a/components/jyf-parser/libs/handler.wxs b/components/jyf-parser/libs/handler.wxs
new file mode 100644
index 0000000..afaf0bc
--- /dev/null
+++ b/components/jyf-parser/libs/handler.wxs
@@ -0,0 +1,53 @@
+// +----------------------------------------------------------------------
+// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
+// +----------------------------------------------------------------------
+// | Author: CRMEB Team <admin@crmeb.com>
+// +----------------------------------------------------------------------
+var inlineTags = {
+	abbr: 1,
+	b: 1,
+	big: 1,
+	code: 1,
+	del: 1,
+	em: 1,
+	i: 1,
+	ins: 1,
+	label: 1,
+	q: 1,
+	small: 1,
+	span: 1,
+	strong: 1
+}
+module.exports = {
+	// 从顶层标签的样式中取出一些给 rich-text
+	getStyle: function(style) {
+		if (style) {
+			var i, j, res = '';
+			if ((i = style.indexOf('display')) != -1)
+				res = style.substring(i, (j = style.indexOf(';', i)) == -1 ? style.length : j);
+			if ((i = style.indexOf('float')) != -1)
+				res += ';' + style.substring(i, (j = style.indexOf(';', i)) == -1 ? style.length : j);
+			return res;
+		}
+	},
+	// 处理懒加载
+	getNode: function(item, imgLoad) {
+		if (!imgLoad && item.attrs.i != '0') {
+			var img = {
+				name: 'img',
+				attrs: JSON.parse(JSON.stringify(item.attrs))
+			}
+			delete img.attrs.src;
+			img.attrs.style += ';width:20px;height:20px';
+			return [img];
+		} else return [item];
+	},
+	// 是否通过 rich-text 显示
+	useRichText: function(item) {
+		return !item.c && !inlineTags[item.name] && (item.attrs.style || '').indexOf('display:inline') == -1;
+	}
+}
diff --git a/components/jyf-parser/libs/trees.vue b/components/jyf-parser/libs/trees.vue
new file mode 100644
index 0000000..c2ea476
--- /dev/null
+++ b/components/jyf-parser/libs/trees.vue
@@ -0,0 +1,485 @@
+<!--
+  trees 递归显示组件
+  github：https://github.com/jin-yufeng/Parser 
+  docs：https://jin-yufeng.github.io/Parser
+  插件市场：https://ext.dcloud.net.cn/plugin?id=805
+  author：JinYufeng
+  update：2020/04/13
+-->
+<template>
+	<view class="interlayer">
+		<block v-for="(n, index) in nodes" v-bind:key="index">
+			<!--图片-->
+			<!--#ifdef MP-WEIXIN || MP-QQ || MP-ALIPAY || APP-PLUS-->
+			<rich-text v-if="n.name=='img'" :id="n.attrs.id" class="_img" :style="''+handler.getStyle(n.attrs.style)" :nodes="handler.getNode(n,!lazyLoad||imgLoad)"
+			 :data-attrs="n.attrs" @tap="imgtap" @longpress="imglongtap" />
+			<!--#endif-->
+			<!--#ifdef MP-BAIDU || MP-TOUTIAO-->
+			<rich-text v-if="n.name=='img'" :id="n.attrs.id" class="_img" :style="n.attrs.contain" :nodes='[n]' :data-attrs="n.attrs"
+			 @tap="imgtap" @longpress="imglongtap" />
+			<!--#endif-->
+			<!--文本-->
+			<!--#ifdef MP-WEIXIN || MP-QQ || APP-PLUS-->
+			<rich-text v-else-if="n.decode" class="_entity" :nodes="[n]"></rich-text>
+			<!--#endif-->
+			<text v-else-if="n.type=='text'" decode>{{n.text}}</text>
+			<text v-else-if="n.name=='br'">\n</text>
+			<!--视频-->
+			<view v-else-if="n.name=='video'">
+				<view v-if="(!loadVideo||n.lazyLoad)&&!(controls[n.attrs.id]&&controls[n.attrs.id].play)" :id="n.attrs.id" :class="'_video '+(n.attrs.class||'')"
+				 :style="n.attrs.style" @tap="_loadVideo" />
+				<video v-else :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :autoplay="n.attrs.autoplay||(controls[n.attrs.id]&&controls[n.attrs.id].play)"
+				 :controls="n.attrs.controls" :loop="n.attrs.loop" :muted="n.attrs.muted" :poster="n.attrs.poster" :src="n.attrs.source[(controls[n.attrs.id]&&controls[n.attrs.id].index)||0]"
+				 :unit-id="n.attrs['unit-id']" :data-id="n.attrs.id" data-from="video" data-source="source" @error="error" @play="play" />
+			</view>
+			<!--音频-->
+			<audio v-else-if="n.name=='audio'" :class="n.attrs.class" :style="n.attrs.style" :author="n.attrs.author" :autoplay="n.attrs.autoplay"
+			 :controls="n.attrs.controls" :loop="n.attrs.loop" :name="n.attrs.name" :poster="n.attrs.poster" :src="n.attrs.source[(controls[n.attrs.id]&&controls[n.attrs.id].index)||0]"
+			 :data-id="n.attrs.id" data-from="audio" data-source="source" @error="error" @play="play" />
+			<!--链接-->
+			<view v-else-if="n.name=='a'" :class="'_a '+(n.attrs.class||'')" hover-class="_hover" :style="n.attrs.style"
+			 :data-attrs="n.attrs" @tap="linkpress">
+				<trees class="_span" :nodes="n.children" />
+			</view>
+			<!--广告（按需打开注释）-->
+			<!--#ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO-->
+			<!--<ad v-else-if="n.name=='ad'" :class="n.attrs.class" :style="n.attrs.style" :unit-id="n.attrs['unit-id']"
+			 data-from="ad" @error="error" />-->
+			<!--#endif-->
+			<!--#ifdef MP-BAIDU-->
+			<!--<ad v-else-if="n.name=='ad'" :class="n.attrs.class" :style="n.attrs.style" :appid="n.attrs.appid"
+			 :apid="n.attrs.apid" :type="n.attrs.type" data-from="ad" @error="error" />-->
+			<!--#endif-->
+			<!--#ifdef APP-PLUS-->
+			<!--<ad v-else-if="n.name=='ad'" :class="n.attrs.class" :style="n.attrs.style" :adpid="n.attrs.adpid"
+			 data-from="ad" @error="error" />-->
+			<!--#endif-->
+			<!--列表-->
+			<view v-else-if="n.name=='li'" :id="n.attrs.id" :class="n.attrs.class" :style="(n.attrs.style||'')+';display:flex'">
+				<view v-if="n.type=='ol'" class="_ol-bef">{{n.num}}</view>
+				<view v-else class="_ul-bef">
+					<view v-if="n.floor%3==0" class="_ul-p1">█</view>
+					<view v-else-if="n.floor%3==2" class="_ul-p2" />
+					<view v-else class="_ul-p1" style="border-radius:50%">█</view>
+				</view>
+				<!--#ifdef MP-ALIPAY-->
+				<view class="_li">
+					<trees :nodes="n.children" />
+				</view>
+				<!--#endif-->
+				<!--#ifndef MP-ALIPAY-->
+				<trees class="_li" :nodes="n.children" :lazyLoad="lazyLoad" :loadVideo="loadVideo" />
+				<!--#endif-->
+			</view>
+			<!--表格-->
+			<view v-else-if="n.name=='table'&&n.c" :id="n.attrs.id" :class="n.attrs.class" :style="(n.attrs.style||'')+';display:table'">
+				<view v-for="(tbody, i) in n.children" v-bind:key="i" :class="tbody.attrs.class" :style="(tbody.attrs.style||'')+(tbody.name[0]=='t'?';display:table-'+(tbody.name=='tr'?'row':'row-group'):'')">
+					<view v-for="(tr, j) in tbody.children" v-bind:key="j" :class="tr.attrs.class" :style="(tr.attrs.style||'')+(tr.name[0]=='t'?';display:table-'+(tr.name=='tr'?'row':'cell'):'')">
+						<trees v-if="tr.name=='td'" :nodes="tr.children" :lazyLoad="lazyLoad" :loadVideo="loadVideo" />
+						<block v-else>
+							<!--#ifdef MP-ALIPAY-->
+							<view v-for="(td, k) in tr.children" v-bind:key="k" :class="td.attrs.class" :style="(td.attrs.style||'')+(td.name[0]=='t'?';display:table-'+(td.name=='tr'?'row':'cell'):'')">
+								<trees :nodes="td.children" />
+							</view>
+							<!--#endif-->
+							<!--#ifndef MP-ALIPAY-->
+							<trees v-for="(td, k) in tr.children" v-bind:key="k" :class="td.attrs.class" :style="(td.attrs.style||'')+(td.name[0]=='t'?';display:table-'+(td.name=='tr'?'row':'cell'):'')"
+							 :nodes="td.children" :lazyLoad="lazyLoad" :loadVideo="loadVideo" />
+							<!--#endif-->
+						</block>
+					</view>
+				</view>
+			</view>
+			<!--#ifdef APP-PLUS-->
+			<iframe v-else-if="n.name=='iframe'" :style="n.attrs.style" :allowfullscreen="n.attrs.allowfullscreen" :frameborder="n.attrs.frameborder"
+			 :width="n.attrs.width" :height="n.attrs.height" :src="n.attrs.src" />
+			<embed v-else-if="n.name=='embed'" :style="n.attrs.style" :width="n.attrs.width" :height="n.attrs.height" :src="n.attrs.src" />
+			<!--#endif-->
+			<!--富文本-->
+			<!--#ifdef MP-WEIXIN || MP-QQ || MP-ALIPAY || APP-PLUS-->
+			<rich-text v-else-if="handler.useRichText(n)" :id="n.attrs.id" :class="'_p __'+n.name" :nodes="[n]" />
+			<!--#endif-->
+			<!--#ifdef MP-BAIDU || MP-TOUTIAO-->
+			<rich-text v-else-if="!(n.c||n.continue)" :id="n.attrs.id" :class="_p" :style="n.attrs.contain" :nodes="[n]" />
+			<!--#endif-->
+			<!--#ifdef MP-ALIPAY-->
+			<view v-else :id="n.attrs.id" :class="'_'+n.name+' '+(n.attrs.class||'')" :style="n.attrs.style">
+				<trees :nodes="n.children" />
+			</view>
+			<!--#endif-->
+			<!--#ifndef MP-ALIPAY-->
+			<trees v-else :class="(n.attrs.id||'')+' _'+n.name+' '+(n.attrs.class||'')" :style="n.attrs.style" :nodes="n.children"
+			 :lazyLoad="lazyLoad" :loadVideo="loadVideo" />
+			<!--#endif-->
+		</block>
+	</view>
+</template>
+<script module="handler" lang="wxs" src="./handler.wxs"></script>
+<script module="handler" lang="sjs" src="./handler.sjs"></script>
+<script>
+	// +----------------------------------------------------------------------
+	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
+	// +----------------------------------------------------------------------
+	// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
+	// +----------------------------------------------------------------------
+	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
+	// +----------------------------------------------------------------------
+	// | Author: CRMEB Team <admin@crmeb.com>
+	// +----------------------------------------------------------------------
+	global.Parser = {};
+	import trees from './trees'
+	export default {
+		components: {
+			trees
+		},
+		name: 'trees',
+		data() {
+			return {
+				controls: {},
+				// #ifdef MP-WEIXIN || MP-QQ || APP-PLUS
+				imgLoad: false,
+				// #endif
+				// #ifndef APP-PLUS
+				loadVideo: true
+				// #endif
+			}
+		},
+		props: {
+			nodes: Array,
+			// #ifdef MP-WEIXIN || MP-QQ || H5 || APP-PLUS
+			lazyLoad: Boolean,
+			// #endif
+			// #ifdef APP-PLUS
+			loadVideo: Boolean
+			// #endif
+		},
+		mounted() {
+			// 获取顶层组件
+			this.top = this.$parent;
+			while (this.top.$options.name != 'parser') {
+				if (this.top.top) {
+					this.top = this.top.top;
+					break;
+				}
+				this.top = this.top.$parent;
+			}
+		},
+		// #ifdef MP-WEIXIN || MP-QQ || APP-PLUS
+		beforeDestroy() {
+			if (this.observer)
+				this.observer.disconnect();
+		},
+		// #endif
+		methods: {
+			// #ifndef MP-ALIPAY
+			play(e) {
+				if (this.top.videoContexts.length > 1 && this.top.autopause)
+					for (var i = this.top.videoContexts.length; i--;)
+						if (this.top.videoContexts[i].id != e.currentTarget.dataset.id)
+							this.top.videoContexts[i].pause();
+			},
+			// #endif
+			imgtap(e) {
+				var attrs = e.currentTarget.dataset.attrs;
+				if (!attrs.ignore) {
+					var preview = true, data = {
+						id: e.target.id,
+						src: attrs.src,
+						ignore: () => preview = false
+					};
+					global.Parser.onImgtap && global.Parser.onImgtap(data);
+					this.top.$emit('imgtap', data);
+					if (preview) {
+						var urls = this.top.imgList,
+							current = urls[attrs.i] ? parseInt(attrs.i) : (urls = [attrs.src], 0);
+						uni.previewImage({
+							current,
+							urls
+						})
+					}
+				}
+			},
+			imglongtap(e) {
+				var attrs = e.item.dataset.attrs;
+				if (!attrs.ignore)
+					this.top.$emit('imglongtap', {
+						id: e.target.id,
+						src: attrs.src
+					})
+			},
+			linkpress(e) {
+				var jump = true,
+					attrs = e.currentTarget.dataset.attrs;
+				attrs.ignore = () => jump = false;
+				global.Parser.onLinkpress && global.Parser.onLinkpress(attrs);
+				this.top.$emit('linkpress', attrs);
+				if (jump) {
+					// #ifdef MP
+					if (attrs['app-id']) {
+						return uni.navigateToMiniProgram({
+							appId: attrs['app-id'],
+							path: attrs.path
+						})
+					}
+					// #endif
+					if (attrs.href) {
+						if (attrs.href[0] == '#') {
+							if (this.top.useAnchor)
+								this.top.navigateTo({
+									id: attrs.href.substring(1)
+								})
+						} else if (attrs.href.indexOf('http') == 0 || attrs.href.indexOf('//') == 0) {
+							// #ifdef APP-PLUS
+							plus.runtime.openWeb(attrs.href);
+							// #endif
+							// #ifndef APP-PLUS
+							uni.setClipboardData({
+								data: attrs.href,
+								success: () =>
+									uni.showToast({
+										title: '链接已复制'
+									})
+							})
+							// #endif
+						} else
+							uni.navigateTo({
+								url: attrs.href
+							})
+					}
+				}
+			},
+			error(e) {
+				var context, target = e.currentTarget,
+					source = target.dataset.from;
+				if (source == 'video' || source == 'audio') {
+					// 加载其他 source
+					var index = this.controls[target.id] ? this.controls[target.id].index + 1 : 1;
+					if (index < target.dataset.source.length)
+						this.$set(this.controls, target.id + '.index', index);
+					if (source == 'video') context = uni.createVideoContext(target.id, this);
+				}
+				this.top && this.top.$emit('error', {
+					source,
+					target,
+					errMsg: e.detail.errMsg,
+					errCode: e.detail.errCode,
+					context
+				});
+			},
+			_loadVideo(e) {
+				this.$set(this.controls, e.currentTarget.id, {
+					play: true,
+					index: 0
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	/* 在这里引入自定义样式 */
+
+	/* 链接和图片效果 */
+	._a {
+		display: inline;
+		color: #366092;
+		word-break: break-all;
+		padding: 1.5px 0 1.5px 0;
+	}
+
+	._hover {
+		opacity: 0.7;
+		text-decoration: underline;
+	}
+
+	._img {
+		display: inline-block;
+		text-indent: 0;
+	}
+
+	/* #ifdef MP-WEIXIN */
+	:host {
+		display: inline;
+	}
+
+	/* #endif */
+
+	/* #ifdef MP */
+	.interlayer {
+		align-content: inherit;
+		align-items: inherit;
+		display: inherit;
+		flex-direction: inherit;
+		flex-wrap: inherit;
+		justify-content: inherit;
+		width: 100%;
+		white-space: inherit;
+	}
+
+	/* #endif */
+
+	._b,
+	._strong {
+		font-weight: bold;
+	}
+
+	._blockquote,
+	._div,
+	._p,
+	._ol,
+	._ul,
+	._li {
+		display: block;
+	}
+
+	._code {
+		font-family: monospace;
+	}
+
+	._del {
+		text-decoration: line-through;
+	}
+
+	._em,
+	._i {
+		font-style: italic;
+	}
+
+	._h1 {
+		font-size: 2em;
+	}
+
+	._h2 {
+		font-size: 1.5em;
+	}
+
+	._h3 {
+		font-size: 1.17em;
+	}
+
+	._h5 {
+		font-size: 0.83em;
+	}
+
+	._h6 {
+		font-size: 0.67em;
+	}
+
+	._h1,
+	._h2,
+	._h3,
+	._h4,
+	._h5,
+	._h6 {
+		display: block;
+		font-weight: bold;
+	}
+
+	._ins {
+		text-decoration: underline;
+	}
+
+	._li {
+		flex: 1;
+		width: 0;
+	}
+
+	._ol-bef {
+		margin-right: 5px;
+		text-align: right;
+		width: 36px;
+	}
+
+	._ul-bef {
+		line-height: normal;
+		margin: 0 12px 0 23px;
+	}
+
+	._ol-bef,
+	._ul_bef {
+		flex: none;
+		user-select: none;
+	}
+
+	._ul-p1 {
+		display: inline-block;
+		height: 0.3em;
+		line-height: 0.3em;
+		overflow: hidden;
+		width: 0.3em;
+	}
+
+	._ul-p2 {
+		border: 0.05em solid black;
+		border-radius: 50%;
+		display: inline-block;
+		height: 0.23em;
+		width: 0.23em;
+	}
+
+	._q::before {
+		content: '"';
+	}
+
+	._q::after {
+		content: '"';
+	}
+
+	._sub {
+		font-size: smaller;
+		vertical-align: sub;
+	}
+
+	._sup {
+		font-size: smaller;
+		vertical-align: super;
+	}
+
+	/* #ifndef MP-WEIXIN */
+	._abbr,
+	._b,
+	._code,
+	._del,
+	._em,
+	._i,
+	._ins,
+	._label,
+	._q,
+	._span,
+	._strong,
+	._sub,
+	._sup {
+		display: inline;
+	}
+
+	/* #endif */
+
+	/* #ifdef MP-WEIXIN || MP-QQ || MP-ALIPAY */
+	.__bdo,
+	.__bdi,
+	.__ruby,
+	.__rt,
+	._entity {
+		display: inline-block;
+	}
+
+	/* #endif */
+	._video {
+		background-color: black;
+		display: inline-block;
+		height: 225px;
+		position: relative;
+		width: 300px;
+	}
+
+	._video::after {
+		border-color: transparent transparent transparent white;
+		border-style: solid;
+		border-width: 15px 0 15px 30px;
+		content: '';
+		left: 50%;
+		margin: -15px 0 0 -15px;
+		position: absolute;
+		top: 50%;
+	}
+</style>
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..a4892df
--- /dev/null
+++ b/components/sd-live-page/histroy.nvue
@@ -0,0 +1,1915 @@
+<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" v-if="!isshow">
+					<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)" v-if="!isshow">去抢购</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>
+
+		<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/api.js'
+	import {
+		VUE_APP_WS_URL
+	} from '@/config/app';
+
+	import uniPopup from '@/components/uni-popup/live-uni-popup.vue';
+	import gbpopup from '@/components/gb-popup/gb-popup.vue';
+	import msgList from '@/components/mh-msgList/mh-msgList.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: [],
+				isShow1: false,
+				users: [],
+				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: ''
+
+			}
+
+		},
+
+		mounted() {
+			// console.log(this.$store.state.app.userInfo, '房间id 以及当前用户id')
+			// this.userinfo = this.$store.state.app.userInfo
+			// 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) => {
+					if (res.code == 1) {
+						this.follow = res.data.is_start
+					}
+				})
+			},
+			//获取充值数据
+			getRecharg() {
+				getRechargeApi().then((res) => {
+				
+					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: this.userinfo.uid,
+					app_user_name: this.userinfo.nickname,
+					app_user_avatar: this.userinfo.avatar,
+				}
+
+				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() {
+
+				// 创建一个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') {
+						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', '')
+			},
+
+			//关闭直播间
+			outroom: function() {
+				uni.redirectTo({
+						url: '/pages/room/room_list'
+					})
+				// if (this.roomDetail.app_user_id == this.userinfo.uid) {
+				// 	// console.log(this.roomDetail)
+				// 	stopPushLive({
+				// 		app_name: 'shop',
+				// 		stream_name: this.roomDetail.stream_name
+				// 	}).then((res) => {
+
+				// 		if (res.code == 1) {
+				// 			console.log('关闭直播间')
+				// 			uni.redirectTo({
+				// 				url: '/pages/room/room_list'
+				// 			})
+				// 		}
+				// 	})
+				// } else {
+				// 	uni.redirectTo({
+				// 		url: '/pages/room/room_list'
+				// 	})
+				// }
+			},
+			//获取房间详情
+			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.app_user_id, this.userinfo.uid, 'AAAAAAAAAA')
+						if (res.data.app_user_id == this.userinfo.uid) {
+							this.isshow = true
+							this.userinfo.nickname = res.data.app_user_name
+							this.userinfo.avatar = res.data.app_user_avatar
+						}
+					}
+					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-top: 5rpx;
+		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;
+		z-index: 9999;
+	}
+
+	.gift-alerta {
+		width: 359rpx;
+		height: 70rpx;
+		background: rgba(0, 0, 0, 0.25);
+		border-radius: 39rpx 39rpx;
+		padding-left: 2rpx;
+		flex-direction: row;
+		justify-content: space-between;
+
+	}
+
+	.gift-alertb {
+		flex-direction: row;
+		height: 72rpx;
+	}
+
+	.gift-alertb-img {
+		width: 44rpx;
+		height: 72rpx;
+	}
+
+	.gift-alertb-txt {
+		font-size: 45rpx;
+		margin-top: 5rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 700;
+		color: #FFFFFF;
+
+	}
+
+	@keyframes slideRight {
+		0% {
+			transform: translateX(0);
+		}
+
+		100% {
+			transform: translateX(100%);
+		}
+	}
+
+
+	.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: 3rpx;
+
+
+	}
+
+	.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: 85upx;
+		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..93d4468
--- /dev/null
+++ b/components/sd-live-page/livepage.nvue
@@ -0,0 +1,1923 @@
+<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" v-if="!isshow">
+					<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)" v-if="!isshow">去抢购</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>
+
+		<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/api.js'
+	import {
+		VUE_APP_WS_URL
+	} from '@/config/app';
+
+	import uniPopup from '@/components/uni-popup/live-uni-popup.vue';
+	import gbpopup from '@/components/gb-popup/gb-popup.vue';
+	import msgList from '@/components/mh-msgList/mh-msgList.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: [],
+				isShow1: false,
+				users: [],
+				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: ''
+
+			}
+
+		},
+
+		mounted() {
+			// console.log(this.$store.state.app.userInfo, '房间id 以及当前用户id')
+
+			if (typeof this.$store.state.app.userInfo === 'string' && this.$store.state.app.userInfo.length > 0) {
+				this.userinfo = JSON.parse(this.$store.state.app.userInfo)
+			} else {
+				this.userinfo = this.$store.state.app.userInfo
+			}
+
+
+
+			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.room.app_user_id).then((res) => {
+					if (res.status == 200) {
+						this.follow = res.data.is_start
+					}
+				}).catch((err) => {
+
+				})
+			},
+			//获取充值数据
+			getRecharg() {
+				getRechargeApi().then((res) => {
+
+					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: this.userinfo.uid,
+					app_user_name: this.userinfo.nickname,
+					app_user_avatar: this.userinfo.avatar,
+				}
+
+				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() {
+
+				// 创建一个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') {
+						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', '')
+			},
+
+			//关闭直播间
+			outroom: function() {
+				if (this.roomDetail.app_user_id == this.userinfo.uid) {
+					// console.log(this.roomDetail)
+					stopPushLive({
+						app_name: 'shop',
+						stream_name: this.roomDetail.stream_name
+					}).then((res) => {
+
+						if (res.code == 1) {
+							console.log('关闭直播间')
+							uni.redirectTo({
+								url: '/pages/room/room_list'
+							})
+						}
+					})
+				} else {
+					uni.redirectTo({
+						url: '/pages/room/room_list'
+					})
+				}
+			},
+			//获取房间详情
+			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.app_user_id, this.userinfo.uid, 'AAAAAAAAAA')
+						if (res.data.app_user_id == this.userinfo.uid) {
+							this.isshow = true
+							this.userinfo.nickname = res.data.app_user_name
+							this.userinfo.avatar = res.data.app_user_avatar
+						}
+					}
+					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-top: 5rpx;
+		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;
+		z-index: 9999;
+	}
+
+	.gift-alerta {
+		width: 359rpx;
+		height: 70rpx;
+		background: rgba(0, 0, 0, 0.25);
+		border-radius: 39rpx 39rpx;
+		padding-left: 2rpx;
+		flex-direction: row;
+		justify-content: space-between;
+
+	}
+
+	.gift-alertb {
+		flex-direction: row;
+		height: 72rpx;
+	}
+
+	.gift-alertb-img {
+		width: 44rpx;
+		height: 72rpx;
+	}
+
+	.gift-alertb-txt {
+		font-size: 45rpx;
+		margin-top: 5rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 700;
+		color: #FFFFFF;
+
+	}
+
+	@keyframes slideRight {
+		0% {
+			transform: translateX(0);
+		}
+
+		100% {
+			transform: translateX(100%);
+		}
+	}
+
+
+	.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: 3rpx;
+
+
+	}
+
+	.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: 85upx;
+		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/livepage1.nvue b/components/sd-live-page/livepage1.nvue
new file mode 100644
index 0000000..86eb018
--- /dev/null
+++ b/components/sd-live-page/livepage1.nvue
@@ -0,0 +1,1637 @@
+<template name="sd-float-page">
+	<view style="border-width: 1px;
+		border-style: solid;
+		border-color: #ffff;position: relative;">
+		<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" v-if="!isshow"><text class="guanzhu">关注</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.url" class="top-scroll-users-header"></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_lick">
+							<image class="ico-box-img" src="@/static/lw/1.gif"></image>
+						</view>
+						<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>
+				</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: #421395;">
+					<!-- <text class="uni-share-title">支付选项</text> -->
+					<view class="send-boj" id="tes">
+						<view style="font-size: 32upx;padding-left: 10upx;color: #FFFFFF;">
+							礼物
+						</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(1,litem.id)">
+								<image class="lw-ico" :src="litem.ico"></image>
+								<view class="lw-name">{{litem.name}}</view>
+								<view class="lw-money">{{litem.price}}陌陌币</view>
+							</view>
+						</view>
+
+					</scroll-view>
+					<view class="gift-botton-view">
+						<view style="color: #FFFFFF;" class="web-font">
+							余额: {{user.rice}} 币
+						</view>
+						<view style="color: #ff2d54;">充值</view>
+					</view>
+				</view>
+			</template>
+			<template v-if="popup==2">
+				<view class="uni-share">
+					<text class="uni-share-title">设置</text>
+					<view class="uni-share-content">
+					</view>
+					<text class="uni-share-btn" @click="cancel('share')">关闭</text>
+				</view>
+			</template>
+			<template v-if="popup==3">
+				<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">
+										<text class="txtba">{{litem.app_goods_price}}</text>
+										<text class="txtbb" @click="shopp(litem)" v-if="isshow">购买</text>
+									</view>
+								</view>
+							</view>
+						</view>
+
+					</scroll-view>
+
+				</view>
+			</template>
+		</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="send-boj-user-header"
+				style="border-width: 1px;border-style: solid;border-color: #ffff;z-index: 9999;">
+				<image :src="gift.userAvatar" class="send-boj-user-header-img" mode="aspectFit"></image>
+			</view>
+			<view style="font-size: 32upx;padding-left: 10upx;color: #FFFFFF;">
+				送你{{gift.gift_name}}
+			</view>
+			<view class="gift-ico">
+				<image :src="gift.gift_ico" class="gift-ico-img" mode="aspectFit"></image>
+			</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>
+	</view>
+</template>
+
+<script>
+	import {
+		joinChatRoom,
+		sendGroupMessage,
+		bindUser,
+		stopPushLive,
+		liveDetail,
+
+	} from '@/api/api.js'
+	import {
+		VUE_APP_WS_URL
+	} from '@/config/app';
+	import uniPopup from '@/components/uni-popup/live-uni-popup.vue';
+	import msgList from '@/components/mh-msgList/mh-msgList.vue';
+	import Json from '../../static/js/json.js' //测试用数据
+	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
+		},
+		data() {
+			return {
+				windowWidth: '',
+				// room: [], //房间信息
+				roomobj: [],
+				users: [{
+						url: require('@/static/logo.png'),
+					},
+					{
+						url: require('@/static/logo.png'),
+					},
+					{
+						url: require('@/static/logo.png'),
+					}, {
+						url: require('@/static/logo.png'),
+					}
+				],
+				rid: 0, //房间id
+				role: '', //角色
+				focus: false,
+				inputValue: '',
+				isshow: false,
+				message_arr: [{
+						userName: '11111',
+						message: '2222'
+					},
+					{
+						userName: '11111',
+						message: '2222'
+					}, {
+						userName: '11111',
+						message: '2222'
+					}, {
+						userName: '11111',
+						message: '2222'
+					}, {
+						userName: '11111',
+						message: '2222'
+					}, {
+						userName: '11111',
+						message: '2222'
+					},
+
+
+				],
+				msgList: [{
+					userName: "系统通知",
+					content: "倡导绿色直播，严禁发布涉黄涉毒涉赌，严禁发布涉政、违法及低俗违规内容。健康直播，文明互动",
+					cmd: "say",
+					msg_type: "system"
+				}, ],
+				view_id: '',
+				liwu: Json.liwu,
+				liwu2: Json.liwu2,
+				liwu3: Json.liwu3,
+				type: 'bottom',
+				popup: 3, //1礼物操作 2其他操作 3.商品
+				user: '',
+				giftobj: [], //礼物
+				join_arr: [],
+				userName: '',
+				roomDetail: '',
+				userinfo: {},
+
+			}
+			/*定义IM消息类型
+			1：进群通知
+			2：发送自定义消息
+			3：收到礼物
+			*/
+		},
+
+		mounted() {
+			this.userinfo = this.$store.state.app.userInfo
+			this.get_live_room(); //调用直播间信息
+		},
+
+		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: {
+			//加入直播间
+			joinChatRoom() {
+				let data = {
+					live_stream_id: this.room.live_stream_id,
+					app_name: 'shop',
+					app_user_id:this.userinfo.uid,
+					app_user_name: this.userinfo.nickname,
+					app_user_avatar: this.userinfo.avatar,
+				}
+				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:this.userinfo.uid,
+					client_id: client_id
+
+				}
+				bindUser(data).then((res) => {
+					if (res.code == 1) {
+						console.log('绑定成功')
+						this.joinChatRoom()
+					}
+					console.log(res)
+				})
+			},
+
+			// 进入这个页面的时候创建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('用户点击取消');
+									}
+								}
+							})
+							
+						}
+					}
+
+
+				});
+				// 这里仅是事件监听【如果socket关闭了会执行】
+				this.socketTask.onClose(() => {
+					console.log("已经被关闭了")
+				})
+			},
+			
+			sendGift() {
+				// 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",
+				const gift = {
+					userName: "11111111",
+					gift_ico: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png",
+					userAvatar: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png",
+					top: Math.random() * 200, // 随机生成礼物的位置
+					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 args = e.detail;
+				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() {
+				if (this.roomDetail.app_user_id ==this.userinfo.uid) {
+					// console.log(this.roomDetail)
+					stopPushLive({
+						app_name: 'shop',
+						stream_name: this.roomDetail.stream_name
+					}).then((res) => {
+
+						if (res.code == 1) {
+							console.log('关闭直播间')
+							uni.redirectTo({
+								url: '/pages/room/room_list'
+							})
+						}
+					})
+				} else {
+					uni.redirectTo({
+						url: '/pages/room/room_list'
+					})
+				}
+			},
+			
+			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
+						if (res.data.app_user_id == this.userinfo.uid) {
+							this.isshow = true
+							this.userinfo.nickname=res.data.app_user_name
+							this.userinfo.avatar=res.data.app_user_avatar
+						}
+
+					}
+					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)
+			},
+			send_liwu: function() {
+				const t = this;
+				t.popup = 1;
+				this.type = 'bottom'
+				t.togglePopup('bottom', 'share');
+			},
+			send_shop: function() {
+				const t = this;
+				t.popup = 3;
+				this.type = 'bottom'
+				t.togglePopup('bottom', 'share');
+			},
+			send_lick: function() {
+				this.sendGift()
+				// const t = this;
+				// var user = uni.getStorageSync('user');
+				// var userid = uni.getStorageSync('userid');
+				// var send_data = {
+				// 	userid: userid,
+				// 	rid: t.rid,
+				// 	typ: 2,
+				// 	nature: 3,
+				// 	nickname: user.nickname,
+				// 	avatarurl: user.avatarurl,
+				// 	number: 1
+				// }
+				// var obj = Json.liwu;
+				// var index = obj.findIndex(i => i.id == 1);
+				// var liwu = obj[index];
+				// send_data.gid = liwu.id; //追加图片地址
+				// send_data.price = liwu.price;
+				// send_data.gift_name = liwu.name;
+				// send_data.gift_ico = liwu.ico;
+				// uni.showModal({
+				// 	title: '提示',
+				// 	content: '确定发送1个小可爱？',
+				// 	success: function(res) {
+				// 		if (res.confirm) {
+				// 			console.log('用户点击确定');
+				// 			if (user.rice >= liwu.price) {
+				// 				uni.request({ //返回系统数据
+				// 					url: t.func.api.user_send_room_liwu_pay,
+				// 					data: {
+				// 						send_data: JSON.stringify(send_data)
+				// 					},
+				// 					method: "POST",
+				// 					header: {
+				// 						'content-type': 'application/x-www-form-urlencoded'
+				// 					},
+				// 					success: (res) => {
+				// 						console.log('res', res)
+				// 						if (res.data.data.msg == 1) {
+				// 							uni.setStorageSync('user', res.data.data.user);
+				// 							t.user = res.data.data.user;
+				// 							t.cancel('share');
+				// 							send_data.message = '发送礼物';
+				// 							send_data.msg = '礼物';
+				// 							liveroom.sendRoomTextMsg({
+				// 								data: send_data,
+				// 								success: () => {
+				// 									console.log('发送礼物成功')
+				// 								}
+				// 							});
+				// 						}
+				// 					}
+				// 				})
+				// 			} else {
+				// 				console.log('约不足')
+				// 			}
+				// 		} else if (res.cancel) {
+				// 			console.log('用户点击取消');
+				// 		}
+				// 	}
+				// });
+			},
+
+			send_liwu_obj: function(e, d) {
+				const t = this;
+				var user = uni.getStorageSync('user');
+				var userid = uni.getStorageSync('userid');
+				var send_data = {
+					userid: userid,
+					rid: t.rid,
+					typ: 2,
+					nature: 3,
+					nickname: user.nickname,
+					avatarurl: user.avatarurl,
+					number: 1
+				}
+				if (e == 1) {
+					var obj = Json.liwu;
+				} else if (e == 2) {
+					var obj = Json.liwu2;
+				} else {
+					var obj = Json.liwu3;
+				}
+				var index = obj.findIndex(i => i.id == d);
+				var liwu = obj[index];
+				send_data.gid = liwu.id; //追加图片地址
+				send_data.price = liwu.price;
+				send_data.gift_name = liwu.name;
+				send_data.gift_ico = liwu.ico;
+				console.log(send_data)
+				// console.log(e)
+				// console.log(d)
+				// console.log(liwu)
+				uni.showModal({
+					title: '支付提示',
+					content: '本次消费你需要支付' + liwu.price + '陌陌币确认支付吗？',
+					success: function(res) {
+						if (res.confirm) {
+							if (user.rice >= liwu.price) {
+								uni.request({ //返回系统数据
+									url: t.func.api.user_send_room_liwu_pay,
+									data: {
+										send_data: JSON.stringify(send_data)
+									},
+									method: "POST",
+									header: {
+										'content-type': 'application/x-www-form-urlencoded'
+									},
+									success: (res) => {
+										console.log(res)
+										if (res.data.data.msg == 1) {
+											uni.setStorageSync('user', res.data.data.user);
+											t.user = res.data.data.user;
+											t.cancel('share');
+											send_data.message = '发送礼物';
+											send_data.msg = '礼物';
+											liveroom.sendRoomTextMsg({
+												data: send_data,
+												success: () => {
+													console.log('发送礼物成功')
+												}
+											});
+										}
+									}
+								})
+								console.log(send_data)
+							} else {
+								console.log('约不足')
+							}
+						} else if (res.cancel) {
+							console.log('用户点击取消');
+						}
+					}
+				});
+
+			},
+			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:this.userinfo.uid,
+					message: this.inputValue
+				}
+				// console.log(data,'222222')
+
+				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">
+	page {
+		position: relative;
+
+
+	}
+
+	.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 {
+		padding: 10upx;
+		width: 70upx;
+		height: 70upx;
+		border-radius: 70upx;
+		background-color: rgba(0, 0, 0, .1);
+		line-height: 70upx;
+		text-align: center;
+	}
+
+	.ico-box-img {
+		width: 40upx;
+		height: 40upx;
+		margin-top: 5rpx;
+		margin-left: 5rpx;
+
+	}
+
+	.ico {
+
+		font-size: 48upx;
+	}
+
+	.input-tpl {
+		height: 70upx;
+		width: 300upx;
+		line-height: 70upx;
+		text-align: left;
+		background-color: rgba(0, 0, 0, .1);
+		border-radius: 70upx;
+	}
+
+	.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;
+	}
+
+	.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-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 {}
+
+	.sp-txtb {
+		position: absolute;
+		bottom: 20rpx;
+		width: 500rpx;
+		flex-direction: row;
+		justify-content: space-between;
+
+		.txtba {
+			color: red;
+			height: 60rpx;
+			line-height: 60rpx;
+		}
+
+		.txtbb {
+			width: 120rpx;
+			height: 60rpx;
+			line-height: 60rpx;
+			background-color: red;
+			text-align: center;
+			color: #fff;
+		}
+	}
+
+	.uni-share-content {
+		/* #ifndef APP-NVUE */
+		/* display: flex; */
+		/* #endif */
+		// width: 750rpx;
+
+		// display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		// justify-content: center;
+		padding: 15px 0;
+		padding-left: 30rpx;
+
+		/* 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;
+		font-size: 14px;
+		border-top-color: #5c1398;
+		border-top-width: 1px;
+		border-top-style: solid;
+		text-align: center;
+		display: flex;
+		justify-content: space-between;
+		padding: 20upx 40upx;
+	}
+
+	/* 礼物 */
+	.lw-box {
+		width: 175rpx;
+
+
+		margin-bottom: 30upx;
+	}
+
+	.lw-ico {
+
+		width: 100upx;
+		height: 100upx;
+		// margin: 0 auto;
+	}
+
+	.lw-name {
+		font-size: 28upx;
+		text-align: center;
+		line-height: 32upx;
+		padding-top: 8upx;
+		color: #FFFFFF;
+	}
+
+	.lw-money {
+		font-size: 24upx;
+		color: #8a68c4;
+		text-align: center;
+	}
+
+	.send-boj {
+		// display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		padding: 20upx 30upx;
+		border-bottom: 2upx solid #5c1398;
+	}
+
+	.send-boj-close {
+		width: 30rpx;
+		height: 30rpx;
+	}
+
+	.send-boj-close-img {
+		width: 30rpx;
+		height: 30rpx;
+	}
+
+	.gift-alert {
+		width: 400upx;
+		position: fixed;
+		/* height: 70upx; */
+		// line-height: 70upx;
+		// background-color: rgba(0, 0, 0, .5);
+		// border-radius: 70upx;
+	
+		// bottom: 400upx;
+		// left: -500upx;
+		flex-direction: row;
+		justify-content: space-between;
+		padding: 10upx;
+		z-index: 9999;
+	
+		animation: slideRight 1s linear forwards;
+	}
+
+	.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: 100upx;
+		height: 100upx;
+		position: absolute;
+		right: 20upx;
+		top: -20upx;
+	}
+
+	.send-boj-user-header {
+		width: 60upx;
+		height: 60upx;
+		border-radius: 100%;
+		overflow: hidden;
+		box-sizing: border-box;
+		border: 4upx solid #00c9ff;
+	}
+
+	.send-boj-user-header-img {
+		width: 100%;
+		height: 200upx;
+	}
+
+	.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: 80upx;
+		padding: 0 2upx;
+		display: flex;
+	}
+
+	.right_top_scroll {
+		overflow: hidden;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		width: 200rpx;
+		padding-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/shoppinglist/shoppinglist.vue b/components/shoppinglist/shoppinglist.vue
new file mode 100644
index 0000000..686b6a8
--- /dev/null
+++ b/components/shoppinglist/shoppinglist.vue
@@ -0,0 +1,488 @@
+<template>
+	<view class="containers">
+		<view class="header">
+			<view class="search">
+				<text class="iconfont icon-xiazai5"></text>
+				<input type="text" placeholder="请输入商品名称" v-model="searchVal" @input="setValue" confirm-type="search"
+					@confirm="searchBut()" placeholder-class='placeholder'>
+			</view>
+			<view class="iconclose" @click="close">
+				<image src="@/static/img/close.png" mode="aspectFit"></image>
+			</view>
+		</view>
+		<view class="main">
+			<scroll-view scroll-y="true" @touchmove.stop>
+				<block>
+
+					<view v-if="bought.length>0" @touchmove="onTouchmove" id="goods" class="goods">
+						<view class="picTxt acea-row" v-for="(item, i) in bought" :key="i">
+							<view class="checkbox">
+								<text @click.stop="goodsCheck(item)" v-if="item.check" class="iconfont icon-xuanzhong1"
+									style="color: red;"></text>
+								<text @click.stop="goodsCheck(item)" v-else class="iconfont icon-weixuanzhong"></text>
+							</view>
+							<view class='pictrue'>
+								<image :src='item.image'></image>
+							</view>
+
+							<view class='text'>
+								<view class='line2 name'>{{item.store_name}}</view>
+								<view class="" style="margin-top: 20rpx;">
+									{{item.price}}
+								</view>
+							</view>
+
+
+
+						</view>
+					</view>
+					<view v-else class="empty">
+						<image src="/static/images/no_thing.png"></image>
+						<text>暂无内容哦~</text>
+					</view>
+				</block>
+			</scroll-view>
+			<view class="foot_bar">
+				<button class="confirm_btn" @click="submit">确定({{checkedArr.length}})</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import subtractive from '@/components/subtractive/subtractive.vue';
+
+	import {
+		good
+	} from '@/api/api.js'
+
+
+	export default {
+		props: {
+			checkedObj: {
+				type: Array,
+				default: []
+			}
+		},
+		components: {
+			subtractive
+		},
+		data() {
+			return {
+				isActive: 0,
+				loadedb: false,
+				loadingb: false,
+				loadedc: false,
+				loadingc: false,
+				loadeds: false,
+				loadings: false,
+				whereb: {
+					page: 1,
+					limit: 10,
+					keyword: '',
+				},
+				peicenumber: 0,
+
+				searchVal: '',
+				checked: [],
+				list: [],
+
+				bought: [],
+
+				checkedArr: [],
+				aryys: [],
+				// picker下拉数据源
+				storageCustomList: [],
+				index: 0,
+				pickerData: '请选择',
+				itstock: '',
+
+			};
+		},
+		watch: {
+			checkedObj: {
+				handler(n) {
+					this.checkedArr = n
+				},
+
+			}
+		},
+		onLoad() {
+
+		},
+		mounted() {
+			
+			this.checkedArr = this.checkedObj
+			this.aryys = this.checkedObj
+			this.getBounht();
+		},
+		methods: {
+
+			//价格
+			producrprice(e, i, item) {
+				this.bought[i].price = e.detail.value
+				this.$set(item, 'check', false);
+				for (let i in this.checkedArr) {
+					if (this.checkedArr[i].product_id == item.product_id) {
+						this.checkedArr.splice(i, 1)
+
+					}
+				}
+			},
+			incrementTotal(e, i, item) {
+				// console.log(e, i, item)
+				this.$set(item, 'check', false);
+				for (let i in this.checkedArr) {
+					if (this.checkedArr[i].product_id == item.product_id) {
+						this.checkedArr.splice(i, 1)
+					}
+				}
+
+
+			},
+			// picker修改事件
+			bindPickerChange: function(e, storage, num) {
+				this.bought[num].attrValue[this.index].sku = storage[e.detail.value].sku
+				this.bought[num].attrValue[this.index].stock = storage[e.detail.value].stock
+				this.bought[num].product_attr_unique = storage[e.detail.value].unique
+				this.pickerData = storage[this.index] // 这里就是选中的对象
+				if (this.bought[num].attrValue[this.index].stock == 0) {
+					this.$util.Tips({
+						title: '库存不足'
+					});
+				}
+			},
+
+			// 点击关闭按钮
+			close() {
+				this.$emit('close');
+			},
+			numberChange(data, i) {
+				this.peicenumber = data.number;
+				this.bought[i].number = data.number
+
+			},
+			setValue: function(event) {
+				this.$set(this.whereb, 'keyword', event.detail.value);
+				if (!event.detail.value) {
+					this.whereb.page = 1
+					this.loadedb = false
+					this.getBounht()
+				}
+
+			},
+			searchBut() {
+				this.bought = []
+				this.whereb.page = 1
+				this.loadedb = false
+				this.getBounht()
+			},
+			tabs(index) {
+				this.isActive = index
+				this.$set(this.whereb, 'keyword', '');
+
+
+			},
+			onTouchmove(e) {
+				if (this.loadendb) return;
+				if (this.loadingb) return;
+				const query = uni.createSelectorQuery().in(this);
+				query.select('#goods').boundingClientRect(data => {
+					if (data.bottom < 1500 && data.top < 0) {
+						this.getBounht();
+					}
+				}).exec();
+
+				// 模拟触底刷新
+			},
+
+
+			getBounht() {
+				var that = this;
+
+				// if (that.loadingb || that.loadedb) return;
+				// that.loadingb = true;
+
+				good(that.whereb).then(
+					res => {
+						that.loadingb = false;
+						that.loadedb = res.data.list.length < that.whereb.limit;
+						that.bought.push.apply(that.bought, res.data.list);
+						that.whereb.page = that.whereb.page + 1;
+						that.getInitchecked(that.bought);
+					},
+					error => {
+
+						console.log(error.msg)
+					}
+				);
+			},
+
+
+
+			/*获取初始化选中的数据*/
+			getInitchecked(arr) {
+				let that = this;
+				arr.forEach((item, index) => {
+					that.$set(item, 'check', false);
+					that.checkedArr.forEach((val, i) => {
+						if (item.product_id == val.product_id) {
+							that.$set(item, 'check', true);
+							that.$set(item, 'number', val.number);
+							that.$set(item, 'price', val.price);
+							that.peicenumber = val.number
+						}
+					})
+				})
+
+			},
+			/*已选中的商品打钩*/
+			getCheckedGoods() {
+				this.checked = []
+				this.checkedArr.forEach((item, index) => {
+					this.checkedArr.push(item)
+				})
+			},
+			/*点击选中与否*/
+			goodsCheck(item) {
+				this.$set(item, 'check', !item.check);
+				if (item.check) {
+					this.checkedArr.push(item)
+
+				} else {
+					this.checkedArr.splice(this.checkedArr.findIndex(itemn => ((itemn.product_id == item.product_id))), 1)
+				}
+			},
+
+			/*确定提交*/
+			submit() {
+				this.$emit('getProduct', this.checkedArr);
+
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.containers {
+		background: #ffffff;
+		border-radius: 16rpx 16rpx 0 0;
+		padding: 40rpx 0;
+		position: relative;
+
+		.header {
+			position: relative;
+			padding: 0 30rpx;
+
+			.title {
+				width: 100%;
+				text-align: center;
+
+				text {
+					position: relative;
+					margin: 0 50rpx;
+					color: #999999;
+					font-size: 30rpx;
+
+					&.on {
+						color: #333333;
+						font-weight: bold;
+						font-size: 34rpx;
+
+						&::after {
+							content: "";
+							display: inline-block;
+							width: 40rpx;
+							height: 5rpx;
+							background: var(--view-theme);
+							position: absolute;
+							bottom: -10rpx;
+							left: 10rpx;
+						}
+					}
+				}
+			}
+
+			.iconclose {
+				width: 44rpx;
+				height: 44rpx;
+				line-height: 44rpx;
+
+				border-radius: 50%;
+				text-align: center;
+
+				position: absolute;
+				top: -150rpx;
+				right: 30rpx;
+
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+
+
+			.sub_title {
+				color: #282828;
+				font-size: 26rpx;
+				margin-top: 30rpx;
+			}
+
+			.iconfont {
+				color: #8A8A8A;
+				font-size: 28rpx;
+				position: absolute;
+				top: 0;
+				right: 30rpx;
+			}
+		}
+
+		scroll-view {
+			height: 650rpx;
+		}
+
+		.main {
+			height: 650rpx;
+			margin: 40rpx 0 80rpx;
+			padding: 0 30rpx;
+		}
+	}
+
+	.picTxt {
+		width: 100%;
+		padding: 25rpx 0;
+		position: relative;
+		align-items: center;
+		display: flex;
+		justify-content: space-between;
+
+		border-top: 2rpx solid #E7E6E4;
+
+		.picTxt_one {
+			white-space: nowrap;
+			overflow: hidden;
+		}
+
+		.picTxt_one {
+			display: flex;
+			margin-top: 20rpx;
+
+
+			.slecte {
+				margin-right: 30rpx;
+				width: 280rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				text-align: center;
+				font-size: 28rpx;
+				font-family: PingFang SC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #959595;
+				background-color: #E7E6E4;
+				border-radius: 10rpx 10rpx 10rpx 10rpx;
+				white-space: nowrap;
+				overflow: hidden;
+
+			}
+		}
+
+
+
+		.checkbox {
+			margin-right: 30rpx;
+
+			.iconfont {
+				font-size: 38rpx;
+				color: #CCCCCC;
+			}
+
+			.icon-xuanzhong1 {
+				color: var(--view-theme);
+			}
+
+			.disabled {
+				pointer-events: none;
+				cursor: default;
+				opacity: 0.3;
+			}
+		}
+
+		.pictrue {
+			width: 160rpx;
+			height: 160rpx;
+
+			image {
+				width: 100%;
+				height: 100%;
+				border-radius: 8rpx;
+			}
+		}
+
+		.text {
+			width: 430rpx;
+			margin-left: 30rpx;
+			font-size: 28rpx;
+			color: #282828;
+			position: relative;
+			height: 160rpx;
+
+			.name {
+				color: #282828;
+				font-size: 28rpx;
+			}
+
+			.money {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				color: var(--view-priceColor);
+				font-size: 22rpx;
+				font-weight: bold;
+
+				text {
+					font-size: 26rpx;
+				}
+			}
+		}
+	}
+
+	.foot_bar {
+		width: 100%;
+		position: fixed;
+		// bottom: 54px;
+		left: 0;
+		padding: 20rpx 0;
+		z-index: 5;
+
+		.confirm_btn {
+			width: 710rpx;
+			height: 86rpx;
+			line-height: 86rpx;
+			color: #ffffff;
+			text-align: center;
+			font-size: 32rpx;
+			background-color: red;
+			border-radius: 43rpx;
+			margin: 0 auto;
+		}
+	}
+
+	.empty {
+		margin: 130rpx 0 150rpx;
+		text-align: center;
+
+		image,
+		uni-image {
+			display: inline-block;
+			width: 414rpx;
+			height: 305rpx;
+		}
+
+		text {
+			display: block;
+			color: #999999;
+			font-size: 26rpx;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/components/subtractive/subtractive.vue b/components/subtractive/subtractive.vue
new file mode 100644
index 0000000..e6c988d
--- /dev/null
+++ b/components/subtractive/subtractive.vue
@@ -0,0 +1,217 @@
+<template>
+	<view class="uni-numbox">
+		<!-- -部分 -->
+		<view class="uni-numbox-minus" @click="_calcValue('subtract')">
+			<text :class="minDisabled?'uni-numbox-disabled': ''">-</text>
+		</view>
+		<!-- 中间输入数值部分 -->
+		<input class="uni-numbox-value" type="number" :disabled="disabled" :value="inputValue" @blur="_onBlur">
+		<!-- + 部分 -->
+		<view class="uni-numbox-plus" @click="_calcValue('add')">
+			<text :class="maxDisabled?'uni-numbox-disabled': ''">+</text>
+		</view>
+	</view>
+</template>
+<script>
+	export default {
+		name: 'uni-number-box',
+		props: {
+			// isMax  是否有上限设置
+			isMax: {
+				type: Boolean,
+				default: false
+			},
+			// isMin  是否有下限设置
+			isMin: {
+				type: Boolean,
+				default: false
+			},
+			// index 唯一值，如果一个页面有多个数量增减组件时，起到唯一的作用
+			index: {
+				type: String,
+				default: 0
+			},
+			// value 是数值
+			value: {
+				type: Number,
+				default: 0
+			},
+			// min 最小值
+			min: {
+				type: Number,
+				default: -Infinity
+			},
+			// max 最大值
+			max: {
+				type: Number,
+				default: Infinity
+			},
+			// step  步长
+			step: {
+				type: Number,
+				default: 1
+			},
+			// disabled 是否禁用
+			disabled: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				inputValue: this.value,
+				minDisabled: false,
+				maxDisabled: false
+			}
+		},
+		created() {
+			this.maxDisabled = this.isMax;
+			this.minDisabled = this.isMin;
+		},
+		computed: {
+
+		},
+		watch: {
+			inputValue(number) {
+				const data = {
+					number: number,
+					index: this.index
+				}
+				this.$emit('eventChange', data);
+			}
+		},
+		methods: {
+			_calcValue(type) {
+				const scale = this._getDecimalScale();
+				let value = this.inputValue * scale;
+				let newValue = 0;
+				let step = this.step * scale;
+
+				if (type === 'subtract') {
+					newValue = value - step;
+					if (newValue <= this.min) {
+						this.minDisabled = true;
+					}
+					if (newValue < this.min) {
+						newValue = this.min
+						this.$util.Tips({
+							title: '达到最小值了',
+							icon: 'error'
+						})
+					}
+					if (newValue < this.max && this.maxDisabled === true) {
+						this.maxDisabled = false;
+					}
+				} else if (type === 'add') {
+					newValue = value + step;
+					if (newValue >= this.max) {
+						this.maxDisabled = true;
+					}
+					if (newValue > this.max) {
+						this.$util.Tips({
+							title: '达到最大值了',
+							icon: 'error'
+						})
+						newValue = this.max
+					}
+					if (newValue > this.min && this.minDisabled === true) {
+						this.minDisabled = false;
+					}
+				}
+				if (newValue === value) {
+					return;
+				}
+				this.inputValue = newValue / scale;
+				this.$emit('increment', this.inputValue)
+			},
+			_getDecimalScale() {
+				let scale = 1;
+				// 浮点型
+				if (~~this.step !== this.step) {
+					scale = Math.pow(10, (this.step + '').split('.')[1].length);
+				}
+				return scale;
+			},
+			_onBlur(event) {
+				let value = event.detail.value;
+				if (!value) {
+					this.inputValue = 0;
+					return
+				}
+				value = +value;
+				if (value > this.max) {
+					value = this.max;
+				} else if (value < this.min) {
+					value = this.min
+				}
+
+				this.inputValue = value
+			}
+		}
+	}
+</script>
+<style>
+	.uni-numbox {
+		/* position:absolute; */
+		/* left: 30upx;
+		bottom: 0; */
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		width: 200upx;
+		height: 50upx;
+		/* background:#f5f5f5; */
+	}
+
+	.uni-numbox-minus {
+		background: #EEEEEE !important;
+
+		color: #909399 !important;
+	}
+
+	.uni-numbox-minus,
+	.uni-numbox-plus {
+		margin: 0;
+		width: 53rpx;
+		height: 53rpx;
+		background-color: #F84221;
+		opacity: 1;
+		line-height: 53rpx;
+		text-align: center;
+		position: relative;
+		color: #fff;
+		font-size: 40upx;
+	}
+
+	.uni-numbox-minus .yticon,
+	.uni-numbox-plus .yticon {
+		font-size: 36upx;
+		color: #555;
+	}
+
+	.uni-numbox-minus {
+		/* 	border-right: none;
+		border-top-left-radius: 6upx;
+		border-bottom-left-radius: 6upx; */
+	}
+
+	.uni-numbox-plus {
+		/* border-left: none;
+		border-top-right-radius: 6upx;
+		border-bottom-right-radius: 6upx; */
+	}
+
+	.uni-numbox-value {
+		position: relative;
+		/* background-color: #f5f5f5; */
+		width: 90upx;
+		height: 50upx;
+		text-align: center;
+		padding: 0;
+		font-size: 30upx;
+	}
+
+	.uni-numbox-disabled.yticon {
+		color: #d6d6d6;
+	}
+</style>
\ No newline at end of file
diff --git a/components/uni-popup/live-uni-popup.vue b/components/uni-popup/live-uni-popup.vue
new file mode 100644
index 0000000..134c831
--- /dev/null
+++ b/components/uni-popup/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/uni-popup/uni-popup.vue b/components/uni-popup/uni-popup.vue
new file mode 100644
index 0000000..7408094
--- /dev/null
+++ b/components/uni-popup/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/components/verify/utils/ase.js b/components/verify/utils/ase.js
new file mode 100644
index 0000000..1858675
--- /dev/null
+++ b/components/verify/utils/ase.js
@@ -0,0 +1,12 @@
+// import CryptoJS from './crypto-js.js'
+/**
+ * @word 要加密的内容
+ * @keyWord String  服务器随机返回的关键字
+ *  */
+export function aesEncrypt(word,keyWord="XwKsGlMcdPMEhR1B"){
+  // var key = CryptoJS.enc.Utf8.parse(keyWord);
+  // var srcs = CryptoJS.enc.Utf8.parse(word);
+  // var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
+  // return encrypted.toString();
+  return word
+}
diff --git a/components/verify/verify.vue b/components/verify/verify.vue
new file mode 100644
index 0000000..656efe1
--- /dev/null
+++ b/components/verify/verify.vue
@@ -0,0 +1,515 @@
+<template>
+<view :class="mode=='pop'?'masks':''"  v-show="showBox">
+    <view :class="mode=='pop'?'verifybox':''" :style="{'max-width':parseInt(imgSize.width)+30+'px'}">
+        <view class="verifybox-top" v-if="mode=='pop'">
+            请完成安全验证
+            <text class="verifybox-close" @click="clickShow = false">
+                <text class="iconfont icon-close"></text>
+            </text>
+        </view>
+        <view class="verifybox-bottom" :style="{padding:mode=='pop'?'15px':'0'}">
+            <!-- 验证码容器 -->
+            <!-- 滑动 -->
+            <view v-if="componentType=='VerifySlide'">
+                <VerifySlide 
+				    @success="success"
+                    :captchaType="captchaType"
+                    :type="verifyType"
+                    :figure="figure"
+                    :arith="arith"
+                    :mode="mode"
+                    :vSpace="vSpace"
+                    :explain="explain"
+                    :imgSize="imgSize"
+                    :blockSize="blockSize"
+                    :barSize="barSize"
+					:defaultImg = "defaultImg"
+                    ref="instance"
+                ></VerifySlide>
+            </view>
+            <!-- 点选 -->
+            <view v-if="componentType=='VerifyPoints'">
+                <VerifyPoint 
+                    :captchaType="captchaType"
+                    :type="verifyType"
+                    :figure="figure"
+                    :arith="arith"
+                    :mode="mode"
+                    :vSpace="vSpace"
+                    :explain="explain"
+                    :imgSize="imgSize"
+                    :blockSize="blockSize"
+                    :barSize="barSize"
+					:defaultImg = "defaultImg"
+                    ref="instance"
+                ></VerifyPoint>
+            </view>
+        </view>
+    </view>
+</view>
+</template>
+<script>
+    /**
+     * Verify 验证码组件
+     * @description 分发验证码使用
+     * */
+    import VerifySlide from './verifySlider/verifySlider'
+    import VerifyPoint from "./verifyPoint/verifyPoint"
+
+    export default {
+        name: 'Vue2Verify',
+        props: {
+            captchaType:{
+                type:String,
+                required:true
+            },
+            figure: {
+                type: Number
+            },
+            arith: {
+                type: Number
+            },
+            mode: {
+                type: String,
+                default:'pop'
+            },
+            vSpace: {
+                type: Number,
+                default:5
+            },
+            explain: {
+                type: String,
+                default: '向右滑动完成验证'
+            },
+            imgSize: {
+                type: Object,
+                default() {
+                    return {
+                        width: '310px',
+                        height: '155px'
+                    }
+                }
+            },
+            blockSize: {
+                type: Object,
+                default() {
+                    return {
+                        width: '50px',
+                        height: '50px'
+                    }
+                }
+            },
+            barSize: {
+                type: Object
+            },
+        },
+        data() {
+            return {
+                // showBox:true,
+                clickShow:false,
+                // 内部类型
+                verifyType: undefined,
+                // 所用组件类型
+                componentType: undefined,
+				defaultImg: ''
+            }
+        },
+		mounted() {
+			this.uuid()
+			// #ifdef H5
+			document.addEventListener("touchmove", (e) => {
+				// e.preventDefalut()
+				e.stopPropagation = true
+			}, {
+				passive: false
+			});
+			var startX, startY;
+			document.addEventListener("touchstart", (e) => {
+				startX = e.targetTouches[0].pageX;
+				startY = e.targetTouches[0].pageY;
+			});		
+			document.addEventListener("touchmove", (e) => {
+				var moveX = e.targetTouches[0].pageX;
+				var moveY = e.targetTouches[0].pageY;
+				if (Math.abs(moveX - startX) > Math.abs(moveY - startY)) {
+					e.preventDefault();
+				}
+			}, {
+				passive: false,
+			});
+			// #endif
+		},
+    methods: {
+			// 生成 uuid
+			uuid() {
+				var s = [];
+				var hexDigits = "0123456789abcdef";
+				for (var i = 0; i < 36; i++) {
+						s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+				}
+				s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
+				s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
+				s[8] = s[13] = s[18] = s[23] = "-";	
+				var slider = 'slider'+ '-'+s.join("");
+				var point = 'point'+ '-'+s.join("");
+				// 判断下是否存在 slider
+				if(!uni.getStorageSync('slider')) {
+					uni.setStorageSync('slider', slider)
+				}
+				if(!uni.getStorageSync('point')) {
+					uni.setStorageSync("point",point);
+				}
+			},
+			success(e) {
+				this.$emit('success', e)
+			},
+			/**
+			 * refresh
+			 * @description 刷新
+			 * */
+			refresh() {
+					if (this.instance.refresh) {
+							this.instance.refresh()
+					}
+			},
+			show(){
+					if (this.mode=="pop") {
+							this.clickShow = true;
+					}
+			},
+			hide(){
+				if (this.mode=="pop") {
+				    this.clickShow = false;
+				}
+			}
+    },
+		computed: {
+				instance() {
+						return this.$refs.instance || {}
+				},
+				showBox(){
+						if (this.mode=='pop') {
+								return this.clickShow
+						}else{
+								return true;
+						}
+				}
+		},
+		watch: {
+				captchaType:{
+						immediate: true,
+						handler(captchaType) {
+								switch (captchaType.toString()) {
+										case 'blockPuzzle':
+												this.verifyType = '2'
+												this.componentType = 'VerifySlide'
+												break
+										case 'clickWord':
+												this.verifyType = ''
+												this.componentType = 'VerifyPoints'
+												break
+								}
+						}
+				},
+		},
+		components: {
+				VerifySlide,
+				VerifyPoint
+		},
+  }
+</script>
+<style lang="scss" scoped>
+    .verifybox{
+        position: relative;
+        box-sizing: border-box;
+        border-radius: 2px;
+        border: 1px solid #e4e7eb;
+        background-color: #fff;
+        box-shadow: 0 0 10px rgba(0,0,0,.3);
+        left: 50%;
+        top:50%;
+        transform: translate(-50%,-50%);
+    }
+    .verifybox-top{
+        padding: 0 15px;
+        height: 50px;
+        line-height: 50px;
+        text-align: left;
+        font-size: 16px;
+        color: #45494c;
+        border-bottom: 1px solid #e4e7eb;
+        box-sizing: border-box;
+    }
+    .verifybox-bottom{
+        /* padding: 15px; */
+        box-sizing: border-box;
+    }
+    .verifybox-close{
+        position: absolute;
+        top: 13px;
+        right: 9px;
+        width: 24px;
+        height: 24px;
+        text-align: center;
+        cursor: pointer;
+    }
+    .masks{
+        position: fixed;
+				/*#ifdef MP*/
+        bottom: 0;
+				/*#endif*/
+				/*#ifdef H5 || APP-PLUS*/
+				top: 0;
+				/*#endif*/
+        left:0;
+        z-index: 1001;
+        width: 100%;
+        height: 100vh;
+        background: rgba(0,0,0,.3);
+        /* display: none; */
+        transition: all .5s;
+    }
+    .verify-tips{
+        position: absolute;
+        left: 0px;
+        bottom:0px;
+        width: 100%;
+        height: 30px;
+        background-color:rgba(231, 27, 27,.5);
+        line-height:30px;
+        color: #fff;
+    }
+    .tips-enter,.tips-leave-to{
+        bottom: -30px;
+    }
+    .tips-enter-active,.tips-leave-active{
+        transition: bottom .5s;
+    }
+    /* ---------------------------- */
+    /*常规验证码*/
+    .verify-code {
+        font-size: 20px;
+        text-align: center;
+        cursor: pointer;
+        margin-bottom: 5px;
+        border: 1px solid #ddd;
+    }
+
+    .cerify-code-panel {
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .verify-code-area {
+        float: left;
+    }
+
+    .verify-input-area {
+        float: left;
+        width: 60%;
+        padding-right: 10px;
+
+    }
+
+    .verify-change-area {
+        line-height: 30px;
+        float: left;
+    }
+
+    .varify-input-code {
+        display: inline-block;
+        width: 100%;
+        height: 25px;
+    }
+
+    .verify-change-code {
+        color: #337AB7;
+        cursor: pointer;
+    }
+
+    .verify-btn {
+        width: 200px;
+        height: 30px;
+        background-color: #337AB7;
+        color: #FFFFFF;
+        border: none;
+        margin-top: 10px;
+    }
+    
+    
+    /*滑动验证码*/
+    .verify-bar-area {
+        position: relative;
+        background: #FFFFFF;
+        text-align: center;
+        -webkit-box-sizing: content-box;
+        -moz-box-sizing: content-box;
+        box-sizing: content-box;
+        border: 1px solid #ddd;
+        -webkit-border-radius: 4px;
+    }
+
+    .verify-bar-area .verify-move-block {
+        position: absolute;
+        top: 0px;
+        left: 0;
+        background: #fff;
+        cursor: pointer;
+        -webkit-box-sizing: content-box;
+        -moz-box-sizing: content-box;
+        box-sizing: content-box;
+        box-shadow: 0 0 2px #888888;
+        -webkit-border-radius: 1px;
+    }
+
+    .verify-bar-area .verify-move-block:hover {
+        background-color: #337ab7;
+        color: #FFFFFF;
+    }
+
+    .verify-bar-area .verify-left-bar {
+        position: absolute;
+        top: -1px;
+        left: -1px;
+        background: #f0fff0;
+        cursor: pointer;
+        -webkit-box-sizing: content-box;
+        -moz-box-sizing: content-box;
+        box-sizing: content-box;
+        border: 1px solid #ddd;
+    }
+
+    .verify-img-panel {
+        margin: 0;
+        -webkit-box-sizing: content-box;
+        -moz-box-sizing: content-box;
+        box-sizing: content-box;
+        border-top: 1px solid #ddd;
+        border-bottom: 1px solid #ddd;
+        border-radius: 3px;
+        position: relative;
+    }
+
+    .verify-img-panel .verify-refresh {
+        width: 25px;
+        height: 25px;
+        text-align: center;
+        padding: 5px;
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 2;
+    }
+
+    .verify-img-panel .icon-refresh {
+        font-size: 20px;
+        color: #fff;
+    }
+
+    .verify-img-panel .verify-gap {
+        background-color: #fff;
+        position: relative;
+        z-index: 2;
+        border: 1px solid #fff;
+    }
+
+    .verify-bar-area .verify-move-block .verify-sub-block {
+        position: absolute;
+        text-align: center;
+        z-index: 3;
+        /* border: 1px solid #fff; */
+    }
+
+    .verify-bar-area .verify-move-block .verify-icon {
+				width: 80rpx;
+				height: 80rpx;
+        font-size: 18px;
+    }
+
+    .verify-bar-area .verify-msg {
+        z-index: 3;
+    }
+
+    /*字体图标的css*/
+    /*@font-face {font-family: "iconfont";*/
+    /*src: url('../fonts/iconfont.eot?t=1508229193188'); !* IE9*!*/
+    /*src: url('../fonts/iconfont.eot?t=1508229193188#iefix') format('embedded-opentype'), !* IE6-IE8 *!*/
+    /*url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),*/
+    /*url('../fonts/iconfont.ttf?t=1508229193188') format('truetype'), !* chrome, firefox, opera, Safari, Android, iOS 4.2+*!*/
+    /*url('../fonts/iconfont.svg?t=1508229193188#iconfont') format('svg'); !* iOS 4.1- *!*/
+    /*}*/
+
+    .iconfont {
+        font-family: "iconfont" !important;
+        font-size: 16px;
+        font-style: normal;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    .icon-check:before {
+        content: " ";
+        display: block;
+        width: 16px;
+        height: 16px;
+        position: absolute;
+        margin: auto;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 9999;
+        background-image: url("data:image/png;base64,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");
+        background-size: contain;
+    }
+
+    .icon-close:before {
+        content: " ";
+        display: block;
+        width: 16px;
+        height: 16px;
+        position: absolute;
+        margin: auto;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 9999;
+        background-image: url("data:image/png;base64,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");
+        background-size: contain;
+    }
+
+    .icon-right:before {
+        content: " ";
+        display: block;
+        width: 16px;
+        height: 16px;
+        position: absolute;
+        margin: auto;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        background-size: cover;
+        z-index: 9999;
+        background-image: url("data:image/png;base64,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");
+        background-size: contain;
+    }
+
+    .icon-refresh:before {
+        content: " ";
+        display: block;
+        width: 16px;
+        height: 16px;
+        position: absolute;
+        margin: auto;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 9999;
+        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIEAYAAAD9yHLdAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAMQpJREFUeNrt3XlcVHX3B/Bz7rCISi6IC+ijkpZpIswMyBLgluVuKm4pqWmEuG/hUpr5uFYoiuaSFrklZvroo+jPFRURZgYVxZ1K3HIXUBSGe35/XC9PWpYL8J2B8/6H1wwGn3sb5sz93u/3fAEYY4wxxhhjjDHGGGOMMcYYY4wxxhhjjDHGGGOMMcYYY4wxxhhjjDHGGGOMMcYYY4wxxhhjjDHGGGOM/QUUHYCx59F0ddPVTVdXq5YXkxeTF1O3Ll7H63jdzY3eoDfojTp1UIta1FatCm/D2/C2kxPchttwu0oVyIRMyKxShVpSS2pZuTIkQzIklyuHv+Av+IudHURBFERJkvJbKlQo+IWhEAqhsgz2YA/2d+8WPP/oMXWkjtTx4UMMwAAMuH4d2kE7aHf9OoVQCIX8/jvuxJ2489o1WkJLaMmlS+AHfuB37hwmYAImnDtnNBlNRlNGhvJDiUSfX/ZygiiIgqhMmayJWROzJgYF4Xbcjtv9/akX9aJerq7QE3pCTwcHiIEYiMnMxNpYG2ufOYNTcApOOXDAcNZw1nA2KUn0cTwrLiBMKO+z3me9z9asKa+V18prtVr5tHxaPv3mmzgaR+Nod3cYCANhYMOGyr9+9VXla9myonMXFoqmaIp+8ADDMRzDz56FTtAJOh07RgmUQAkGA17Da3jNYMjrldcrr1dKyrGxx8YeG3vvnujc7I8QdbG6WF3skCFUjapRtYkTcSSOxJHVqr3Yz0tNVb6OH280Go1G43//K/oIn3rkogOwkgzR09bT1tPW3V3jrHHWOLdoIRtkg2zw84PTcBpO+/jgGByDY2rWFJ3U0tEiWkSL8vNxDa7BNSdOkAM5kMOuXTgYB+PgnTvz1uStyVuzbx8XmOKh0+q0Oq2tLW2hLbRl9WrsgB2wQ7duhf17aAWtoBWzZpncTe4m94gI0cf9JC4g7KU0oSbUhCpW1FTTVNNUa98eTGACU9u2uAf34J6WLWEuzIW5VauKzlni6UEP+txcZYju0CGoDtWh+pYt+QH5AfkB69cfxaN4FH/9VXTMkkJ3UXdRd3HBAuWKMTy8yH8hAQENH64MeUZFiT5+FRcQ9kwaN27cuHHjSpVsbW1tbW2DgxEREbt2Vb7bvLny1dZWdE721+gz+ow+S06W+kn9pH7r1+fdyruVd2vdOi4sz0f7rvZd7bs+Pvgv/Bf+KyEBjGAEIxb5+yjNp/k0PytLE6mJ1ES+9lpybHJscuzVq6LPBxcQ9hjlJqCNTbY+W5+tb98eFsEiWNS3LxyDY3CsXTvlsb296JzsJT2aHEBdqAt12bULMzADM5YsgQ/hQ/hw0yblk25enuiYlka7XLtcu3zTJozGaIzu2LG4fz85kzM5jxxpijPFmeLmzhV9PriAlHKefp5+nn4uLtgQG2LDQYOwDJbBMh99BIfgEBxycRGdjxUvOkSH6NDVq7gEl+CSFSvMx83Hzcejo49+c/Sbo99cuiQ6nyjKPY8qVchABjJcuYJe6IVeNjbFHqQNtIE2W7YYpxmnGad16CD6vEiiA7DipfwhNG6sS9Wl6lJ/+EF6KD2UHv76K6ZgCqZMmcKFo3RDX/RF3+rVYQWsgBXjx9uQDdlQero2XZuuTV+2zOui10Wvi6+9JjpncaMP6AP6ICBAWOFQc0RQBEXUqSP6fKj4CqSEKxizvY7X8fqkSaADHejati2usVtWwqhDX+2pPbXfsIFqU22qPW1aSl5KXkre0aOi4xUV3QPdA92Df/8b/MEf/CdMEJvmwgVlem/t2qLPC1+BlDAe8R7xHvENGypXGuvWFdzsAwCAdu24cLCXshgWw2JJUqetSv2l/lL/lBT19abfot+i3+LmJjpmYaMbdINu1K0rOgf4gi/4irsCehIXECvX5OMmHzf52NVVO087TzsvJkZzSnNKcyo1FRAQMDiYCwYrUurr69HrTa4iV5GrnDihu6O7o7sze7Y6e090zJeFC3ABLnjRhYGFiICALGe2IxcQK+OT4ZPhk+HgoNPpdDrdp5/agA3YwOnTGIMxGNO3r/oJUXROVjopK+rLlIGW0BJajh1rF2gXaBd4+rRut263bndIyKN/ZX0faHbADthRrpzoGCCDDDIXEPacPL/0/NLzy8DAXKdcp1ynlBTl2alT1Z5OovMx9pcSIRESnZ1hLIyFsd9/rxunG6cbt2+fOtQqOt4zQ0BAC3jj9gIvEHgT/0lcQCyUcqVRubJypfHdd9IZ6Yx0Zu9epWnf66+LzsfYC9kFu2BXQIDmjOaM5ozJpCMd6WjKFLU1iOh4Fo+vQNjfUWdN5Z7OPZ172mBQnv3gA76XwUoUdUGqHvSgnzwZpsJUmJqQoP9C/4X+C/6A9DTkTu7kzlcg7JHg4ODg4GCNRv0kpvwhHTiAn+An+IkFzPpgrDhMhskwWa+nS3SJLhmNWq1Wq9V+9JHoWJYGwzAMwzQa5ZH4e53CA5RW+vv6+/r7tWqlD0oflD5o9271k9jjLxDGShl1nxZERFy8WHtVe1V7deNGtWmn6HiWol5Uvah6UeKHsizmUqi00J3SndKd6tRJNskm2bR8OY7H8Ti+cmXRuUobSqIkSsrJUVYW37sHw2E4DH+Gwn0QDsLBihV5SLF4YDtsh+06dbLxt/G38U9OVu6VdOmi9OpS980oerSX9tJeRGyGzbCZ6LMCUPZh2YdlH6pDWQ8fisrBfwDFRNtH20fbZ8IELItlsey0afwG9ILCIAzCHj6kntSTep49C6thNaw+fRpDMARDTp/GbtgNu506BTNgBsy4cEFpQXHrltnb7G32vnXLYaLDRIeJt24l1kqslVgrJ+d5f/3jzSadneVj8jH5WNWqmmhNtCbaxYXqUT2q5+xMy2k5La9ZU9mBsHFj/Ba/xW8bNVKuNF9/HQxgAIOdnejTaXW8wAu87t3DbMzG7IEDDSsNKw0r164t6l+rzdJmabNMJqWAeHqKPg1mg9lgNlSqpHRTvnNHVA5+Aysij88qWbhQmQY4cKDoXJaODtABOpCeDtfgGlw7cADfw/fwvf37lfN34ICbm5ubm9vZs7GxsbGxsfn5ovM+L/V1kT83f27+3Pr1bZbYLLFZ4u5OJ+kknQwMpP20n/a3aMGz7Z4RAQF99ZVyRTJunPKkLBf2r9Fu0W7RbklJwck4GSd7eIg+bOW4nZ2V475xQ1QMHsIqZMoWra+8kt8zv2d+z9hY5dnWrUXnshjhEA7h2dlwAS7Aha1boTW0htYbN5pjzDHmmPj4ow5HHY46PL3rq9IDSPRBvLiCNumBEAiBaWnKs+rXtWuhLJSFsn/oknwOz+G5Fi0wHuMxvkUL6A29oXeHDkpBrVJF9PEIh4CAo0frknRJuqS6dW1r2NawrdGnz4teYVoLZYtjSVI2cBOXgwtIIVH/4M3VzdXN1bdsUXo7iL/UFev+faX99O7d0AJaQIvY2JwbOTdybmzYkDYlbUralOxsmAJTYIronJYnJSElISXh8mXl0cqV0AAaQIOVK9VZe+nn08+nn/f1LWhZQ0BAvXuX2sISBmEQ1qVLHuVRHu3Z4z7HfY77nI4dlS1+r1172R+P+ZiP+Tzk/CQuIC9JWejXoIHyyXrnTmgGzaCZq6voXMVN3fEOHdERHRcsKN+8fPPyzdet24f7cB8+eADTYBpME53S+j0+dHfggPpVmZUzblyF7yt8X+H7Nm0gEiIhMjQUVsJKWPnOO6XmnhsCAjZtalvHto5tnQMHlL/PNm2UK9fz50XHKyz2SfZJ9knip/GW/BdUEfFM8EzwTKhXT1otrZZW79tXavbReLT3tjLdctMmnIpTceqSJYb2hvaG9jt3io7HHlfwOh0qDZWGDh2q3IT+8MPS0gKHIimSIn//HbpBN+jWurXpmuma6dqxY8/7c3QjdSN1I48ehXiIh3h3d9HHJblJbpJbjRqit7blAvKcvDt4d/DuULeueb15vXn9vn3oh37oV6uW6FxFpWC6axZmYdaCBTZbbbbabP3qq8O9D/c+3Pv330XnY89H2RDKySn/Qv6F/AsffYRDcAgOGTWqpA99USIlUuLNm+iDPujTurVyRWJ65rsHllZAZHvZXrZ3dX18qLP48RDWM1IX/pkTzAnmhF27SmrhoGRKpmSzGebDfJi/Zk2+lC/lS599drTi0YpHK/76q+h87OUk10yumVzz5k3l0YwZDdc1XNdw3fz5DjkOOQ454eFUn+pT/YkTcSgOxaGOjqLzFhalcDg5KY9271b+ntu2NZQ1lDWUVffL+RvxEA/xljMEKLvL7rI7IiRAAvxz+iIjfAzN0qn7bdBb9Ba9tWdPiWsxogMd6IigA3SADuvWaS5rLmsuN2pkGm4abhoeEqLMM+fCUVKldU/rntY9O9v4gfED4wezZtEYGkNjGjSAYAiG4KVLCz5QlCgVKtBaWktrt29X7pE0b/6P/0kgBEIgkejkKvvR9qPtR4svaMIDWCp1Ixw7WztbO9uEBOUSv0ED0bkKjT/4g/+5c8rK6o8+Ui7p9+wRHYtZFrXtunRdui5dX7oUp+N0nO7nJzpXYVGHaKVvpW+lb7t2NXxk+Mjw0bZtT/47pdCo904aNxadW5l1V7u2Mi38wgVRMfgK5AnqSmPb8bbjbcevW1dSCof6SZKaUTNqNnu27VjbsbZj3d25cLC/cyTwSOCRwLQ0U1dTV1PXgAByJmdyHjlS+e79+6LzvSz0Rm/0dnAgIxnJuHGjsrPne++p31c6SAQEwAgYASMsYEfCR+Tecm+5N1+BWBztae1p7emoKOyNvbH30KGi8xQOkwnLYTksN3CgId4Qb4hXN6Ri7MUon8hffVV5tHSp8vUZhoIsXMGQ3VbYCluPH7eYledPUFqZ1K0reoiZC8gjavtotQuo6DwvTL2nYQADGL7+uryxvLG8MSJCWY9R0saymWVA1LvoXfQuI0bIF+WL8sXZs5UmlZazb0VJo3HRuGhc3NySNidtTtr8yy+icpT6ISx9qj5VnxoUpBSOBQtE53lRdJgO0+HMTPkr+Sv5q27dlLHRMWO4cLCiR2S4bLhsuBwZSV/T1/R1y5Z0iA7RIXHrE1jxKLUFRNlfoE4dpVvr+vXKs+L767+Y1FTNVc1VzVUvrxTHFMcUxw0bRCdipVPKmJQxKWPi45V7bTodTaAJNOEZpsmy55IXlBeUF1T4TSOfV6krIGovIRu9jd5G/8MPVruAahksg2U//qg88PFR5vefOSM6FmMA/+vl9SD/Qf6D/ObN6Uf6kX785hvRuUoKzWDNYM1g8QWk1I1Rnrc/b3/e/pNPlGaHb70lOs9z2wSbYFN0tLGmsaax5rBhypPiX0iM/RVlnUlurvIoLEz3ve573fe//gpREAVRM2eKzmet8lvlt8pvJX47g1JzBaIP1AfqAz09ldlIkyeLzvO8aAWtoBWzZimFY8gQ5VkuHMy6FCxYnEbTaFp4OIRCKITy6/h52bjauNq4ij9vJb6AKF1K7e3pHt2je99/by07wdEiWkSL8vPhM/gMPgsLM7mb3E3uERGiczFWGExtTG1MbRYuhMWwGBb37as8m5cnOpe1eOj90PuhNxeQIlehZ4WeFXqql8oWsIL0n6ifyE7BKTj1wQfGTsZOxk48dsxKJmUh6+rVFEIhFNKjR8EHJ/a3bNfYrrFdwwWkyHh+6fml55eBgbARNsJG9V6B5aOVtJJWDhtmCjGFmEJWrRKdh7HioPRe+/lnyIRMyBw9WnQeS2e7yXaT7SYuIIVOnWUl1ZfqS/WjopRLZPEbr/wT8iRP8pwyxRRvijfFR0eLzsOYCKZWplamVvPm0WbaTJvV6fXsSXmd8jrldRJ/pWbxb6zPKz09PT09/aOPYCpMhalNmojO848ezaoyLTMtMy37/HPRcRizBPI5+Zx8bvBg8AEf8Ll+XXQeS1PmtzK/lfmNr0AKjU+GT4ZPRuXKysYxX3whOs8/WgSLYNGGDY9Px2WMAahNHK9fV3b6DA8XncfSZEVkRWRFcAEpNHmYh3k4derjG8dYHppBM2jGmTOaSppKmkr9+yvPin8hMGaJlJY8sbE8pPW4SmMqjak0hoewXpq+j76Pvs+bb5ILuZBLaKjoPE8VDuEQnp0tl5HLyGXeey+pflL9pPqZmaJjMWYNzKvMq8yrwsOVfTBu3BCdR7RsXbYuWye+gFj9SnQ6SSfp5FdfWXr3TzKTmcwffqjuryA6D2N/5BXsFewVXL268qh6dfm8fF4+b2+PU3EqTnV0pMk0mSaXL6+8gf9Fz7gFsAAW2NjQEBpCQ/6wFe7H8DF8fOcOfoPf4DfPsKMfAgLev4+f4+f4+cOHT36belJP6rluHfwIP8KPgweLPm/F7lG3beMS4xLjEvHrZqy2nbtOq9PqtE2bKi+4xETReZ6G3qF36J3ISNN003TT9FGjROdhpZPSPLRiRRudjc5GFxKi/N107qxcGXt5QTREQ3T58qJzsn+gBz3oc3ONi42LjYvt7UXHsdohLNpKW2nr+PGiczzVRJgIE9PSMqtnVs+sbsE5WYmm3abdpt02eLDmoOag5uD580rhmDdP+W7z5lw4rExTaApN1d5i4lnskM/TFNzz+Iw+o886dhSd508erSSXt8vb5e0DB55bfG7xucV/vhRnrCjpZutm62ZHR8MkmASTSuFQT0mlAQ1oxA9dqazuCoReo9fotYgIMIIRjOL3BP6TztAZOkdFpSxOWZyy+NAh0XFY6aIM7Q4bVmrvEZRwVJfqUl3LuQKxmgKi36Lfot/i5kaTaBJN6tFDdJ4/GQtjYeyvv+bszdmbs/fTT0XHYaWLUjgqVFCGOHhBaollYUNYVlNA5GPyMfnYuHEWO9tqNsyG2aGhyv4H2dmi47DShcpTeSrfpw8kQRIkVawoOg8rIjLIIPMQ1jPzPut91vvsK6/gT/gT/qS2fbY0O3YoC5527BCdhJVO2AybYbOWLUXnYEWMgIC4gDwzcw9zD3OPnj2VR2XLis5T4LGNcHiWFRNMBzrQubmJjsGKFgZgAAbwENYzwxbYAluoLT8syFW4ClfXrFH2MzCZRMdhpRu1ptbU+g8L+FgJxlcg/8gj3iPeI75hQ9gDe2CPj4/oPAXCIAzCHj7UJGuSNcl8s5xZBpyEk3DS7duic7Ai1hyaQ3O+AvlHmhRNiibFAq88FsEiWLR8edLmpM1Jm3/5RXQcxgAAoA/0gT7nzomOwYrYHtgDe65eFR1DZXEFRJmOaGurbLBkQTfNH93zkDZJm6RNc+eKjsPYH+FwHI7DeRJHiXcQDsJBy+mlZ3EFRF4vr5fXv/sujsSROLJaNdF5CiyGxbB427bkmsk1k2ueOSM6DmN/ZH/C/oT9idhYZT+cmzdF52FFQ+or9ZX6xsaKzlGQR3SAPwXqJnWTullgi5JdsAt2qT2EGLMsB28evHnwZlYWtISW0HLyZNF5WFHYuDE5Njk2OfbIEdFJVBZWQBBhNIyG0W3aiE6iomk0jaadOGGsaKxorLhzp+g8jP0dU7wp3hQfHU0hFEIhP/wgOg97Sf7gD/7nzklukpvkFhYmOs6TLKaA6AP1gfpADw/4Gr6Gr11dRedRKbNboqOVR8+wnwFjFsA03DTcNLxfP+XRzJm0iBbRIvEbELFn1BJaQsv9+8255lxzbrNmypWH5dw8V1lMAVFaMLRtKzrG4/LylJWfljPmyNizk2VlndL48VKUFCVFeXjQJtpEm9asocN0mA7zjpjCPdogSpmeq+5r9P77xtnG2cbZzZod/eboN0e/uXRJdMynsZhuttqftD9pfzp4EKfjdJzu5yc6D0RCJETGxRkDjYHGQMsZUmOsMDRc13Bdw3V2duViy8WWi23Y0DzLPMs8q1YtTT9NP00/Z2c5W86Ws//ccw5H42gcXb48mMEM5r/YmTAKoiCqXDlaQStohZ3d8+bCnbgTd5Ypo3S1dnB40eOjZbSMlt27Bz2hJ/QshHUTs2E2zM7MxLfxbXz7+a/kcASOwBFEspPsJDtdvy6Nk8ZJ465exbbYFtsmJSmTc6xv8oPwAuKT4ZPhk1G5cu6V3Cu5V65dwzAMwzCNRnQumANzYM4HHxhbGFsYW8TEiI7DGGOWRnhXW/N483jz+Nat8SSexJPiCwdFUzRFP3hg42TjZOO0caPoPIwxZqmE3wMhLWlJazmtSjAcwzE8Li6pflL9pPo8RswYY08jvIDAG/AGvOHtLTqGSpm2+3//JzoHY4xZOmEFJIiCKIhsbJQuoh4eok+Eit6it+itPXtE52CMMUsn7B7I/e73u9/v/uabmI7pmP7isy0KzQgYASOuXUtxTHFMcTx1SnQcxhizdMKuQPL75PfJ7+PlJfoEqCiLsihr9+5Hj3jBIGOM/QNx90BOwAk4odOJPgEFJ2KptFRaunev6ByMMWYthBUQvIk38aZeL/oEqEgiiaTkZNE5GGPMWggrIDSLZtGs+vVFn4DH9zbnex+MMfasir2AqCvPsSk2xaavvCL6BMBxOA7H09OVnkH374uOwxhj1qLYC4j5ffP75vdr1xZ94AUOwkE4ePy46BiMMWZtir2AyF3lrnLXOnVEH7iKfMmXfE+cEJ2DMcasTfHfA2kEjaDRv/4l+sALTsCv0q/Sr6dPi87BGGPWptgLCLqjO7pb0BXISlpJKy1voxbGGLN0xX8F0gbaQBvLKSDSIGmQNOj6ddE5GGPM2hR/ASEgoBo1RB+4StnA6sYN0TkYY8zaFHsBoZk0k2ZWqiT6wFXZKdkp2SnXronOwRhj1qb4r0DKQBkoU6GC6ANX3L2b1j2te1r3QtjykjHGSpniLyB2YAd2llJAeOEgY4y9qOKfhbUcl+Nye3vRBw6+4Au+3HWXMcZeVLEVkODg4ODgYI0GjGAEI6LoA+cCwhhjL6fYCkhKQEpASoCNsA2sGGOMFa5iKyB21e2q21XnT/yMMVZSFFsBUWY75eWBDnSgs4BCcggOwSELGEpjjDErVcw30YnAG7zBW/y0WepDfahP5cqiczDGmLUq/mm8RjCCMSdH9IFjOIZjeJky/k7+Tv5Ojo6i8zDGmLUp/gISBEEQdOeO6ANXPajzoM6DOlWris7BGGPWpvgLyByYA3Nu3RJ94CpyJmdydnYWnYMxxqxN8ffC2k7bafvNm6IPvOAE+Ev+kj9fgTDG2PMq/pXoC3EhLrSc5oWyXtbL+po1RedgjDFrU/xDWJWhMlS+cEH0gauwMTbGxg0bis7BGGPWpvgLyApYASsyMkQfuIrKUlkq26iR6ByMMWZtir+AAACABV2BfIqf4qdcQBhj7HkVewGR58vz5fmnT4s+8AKJkAiJzs4e8R7xHvE8G4sxxp5VsReQepH1IutF/vILRVM0RT94IPoEFJyIddI6aV3jxqJzMMaYtdAU9y9MS0tLS0sjcnF0cXRx7N4dfoPf4Ldq1USfCGm7tF3afvbsZfNl82Xz/v2i8zDGmKUTdA8EAKpAFahiMok+ASoaQSNoRIsWonMwxpi1EFZA6Cf6iX46dEj0CSjI05k6U2c/P58MnwyfDAcH0XkYY8zSCdvgCQEBwXIKiNpcMdc31zfX19dXeXb3btG5GGPMUgm7AjGajCaj6cQJ5dHdu6JPRIEBMAAGNG8uOgZjjFk6cfdAAABAlpWvhw+LPhEFMiADMt55R3QMxhizdIILCAAYwAAGCxrKmopTcaqXl8cwj2Eew+rXF52HMcYslfgCchfuwt2DB0XHeJLGXeOuce/RQ3QOxhizVMILyN2YuzF3Y+Lj6TAdpsOZmaLzFFgIC2Hh+++LjsEYY5aq2BcSPunWtlvbbm3Lz3eRXCQXydMTzsAZOGMBvakQELBKlZpv1Xyr5lubNl1Ou5x2Oe3qVdGxGGPMUgi/AinQGlpD640bRcd4krxUXiov7d1bdA7GGLM0llNAhsAQGLJ1K+hBD/rcXNFxVHScjtPxDz90n+M+x31OuXKi8zDGmKUQPoSlunLlypUrVx4+dIl0iXSJ9PeH7bAdtterJzoXxmEcxjk4SD2lnlLPS5eurLqy6sqq5GTRuRhjRcfrotdFr4uvvVa9SvUq1av4+ro2c23m2qxBg2oPqz2s9tDRMcAnwCfA5/ff1d5+ovOKImwl+tPgcByOwzduJIkkkt59V3SeglzZmI3ZI0Yoj775RvmqrmNhjFmj4ODg4OBgjSb9fPr59PP9+9NMmkkzx46VO8md5E6vvaZ0zAAgICAAkEACCQDS09PT09Pv3tVO107XTl+7Vr4qX5WvfvXVkagjUUeizp4VfVzFBUUHeJIyVFS1qu0523O25zIylHUidnaic6kohEIopEsX03DTcNPwn38WnYcx9vx0Wp1Wp61ShSIogiLWr8dZOAtnBQW93E/Ny4NBMAgGzZgBS2AJLJk2Tem4kZcn+niLisUVEJUuRZeiS1m7FgbCQBhoOesxaBftol0HD5oqmiqaKr71lug8jLFnpwxNOTnJHeWOcscDB5TZlg0aFPovagNtoM2WLXer3q16t2q3bueGnRt2btjDh6KPv7BZzk30J3mAB3ioQ0WWA1tiS2zp76+7qLuou9i2reg8jLF/pg5VyWlympy2YUORFQ7VNtgG29q3f6XtK21faTt3rujjLyoWW0CMaEQj7tsHARAAASdPis7zJEqlVEqdPVt9YYrOwxh7uvT26e3T248ZA+NhPIwPDCyu34uzcTbODg319PP08/TT60Wfh8Jm8W98NSrWqFijoq0t3sf7eN+Cbqrvxt24u2rVW7du3bp169IlZRaZ0Sg6F2Psf7wWeC3wWtCokTIpZ80a5Z6qTfFNHroCV+AKIprRjGZJUt4nNm8WfV4Ki8VegajyLuVdyrv0/feUREmUlJMjOs+fzIW5MHfqVH8nfyd/J0dH0XEYYwBBFERBZGMj15HryHW++w4WwSJYZG8vNlXJu2dq8QUkNTU1NTX19m2IhEiIXLNGdJ4n4UgciSOrVXtw6cGlB5ciIkTnYYwBZK/OXp29etgwmAyTYbL4oSNKpmRKrl1bdI7CZvEFRCVfkC/IF2bOVP5HmM2i8/yJP/iD/9ix+kB9oD7Q01N0HMZKoybUhJpQnTqwH/bD/qlTRecpkAzJkIwWO+v1RVlNAVEX6OAMnIEzVq4Uneev2dqSjnSk++67husarmu4znLWrzBW8iHa7LfZb7N/0SLlDdtyWg/halyNqy9eFJ2jsFlNASmwATbAhmnTlAcWuEAnHuIh3t29TL0y9crU+/RT0XEYKw309fX19fXDw2EkjISRljPZpkAf6AN9jh0THaOwWV0BMRqNRqPx/HnqRb2o1w8/iM7zVB7gAR4REV51vep61fXyEh2HsZJI30ffR9/nzTflU/Ip+dTs2aLzPA2GYiiG7tghOkdhs7oCorLZZ7PPZp/lXomgF3qhl41N/on8E/knfvjB+6z3We+zr7wiOhdjJYHaHZvSKI3SYmPRG73R28FBdK4/CYMwCHv40DzPPM88b8MG0XEKm9UWkKTNSZuTNv/yC8RCLMSuWCE6z9NgAAZgwOuvmx3NjmbHmJhHz5a4m2mMFSebXja9bHotXVrkK8pfEt2je3Rv3bojgUcCjwRevy46T2Gz2gKiyvsp76e8nz79FIbBMBh2+7boPE+D7bAdtuvUSZukTdIm8b0Rxl6EvpK+kr7SuHHYCTthp169ROd5GlpEi2hRfj4NoAE0YMYM0XmKSon5JKzT6XQ6XViY8mjhQtF5nioUQiFUlukG3aAbnTqZJpgmmCZs2SI6FmOWTDtBO0E74Z13oDN0hs7//S+GYRiGWXALIQICWrZM6cY7aJDoOEWlxBQQhSRpN2k3aTclJuJUnIpTLf3m9d27+Aa+gW+89ZZhpWGlYeXx46ITMWZJ1FYksqPsKDvu3w9REAVRlSqJzvU0lEiJlHjzJjbFpti0QQOlgNy4ITpXUbH6IazHyTJ8Dp/D52Fh6iWk6ER/r0IFeofeoXd27dJ/of9C/8Xrr4tOxJglaPJxk4+bfOzqKq+QV8grtm619MJRYCtsha3jx5f0wqGy3EvAF3TlkRquNVxruDo74xk8g2e8vUXneqpESITEcuWoP/Wn/u3aVS1btWzVsuvX/2743fC7IStLdDzGipNPhk+GT0blyuAADuCwZ4+yolz81tb/hCbQBJqQkGB6z/Se6b2hQx89W+K3ui1xBUTlkumS6ZKZkAB+4Ad+ISFwES7CRcttdog7cSfurFRJ6i/1l/q/+67LWZezLmfXrVPK4f37ovMxVpSUHQIrVJCvydfka9u2QQzEQIzltwRSm7xiCIZgSLt2yt9ryZtt9TQlbAjrf5RLyLt35SA5SA4KCVFvXovO9Y/+Df+GfzdsqExP3L7dI94j3iPe2Vl0LMaKglo4oAW0gBZxcbAH9sAeHx/RuZ7ZQTgIBz/7TFngfOqU6DjFrcQWEFVKcEpwSvCuXeRDPuQzZ47oPM9Hq5UeSA+kBwcOeHfw7uDdoW5d0YkYKwwFhQMAALZvt7bCoW5t/er8V+e/Oj8yUnQeUUrYLKynU/cHyI7LjsuOi4+HSTAJJvn6is71rOgQHaJDV69KraRWUqu2bQ3xhnhDfEqK6FyMPQ9lun2NGsojdfq6Vis61zPzBm/wvnPHvNC80LzQ0/MoHsWj+OuvomOJUuKvQFT7cB/uQ7MZ8zEf8/v0ocN0mA5nZorO9azQF33Rt3p16kf9qF98vO6O7o7uzttvi87F2LPwzPLM8sx64w3lnuShQ8qzVlQ4HsEszMKssLDSXjhUJfYm+tNcXn159eXVt2/XqFejXo16GRl4GA/j4S5dROd6ZsmQDMl2dpAGaZDWo0eNcjXK1Sh3+/aV3678duW35GTR8Rj7Ix3pSEfNmuFaXItrd+yA9bAe1levLjrXi1m0yLjduN24fdYs0UksRakZwnoa5ZJaXbmurmS3VqtX53yS80nOJ6Ghad3Tuqd1z84WnYiVTrpVulW6VaNGKV2zZ81Sm4uKzvW81Om5D/If5D/Ib95c+bvKzRWdy1KUmiGspylvKG8obxg2DN6Bd+Cd7dtF53k5vXs72DjYONgcPlwwZMBYMVA2UCtfXpeiS9GlrF0LX8PX8PVXX1lr4QBf8AXfy5dxOk7H6d26ceH4a6W+gKj3RjT9Nf01/bt3p320j/ZZcUuRR9OApVgpVopNStJqtVqt9qOPlG9yF2BWuLTvat/Vvuvj44AO6IAmEwyEgTCwRw/RuV6Uuq4DEiABErp0UabnXrkiOpel4jeUJ6gtFGwCbAJsAg4fVj5JubqKzlU4DhzAztgZOw8caPjU8Knh09OnRSdi1qVgNmNMdkx2zOjRSouRL75QvmtrKzrfC3u0TkzuJfeSewUHpzimOKY4lrz9OwobF5CnUHcSlCvLleXKe/cqz5YtKzrXyyr4hPVoAZQ6jz02NjY2NtbSe4cxUTxDPUM9Q319sQN2wA4LF+JknIyTPTxE5yoseAWv4JVRowyXDZcNl0vvuo7nxQXkH+hO6U7pTnXqBO/D+/B+bKzyrBV/0noC7aW9tDclheIojuLGjlUXXorOxcTyuuh10euik1N+bn5ufu6sWTgTZ+LMAQPACEYwlqCh0P7QH/rPmGEcYhxiHDJhgug41qbkvBCKmH6Yfph+WNeudJAO0sE1a5RnS04hedyOHVgOy2G5iAhesFg6KLMRy5ZVNmYbOpRepVfp1XHjcDgOx+GVK4vOV9ioA3WgDgsWmKaYppimqM0P2fPiAvKclNlNXbpIzaRmUrO1a5VnS2AhUXuHLYbFsHjtWnm+PF+eP3lyil+KX4rfuXOi47GXUy+qXlS9KHv7ivMrzq84f9Ag+YR8Qj4xcaK6YFV0vqJCsRRLsd9+a3IzuZnc1I2eSn7X3KJS6mdhPa/Hb6699x6EQRiEPXwoOlehWwyLYbH06PXRu7d0XDouHT99Wrtau1q7+v/+zzPdM90zvUMH5fslaEijhFJ7T2l3andqdw4fXsGpglMFp/Pn6RV6hV6ZP7+kFw6IhViIXbJEKRzqrEQuHC+L//BfknLp37kz6EEP+h9/BAMYwGBnJzpXcaHP6XP6/MgRuA/34f68eZlXM69mXl2z5tywc8PODSuBhdVKKAWjaVNl5feAARAMwRDcp4/yXeufDPLMtsE22DZ3rrGqsaqx6qhRypNcOAoLF5BCohSSdu0gHMIhfO1aiIZoiC5fXnSuYjcMhsGw27fpOl2n6z//jANxIA5cu9ZtkNsgt0G7d/Nsr8Klv6+/r79fq5ZskA2yoUcPvIE38Eb//gXbApQ2j4ZeqQE1oAaffGIKNAWaAr/8UnSskooLSCHzCvYK9gr28MgfnD84f/DmzTgGx+CYmjVF5xKNIimSIn//Hd3QDd3WrwdXcAXX9etzYnNic2ITEnil79/TVtVW1VZ1d1dWRnfsCCfhJJzs3BmyIAuytNoSNzvqhdy/L++V98p7+/bldRzFo5S/4IqOp5+nn6efi4s0QZogTdi0CSbDZJis14vOZZnu36fRNJpGJyRIA6QB0oC9e+EW3IJbe/aUcyjnUM4hKUntGCA6aWFTF+Zl2mXaZdo1aiStllZLqwMDyZ/8yT8wEHfhLtwVGAhzYS7MrVpVdF5Lo25zoHld87rm9Y4dk39J/iX5F24qWly4gBQxdXokhVIohcbE4GJcjIu7dhWdy2p4gRd43btHs2gWzTpxQlnwdeKE0uTu5EnpXeld6d3jx/MG5Q3KG3TypNJm+7fflP+4+Me63ee4z3GfU66c3VG7o3ZH69bNn5o/NX9q3bo4GAfj4FdfhVbQClo1boxrcA2u8fBQJmE0agSLYBEssrcXfbqtS2oqEBBQ+/bKDqQXLohOVNpwASlWiLoFugW6Bf/+NxyDY3AsIoKHHgoXJVMyJZvNYAYzmG/cgFzIhdz/fcUojMKoa9cgBEIg5M6dZ/65QECg0WAwBmOwkxO0hJbQ0slJ+blVqkAe5EFelSqQCImQyFsQF5l20A7a/fyzpq+mr6Zvv35J9ZPqJ9W3nn19Shp+4xKkYEOoltASWn7/vfKsulMbYwwAgKIpmqIfPIBsyIbsiAhTK1MrU6t580TnYgouIIJ5xHvEe8Q7O2t2aHZodixfrkw7bN9edC7GRKJpNI2mnTiBE3EiTuzVSxmiSk0VnYs9jguIRUFU2q8PGoSIiKg2dStF8/ZZ6aQDHeiIIAIiIGLpUltbW1tb2xEjEmsl1kqslZMjOh77a1xALJQ6bRPSIR3SV63CIAzCoDffFJ2LsULlB37g99tvShv1jz9WWuXExYmOxZ4NtzKxUKZrpmuma8eOYSAGYqBWq8xCGjGCDtNhOsw3DZk1y8tTvkZF5QTkBOQEvPkmFw7rxFcgVkZdX4I9sAf2mDkTT+AJPNGnD8/mYpZvz578yPzI/MghQ44EHgk8EpiWJjoRezn8hmPl9Kn6VH1qUBD1o37Ub/585dnGjUXnYqXcoz3FoQt0gS7jxxtbGFsYW8TEiI7FChcPYVk5Q2NDY0PjffuUhQo6nTrUBT7gAz7Xr4vOx0oHdUU4jIJRMGr0aDgEh+BQ/fpcOEo2vgIpodQV0TaeNp42ngMHKiu4J0zglhisUIyAETDi2jWQQQb566+VvdHnzzcajUaj8f590fFY8eACUkp4n/U+6332lVfMn5g/MX8SGoou6IIuI0YonxRdXETnYxZuFIyCUZcugR3Ygd2sWeW7le9WvtvSpUqPsgcPRMdjYvAQVimhtnwwbTBtMG2YMycnMCcwJ7BuXWXr2g8/LNjXgzEAUDok7N+PNbAG1ggJuXvz7s27N1991RhsDDYGz5/PhYMB8BUIe4JnqGeoZ6ivLzbEhtgwLAyaQlNoGhyM4RiO4WXKiM7HChfNo3k079YtfA1fw9diYmQH2UF2WLJEaYd+8qTofMyycQFhf6sJNaEmVLGiTZxNnE1c166URVmU1bcv3sE7eCcg4PGtb5lly8tT2ubv26c0m/zuO8e+jn0d+/70E19RsBfBBYS9EHUnPPov/Zf+27mzsg6lc2eaTtNpemAgeqEXetnYiM5ZOt29C8tgGSyLi4McyIGcTZtyQ3NDc0Pj4lJTU1NTU2/fFp2QlQxcQFih8snwyfDJqFw51y3XLdft7bexMTbGxq1awTgYB+NatYI5MAfm1KkjOqfVerRlK1SBKlDl1Ck6Rsfo2O7dOAJH4Ij//CdnR86OnB379vEOj6w4cAFhxUq/Rb9Fv8XNTR4gD5AH+PmhCU1o8vGBTtAJOvn6Kv9KXQhpays6b7FT95RHQsLERGgADaBBYiJshI2w8fBhjMM4jEtMVLrT3r0rOi4r3biAMIui0+q0Oq2tLV2ki3TxjTfgS/gSvmzcGDMxEzMbNYIgCIKgWrXgB/gBfqhdW5k95uqKq3AVrnJ1tZid/fSgB31urrID4W+/QTWoBtXOnwc3cAO38+dhH+yDfenpShfa8+el8lJ5qfzJk8k1k2sm1zx7Vvkhxb+jImPPgwsIK1G8gr2CvYKrVzdfMl8yX6pZU1ouLZeWu7pCb+gNve3sKIIiKKJcOZgJM2GmnZ2UJWVJWXZ2NIkm0aRy5ZQFcYjkS77kW768ci8nK0uZrXT7Ni7ABbggKwuGwlAYmpmpdJHNytL8R/MfzX+ysiAO4iDuxo26H9T9oO4Hly/HxsbGxsbm54s+L4wxxhhjjDHGGGOMMcYYY4wxxhhjjDHGGGOMMcYYY4wxxhhjjDHGGGOMMcYYY4wxxhhjjDHGGGOMMcYYKzb/D4DEm9oGCaFQAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTEyLTE1VDE1OjU3OjI3KzA4OjAwohG+LwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0xMi0xNVQxNTo1NzoyNyswODowMNNMBpMAAABPdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL2hvbWUvYWRtaW4vaWNvbi1mb250L3RtcC9pY29uX2NrMWJ6YTB6ajlqamRjeHIvcmVmcmVzaC5zdmejF0ikAAAAAElFTkSuQmCC");
+        background-size: contain;
+    }
+</style>
diff --git a/components/verify/verifyPoint/verifyPoint.vue b/components/verify/verifyPoint/verifyPoint.vue
new file mode 100644
index 0000000..7acb248
--- /dev/null
+++ b/components/verify/verifyPoint/verifyPoint.vue
@@ -0,0 +1,544 @@
+<template>
+	<view style="position: relative">
+		<view class="verify-image-out" v-show="showImage">
+			<view class="verify-image-panel" :style="{'width': imgSize.width,
+                                                   'height': imgSize.height,
+                                                   'margin-bottom': vSpace + 'px'}">
+				<view class="verify-refresh" style="z-index:3" @click="refresh" v-show="showRefresh">
+					<text class="iconfont icon-refresh"></text>
+				</view>
+				<image :src="pointBackImgBase?('data:image/png;base64,'+pointBackImgBase):defaultImg" id="image"
+					ref="canvas" style="width:100%;height:100%;display:block"
+					@click=" bindingClick? canvasClick($event): undefined"></image>
+				<view v-for="(tempPoint, index) in tempPoints" :key="index" class="point-area" :style="{
+                        'background-color':'#1abd6c',
+                        color:'#fff',
+                        'z-index':9999,
+                        width:'20px',
+                        height:'20px',
+                        'text-align':'center',
+                        'line-height':'20px',
+                        'border-radius': '50%',
+                        position:'absolute',
+                        top:parseInt(tempPoint.y-10) + 'px',
+                        left:parseInt(tempPoint.x-10) + 'px'
+                     }">
+					{{index + 1}}
+				</view>
+			</view>
+		</view>
+		<!-- 'height': this.barSize.height, -->
+		<view class="verify-bar-area" :style="{'width': imgSize.width,
+                      'color': barAreaColor,
+                      'border-color': barAreaBorderColor,
+                      'line-height':'40px'}">
+			<text class="verify-msg">{{text}}</text>
+		</view>
+	</view>
+</template>
+<script type="text/babel">
+	/**
+     * VerifyPoints
+     * @description 点选
+     * */
+    import {aesEncrypt} from "./../utils/ase.js"
+	import {getAjcaptcha,ajcaptchaCheck} from '@/api/api.js';
+	
+    export default {
+        name: 'VerifyPoints',
+        props: {
+            //弹出式pop，固定fixed
+            mode: {
+                type: String,
+                default: 'fixed'
+            },
+            captchaType:{
+                type:String,
+            },
+            //间隔
+            vSpace: {
+                type: Number,
+                default: 5
+            },
+            imgSize: {
+                type: Object,
+                default() {
+                    return {
+                        width: '310px',
+                        height: '155px'
+                    }
+                }
+            },
+            barSize: {
+                type: Object,
+                default() {
+                    return {
+                        width: '310px',
+                        height: '40px'
+                    }
+                }
+            },
+			defaultImg: {
+				type: String,
+				default: ''
+			}
+        },
+        data() {
+            return {
+                secretKey:'',        //后端返回的加密秘钥 字段
+                checkNum:3,                 //
+                fontPos: [],                // 选中的坐标信息
+                checkPosArr: [],            //用户点击的坐标
+                num: 1,                     //点击的记数
+                pointBackImgBase:'',        //后端获取到的背景图片
+                poinTextList:[],            //后端返回的点击字体顺序
+                backToken:'',               //后端返回的token值
+                imgRand: 0,                 //随机的背景图片
+                setSize: {
+                    imgHeight: 0,
+                    imgWidth: 0,
+                    barHeight: 0,
+                    barWidth: 0
+                },
+                showImage: true,
+                tempPoints: [],
+                text: '',
+                barAreaColor: '#fff',
+                barAreaBorderColor: "#fff",
+                showRefresh: true,
+                bindingClick: true,
+                imgLeft:'' ,
+                imgTop:'',
+            }
+        },
+        methods: {
+            init() {
+                //加载页面
+                this.fontPos.splice(0, this.fontPos.length)
+                this.checkPosArr.splice(0, this.checkPosArr.length)
+                this.num = 1
+                this.$nextTick(() => {
+                    this.refresh();
+                    this.$parent.$emit('ready', this)
+                })
+            },
+            canvasClick(e) {
+                const query = uni.createSelectorQuery().in(this);
+                query.select('#image').boundingClientRect(data => {
+                    this.imgLeft =Math.ceil(data.left)
+                    this.imgTop =Math.ceil(data.top) 
+                    this.checkPosArr.push(this.getMousePos(this.$refs.canvas, e));
+                    if (this.num == this.checkNum) {
+                        this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e));
+                        //按比例转换坐标值
+                        this.checkPosArr = this.pointTransfrom(this.checkPosArr,this.imgSize);
+                        //等创建坐标执行完
+                        setTimeout(() => {
+                            //发送后端请求
+                            var captchaVerification =this.secretKey? aesEncrypt(this.backToken+'---'+JSON.stringify(this.checkPosArr),this.secretKey):this.backToken+'---'+JSON.stringify(this.checkPosArr)
+                            let data = {
+                                captchaType:this.captchaType,
+                                "pointJson":this.secretKey? aesEncrypt(JSON.stringify(this.checkPosArr),this.secretKey):JSON.stringify(this.checkPosArr),
+                                "token":this.backToken
+                            }
+                            ajcaptchaCheck(data).then(result => {
+                                let res = result.data
+                                this.barAreaColor = '#4cae4c'
+								this.barAreaBorderColor = '#5cb85c'
+                                this.text = '验证成功'
+                                this.bindingClick = false
+								setTimeout(()=>{
+									if (this.mode=='pop') {
+										this.$parent.clickShow = false;
+									}
+									this.refresh();
+								},1500)
+                                this.$parent.$emit('success', {captchaVerification})
+                            }).catch(res=>{
+								this.$parent.$emit('error', this)
+								this.barAreaColor = '#d9534f'
+								this.barAreaBorderColor = '#d9534f'
+								this.text = '验证失败'
+								setTimeout(() => {
+									this.refresh();
+								}, 700);
+							})    
+                        }, 400);
+                    }
+                    if (this.num < this.checkNum) {
+                        this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e));
+                    }
+                }).exec();
+            },
+            //获取坐标
+            getMousePos: function (obj, e) {
+                let position = {
+                    x:Math.ceil(e.detail.x)-this.imgLeft,
+                    y:Math.ceil(e.detail.y)-this.imgTop,
+                }
+                return position
+            },
+            //创建坐标点
+            createPoint: function (pos) {
+                this.tempPoints.push(Object.assign({}, pos))
+                return ++this.num;
+            },
+            refresh: function () {
+                this.tempPoints.splice(0, this.tempPoints.length)
+                this.barAreaColor = '#000'
+                this.barAreaBorderColor = '#ddd'
+                this.bindingClick = true
+
+                this.fontPos.splice(0, this.fontPos.length)
+                this.checkPosArr.splice(0, this.checkPosArr.length)
+                this.num = 1
+
+                this.getPictrue();
+
+                // this.text = '验证失败'
+                this.showRefresh = true
+            },
+            // 请求背景图片和验证图片
+            getPictrue(){
+                let data = {
+                    captchaType:this.captchaType,
+					clientUid: uni.getStorageSync('point'),
+					ts: Date.now(), // 现在的时间戳
+                }
+                getAjcaptcha(data).then((result) => {
+                    let res = result.data
+                    this.pointBackImgBase = res.originalImageBase64
+                    this.backToken = res.token
+                    this.secretKey = res.secretKey
+                    this.poinTextList = res.wordList
+                    this.text = '请依次点击【' + this.poinTextList.join(",") + '】'
+                    }).catch(()=>{
+						this.pointBackImgBase = null
+					})
+            },
+            //坐标转换函数
+            pointTransfrom(pointArr,imgSize){
+                var newPointArr = pointArr.map(p=>{
+                    let x = Math.round(310 * p.x/parseInt(imgSize.width)) 
+                    let y =Math.round(155 * p.y/parseInt(imgSize.height)) 
+                    return {x,y}
+                })
+                // console.log(newPointArr,"newPointArr");
+                return newPointArr
+            },
+        },
+        watch: {
+            // type变化则全面刷新
+            type: {
+                immediate: true,
+                handler() {
+                    this.init()
+                }
+            }
+        },
+		mounted() {
+			// console.log(this.defaultImg)
+		}
+    }
+</script>
+
+<style scoped>
+	.verifybox {
+		position: relative;
+		box-sizing: border-box;
+		border-radius: 2px;
+		border: 1px solid #e4e7eb;
+		background-color: #fff;
+		box-shadow: 0 0 10px rgba(0, 0, 0, .3);
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	.verifybox-top {
+		padding: 0 15px;
+		height: 50px;
+		line-height: 50px;
+		text-align: left;
+		font-size: 16px;
+		color: #45494c;
+		border-bottom: 1px solid #e4e7eb;
+		box-sizing: border-box;
+	}
+
+	.verifybox-bottom {
+		/* padding: 15px; */
+		box-sizing: border-box;
+	}
+
+	.verifybox-close {
+		position: absolute;
+		top: 13px;
+		right: 9px;
+		width: 24px;
+		height: 24px;
+		text-align: center;
+		cursor: pointer;
+	}
+
+	.mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 1001;
+		width: 100%;
+		height: 100vh;
+		background: rgba(0, 0, 0, .3);
+		/* display: none; */
+		transition: all .5s;
+	}
+
+	.verify-tips {
+		position: absolute;
+		left: 0px;
+		bottom: 0px;
+		width: 100%;
+		height: 30px;
+		background-color: rgb(231, 27, 27, .5);
+		line-height: 30px;
+		color: #fff;
+	}
+
+	.tips-enter,
+	.tips-leave-to {
+		bottom: -30px;
+	}
+
+	.tips-enter-active,
+	.tips-leave-active {
+		transition: bottom .5s;
+	}
+
+	/* ---------------------------- */
+	/*常规验证码*/
+	.verify-code {
+		font-size: 20px;
+		text-align: center;
+		cursor: pointer;
+		margin-bottom: 5px;
+		border: 1px solid #ddd;
+	}
+
+	.cerify-code-panel {
+		height: 100%;
+		overflow: hidden;
+	}
+
+	.verify-code-area {
+		float: left;
+	}
+
+	.verify-input-area {
+		float: left;
+		width: 60%;
+		padding-right: 10px;
+
+	}
+
+	.verify-change-area {
+		line-height: 30px;
+		float: left;
+	}
+
+	.varify-input-code {
+		display: inline-block;
+		width: 100%;
+		height: 25px;
+	}
+
+	.verify-change-code {
+		color: #337AB7;
+		cursor: pointer;
+	}
+
+	.verify-btn {
+		width: 200px;
+		height: 30px;
+		background-color: #337AB7;
+		color: #FFFFFF;
+		border: none;
+		margin-top: 10px;
+	}
+
+
+	/*滑动验证码*/
+	.verify-bar-area {
+		position: relative;
+		background: #FFFFFF;
+		text-align: center;
+		-webkit-box-sizing: content-box;
+		-moz-box-sizing: content-box;
+		box-sizing: content-box;
+		border: 1px solid #ddd;
+		-webkit-border-radius: 4px;
+	}
+
+	.verify-bar-area .verify-move-block {
+		position: absolute;
+		top: 0px;
+		left: 0;
+		background: #fff;
+		cursor: pointer;
+		-webkit-box-sizing: content-box;
+		-moz-box-sizing: content-box;
+		box-sizing: content-box;
+		box-shadow: 0 0 2px #888888;
+		-webkit-border-radius: 1px;
+	}
+
+	.verify-bar-area .verify-move-block:hover {
+		background-color: #337ab7;
+		color: #FFFFFF;
+	}
+
+	.verify-bar-area .verify-left-bar {
+		position: absolute;
+		top: -1px;
+		left: -1px;
+		background: #f0fff0;
+		cursor: pointer;
+		-webkit-box-sizing: content-box;
+		-moz-box-sizing: content-box;
+		box-sizing: content-box;
+		border: 1px solid #ddd;
+	}
+
+	.verify-image-panel {
+		margin: 0;
+		-webkit-box-sizing: content-box;
+		-moz-box-sizing: content-box;
+		box-sizing: content-box;
+		border-top: 1px solid #ddd;
+		border-bottom: 1px solid #ddd;
+		border-radius: 3px;
+		position: relative;
+	}
+
+	.verify-image-panel .verify-refresh {
+		width: 25px;
+		height: 25px;
+		text-align: center;
+		padding: 5px;
+		cursor: pointer;
+		position: absolute;
+		top: 0;
+		right: 0;
+		z-index: 2;
+	}
+
+	.verify-image-panel .icon-refresh {
+		font-size: 20px;
+		color: #fff;
+	}
+
+	.verify-image-panel .verify-gap {
+		background-color: #fff;
+		position: relative;
+		z-index: 2;
+		border: 1px solid #fff;
+	}
+
+	.verify-bar-area .verify-move-block .verify-sub-block {
+		position: absolute;
+		text-align: center;
+		z-index: 3;
+		/* border: 1px solid #fff; */
+	}
+
+	.verify-bar-area .verify-move-block .verify-icon {
+		width: 80rpx;
+		height: 80rpx;
+		font-size: 18px;
+	}
+
+	.verify-bar-area .verify-msg {
+		z-index: 3;
+	}
+
+	/*字体图标的css*/
+	/*@font-face {font-family: "iconfont";*/
+	/*src: url('../fonts/iconfont.eot?t=1508229193188'); !* IE9*!*/
+	/*src: url('../fonts/iconfont.eot?t=1508229193188#iefix') format('embedded-opentype'), !* IE6-IE8 *!*/
+	/*url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),*/
+	/*url('../fonts/iconfont.ttf?t=1508229193188') format('truetype'), !* chrome, firefox, opera, Safari, Android, iOS 4.2+*!*/
+	/*url('../fonts/iconfont.svg?t=1508229193188#iconfont') format('svg'); !* iOS 4.1- *!*/
+	/*}*/
+
+	.iconfont {
+		font-family: "iconfont" !important;
+		font-size: 16px;
+		font-style: normal;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+
+	.icon-check:before {
+		content: " ";
+		display: block;
+		width: 16px;
+		height: 16px;
+		position: absolute;
+		margin: auto;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		z-index: 9999;
+		background-image: url("@/static/images/arrow-good.png");
+		background-size: contain;
+	}
+
+	.icon-close:before {
+		content: " ";
+		display: block;
+		width: 16px;
+		height: 16px;
+		position: absolute;
+		margin: auto;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		z-index: 9999;
+		background-image: url("@/static/images/arrow-close.png");
+		background-size: contain;
+	}
+
+	.icon-right:before {
+		content: " ";
+		display: block;
+		width: 16px;
+		height: 16px;
+		position: absolute;
+		margin: auto;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		background-size: cover;
+		z-index: 9999;
+		background-image: url("@/static/images/arrow-right.png");
+		background-size: contain;
+	}
+
+	.icon-refresh:before {
+		content: " ";
+		display: block;
+		width: 16px;
+		height: 16px;
+		position: absolute;
+		margin: auto;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		z-index: 9999;
+		background-image: url("@/static/images/refresh.png");
+		background-size: contain;
+	}
+</style>
diff --git a/components/verify/verifySlider/verifySlider.vue b/components/verify/verifySlider/verifySlider.vue
new file mode 100644
index 0000000..288723c
--- /dev/null
+++ b/components/verify/verifySlider/verifySlider.vue
@@ -0,0 +1,648 @@
+<template>
+	<view style="position: relative;">
+		<view v-if="type === '2'" class="verify-img-out" :style="{height: (parseInt(imgSize.height) + vSpace) + 'px'}">
+			<view class="verify-img-panel" :style="{width: imgSize.width,
+                                                   height: imgSize.height,}">
+
+				<image :src="backImgBase?('data:image/png;base64,'+backImgBase):defaultImg" alt=""
+					style="width:100%;height:100%;display:block"></image>
+				<view class="verify-refresh" @click="refresh" v-show="showRefresh">
+					<text class="iconfont icon-refresh"></text>
+				</view>
+				<transition name="tips">
+					<text class="verify-tips" v-if="tipWords" :class="passFalg ? 'suc-bg':'err-bg'">{{tipWords}}</text>
+				</transition>
+			</view>
+		</view>
+
+		<!-- 公共部分 -->
+		<view class="verify-bar-area" :style="{width: imgSize.width,
+                                              height: '40px',
+                                              'line-height':'40px'}">
+			<text class="verify-msg" v-text="text"></text>
+			<view class="verify-left-bar"
+				:style="{width: leftBarWidth?leftBarWidth:'40px', height: '40px', 'border-color': leftBarBorderColor, transaction: transitionWidth}">
+				<text class="verify-msg" v-text="finishText"></text>
+				<view class="verify-move-block" @touchstart="start" @touchend="end" @touchmove="move"
+					:style="{width:'40px', height: '40px', 'background-color': moveBlockBackgroundColor, left: moveBlockLeft, transition: transitionLeft}">
+					<text :class="['verify-icon iconfont', iconClass]" :style="{color: iconColor}"></text>
+					<view v-if="type === '2'" class="verify-sub-block" :style="{'width':Math.floor(parseInt(imgSize.width)*47/310)+ 'px' ,
+                                  'height': imgSize.height,
+                                  'top':'-' + (parseInt(imgSize.height) + vSpace) + 'px',
+                                  }">
+						<image :src="'data:image/png;base64,'+blockBackImgBase" alt=""
+							style="width:100%;height:100%;display:block"></image>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+	/**
+	 * VerifySlide
+	 * @description 滑块
+	 * */
+	import {
+		aesEncrypt
+	} from "./../utils/ase.js"
+	import {
+		getAjcaptcha,
+		ajcaptchaCheck
+	} from '@/api/api.js';
+
+	export default {
+		name: 'VerifySlide',
+		props: {
+			captchaType: {
+				type: String,
+			},
+			type: {
+				type: String,
+				default: '1'
+			},
+			//弹出式pop，固定fixed
+			mode: {
+				type: String,
+				default: 'fixed'
+			},
+			vSpace: {
+				type: Number,
+				default: 5
+			},
+			explain: {
+				type: String,
+				default: '向右滑动完成验证'
+			},
+			imgSize: {
+				type: Object,
+				default () {
+					return {
+						width: '310px',
+						height: '155px'
+					}
+				}
+			},
+			blockSize: {
+				type: Object,
+				default () {
+					return {
+						width: '50px',
+						height: '50px'
+					}
+				}
+			},
+			barSize: {
+				type: Object,
+				default () {
+					return {
+						width: '100%',
+						height: '40px'
+					}
+				}
+			},
+			defaultImg: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				secretKey: '', //后端返回的加密秘钥 字段
+				passFalg: false, //请求通过与否
+				backImgBase: '', //验证码背景图片
+				blockBackImgBase: '', //验证滑块的背景图片
+				backToken: "", //后端返回的唯一token值
+				startMoveTime: "", //移动开始的时间
+				endMovetime: '', //移动结束的时间
+				tipsBackColor: '', //提示词的北京颜色
+				tipWords: '',
+				text: '',
+				finishText: '',
+				setSize: {
+					imgHeight: 0,
+					imgWidth: 0,
+					barHeight: 0,
+					barWidth: 0
+				},
+				top: 0,
+				left: 0,
+				moveBlockLeft: undefined,
+				leftBarWidth: undefined,
+				// 移动中样式
+				moveBlockBackgroundColor: undefined,
+				leftBarBorderColor: '#ddd',
+				iconColor: undefined,
+				iconClass: 'icon-right',
+				status: false, //鼠标状态
+				isEnd: false, //是够验证完成
+				showRefresh: true,
+				transitionLeft: '',
+				transitionWidth: ''
+			}
+		},
+		methods: {
+			init() {
+				this.text = this.explain
+				this.getPictrue();
+				this.$nextTick(() => {
+					this.$parent.$emit('ready', this)
+				})
+			},
+
+			//鼠标按下
+			start: function(e) {
+				this.startMoveTime = new Date().getTime(); //开始滑动的时间
+				if (this.isEnd == false) {
+					this.text = ''
+					this.moveBlockBackgroundColor = '#337ab7'
+					this.leftBarBorderColor = '#337AB7'
+					this.iconColor = '#fff'
+					e.stopPropagation();
+					this.status = true;
+				}
+			},
+			//鼠标移动
+			move: function(e) {
+				var query = uni.createSelectorQuery().in(this);
+				this.barArea = query.select('.verify-bar-area')
+				var bar_area_left, barArea_offsetWidth;
+				this.barArea.boundingClientRect(data => {
+					bar_area_left = Math.ceil(data.left)
+					barArea_offsetWidth = Math.ceil(data.width)
+
+					if (this.status && this.isEnd == false) {
+						if (!e.touches) { //兼容移动端
+							var x = Math.ceil(e.clientX);
+						} else { //兼容PC端
+							var x = Math.ceil(e.touches[0].pageX);
+						}
+						// var bar_area_left = this.getLeft(this.barArea);
+
+						var move_block_left = x - bar_area_left //小方块相对于父元素的left值
+						if (this.type !== '1') { //图片滑动
+							if (move_block_left >= barArea_offsetWidth - parseInt(parseInt(this.blockSize
+									.width) / 2) - 2) {
+								move_block_left = barArea_offsetWidth - parseInt(parseInt(this.blockSize
+									.width) / 2) - 2;
+							}
+						}
+
+						if (move_block_left <= 0) {
+							move_block_left = parseInt(parseInt(this.blockSize.width) / 2);
+						}
+
+						//拖动后小方块的left值
+						this.moveBlockLeft = (move_block_left - parseInt(parseInt(this.blockSize.width) / 2)) +
+							"px"
+						this.leftBarWidth = (move_block_left - parseInt(parseInt(this.blockSize.width) / 2)) +
+							"px"
+
+					}
+				}).exec();
+			},
+
+			//鼠标松开
+			end: function() {
+				this.endMovetime = new Date().getTime();
+				var _this = this;
+				//                判断是否重合
+				if (this.status && this.isEnd == false) {
+					if (this.type !== '1') { //图片滑动
+						var moveLeftDistance = parseInt((this.moveBlockLeft || '').replace('px', ''));
+
+						moveLeftDistance = moveLeftDistance * 310 / parseInt(this.imgSize.width)
+
+						var captchaVerification = this.secretKey ? aesEncrypt(this.backToken + '---' + JSON.stringify({
+							x: moveLeftDistance,
+							y: 5.0
+						}), this.secretKey) : this.backToken + '---' + JSON.stringify({
+							x: moveLeftDistance,
+							y: 5.0
+						})
+						let data = {
+							captchaType: this.captchaType,
+							"pointJson": this.secretKey ? aesEncrypt(JSON.stringify({
+								x: moveLeftDistance,
+								y: 5.0
+							}), this.secretKey) : JSON.stringify({
+								x: moveLeftDistance,
+								y: 5.0
+							}),
+							"token": this.backToken
+						}
+						ajcaptchaCheck(data).then((result) => {
+							let res = result.data
+							this.moveBlockBackgroundColor = '#5cb85c'
+							this.leftBarBorderColor = '#5cb85c'
+							this.iconColor = '#fff'
+							this.iconClass = 'icon-check'
+							this.showRefresh = true
+							this.isEnd = true;
+							setTimeout(() => {
+								if (this.mode == 'pop') {
+									this.$parent.clickShow = false;
+								}
+								this.refresh();
+							}, 1500)
+							this.passFalg = true
+							this.tipWords =
+								`${((this.endMovetime-this.startMoveTime)/1000).toFixed(2)}s验证成功`
+							setTimeout(() => {
+								this.tipWords = ""
+								this.$emit('success', {
+									captchaVerification
+								})
+							}, 1000)
+						}).catch(res => {
+							this.moveBlockBackgroundColor = '#d9534f'
+							this.leftBarBorderColor = '#d9534f'
+							this.iconColor = '#fff'
+							this.iconClass = 'icon-close'
+							this.passFalg = false
+							setTimeout(() => {
+								this.refresh();
+							}, 1000);
+							this.$parent.$emit('error', this)
+							this.tipWords = "验证失败"
+							setTimeout(() => {
+								this.tipWords = ""
+							}, 1000)
+						})
+					}
+					this.status = false;
+				}
+			},
+			refresh: function() {
+				this.showRefresh = true
+				this.finishText = ''
+				this.transitionLeft = 'left .3s'
+				this.moveBlockLeft = 0
+				this.leftBarWidth = false
+				this.transitionWidth = 'width .3s'
+				this.leftBarBorderColor = '#ddd'
+				this.moveBlockBackgroundColor = '#fff'
+				this.iconColor = '#000'
+				this.iconClass = 'icon-right'
+				this.getPictrue()
+				this.isEnd = false
+				setTimeout(() => {
+					this.transitionWidth = ''
+					this.transitionLeft = ''
+					this.text = this.explain
+				}, 300)
+			},
+
+			//获取left值
+			getLeft: function(node) {
+				let leftValue = 0;
+				while (node) {
+					leftValue += node.offsetLeft;
+					node = node.offsetParent;
+				}
+				let finalvalue = leftValue;
+				return finalvalue;
+			},
+
+			// 请求背景图片和验证图片
+			getPictrue() {
+				let data = {
+					captchaType: this.captchaType,
+					clientUid: uni.getStorageSync('slider'),
+					ts: Date.now(), // 现在的时间戳
+				}
+				getAjcaptcha(data).then((result) => {
+					let res = result.data
+					this.backImgBase = res.originalImageBase64
+					this.blockBackImgBase = res.jigsawImageBase64
+					this.backToken = res.token
+					this.secretKey = res.secretKey
+				}).catch(() => {
+					this.backImgBase = null
+					this.blockBackImgBase = null
+				})
+			},
+		},
+		watch: {
+			// type变化则全面刷新
+			type: {
+				immediate: true,
+				handler() {
+					this.init()
+				}
+			}
+		},
+		mounted() {},
+	}
+</script>
+<style scoped>
+	.verifybox {
+		position: relative;
+		box-sizing: border-box;
+		border-radius: 2px;
+		border: 1px solid #e4e7eb;
+		background-color: #fff;
+		box-shadow: 0 0 10px rgba(0, 0, 0, .3);
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	.verifybox-top {
+		padding: 0 15px;
+		height: 50px;
+		line-height: 50px;
+		text-align: left;
+		font-size: 16px;
+		color: #45494c;
+		border-bottom: 1px solid #e4e7eb;
+		box-sizing: border-box;
+	}
+
+	.verifybox-bottom {
+		/* padding: 15px; */
+		box-sizing: border-box;
+	}
+
+	.verifybox-close {
+		position: absolute;
+		top: 13px;
+		right: 9px;
+		width: 24px;
+		height: 24px;
+		text-align: center;
+		cursor: pointer;
+	}
+
+	.mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 1001;
+		width: 100%;
+		height: 100vh;
+		background: rgba(0, 0, 0, .3);
+		/* display: none; */
+		transition: all .5s;
+	}
+
+	.verify-tips {
+		position: absolute;
+		left: 0px;
+		bottom: 0px;
+		width: 100%;
+		height: 30px;
+		background-color: rgb(231, 27, 27, .5);
+		line-height: 30px;
+		color: #fff;
+	}
+
+	.suc-bg {
+		background-color: rgba(92, 184, 92, .5);
+		filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C);
+	}
+
+	.err-bg {
+		background-color: rgba(217, 83, 79, .5);
+		filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fD9534F, endcolorstr=#7fD9534F);
+	}
+
+
+	.tips-enter,
+	.tips-leave-to {
+		bottom: -30px;
+	}
+
+	.tips-enter-active,
+	.tips-leave-active {
+		transition: bottom .5s;
+	}
+
+	/* ---------------------------- */
+	/*常规验证码*/
+	.verify-code {
+		font-size: 20px;
+		text-align: center;
+		cursor: pointer;
+		margin-bottom: 5px;
+		border: 1px solid #ddd;
+	}
+
+	.cerify-code-panel {
+		height: 100%;
+		overflow: hidden;
+	}
+
+	.verify-code-area {
+		float: left;
+	}
+
+	.verify-input-area {
+		float: left;
+		width: 60%;
+		padding-right: 10px;
+
+	}
+
+	.verify-change-area {
+		line-height: 30px;
+		float: left;
+	}
+
+	.varify-input-code {
+		display: inline-block;
+		width: 100%;
+		height: 25px;
+	}
+
+	.verify-change-code {
+		color: #337AB7;
+		cursor: pointer;
+	}
+
+	.verify-btn {
+		width: 200px;
+		height: 30px;
+		background-color: #337AB7;
+		color: #FFFFFF;
+		border: none;
+		margin-top: 10px;
+	}
+
+
+	/*滑动验证码*/
+	.verify-bar-area {
+		position: relative;
+		background: #FFFFFF;
+		text-align: center;
+		-webkit-box-sizing: content-box;
+		-moz-box-sizing: content-box;
+		box-sizing: content-box;
+		border: 1px solid #ddd;
+		-webkit-border-radius: 4px;
+	}
+
+	.verify-bar-area .verify-move-block {
+		position: absolute;
+		top: 0px;
+		left: 0;
+		background: #fff;
+		cursor: pointer;
+		-webkit-box-sizing: content-box;
+		-moz-box-sizing: content-box;
+		box-sizing: content-box;
+		box-shadow: 0 0 2px #888888;
+		-webkit-border-radius: 1px;
+	}
+
+	.verify-bar-area .verify-move-block:hover {
+		background-color: #337ab7;
+		color: #FFFFFF;
+	}
+
+	.verify-bar-area .verify-left-bar {
+		position: absolute;
+		top: -1px;
+		left: -1px;
+		background: #f0fff0;
+		cursor: pointer;
+		-webkit-box-sizing: content-box;
+		-moz-box-sizing: content-box;
+		box-sizing: content-box;
+		border: 1px solid #ddd;
+	}
+
+	.verify-img-panel {
+		margin: 0;
+		-webkit-box-sizing: content-box;
+		-moz-box-sizing: content-box;
+		box-sizing: content-box;
+		border-top: 1px solid #ddd;
+		border-bottom: 1px solid #ddd;
+		border-radius: 3px;
+		position: relative;
+	}
+
+	.verify-img-panel .verify-refresh {
+		width: 25px;
+		height: 25px;
+		text-align: center;
+		padding: 5px;
+		cursor: pointer;
+		position: absolute;
+		top: 0;
+		right: 0;
+		z-index: 2;
+	}
+
+	.verify-img-panel .icon-refresh {
+		font-size: 20px;
+		color: #fff;
+	}
+
+	.verify-img-panel .verify-gap {
+		background-color: #fff;
+		position: relative;
+		z-index: 2;
+		border: 1px solid #fff;
+	}
+
+	.verify-bar-area .verify-move-block .verify-sub-block {
+		position: absolute;
+		text-align: center;
+		z-index: 3;
+		/* border: 1px solid #fff; */
+	}
+
+	.verify-bar-area .verify-move-block .verify-icon {
+		width: 80rpx;
+		height: 80rpx;
+		font-size: 18px;
+	}
+
+	.verify-bar-area .verify-msg {
+		z-index: 3;
+	}
+
+	/*字体图标的css*/
+	/*@font-face {font-family: "iconfont";*/
+	/*src: url('../fonts/iconfont.eot?t=1508229193188'); !* IE9*!*/
+	/*src: url('../fonts/iconfont.eot?t=1508229193188#iefix') format('embedded-opentype'), !* IE6-IE8 *!*/
+	/*url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),*/
+	/*url('../fonts/iconfont.ttf?t=1508229193188') format('truetype'), !* chrome, firefox, opera, Safari, Android, iOS 4.2+*!*/
+	/*url('../fonts/iconfont.svg?t=1508229193188#iconfont') format('svg'); !* iOS 4.1- *!*/
+	/*}*/
+
+	.iconfont {
+		font-family: "iconfont" !important;
+		font-size: 16px;
+		font-style: normal;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+
+	.icon-check:before {
+		content: " ";
+		display: block;
+		width: 16px;
+		height: 16px;
+		position: absolute;
+		margin: auto;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		z-index: 9999;
+		background-image: url("@/static/images/arrow-good.png");
+		background-size: contain;
+	}
+
+	.icon-close:before {
+		content: " ";
+		display: block;
+		width: 16px;
+		height: 16px;
+		position: absolute;
+		margin: auto;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		z-index: 9999;
+		background-image: url("@/static/images/arrow-close.png");
+		background-size: contain;
+	}
+
+	.icon-right:before {
+		content: " ";
+		display: block;
+		width: 16px;
+		height: 16px;
+		position: absolute;
+		margin: auto;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		background-size: cover;
+		z-index: 9999;
+		background-image: url("@/static/images/arrow-right.png");
+		background-size: contain;
+	}
+
+	.icon-refresh:before {
+		content: " ";
+		display: block;
+		width: 16px;
+		height: 16px;
+		position: absolute;
+		margin: auto;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		z-index: 9999;
+		background-image: url("@/static/images/refresh.png");
+		background-size: contain;
+	}
+</style>
diff --git a/config/app.js b/config/app.js
new file mode 100644
index 0000000..c457b1d
--- /dev/null
+++ b/config/app.js
@@ -0,0 +1,73 @@
+// #ifdef H5
+let VUE_APP_WS_URL = `ws://${location.hostname}?type=user`
+// #endif
+
+let openPlantGrass = '-openPlantGrass-'
+let httpApi
+
+// 在打包之前请检查当前环境是否正确
+const env = 'dev'; // 开发
+// const env = 'prod'; // 生产
+// const env = 'prew'; // 预上线
+
+switch (env) {
+	case 'prod':
+		httpApi = 'https://shop.lihaink.cn' // 生产
+		httpApione = 'http://ceshi-zhibo.lihaink.cn'
+
+		break;
+	case 'prew':
+		httpApi = 'https://test.shop.lihaink.cn' //预发布环境
+		httpApione = 'http://ceshi-zhibo.lihaink.cn'
+		break;
+	default:
+		httpApi = "https://crmeb-test.shop.lihaink.cn" // 测试
+		httpApione = 'https://ceshi-zhibo.lihaink.cn'
+}
+
+
+
+
+// 聊天接口修改此字符 小程序聊天要求wss 例如：wss://mer.crmeb.net
+// let wsApi = 'ws://192.168.3.20:8324'
+let wsApi = 'wss://ceshi-zhibo.lihaink.cn/chat_room'
+// console.log(httpApione,'11111111111')
+
+
+module.exports = {
+	// 请求域名 格式： https://您的域名
+	// #ifdef MP || APP-PLUS
+	// HTTP_REQUEST_URL: httpApi,
+	HTTP_REQUEST_URL: httpApi,
+    HTTP_REQUEST_URL_ONE: httpApione,
+
+	VUE_APP_WS_URL: wsApi,
+	// #endif
+
+
+	// #ifdef H5
+	HTTP_REQUEST_URL: httpApi,
+	HTTP_REQUEST_URL_ONE: httpApione,
+	//H5接口是浏览器地址
+	// 聊天长连接地址
+	VUE_APP_WS_URL:  VUE_APP_WS_URL,
+	// #endif
+	openPlantGrass: openPlantGrass,
+	HEADER: {
+		'content-type': 'application/json',
+		
+		//#ifdef H5
+		// 'Form-type': navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1 ? 'wechat' : 'h5',
+		//#endif
+		//#ifdef MP
+		'Form-type': 'routine',
+		//#endif
+		//#ifdef APP-PLUS
+		'Form-type': 'app',
+		//#endif
+	},
+	// 回话密钥名称 请勿修改此配置
+	TOKENNAME: 'X-Token',
+	// 缓存时间 0 永久
+	EXPIRE: 0,
+};
\ No newline at end of file
diff --git a/config/cache.js b/config/cache.js
new file mode 100644
index 0000000..b414d1e
--- /dev/null
+++ b/config/cache.js
@@ -0,0 +1,43 @@
+// +----------------------------------------------------------------------
+// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
+// +----------------------------------------------------------------------
+// | Author: CRMEB Team <admin@crmeb.com>
+// +----------------------------------------------------------------------
+module.exports = {
+	//token
+	LOGIN_STATUS: 'LOGIN_STATUS_TOKEN',
+	// uid
+	UID:'UID',
+	//�û�
+	USER_INFO: 'USER_INFO',
+	//token�����¼�
+	EXPIRES_TIME: 'EXPIRES_TIME',
+	//�Ƿ���Ȩ
+	WX_AUTH: 'WX_AUTH',
+	//���ں���Ȩcode
+	STATE_KEY: 'wx_authorize_state',
+	//�û�����
+	LOGINTYPE: 'loginType',
+	//���ں���ת����
+	BACK_URL: 'login_back_url',
+	// ����code
+	STATE_R_KEY: 'roution_authorize_state',
+	//��ȨlogoС����
+	LOGO_URL: 'LOGO_URL',
+	//模板缓存
+	SUBSCRIBE_MESSAGE: 'SUBSCRIBE_MESSAGE',
+
+	TIPS_KEY: 'TIPS_KEY',
+
+	SPREAD: 'spread',
+	//缓存经度
+	CACHE_LONGITUDE: 'LONGITUDE',
+	//缓存纬度
+	CACHE_LATITUDE: 'LATITUDE',
+	//缓存地址信息
+	ADRESS_LOCATION:'ADRESS_LOCATION'
+}
diff --git a/mixins/SendVerifyCode.js b/mixins/SendVerifyCode.js
new file mode 100644
index 0000000..ee99bb7
--- /dev/null
+++ b/mixins/SendVerifyCode.js
@@ -0,0 +1,36 @@
+// +----------------------------------------------------------------------
+// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
+// +----------------------------------------------------------------------
+// | Author: CRMEB Team <admin@crmeb.com>
+// +----------------------------------------------------------------------
+export default {
+  data() {
+    return {
+      disabled: false,
+      text: "获取验证码"
+    };
+  },
+  methods: {
+    sendCode() {
+      if (this.disabled) return;
+      this.disabled = true;
+      let n = 60;
+      this.text = "剩余 " + n + "s";
+      const run = setInterval(() => {
+        n = n - 1;
+        if (n < 0) {
+          clearInterval(run);
+        }
+        this.text = "剩余 " + n + "s";
+        if (this.text < "剩余 " + 0 + "s") {
+          this.disabled = false;
+          this.text = "重新获取";
+        }
+      }, 1000);
+    }
+  }
+};
\ No newline at end of file
diff --git a/mixins/history.js b/mixins/history.js
new file mode 100644
index 0000000..9ce4991
--- /dev/null
+++ b/mixins/history.js
@@ -0,0 +1,25 @@
+// +----------------------------------------------------------------------
+// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
+// +----------------------------------------------------------------------
+// | Author: CRMEB Team <admin@crmeb.com>
+// +----------------------------------------------------------------------
+import { history } from '@/api/public.js'
+export default {
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    getHistory() {
+			// console.log(this.$util.getNowUrl(),'page')
+      history({
+				page:this.$util.getNowUrl()
+			}).then(res=>{})
+    },
+  }
+};
\ No newline at end of file
diff --git a/pages/live/anchor.nvue b/pages/live/anchor.nvue
new file mode 100644
index 0000000..dffdf3a
--- /dev/null
+++ b/pages/live/anchor.nvue
@@ -0,0 +1,84 @@
+<template>
+	<view>
+		<live-pusher id='livePusher' ref="livePusher" class="livePusher" :url="url" mode="SD" :muted="true"
+			:enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2" aspect="9:16" @statechange="statechange"
+			@netstatus="netstatus" @error="error"
+			:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;z-inde:-1;'">
+		</live-pusher>
+		<sd-float-page :room='room' @switchCamera='switchCamera' :msgList='msgList'
+			:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;position: absolute;z-index:999999;' "></sd-float-page>
+	</view>
+</template>
+
+<script>
+	import sdFloatPage from '@/components/sd-live-page/livepage.nvue';
+	
+
+	export default {
+		components: {
+			sdFloatPage
+		},
+		data() {
+			return {
+				url: '',
+				windowHeight: 0,
+				windowWidth: 0,
+				room: {},
+				pusherContext: null,
+				userName:this.userName,
+				inputModel:'',
+				msgList:[]
+			};
+		},
+		onReady() {
+			// this.context = uni.createLivePusherContext('livePusher', this);
+			// this.context.switchCamera() // 摄像头切换（切换为后置）
+			// this.context.startPreview() // 摄像头预览 （不加会黑屏）
+			this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
+			this.windowHeight = uni.getSystemInfoSync().screenHeight; //获取屏幕高度
+			// 监听窗口大小的变化
+			uni.onWindowResize((res) => {
+				this.windowHeight = res.size.windowHeight;
+			})
+
+		},
+		onLoad(options) {
+		
+			this.room = JSON.parse(decodeURIComponent(options.data));
+			this.url = this.room.push_url
+		},
+		mounted() {
+			this.pusherContext = uni.createLivePusherContext('livePusher', this);
+			// console.log('创建 pusherContext：', this.pusherContext);
+			
+			//开始推流
+			this.pusherContext.start(function(e) {
+				console.log('推流情况')
+				// console.log(e)
+			});
+		
+		},
+		methods: {
+		
+			statechange(e) {
+				// console.log("statechange:" + JSON.stringify(e));
+			},
+			//切换摄像头
+			switchCamera: function() {
+				this.pusherContext.switchCamera({
+					success: (a) => {
+						console.log("livePusher.switchCamera:" + JSON.stringify(a));
+					}
+				});
+			},
+			
+			
+			netstatus(e) {
+				// console.log("netstatus:" + JSON.stringify(e));
+			},
+			error(e) {
+				// console.log("error:" + JSON.stringify(e));
+			},
+		}
+	};
+</script>
\ No newline at end of file
diff --git a/pages/live/histroyroom.nvue b/pages/live/histroyroom.nvue
new file mode 100644
index 0000000..3772946
--- /dev/null
+++ b/pages/live/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/api.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/live/spectator.nvue b/pages/live/spectator.nvue
new file mode 100644
index 0000000..c570569
--- /dev/null
+++ b/pages/live/spectator.nvue
@@ -0,0 +1,358 @@
+<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';
+
+	import json from '../../static/js/json';
+	export default {
+		components: {
+			sdFloatPage
+		},
+		data() {
+			return {
+				imgHost: '',
+				//下面打🌟号的是必须要的基础字段
+				//下面打💗号的是拥有滑动条的必须字段
+				dataList: [], //用于数据循环的列表🌟💗
+				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']
+				}
+				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/pages/login/login.vue b/pages/login/login.vue
new file mode 100644
index 0000000..6049177
--- /dev/null
+++ b/pages/login/login.vue
@@ -0,0 +1,1123 @@
+<template>
+	<div
+		style="--view-theme: #E93323;--view-assist:#FF7612;--view-priceColor:#E93323;--view-bgColor:rgba(255, 118, 18,.1);--view-minorColor:rgba(233, 51, 35,.1);--view-bntColor11:#FDA923;--view-bntColor12:#FD6523;--view-bntColor21:#F11B09;--view-bntColor22:#F67A38;">
+		<div class="register absolute" v-if="!auth_token">
+			<div class="login">
+				<div class="shading">
+					<div class="pictrue acea-row row-center-wrapper" style="background-color: transparent !important;">
+						<image src="@/static/images/logo1.png" />
+					</div>
+				</div>
+				<div class="whiteBg" v-if="formItem === 1">
+					<div class="title acea-row row-center-wrapper">
+						<div class="item" :class="current === index ? 'on' : ''" v-for="(item, index) in navList"
+							@click="navTap(index)" :key="index">
+							{{ item }}
+						</div>
+					</div>
+					<div class="list" :hidden="current !== 1">
+						<form @submit.prevent="submit">
+							<div class="item">
+								<div class="acea-row row-middle">
+									<image src="/static/images/phone_1.png"></image>
+									<input type="text" placeholder="输入账号" placeholder-class="placeholder"
+										v-model="account" required />
+								</div>
+							</div>
+							<div class="item">
+								<div class="acea-row row-middle">
+									<image src="/static/images/code_2.png"></image>
+									<input type="password" placeholder="填写登录密码" placeholder-class="placeholder"
+										v-model="password" required />
+								</div>
+							</div>
+						</form>
+						<div class="tip">
+							<span @click="formItem = 2" class="font-color-red">立即注册</span>
+							<navigator class="forgetPwd" hover-class="none" url="/pages/users/retrievePassword/index">
+								忘记密码
+							</navigator>
+						</div>
+
+					</div>
+					<div class="list" :hidden="current !== 0">
+						<div class="item">
+							<div class="acea-row row-middle">
+								<image src="/static/images/phone_1.png"></image>
+								<input type="text" placeholder="输入手机号码" placeholder-class="placeholder"
+									v-model="account" />
+							</div>
+						</div>
+
+						<div class="item">
+							<div class="acea-row row-middle">
+								<image src="/static/images/code_2.png"></image>
+
+								<input type="number" placeholder="填写验证码" placeholder-class="placeholder"
+									class="codeIput" v-model="captcha" maxlength="4" />
+								<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''"
+									@click="handleVerify">
+									{{ text }}
+								</button>
+							</div>
+						</div>
+						<div class="item" v-if="isShowCode">
+							<div class="acea-row row-middle">
+								<image src="/static/images/code_2.png"></image>
+								<input type="number" placeholder="填写验证码" placeholder-class="placeholder"
+									class="codeIput" v-model="codeVal" maxlength="4" />
+								<div class="code" @click="getcaptcha">
+									<image class="code-img" style="width: 100%;height: 100%;" :src="codeUrl" />
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="logon" @click="loginMobile" :hidden="current !== 0">登录</div>
+					<div class="logon" @click="submit" :hidden="current === 0">登录</div>
+					<div class="protocol acea-row row-between-wrapper">
+						<checkbox-group class="checkgroup" @change='isAgree=!isAgree'>
+							<checkbox class="checkbox" :checked="isAgree ? true : false" />
+							<text class="protocol_text">我已同意<text @click="userAgree"
+									class="font_pro">《用户协议》</text>与<text @click="userPrivacyAgree"
+									class="font_pro">《隐私政策》</text></text>
+						</checkbox-group>
+					</div>
+
+				</div>
+				<div class="whiteBg" v-else>
+					<div class="title">注册账号</div>
+					<div class="list">
+						<div class="item">
+							<div class="acea-row row-middle">
+								<image src="/static/images/phone_1.png"></image>
+								<input type="text" placeholder="输入手机号码" placeholder-class="placeholder"
+									v-model="account" />
+							</div>
+						</div>
+						<div class="item">
+							<div class="acea-row row-middle">
+								<image src="/static/images/code_2.png"></image>
+								<input type="number" placeholder="填写验证码" maxLength='4' placeholder-class="placeholder"
+									class="codeIput" v-model="captcha" />
+
+								<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''"
+									@click="handleVerify">
+									{{ text }}
+								</button>
+							</div>
+						</div>
+						<div class="item">
+							<div class="acea-row row-middle">
+								<image src="/static/images/code_1.png"></image>
+								<input type="password" placeholder="填写您的登录密码" placeholder-class="placeholder"
+									v-model="password" />
+							</div>
+						</div>
+
+						<div class="item" v-if="isShowCode">
+							<div class="acea-row row-middle">
+								<image src="/static/images/code_2.png"></image>
+								<input type="number" placeholder="填写验证码" maxlength="4" placeholder-class="placeholder"
+									class="codeIput" v-model="codeVal" />
+								<div class="code" @click="getcaptcha">
+									<image class="code-img" style="width: 100%;height: 100%;" :src="codeUrl" />
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="tip">
+						<div>
+							已有账号?
+							<span @click="formItem = 1" class="font-color-red">去登录</span>
+						</div>
+					</div>
+					<div class="logon" @click="register">注册</div>
+					<div class="protocol acea-row row-between-wrapper">
+						<checkbox-group class="checkgroup" @change='isAgree=!isAgree'>
+							<checkbox class="checkbox" :checked="isAgree ? true : false" />
+							<text class="protocol_text">我已同意<text @click="userAgree"
+									class="font_pro">《用户协议》</text>与<text @click="userPrivacyAgree"
+									class="font_pro">《隐私政策》</text></text>
+						</checkbox-group>
+					</div>
+				</div>
+			</div>
+			<div class="bottom"></div>
+			<view class="settlementAgreement" v-if="showAgreement">
+				<view class="setAgCount">
+					<i class="icon iconfont icon-cha" @click="showAgreement = false"></i>
+					<div class="title">用户协议与隐私政策</div>
+					<view class="content">
+						<jyf-parser :html="agreement" ref="article" :tag-style="tagStyle"></jyf-parser>
+					</view>
+				</view>
+			</view>
+		</div>
+		<form report-submit='true' v-if="auth_token">
+			<view class="ChangePassword">
+				<view class="list">
+					<view class="item">
+						<input type='number' placeholder='填写手机号码' placeholder-class='placeholder'
+							v-model="account"></input>
+					</view>
+
+					<view class="item acea-row row-between-wrapper">
+						<input type='number' placeholder='填写验证码' maxlength="4" placeholder-class='placeholder'
+							class="codeIput" v-model="captcha"></input>
+
+						<button class="code" :class="disabled === true ? 'on' : ''" :disabled='disabled'
+							@click="handleVerify">
+							{{ text }}
+						</button>
+					</view>
+					<view class="item">
+						<input type='password' placeholder='填写登录密码' placeholder-class='placeholder'
+							v-model="password"></input>
+					</view>
+					<view class="protocol acea-row row-between-wrapper">
+						<checkbox-group class="checkgroup" @change='isAgree=!isAgree'>
+							<checkbox class="checkbox" :checked="isAgree ? true : false" />
+							<text class="protocol_text">我已同意<text @click="userAgree"
+									class="font_pro">《用户协议》</text>与<text @click="userPrivacyAgree"
+									class="font_pro">《隐私政策》</text></text>
+						</checkbox-group>
+					</view>
+				</view>
+				<button form-type="submit" @click="register" class="confirmBnt">确认绑定</button>
+				<button form-type="submit" @click="auth_token = ''" class="confirmBnt back">返回</button>
+			</view>
+		</form>
+		<view class="copyright" @click="goCopyUrl">
+			{{ copyright.status == -1 ? `${copyright.year} ${copyright.url}` : copyright.Copyright }}
+		</view>
+		<Verify @success="success" :captchaType="'blockPuzzle'" :imgSize="{ width: '330px', height: '155px' }"
+			ref="verify"></Verify>
+	</div>
+</template>
+<script>
+	// +----------------------------------------------------------------------
+	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
+	// +----------------------------------------------------------------------
+	// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
+	// +----------------------------------------------------------------------
+	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
+	// +----------------------------------------------------------------------
+	// | Author: CRMEB Team <admin@crmeb.com>
+	// +----------------------------------------------------------------------
+	import dayjs from "@/utils/dayjs.min.js";
+	import sendVerifyCode from "@/mixins/SendVerifyCode";
+	import {
+		loginH5,
+		loginMobile,
+		registerVerify,
+		register,
+		getCodeApi,
+		getUserInfo,
+		getCaptcha,
+		getAgreementApi,
+		appleLogin,
+		loginMpPhone,
+	} from "@/api/user";
+	// #ifdef APP-PLUS
+	import {
+		wechatAppAuth,
+		appleAppAuth
+	} from '@/api/api.js'
+	// #endif
+	import attrs, {
+		required,
+		alpha_num,
+		chs_phone
+	} from "@/utils/validate";
+
+	import {
+		getLogo,
+		getconfig,
+		getVersion,
+		bindMp,
+		bindJG
+	} from "@/api/public";
+	// import cookie from "@/utils/store/cookie";
+	import {
+		VUE_APP_API_URL,
+		configMap
+	} from "@/utils";
+	import parser from "@/components/jyf-parser/jyf-parser";
+	import {
+		commonAuth
+	} from '@/api/public';
+	import {
+		mapGetters
+	} from "vuex";
+
+	import Verify from '@/components/verify/verify.vue';
+	const BACK_URL = "login_back_url";
+
+	export default {
+		name: "Login",
+		mixins: [sendVerifyCode],
+		components: {
+			"jyf-parser": parser,
+			Verify
+		},
+		data: function() {
+			return {
+				navList: ["快速登录", "账号登录"],
+				current: 0,
+				account: "",
+				password: "",
+				captcha: "",
+				formItem: 1,
+				type: "login",
+				keyCode: "",
+				codeUrl: "",
+				codeVal: "",
+				isShowCode: false,
+				showAgreement: false,
+				tagStyle: {
+					img: 'width:100%;display:block;'
+				},
+				isAgree: false,
+				agreement: '',
+				appLoginStatus: false, // 微信登录强制绑定手机号码状态
+				appUserInfo: null, // 微信登录保存的用户信息
+				appleLoginStatus: false, // 苹果登录强制绑定手机号码状态
+				appleUserInfo: null,
+				appleShow: false, // 苹果登录版本必须要求ios13以上的
+				keyLock: true,
+				auth_token: '',
+				codeVal: '',
+				copyright: {}
+			};
+		},
+		computed: configMap(['login_logo']),
+		watch: {
+			formItem: function(nval, oVal) {
+				if (nval == 1) {
+					this.type = 'login'
+				} else {
+					this.type = 'register'
+				}
+			}
+		},
+		onLoad() {
+			let self = this
+			uni.getSystemInfo({
+				success: function(res) {
+					if (res.platform.toLowerCase() == 'ios' && self.getSystem(res.system) >= 13) {
+						self.appleShow = true
+					}
+				}
+			});
+			this.getVersion();
+		},
+		mounted: function() {
+
+		},
+		onReady() {
+			let that = this
+			// #ifdef MP
+			wx.login({
+				success(res) {
+					if (res.code) {
+						that.codeVal = res.code
+					} else {
+						// console.log('登录失败！' + res.errMsg)
+					}
+				}
+			})
+			// #endif
+		},
+		methods: {
+			// #ifdef MP
+			getPhoneNumber(e) {
+
+				let that = this;
+				loginMpPhone({
+						iv: e.detail.iv,
+						encryptedData: e.detail.encryptedData,
+						code: that.codeVal,
+						auth_token: uni.getStorageSync('auth_token'),
+					}).then(({
+						data
+					}) => {
+
+						const backUrl = that.$Cache.get(BACK_URL) || "/pages/index/index";
+						that.$Cache.clear(BACK_URL);
+						that.$store.commit("LOGIN", {
+							'token': data.token,
+							'time': data.exp
+						});
+						that.$store.commit("SETUID", data.user.uid);
+						that.$store.commit('UPDATE_USERINFO', data.user);
+						that.userinfo()
+
+						uni.redirectTo({
+							url: '/pages/room/room_list'
+						});
+					})
+					.catch(res => {
+						console.log(res)
+						that.$util.Tips({
+							title: res
+						});
+					});
+
+			},
+			// #endif
+			goCopyUrl() {
+				// #ifdef H5
+				location.href = 'http://' + this.copyright.url
+				// #endif
+			},
+			userAgree() {
+				uni.redirectTo({
+					url: '/pages/users/user_about/index?from=sys_user_agree'
+				})
+			},
+			userPrivacyAgree() {
+				uni.redirectTo({
+					url: '/pages/users/user_about/index?from=sys_userr_privacy'
+				})
+			},
+			getSystem(system) {
+				if (system.indexOf('iOS') === -1) {
+					return system
+				} else {
+					let str = system.split(' ')[1]
+					if (str.indexOf('.')) {
+						return Number(str.split('.')[0])
+					} else {
+						return Number(str)
+					}
+				}
+			},
+			// 苹果登录
+			appleLogin() {
+				let self = this
+				this.account = ''
+				this.captcha = ''
+				uni.showLoading({
+					title: '登录中'
+				})
+				uni.login({
+					provider: 'apple',
+					timeout: 10000,
+					success(loginRes) {
+						uni.getUserInfo({
+							provider: 'apple',
+							success: function(infoRes) {
+								self.appleUserInfo = infoRes.userInfo
+								self.appleLoginApi()
+							},
+							fail() {
+								uni.showToast({
+									title: '获取用户信息失败',
+									icon: 'none',
+									duration: 2000
+								})
+							},
+							complete() {
+								uni.hideLoading()
+							}
+						});
+					},
+					fail(error) {
+						uni.showToast({
+							title: '获取用户信息失败',
+							icon: 'none',
+							duration: 2000
+						})
+						// console.log(error)
+					}
+				})
+			},
+			appleLoginApi() {
+				let that = this
+				commonAuth({
+					auth: {
+						type: 'apple',
+						auth: {
+							userInfo: that.appleUserInfo,
+							openId: that.appleUserInfo.openId,
+							nickname: (that.appleUserInfo.fullName.familyName || '') + (that.appleUserInfo.fullName
+								.giveName || ''),
+						}
+					}
+				}).then(res => {
+					const data = res.data;
+					if (res.data.status == 200) {
+						const backUrl = that.$Cache.get(BACK_URL) || "/pages/index/index";
+						that.$Cache.clear(BACK_URL);
+						that.$store.commit("LOGIN", {
+							'token': data.result.token,
+							'time': data.result.exp
+						});
+						that.$store.commit("SETUID", data.result.user.uid);
+						that.$store.commit('UPDATE_USERINFO', data.result.user);
+
+						let method
+						let indexPat = ['/pages/index/index']
+						if (indexPat.includes(this.getPath(backUrl))) {
+							method = 'switchTab'
+						} else {
+							method = 'navigateTo'
+						}
+						if (this.getPath(backUrl) === '/pages/users/login/index') {
+							uni.switchTab({
+								url: '/pages/index/index'
+							});
+							return
+						}
+						uni[method]({
+							url: backUrl
+						});
+					} else {
+						uni.hideLoading();
+						that.auth_token = res.data.result.key;
+					}
+				}).catch(res => {
+					uni.hideLoading();
+					uni.showToast({
+						title: res.message || res,
+						icon: 'none',
+						duration: 2000
+					});
+				});
+			},
+
+			getPath(url) {
+				if (url.indexOf("?") != -1) {
+					url = url.split("?")[0];
+					// console.log(url);
+				}
+				return url
+			},
+
+			getAgreement() {
+				let that = this
+				getAgreementApi('sys_user_agree').then(res => {
+					that.agreement = res.data.sys_user_agree
+				})
+			},
+			getCode(data) {
+				let that = this
+				getCodeApi()
+					.then(res => {
+						that.keyCode = res.data.key;
+						that.code(data);
+					})
+					.catch(res => {
+						that.$util.Tips({
+							title: res
+						});
+					});
+			},
+			async loginMobile() {
+				let that = this;
+				if (!that.account) return that.$util.Tips({
+					title: '请输入手机号码'
+				});
+				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
+					title: '请输入正确的手机号码'
+				});
+				if (!that.captcha) return that.$util.Tips({
+					title: '请输入验证码'
+				});
+				if (!/^[\w\d]+$/i.test(that.captcha)) return that.$util.Tips({
+					title: '请输入正确的验证码'
+				});
+				if (!that.isAgree) return that.$util.Tips({
+					title: '请勾选用户协议与隐私政策'
+				});
+
+				loginMobile({
+						auth_token: uni.getStorageSync('auth_token'),
+						phone: that.account,
+						sms_code: that.captcha,
+						spread: that.$Cache.get("spread"),
+						// #ifdef APP-PLUS
+						user_type: 'app',
+						// #endif
+						// #ifdef H5
+						user_type: 'h5',
+						// #endif
+					})
+					.then(({
+						data
+					}) => {
+						that.$Cache.clear(BACK_URL);
+						that.$store.commit("LOGIN", {
+							'token': data.token,
+							'time': data.exp
+						});
+						that.$store.commit("SETUID", data.user.uid);
+						that.$store.commit('UPDATE_USERINFO', data.user);
+						this.userinfo()
+						uni.redirectTo({
+							url: '/pages/room/room_list'
+						});
+
+
+					})
+					.catch(res => {
+						console.log(res)
+						that.$util.Tips({
+							title: res
+						});
+					});
+			},
+			async register() {
+				let that = this;
+				if (!that.account) return that.$util.Tips({
+					title: '请输入手机号码'
+				});
+				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
+					title: '请输入正确的手机号码'
+				});
+				if (!that.captcha) return that.$util.Tips({
+					title: '请输入验证码'
+				});
+				if (!/^[\w\d]+$/i.test(that.captcha)) return that.$util.Tips({
+					title: '请输入正确的验证码'
+				});
+				if (!that.password) return that.$util.Tips({
+					title: '请输入密码'
+				});
+				if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/i.test(that.password)) return that.$util.Tips({
+					title: '请输入6-16位字母加数字组合'
+				});
+				if (!that.isAgree) return that.$util.Tips({
+					title: '请勾选用户协议与隐私政策'
+				});
+				register({
+						auth_token: this.auth_token || uni.getStorageSync('auth_token'),
+						phone: that.account,
+						sms_code: that.captcha,
+						pwd: that.password,
+						spread: that.$Cache.get("spread"),
+						// #ifdef APP-PLUS
+						user_type: 'app',
+						// #endif
+						// #ifdef H5
+						user_type: 'h5',
+						// #endif
+					})
+					.then(res => {
+						const backUrl = that.$Cache.get(BACK_URL) || "/pages/index/index";
+						that.$Cache.clear(BACK_URL);
+						that.$store.commit("LOGIN", {
+							'token': res.data.token,
+							'time': res.data.exp
+						});
+						that.$store.commit("SETUID", res.data.user.uid);
+						this.userinfo()
+						that.$store.commit('UPDATE_USERINFO', res.data);
+						uni.redirectTo({
+							url: '/pages/room/room_list'
+						});
+					})
+					.catch(res => {
+						that.$util.Tips({
+							title: res
+						});
+					});
+			},
+			userinfo() {
+				getUserInfo().then(res => {
+					this.$store.commit('SET_USERINFO', res.data);
+				
+				});
+			},
+			async code(data) {
+				let that = this;
+				if (!that.account) return that.$util.Tips({
+					title: '请输入手机号码'
+				});
+				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
+					title: '请输入正确的手机号码'
+				});
+				// if (that.formItem == 2) that.type = "register";
+				await registerVerify({
+						phone: that.account,
+						type: 'login',
+						key: that.keyCode,
+						// code: that.codeVal,
+						toke: data.token,
+						captchaType: 'blockPuzzle',
+						captchaVerification: data.captchaVerification
+					})
+					.then(res => {
+						that.$util.Tips({
+							title: res.message
+						});
+						that.sendCode();
+					})
+					.catch(res => {
+						that.$util.Tips({
+							title: res
+						});
+					});
+			},
+			getcaptcha() {
+				let that = this
+				getCaptcha().then(data => {
+					// that.codeUrl = `${VUE_APP_API_URL}/sms_captcha?key=${that.keyCode}`;
+					that.codeUrl = data.data.captcha;
+					that.keyCode = data.data.key
+				})
+				that.isShowCode = true;
+			},
+			navTap: function(index) {
+				this.current = index;
+			},
+			getPath(url) {
+				if (url.indexOf("?") != -1) {
+					url = url.split("?")[0];
+				}
+				return url
+			},
+			async submit() {
+				let that = this;
+				if (!that.account) return that.$util.Tips({
+					title: '请输入账号'
+				});
+				if (!/^[\w\d]{5,16}$/i.test(that.account)) return that.$util.Tips({
+					title: '请输入正确的账号'
+				});
+				if (!that.password) return that.$util.Tips({
+					title: '请输入密码'
+				});
+				if (!that.isAgree) return that.$util.Tips({
+					title: '请勾选用户协议与隐私政策'
+				});
+				loginH5({
+						auth_token: uni.getStorageSync('auth_token'),
+						account: that.account,
+						password: that.password,
+						spread: that.$Cache.get("spread")
+					})
+					.then(({
+						data
+					}) => {
+						this.checkOpenId(data.user)
+						const backUrl = that.$Cache.get(BACK_URL) || "/pages/index/index";
+						that.$Cache.clear(BACK_URL);
+						that.$store.commit("LOGIN", {
+							'token': data.token,
+							'time': data.exp
+						});
+						that.$store.commit("SETUID", data.user.uid);
+						that.$store.commit('UPDATE_USERINFO', data.user);
+						this.userinfo()
+						uni.redirectTo({
+							url: '/pages/room/room_list'
+						});
+					})
+					.catch(e => {
+						that.$util.Tips({
+							title: e
+						});
+					});
+			},
+			getVersion() {
+				getVersion().then(data => {
+					this.copyright = data.data;
+				});
+			},
+			success(data) {
+				this.$refs.verify.hide();
+				this.code(data);
+			},
+			handleVerify() {
+				let that = this;
+				if (!that.account) return that.$util.Tips({
+					title: '请输入手机号码'
+				});
+				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
+					title: '请输入正确的手机号码'
+				});
+				if (!that.isAgree) return that.$util.Tips({
+					title: '请勾选用户协议与隐私政策'
+				});
+				that.$refs.verify.show();
+			}
+
+		}
+	};
+</script>
+<style lang="scss" scoped>
+	page {
+		background-color: #fff !important;
+	}
+
+	/deep/uni-checkbox .uni-checkbox-input {
+		border-radius: 100%;
+	}
+
+	.ChangePassword .phone {
+		font-size: 32rpx;
+		font-weight: bold;
+		text-align: center;
+		margin-top: 55rpx;
+	}
+
+	.ChangePassword .list {
+		width: 580rpx;
+		margin: 53rpx auto 0 auto;
+	}
+
+	.ChangePassword .list .item {
+
+		width: 100%;
+		height: 110rpx;
+		border-bottom: 2rpx solid #f0f0f0;
+	}
+
+	.ChangePassword .list .item input {
+		width: 100%;
+		height: 100%;
+		font-size: 32rpx;
+	}
+
+	.ChangePassword .list .item .placeholder {
+		color: #b9b9bc;
+	}
+
+	.ChangePassword .list .item input.codeIput {
+		width: 240rpx;
+
+	}
+
+	/deep/.uni-input-wrapper,
+	/deep/.uni-input-input {
+		// width: 240rpx;
+	}
+
+	.ChangePassword .list .item .code {
+		font-size: 32rpx;
+		background-color: #fff;
+		color: var(--view-theme);
+	}
+
+	.ChangePassword .list .item .code.on {
+		color: #b9b9bc;
+	}
+
+	.ChangePassword .confirmBnt {
+		font-size: 32rpx;
+		width: 580rpx;
+		height: 90rpx;
+		border-radius: 45rpx;
+		color: #fff;
+		margin: 92rpx auto 0 auto;
+		text-align: center;
+		line-height: 90rpx;
+		background-color: var(--view-theme);
+	}
+
+	.ChangePassword .confirmBnt.back {
+		background-color: #FFFFFF;
+		border: 1px solid var(--view-theme);
+		color: var(--view-theme);
+		margin-top: 30rpx;
+	}
+
+	.getPhoneBtn {
+		font-size: 32rpx;
+		width: 580rpx;
+		height: 90rpx;
+		border-radius: 45rpx;
+		border: 1rpx solid #3CB625;
+		color: #3CB625;
+		margin: 40rpx auto 0 auto;
+		text-align: center;
+		line-height: 90rpx;
+
+		.iconfont {
+			font-size: 32rpx;
+			margin-right: 12rpx;
+		}
+	}
+
+	.code image {
+		width: 100%;
+		height: 100%;
+	}
+
+	.acea-row.row-middle {
+		input {
+			margin-left: 20rpx;
+		}
+	}
+
+	.settlementAgreement {
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		top: 0;
+		left: 0;
+		background: rgba(0, 0, 0, .5);
+		z-index: 10;
+	}
+
+	.protocol_text {
+		color: #999;
+		font-size: 24rpx;
+	}
+
+	.settlementAgreement .setAgCount {
+		background: #fff;
+		width: 656rpx;
+		height: 458px;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		border-radius: 12rpx;
+		-webkit-border-radius: 12rpx;
+		padding: 52rpx;
+		-webkit-transform: translate(-50%, -50%);
+		-moz-transform: translate(-50%, -50%);
+		transform: translate(-50%, -50%);
+		overflow: hidden;
+
+		.content {
+			height: 900rpx;
+			overflow-y: scroll;
+
+			/deep/ p {
+				font-size: 13px;
+				line-height: 22px;
+			}
+
+			/deep/ img {
+				max-width: 100%;
+			}
+		}
+	}
+
+	.settlementAgreement .setAgCount .icon {
+		font-size: 42rpx;
+		color: #b4b1b4;
+		position: absolute;
+		top: 15rpx;
+		right: 15rpx;
+
+	}
+
+	.settlementAgreement .setAgCount .title {
+		color: #333;
+		font-size: 32rpx;
+		text-align: center;
+		font-weight: bold;
+	}
+
+	.settlementAgreement .setAgCount .content {
+		margin-top: 32rpx;
+		color: #333;
+		font-size: 26rpx;
+		line-height: 22px;
+		text-align: justify;
+		text-justify: distribute-all-lines;
+		height: 756rpx;
+		overflow-y: scroll;
+	}
+
+	.protocol {
+		display: flex;
+		justify-content: center;
+		text-align: center;
+		margin-top: 30rpx;
+	}
+
+	.protocol_text {
+		.font_pro {
+			color: var(--view-theme);
+		}
+	}
+
+	.appLogin {
+		.hds {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 24rpx;
+			color: #B4B4B4;
+
+			.line {
+				width: 68rpx;
+				height: 1rpx;
+				background: #CCCCCC;
+			}
+
+			p {
+				margin: 0 20rpx;
+			}
+		}
+
+		.btn-wrapper {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-top: 30rpx;
+
+			.btn {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 68rpx;
+				height: 68rpx;
+				border-radius: 50%;
+
+				+.btn {
+					margin-left: 30rpx;
+				}
+			}
+
+			.apple-btn {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 246rpx;
+				height: 66rpx;
+				margin-left: 10rpx;
+				background: #EAEAEA;
+				border-radius: 34rpx;
+				font-size: 24rpx;
+
+				.icon-s-pingguo {
+					color: #333;
+					margin-right: 10rpx;
+					font-size: 34rpx;
+				}
+			}
+
+			.iconfont {
+				font-size: 40rpx;
+				color: #fff;
+			}
+
+			.wx {
+				// margin-right: 30rpx;
+				background-color: #61C64F;
+
+				&.btn-apple {
+					margin-right: 0;
+					background-color: #333;
+				}
+			}
+
+			.mima {
+				background-color: #28B3E9;
+			}
+
+			.yanzheng {
+				background-color: #F89C23;
+			}
+
+		}
+	}
+
+	.code img {
+		width: 100%;
+		height: 100%;
+	}
+
+	.acea-row.row-middle {
+		input {
+			margin-left: 20rpx;
+			display: block;
+		}
+	}
+
+	.login-wrapper {
+		padding: 30rpx;
+
+		.shading {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			/* #ifdef APP-VUE */
+			margin-top: 50rpx;
+			/* #endif */
+			/* #ifndef APP-VUE */
+
+			margin-top: 200rpx;
+			/* #endif */
+
+
+			image {
+				width: 180rpx;
+				height: 180rpx;
+			}
+		}
+
+		.whiteBg {
+			margin-top: 100rpx;
+
+			.list {
+				border-radius: 16rpx;
+				overflow: hidden;
+
+				.item {
+					border-bottom: 1px solid #F0F0F0;
+					background: #fff;
+
+					.row-middle {
+						position: relative;
+						padding: 16rpx 45rpx;
+
+						input {
+							flex: 1;
+							font-size: 28rpx;
+							height: 80rpx;
+						}
+
+						.code {
+							color: #E93323;
+							font-size: 26rpx;
+							transform: translateY(-50%);
+						}
+					}
+				}
+			}
+
+			.logon {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 100%;
+				height: 86rpx;
+				margin-top: 80rpx;
+				background-color: $theme-color;
+				border-radius: 120rpx;
+				color: #FFFFFF;
+				font-size: 30rpx;
+			}
+
+			.tips {
+				margin: 30rpx;
+				text-align: center;
+				color: #999;
+			}
+		}
+	}
+
+	.copyright {
+		position: fixed;
+		bottom: 30rpx;
+		left: 0;
+		width: 100%;
+		text-align: center;
+		font-size: 20rpx;
+		line-height: 28rpx;
+		color: #FFFFFF;
+
+		.cell {
+			// margin-left: 6rpx;
+			font-size: 20rpx;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/room/create_room.vue b/pages/room/create_room.vue
new file mode 100644
index 0000000..baa9e92
--- /dev/null
+++ b/pages/room/create_room.vue
@@ -0,0 +1,534 @@
+<template name="create-float-page">
+	<view>
+		<view class="do-box">
+			<view class="do-box-top">
+				<text>请输入直播主题：</text>
+				<view class="cover-input">
+					<input type="text" v-model="livename" placeholder="请输入内容，吸引更多观众"
+						placeholder-class="cover-inputplaceholder" />
+				</view>
+			</view>
+			<view class="do-box-top" @click="chooseImage">
+				<text>请上传直播封面：</text>
+				<view class="cover-box">
+					<image :src="imageSrc" mode="aspectFill" v-if='imageSrc'></image>
+					<view class="cover-box-img" v-else>
+
+						<image src="@/static/img/xj.png" mode="aspectFit"></image>
+					</view>
+					<view class="cover-text web-font"v-if='imageSrc'>更新封面</view>
+					<view class="cover-text web-font"v-else style="color: #B3B3B3;">上传图片</view>
+				</view>
+			</view>
+			<view class="do-box-check">
+				<view class="do-box-check-top">
+					<view class="do-box-check-left">
+						<view class="check-top-imga">
+							<image src="@/static/img/c2.png" mode="aspectFit"></image>
+						</view>
+						<view class="check-top-txt">请选择直播商品</view>
+					</view>
+					<view class="do-box-check-right">
+						<view class="check-top-imgb" @click="shop">
+							<image src="@/static/img/c1.png" mode="aspectFit"></image>
+						</view>
+					</view>
+				</view>
+
+				<view class="" v-if="goodlist.length>0" @click="editshop(goodlist)">
+					<scroll-view scroll-x="true" scroll-left="0" style="width: 450rpx;white-space: nowrap;">
+						<view class="" v-for="(item,i) in goodlist" :key='i'
+							style="width: 100rpx;height: 100rpx;margin-right: 20rpx;display:inline-block;">
+							<image :src="item.app_goods_pic" mode="aspectFit" style="width: 100rpx;height: 100rpx;">
+							</image>
+						</view>
+					</scroll-view>
+
+				</view>
+
+
+
+
+			</view>
+		</view>
+
+		<view class="start-but web-font" @click="create_live_room">开始直播</view>
+
+
+
+		<uni-popup ref="popup" type="bottom" style="height: 560rpx;">
+			<shoppinglist @getProduct="getProduct" :checkedObj="productList" @close='close'></shoppinglist>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	import {
+		HTTP_REQUEST_URL
+	} from '@/config/app';
+
+	import {
+		good,
+		createPushLive
+	} from '@/api/api.js'
+	import uniPopup from '@/components/uni-popup/uni-popup.vue';
+	import shoppinglist from '@/components/shoppinglist/shoppinglist.vue'
+	export default {
+		components: {
+			uniPopup,
+			shoppinglist
+		},
+		data() {
+			return {
+
+				livename: '',
+				imageSrc: '',
+				cover_path: '',
+				inputValue: '新建直播间',
+
+
+
+
+				productList: [],
+				goodlist: [],
+				userinfo: {}
+			};
+		},
+		mounted() {
+			if (this.isUserInfoExist) {
+				console.log('用户信息存在');
+			} else {
+				console.log('用户信息不存在');
+				uni.showModal({
+					// title: '标题',
+					content: '用户信息不存在,是否重新登录',
+					showCancel: true,
+					cancelText: '取消',
+					confirmText: '确定',
+					success: function(res) {
+						if (res.confirm) {
+							// 用户点击了确定按钮
+							uni.redirectTo({
+								url: '/pages/login/login'
+							})
+						} else if (res.cancel) {
+							// 用户点击了取消按钮
+							console.log('用户点击了取消按钮');
+						}
+					}
+				});
+			}
+		},
+
+		methods: {
+			isUserInfoExist() {
+				const userInfo = this.$store.state.app.userInfo;
+
+				uni.sendHostEvent('userinfo', userInfo, (ret) => {
+					//发送消息成功回调
+					console.log('消息成功' + JSON.stringify(userInfo));
+				});
+				return !!userInfo; // 如果 userInfo 为空，则返回 false；否则返回 true
+			},
+			//关闭弹窗
+			close() {
+				this.$refs.popup.close()
+			},
+			//选择商品
+			shop() {
+				this.$refs.popup.open()
+			},
+			editshop(e) {
+				let arr1 = []
+				for (let i in e) {
+					arr1.push({
+						product_id: e[i].app_goods_id,
+						store_name: e[i].app_goods_name,
+						image: e[i].app_goods_pic,
+						price: e[i].app_goods_price,
+					})
+				}
+				this.productList = arr1
+				this.$refs.popup.open()
+			},
+			//获取商品数据
+			getProduct(e) {
+
+				this.goodlist = []
+				for (let i in e) {
+					this.goodlist.push({
+						app_goods_id: e[i].product_id,
+						app_goods_name: e[i].store_name,
+						app_goods_pic: e[i].image,
+						app_goods_price: e[i].price,
+					})
+				}
+
+				this.$refs.popup.close()
+			},
+
+			//创建房间
+			create_live_room: function(e) {
+
+				if (this.cover_path == '') {
+					uni.showToast({
+						title: '请上传封面',
+						duration: 2000,
+						icon: 'none'
+					});
+					return false;
+				}
+				if (this.livename == '') {
+					uni.showToast({
+						title: '请填写标题',
+						duration: 2000,
+						icon: 'none'
+					});
+					return false;
+				}
+				if (this.goodlist.length == 0) {
+					uni.showToast({
+						title: '请添加商品',
+						duration: 2000,
+						icon: 'none'
+					});
+					return false;
+				}
+
+
+
+				createPushLive({
+					live_name: this.livename,
+					cover: this.cover_path,
+					app_name: "shop",
+					app_user_id: this.$store.state.app.userInfo.uid,
+					goods: this.goodlist
+				}).then(res => {
+					console.log(res)
+					uni.sendHostEvent('log', res, (ret) => {
+						//发送消息成功回调
+						console.log('消息成功' + JSON.stringify(res));
+
+					});
+
+					if (res.code == 1) {
+						uni.navigateTo({
+							url: '/pages/live/anchor?data=' + encodeURIComponent(JSON.stringify(res
+								.data))
+						})
+					} else {
+						uni.showToast({
+							title: res.msg,
+							duration: 2000,
+							icon: 'none'
+						});
+					}
+				}).catch((err) => {
+					uni.sendHostEvent('log', err, (ret) => {
+						//发送消息成功回调
+						console.log('消息成功' + JSON.stringify(err));
+
+					});
+				})
+
+			},
+			chooseImage: function() {
+				let that = this;
+				that.$util.uploadImageOne('upload/image', function(res) {
+					// console.log(res.data.path)
+					that.cover_path = res.data.path
+					that.imageSrc = res.data.path
+				});
+
+			},
+		},
+		onBackPress() {
+
+
+			// this.$refs['showpopup'].close()
+			// this.$refs['showtip'].close()
+			// this.$refs['showimage'].close()
+			// this.$refs['showshare'].close()
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background-color: #fff;
+	}
+
+	.top-do-box {
+		width: 90%;
+		margin: auto;
+		/* #ifdef MP-WEIXIN */
+		margin-top: 120upx;
+		/* #endif */
+		/* #ifdef APP-PLUS */
+		margin-top: 60upx;
+		/* #endif */
+	}
+
+	.ico-box {
+		width: 70upx;
+		height: 70upx;
+		text-align: center;
+	}
+
+	.ico {
+		color: #FFFFFF;
+		font-size: 48upx;
+	}
+
+	.lico {
+		color: #FFFFFF;
+		font-size: 28upx;
+		margin-right: 4upx;
+	}
+
+	.do-box {
+		width: 90%;
+		padding: 40upx 0;
+		flex-wrap: nowrap;
+		margin: auto;
+		z-index: 9999;
+	}
+
+	.do-box-top {
+		.cover-box {
+			width: 193rpx;
+			height: 193rpx;
+			background: #F4F4F4;
+			border-radius: 10upx;
+			overflow: hidden;
+			position: relative;
+			margin-top: 32rpx;
+		}
+
+		.cover-box-img {
+			width: 72rpx;
+			height: 72rpx;
+			margin: 0 auto;
+			margin-top: 30rpx;
+
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		.cover-inputplaceholder {
+			font-size: 30rpx;
+			font-family: PingFang SC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #737373;
+		}
+
+		.cover-input {
+			font-size: 30rpx;
+			font-family: PingFang SC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #000;
+			margin-top: 32rpx;
+			margin-bottom: 70rpx;
+		}
+
+
+		.cover-text {
+			position: absolute;
+			bottom: 30rpx;
+			width: 100%;
+			height: 50upx;
+			line-height: 50upx;
+			text-align: center;
+			font-size: 28upx;
+			color: #FFFFFF;
+		}
+
+		.cover-box image {
+			width: 100%;
+			height: 100%;
+		}
+
+	}
+
+
+	.do-box-check {
+		margin-top: 35rpx;
+		flex: 1;
+
+		.do-box-check-top {
+			display: flex;
+			justify-content: space-between;
+			margin-bottom: 30rpx;
+
+			.do-box-check-left {
+				display: flex;
+				.check-top-imga {
+					width: 44rpx;
+					height: 44rpx;
+					margin-right: 20rpx;
+					image {
+						width: 100%;
+						height: 100%;
+					}
+				}
+
+				.check-top-txt {
+					font-size: 30rpx;
+					font-family: PingFang SC-Medium, PingFang SC;
+					font-weight: 500;
+					color: #333333;
+				}
+			}
+
+			.do-box-check-right {
+				.check-top-imgb {
+					width: 48rpx;
+					height: 48rpx;
+
+
+					image {
+						width: 100%;
+						height: 100%;
+					}
+				}
+			}
+
+
+		}
+
+	}
+
+	.check-lable {
+		width: 200upx;
+		height: 60upx;
+		line-height: 60upx;
+		border-radius: 60upx;
+		background-color: rgba(0, 0, 0, .2);
+		text-align: center;
+		color: #FFFFFF;
+		font-size: 28upx;
+	}
+
+	.uni-input {
+		background: none !important;
+		color: #FFFFFF;
+		font-size: 40upx;
+		margin-top: 20upx;
+	}
+
+	/* 底部分享 */
+	.uni-share {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		flex-direction: column;
+		/* #endif */
+		background-color: #fff;
+		padding: 0 40upx;
+		border-top-left-radius: 20upx;
+		border-top-right-radius: 20upx;
+	}
+
+	.uni-share-title {
+		line-height: 60rpx;
+		font-size: 24rpx;
+		padding: 15rpx 0;
+		text-align: center;
+		border-bottom: 2upx solid #F0F0F0;
+	}
+
+	.uni-share-content {
+		/* #ifndef APP-NVUE */
+		/* display: flex; */
+		/* #endif */
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		/* justify-content: space-around; */
+		padding: 15px 0;
+		/* 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;
+	}
+
+	.type-lable {
+		width: 20%;
+		margin-left: 2.5%;
+		height: 60upx;
+		line-height: 60upx;
+		border-radius: 60upx;
+		text-align: center;
+		color: #666666;
+		font-size: 24upx;
+		border: 2upx solid #F0F0F0;
+		margin-bottom: 20upx;
+	}
+
+	.type-lable-active {
+		background-color: #ff2d54;
+		border: 2upx solid #ff2d54;
+		color: #FFFFFF;
+	}
+
+	.ok-but {
+		width: 100%;
+		height: 90upx;
+		line-height: 90upx;
+		border-radius: 90upx;
+		font-size: 28upx;
+		color: #FFFFFF;
+		text-align: center;
+		background-color: #ff2d54;
+		margin: 20upx auto;
+	}
+
+	.ok-but-none {
+		background-color: #F0F0F0;
+	}
+
+	.loc-lable {
+		line-height: 70upx;
+		text-align: center;
+		font-size: 32upx;
+	}
+
+	.loc-lable-active {
+		color: #ff2d54;
+	}
+
+	.start-but {
+		width: 60%;
+		height: 90upx;
+		line-height: 90upx;
+		border-radius: 90upx;
+		font-size: 36upx;
+		color: #FFFFFF;
+		text-align: center;
+		background-color: #ff2d54;
+		position: fixed;
+		bottom: 100upx;
+		left: 20%;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/room/room_list.vue b/pages/room/room_list.vue
new file mode 100644
index 0000000..2026128
--- /dev/null
+++ b/pages/room/room_list.vue
@@ -0,0 +1,590 @@
+<template>
+	<view class="view_body">
+		<z-paging ref="paging" refresher-only @onRefresh="onRefresh">
+			<view class="" :style="'height:'+statusBarHeight+'px'">
+
+			</view>
+			<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="content-detail">
+					<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>
+					<view class="content-detaila" @click="jump_url">
+						去开直播
+						<text class="iconfont icon-xiangyou"></text>
+					</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-else 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>
+
+		</z-paging>
+	</view>
+</template>
+
+<script>
+	import emptyPage from '@/components/emptyPage.vue';
+	import {
+		live,
+		playbackList
+	} from '@/api/api.js'
+
+
+	export default {
+		components: {
+			emptyPage
+		},
+		data() {
+			return {
+				keyword: '',
+				statusBarHeight: 0,
+				page: 1,
+				dataindex: 1,
+				page_data: true,
+				list: [{
+						name: '直播精选'
+					},
+					{
+						name: '历史直播'
+					},
+
+				],
+				roomList: [],
+				user: [],
+				index: 0,
+				isGetLoginInfo: true,
+				isindex: 0,
+
+			};
+		},
+		onLoad() {
+
+			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
+		},
+		mounted() {
+			if (this.isUserInfoExist()) {
+				console.log('用户信息存在');
+				this.getRoomList()
+			} else {
+				console.log('用户信息不存在');
+				uni.showModal({
+					// title: '标题',
+					content: '用户信息不存在,是否重新登录',
+					showCancel: true,
+					cancelText: '取消',
+					confirmText: '确定',
+					success: function(res) {
+						if (res.confirm) {
+							// 用户点击了确定按钮
+							uni.redirectTo({
+								url: '/pages/login/login'
+							})
+						} else if (res.cancel) {
+							// 用户点击了取消按钮
+							console.log('用户点击了取消按钮');
+						}
+					}
+				});
+			}
+
+		},
+		onShow() {},
+		onReachBottom() {
+			if (this.isindex == 0) {
+				this.getRoomList()
+			} else {
+				this.getbackList()
+			}
+
+		},
+
+
+		onPullDownRefresh: function() {
+			console.log('下拉刷新')
+			this.getRoomList()
+		},
+		methods: {
+
+			//下拉刷新被触发
+			onRefresh() {
+				//以告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
+				setTimeout(() => {
+					//1.5秒之后停止刷新动画
+					if (this.isindex == 0) {
+						this.getRoomList()
+					} else {
+						this.getbackList()
+					}
+					this.$refs.paging.complete();
+				}, 1500)
+			},
+			isUserInfoExist() {
+				const userInfo = this.$store.state.app.userInfo;
+				uni.sendHostEvent('userinfo', userInfo, (ret) => {
+					//发送消息成功回调
+					console.log('消息成功' + JSON.stringify(userInfo));
+				});
+				return !!userInfo; // 如果 userInfo 为空，则返回 false；否则返回 true
+			},
+			//输入
+			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.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 => {
+					// console.log(res)
+					if (res.data.code = 1) {
+						uni.hideLoading()
+						// this.roomList = res.data.lists
+						// this.roomList.push(res.data.lists)
+							if (res.data.lists.length > 0) {
+						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: function() {
+				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
+						}
+
+					}
+				})
+			},
+			jump: function(e) {
+				console.log(e)
+				uni.navigateTo({
+					url: '/pages/live/spectator' + '?data=' + encodeURIComponent(JSON.stringify(e))
+				})
+
+			},
+			//历史直播间
+			hsitroyjump: function(e) {
+				console.log(e)
+				
+				uni.navigateTo({
+					url: '/pages/live/histroyroom' + '?data=' + encodeURIComponent(JSON.stringify(e))
+				})
+
+			},
+			//创建直播间
+			jump_url() {
+				if (this.isUserInfoExist()) {
+					uni.navigateTo({
+						url: '/pages/room/create_room'
+					});
+				} else {
+					uni.showModal({
+						// title: '标题',
+						content: '用户信息不存在,是否重新登录',
+						showCancel: true,
+						cancelText: '取消',
+						confirmText: '确定',
+						success: function(res) {
+							if (res.confirm) {
+								// 用户点击了确定按钮
+								uni.redirectTo({
+									url: '/pages/login/login'
+								})
+							} else if (res.cancel) {
+								// 用户点击了取消按钮
+								console.log('用户点击了取消按钮');
+							}
+						}
+					});
+				}
+
+			},
+
+		}
+	}
+</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;
+		}
+	}
+
+	.content-detail {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.banner {
+		display: flex;
+		padding-left: 28rpx;
+
+	}
+
+	.roomsbox-title {
+		font-size: 30rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #333333;
+		margin-bottom: 30rpx;
+		margin-left: 20rpx;
+	}
+
+	.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;
+	}
+
+	.content-detaila {
+		font-size: 33rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #333333;
+		margin-bottom: 10rpx;
+		margin-right: 20rpx;
+	}
+
+	.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;
+	}
+
+	.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%;
+	}
+
+	.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/plugin/dayjs/dayjs.min.js b/plugin/dayjs/dayjs.min.js
new file mode 100644
index 0000000..47ebdde
--- /dev/null
+++ b/plugin/dayjs/dayjs.min.js
@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.dayjs=e()}(this,function(){"use strict";var t="millisecond",e="second",n="minute",r="hour",i="day",s="week",u="month",o="quarter",a="year",h=/^(\d{4})-?(\d{1,2})-?(\d{0,2})[^0-9]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?.?(\d{1,3})?$/,f=/\[([^\]]+)]|Y{2,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,c=function(t,e,n){var r=String(t);return!r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},d={s:c,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return(e<=0?"+":"-")+c(r,2,"0")+":"+c(i,2,"0")},m:function(t,e){var n=12*(e.year()-t.year())+(e.month()-t.month()),r=t.clone().add(n,u),i=e-r<0,s=t.clone().add(n+(i?-1:1),u);return Number(-(n+(e-r)/(i?r-s:s-r))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(h){return{M:u,y:a,w:s,d:i,D:"date",h:r,m:n,s:e,ms:t,Q:o}[h]||String(h||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},$={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_")},l="en",m={};m[l]=$;var y=function(t){return t instanceof v},M=function(t,e,n){var r;if(!t)return l;if("string"==typeof t)m[t]&&(r=t),e&&(m[t]=e,r=t);else{var i=t.name;m[i]=t,r=i}return!n&&r&&(l=r),r||!n&&l},g=function(t,e){if(y(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new v(n)},D=d;D.l=M,D.i=y,D.w=function(t,e){return g(t,{locale:e.$L,utc:e.$u,$offset:e.$offset})};var v=function(){function c(t){this.$L=this.$L||M(t.locale,null,!0),this.parse(t)}var d=c.prototype;return d.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(D.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match(h);if(r)return n?new Date(Date.UTC(r[1],r[2]-1,r[3]||1,r[4]||0,r[5]||0,r[6]||0,r[7]||0)):new Date(r[1],r[2]-1,r[3]||1,r[4]||0,r[5]||0,r[6]||0,r[7]||0)}return new Date(e)}(t),this.init()},d.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},d.$utils=function(){return D},d.isValid=function(){return!("Invalid Date"===this.$d.toString())},d.isSame=function(t,e){var n=g(t);return this.startOf(e)<=n&&n<=this.endOf(e)},d.isAfter=function(t,e){return g(t)<this.startOf(e)},d.isBefore=function(t,e){return this.endOf(e)<g(t)},d.$g=function(t,e,n){return D.u(t)?this[e]:this.set(n,t)},d.year=function(t){return this.$g(t,"$y",a)},d.month=function(t){return this.$g(t,"$M",u)},d.day=function(t){return this.$g(t,"$W",i)},d.date=function(t){return this.$g(t,"$D","date")},d.hour=function(t){return this.$g(t,"$H",r)},d.minute=function(t){return this.$g(t,"$m",n)},d.second=function(t){return this.$g(t,"$s",e)},d.millisecond=function(e){return this.$g(e,"$ms",t)},d.unix=function(){return Math.floor(this.valueOf()/1e3)},d.valueOf=function(){return this.$d.getTime()},d.startOf=function(t,o){var h=this,f=!!D.u(o)||o,c=D.p(t),d=function(t,e){var n=D.w(h.$u?Date.UTC(h.$y,e,t):new Date(h.$y,e,t),h);return f?n:n.endOf(i)},$=function(t,e){return D.w(h.toDate()[t].apply(h.toDate("s"),(f?[0,0,0,0]:[23,59,59,999]).slice(e)),h)},l=this.$W,m=this.$M,y=this.$D,M="set"+(this.$u?"UTC":"");switch(c){case a:return f?d(1,0):d(31,11);case u:return f?d(1,m):d(0,m+1);case s:var g=this.$locale().weekStart||0,v=(l<g?l+7:l)-g;return d(f?y-v:y+(6-v),m);case i:case"date":return $(M+"Hours",0);case r:return $(M+"Minutes",1);case n:return $(M+"Seconds",2);case e:return $(M+"Milliseconds",3);default:return this.clone()}},d.endOf=function(t){return this.startOf(t,!1)},d.$set=function(s,o){var h,f=D.p(s),c="set"+(this.$u?"UTC":""),d=(h={},h[i]=c+"Date",h.date=c+"Date",h[u]=c+"Month",h[a]=c+"FullYear",h[r]=c+"Hours",h[n]=c+"Minutes",h[e]=c+"Seconds",h[t]=c+"Milliseconds",h)[f],$=f===i?this.$D+(o-this.$W):o;if(f===u||f===a){var l=this.clone().set("date",1);l.$d[d]($),l.init(),this.$d=l.set("date",Math.min(this.$D,l.daysInMonth())).toDate()}else d&&this.$d[d]($);return this.init(),this},d.set=function(t,e){return this.clone().$set(t,e)},d.get=function(t){return this[D.p(t)]()},d.add=function(t,o){var h,f=this;t=Number(t);var c=D.p(o),d=function(e){var n=g(f);return D.w(n.date(n.date()+Math.round(e*t)),f)};if(c===u)return this.set(u,this.$M+t);if(c===a)return this.set(a,this.$y+t);if(c===i)return d(1);if(c===s)return d(7);var $=(h={},h[n]=6e4,h[r]=36e5,h[e]=1e3,h)[c]||1,l=this.$d.getTime()+t*$;return D.w(l,this)},d.subtract=function(t,e){return this.add(-1*t,e)},d.format=function(t){var e=this;if(!this.isValid())return"Invalid Date";var n=t||"YYYY-MM-DDTHH:mm:ssZ",r=D.z(this),i=this.$locale(),s=this.$H,u=this.$m,o=this.$M,a=i.weekdays,h=i.months,c=function(t,r,i,s){return t&&(t[r]||t(e,n))||i[r].substr(0,s)},d=function(t){return D.s(s%12||12,t,"0")},$=i.meridiem||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r},l={YY:String(this.$y).slice(-2),YYYY:this.$y,M:o+1,MM:D.s(o+1,2,"0"),MMM:c(i.monthsShort,o,h,3),MMMM:h[o]||h(this,n),D:this.$D,DD:D.s(this.$D,2,"0"),d:String(this.$W),dd:c(i.weekdaysMin,this.$W,a,2),ddd:c(i.weekdaysShort,this.$W,a,3),dddd:a[this.$W],H:String(s),HH:D.s(s,2,"0"),h:d(1),hh:d(2),a:$(s,u,!0),A:$(s,u,!1),m:String(u),mm:D.s(u,2,"0"),s:String(this.$s),ss:D.s(this.$s,2,"0"),SSS:D.s(this.$ms,3,"0"),Z:r};return n.replace(f,function(t,e){return e||l[t]||r.replace(":","")})},d.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},d.diff=function(t,h,f){var c,d=D.p(h),$=g(t),l=6e4*($.utcOffset()-this.utcOffset()),m=this-$,y=D.m(this,$);return y=(c={},c[a]=y/12,c[u]=y,c[o]=y/3,c[s]=(m-l)/6048e5,c[i]=(m-l)/864e5,c[r]=m/36e5,c[n]=m/6e4,c[e]=m/1e3,c)[d]||m,f?y:D.a(y)},d.daysInMonth=function(){return this.endOf(u).$D},d.$locale=function(){return m[this.$L]},d.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=M(t,e,!0);return r&&(n.$L=r),n},d.clone=function(){return D.w(this.$d,this)},d.toDate=function(){return new Date(this.valueOf())},d.toJSON=function(){return this.isValid()?this.toISOString():null},d.toISOString=function(){return this.$d.toISOString()},d.toString=function(){return this.$d.toUTCString()},c}();return g.prototype=v.prototype,g.extend=function(t,e){return t(e,v,g),g},g.locale=M,g.isDayjs=y,g.unix=function(t){return g(1e3*t)},g.en=m[l],g.Ls=m,g});