uniapp 界面美化

im-commom/src/main/java/com/bx/imcommon/mq/RedisMQPullTask.java

@@ -42,7 +42,7 @@ public class RedisMQPullTask implements CommandLineRunner {
         consumers.forEach((consumer -> {
             // 注解参数
             RedisMQListener annotation = consumer.getClass().getAnnotation(RedisMQListener.class);
-            String key = consumer.generateKey();
+            String queue = annotation.queue();
             int batchSize = annotation.batchSize();
             int period = annotation.period();
             // 获取泛型类型
@@ -54,6 +54,7 @@ public class RedisMQPullTask implements CommandLineRunner {
                     List<Object> datas = new LinkedList<>();
                     try {
                         if(consumer.isReady()){
+                            String key = consumer.generateKey();
                             // 拉取一个批次的数据
                             List<Object> objects = pullBatch(key, batchSize);
                             for (Object obj : objects) {
@@ -69,7 +70,7 @@ public class RedisMQPullTask implements CommandLineRunner {
                             }
                         }
                     } catch (Exception e) {
-                        log.error("数据消费异常,队列:{}", key, e);
+                        log.error("数据消费异常,队列:{}", queue, e);
                     }
                     // 继续消费数据
                     if (!EXECUTOR_SERVICE.isShutdown()) {
@@ -90,7 +91,7 @@ public class RedisMQPullTask implements CommandLineRunner {
         List<Object> objects = new LinkedList<>();
         if (redisMQTemplate.isSupportBatchPull()) {
             // 版本大于6.2，支持批量拉取
-            objects = redisMQTemplate.opsForList().leftPop(key, 100);
+            objects = redisMQTemplate.opsForList().leftPop(key, batchSize);
         } else {
             // 版本小于6.2，只能逐条拉取
             Object obj = redisMQTemplate.opsForList().leftPop(key);

im-ui/src/components/friend/FriendItem.vue

@@ -78,6 +78,7 @@
 				default: true
 			}
 		}
+	
 	}
 </script>
 

im-uniapp/App.vue

@@ -351,6 +351,7 @@
 </script>
 
 <style lang="scss">
+	@import "@/uni_modules/uview-plus/index.scss";
 	@import url('./static/icon/iconfont.css');
 	
 	.tab-page {

im-uniapp/components/chat-item/chat-item.vue

@@ -64,8 +64,7 @@
 		display: flex;
 		margin-bottom: 2rpx;
 		position: relative;
-		padding: 10rpx;
+		padding: 10rpx 20rpx;
-		padding-left: 20rpx;
 		align-items: center;
 		background-color: white;
 		white-space: nowrap; 

im-uniapp/components/head-image/head-image.vue

@@ -55,7 +55,9 @@
 			},
 			avatarTextStyle() {
 				return `width: ${this.size}rpx;height:${this.size}rpx;
-				color:${this.textColor};font-size:${this.size*0.6}rpx;`
+				color:${this.textColor};font-size:${this.size*0.5}rpx;
+				border: 2px solid ${this.textColor};
+				box-shadow: 0px 0px 5rpx ${this.textColor}`
 			},
 			textColor() {
 				let hash = 0;
@@ -76,18 +78,18 @@
 		.avatar-image {
 			position: relative;
 			overflow: hidden;
-			border-radius: 10%;
+			border-radius: 50%;
-			border: 1px solid #ccc;
+			border: 2px solid #6664eb;
 			vertical-align: bottom;	
+			box-shadow: 0px 0px 10rpx #6664eb;
 		}
 
 		.avatar-text {
 			background-color: #f2f2f2;
-			border-radius: 10%;
+			border-radius: 50%;
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			border: 1px solid #ccc;
 		}
 
 		.online {

im-uniapp/main.js

@@ -7,6 +7,7 @@ import * as socketApi from './common/wssocket';
 import * as messageType from './common/messageType';
 import store from './store';
 import { createSSRApp } from 'vue'
+import uviewPlus from '@/uni_modules/uview-plus'
 // #ifdef H5
 import * as recorder from './common/recorder-h5';
 // #endif
@@ -18,6 +19,7 @@ import * as recorder from './common/recorder-app';
 export function createApp() {
   const app = createSSRApp(App)
   app.use(store);
+  app.use(uviewPlus);
   app.config.globalProperties.$http = request;
   app.config.globalProperties.$wsApi = socketApi;
   app.config.globalProperties.$msgType = messageType;

im-uniapp/package.json

@@ -4,6 +4,7 @@
 		"scripts": {}
 	},
 	"dependencies": {
-		"js-audio-recorder": "^1.0.7"
+		"js-audio-recorder": "^1.0.7",
+		"pinyin-pro": "^3.23.1"
 	}
 }

im-uniapp/pages.json

@@ -1,5 +1,12 @@
 {
-
+	"easycom": {
+			"autoscan": true,
+			"custom": {
+				"^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
+				"^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
+		    "^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
+			}
+		},
 	"pages": [{
 		"path": "pages/login/login"
 	}, {
@@ -43,7 +50,7 @@
 		"backgroundColor": "#fdfdfd"
 	},
 	"tabBar": {
-		"color": "#999999",
+		"color": "#000000",
 		"selectedColor": "#09C160",
 		"borderStyle": "black",
 		"backgroundColor": "#ffffff",
@@ -52,6 +59,7 @@
 				"iconPath": "static/tarbar/chat.png",
 				"selectedIconPath": "static/tarbar/chat_active.png",
 				"text": "消息"
+				
 			},
 			{
 				"pagePath": "pages/friend/friend",

im-uniapp/pages/chat/chat-box.vue

@@ -50,14 +50,14 @@
 				<view class="chat-tools-item">
 					<image-upload :maxCount="9" sourceType="album" :onBefore="onUploadImageBefore"
 						:onSuccess="onUploadImageSuccess" :onError="onUploadImageFail">
-						<view class="tool-icon iconfont icon-picture"></view>
+						<view class="tool-icon iconfont icon-picture" style="background-color:#497eed;"></view>
 					</image-upload>
 					<view class="tool-name">相册</view>
 				</view>
 				<view class="chat-tools-item">
 					<image-upload sourceType="camera" :onBefore="onUploadImageBefore" :onSuccess="onUploadImageSuccess"
 						:onError="onUploadImageFail">
-						<view class="tool-icon iconfont icon-camera"></view>
+						<view class="tool-icon iconfont icon-camera" style="background-color: #7454b0;"></view>
 					</image-upload>
 					<view class="tool-name">拍摄</view>
 				</view>
@@ -65,31 +65,32 @@
 				<view class="chat-tools-item">
 					<file-upload :onBefore="onUploadFileBefore" :onSuccess="onUploadFileSuccess"
 						:onError="onUploadFileFail">
-						<view class="tool-icon iconfont icon-folder"></view>
+						<view class="tool-icon iconfont icon-folder" style="background-color: #c99122;"></view>
 					</file-upload>
 					<view class="tool-name">文件</view>
 				</view>
 		
 				<view class="chat-tools-item" @click="onRecorderInput()">
-					<view class="tool-icon iconfont icon-microphone"></view>
+					<view class="tool-icon iconfont icon-microphone" style="background-color: #a8a53f;"></view>
 					<view class="tool-name">语音消息</view>
 				</view>
 				<view v-if="chat.type == 'GROUP'" class="chat-tools-item" @click="switchReceipt()">
-					<view class="tool-icon iconfont icon-receipt" :class="isReceipt?'active':''"></view>
+					<view class="tool-icon iconfont icon-receipt" style="background-color: #663399;"
+						:class="isReceipt?'active':''"></view>
 					<view class="tool-name">回执消息</view>
 				</view>
 				<!-- #ifndef MP-WEIXIN -->
 				<!-- 音视频不支持小程序 -->
 				<view v-if="chat.type == 'PRIVATE'" class="chat-tools-item" @click="onPriviteVideo()">
-					<view class="tool-icon iconfont icon-video"></view>
+					<view class="tool-icon iconfont icon-video" style="background-color: #8380E7;"></view>
 					<view class="tool-name">视频通话</view>
 				</view>
 				<view v-if="chat.type == 'PRIVATE'" class="chat-tools-item" @click="onPriviteVoice()">
-					<view class="tool-icon iconfont icon-call"></view>
+					<view class="tool-icon iconfont icon-call" style="background-color: #8380E7;"></view>
 					<view class="tool-name">语音通话</view>
 				</view>
 				<view v-if="chat.type == 'GROUP'" class="chat-tools-item" @click="onGroupVideo()">
-					<view class="tool-icon iconfont icon-call"></view>
+					<view class="tool-icon iconfont icon-call" style="background-color: #8380E7;"></view>
 					<view class="tool-name">语音通话</view>
 				</view>
 				<!-- #endif -->
@@ -752,7 +753,7 @@
 			align-items: center;
 			height: 60rpx;
 			padding: 5px;
-			background-color: white;
+			background-color: #f8f8f8;
 			line-height: 50px;
 			font-size: 40rpx;
 			font-weight: 600;
@@ -781,7 +782,7 @@
 			border: #dddddd solid 1px;
 			overflow: hidden;
 			position: relative;
-			background-color: #f8f8f8;
+			background-color: #f7f8fd;
 
 			.scroll-box {
 				height: 100%;
@@ -823,11 +824,12 @@
 			padding: 10rpx;
 			margin-bottom: 10rpx;
 			border: #dddddd solid 1px;
-			background-color: white;
+			background-color: #f7f8fd;
 
 			.iconfont {
-				font-size: 60rpx;
+				font-size: 68rpx;
-				margin: 3rpx;
+				margin: 6rpx;
+				color: $uni-text-color-icon;
 			}
 
 			.chat-record {
@@ -837,14 +839,13 @@
 
 			.send-text {
 				flex: 1;
-				background-color: #f8f8f8 !important;
+				background-color: white !important;
 				overflow: auto;
 				padding: 20rpx;
 				background-color: #fff;
 				border-radius: 20rpx;
 				font-size: 30rpx;
 				box-sizing: border-box;
-
 				.send-text-area {
 					width: 100%;
 				}
@@ -852,6 +853,7 @@
 
 			.btn-send {
 				margin: 5rpx;
+				background-color: $uni-text-color-icon;
 			}
 		}
 
@@ -859,7 +861,7 @@
 		.chat-tab-bar {
 			height: 500rpx;
 			padding: 20rpx;
-			background-color: whitesmoke;
+			background-color: #f8ffff;
 
 			.chat-tools {
 				display: flex;
@@ -875,9 +877,9 @@
 					.tool-icon {
 						padding: 28rpx;
 						font-size: 60rpx;
-						background-color: white;
+						background-color: rebeccapurple;
-						border-radius: 20%;
+						border-radius: 50%;
-
+						color: white;
 						&.active {
 							background-color: #ddd;
 						}
@@ -886,7 +888,7 @@
 					.tool-name {
 						height: 60rpx;
 						line-height: 60rpx;
-						font-size: 25rpx;
+						font-size: 28rpx;
 					}
 				}
 			}

im-uniapp/pages/friend/friend-add.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="page friend-add">
 		<view class="search-bar">
-			<uni-search-bar v-model="searchText" :focus="true" @confirm="onSearch()" @cancel="onCancel()"
+			<uni-search-bar v-model="searchText" radius="100" :focus="true" @confirm="onSearch()" @cancel="onCancel()"
 				placeholder="用户名/昵称"></uni-search-bar>
 		</view>
 		<view class="user-items">

im-uniapp/pages/friend/friend-search.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="page friend-search" >
-		<view>
+		<view class="search-bar">
 		  	<uni-search-bar  v-model="searchText"  :focus="true"  @cancel="onCancel()" placeholder="输入好友昵称搜索"></uni-search-bar>
 		</view>
 		<view class="friend-items">

im-uniapp/pages/friend/friend.vue

@@ -2,36 +2,40 @@
 	<view class="tab-page friend">
 		<view class="nav-bar">
 			<view class="nav-search">
-				<uni-search-bar @focus="onFocusSearch" cancelButton="none" placeholder="点击搜索好友" ></uni-search-bar>
+				<uni-search-bar radius="100" @focus="onFocusSearch" cancelButton="none" placeholder="点击搜索好友"></uni-search-bar>
 			</view>
 			<view class="nav-add" @click="onAddNewFriends()">
-				<uni-icons type="personadd" size="30"></uni-icons>
+				<uni-icons type="personadd" size="35"></uni-icons>
 			</view>
 		</view>
 		<view class="friend-tip" v-if="friends.length==0">
 			温馨提示：您现在还没有任何好友，快点击右上方'+'按钮添加好友吧~
 		</view>
 		<view class="friend-items" v-else>
-			<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
+			<up-index-list :index-list="friendIdx" >
-				<!-- 先展示在线好友-->
+				<template v-for="(friends,i) in friendGroup">
-				<view v-for="(friend,index) in friends" :key="index">
+					<up-index-item>
-					<friend-item v-if="!friend.delete&&friend.online" :friend="friend"></friend-item>
+						<up-index-anchor :text="friendIdx[i]=='*'?'在线':friendIdx[i]"
+							bgColor="#f2f3fd"></up-index-anchor>
+						<view v-for="(friend,idx) in friends" :key="idx">
+							<friend-item :friend="friend"></friend-item>
 						</view>
-				<!-- 再展示离线好友-->
+					</up-index-item>
-				<view v-for="(friend,index) in friends" :key="index">
+				</template>
-					<friend-item v-if="!friend.delete&&!friend.online" :friend="friend"></friend-item>
+			</up-index-list>
-				</view>
-			</scroll-view>
 		</view>
 
 	</view>
 </template>
 
 <script>
+	import { pinyin } from 'pinyin-pro';
+
 	export default {
 		data() {
 			return {
-
+				friendIdx: [],
+				friendGroup: []
 			}
 		},
 		methods: {
@@ -40,17 +44,68 @@
 					url: "/pages/friend/friend-search"
 				})
 			},
-			onAddNewFriends(){
+			onAddNewFriends() {
 				uni.navigateTo({
 					url: "/pages/friend/friend-add"
 				})
+			},
+			firstLetter(strText) {
+				// 使用pinyin-pro库将中文转换为拼音
+				let pinyinOptions = {
+					toneType: 'none', // 无声调
+					type: 'normal' // 普通拼音
+				};
+				let pyText = pinyin(strText, pinyinOptions);
+				return pyText[0];
+			},
+			isEnglish(character) {
+				return /^[A-Za-z]+$/.test(character);
+			},
+			init() {
+				// 按首字母分组
+				let groupMap = new Map();
+				this.friends.forEach((f) => {
+					if (f.delete) {
+						return;
+					}
+					let letter = this.firstLetter(f.nickName).toUpperCase();
+					// 非英文一律为#组
+					if (!this.isEnglish(letter)) {
+						letter = "#"
+					}
+					if (f.online) {
+						letter = '*'
+					}
+					if (groupMap.has(letter)) {
+						groupMap.get(letter).push(f);
+					} else {
+						groupMap.set(letter, [f]);
+					}
+				})
+				// 排序
+				let arrayObj = Array.from(groupMap);
+				arrayObj.sort((a, b) => {
+					// #组在最后面
+					if (a[0] == '#' || b[0] == '#') {
+						return b[0].localeCompare(a[0])
 					}
+					return a[0].localeCompare(b[0])
+				})
+				groupMap = new Map(arrayObj.map(i => [i[0], i[1]]));
+				this.friendIdx = Array.from(groupMap.keys())
+				this.friendGroup = Array.from(groupMap.values());
+			}
+
 		},
-		computed:{
+		computed: {
-			friends(){
+			friends() {
 				return this.$store.state.friendStore.friends;
+			},
+		},
+		onShow() {
+			this.init();
 		}
-		}
+
 	}
 </script>
 
@@ -61,10 +116,10 @@
 		display: flex;
 		flex-direction: column;
 
-		.friend-tip{
+		.friend-tip {
 			position: absolute;
 			top: 400rpx;
-			padding: 50rpx ;
+			padding: 50rpx;
 			text-align: center;
 			line-height: 50rpx;
 			text-align: left;
@@ -73,17 +128,23 @@
 		}
 
 		.nav-bar {
-			margin: 5rpx;
+			padding: 2rpx 10rpx;
 			display: flex;
 			align-items: center;
 			background-color: white;
-			.nav-search{
+
-				flex:1;
+			.nav-search {
+				flex: 1;
+			
 			}
 
 			.nav-add {
 				line-height: 56px;
 				cursor: pointer;
+				.uni-icons {
+					color: $uni-text-color-icon !important;
+				}
+				
 			}
 		}
 

im-uniapp/pages/group/group.vue

@@ -2,7 +2,7 @@
 	<view  class="tab-page group">
 		<view class="nav-bar">
 			<view class="nav-search">
-				<uni-search-bar @focus="onFocusSearch" cancelButton="none" placeholder="点击搜索群聊"></uni-search-bar>
+				<uni-search-bar v-model="searchText"  cancelButton="none" placeholder="点击搜索群聊"></uni-search-bar>
 			</view>
 			<view class="nav-add" @click="onCreateNewGroup()">
 				<uni-icons type="personadd" size="30"></uni-icons>
@@ -14,7 +14,7 @@
 		<view class="group-items" v-else>
 			<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
 				<view v-for="group in $store.state.groupStore.groups" :key="group.id">
-					<group-item v-if="!group.quit" :group="group"></group-item>
+					<group-item v-if="!group.quit&&group.remark.startsWith(searchText)" :group="group"></group-item>
 				</view>
 			</scroll-view>
 		</view>
@@ -25,11 +25,13 @@
 	export default {
 		data() {
 			return {
-
+				searchText:""
 			}
 		},
 		methods: {
-			onFocusSearch() {},
+			onFocusSearch() {
+				
+			},
 			onCreateNewGroup() {
 				uni.navigateTo({
 					url: "/pages/group/group-edit"

im-uniapp/store/friendStore.js

@@ -36,10 +36,20 @@ export default {
 				state.friends.push(friend);
 			}
 		},
-		setOnlineStatus(state, onlineUsers) {
+		setOnlineStatus(state, onlineTerminals) {
-			state.friends.forEach((f) => {
+			state.friends.forEach((f)=>{
-				let onlineUser = onlineUsers.find((o) => f.id == o.userId);
+				let userTerminal = onlineTerminals.find((o)=> f.id==o.userId);
-				f.online = !!onlineUser
+				if(userTerminal){
+					f.online = true;
+					f.onlineTerminals = userTerminal.terminals;
+					f.onlineWeb = userTerminal.terminals.indexOf(TERMINAL_TYPE.WEB)>=0
+					f.onlineApp = userTerminal.terminals.indexOf(TERMINAL_TYPE.APP)>=0
+				}else{
+					f.online = false;
+					f.onlineTerminals = [];
+					f.onlineWeb = false;
+					f.onlineApp = false;
+				}
 			});
 		},
 		refreshOnlineStatus(state) {
@@ -51,8 +61,9 @@ export default {
 				http({
 					url: '/user/terminal/online?userIds=' + userIds.join(','),
 					method: 'GET'
-				}).then((onlineUsers) => {
+				}).then((onlineTerminals) => {
-					this.commit("setOnlineStatus", onlineUsers);
+					this.commit("setOnlineStatus", onlineTerminals);
+					
 				})
 			}
 			// 30s后重新拉取

im-uniapp/uni.scss

@@ -1,19 +1,5 @@
-/**
+@import '@/uni_modules/uview-plus/theme.scss';
- * 这里是uni-app内置的常用样式变量
+@import '@/uni_modules/uni-scss/variables.scss';
- *
- * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
- * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
- *
- */
-
-/**
- * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
- *
- * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
- */
-
-/* 颜色变量 */
-
 /* 行为相关颜色 */
 $uni-color-primary: #007aff;
 $uni-color-success: #4cd964;
@@ -26,7 +12,7 @@ $uni-text-color-inverse:#fff;//反色
 $uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
 $uni-text-color-placeholder: #808080;
 $uni-text-color-disable:#c0c0c0;
-
+$uni-text-color-icon: #663399;
 /* 背景颜色 */
 $uni-bg-color:#ffffff;
 $uni-bg-color-grey:#f8f8f8;