ui优化

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

@@ -1,10 +1,8 @@
 <template>
 	<view class="chat-record">
-		<view class="chat-record-bar" id="chat-record-bar" :style="recordBarStyle" 
+		<view class="chat-record-bar" id="chat-record-bar" :style="recordBarStyle" @click.stop=""
-			@click.stop=""
+			@touchstart.prevent="onStartRecord" @touchmove.prevent="onTouchMove" @touchend.prevent="onEndRecord">
-			@touchstart.prevent="onStartRecord"
+			{{recording?'正在录音':'长按 说话'}}</view>
-			@touchmove.prevent="onTouchMove" 
-			@touchend.prevent="onEndRecord">{{recording?'正在录音':'长按 说话'}}</view>
 		<view v-if="recording" class="chat-record-window" :style="recordWindowStyle">
 			<view class="rc-wave">
 				<text class="note" style="--d: 0"></text>
@@ -17,8 +15,7 @@
 			</view>
 			<view class="rc-tip">{{recordTip}}</view>
 			<view class="cancel-btn" @click="onCancel">
-				<uni-icons :class="moveToCancel?'red':'black'" type="clear" 
+				<uni-icons :class="moveToCancel?'red':'black'" type="clear" :size="moveToCancel?45:40"></uni-icons>
-				:size="moveToCancel?45:40"></uni-icons>
 			</view>
 			<view class="opt-tip" :class="moveToCancel?'red':'black'">{{moveToCancel? '松手取消':'松手发送,上划取消'}}</view>
 		</view>
@@ -41,10 +38,10 @@
 		methods: {
 			onTouchMove(e) {
 				const moveY = e.touches[0].clientY;
-				this.moveToCancel = moveY < this.recordBarTop-40;
+				this.moveToCancel = moveY < this.recordBarTop - 40;
 			},
-			onCancel(){
+			onCancel() {
-				if(this.recording){
+				if (this.recording) {
 					this.moveToCancel = true;
 					this.onEndRecord();
 				}
@@ -52,7 +49,7 @@
 			onStartRecord() {
 				/* 用户第一次使用语音会唤醒录音权限请求，此时会导致@touchend失效，
 					一直处于录音状态，这里允许用户再次点击发送语音并结束录音 */
-				if(this.recording){
+				if (this.recording) {
 					this.onEndRecord();
 					return;
 				}
@@ -65,7 +62,7 @@
 					// 开始计时
 					this.startTimer();
 				}).catch((e) => {
-					console.log("录音失败"+JSON.stringify(e))
+					console.log("录音失败" + JSON.stringify(e))
 					uni.showToast({
 						title: "录音失败",
 						icon: "none"
@@ -111,7 +108,7 @@
 				this.rcTimer = setInterval(() => {
 					this.druation++;
 					// 大于60s,直接结束
-					if(this.druation >= 60 ){
+					if (this.druation >= 60) {
 						this.onEndRecord();
 					}
 				}, 1000)
@@ -136,10 +133,12 @@
 			},
 			recordBarStyle() {
 				const bgColor = this.recording ? "royalblue" : "#f8f8f8";
-				return `background-color:${bgColor};`
+				const textColor = this.recording ? "white" : "black";
+				return `background-color:${bgColor};
+						color:${textColor};`
 			},
-			recordTip(){
+			recordTip() {
-				if(this.druation > 50){
+				if (this.druation > 50) {
 					return `${60-this.druation}s后将停止录音`;
 				}
 				return `录音时长:${this.druation}s`;
@@ -201,7 +200,7 @@
 			left: 0;
 			height: 360rpx;
 			width: 100%;
-			background-color:  rgba(255, 255, 255, 0.95);
+			background-color: rgba(255, 255, 255, 0.95);
 			padding: 30rpx;
 
 			.icon-microphone {

im-uniapp/pages.json

@@ -51,7 +51,7 @@
 	},
 	"tabBar": {
 		"color": "#000000",
-		"selectedColor": "#09C160",
+		"selectedColor": "#587ff0",
 		"borderStyle": "black",
 		"backgroundColor": "#ffffff",
 		"list": [{

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" style="background-color:#497eed;"></view>
+						<view class="tool-icon iconfont icon-picture" ></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" style="background-color: #7454b0;"></view>
+						<view class="tool-icon iconfont icon-camera" ></view>
 					</image-upload>
 					<view class="tool-name">拍摄</view>
 				</view>
@@ -65,32 +65,32 @@
 				<view class="chat-tools-item">
 					<file-upload :onBefore="onUploadFileBefore" :onSuccess="onUploadFileSuccess"
 						:onError="onUploadFileFail">
-						<view class="tool-icon iconfont icon-folder" style="background-color: #c99122;"></view>
+						<view class="tool-icon iconfont icon-folder" ></view>
 					</file-upload>
 					<view class="tool-name">文件</view>
 				</view>
 		
 				<view class="chat-tools-item" @click="onRecorderInput()">
-					<view class="tool-icon iconfont icon-microphone" style="background-color: #a8a53f;"></view>
+					<view class="tool-icon iconfont icon-microphone" ></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" style="background-color: #663399;"
+					<view class="tool-icon iconfont icon-receipt" 
 						: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" style="background-color: #8380E7;"></view>
+					<view class="tool-icon iconfont icon-video" ></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" style="background-color: #8380E7;"></view>
+					<view class="tool-icon iconfont icon-call" ></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" style="background-color: #8380E7;"></view>
+					<view class="tool-icon iconfont icon-call" ></view>
 					<view class="tool-name">语音通话</view>
 				</view>
 				<!-- #endif -->
@@ -829,7 +829,6 @@
 			.iconfont {
 				font-size: 68rpx;
 				margin: 6rpx;
-				color: $uni-text-color-icon;
 			}
 
 			.chat-record {
@@ -839,7 +838,6 @@
 
 			.send-text {
 				flex: 1;
-				background-color: white !important;
 				overflow: auto;
 				padding: 20rpx;
 				background-color: #fff;
@@ -853,7 +851,6 @@
 
 			.btn-send {
 				margin: 5rpx;
-				background-color: $uni-text-color-icon;
 			}
 		}
 
@@ -861,7 +858,7 @@
 		.chat-tab-bar {
 			height: 500rpx;
 			padding: 20rpx;
-			background-color: #f8ffff;
+			background-color: #f8f8f8;
 
 			.chat-tools {
 				display: flex;
@@ -877,9 +874,9 @@
 					.tool-icon {
 						padding: 28rpx;
 						font-size: 60rpx;
-						background-color: rebeccapurple;
+						border-radius: 20%;
-						border-radius: 50%;
+						background-color: white;
-						color: white;
+						color: black;
 						&.active {
 							background-color: #ddd;
 						}

im-uniapp/pages/friend/friend.vue

@@ -61,7 +61,7 @@
 			isEnglish(character) {
 				return /^[A-Za-z]+$/.test(character);
 			},
-			init() {
+			refreshFriendGroup() {
 				// 按首字母分组
 				let groupMap = new Map();
 				this.friends.forEach((f) => {
@@ -103,7 +103,7 @@
 			},
 		},
 		onShow() {
-			this.init();
+			this.refreshFriendGroup();
 		}
 
 	}
@@ -141,10 +141,6 @@
 			.nav-add {
 				line-height: 56px;
 				cursor: pointer;
-				.uni-icons {
-					color: $uni-text-color-icon !important;
-				}
-				
 			}
 		}
 

im-uniapp/uni.scss

@@ -11,8 +11,7 @@ $uni-text-color:#333;//基本色
 $uni-text-color-inverse:#fff;//反色
 $uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
 $uni-text-color-placeholder: #808080;
-$uni-text-color-disable:#c0c0c0;
+$uni-text-color-disable: #c0c0c0;
-$uni-text-color-icon: #663399;
 /* 背景颜色 */
 $uni-bg-color:#ffffff;
 $uni-bg-color-grey:#f8f8f8;