APP即时通讯功能

MingGaoApp/.hbuilderx/launch.json

@@ -1,20 +1,23 @@
-{ // 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"
-     	},
-     	"h5" : 
-     	{
-     		"launchtype" : "local"
-     	},
-     	"type" : "uniCloud"
-     }
+{
+    // 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"
+            },
+            "h5" : {
+                "launchtype" : "local"
+            },
+            "type" : "uniCloud"
+        },
+        {
+            "playground" : "custom",
+            "type" : "uni-app:app-android"
+        }
     ]
 }

MingGaoApp/App.vue

@@ -1,12 +1,13 @@
 <script>
+	import config from '@/util/url.js'
 	export default {
 		globalData: {
 			token: "",
 
 			// 文本消息
 			socketTask: null,
-			urlData: "wss://www.toreskj.com/api/api_gateway?method=control_center.real_time.im_message",
-			// urlData: "ws://192.168.1.17:12345/api/api_gateway?method=control_center.real_time.im_message",
+			// urlData: "wss://www.toreskj.com/api/api_gateway?method=control_center.real_time.im_message",
+			urlData: config.wsUrl + "/api/api_gateway?method=control_center.real_time.im_message",
 			is_open_socket: false, // 确保websocket是打开状态
 			list: [],
 			userId: null, // 用户ID
@@ -23,7 +24,7 @@
 			reconnectTimeOutObj: null, // 重连之后多久再次重连
 			// 测试
 			app: [],
-			
+
 			// 消息发送加载
 			msgSetTime: null,
 		},
@@ -88,7 +89,7 @@
 					'recv_user_id': '', // 接收人用户id， 非必填
 					'data': {}
 				}
-				that.globalData.socketTask.onOpen((res) => {	
+				that.globalData.socketTask.onOpen((res) => {
 					console.log('websocket开启了')
 					// 清除重连定时器
 					// clearTimeout(that.globalData.reconnectTimeOutObj)
@@ -99,7 +100,7 @@
 							that.globalData.is_open_socket = true
 							console.log("消息发送成功");
 							uni.hideLoading(); // 关闭通信异常弹框
-							
+
 						},
 					});
 					that.start() // 开启心跳机制
@@ -124,30 +125,66 @@
 						}
 						that.globalData.socketTask.send({
 							data: JSON.stringify(obj1),
-							async success(res) {
-							},
+							async success(res) {},
 						});
 						that.globalData.userId = null
 					} else if (val.action == 'none') {
 						console.log('进入了none', val)
 						that.globalData.list = val.data
-						this.$store.state.list = val.data
+						// this.$store.state.list = val.data
+						this.$store.commit('updateMessageList', val.data)
+						
 					} else if (val.action == 'recv_video') {
+						console.warn('recv_video---------------- 1', val.data)
 						that.globalData.video = val.data
-						this.$store.state.video = val.data
+						// this.$store.state.video = val.data
+						
+						uni.switchTab({
+							url: '/pages/response/index',
+							success(res) {
+								console.warn(res, '-------------- into room ')
+							},
+							fail(err) {
+								console.error(err)
+							},
+							complete() {
+								console.warn('-------------- into room complete')
+							}
+						})
+						
+						this.$store.commit('updateVideoInfo', val.data)
+						
 						setTimeout(() => {
 							console.log('跳转了')
 							this.$store.getters.watchData;
 						}, 1500)
+					}else if(val.action == 'send_video_rsp'){
+						console.warn('recv_video---------------- response', val.data)
+						this.$store.commit('updateVideoSelfRoomInfo', val.data)
+						console.warn('into romm ready ------------------', this.roomInfo, obj.action ===
+							'send_video')
+						console.warn('into romm ------------------', this.roomInfo)
+						uni.navigateTo({
+							url: '/pages/response/video?videoObj=' + JSON.stringify(val.data),
+							success(res) {
+								console.warn(res, '-------------- into room ')
+							},
+							fail(err) {
+								console.error(err)
+							},
+							complete() {
+								console.warn('-------------- into room complete')
+							}
+						})
 					} else if (val.action == 'ok') {
 						this.start(); // 心跳机制
 					}
-					
-					
+
+
 					// this.reset();
 					// console.log('消息可正常接收');
 				});
-				
+
 				// 连接断开
 				// 如果希望websocket连接一直保持，在close或者error上绑定重新连接方法。
 				this.globalData.socketTask.onClose((res) => {
@@ -157,10 +194,10 @@
 						that.reconnect();
 					}, 5000)
 				})
-				
+
 				// 连接失败
 				that.globalData.socketTask.onError((res) => {
-					// console.log(res, '连接错误');
+					console.log(res, '连接错误');
 					uni.showLoading({
 						title: "通信异常，连接中..."
 					})
@@ -182,8 +219,8 @@
 						'type': 'App',
 						'recv_user_id': '', // 接收人用户id， 非必填
 						'data': {
-							 msg_status: false,
-							 msg_info: "",
+							msg_status: false,
+							msg_info: "",
 						}
 					}
 					that.globalData.socketTask.send({
@@ -226,7 +263,7 @@
 					this.lockReconnect = false;
 				}, 4000);
 			},
-			
+
 			// 清除重连
 			notReconnect() {
 				clearTimeout(this.globalData.reconnectTimeOutObj)
@@ -247,6 +284,7 @@
 
 <!-- // App.vue文件  中首行的位置引入，注意给style标签加入lang="scss"属性 -->
 <style lang="scss">
+	@import './common/zego-nvue.css';
 	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
 	@import "uview-ui/index.scss";
 </style>

MingGaoApp/common/_mixins.scss

@@ -0,0 +1,29 @@
+@mixin ellipsis($line: 1) {
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  @if $line == 1 {
+    width: 100%;
+    white-space: nowrap;
+  } @else {
+    display: -webkit-box;
+    word-break: break-all;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $line;
+  }
+}
+
+@mixin clearfix {
+  $selector: &;
+
+  @at-root {
+    #{$selector}::before,
+    #{$selector}::after {
+      display: table;
+      content: "";
+    }
+    #{$selector}::after {
+      clear: both;
+    }
+  }
+}

MingGaoApp/common/halfline.scss

@@ -0,0 +1,203 @@
+/**
+ * 默认主题下 $color-border-light
+ */
+
+$color-border-light: #979797;
+
+@mixin hairline-common() {
+  content: "";
+  position: absolute;
+  transform-origin: center;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+@mixin hairline-base($color: $color-border-light, $style: solid) {
+  @include hairline-common();
+
+  top: -50%;
+  left: -50%;
+  right: -50%;
+  bottom: -50%;
+  border: 0 $style $color;
+  transform: scale(0.5);
+}
+
+@mixin hairline-surround(
+  $color: $color-border-light,
+  $style: solid,
+  $width: 1px
+) {
+  position: relative;
+
+  &::after {
+    @include hairline-base($color, $style);
+
+    border-width: $width;
+  }
+}
+
+@mixin hairline-top($color: $color-border-light, $style: solid, $width: 1px) {
+  position: relative;
+
+  &::after {
+    @include hairline-base($color, $style);
+
+    border-top-width: $width;
+  }
+}
+
+@mixin hairline-bottom(
+  $color: $color-border-light,
+  $style: solid,
+  $width: 1px
+) {
+  position: relative;
+
+  &::after {
+    @include hairline-base($color, $style);
+
+    border-bottom-width: $width;
+  }
+}
+
+@mixin hairline-left($color: $color-border-light, $style: solid, $width: 1px) {
+  position: relative;
+
+  &::after {
+    @include hairline-base($color, $style);
+
+    border-left-width: $width;
+  }
+}
+
+@mixin hairline-right($color: $color-border-light, $style: solid, $width: 1px) {
+  position: relative;
+
+  &::after {
+    @include hairline-base($color, $style);
+
+    border-right-width: $width;
+  }
+}
+
+@mixin hairline-top-bottom(
+  $color: $color-border-light,
+  $style: solid,
+  $width: 1px
+) {
+  position: relative;
+
+  &::after {
+    @include hairline-base($color, $style);
+
+    border-top-width: $width;
+    border-bottom-width: $width;
+  }
+}
+
+@mixin hairline-bottom-relative(
+  $color: $color-border-light,
+  $style: solid,
+  $width: 1px,
+  $left: 0
+) {
+  position: relative;
+
+  &::after {
+    @include hairline-common();
+
+    top: auto;
+    left: $left;
+    right: 0;
+    bottom: 0;
+    transform: scaleY(0.5);
+    border-bottom: $width $style $color;
+  }
+}
+
+@mixin hairline-top-relative(
+  $color: $color-border-light,
+  $style: solid,
+  $width: 1px,
+  $left: 0
+) {
+  position: relative;
+
+  &::before {
+    @include hairline-common();
+
+    top: 0;
+    left: $left;
+    right: 0;
+    bottom: auto;
+    transform: scaleY(0.5);
+    border-top: $width $style $color;
+  }
+}
+
+@mixin hairline-left-relative(
+  $color: $color-border-light,
+  $style: solid,
+  $width: 1px,
+  $top: 0
+) {
+  position: relative;
+
+  &::after {
+    @include hairline-common();
+
+    top: $top;
+    left: 0;
+    right: auto;
+    bottom: 0;
+    transform: scaleX(0.5);
+    border-left: $width $style $color;
+  }
+}
+
+@mixin hairline-right-relative(
+  $color: $color-border-light,
+  $style: solid,
+  $width: 1px,
+  $top: 0
+) {
+  position: relative;
+
+  &::after {
+    @include hairline-common();
+
+    top: $top;
+    left: auto;
+    right: 0;
+    bottom: 0;
+    transform: scaleX(0.5);
+    border-right: $width $style $color;
+  }
+}
+
+@mixin line($num: 1) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @if ($num == 1) {
+    white-space: nowrap;
+  } @else {
+    display: -webkit-box;
+    -webkit-line-clamp: $num;
+
+    /* autoprefixer: off */
+    -webkit-box-orient: vertical;
+  }
+}
+
+/**
+ * 点击态
+ */
+@mixin active {
+  transition: background-color 0.3s;
+
+  &:active {
+    background-color: #f2f2f2;
+  }
+}

MingGaoApp/components/MIcon.vue

@@ -0,0 +1,30 @@
+<template>
+	<text class="svg-icon">{{svg}}</text>
+</template>
+
+<script>
+	export default {
+		name: "MIcon",
+		props: {
+			svg: {
+				type: String,
+				default: ''
+			}
+		}
+		data() {
+			return {
+
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+	.svg-icon {
+		width: 1em;
+		height: 1em;
+		vertical-align: -0.15em;
+		fill: currentColor;
+		overflow: hidden;
+	}
+</style>

MingGaoApp/components/uni-status-bar/uni-status-bar.vue

@@ -20,6 +20,7 @@
 	.uni-status-bar {
 		width: 750rpx;
 		height: 20px;
-		// height: var(--status-bar-height);
+		height: var(--status-bar-height);
+		background-color: #fff;
 	}
 </style>

MingGaoApp/manifest.json

@@ -2,8 +2,8 @@
     "name" : "智网监测",
     "appid" : "__UNI__1BA09AD",
     "description" : "",
-    "versionName" : "1.0.0",
-    "versionCode" : "100",
+    "versionName" : "1.0.1",
+    "versionCode" : 101,
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {
@@ -44,7 +44,9 @@
                 ]
             },
             /* ios打包配置 */
-            "ios" : {},
+            "ios" : {
+                "dSYMs" : false
+            },
             /* SDK配置 */
             "sdkConfigs" : {
                 "ad" : {}
@@ -104,7 +106,7 @@
                     "description" : "ZegoExpress音视频SDK(Express)是一款实时的音视频互动服务产品",
                     "platforms" : "Android,iOS",
                     "url" : "https://ext.dcloud.net.cn/plugin?id=3617",
-                    "android_package_name" : "uni.UNI03CA676",
+                    "android_package_name" : "uni.UNI1BA09AD",
                     "ios_bundle_id" : "",
                     "isCloud" : true,
                     "bought" : 1,

MingGaoApp/package-lock.json

@@ -5,6 +5,8 @@
   "packages": {
     "": {
       "dependencies": {
+        "dayjs": "^1.11.7",
+        "lodash-es": "^4.17.21",
         "uview-ui": "^2.0.27"
       },
       "devDependencies": {
@@ -338,6 +340,11 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/dayjs": {
+      "version": "1.11.7",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.7.tgz",
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.71",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.71.tgz",
@@ -519,6 +526,11 @@
         "node": ">=6.11.5"
       }
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -1183,6 +1195,11 @@
       "dev": true,
       "peer": true
     },
+    "dayjs": {
+      "version": "1.11.7",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.7.tgz",
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
+    },
     "electron-to-chromium": {
       "version": "1.4.71",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.71.tgz",
@@ -1333,6 +1350,11 @@
       "dev": true,
       "peer": true
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",

MingGaoApp/package.json

@@ -1,5 +1,7 @@
 {
   "dependencies": {
+    "dayjs": "^1.11.7",
+    "lodash-es": "^4.17.21",
     "uview-ui": "^2.0.27"
   },
   "devDependencies": {

MingGaoApp/pages.json

@@ -3,16 +3,16 @@
 		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
 	},
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-	// {
-	// 	"path": "pages/response/video",
-	// 	"style": {
-	// 		"navigationBarTitleText": "视频通话",
-	// 		"navigationBarBackgroundColor": "#ffffff",
-	// 		"enablePullDownRefresh": false,
-	// 		"navigationStyle": "custom"
-	// 	}
-	
-	// },
+		// {
+		// 	"path": "pages/response/video",
+		// 	"style": {
+		// 		"navigationBarTitleText": "视频通话",
+		// 		"navigationBarBackgroundColor": "#ffffff",
+		// 		"enablePullDownRefresh": false,
+		// 		"navigationStyle": "custom"
+		// 	}
+
+		// },
 		{
 			"path": "pages/start/start",
 			"style": {
@@ -62,17 +62,10 @@
 		{
 			"path": "pages/response/index",
 			"style": {
-				"navigationBarTitleText": "应答中心",
-				"navigationBarBackgroundColor": "#FFFFFF",
-				"enablePullDownRefresh": true,
-				"app-plus": {
-					"titleNView": {
-						"splitLine": { //原生导航栏加下边框
-							"color": "#e3e3e3",
-							"height": "1px"
-						}
-					}
-				}
+				"navigationBarTitleText": "",
+				"navigationStyle": "custom",
+				"enablePullDownRefresh": true
+
 			}
 
 		},
@@ -264,6 +257,15 @@
 				"navigationBarBackgroundColor": "#ffffff"
 			}
 
+		},
+		{
+			"path": "pages/addressList/index",
+			"style": {
+				"navigationBarTitleText": "通讯录",
+				"enablePullDownRefresh": true,
+				"navigationBarBackgroundColor": "#ffffff"
+			}
+
 		}
 	],
 	"globalStyle": {

MingGaoApp/pages/addressList/index.vue

@@ -0,0 +1,249 @@
+<template>
+	<view class="address-page">
+		<view class="search-form">
+			<u-search placeholder="请输入隶属组织名称/姓名" v-model="searchKey" :showAction="false" @input="search"></u-search>
+		</view>
+		<u-loading-page loading-text="加载中..." :loading="loading" font-size="16"></u-loading-page>
+		<view class="address__body">
+			<view class="address__list">
+				<view class="address__group" v-for="(item,key) in transformUserGroupList" :key="key">
+					<view class="address__group__header">
+						<view class="address__group__title">
+							{{orgDataSource[key] && orgDataSource[key].org_name}}
+						</view>
+					</view>
+					<view class="address__group__list">
+						<view class="address__item" v-for="userItem in item" :key="item.user_id" @click="goToIM(userItem)">
+							<view class="address__item__label">{{userItem.real_name}}</view>
+						</view>
+					</view>
+				</view>
+				<view class="empty" v-if="isEmpty">
+					暂无数据
+				</view>
+			</view>
+			<!-- <u-list @scrolltolower="scrolltolower">
+				<u-list-item v-for="(item, index) in userList" :key="index">
+					<u-cell :title="`${index+1}:user_id:${item.user_id}-姓名：${item.real_name}`" @click="goToIM(item)">
+						
+					</u-cell>
+				</u-list-item>
+			</u-list> -->
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		zipObject,
+		map,
+		concat,
+		reduce,
+		groupBy,
+		uniqBy,
+		flatMap,
+		debounce
+	} from 'lodash-es'
+
+	let App = getApp();
+	// var API = App.globalData.socketTask;
+	var API = App.globalData;
+
+	export default {
+		data() {
+			return {
+				current: 0,
+				loading: false,
+				page: 1,
+				total: 0,
+				pageSize: 100000,
+				userList: [],
+				currentUserList: [],
+				searchKey: ''
+			}
+		},
+		onShow() {
+			this.page = 1;
+			this.userList = this.currentUserList = [];
+			this.indexList = [];
+			this.getAddressBookList();
+		},
+		onReachBottom() {
+			console.log('-------------- onReachBottom 121331')
+		},
+		onPullDownRefresh() {
+			console.log('refresh');
+			this.page = 1;
+			this.userList = this.currentUserList = [];
+			this.indexList = [];
+			this.getAddressBookList()
+			setTimeout(() => {
+				uni.stopPullDownRefresh()
+			}, 1000)
+		},
+		computed: {
+			transformUserGroupList() {
+				const result = groupBy(this.currentUserList, item => {
+					return item.org_list[0] && item.org_list[0].org_id
+				})
+
+				console.log(result, 'transform user group list')
+
+				return result
+			},
+			orgDataSource() {
+				const result = uniqBy(flatMap(map(this.currentUserList, 'org_list')), 'org_id');
+				console.log(result, 'orgDataSource');
+				return zipObject(map(result, 'org_id'), result)
+			},
+			isEmpty() {
+				return this.currentUserList.length < 1
+			}
+		},
+		methods: {
+			getAddressBookList() {
+				this.loading = true
+				this.$myRequest({
+					url: '/api/api_gateway?method=sysmenage.usermanager.user_list',
+					data: {
+						page: this.page,
+						page_item: this.pageSize,
+						is_mails: 1,
+						// real_name: this.nameVal, // 用户名称
+						// mobile: this.phoneVal, //电话
+						// org_id: this.org_id, // 组织ID
+					}
+				}).then(res => {
+					this.loading = false;
+					this.total = res.total_item;
+					this.userList = this.currentUserList = this.page === 1 ? res.page_list : concat(this.userList,
+						res.page_list)
+
+					console.log(this.orgDataSource, 'load user list org data list')
+				})
+			},
+			scrolltolower() {
+				console.log('scroll lower -----121313')
+				if (this.page * this.pageSize >= this.total) {
+					return
+				}
+
+				this.page++
+				this.getAddressBookList()
+			},
+			goToIM(data) {
+				var that = this
+				console.log('已读-------------', data.user_id)
+				var obj = {
+					'action': 'list', // 动作标识，必填
+					'recv_user_id': data.user_id, // 接收人用户id， 非必填
+					'data': {}
+				}
+
+				API.socketTask.send({
+					data: JSON.stringify(obj),
+					async success(res) {
+						console.log("消息发送成功");
+					},
+				});
+
+				uni.navigateTo({
+					url: '/pages/response/details?data=' + data.real_name + '&to=' + data.user_id
+				})
+			},
+			search: debounce(function() {
+				console.log('search ----------------------- search result', this.searchKey)
+
+				this.currentUserList = this.userList.filter(item => {
+					if (item.real_name.includes(this.searchKey)) {
+						return true
+					} else if (item.org_list) {
+						return item.org_list.findIndex(orgItem => orgItem.org_name.includes(this
+							.searchKey)) > -1
+					} else {
+						return false
+					}
+				})
+
+			}, 500)
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	.search-form {
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		background-color: #FFFFFF;
+		padding: 32rpx 24rpx;
+		z-index: 10;
+	}
+
+	.list-cell {
+		display: flex;
+		box-sizing: border-box;
+		width: 100%;
+		padding: 10px 24rpx;
+		overflow: hidden;
+		color: #323233;
+		font-size: 14px;
+		line-height: 24px;
+		background-color: #fff;
+	}
+
+	.address-page {
+		background-color: #F7F8FB;
+		padding-top: 130rpx;
+
+		.address {
+			&__body {}
+
+			&__list {
+				width: 100%;
+			}
+
+			&__group {
+				&__header {
+					padding: 24rpx;
+					color: #1B76FF;
+					font-size: 24rpx;
+				}
+
+				&__list {
+					background-color: #fff;
+					padding: 0 56rpx 0 32rpx;
+				}
+			}
+
+			&__item {
+				@include hairline-bottom;
+
+				&__label {
+					color: #333333;
+					line-height: 1;
+					font-size: 32rpx;
+					padding: 30rpx 0;
+				}
+
+				&:last-child {
+					@include hairline-bottom(transparent);
+				}
+			}
+		}
+	}
+	
+	.empty {
+		width: 100%;
+		text-align: center;
+		font-size: 28rpx;
+		height: 100rpx;
+		line-height: 100rpx;
+		color: #999999;
+	}
+</style>
+<style>
+	page {
+		background-color: #F7F8FB;
+	}
+</style>

MingGaoApp/pages/my/index.vue

@@ -18,7 +18,7 @@
 						{{ids}}
 					</view>
 					<view class="item_info_dian" v-if="index==3&&newversion">
-						
+
 					</view>
 					<u-icon name="arrow-right" color="#606060"></u-icon>
 				</view>
@@ -35,11 +35,11 @@
 					theme_info: {
 						logo_url: ""
 					},
-					username:""
+					username: ""
 				},
-				tablist: ["个人中心", "监测日志", "监督记录","版本信息"],
-				newversion:false,
-				ids:plus.runtime.version
+				tablist: ["个人中心", "监测日志", "监督记录", "版本信息"],
+				newversion: false,
+				ids: plus.runtime.version
 			}
 		},
 		watch: {
@@ -71,17 +71,17 @@
 			async getversions() {
 				const res = await this.$myRequest({
 					url: '/api/api_gateway?method=app.my.get_app_history',
-					data:{
-						current_version:this.ids
+					data: {
+						current_version: this.ids
 					}
 				})
-				if(res.new_app.app_version){
+				if (res.new_app.app_version) {
 					console.log(this.ids.match(/\d+/g).join(""))
 					var news = res.new_app.app_version.match(/\d+/g).join("")
 					var old = this.ids.match(/\d+/g).join("")
-					if(news > old){
+					if (news > old) {
 						this.newversion = true
-					}else{
+					} else {
 						this.newversion = false
 					}
 				}
@@ -91,20 +91,20 @@
 					uni.navigateTo({
 						url: './myinfo',
 					});
-				}else if(index == 1){
+				} else if (index == 1) {
 					uni.navigateTo({
 						url: './monitorlog',
 					});
-					
-				}else if (index == 2){
+
+				} else if (index == 2) {
 					uni.navigateTo({
 						url: './mymonit',
 					});
-				}else if(index == 3){
+				} else if (index == 3) {
 					uni.navigateTo({
 						url: './version',
 					});
-				}
+				} 
 			}
 		},
 		onLoad() {
@@ -129,15 +129,17 @@
 			padding-top: 150rpx;
 			text-align: center;
 			margin: 0 auto;
-			.my_info_logo_wai{
+
+			.my_info_logo_wai {
 				width: 232rpx;
 				height: 232rpx;
 				border-radius: 50%;
 				margin: 0 auto 30rpx;
-				background-color: rgba(255,255,255,0.15);
+				background-color: rgba(255, 255, 255, 0.15);
 				display: flex;
 				justify-content: space-around;
 				align-items: center;
+
 				// box-shadow: 5px 10px 5px #888888;
 				.my_info_logo {
 					width: 200rpx;
@@ -149,12 +151,11 @@
 					color: #fff;
 					line-height: 200rpx;
 					font-size: 80rpx;
-					.my_info_logo_bg{
-						
-					}
+
+					.my_info_logo_bg {}
 				}
 			}
-			
+
 
 			.my_info_name {
 				color: #fff;
@@ -176,10 +177,12 @@
 				.item_name {
 					color: #606060;
 				}
-				.item_info{
+
+				.item_info {
 					display: flex;
 					color: #606060;
-					.item_info_dian{
+
+					.item_info_dian {
 						width: 10rpx;
 						height: 10rpx;
 						background-color: red;

MingGaoApp/pages/response/details.vue

@@ -5,47 +5,85 @@
 		<scroll-view id="scrollview" class="chat-window" scroll-y="true" :scroll-with-animation="true"
 			:scroll-top="scrollTop" @scrolltolower="lower">
 			<view class="details_ul" id="msgBox">
-				<view class="details_list" v-for="item in msg_list">
-					<!-- me -->
-					<view class="list_msgBox1" v-if="item.is_right == true">
-						<view class="list_msgText">
-							{{ item.msg_info }}
+				<template v-for="(messageItemList,key) in transformMsgList">
+					<view class="message-box__group-title">{{key | messageTime}}</view>
+					<view class="details_list" v-for="item in messageItemList">
+						<!-- me -->
+						<view class="list_msgBox1" v-if="item.is_right == true">
+							<view class="message-box__content">
+								<view class="message-box__name">我</view>
+								<view class="message-box__text right">{{ item.msg_info }}</view>
+							</view>
+							<!-- <view class="list_msgText">
+								{{ item.msg_info }}
+							</view>
+							<view class="list_triangle"></view> -->
+							<view class="list_img">
+								<view style="color: #fff; text-align: center; line-height: 76rpx; font-size: 40rpx;">我
+								</view>
+							</view>
 						</view>
-						<view class="list_triangle"></view>
-						<view class="list_img">
-							<view style="color: #fff; text-align: center; line-height: 90rpx; font-size: 40rpx;">我</view>
-						</view>
-					</view>
 
-					<!-- you -->
-					<view class="list_msgBox2" v-if="item.is_right == false">
-						<view class="list_img">
-							<view style="color: #fff; text-align: center; line-height: 90rpx; font-size: 40rpx;">{{ tltName.slice(0, 1) }}</view>
-						</view>
-						<view class="list_triangle"></view>
-						<view class="list_msgText">
-							{{ item.msg_info }}
+						<!-- you -->
+						<view class="list_msgBox2" v-if="item.is_right == false">
+							<view class="list_img">
+								<view style="color: #fff; text-align: center; line-height: 76rpx; font-size: 40rpx;">
+									{{ tltName.slice(0, 1) }}
+								</view>
+							</view>
+							<view class="message-box__content">
+								<view class="message-box__name">{{tltName}}</view>
+								<view class="message-box__text left">{{ item.msg_info }}</view>
+							</view>
+							<!-- <view class="list_triangle"></view>
+							<view class="list_msgText">
+								{{ item.msg_info }}
+							</view> -->
 						</view>
 					</view>
-				</view>
+				</template>
+
 
 			</view>
 		</scroll-view>
 		<!-- input输入框 -->
-		<u--input type="text" :adjust-position="true" class="details_input" maxlength="30" confirm-type="send" @confirm="search()"
-			placeholder="请输入内容" border="surround" v-model="value" @change="sendChange"></u--input>
-
+		<view class="message__footer">
+			<u--input type="text" :adjust-position="true" class="details_input" maxlength="30" confirm-type="send"
+				@confirm="search()" placeholder="请输入内容" border="surround" v-model="value" @change="sendChange">
+			</u--input>
+			<view class="message__action-video" @tap="handleIMWithVideo">
+				<image src="@/static/response/video.svg" mode="aspectFit" class="img"></image>
+				<!-- <uni-icons type="videocam-filled" color="#1B76FF" size="30"></uni-icons> -->
+			</view>
+		</view>
 		<!-- 警告提示 -->
 		<u-toast ref="uToast"></u-toast>
+		<!-- <view class="fixed-bottom">
+			<u-button text="发起视屏通话" @click="handleIMWithVideo"></u-button>
+		</view> -->
 	</view>
 </template>
 
 <script>
+	import {
+		mapState
+	} from 'vuex';
 	import store from '@/store/index.js'; //需要引入store
+	import {
+		groupBy
+	} from 'lodash-es';
+	import dayjs from 'dayjs';
+
 	let App = getApp();
 	// var API = App.globalData.socketTask;
 	var API = App.globalData;
 	export default {
+		// 过滤
+		filters: {
+			messageTime: function(val) {
+				return dayjs(val).format('YYYY-MM-DD')
+			},
+		},
 		data() {
 			return {
 				phoneHeight: '', // 获取当前的屏幕高度
@@ -65,6 +103,7 @@
 				// 	mitemHeight: 0
 				// },
 				scrollTop: 0,
+				toID: 0
 			}
 		},
 		watch: {
@@ -80,10 +119,13 @@
 				// 		console.log(data)
 				// 	}).exec();
 				// });
-				
+
 				// 测试用
 				setTimeout(() => {
-				   uni.pageScrollTo({scrollTop: 999999999999999999999999999999, duration: 0});
+					uni.pageScrollTo({
+						scrollTop: 999999999999999999999999999999,
+						duration: 0
+					});
 				}, 50);
 			},
 			videoData(news, old) {
@@ -114,29 +156,40 @@
 			videoData() {
 				return this.$store.state.video
 			},
-		
+
 		},
 		computed: {
+			...mapState({
+				roomInfo: state => state.selfRoomInfo
+			}),
 			listData() {
 				return store.state.list
 			},
+			transformMsgList() {
+				console.log(this.msg_list, 'transform msg list')
+				return groupBy(this.msg_list, item => dayjs(item.create_time ? '20' + item.create_time : Date.now())
+					.format(
+						'YYYY-MM-DD'))
+			}
 		},
 		onLoad(options) {
 			var that = this
 			var data = this.$store.state.list
 			that.msg_list = []
 			that.tltName = options.data
-			
+			this.toID = options.to
+			console.log(this.toID, 'onload-------------------------------------------------- response details')
+
 			for (var j = 0; j < data.length; j++) {
 				if (options.data == data[j].real_name) {
 					for (var i = 0; i < data[j].msg_list.length; i++) {
-							that.val = data[j].msg_list
-							that.msg_list = data[j].msg_list.reverse();
+						that.val = data[j].msg_list
+						that.msg_list = data[j].msg_list.reverse();
 					}
 				}
 			}
-			
-			
+
+
 			// that.msg_list = []
 			// that.tltName = data.real_name
 			// var arrayData = data
@@ -164,7 +217,7 @@
 				if (that.value !== "") {
 					var obj = {
 						'action': 'send', // 动作标识，必填
-						'recv_user_id': that.val.user_id, // 接收人用户id， 非必填
+						'recv_user_id': that.val.user_id || this.toID, // 接收人用户id， 非必填
 						'data': {
 							'msg_status': false, // 消息未读
 							'msg_info': that.value, // 发送消息
@@ -198,11 +251,16 @@
 				API.socketTask.send({
 					data: JSON.stringify(obj),
 					async success(res) {
-						that.msg_list = [...that.msg_list, {
-							msg_info: that.value,
-							is_right: true
-						}]
+						console.warn(res, obj, '-------------------- socket send success')
+						if (obj.action !== 'send_video') {
+							that.msg_list = [...that.msg_list, {
+								msg_info: that.value,
+								is_right: true
+							}]
+						}
+
 						that.value = ''
+
 					},
 					fali(err) {
 						console.log('消息发送失败了', err)
@@ -218,9 +276,24 @@
 			lower(e) {
 				console.log(e)
 			},
-		},
 
+			handleIMWithVideo() {
+				console.log('video im connect', this.val)
+
+				let obj = {
+					action: "send_video",
+					recv_user_id: this.val.user_id || this.toID,
+					data: {
+						msg_status: false,
+						msg_info: "",
+					},
+				};
 
+				console.log('send_video', obj)
+
+				this.transmit(obj);
+			}
+		},
 
 		onReady() {
 			// 修改头部标题栏
@@ -228,7 +301,7 @@
 				title: this.tltName
 			});
 		},
-		
+
 		// 监听页面返回
 		// onBackPress() {
 		// 	console.log(App.globalData.list, '这是改变前')
@@ -250,12 +323,12 @@
 		.details_ul {
 			height: 93%;
 			overflow-y: auto;
-			padding: 0 0 120rpx 0;
+			padding: 52rpx 40rpx 200rpx;
 
 			.details_list {
 				.list_msgBox1 {
 					display: flex;
-					margin-top: 22rpx;
+					margin-bottom: 48rpx;
 					justify-content: flex-end;
 
 					.list_msgText {
@@ -277,36 +350,45 @@
 					}
 
 					.list_img {
+						padding: 4rpx 0;
+						margin-left: 30rpx;
+
 						// image {
 						// 	width: 96rpx;
 						// 	height: 96rpx;
 						// }
 						view {
-							width: 96rpx;
-							height: 96rpx;
-							border-radius: 20rpx;
-							background-image: linear-gradient(#a7fbc6, #60fba5);
-							margin: 0 10rpx 0 0;
+							width: 76rpx;
+							height: 76rpx;
+							border-radius: 50%;
+							background: linear-gradient(180deg, #21A8FF 0%, #1B76FF 100%);
+							box-shadow: 0px 4rpx 4rpx 2rpx #C2FFE4;
+							opacity: 0.8;
+
 						}
 					}
 				}
 
 				.list_msgBox2 {
 					display: flex;
-					margin-top: 22rpx;
+					margin-bottom: 48rpx;
 					justify-content: flex-start;
 
 					.list_img {
+						padding: 4rpx 0;
+						margin-right: 30rpx;
+
 						// image {
 						// 	width: 96rpx;
 						// 	height: 96rpx;
 						// }
 						view {
-							width: 96rpx;
-							height: 96rpx;
-							border-radius: 20rpx;
-							background-image: linear-gradient(#addbff, #5cacff);
-							margin: 0 0 0 10rpx;
+							width: 76rpx;
+							height: 76rpx;
+							border-radius: 50%;
+							background: linear-gradient(180deg, #21A8FF 0%, #1B76FF 100%);
+							box-shadow: 0px 4rpx 4rpx 2rpx #C2FFE4;
+							opacity: 0.8;
 						}
 					}
 
@@ -333,15 +415,89 @@
 
 		// 输入框
 		.details_input {
-			border: 0;
-			border-top: 1px solid #eaeaea;
+			flex: 1 1 auto;
+			margin-right: 32rpx;
+			border: 1px solid #C1C1C1;
+			height: 96rpx;
+			box-sizing: border-box;
+			border-radius: 50rpx;
+			padding: 0 36rpx;
+			box-shadow: 0rpx 2rpx 6rpx 0px rgba(0, 0, 0, 0.14);
+			background: #fff;
+		}
+	}
+
+	.fixed-bottom {
+		position: fixed;
+		left: 0;
+		bottom: 110rpx;
+	}
+
+	.message-box {
+		&__content {}
+
+		&__name {
+			color: #333;
+			font-size: 24rpx;
+			line-height: 36rpx;
+			margin-bottom: 14rpx;
+		}
+
+		&__text {
+			max-width: 80%;
+			min-width: 200rpx;
+			padding: 28rpx;
+			color: #666;
+			background: #F9F9F9;
+
+
+			&.left {
+				padding: 28rpx 56rpx 28rpx 30rpx;
+				border-radius: 0px 32rpx 32rpx 32rpx;
+			}
+
+			&.right {
+				background: #60fba5;
+				padding: 28rpx 30rpx 28rpx 56rpx;
+				border-radius: 32rpx 0px 32rpx 32rpx;
+			}
+		}
+
+		&__group-title {
+			font-size: 24rpx;
+			line-height: 36rpx;
+			color: #999;
+			font-weight: 400;
+			text-align: center;
+			margin-bottom: 16rpx;
+		}
+	}
+
+	.message {
+		&__footer {
 			position: fixed;
-			bottom: 0;
 			left: 0;
-			width: 96%;
-			height: 90rpx;
-			border-radius: 0;
-			background: #fff;
+			right: 0;
+			bottom: 0;
+			padding: 40rpx 30rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			background-color: #fff;
+		}
+
+		&__action-video {
+			flex: 0 0 auto;
+			width: 100rpx;
+			height: 100rpx;
+			border-radius: 50%;
+			overflow: hidden;
+			background-color: #1B76FF;
+
+			.img {
+				width: 100%;
+				height: 100%;
+			}
 		}
 	}
 </style>

MingGaoApp/pages/response/index.vue

@@ -1,75 +1,89 @@
 <template>
-	<view class="response_box" :style="'height:' +  phoneHeight + 'px'">
-		<view class="response_ul" v-if="list.length > 0">
-			<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="item.unread">
-					</u-badge>
-					<view style="color: #fff; text-align: center; line-height: 100rpx; font-size: 40rpx;">
-						{{ item.real_name.slice(0,1) }}
+	<view class="response-page">
+		<uni-nav-bar title="消息" :statusBar="true" :fixed="true" @clickRight="handleRightNavBarClick">
+			<image slot="right" style="width:40rpx;height: 40rpx;" src="@/static/response/addressbook.svg"
+				mode="aspectFit"></image>
+		</uni-nav-bar>
+		<view class="response_box" :style="'height:' +  phoneHeight + 'px'">
+			<view class="response_ul" v-if="list.length > 0">
+				<view class="response_list" v-for="item in list" @click="defail(item)">
+					<view class="response_left">
+						<u-badge :show="!!item.unread" :isDot="true" numberType="overflow" shape="circle" :type="type"
+							max="99" :value="item.unread" :absolute="true" :offset="[0, 0]">
+						</u-badge>
+						<view class="text"
+							style="color: #fff; text-align: center; line-height: 76rpx; font-size: 40rpx;">
+							{{ item.real_name.slice(0,1) }}
+						</view>
 					</view>
-				</view>
-				<view class="response_right">
-					<view class="response_right_title">
-						<view class="response_right_titleName">
-							{{ item.real_name | name }}
+					<view class="response_right">
+						<view class="response_right_title">
+							<view class="response_right_titleName">
+								{{ item.real_name | name }}
+							</view>
+							<view class="response_right_titleTime">
+								{{ item.msg_list[0].create_time }}
+							</view>
 						</view>
-						<view class="response_right_titleTime">
-							{{ item.msg_list[0].create_time }}
+						<view class="response_right_text">
+							{{ item.msg_list[0].msg_info | msgData}}
 						</view>
 					</view>
-					<view class="response_right_text">
-						{{ item.msg_list[0].msg_info | msgData}}
-					</view>
 				</view>
 			</view>
-		</view>
 
-		<view class="" style="padding: 20% 0 0 0;" v-else>
-			<image style="margin: 0 0 0 85rpx; width: 600rpx; height: 400rpx;" src="../../static/image/13.png" mode="">
-			</image>
-			<view style="text-align: center; color: #83ccfd; font-size: 20px; line-height: 20rpx;">暂无数据</view>
-		</view>
+			<view class="" style="padding: 20% 0 0 0;" v-else>
+				<image style="margin: 0 0 0 85rpx; width: 600rpx; height: 400rpx;" src="../../static/image/13.png"
+					mode="">
+				</image>
+				<view style="text-align: center; color: #83ccfd; font-size: 20px; line-height: 20rpx;">暂无数据</view>
+			</view>
 
-		<!-- 加载 -->
-		<u-loading-page :loading="loading"></u-loading-page>
+			<!-- 加载 -->
+			<u-loading-page :loading="loading"></u-loading-page>
 
-		<!-- 列表加载更多 -->
+			<!-- 列表加载更多 -->
 
-		<!-- 返回顶部 -->
-		<u-back-top :scroll-top="scrollTop"></u-back-top>
+			<!-- 返回顶部 -->
+			<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" v-if="videoObj !== null">
-						<text>{{ videoObj.real_name }}</text>
-						<text>邀请你进行视频通话..</text>
+			<!-- 顶部弹出框 - 视频通话提示框 -->
+			<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" v-if="videoObj !== null">
+							<text>{{ videoObj.real_name }}</text>
+							<text>邀请你进行视频通话..</text>
+						</view>
 					</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 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>
-			</view>
-		</u-popup>
+			</u-popup>
 
-		<!-- 测试 -->
-		<image id="remoteVideo"></image>
-		<!-- 测试 -->
+			<!-- 测试 -->
+			<image id="remoteVideo"></image>
+			<!-- 测试 -->
+		</view>
 	</view>
+
 </template>
 
 <script>
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex'
 	import store from '@/store/index.js'; //需要引入store
 	let App = getApp();
 	// var API = App.globalData.socketTask;
@@ -127,13 +141,14 @@
 			}
 		},
 		watch: {
-			videoData(news, old) {
+			pendingVideoConnect(news, old) {
 				console.log('触发了')
 				console.log(news)
 				if (news) {
-					this.videoObj = news
+					this.videoObj = this.videoData
 					setTimeout(() => {
 						this.show = true
+						this.updatePendingVideoConnectStatus(false);
 						// 提示音
 						innerAudioContext.autoplay = true;
 						innerAudioContext.src = '../../static/1.mp3';
@@ -177,17 +192,26 @@
 			},
 		},
 		computed: {
-			// 视频消息
-			videoData() {
-				return store.state.video
-			},
-
-			// 用户列表消息
-			msgList() {
-				return store.state.list
-			}
+			// // 视频消息
+			// videoData() {
+			// 	return store.state.video
+			// },
+
+			// // 用户列表消息
+			// msgList() {
+			// 	return store.state.list
+			// }
+
+			...mapState({
+				videoData: state => {
+					return state.video
+				},
+				msgList: state => state.list,
+				pendingVideoConnect: state => state.pendingVideoConnect
+			})
 		},
 		methods: {
+			...mapMutations(['updatePendingVideoConnectStatus']),
 			// 进入详情
 			defail(data) {
 				var that = this
@@ -243,6 +267,11 @@
 					},
 				});
 			},
+			handleRightNavBarClick() {
+				uni.navigateTo({
+					url: '/pages/addressList/index'
+				})
+			}
 		},
 
 		onReady() {},
@@ -257,7 +286,7 @@
 			// uni.startPullDownRefresh(); // 开始刷新
 			uni.getSystemInfo({ //异步获取。
 				success(res) {
-					that.phoneHeight = res.windowHeight - 0; //窗口高度
+					that.phoneHeight = res.windowHeight - res.statusBarHeight; //窗口高度
 					// console.log(that.phoneHeight)
 				}
 			});
@@ -307,12 +336,12 @@
 		onPageScroll(e) {
 			this.scrollTop = e.scrollTop;
 		},
-		
+
 		// 监听页面返回
 		onBackPress() {
 			innerAudioContext.stop(); // 关闭提示音
 		},
-		
+
 		// 页面卸载 - 生命周期
 		onUnload() {
 			innerAudioContext.stop(); // 关闭提示音
@@ -327,58 +356,71 @@
 	}
 
 	.response_box {
-		background: #f7f7f7;
+		background: #F7F8FB;
+		padding: 24rpx;
 
 		.response_ul {
-			background: #f7f7f7;
+			background: #fff;
+			padding: 0 24rpx;
 			overflow: hidden;
 
 			.response_list {
 				position: relative;
 				background: #FFF;
-				border: 1px solid #e5e2e2;
-				margin: 0 0 35rpx 0;
-				padding: 20rpx 20rpx 20rpx 20rpx;
+				padding: 20rpx 0;
 				display: flex;
+				align-items: center;
+				@include hairline-bottom;
+
+				&:last-child {
+					@include hairline-bottom(transparent);
+				}
 
 				// 左
 				.response_left {
+					position: relative;
 
 					// image {
 					// 	width: 110rpx;
 					// 	height: 110rpx;
 					// 	border-radius: 20rpx;
 					// }
-					view {
-						width: 110rpx;
-						height: 110rpx;
-						border-radius: 20rpx;
-						background-image: linear-gradient(#addbff, #5cacff);
+					.text {
+						width: 76rpx;
+						height: 76rpx;
+						background: linear-gradient(180deg, #21A8FF 0%, #1B76FF 100%);
+						box-shadow: 0px 2px 2px 1px #C2FFE4;
+						border-radius: 50%;
 					}
 				}
 
 				// 右
 				.response_right {
-					margin: 8rpx 0 0 30rpx;
+					margin: 4rpx 0 0 14rpx;
 					width: 100%;
 
 					.response_right_title {
-						line-height: 50rpx;
 						display: flex;
 						justify-content: space-between;
+						margin-bottom: 6rpx;
 
-						.response_right_titleName {}
+						.response_right_titleName {
+							color: #333;
+							font-size: 28rpx;
+							line-height: 32rpx;
+						}
 
 						.response_right_titleTime {
-							color: #999999;
-							font-size: 25rpx;
+							color: #A3A7AD;
+							font-size: 24rpx;
+							line-height: 28rpx;
 						}
 					}
 
 					.response_right_text {
-						color: #999999;
-						font-size: 25rpx;
-						line-height: 58rpx;
+						color: #8C9198;
+						font-size: 24rpx;
+						line-height: 28rpx;
 					}
 				}
 			}
@@ -495,12 +537,24 @@
 	// uview 样式修改
 	/deep/.u-badge--error {
 		position: absolute;
-		left: 105rpx;
-		top: 15rpx;
 		z-index: 10;
 	}
 
 	/deep/.u-slide-down-enter-active {
 		height: 200rpx;
 	}
+
+	.response-page {
+		// padding-top: var(--status-bar-height);
+	}
+
+	.status_bar {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 10;
+		width: 100%;
+		height: var(--status-bar-height);
+		background-color: #fff;
+	}
 </style>

MingGaoApp/pages/response/video.nvue

@@ -2,7 +2,7 @@
 	<view class="video_box" :style="'height:' +  phoneHeight + 'px'">
 		<!-- 本地预览视图 -->
 		<view class="video_me" v-show="allUserViewObjectList.length > 0">
-		<!-- <view class="video_me" v-if="videoShow"> -->
+			<!-- <view class="video_me" v-if="videoShow"> -->
 			<zego-local-view :viewMode="publisherViewModeIndex"
 				style="width: 150px; height: 200px; flex: 1; position: fixed; right: 0; top: 65px;">
 			</zego-local-view>
@@ -10,9 +10,9 @@
 
 		<!-- 服务器传来的预览图 -->
 		<view class="video_you" v-for="(item, index) in allUserViewObjectList" :key="item.streamID">
-		<!-- <view class="video_you"> -->
+			<!-- <view class="video_you"> -->
 			<zego-remote-view v-if="item.streamID" :streamID="item.streamID" :viewMode="item.viewMode"
-				style="width: 620px; height: 600px; flex: 1;">
+				style="width:600px;height: 600rpx;border: 1px solid #fff;">
 			</zego-remote-view>
 		</view>
 
@@ -24,7 +24,7 @@
 					</view>
 					<text class="video_view_txt">翻转镜头</text>
 				</view>
-				
+
 				<!-- <view class="video_imgList2" v-if="CameraShow">
 					<view class="video_view" @click="closeCamera">
 						<image class="video_view_img" src="../../static/image/11.png" mode=""></image>
@@ -38,7 +38,7 @@
 					</view>
 					<text class="video_view_txt" style="margin: 0 0 0 30rpx;">开启</text>
 				</view> -->
-				
+
 				<image @click="offVideo()" style="width: 50px; height: 50px; margin: 0 0 0 330rpx;"
 					src="../../static/image/10.png" mode=""></image>
 			</view>
@@ -53,11 +53,14 @@
 </template>
 
 <script>
+	import {
+		mapState
+	} from 'vuex'
 	import store from '@/store/index.js'; //需要引入store
 	let App = getApp();
 	// var API = App.globalData.socketTask;
 	var API = App.globalData;
-	
+
 	import permision from "@/zego-express-video-uniapp/permission.js";
 	import ZegoExpressEngine from '@/zego-express-video-uniapp/lib/ZegoExpressEngine';
 	import {
@@ -65,7 +68,8 @@
 		ZegoRoomState,
 		ZegoUpdateType,
 		// ZegoViewMode,
-		ZegoVideoCodecID
+		ZegoVideoCodecID,
+		ZegoRemoteDeviceState
 	} from '@/zego-express-video-uniapp/lib/ZegoExpressDefines'
 	import {
 		AppID,
@@ -73,6 +77,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';
+
+	import {
+		assign
+	} from 'lodash-es';
 	export default {
 		data() {
 			return {
@@ -93,6 +101,7 @@
 				allUserViewObjectList: [],
 
 				CameraShow: true, // 镜头开启关闭
+				playerStreamID: 0,
 			}
 		},
 		components: {
@@ -101,18 +110,18 @@
 		},
 
 		watch: {
-			allUserViewObjectList(val) {
-				var that = this
-				if (val.length > 0) {
-					val.forEach((item) => {
-						if (item.streamID) {
-							this.tensile(item)
-							return true
-						}
-					})
-					
-				}
-			}
+			// allUserViewObjectList(val) {
+			// 	var that = this
+			// 	if (val.length > 0) {
+			// 		val.forEach((item) => {
+			// 			if (item.streamID) {
+			// 				this.tensile(item)
+			// 				return true
+			// 			}
+			// 		})
+
+			// 	}
+			// }
 		},
 
 		methods: {
@@ -130,12 +139,22 @@
 				// 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
+				const userID = (that.userid = that.videoObj.room_id + that.videoObj.user_id)
+				console.log(userID, that.userid)
+
+				await this.engine.loginRoom(that.videoObj.room_id, {
+					userID,
+					userName: that.videoObj.user_id + '-' +
+						that.videoObj.real_name
 				}, {
 					isUserStatusNotify: true
+				}).then(res => {
+					console.log(res, 'login room -------------')
+				}).catch(err => {
+					console.error(err, 'login room')
 				});
+
+
 			},
 
 			// 即构 - 翻转镜头
@@ -173,7 +192,7 @@
 				this.videoShow = !this.videoShow
 				// this.onPublish()
 				this.engine.startPreview();
-				this.engine.startPublishingStream(this.videoObj.room_id);
+				this.engine.startPublishingStream(this.userid);
 				this.publishBtnName = "Stop Publishing";
 				console.log(this.videoShow)
 			},
@@ -186,18 +205,18 @@
 
 				// 房间状态变化通知
 				this.engine.on("roomStateUpdate", (roomID, state, errorCode, extendedData) => {
-					// console.log('房间状态变化')
-					if (state == "CONNECTED") {
+					console.log('房间状态变化', state)
+					if (state == ZegoRoomState.Connected) {
 						// 与房间连接成功，只有当房间状态是连接成功时，才能进行推流、拉流等操作。
 						// 接下来的“预览并推流”的代码写在这里
 						console.log("房间连接成功");
 					}
-					if (state == "DISCONNECTED") {
+					if (state == ZegoRoomState.DisConnected) {
 						// 与房间断开了连接
 						console.log("与房间断开连接");
 					}
 
-					if (state == "CONNECTING") {
+					if (state == ZegoRoomState.Connecting) {
 						// 与房间尝试连接中
 						console.log("与房间尝试连接中");
 					}
@@ -211,12 +230,28 @@
 					if (updateType == ZegoUpdateType.Add) {
 						console.log('进入了啊AAAAAAAAAA')
 						for (let user of userList) {
+							let payload = assign({
+								streamID: ''
+							}, user)
+							
 							for (let stream of this.allStreamList) {
 								if (user.userID == stream.user.userID) {
-									user.streamID = stream.streamID;
+									payload.streamID = stream.streamID
+
+									if (!this.playerStreamID) {
+										this.playerStreamID = stream.streamID;
+										this.tensile(payload)
+									}
+
 								}
 							}
-							this.allUserViewObjectList.push(user);
+
+							const index = this.allUserViewObjectList.findIndex(item => item.userID === payload
+								.userID)
+							console.log('-----------------------all user view object list ', index, payload)
+							if (index === -1) {
+								this.allUserViewObjectList.push(payload);
+							}
 						}
 					} else if (updateType == ZegoUpdateType.Delete) {
 						this.allUserViewObjectList = this.allUserViewObjectList.filter((object) => {
@@ -257,11 +292,18 @@
 							for (let stream of streamList) {
 								if (object.userID == stream.user.userID) {
 									object.streamID = stream.streamID;
+									if (!this.playerStreamID) {
+										this.playerStreamID = stream.streamID
+
+										this.tensile(object)
+									}
+
 								}
 							}
 						}
 						this.allStreamList = this.allStreamList.concat(streamList);
 						console.log(this.allStreamList, '-------------')
+
 					} else if (updateType == ZegoUpdateType.Delete) {
 						for (let object of this.allUserViewObjectList) {
 							for (let stream of streamList) {
@@ -295,15 +337,48 @@
 
 				// 拉流后的事件回调
 				this.engine.on("playerStateUpdate", (streamID, state, errorCode, extendedData) => {
-					console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>' + '拉流后的事件触发了')
+					console.warn('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>' + '拉流后的事件触发了start')
+					console.warn(streamID, state, errorCode, extendedData, this.playerStreamID)
+					console.warn('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>' + '拉流后的事件触发end')
+				})
+
+				this.engine.on('playerRecvVideoFirstFrame', (streamID) => {
+					console.warn('playerRecvVideoFirstFrame- 拉流端视频接收首帧回调', streamID)
+				})
+
+				this.engine.on('playerRenderVideoFirstFrame', (streamID) => {
+					console.warn('playerRenderVideoFirstFrame- 拉流端渲染完视频首帧回调', streamID)
+				})
+
+				this.engine.on('publisherStateUpdate', (streamID, state, errorCode, extendedData) => {
+					console.warn('publisherStateUpdate 推流状态回调', streamID, state, errorCode, extendedData)
+				})
+
+				this.engine.on('publisherCapturedVideoFirstFrame', (channel) => {
+					console.warn('publisherCapturedVideoFirstFrame 推流端视频采集首帧回调', channel)
+				})
+
+				this.engine.on('remoteCameraStateUpdate', (streamID, state) => {
+
+					console.warn('remoteCameraStateUpdate 远端摄像头设备状态通知', streamID, state)
+
+
 				})
 			},
 
 			tensile(item) {
+				console.warn('---------------------------- 拉流start -----------------------')
 				console.log(this.allStreamList)
-				console.log(item)
+				console.log(item, item.streamID)
 				console.log(this.allUserViewObjectList)
+				// 拉流点击快于推流时，需要等流更新后重新拉
+				// startPlayingStream 在 play.js文件
+				// this.startPlayingStream(this.playStreamID);
 				this.engine.startPlayingStream(item.streamID)
+				console.warn('---------------------------- 拉流start1 -----------------------', this.playerStreamID)
+
+				console.warn('---------------------------- 拉流start end -----------------------')
+
 			},
 
 			// 停止拉流
@@ -322,16 +397,20 @@
 					console.log('开始推流了啊', this.isPublishingStream)
 					// 开始推流
 					this.engine.startPreview();
-					
+
 					// 设置编码格式
 					// let videoConfig = {};
 					// videoConfig.codecID = ZegoVideoCodecID.VP8;
 					// this.engine.setVideoConfig(videoConfig);
 					// 设置编码格式
-					
+
 					// this.engine.startPublishingStream(this.videoObj.room_id);
 					console.log(this.userid)
-					this.engine.startPublishingStream(this.userid);
+					this.engine.startPublishingStream(this.userid).then(res => {
+						console.log(res, 'start publish stream ------------------1')
+					}).catch(err => {
+						console.error(err)
+					});;
 					// this.videoShow = true
 				}
 				this.isPublishingStream = !this.isPublishingStream;
@@ -442,9 +521,9 @@
 		}
 
 		.video_you {
-			background: #000;
-			width: 620px;
-			height: 600px;
+			background: #f00;
+			width: 1200rpx;
+			height: 600rpx;
 			position: absolute;
 			right: 0;
 			bottom: 0;

MingGaoApp/store/index.js

@@ -1,24 +1,46 @@
 import Vue from "vue"
 import Vuex from "vuex"
+import {
+	assign,
+	slice,
+	isEmpty
+} from 'lodash-es'
 
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
 	state: {
 		list: {}, // 列表以及聊天内容数据
-		video: null ,// 视频通话数据
-		wornlist:{},
-		addobj:[],
-		kpsurlL:0,
-		worndatabase:[]
+		video: null, // 视频通话数据
+		wornlist: {},
+		addobj: [],
+		kpsurlL: 0,
+		worndatabase: [],
+		selfRoomInfo: null,
+		pendingVideoConnect: false
+	},
+	mutations: {
+		updateVideoInfo(state, payload) {
+			console.log(payload, 'update video info ')
+			state.video = assign({}, payload)
+			state.pendingVideoConnect = !isEmpty(payload)
+		},
+		updateVideoSelfRoomInfo(state, payload) {
+			state.selfRoomInfo = assign({}, payload)
+		},
+		updateMessageList(state, payload) {
+			state.list = slice(payload)
+		},
+		updatePendingVideoConnectStatus(state,flag){
+			state.pendingVideoConnect = flag
+		}
 	},
-	mutations: {},
 	actions: {},
-	getters:{
-		list:()=>{
-			
+	getters: {
+		list: () => {
+
 		}
 	}
 })
 
-export default store
+export default store

MingGaoApp/uni.scss

@@ -13,6 +13,9 @@
  */
 /* uni.scss 文件 引入uView的全局SCSS主题文件 */
 @import 'uview-ui/theme.scss';
+@import 'common/_mixins.scss';
+@import 'common/halfline.scss';
+
 /* 颜色变量 */
 
 /* 行为相关颜色 */

MingGaoApp/uni_modules/uni-scss/changelog.md

@@ -0,0 +1,8 @@
+## 1.0.3（2022-01-21）
+- 优化 组件示例
+## 1.0.2（2021-11-22）
+- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
+## 1.0.1（2021-11-22）
+- 修复 vue3中scss语法兼容问题
+## 1.0.0（2021-11-18）
+- init

MingGaoApp/uni_modules/uni-scss/index.scss

@@ -0,0 +1 @@
+@import './styles/index.scss';

MingGaoApp/uni_modules/uni-scss/package.json

@@ -0,0 +1,82 @@
+{
+  "id": "uni-scss",
+  "displayName": "uni-scss 辅助样式",
+  "version": "1.0.3",
+  "description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
+  "keywords": [
+    "uni-scss",
+    "uni-ui",
+    "辅助样式"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "category": [
+        "JS SDK",
+        "通用 SDK"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

MingGaoApp/uni_modules/uni-scss/readme.md

@@ -0,0 +1,4 @@
+`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 

MingGaoApp/uni_modules/uni-scss/styles/index.scss

@@ -0,0 +1,7 @@
+@import './setting/_variables.scss';
+@import './setting/_border.scss';
+@import './setting/_color.scss';
+@import './setting/_space.scss';
+@import './setting/_radius.scss';
+@import './setting/_text.scss';
+@import './setting/_styles.scss';

MingGaoApp/uni_modules/uni-scss/styles/setting/_border.scss

@@ -0,0 +1,3 @@
+.uni-border {
+	border: 1px $uni-border-1 solid;
+}

MingGaoApp/uni_modules/uni-scss/styles/setting/_color.scss

@@ -0,0 +1,66 @@
+
+// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐
+// @mixin get-styles($k,$c) {
+// 	@if $k == size or $k == weight{
+// 		font-#{$k}:#{$c}
+// 	}@else{
+// 		#{$k}:#{$c}
+// 	}
+// }
+$uni-ui-color:(
+	// 主色
+	primary: $uni-primary,
+	primary-disable: $uni-primary-disable,
+	primary-light: $uni-primary-light,
+	// 辅助色
+	success: $uni-success,
+	success-disable: $uni-success-disable,
+	success-light: $uni-success-light,
+	warning: $uni-warning,
+	warning-disable: $uni-warning-disable,
+	warning-light: $uni-warning-light,
+	error: $uni-error,
+	error-disable: $uni-error-disable,
+	error-light: $uni-error-light,
+	info: $uni-info,
+	info-disable: $uni-info-disable,
+	info-light: $uni-info-light,
+	// 中性色
+	main-color: $uni-main-color,
+	base-color: $uni-base-color,
+	secondary-color: $uni-secondary-color,
+	extra-color: $uni-extra-color,
+	// 背景色
+	bg-color: $uni-bg-color,
+	// 边框颜色
+	border-1: $uni-border-1,
+	border-2: $uni-border-2,
+	border-3: $uni-border-3,
+	border-4: $uni-border-4,
+	// 黑色
+	black:$uni-black,
+	// 白色
+	white:$uni-white,
+	// 透明
+	transparent:$uni-transparent
+) !default;
+@each $key, $child in $uni-ui-color {
+	.uni-#{"" + $key} {
+		color: $child;
+	}
+	.uni-#{"" + $key}-bg {
+		background-color: $child;
+	}
+}
+.uni-shadow-sm {
+	box-shadow: $uni-shadow-sm;
+}
+.uni-shadow-base {
+	box-shadow: $uni-shadow-base;
+}
+.uni-shadow-lg {
+	box-shadow: $uni-shadow-lg;
+}
+.uni-mask {
+	background-color:$uni-mask;
+}

MingGaoApp/uni_modules/uni-scss/styles/setting/_radius.scss

@@ -0,0 +1,55 @@
+@mixin radius($r,$d:null ,$important: false){
+  $radius-value:map-get($uni-radius, $r) if($important, !important, null);
+  // Key exists within the $uni-radius variable
+  @if (map-has-key($uni-radius, $r) and  $d){
+		@if $d == t {
+				border-top-left-radius:$radius-value;
+				border-top-right-radius:$radius-value;
+		}@else if $d == r {
+				border-top-right-radius:$radius-value;
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == b {
+				border-bottom-left-radius:$radius-value;
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == l {
+				border-top-left-radius:$radius-value;
+				border-bottom-left-radius:$radius-value;
+		}@else if $d == tl {
+				border-top-left-radius:$radius-value;
+		}@else if $d == tr {
+				border-top-right-radius:$radius-value;
+		}@else if $d == br {
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == bl {
+				border-bottom-left-radius:$radius-value;
+		}
+  }@else{
+		border-radius:$radius-value;
+  }
+}
+
+@each $key, $child in $uni-radius {
+	@if($key){
+		.uni-radius-#{"" + $key} {
+				@include radius($key)
+		}
+	}@else{
+		.uni-radius {
+				@include radius($key)
+		}
+	}
+}
+
+@each $direction in t, r, b, l,tl, tr, br, bl {
+	@each $key, $child in $uni-radius {
+		@if($key){
+			.uni-radius-#{"" + $direction}-#{"" + $key} {
+				@include radius($key,$direction,false)
+			}
+		}@else{
+			.uni-radius-#{$direction} {
+				@include radius($key,$direction,false)
+			}
+		}
+	}
+}

MingGaoApp/uni_modules/uni-scss/styles/setting/_space.scss

@@ -0,0 +1,56 @@
+
+@mixin fn($space,$direction,$size,$n) {
+	@if $n {
+		#{$space}-#{$direction}: #{$size*$uni-space-root}px
+	} @else {
+		 #{$space}-#{$direction}: #{-$size*$uni-space-root}px
+	}
+}
+@mixin get-styles($direction,$i,$space,$n){
+	@if $direction == t {
+		@include fn($space, top,$i,$n);
+	} 
+	@if $direction == r {
+		@include fn($space, right,$i,$n);
+	} 
+	@if $direction == b {
+		@include fn($space, bottom,$i,$n);
+	} 
+	@if $direction == l {
+	 @include fn($space, left,$i,$n);
+	} 
+	@if $direction == x {
+		@include fn($space, left,$i,$n);
+		@include fn($space, right,$i,$n);
+	} 
+	@if $direction == y {
+		@include fn($space, top,$i,$n);
+		@include fn($space, bottom,$i,$n);
+	} 
+	@if $direction == a {
+		@if $n {
+			#{$space}:#{$i*$uni-space-root}px;
+		} @else {
+			#{$space}:#{-$i*$uni-space-root}px;
+		}
+	} 
+}
+
+@each $orientation in m,p {
+	$space: margin;
+	@if $orientation == m {
+		$space: margin;
+	} @else {
+		$space: padding;
+	}
+	@for $i from 0 through 16 {
+		@each $direction in t, r, b, l, x, y, a {
+			.uni-#{$orientation}#{$direction}-#{$i} { 
+				@include  get-styles($direction,$i,$space,true);
+			} 
+			.uni-#{$orientation}#{$direction}-n#{$i} { 
+				@include  get-styles($direction,$i,$space,false);
+			}
+		}
+	}
+}

MingGaoApp/uni_modules/uni-scss/styles/setting/_styles.scss

@@ -0,0 +1,167 @@
+/* #ifndef APP-NVUE */
+
+$-color-white:#fff;
+$-color-black:#000;
+@mixin base-style($color) {
+	color: #fff;
+	background-color: $color;
+	border-color: mix($-color-black, $color, 8%);
+	&:not([hover-class]):active {
+		background: mix($-color-black, $color, 10%);
+		border-color: mix($-color-black, $color, 20%);
+		color: $-color-white;
+		outline: none;
+	}
+}
+@mixin is-color($color) {
+	@include base-style($color);
+	&[loading] {
+		@include base-style($color);
+		&::before {
+			margin-right:5px;
+		}
+	}
+	&[disabled] {
+	  &,
+		&[loading],
+	  &:not([hover-class]):active {
+	    color: $-color-white;
+			border-color: mix(darken($color,10%), $-color-white);
+	    background-color: mix($color, $-color-white);
+	  }
+	}
+
+}
+@mixin base-plain-style($color) {
+	color:$color;
+	background-color: mix($-color-white, $color, 90%);
+	border-color: mix($-color-white, $color, 70%);
+	&:not([hover-class]):active {
+	  background: mix($-color-white, $color, 80%);
+	  color: $color;
+	  outline: none;
+		border-color: mix($-color-white, $color, 50%);
+	}
+}
+@mixin is-plain($color){
+	&[plain] {
+		@include base-plain-style($color);
+		&[loading] {
+			@include base-plain-style($color);
+			&::before {
+				margin-right:5px;
+			}
+		}
+		&[disabled] {
+		  &,
+		  &:active {
+		    color: mix($-color-white, $color, 40%);
+		    background-color: mix($-color-white, $color, 90%);
+				border-color: mix($-color-white, $color, 80%);
+		  }
+		}
+	}
+}
+
+
+.uni-btn {
+	margin: 5px;
+	color: #393939;
+	border:1px solid #ccc;
+	font-size: 16px;
+	font-weight: 200;
+	background-color: #F9F9F9;
+	// TODO 暂时处理边框隐藏一边的问题
+	overflow: visible;
+	&::after{
+		border: none;
+	}
+
+	&:not([type]),&[type=default] {
+		color: #999;
+		&[loading] {
+			background: none;
+			&::before {
+				margin-right:5px;
+			}
+		}
+
+
+
+		&[disabled]{
+			color: mix($-color-white, #999, 60%);
+		  &,
+			&[loading],
+		  &:active {
+				color: mix($-color-white, #999, 60%);
+		    background-color: mix($-color-white,$-color-black , 98%);
+				border-color: mix($-color-white,  #999, 85%);
+		  }
+		}
+
+		&[plain] {
+			color: #999;
+			background: none;
+			border-color: $uni-border-1;
+			&:not([hover-class]):active {
+				background: none;
+			  color: mix($-color-white, $-color-black, 80%);
+				border-color: mix($-color-white, $-color-black, 90%);
+			  outline: none;
+			}
+			&[disabled]{
+			  &,
+				&[loading],
+			  &:active {
+			    background: none;
+					color: mix($-color-white, #999, 60%);
+					border-color: mix($-color-white,  #999, 85%);
+			  }
+			}
+		}
+	}
+
+	&:not([hover-class]):active {
+	  color: mix($-color-white, $-color-black, 50%);
+	}
+
+	&[size=mini] {
+		font-size: 16px;
+		font-weight: 200;
+		border-radius: 8px;
+	}
+
+
+
+	&.uni-btn-small {
+		font-size: 14px;
+	}
+	&.uni-btn-mini {
+		font-size: 12px;
+	}
+
+	&.uni-btn-radius {
+		border-radius: 999px;
+	}
+	&[type=primary] {
+		@include is-color($uni-primary);
+		@include is-plain($uni-primary)
+	}
+	&[type=success] {
+		@include is-color($uni-success);
+		@include is-plain($uni-success)
+	}
+	&[type=error] {
+		@include is-color($uni-error);
+		@include is-plain($uni-error)
+	}
+	&[type=warning] {
+		@include is-color($uni-warning);
+		@include is-plain($uni-warning)
+	}
+	&[type=info] {
+		@include is-color($uni-info);
+		@include is-plain($uni-info)
+	}
+}
+/* #endif */

MingGaoApp/uni_modules/uni-scss/styles/setting/_text.scss

@@ -0,0 +1,24 @@
+@mixin get-styles($k,$c) {
+	@if $k == size or $k == weight{
+		font-#{$k}:#{$c}
+	}@else{
+		#{$k}:#{$c}
+	}
+}
+
+@each $key, $child in $uni-headings {
+	/* #ifndef APP-NVUE */
+	.uni-#{$key} {
+		@each $k, $c in $child {
+			@include get-styles($k,$c)
+		}
+	}
+	/* #endif */
+	/* #ifdef APP-NVUE */
+	.container .uni-#{$key} {
+		@each $k, $c in $child {
+			@include get-styles($k,$c)
+		}
+	}
+	/* #endif */
+}

MingGaoApp/uni_modules/uni-scss/styles/setting/_variables.scss

@@ -0,0 +1,146 @@
+// @use "sass:math";
+@import  '../tools/functions.scss';
+// 间距基础倍数
+$uni-space-root: 2 !default;
+// 边框半径默认值
+$uni-radius-root:5px !default;
+$uni-radius: () !default;
+// 边框半径断点
+$uni-radius: map-deep-merge(
+  (
+    0: 0,
+		// TODO 当前版本暂时不支持 sm 属性
+    // 'sm': math.div($uni-radius-root, 2),
+    null: $uni-radius-root,
+    'lg': $uni-radius-root * 2,
+    'xl': $uni-radius-root * 6,
+    'pill': 9999px,
+    'circle': 50%
+  ),
+  $uni-radius
+);
+// 字体家族
+$body-font-family: 'Roboto', sans-serif !default;
+// 文本
+$heading-font-family: $body-font-family !default;
+$uni-headings: () !default;
+$letterSpacing: -0.01562em;
+$uni-headings: map-deep-merge(
+  (
+    'h1': (
+      size: 32px,
+			weight: 300,
+			line-height: 50px,
+			// letter-spacing:-0.01562em
+    ),
+    'h2': (
+      size: 28px,
+      weight: 300,
+      line-height: 40px,
+      // letter-spacing: -0.00833em
+    ),
+    'h3': (
+      size: 24px,
+      weight: 400,
+      line-height: 32px,
+      // letter-spacing: normal
+    ),
+    'h4': (
+      size: 20px,
+      weight: 400,
+      line-height: 30px,
+      // letter-spacing: 0.00735em
+    ),
+    'h5': (
+      size: 16px,
+      weight: 400,
+      line-height: 24px,
+      // letter-spacing: normal
+    ),
+    'h6': (
+      size: 14px,
+      weight: 500,
+      line-height: 18px,
+      // letter-spacing: 0.0125em
+    ),
+    'subtitle': (
+      size: 12px,
+      weight: 400,
+      line-height: 20px,
+      // letter-spacing: 0.00937em
+    ),
+    'body': (
+      font-size: 14px,
+			font-weight: 400,
+			line-height: 22px,
+			// letter-spacing: 0.03125em
+    ),
+    'caption': (
+      'size': 12px,
+      'weight': 400,
+      'line-height': 20px,
+      // 'letter-spacing': 0.03333em,
+      // 'text-transform': false
+    )
+  ),
+  $uni-headings
+);
+
+
+
+// 主色
+$uni-primary: #2979ff !default;
+$uni-primary-disable:lighten($uni-primary,20%) !default;
+$uni-primary-light: lighten($uni-primary,25%) !default;
+
+// 辅助色
+// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+$uni-success: #18bc37 !default;
+$uni-success-disable:lighten($uni-success,20%) !default;
+$uni-success-light: lighten($uni-success,25%) !default;
+
+$uni-warning: #f3a73f !default;
+$uni-warning-disable:lighten($uni-warning,20%) !default;
+$uni-warning-light: lighten($uni-warning,25%) !default;
+
+$uni-error: #e43d33 !default;
+$uni-error-disable:lighten($uni-error,20%) !default;
+$uni-error-light: lighten($uni-error,25%) !default;
+
+$uni-info: #8f939c !default;
+$uni-info-disable:lighten($uni-info,20%) !default;
+$uni-info-light: lighten($uni-info,25%) !default;
+
+// 中性色
+// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+$uni-main-color: #3a3a3a !default; 			// 主要文字
+$uni-base-color: #6a6a6a !default;			// 常规文字
+$uni-secondary-color: #909399 !default;	// 次要文字
+$uni-extra-color: #c7c7c7 !default;			// 辅助说明
+
+// 边框颜色
+$uni-border-1: #F0F0F0 !default;
+$uni-border-2: #EDEDED !default;
+$uni-border-3: #DCDCDC !default;
+$uni-border-4: #B9B9B9 !default;
+
+// 常规色
+$uni-black: #000000 !default;
+$uni-white: #ffffff !default;
+$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
+
+// 背景色
+$uni-bg-color: #f7f7f7 !default;
+
+/* 水平间距 */
+$uni-spacing-sm: 8px !default;
+$uni-spacing-base: 15px !default;
+$uni-spacing-lg: 30px !default;
+
+// 阴影
+$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
+$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
+$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
+
+// 蒙版
+$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;

MingGaoApp/uni_modules/uni-scss/styles/tools/functions.scss

@@ -0,0 +1,19 @@
+// 合并 map
+@function map-deep-merge($parent-map, $child-map){
+	$result: $parent-map;
+	@each $key, $child in $child-map {
+		$parent-has-key: map-has-key($result, $key);
+		$parent-value: map-get($result, $key);
+		$parent-type: type-of($parent-value);
+		$child-type: type-of($child);
+		$parent-is-map: $parent-type == map;
+		$child-is-map: $child-type == map;
+			
+		@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
+			$result: map-merge($result, ( $key: $child ));
+		}@else {
+			$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
+		}
+	}
+	@return $result;
+};

MingGaoApp/uni_modules/uni-scss/theme.scss

@@ -0,0 +1,31 @@
+// 间距基础倍数
+$uni-space-root: 2;
+// 边框半径默认值
+$uni-radius-root:5px;
+// 主色
+$uni-primary: #2979ff;
+// 辅助色
+$uni-success: #4cd964;
+// 警告色
+$uni-warning: #f0ad4e;
+// 错误色
+$uni-error: #dd524d;
+// 描述色
+$uni-info: #909399;
+// 中性色
+$uni-main-color: #303133;
+$uni-base-color: #606266;
+$uni-secondary-color: #909399;
+$uni-extra-color: #C0C4CC;
+// 背景色
+$uni-bg-color: #f5f5f5;
+// 边框颜色
+$uni-border-1: #DCDFE6;
+$uni-border-2: #E4E7ED;
+$uni-border-3: #EBEEF5;
+$uni-border-4: #F2F6FC;
+
+// 常规色
+$uni-black: #000000;
+$uni-white: #ffffff;
+$uni-transparent: rgba($color: #000000, $alpha: 0);

MingGaoApp/uni_modules/uni-scss/variables.scss

@@ -0,0 +1,62 @@
+@import './styles/setting/_variables.scss';
+// 间距基础倍数
+$uni-space-root: 2;
+// 边框半径默认值
+$uni-radius-root:5px;
+
+// 主色
+$uni-primary: #2979ff;
+$uni-primary-disable:mix(#fff,$uni-primary,50%);
+$uni-primary-light: mix(#fff,$uni-primary,80%);
+
+// 辅助色
+// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+$uni-success: #18bc37;
+$uni-success-disable:mix(#fff,$uni-success,50%);
+$uni-success-light: mix(#fff,$uni-success,80%);
+
+$uni-warning: #f3a73f;
+$uni-warning-disable:mix(#fff,$uni-warning,50%);
+$uni-warning-light: mix(#fff,$uni-warning,80%);
+
+$uni-error: #e43d33;
+$uni-error-disable:mix(#fff,$uni-error,50%);
+$uni-error-light: mix(#fff,$uni-error,80%);
+
+$uni-info: #8f939c;
+$uni-info-disable:mix(#fff,$uni-info,50%);
+$uni-info-light: mix(#fff,$uni-info,80%);
+
+// 中性色
+// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+$uni-main-color: #3a3a3a; 			// 主要文字
+$uni-base-color: #6a6a6a;			// 常规文字
+$uni-secondary-color: #909399;	// 次要文字
+$uni-extra-color: #c7c7c7;			// 辅助说明
+
+// 边框颜色
+$uni-border-1: #F0F0F0;
+$uni-border-2: #EDEDED;
+$uni-border-3: #DCDCDC;
+$uni-border-4: #B9B9B9;
+
+// 常规色
+$uni-black: #000000;
+$uni-white: #ffffff;
+$uni-transparent: rgba($color: #000000, $alpha: 0);
+
+// 背景色
+$uni-bg-color: #f7f7f7;
+
+/* 水平间距 */
+$uni-spacing-sm: 8px;
+$uni-spacing-base: 15px;
+$uni-spacing-lg: 30px;
+
+// 阴影
+$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
+$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
+$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
+
+// 蒙版
+$uni-mask: rgba($color: #000000, $alpha: 0.4);

MingGaoApp/unpackage/debug/.roid.ins

@@ -1 +1 @@
-installed
+forceInstall

MingGaoApp/unpackage/dist/dev/app-plus/androidPrivacy.json

@@ -1 +1,3 @@
-{"prompt":"none"}
+{
+    "prompt" : "none"
+}

MingGaoApp/util/url.js

@@ -1,8 +1,11 @@
-export default{
-	// baseUrl:"http://114.115.147.140:12345"
+export default {
+	baseUrl: process.env.NODE_ENV === 'development' ? "http://114.115.147.140:12345" : "https://www.yhswjc.com",
+	wsUrl:process.env.NODE_ENV === 'development' ? "ws://114.115.147.140:12345" : "wss://www.toreskj.com",
 	// baseUrl:"https://yfznscd.com"
-	baseUrl:"https://www.toreskj.com"
-	// baseUrl:"http://192.168.1.17:12345"
+	// baseUrl:"https://www.toreskj.com"
+	// baseUrl:"https://www.yhswjc.com"
+	// baseUrl:"http://192.168.1.52:12345",
+	// wsUrl:"ws://192.168.1.52:12345",
 	// baseUrl:"http://192.168.1.77:12345"
 	// baseUrl:"https://www.toreskj.com"
 }