2022/2/25

MingGaoApp/App.vue

@@ -1,14 +1,109 @@
 <script>
 	export default {
+		globalData: {
+			token: "",
+
+			// 文本消息
+			socketTask: null,
+			urlData: "ws://192.168.1.17:12345/api/api_gateway?method=control_center.real_time.im_message",
+			is_open_socket: false, // 确保websocket是打开状态
+			list: [],
+			userId: null, // 用户ID
+
+			// 即构
+			video: null, //房间密码和token
+		},
 		onLaunch: function() {
-			// console.log('App Launch')
+			// App启动
+			var that = this
+			uni.getStorage({
+				key: 'session_key',
+				success: function(res) {
+					// console.log(res)
+					that.globalData.token = res.data
+					// console.log('登录成功了')
+					that.msgInit(); // 文本初始化
+				},
+				fail: function(err) {
+					// console.log(err)
+					// console.log('没有登录成功')
+				}
+			})
 		},
 		onShow: function() {
+			// App展示在前台
 			// console.log('App Show')
 		},
 		onHide: function() {
+			// App不再再展示在前台
 			// console.log('App Hide')
-		}
+		},
+		methods: {
+			// 实时通信 - 初始化
+			msgInit() {
+				var that = this
+				// 连接webscoket
+				// console.log(this.globalData.urlData)
+				that.globalData.socketTask = uni.connectSocket({
+					url: this.globalData.urlData + "&token=" + that.globalData.token,
+					success(data) {
+						// console.log("websocket连接成功");
+					}
+				});
+
+				// 发送消息 - 获取对话列表
+				var obj = {
+					'action': 'list', // 动作标识，必填
+					'recv_user_id': '', // 接收人用户id， 非必填
+					'data': {}
+				}
+				that.globalData.socketTask.onOpen((res) => {
+					that.globalData.socketTask.send({
+						data: JSON.stringify(obj),
+						async success(res) {
+							that.globalData.is_open_socket = true
+							console.log("消息发送成功");
+						},
+					});
+				})
+
+				// // 接收服务器返回的消息
+				// // 注：只有连接正常打开中 ，才能正常收到消息
+	 			that.globalData.socketTask.onMessage((res) => {
+					console.log("收到服务器内容：");
+					var val = JSON.parse(res.data)
+					if (val.action == 'list') {
+						var obj1 = {
+							'action': 'list', // 动作标识，必填
+							'recv_user_id': that.globalData.userId, // 接收人用户id， 非必填
+							'data': {
+								'msg_status': false, // 消息未读
+								'msg_info': '', // 发送消息
+							}
+						}
+						that.globalData.socketTask.send({
+							data: JSON.stringify(obj1),
+							async success(res) {
+								// console.log("消息发送成功");
+							},
+						});
+					} else if (val.action == 'none') {
+						// console.log('进入了')
+						that.globalData.list = val.data
+						console.log(that.globalData.list)
+						this.$store.state.list = val.data
+						// console.log(this.$store.state.list)
+					} else if (val.action == 'recv_video') {
+						// console.log(val.data)
+						that.globalData.video = val.data
+						this.$store.state.video = val.data
+						console.log(this.$store.state.video)
+					}
+				});
+				// console.log(that.socketTask)
+
+			},
+		},
 	}
 </script>
 

MingGaoApp/main.js

@@ -14,6 +14,11 @@ Vue.use(uView);
 import {myRequest} from './util/api.js'
 Vue.prototype.$myRequest=myRequest
 
+// 引入store
+import store from './store'
+// 把vuex定义成全局组件
+Vue.prototype.$store = store
+
 import config from "./util/url.js"
 Vue.prototype.baseUrl = config.baseUrl
 app.$mount()

MingGaoApp/pages.json

@@ -14,27 +14,39 @@
 			"path": "pages/index/index",
 			"style": {
 				"navigationBarTitleText": "我的",
-				"navigationBarBackgroundColor":"#FFFFFF",
+				"navigationBarBackgroundColor": "#FFFFFF",
 				"enablePullDownRefresh": true
 			}
 		}, {
 			"path": "pages/response/index",
 			"style": {
 				"navigationBarTitleText": "应答中心",
-				"navigationBarBackgroundColor":"#f7f7f7",
+				"navigationBarBackgroundColor": "#f7f7f7",
 				"enablePullDownRefresh": true
 			}
 
 		},
 		{
+			"path": "pages/response/video",
+			"style": {
+				"navigationBarTitleText": "视频通话",
+				"navigationBarBackgroundColor": "#f7f7f7",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+		
+		},
+		{
 			"path": "pages/response/details",
 			"style": {
 				"navigationBarTitleText": "应答中心详情",
-				"navigationBarBackgroundColor":"#f7f7f7",
-				"enablePullDownRefresh": false
+				"navigationBarBackgroundColor": "#f7f7f7",
+				"enablePullDownRefresh": false,
+				"disableSwipeBack": true
 			}
-		
-		}, {
+
+		},
+		{
 			"path": "pages/my/index",
 			"style": {
 				"navigationBarTitleText": "",
@@ -45,66 +57,54 @@
 			"path": "pages/supervise/index",
 			"style": {
 				"navigationBarTitleText": "",
-				"navigationBarBackgroundColor":"#FFFFFF"
+				"navigationBarBackgroundColor": "#FFFFFF"
+			}
+
+		}, {
+			"path": "pages/my/myinfo",
+			"style": {
+				"navigationBarTitleText": "个人中心",
+				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#FFFFFF"
+			}
+
+		}, {
+			"path": "pages/my/password",
+			"style": {
+				"navigationBarTitleText": "修改密码",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/monitorlog",
+			"style": {
+				"navigationBarTitleText": "监测日志",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/addcont",
+			"style": {
+				"navigationBarTitleText": "新增内容",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/version",
+			"style": {
+				"navigationBarTitleText": "更新记录",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/my/mymonit",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
 			}
 
 		}
-	    ,{
-            "path" : "pages/my/myinfo",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "个人中心",
-                "enablePullDownRefresh": false,
-				"navigationBarBackgroundColor":"#FFFFFF"
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/password",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "修改密码",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/monitorlog",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "监测日志",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/addcont",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "新增内容",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/version",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "更新记录",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/my/mymonit",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-    ],
+	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "",

MingGaoApp/pages/response/details.vue

@@ -1,12 +1,12 @@
 <template>
 	<view class="details_box" :style="'height:' +  phoneHeight + 'px'">
 		<!-- 对话列表 -->
-		<view class="details_ul">
-			<view class="details_list" v-for="item in 34">
+		<view class="details_ul" id="msgBox">
+			<view class="details_list" v-for="item in msg_list">
 				<!-- me -->
-				<view class="list_msgBox1">
+				<view class="list_msgBox1" v-if="item.is_right == true">
 					<view class="list_msgText">
-						啊什么鬼啊什么鬼啊什么鬼啊什么鬼啊什么鬼啊？
+						{{ item.msg_info }}
 					</view>
 					<view class="list_triangle"></view>
 					<view class="list_img">
@@ -15,13 +15,13 @@
 				</view>
 
 				<!-- you -->
-				<view class="list_msgBox2">
+				<view class="list_msgBox2" v-if="item.is_right == false">
 					<view class="list_img">
 						<image src="../../static/image/6.png" mode=""></image>
 					</view>
 					<view class="list_triangle"></view>
 					<view class="list_msgText">
-						什么鬼啊什么鬼啊什么鬼啊什么鬼啊什么鬼啊什么鬼啊什么鬼啊什么鬼啊什么鬼啊？
+						{{ item.msg_info }}
 					</view>
 				</view>
 			</view>
@@ -29,25 +29,70 @@
 		</view>
 
 		<!-- input输入框 -->
-		<u--input type="text" class="details_input" maxlength="200" confirm-type="send" @confirm="search()" placeholder="请输入内容"
-		 border="surround" v-model="value" @change="sendChange"></u--input>
+		<u--input type="text" class="details_input" maxlength="200" confirm-type="send" @confirm="search()"
+			placeholder="请输入内容" border="surround" v-model="value" @change="sendChange"></u--input>
+
+		<!-- 警告提示 -->
+		<u-toast ref="uToast"></u-toast>
 	</view>
 </template>
 
 <script>
+	import store from '@/store/index.js';//需要引入store
+	let App = getApp();
+	var API = App.globalData.socketTask;
 	export default {
 		data() {
 			return {
 				phoneHeight: '', // 获取当前的屏幕高度
 				value: "", // input框值	
 				tltName: '', // 头部标题
+				val: {}, // 接收用户数据
+				msg_list: [], // 消息列表
+
+				// 警告提示
+				show: false,
 			}
 		},
+		watch: {
+			msg_list(val) {
+				// 实现打开聊天框后滚动条定位到最下方
+				this.$nextTick(() => {
+					var div = document.getElementById("msgBox");
+					div.scrollTop = div.scrollHeight;
+				});
+			},
+			
+			listData(news, old) {
+				// console.log(news, old)
+				for (var i = 0; i < news.length; i++) {
+					if (news[i].real_name == this.tltName) {
+						this.val = news[i]
+						this.msg_list = news[i].msg_list.reverse();
+					}
+				}
+				
+			}
+			
+		},
+		computed:{
+			listData () {
+				return store.state.list 
+			},
+		},
 		onLoad(options) {
-			console.log(111)
-			console.log(options)
-			this.tltName = options.name
+			console.log(store.state)
 			var that = this
+			var data = JSON.parse(options.data)
+			that.tltName = data.real_name
+			var arrayData = App.globalData.list
+			for (var i = 0; i < arrayData.length; i++) {
+				if (arrayData[i].real_name == data.real_name) {
+					that.val = arrayData[i]
+					that.msg_list = arrayData[i].msg_list.reverse();
+				}
+			}
+
 			uni.getSystemInfo({ //异步获取。
 				success(res) {
 					that.phoneHeight = res.windowHeight - 13; //窗口高度
@@ -61,14 +106,48 @@
 			},
 			// 按回车键发送数据
 			search() {
-				console.log(this.value)
+				var that = this
+				if (that.value !== "") {
+					var obj = {
+						'action': 'send', // 动作标识，必填
+						'recv_user_id': that.val.user_id, // 接收人用户id， 非必填
+						'data': {
+							'msg_status': false, // 消息未读
+							'msg_info': that.value, // 发送消息
+						}
+					}
+					App.globalData.userId = this.value
+					that.transmit(obj)
+				} else {
+					this.$refs.uToast.show({
+						message: '不能为空！',
+						type: 'error',
+						icon: true,
+					})
+				}
+			},
+
+			// websocket发送
+			transmit(obj) {
+				var that = this
+				API.send({
+					data: JSON.stringify(obj),
+					async success(res) {
+						console.log("消息发送成功");
+						that.msg_list = [...that.msg_list, {
+							msg_info: that.value,
+							is_right: true
+						}]
+						that.value = ''
+					},
+				});
 			},
 		},
-		
+
 		onReady() {
 			// 修改头部标题栏
 			uni.setNavigationBarTitle({
-			    title: this.tltName
+				title: this.tltName
 			});
 		},
 	}

MingGaoApp/pages/response/index.vue

@@ -3,20 +3,21 @@
 		<view class="response_ul">
 			<view class="response_list" v-for="item in list" @click="defail(item)">
 				<view class="response_left">
-					<u-badge numberType="overflow" shape="circle" :type="type" max="99" :value="value"></u-badge>
-					<image :src="item.img" mode=""></image>
+					<u-badge numberType="overflow" shape="circle" :type="type" max="99" :value="item.unread"></u-badge>
+					<!-- <image :src="item.img" mode=""></image> -->
+					<image src="https://cdn.uviewui.com/uview/album/1.jpg" mode=""></image>
 				</view>
 				<view class="response_right">
 					<view class="response_right_title">
 						<view class="response_right_titleName">
-							{{ item.name | name }}
+							{{ item.real_name | name }}
 						</view>
 						<view class="response_right_titleTime">
-							{{ item.time }}
+							{{ item.msg_list[0].create_time }}
 						</view>
 					</view>
 					<view class="response_right_text">
-						{{'现在是什么情况？现在是什么情况现在是什么情11' | msgData}}
+						{{ item.msg_list[0].msg_info | msgData}}
 					</view>
 				</view>
 			</view>
@@ -29,10 +30,76 @@
 
 		<!-- 返回顶部 -->
 		<u-back-top :scroll-top="scrollTop"></u-back-top>
+
+		<!-- 顶部弹出框 - 视频通话提示框 -->
+		<u-popup :safeAreaInsetTop="true" :closeOnClickOverlay="false" :customStyle="styleObj" :show="show" mode="top"
+			:round="10" @close="close" @open="open">
+			<view style="display: flex; justify-content: space-evenly; margin: 25rpx 0 0 0;">
+				<view style="display: flex;">
+					<view class="topUpImg">
+						<image src="https://cdn.uviewui.com/uview/album/1.jpg" mode=""></image>
+					</view>
+					<view class="topUpTxt">
+						<text>嚣张</text>
+						<text>邀请你进行视频通话..</text>
+					</view>
+				</view>
+
+				<view class="topUpBtn">
+					<u-button @click="close()" type="error" style="border-radius: 50px; width: 50px; height: 50px;"
+						size="mini" text="取消"></u-button>
+					<u-button @click="open()" type="success"
+						style="border-radius: 50px; width: 50px; height: 50px; margin: 0 0 0 15rpx;" size="mini"
+						text="确定"></u-button>
+				</view>
+			</view>
+		</u-popup>
+
+		<!-- 视频通话框 -->
+		<!-- <u-popup :show="videoShow" :closeOnClickOverlay="false" :customStyle="styleObj1" mode="center"
+			@close="videClose" @open="videOpen">
+
+			本地预览视图
+			<view class="video_me">
+				<zego-local-view :viewMode="publisherViewModeIndex"
+					style="height: 403.84rpx;flex: 1; border: 1px solid #0000;">
+				</zego-local-view>
+			</view>
+
+			服务器传来的预览图
+			<view class="video_you">
+				<zego-remote-view :viewMode="publisherViewModeIndex"
+					style="height: 403.84rpx;flex: 1; border: 1px solid #0000;">
+				</zego-remote-view>
+			</view>
+
+			<view class="video_btn">
+				<view class="video_imgList">
+					<view class="video_imgList1">
+						<view class="video_view">
+							<image src="../../static/image/9.png" mode=""></image>
+						</view>
+						<view class="">翻转镜头</view>
+					</view>
+					<view class="video_imgList2">
+						<view class="video_view">
+							<image src="../../static/image/8.png" mode=""></image>
+						</view>
+						<view class="">切换语音通话</view>
+					</view>
+				</view>
+				
+				<u-button type="error" style="border-radius: 50px; width: 50px; height: 50px;" size="mini" text="关闭">
+				</u-button>
+			</view>
+		</u-popup> -->
 	</view>
 </template>
 
 <script>
+	import store from '@/store/index.js'; //需要引入store
+	let App = getApp();
+	var API = App.globalData.socketTask;
 	import permision from "@/zego-express-video-uniapp/permission.js";
 	// import ZegoExpressEngine from '@/zego-express-video-uniapp/lib/ZegoExpressEngine';
 	import {
@@ -47,11 +114,10 @@
 	} from '@/zego-express-video-uniapp/KeyCenter.js'
 	import ZegoLocalView from '@/zego-express-video-uniapp/zego-view/ZegoLocalView';
 	import ZegoRemoteView from '@/zego-express-video-uniapp/zego-view/ZegoRemoteView';
-	let roomid = "00002"
 	export default {
 		components: {
-			ZegoLocalView: ZegoLocalView,
-			ZegoRemoteView: ZegoRemoteView
+			// ZegoLocalView: ZegoLocalView,
+			// ZegoRemoteView: ZegoRemoteView
 		},
 		// 过滤
 		filters: {
@@ -75,87 +141,7 @@
 			return {
 				loading: false, // 加载
 				scrollTop: 0, // 返回顶部
-				list: [{
-						name: '测试账号1',
-						time: '2022-01-11 11:11:22',
-						img: 'https://cdn.uviewui.com/uview/album/1.jpg',
-					},
-					{
-						name: '测试账号2',
-						time: '2022-01-11 11:11:22',
-						img: 'https://cdn.uviewui.com/uview/album/2.jpg',
-					},
-					{
-						name: '测试账号3',
-						time: '2022-01-11 11:11:22',
-						img: 'https://cdn.uviewui.com/uview/album/3.jpg',
-					},
-					{
-						name: '测试账号4',
-						time: '2022-01-11 11:11:22',
-						img: 'https://cdn.uviewui.com/uview/album/4.jpg',
-					},
-					{
-						name: '测试账号5',
-						time: '2022-01-11 11:11:22',
-						img: 'https://cdn.uviewui.com/uview/album/5.jpg',
-					},
-					{
-						name: '测试账号6',
-						time: '2022-01-11 11:11:22',
-						img: 'https://cdn.uviewui.com/uview/album/6.jpg',
-					},
-					{
-						name: '测试账号7',
-						time: '2022-01-11 11:11:22',
-						img: 'https://cdn.uviewui.com/uview/album/7.jpg',
-					},
-					{
-						name: '测试账号8',
-						time: '2022-01-11 11:11:22',
-						img: 'https://cdn.uviewui.com/uview/album/8.jpg',
-					},
-					{
-						name: '测试账号9',
-						time: '2022-01-11 11:11:22',
-						img: 'https://cdn.uviewui.com/uview/album/9.jpg',
-					},
-					{
-						name: '测试账号10',
-						time: '2022-01-11 11:11:22',
-						img: 'https://cdn.uviewui.com/uview/album/10.jpg',
-					},
-					{
-						name: '测试账号10',
-						time: '2022-01-11 11:11:22',
-						img: 'https://cdn.uviewui.com/uview/album/10.jpg',
-					},
-					{
-						name: '测试账号10',
-						time: '2022-01-11 11:11:22',
-						img: 'https://cdn.uviewui.com/uview/album/10.jpg',
-					},
-					{
-						name: '测试账号10',
-						time: '2022-01-11 11:11:22',
-						img: 'https://cdn.uviewui.com/uview/album/10.jpg',
-					},
-					{
-						name: '测试账号10',
-						time: '2022-01-11 11:11:22',
-						img: 'https://cdn.uviewui.com/uview/album/10.jpg',
-					},
-					{
-						name: '测试账号10',
-						time: '2022-01-11 11:11:22',
-						img: 'https://cdn.uviewui.com/uview/album/10.jpg',
-					},
-					{
-						name: '测试账号10',
-						time: '2022-01-11 11:11:22',
-						img: 'https://cdn.uviewui.com/uview/album/10.jpg',
-					},
-				],
+				list: [],
 				page: 0,
 
 				// 消息通知
@@ -164,13 +150,42 @@
 
 				// 即构
 				engine: undefined,
+				videoObj: null,
 				userid: "Uni" + Math.floor(Math.random() * 1000000).toString(),
 
-				// 文本消息
-				websock: null,
-				urlData: "ws://192.168.1.17:12345/api/api_gateway?method=control_center.real_time.im_message",
+				// 弹出框
+				show: false,
+				styleObj: {
+					display: 'flex',
+					backgroundColor: "#fff",
+					height: '500px'
+				},
+
+				// videoShow: false, // 视频通话框
+				// styleObj1: {
+				// 	backgroundColor: "#fff",
+				// 	height: '100%',
+				// 	width: '100%'
+				// },
+				// publisherViewModeIndex: 0, // 本地预览图
+				isPublishingStream: false,
 			}
 		},
+		watch: {
+			videoData(news, old) {
+				console.log('触发了')
+				console.log(news)
+				if (news) {
+					this.videoObj = news
+					this.show = true
+				}
+			},
+		},
+		computed: {
+			videoData() {
+				return store.state.video
+			},
+		},
 		methods: {
 			loadmoreAxios() {
 				console.log(this.list)
@@ -178,6 +193,7 @@
 
 			// 即构 - 视频通话 初始化
 			async setup() {
+				var that = this
 				// 创建引擎
 				let profile = {
 					appID: AppID,
@@ -185,122 +201,129 @@
 					scenario: ZegoScenario.General
 				}
 				this.engine = await ZegoExpressEngine.createEngineWithProfile(profile);
-				console.log(this.engine)
-				// this.addListeners();
-				console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>' + roomid)
-				this.engine.loginRoom(roomid, {
-					userID: this.userid,
-					userName: this.userid
+				// console.log(this.engine)
+				this.addListeners();
+				// console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>' + that.videoObj.room_id)
+				this.engine.loginRoom(that.videoObj.room_id, {
+					userID: that.videoObj.room_id,
+					userName: that.videoObj.room_id
 				}, {
 					isUserStatusNotify: true
 				});
 			},
 
 			// 即构 - 视频通话 监听房间
-			addListeners() {},
+			addListeners() {
+				// 房间状态变化通知
+				this.engine.on("roomStateUpdate", (roomID, state, errorCode, extendedData) => {
+					console.log('房间状态变化')
+				});
 
-			// 实时通信 - 初始化
-			msgInit() {
-				var that = this
-				// if (typeof WebSocket === "undefined") {
-				// 	console.log('您的浏览器不支持sooket')
-				// } else {
-				uni.getStorage({
-					key: 'session_key',
-					success: function(res) {
-						console.log(res.data)
-						uni.connectSocket({
-							url: that.urlData + "&token=" + res.data,
-							// data() {
-							// 	return {
-							// 		token: res.data
-							// 	}
-							// },
-							header: {
-								'content-type': 'application/json'
-							},
-							protocols: ['protocol1'],
-							method: 'GET',
-							success: function(res) {
-								console.log(res)
-							},
-							fail: function(err) {
-								console.log(err)
-							},
-						})
-
-						// 监听WebSocket连接打开成功事件
-						// uni.onSocketOpen(function(res) {
-						// 	console.log('WebSocket连接已打开！');
-						// 	// uni.sendSocketMessage({
-						// 	// 	data: obj,
-						// 	// 	success: function (res) {
-						// 	// 		console.log(res)
-						// 	// 	},
-						// 	// 	fail: function (err) {
-						// 	// 		console.log(err)
-						// 	// 	},
-						// 	// });
-
-						// })
-
-						// // 监听WebSocket连接打开失败事件
-						// uni.onSocketError(function(res) {
-						// 	console.log(res)
-						// 	console.log('WebSocket连接打开失败，请检查！');
-						// });
-
-						//监听socket打开
-						uni.onSocketOpen(() => {
-							// this.isSocketOpen = true
-							console.log('WebSocket连接已打开！');
-						})
-						//监听socket关闭
-						uni.onSocketClose(() => {
-							// this.isSocketOpen = false
-							console.log('WebSocket连接已关闭！');
-						})
-						//监听socket错误
-						uni.onSocketError(() => {
-							this.isSocketOpen = false
-							console.log('WebSocket连接打开失败');
-						})
-
-						var obj = {};
-						obj = {
-							action: "list",
-							recv_user_id: '167',
-							data: {
-								msg_status: false,
-								msg_info: ""
-							}
-						};
-						console.log('222222')
-						uni.onSocketMessage((res) => {
-							console.log(res)
-							console.log(('-------------------------------'))
-						})
-					}
+				// 房间用户变化通知
+				this.engine.on("roomUserUpdate", (roomID, updateType, userList) => {
+					console.log('房间用户变化通知')
+				});
+
+				// 房间内其他用户推的流变化通知
+				this.engine.on("roomStreamUpdate", (roomID, updateType, streamList) => {
+					console.log('房间内其他用户推的流变化通知')
+				});
+
+				// 房间内在线用户数量回调
+				this.engine.on("roomOnlineUserCountUpdate", (roomID, count) => {
+					console.log(roomID)
+					console.log(count)
+					console.log('>?>>>>>>>>>>>>>>>>>>>>>>>在线用户有变化')
+				});
+
+				// 拉流质量回调
+				this.engine.on("playerQualityUpdate", (streamID, quality) => {
+					console.log('拉流质量回调')
+				});
+
+				// 推流质量回调
+				this.engine.on("publisherQualityUpdate", (streamID, quality) => {
+					console.log('推流质量回调')
+				});
+
+				// 采集视频大小变更回调
+				this.engine.on("publisherVideoSizeChanged", (width, height, channel) => {
+					console.log('采集视频大小变更回调')
+				});
+
+				// 拉流分辨率变更通知
+				this.engine.on("playerVideoSizeChanged", (streamID, width, height) => {
+					console.log('拉流分辨率变更通知')
 				});
-				// }
 			},
 
 			// 进入详情
 			defail(data) {
-				console.log(data)
+				var that = this
+				if (App.globalData.is_open_socket) {
+					// websocket的服务器的原理是:发送一次消息,同时返回一组数据【否则服务器会进去死循环崩溃】
+					// 进入详情前先发送已经阅读过消息
+					var obj = {
+						'action': 'read', // 动作标识，必填
+						'send_user_id': data.user_id, // 接收人用户id， 非必填
+						'data': {}
+					}
+					API.send({
+						data: JSON.stringify(obj),
+						async success(res) {
+							console.log("消息发送成功");
+						},
+					});
+					uni.navigateTo({
+						url: '/pages/response/details?data=' + JSON.stringify(data)
+					})
+				} else {
+					console.log('没有进入')
+				}
+			},
+
+			// 弹出框
+			open() {
+				console.log('open');
 				uni.navigateTo({
-					url: '/pages/response/details?name=' + data.name
-					// url: '/pages/response/details'
+					url: '/pages/response/video?videoObj=' + JSON.stringify(this.videoObj)
 				})
+				this.show = false
+			},
+			close() {
+				this.show = false
+				console.log('close');
+			},
+
+			// 视频通话弹框
+			// videOpen() {
+			// 	console.log('open');
+			// },
+			// videClose() {
+			// 	console.log('close');
+			// },
+			
+			// 推流 - 展示视图
+			onPublish() {
+				// 设置视频配置
+				ZegoExpressEngine.instance().setVideoConfig(this.videoObj.room_id);
+				
+				if (this.isPublishingStream) {
+					this.engine.stopPreview();
+					this.engine.stopPublishingStream();
+					this.publishBtnName = "Start Publishing";
+				} else {
+					this.engine.startPreview();
+					this.engine.startPublishingStream(this.videoObj.room_id);
+					this.publishBtnName = "Stop Publishing";
+				}
+				this.isPublishingStream = !this.isPublishingStream;
 			},
 		},
 
 		async onLoad() {
 			// uni.startPullDownRefresh(); // 开始刷新
 
-			// 实时通信 - 初始化
-			this.msgInit()
-
 			// 即构 - 视频通话
 			// 获取系统信息同步接口
 			// if (uni.getSystemInfoSync().platform === 'android') {
@@ -310,8 +333,16 @@
 			// await this.setup()
 		},
 
-
-
+		onShow() {
+			var that = this
+			var a = App.globalData.list
+			for (var i = 0; i < a.length; i++) {
+				if (a[i].msg_list[0].im_id == 1) {
+					a[i].msg_list.reverse()
+				}
+			}
+			this.list = App.globalData.list; // 倒叙
+		},
 
 		// 下拉刷新
 		onPullDownRefresh() {
@@ -388,13 +419,114 @@
 			}
 		}
 
+
+		.topUpImg {
+			image {
+				width: 110rpx;
+				height: 110rpx;
+				border-radius: 15rpx;
+			}
+
+			margin: 15rpx 0 0 15rpx;
+		}
+
+		.topUpTxt {
+			margin: 45rpx 0 0 15rpx;
+
+			text {
+				color: #979994;
+				font-size: 28rpx;
+				display: block;
+			}
+		}
+
+		.topUpBtn {
+			display: flex;
+			margin: 25rpx 0 0 0;
+		}
+
+		// 视频通话
+		.video_you {
+			position: relative;
+			// border: 1px solid #000;
+			width: 100%;
+			height: 100%;
+			overflow: hidden;
+		}
+
+		.video_me {
+			// border: 1px solid #000;
+			width: 200rpx;
+			height: 300rpx;
+			position: absolute;
+			right: 0;
+			top: 0;
+		}
+		
+		.video_btn {
+			// border: 1px solid;
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			.video_imgList {
+				display: flex;
+				justify-content: space-evenly;
+				.video_imgList1 {
+					// border: 1px solid;
+					// background: rgba(0, 0, 0, .5);
+					.video_view {
+						background: rgba(0, 0, 0, .5);
+						border: 1px solid;
+						border-radius: 50px;
+						width: 50px;
+						height: 50px;
+						margin: 0 auto;
+						image {
+							width: 50rpx;
+							height: 50rpx;
+							margin: 24rpx 0 0 25rpx;
+						}
+					}
+					view {
+						color: #fff;
+						font-size: 20rpx;
+					}
+				}
+				.video_imgList2 {
+					// border: 1px solid;
+					// background: rgba(0, 0, 0, .5);
+					.video_view {
+						border: 1px solid;
+						background: rgba(0, 0, 0, .5);
+						margin: 0 auto;
+						border-radius: 50px;
+						width: 50px;
+						height: 50px;
+						image {
+							width: 50rpx;
+							height: 50rpx;
+							margin: 24rpx 0 0 25rpx;
+						}
+					}
+					view {
+						color: #fff;
+						font-size: 20rpx;
+					}
+				}
+			}
+		}
 	}
 
 	// uview 样式修改
 	/deep/.u-badge--error {
 		position: absolute;
-		left: 90rpx;
-		top: 20rpx;
+		left: 105rpx;
+		top: 15rpx;
 		z-index: 10;
 	}
+
+	/deep/.u-slide-down-enter-active {
+		height: 200rpx;
+	}
 </style>

MingGaoApp/pages/response/video - 副本.nvue

@@ -0,0 +1,311 @@
+<template>
+	<view class="video_box" :style="'height:' +  phoneHeight + 'px'">
+		<!-- 本地预览视图 -->
+		<view class="video_me">
+			<zego-local-view :viewMode="publisherViewModeIndex"
+				style="width: 100%; flex: 1; border: 1px solid #0000; z-index: 20">
+			</zego-local-view>
+		</view>
+
+		<!-- 服务器传来的预览图 -->
+		<view class="video_you">
+			<zego-remote-view :viewMode="publisherViewModeIndex"
+				style="height: 403.84rpx;flex: 1; border: 1px solid #0000;">
+			</zego-remote-view>
+		</view>
+
+		<view class="video_btn">
+			<view class="video_imgList">
+				<view class="video_imgList1">
+					<view class="video_view">
+						<image src="../../static/image/9.png" mode=""></image>
+					</view>
+					<view class="">翻转镜头</view>
+				</view>
+				<view class="video_imgList2">
+					<view class="video_view">
+						<image src="../../static/image/8.png" mode=""></image>
+					</view>
+					<view class="">切换语音通话</view>
+				</view>
+			</view>
+
+			<u-button type="error" @click="offVideo()" style="margin: 0 auto; border-radius: 50px; width: 50px; height: 50px;" size="mini" text="关闭">
+			</u-button>
+		</view>
+		
+		<!-- 消息提醒 -->
+		<!-- <u-toast ref="uToast" type="typeVide" :message="videoMsg"></u-toast> -->
+		<u-toast ref="uToast"></u-toast>
+	</view>
+</template>
+
+<script>
+	import permision from "@/zego-express-video-uniapp/permission.js";
+	import ZegoExpressEngine from '@/zego-express-video-uniapp/lib/ZegoExpressEngine';
+	import {
+		ZegoScenario,
+		ZegoRoomState,
+		ZegoUpdateType,
+		// ZegoViewMode
+	} from '@/zego-express-video-uniapp/lib/ZegoExpressDefines'
+	import {
+		AppID,
+		AppSign
+	} from '@/zego-express-video-uniapp/KeyCenter.js'
+	import ZegoLocalView from '@/zego-express-video-uniapp/zego-view/ZegoLocalView';
+	import ZegoRemoteView from '@/zego-express-video-uniapp/zego-view/ZegoRemoteView';
+	export default {
+		data() {
+			return {
+				phoneHeight: '', // 获取当前的屏幕高度
+				
+				// 即构
+				publisherViewModeIndex: 0, // 本地预览图
+				engine: undefined,
+				videoObj: null,
+				userid: "Uni" + Math.floor(Math.random() * 1000000).toString(),
+				isPublishingStream: false,
+				
+				// 消息提醒
+				// typeVide: '',
+				// videoMsg: "",
+			}
+		},
+		components: {
+			ZegoLocalView: ZegoLocalView,
+			ZegoRemoteView: ZegoRemoteView
+		},
+		
+		methods: {
+			// 即构 - 视频通话 初始化
+			async setup() {
+				var that = this
+				// 创建引擎
+				let profile = {
+					appID: AppID,
+					appSign: AppSign,
+					scenario: ZegoScenario.General
+				}
+				this.engine = await ZegoExpressEngine.createEngineWithProfile(profile);
+				this.engine.useFrontCamera(false); // 设置前后摄像头
+				// console.log(this.engine)
+				this.addListeners();
+				// console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>' + that.videoObj.room_id)
+				this.engine.loginRoom(that.videoObj.room_id, {
+					userID: that.videoObj.room_id,
+					userName: that.videoObj.room_id
+				}, {
+					isUserStatusNotify: true
+				});
+			},
+			
+			// 即构 - 视频通话 监听房间
+			addListeners() {
+				// 房间状态变化通知
+				this.engine.on("roomStateUpdate", (roomID, state, errorCode, extendedData) => {
+					console.log('房间状态变化')
+				});
+			
+				// 房间用户变化通知
+				this.engine.on("roomUserUpdate", (roomID, updateType, userList) => {
+					console.log('房间用户变化通知')
+					console.log(updateType)
+					console.log(userList)
+				});
+			
+				// 房间内其他用户推的流变化通知
+				this.engine.on("roomStreamUpdate", (roomID, updateType, streamList) => {
+					console.log('房间内其他用户推的流变化通知')
+				});
+			
+				// 房间内在线用户数量回调
+				this.engine.on("roomOnlineUserCountUpdate", (roomID, count) => {
+					console.log(roomID)	
+					console.log(count)
+					console.log('>?>>>>>>>>>>>>>>>>>>>>>>>在线用户有变化')
+				});
+			
+				// 拉流质量回调
+				this.engine.on("playerQualityUpdate", (streamID, quality) => {
+					console.log('拉流质量回调')
+				});
+			
+				// 推流质量回调
+				this.engine.on("publisherQualityUpdate", (streamID, quality) => {
+					console.log('推流质量回调')
+				});
+			
+				// 采集视频大小变更回调
+				this.engine.on("publisherVideoSizeChanged", (width, height, channel) => {
+					console.log('采集视频大小变更回调')
+				});
+			
+				// 拉流分辨率变更通知
+				this.engine.on("playerVideoSizeChanged", (streamID, width, height) => {
+					console.log('拉流分辨率变更通知')
+				});
+			},
+			
+			// 推流 - 展示视图 - 本地视频流
+			onPublish() {
+				// 设置视频配置
+				ZegoExpressEngine.instance().setVideoConfig(this.videoObj.room_id);
+				
+				if (this.isPublishingStream) {
+					this.engine.stopPreview();
+					this.engine.stopPublishingStream();
+					this.publishBtnName = "Start Publishing";
+				} else {
+					this.engine.startPreview();
+					this.engine.startPublishingStream(this.videoObj.room_id);
+					this.publishBtnName = "Stop Publishing";
+				}
+				this.isPublishingStream = !this.isPublishingStream;
+			},
+		
+			// 挂断退出
+			offVideo() {
+				this.engine.logoutRoom(this.videoObj.room_id)
+				this.$refs.uToast.show({
+					type: 'default',
+					message: '结束视频通话！',
+					url: '/pages/response/index',
+				})
+				// uni.navigateTo({
+				// 	url: "/pages/response/index"
+				// })
+			},
+		},
+
+		async onLoad(optinos) {
+			var that = this
+			// that.videoObj = JSON.parse(optinos.videoObj)
+			// console.log(that.videoObj)
+			// 即构 - 视频通话
+			// 获取系统信息同步接口
+			if (uni.getSystemInfoSync().platform === 'android') {
+				await permision.requestAndroidPermission('android.permission.RECORD_AUDIO');
+				await permision.requestAndroidPermission('android.permission.CAMERA');
+			}
+			await this.setup()
+			this.onPublish(); // 推流
+			uni.getSystemInfo({ //异步获取。
+				success(res) {
+					// that.phoneHeight = res.windowHeight - 13; //窗口高度
+					that.phoneHeight = res.windowHeight; //窗口高度
+				}
+			});
+		},
+		
+		// 监听页面返回
+		onBackPress() {
+			console.log('返回了！')
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.video_box {
+		// height: 1667px;
+		// border: 1px solid red;
+		// 视频通话
+		.video_you {
+			background: #fff;
+			position: relative;
+			// border: 1px solid #000;
+			width: 400px;
+			height: 840px;
+			overflow: hidden;
+		}
+
+		.video_me {
+			// border: 1px solid #000;
+			// z-index: 100;
+			background: #fff;
+			// width: 200rpx;
+			// height: 300rpx;
+			width: 200px;
+			height: 300px;
+			position: absolute;
+			right: 10px;
+			top: 10px;
+		}
+
+		.video_btn {
+			border: 1px solid #fff;
+			position: absolute;
+			bottom: 35rpx;
+			left: 0;
+			// width: 100%;
+			width: 400px;
+
+			.video_imgList {
+				// display: flex;
+				// justify-content: space-evenly;
+				/* #ifndef APP-NVUE */
+				display: flex;
+				flex-direction: row;
+				justify-content: space-evenly;
+				//建议:在用到该属性或者你觉得可以不加时不管水平还是垂直,均最好加上,方便后期编译到不同平台减少后期修改布局样式造成的差异
+
+
+				.video_imgList1 {
+
+					// border: 1px solid;
+					// background: rgba(0, 0, 0, .5);
+					.video_view {
+						background: rgba(0, 0, 0, .5);
+						border: 1px solid;
+						border-radius: 50px;
+						width: 50px;
+						height: 50px;
+						margin: 0 auto;
+
+						image {
+							// width: 50rpx;
+							// height: 50rpx;
+							height: 30px;
+							width: 30px;
+							margin: 24rpx 0 0 25rpx;
+						}
+					}
+
+					view {
+						line-height: 30px;
+						color: #fff;
+						font-size: 20rpx;
+					}
+				}
+
+				.video_imgList2 {
+
+					// border: 1px solid;
+					// background: rgba(0, 0, 0, .5);
+					.video_view {
+						border: 1px solid;
+						background: rgba(0, 0, 0, .5);
+						margin: 0 auto;
+						border-radius: 50px;
+						width: 50px;
+						height: 50px;
+
+						image {
+							// width: 50rpx;
+							// height: 50rpx;
+							width: 50px;
+							height: 50px;
+							margin: 24rpx 0 0 25rpx;
+						}
+					}
+
+					view {
+						line-height: 30px;
+						color: #fff;
+						font-size: 20rpx;
+					}
+				}
+			}
+		}
+	}
+</style>

MingGaoApp/pages/response/video.nvue

@@ -0,0 +1,377 @@
+<template>
+	<view class="video_box" :style="'height:' +  phoneHeight + 'px'">
+		<!-- 本地预览视图 -->
+		<view class="video_me" :style="'height:' +  phoneHeight + 'px'">
+			<zego-local-view v-if="videoShow" :viewMode="publisherViewModeIndex"
+				style="width: 100%; flex: 1; border: 1px solid #0000; z-index: 20">
+			</zego-local-view>
+			
+			<zego-remote-view v-else :viewMode="publisherViewModeIndex"
+				style="height: 403.84rpx;flex: 1; z-index: 20">
+			</zego-remote-view>
+		</view>
+
+		<!-- 服务器传来的预览图 -->
+		<!-- <view class="video_you" @click="changeShow"> -->
+		<view class="video_you">
+			<zego-remote-view v-if="videoShow" :viewMode="publisherViewModeIndex"
+				style="height: 403.84rpx;flex: 1; z-index: 20">
+			</zego-remote-view>
+			
+			<zego-local-view v-else :viewMode="publisherViewModeIndex"
+				style="width: 100%; flex: 1; border: 1px solid #0000; z-index: 20">
+			</zego-local-view>
+		</view>
+
+		<view class="video_btn">
+			<view class="video_imgList">
+				<view class="video_imgList1">
+					<view class="video_view" @click="turn">
+						<image class="video_view_img" src="../../static/image/9.png" mode=""></image>
+					</view>
+					<text class="video_view_txt">翻转镜头</text>
+				</view>
+				<view class="video_imgList2">
+					<view class="video_view">
+						<image class="video_view_img" src="../../static/image/8.png" mode=""></image>
+					</view>
+					<text class="video_view_txt">切换语音通话</text>
+				</view>
+			</view>
+
+			<!-- 	<u-button type="error" class="offBtn" @click="offVideo()"  size="mini" text="关闭">
+			</u-button> -->
+			<image @click="offVideo()" style="width: 50px; height: 50px; margin: 0 0 0 330rpx;"
+				src="../../static/image/10.png" mode=""></image>
+		</view>
+
+		<!-- 消息提醒 -->
+		<u-toast ref="uToast"></u-toast>
+	</view>
+</template>
+
+<script>
+	import permision from "@/zego-express-video-uniapp/permission.js";
+	import ZegoExpressEngine from '@/zego-express-video-uniapp/lib/ZegoExpressEngine';
+	import {
+		ZegoScenario,
+		ZegoRoomState,
+		ZegoUpdateType,
+		// ZegoViewMode
+	} from '@/zego-express-video-uniapp/lib/ZegoExpressDefines'
+	import {
+		AppID,
+		AppSign
+	} from '@/zego-express-video-uniapp/KeyCenter.js'
+	import ZegoLocalView from '@/zego-express-video-uniapp/zego-view/ZegoLocalView';
+	import ZegoRemoteView from '@/zego-express-video-uniapp/zego-view/ZegoRemoteView';
+	export default {
+		data() {
+			return {
+				phoneHeight: '', // 获取当前的屏幕高度
+
+				// 即构
+				publisherViewModeIndex: 0, // 本地预览图
+				serveViewModeIndex: 0, // 服务器拉流预览图
+				engine: undefined,
+				videoObj: null,
+				userid: "Uni" + Math.floor(Math.random() * 1000000).toString(),
+				isPublishingStream: false,
+				shotShow: false, // 翻转镜头
+				videoShow: true, // 切换视频显示
+
+				// 消息提醒
+				// typeVide: '',
+				// videoMsg: "",
+			}
+		},
+		components: {
+			ZegoLocalView: ZegoLocalView,
+			ZegoRemoteView: ZegoRemoteView
+		},
+
+		methods: {
+			// 即构 - 视频通话 初始化
+			async setup() {
+				var that = this
+				// 创建引擎
+				let profile = {
+					appID: AppID,
+					appSign: AppSign,
+					scenario: ZegoScenario.General
+				}
+				this.engine = await ZegoExpressEngine.createEngineWithProfile(profile);
+				this.engine.useFrontCamera(this.shotShow); // 设置前后摄像头
+				// console.log(this.engine)
+				this.addListeners();
+				// console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>' + that.videoObj.room_id)
+				this.engine.loginRoom(that.videoObj.room_id, {
+					userID: that.videoObj.room_id,
+					userName: that.videoObj.room_id
+				}, {
+					isUserStatusNotify: true
+				});
+			},
+
+			// 即构 - 翻转镜头
+			turn() {
+				this.shotShow = !this.shotShow
+				this.engine.useFrontCamera(this.shotShow)
+			},
+			
+			// 切换视频显示
+			changeShow() {
+				this.videoShow = !this.videoShow
+				// this.onPublish()
+				this.engine.startPreview();
+				this.engine.startPublishingStream(this.videoObj.room_id);
+				this.publishBtnName = "Stop Publishing";
+				console.log(this.videoShow)
+			},
+			
+			// 即构 - 视频通话 监听房间
+			addListeners() {
+				// 房间状态变化通知
+				this.engine.on("roomStateUpdate", (roomID, state, errorCode, extendedData) => {
+					// console.log('房间状态变化')
+					if (state == "CONNECTED") {
+						// 与房间连接成功，只有当房间状态是连接成功时，才能进行推流、拉流等操作。
+						// 接下来的“预览并推流”的代码写在这里
+						console.log("房间连接成功");
+					}
+					if (state == "DISCONNECTED") {
+						// 与房间断开了连接
+						console.log("与房间断开连接");
+					}
+
+					if (state == "CONNECTING") {
+						// 与房间尝试连接中
+						console.log("与房间尝试连接中");
+					}
+				});
+
+				// 房间用户变化通知
+				this.engine.on("roomUserUpdate", (roomID, updateType, userList) => {
+					// console.log('房间用户变化通知')
+					// console.log(updateType)
+					// console.log(userList)
+					// if (updateType == "ADD") {
+					// 	console.log('hsdjshadjh')
+					// } else if (updateType == 1 ) {
+					// 	console.log('几十块的教科书')
+					// 	this.offVideo()
+					// }
+					console.log(updateType)
+					console.log(userList)
+					console.log("有其他用户进出房间");
+				});
+
+				// 房间内其他用户推的流变化通知
+				this.engine.on("roomStreamUpdate", (roomID, updateType, streamList) => {
+					console.log('房间内其他用户推的流变化通知')
+					console.log(updateType)
+					console.log(streamList)
+
+					// 房间内其他用户音视频流变化的通知
+					console.log("有其他用户开启或关闭音频");
+					if (updateType == "ADD") {
+						// 流新增，开始拉流
+						this.tensile(streamList[0].streamID);
+					} else if (updateType == "DELETE") {
+						// 流删除，停止拉流
+						this.notTensile(streamList[0].streamID);
+					}
+				});
+
+				// 房间内在线用户数量回调
+				// this.engine.on("roomOnlineUserCountUpdate", (roomID, count) => {
+				// 	// console.log(roomID)	
+				// 	// console.log(count)
+				// 	// console.log('>?>>>>>>>>>>>>>>>>>>>>>>>在线用户有变化')
+				// });
+
+				// 拉流质量回调
+				// this.engine.on("playerQualityUpdate", (streamID, quality) => {
+				// 	console.log('拉流质量回调')
+				// });
+
+				// // 推流质量回调
+				// this.engine.on("publisherQualityUpdate", (streamID, quality) => {
+				// 	// console.log('推流质量回调')
+				// });
+
+				// // 采集视频大小变更回调
+				// this.engine.on("publisherVideoSizeChanged", (width, height, channel) => {
+				// 	// console.log('采集视频大小变更回调')
+				// });
+
+				// // 拉流分辨率变更通知
+				// this.engine.on("playerVideoSizeChanged", (streamID, width, height) => {
+				// 	// console.log('拉流分辨率变更通知')
+				// });
+			},
+			
+			// 拉流 
+			tensile(roomId) {
+				this.engine.instance().startPlayingStream(roomId)
+			},
+			
+			// 停止拉流
+			notTensile(roomId) {
+				this.engine.instance().stopPlayingStream(roomId)
+			},
+			
+			// 推流 - 展示视图 - 本地视频流
+			onPublish() {
+				// 设置视频配置
+				// ZegoExpressEngine.instance().setVideoConfig(this.videoObj.room_id);
+
+				if (this.isPublishingStream) {
+					// 停止推流
+					this.engine.stopPreview();
+					this.engine.stopPublishingStream();
+					this.publishBtnName = "Start Publishing";
+				} else {
+					// 开始推流
+					this.engine.startPreview();
+					this.engine.startPublishingStream(this.videoObj.room_id);
+					this.publishBtnName = "Stop Publishing";
+				}
+				this.isPublishingStream = !this.isPublishingStream;
+			},
+			
+			// 停止推流
+			// notTensile() {},
+
+			// 挂断退出
+			offVideo() {
+				console.log('进入了啊')
+				this.engine.logoutRoom(this.videoObj.room_id)
+				this.$refs.uToast.show({
+					type: 'default',
+					message: '结束视频通话！',
+				})
+				setTimeout(() => {
+					uni.navigateBack({
+					    delta: 1
+					})
+				}, 1500)
+				// uni.redirectTo({
+				// 	url: "/pages/response/index"
+				// })
+				
+			},
+		},
+
+		async onLoad(optinos) {
+			var that = this
+			that.videoObj = JSON.parse(optinos.videoObj)
+			// console.log(that.videoObj)
+			// 即构 - 视频通话
+			// 获取系统信息同步接口
+			if (uni.getSystemInfoSync().platform === 'android') {
+				await permision.requestAndroidPermission('android.permission.RECORD_AUDIO');
+				await permision.requestAndroidPermission('android.permission.CAMERA');
+			}
+			await this.setup()
+			this.onPublish(); // 推流
+			uni.getSystemInfo({ //异步获取。
+				success(res) {
+					// that.phoneHeight = res.windowHeight - 13; //窗口高度
+					that.phoneHeight = res.windowHeight; //窗口高度
+				}
+			});
+		},
+
+		// 监听页面返回
+		onBackPress() {
+			console.log('返回了！')
+		},
+	}
+</script>
+
+<style lang="scss">
+	.video_box {
+		background: #000;
+
+		.video_you {
+			border: 1px solid;
+			background: #fff;
+			width: 150px;
+			height: 200px;
+			position: absolute;
+			right: 10px;
+			top: 10px;
+			overflow: hidden;
+		}
+
+		.video_me {
+			z-index: 100;
+			background: #000;
+			position: relative;
+			right: 0;
+			top: 0;
+		}
+
+		.video_btn {
+			position: absolute;
+			bottom: 35rpx;
+			left: 0;
+			width: 750rpx;
+
+			.video_imgList {
+				display: flex;
+				flex-direction: row;
+				justify-content: space-around;
+
+				// 翻转
+				.video_imgList1 {
+					.video_view {
+						background: rgba(0, 0, 0, .5);
+						border-radius: 50px;
+						width: 50px;
+						height: 50px;
+						margin: 0 auto;
+
+						.video_view_img {
+							height: 25px;
+							width: 25px;
+							margin: 24rpx 0 0 25rpx;
+						}
+					}
+
+					.video_view_txt {
+						color: #fff;
+						font-size: 14px;
+						line-height: 30px;
+						text-align: center;
+					}
+				}
+
+				// 语音通话
+				.video_imgList2 {
+					.video_view {
+						background: rgba(0, 0, 0, .5);
+						border-radius: 50px;
+						width: 50px;
+						height: 50px;
+						margin: 0 0 0 30rpx;
+
+						.video_view_img {
+							height: 25px;
+							width: 25px;
+							margin: 24rpx 0 0 25rpx;
+						}
+					}
+
+					.video_view_txt {
+						color: #fff;
+						font-size: 14px;
+						line-height: 30px;
+						text-align: center;
+					}
+				}
+			}
+		}
+	}
+</style>

MingGaoApp/store/index.js

@@ -0,0 +1,15 @@
+import Vue from "vue"
+import Vuex from "vuex"
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+	state: {
+		list: {}, // 列表以及聊天内容数据
+		video: null // 视频通话数据
+	},
+	mutations: {},
+	actions: {}
+})
+
+export default store