im-ui-mobile 0.1.0 → 0.1.2

package/components/im-message-item/im-message-item.vue

@@ -3,24 +3,21 @@
 		<view class="message-tip" v-if="msgInfo.type == MESSAGE_TYPE.TIP_TEXT">
 			{{ msgInfo.content }}
 		</view>
-		<view class="message-tip" v-else-if="msgInfo.type == MESSAGE_TYPE.TIP_TIME">
-			{{ $datetime.toTimeText(msgInfo.sendTime) }}
-		</view>
 		<view class="message-normal" v-else-if="isNormal" :class="{ 'message-mine': msgInfo.selfSend }">
-			<im-avatar class="avatar" @longpress.prevent="$emit('longPressHead')" :id="msgInfo.sendId" :url="avatar"
-				:name="showName" size="small" />
+			<im-avatar class="avatar" @click="$emit('clickAvatar')" @longpress.prevent="$emit('longpressAvatar')"
+				:id="msgInfo.sendId" :url="avatar" :title="displayName" size="small" />
 			<view class="content">
 				<view v-if="msgInfo.groupId && !msgInfo.selfSend" class="top">
-					<text>{{ showName }}</text>
+					<text>{{ displayName }}</text>
 				</view>
 				<view class="bottom">
 					<view class="message-content-wrapper">
 						<view v-if="msgInfo.type == MESSAGE_TYPE.TEXT">
 							<im-context-menu :items="menuItems" @select="onSelectMenu">
 								<!-- up-parse支持点击a标签,但是不支持显示emo表情，也不支持换行 -->
-								<up-parse
-									v-if="$url.containUrl(msgInfo.content) && !emoji.containEmoji(msgInfo.content)"
-									class="message-text" :showImgMenu="false" :content="nodesText" />
+								<im-parse
+									v-if="$url.containUrl(msgInfo.content) && !(emoji as any).containEmoji(msgInfo.content)"
+									customClass="message-text" :content="nodesText" />
 								<!-- rich-text支持显示emo表情以及消息换行，但是不支持点击a标签 -->
 								<rich-text v-else class="message-text" :nodes="nodesText" />
 							</im-context-menu>
@@ -39,8 +36,8 @@
 							<im-context-menu :items="menuItems" @select="onSelectMenu">
 								<view class="file-box">
 									<view class="file-info" style="overflow: hidden;">
-										<u-link class="file-name" :under-line="true" color="#007BFF"
-											:href="contentData.url" :text="contentData.name"></u-link>
+										<im-link class="file-name" underline="none" color="#007BFF"
+											:href="contentData.url" :text="contentData.name" />
 										<view class="file-size">{{ fileSize }}</view>
 									</view>
 									<view class="file-icon iconfont icon-file"></view>
@@ -67,18 +64,20 @@
 							</view>
 						</im-context-menu>
 						<view v-if="sending && isTextMessage" class="sending">
-							<im-loading :size="40" icon-color="#656adf" :mask="false"></im-loading>
+							<im-loading :size="32" icon-color="rgb(134 4 155)" :mask="false" :text="''" />
 						</view>
 						<view v-else-if="sendFail" @click="onSendFail"
 							class="send-fail iconfont icon-warning-circle-fill"></view>
 					</view>
+
+					<!-- 消息发送状态 -->
 					<view class="message-status" v-if="!isAction && msgInfo.selfSend && !msgInfo.groupId">
-						<text class="chat-readed" v-if="msgInfo.status == MESSAGE_STATUS.READED">已读</text>
+						<text class="chat-readed" v-if="msgInfo.status == MESSAGE_STATUS.READ">已读</text>
 						<text class="chat-unread" v-else>未读</text>
 					</view>
 					<view class="chat-receipt" v-if="msgInfo.receipt" @click="onShowReadedBox">
 						<text v-if="msgInfo.receiptOk" class="tool-icon iconfont icon-ok"></text>
-						<text v-else>{{ msgInfo.readedCount }}人已读</text>
+						<text v-else>{{ msgInfo.readCount }}人已读</text>
 					</view>
 				</view>
 			</view>
@@ -96,14 +95,16 @@ import { MESSAGE_TYPE, MESSAGE_STATUS, datetime, dom, url, messageType, emoji }
 
 interface Props {
 	avatar?: string;
-	showName: string;
+	displayName: string;
 	msgInfo: any;
 	groupMembers?: any[];
 }
 
 interface Emits {
 	(e: 'call'): void;
-	(e: 'longPressHead'): void;
+	(e: 'clickAvatar'): void;
+	(e: 'doubleclickAvatar'): void;
+	(e: 'longpressAvatar'): void;
 	(e: 'resend', msgInfo: any): void;
 	(e: 'audioStateChange', state: string, msgInfo: any): void;
 	(e: 'copy', msgInfo: any): void;
@@ -129,6 +130,7 @@ const onSendFail = () => {
 };
 
 const onPlayAudio = () => {
+	console.log('onPlayAudio() 音频播放')
 	// 初始化音频播放器
 	if (!innerAudioContext.value) {
 		innerAudioContext.value = uni.createInnerAudioContext();
@@ -156,6 +158,7 @@ const onPlayAudio = () => {
 		innerAudioContext.value.play();
 		audioPlayState.value = "PLAYING";
 	}
+
 	emitAudioState();
 };
 
@@ -283,14 +286,14 @@ const imageStyle = computed(() => {
 
 <style scoped lang="scss">
 .message-item {
-	padding: 2rpx 20rpx;
+	margin: 0 20rpx;
+	margin-bottom: 40rpx;
 
 	.message-tip {
-		line-height: 60rpx;
 		text-align: center;
 		color: $im-text-color-lighter;
-		font-size: $im-font-size-mini;
-		padding: 10rpx;
+		font-size: $im-font-size-small;
+		padding: 20rpx;
 	}
 
 	.message-normal {
@@ -315,12 +318,12 @@ const imageStyle = computed(() => {
 				font-size: $im-font-size-small;
 				line-height: $im-font-size-small;
 				height: $im-font-size-small;
+				margin-bottom: 12rpx;
 			}
 
 			.bottom {
 				display: inline-block;
 				padding-right: 80rpx;
-				margin-top: 5rpx;
 
 				.message-content-wrapper {
 					position: relative;
@@ -345,9 +348,8 @@ const imageStyle = computed(() => {
 					.message-text {
 						position: relative;
 						line-height: 1.6;
-						margin-top: 10rpx;
 						padding: 16rpx 24rpx;
-						background-color: $im-bg;
+						background-color: #ffffff;
 						border-radius: 20rpx;
 						color: $im-text-color;
 						font-size: $im-font-size;
@@ -364,7 +366,7 @@ const imageStyle = computed(() => {
 							width: 6rpx;
 							height: 6rpx;
 							border-style: solid dashed dashed;
-							border-color: $im-bg transparent transparent;
+							border-color: #ffffff transparent transparent;
 							overflow: hidden;
 							border-width: 18rpx;
 						}
@@ -468,11 +470,10 @@ const imageStyle = computed(() => {
 				.message-status {
 					line-height: $im-font-size-mini;
 					font-size: $im-font-size-mini;
-					padding-top: 2rpx;
+					padding-top: 20rpx;
 
 					.chat-readed {
 						display: block;
-						padding-top: 2rpx;
 						color: $im-text-color-lighter;
 					}
 
@@ -485,6 +486,7 @@ const imageStyle = computed(() => {
 					font-size: $im-font-size-small;
 					color: $im-text-color-lighter;
 					font-weight: 600;
+					padding-top: 10rpx;
 
 					.icon-ok {
 						font-size: 20px;