diff --git a/im-uniapp/common/enums.js b/im-uniapp/common/enums.js index 3ddd09c..fa7ada0 100644 --- a/im-uniapp/common/enums.js +++ b/im-uniapp/common/enums.js @@ -54,10 +54,12 @@ const TERMINAL_TYPE = { } const MESSAGE_STATUS = { - UNSEND: 0, - SENDED: 1, - RECALL: 2, - READED: 3 + FAILED: -2, // 发送失败 + SENDING: -1, // 发送中(消息没到服务器) + PENDING: 0, // 未送达(消息已到服务器，但对方没收到) + DELIVERED: 1, // 已送达(对方已收到，但是未读消息) + RECALL: 2, // 已撤回 + READED: 3, // 消息已读 } export { diff --git a/im-uniapp/components/chat-message-item/chat-message-item.vue b/im-uniapp/components/chat-message-item/chat-message-item.vue index 33dde0c..382b700 100644 --- a/im-uniapp/components/chat-message-item/chat-message-item.vue +++ b/im-uniapp/components/chat-message-item/chat-message-item.vue @@ -14,51 +14,55 @@ {{ showName }} - - - - - - - - - - - - - - - - - - - - - - - - {{ fileSize }} + + + + + + + + + + + + + + + + + + + + + + + + {{ fileSize }} + + + - - + + + + + + {{ JSON.parse(msgInfo.content).duration + '"' }} + + - - - - - - {{ JSON.parse(msgInfo.content).duration + '"' }} - - + + - + + {{ msgInfo.content }} - - 已读 - 未读 + + 已读 + 未读 @@ -118,7 +120,7 @@ export default { methods: { onSendFail() { uni.showToast({ - title: "该文件已发送失败，目前不支持自动重新发送，建议手动重新发送", + title: "该消息已发送失败，目前不支持自动重新发送，建议手动重新发送", icon: "none" }) }, @@ -177,11 +179,11 @@ export default { } }, computed: { - loading() { - return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "loading"; + sending() { + return this.msgInfo.status == this.$enums.MESSAGE_STATUS.SENDING; }, - loadFail() { - return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "fail"; + sendFail() { + return this.msgInfo.status == this.$enums.MESSAGE_STATUS.FAILED; }, data() { return JSON.parse(this.msgInfo.content) @@ -227,6 +229,9 @@ export default { } return items; }, + isTextMessage() { + return this.msgInfo.type == this.$enums.MESSAGE_TYPE.TEXT + }, isAction() { return this.$msgType.isAction(this.msgInfo.type); }, @@ -285,116 +290,137 @@ export default { padding-right: 80rpx; margin-top: 5rpx; - .message-text { + .message-content-wrapper { position: relative; - line-height: 1.6; - margin-top: 10rpx; - padding: 16rpx 24rpx; - background-color: $im-bg; - border-radius: 20rpx; - color: $im-text-color; - font-size: $im-font-size; - text-align: left; - display: block; - word-break: break-word; - white-space: pre-line; - - &:after { - content: ""; - position: absolute; - left: -20rpx; - top: 26rpx; - width: 6rpx; - height: 6rpx; - border-style: solid dashed dashed; - border-color: $im-bg transparent transparent; - overflow: hidden; - border-width: 18rpx; - } - } - - .message-image { display: flex; - flex-wrap: nowrap; - flex-direction: row; align-items: center; - .image-box { + .sending { position: relative; + margin: 0 6rpx; - .send-image { - min-width: 200rpx; - max-width: 420rpx; - height: 350rpx; - cursor: pointer; - border-radius: 4px; + .icon-loading { + color: $im-color-primary; } } .send-fail { - color: $im-color-danger; - font-size: $im-font-size; - cursor: pointer; - margin: 0 20px; + color: #e60c0c; + font-size: 50rpx; + margin: 0 5rpx; } - } - - .message-file { - display: flex; - flex-wrap: nowrap; - flex-direction: row; - align-items: center; - cursor: pointer; - .file-box { + .message-text { position: relative; + line-height: 1.6; + margin-top: 10rpx; + padding: 16rpx 24rpx; + background-color: $im-bg; + border-radius: 20rpx; + color: $im-text-color; + font-size: $im-font-size; + text-align: left; + display: block; + word-break: break-word; + white-space: pre-line; + + &:after { + content: ""; + position: absolute; + left: -20rpx; + top: 26rpx; + width: 6rpx; + height: 6rpx; + border-style: solid dashed dashed; + border-color: $im-bg transparent transparent; + overflow: hidden; + border-width: 18rpx; + } + } + + .message-image { display: flex; flex-wrap: nowrap; + flex-direction: row; align-items: center; - min-height: 60px; - border-radius: 4px; - padding: 10px 15px; - box-shadow: $im-box-shadow-dark; - - .file-info { - flex: 1; - height: 100%; - text-align: left; - font-size: 14px; - width: 300rpx; - - .file-name { - font-weight: 600; - margin-bottom: 15px; - word-break: break-all; + + .image-box { + position: relative; + + .send-image { + min-width: 200rpx; + max-width: 420rpx; + height: 350rpx; + cursor: pointer; + border-radius: 4px; } } - .file-icon { - font-size: 80rpx; - color: #d42e07; + .send-fail { + color: $im-color-danger; + font-size: $im-font-size; + cursor: pointer; + margin: 0 20px; } } - .send-fail { - color: #e60c0c; - font-size: 50rpx; + .message-file { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + align-items: center; cursor: pointer; - margin: 0 20rpx; - } - } - .message-audio { - display: flex; - align-items: center; + .file-box { + position: relative; + display: flex; + flex-wrap: nowrap; + align-items: center; + min-height: 60px; + border-radius: 4px; + padding: 10px 15px; + box-shadow: $im-box-shadow-dark; + + .file-info { + flex: 1; + height: 100%; + text-align: left; + font-size: 14px; + width: 300rpx; + + .file-name { + font-weight: 600; + margin-bottom: 15px; + word-break: break-all; + } + } - .chat-audio-text { - padding-right: 8px; + .file-icon { + font-size: 80rpx; + color: #d42e07; + } + } + + .send-fail { + color: #e60c0c; + font-size: 50rpx; + cursor: pointer; + margin: 0 20rpx; + } } - .icon-voice-play { - font-size: 18px; - padding-right: 8px; + .message-audio { + display: flex; + align-items: center; + + .chat-audio-text { + padding-right: 8px; + } + + .icon-voice-play { + font-size: 18px; + padding-right: 8px; + } } } @@ -454,6 +480,10 @@ export default { padding-left: 80rpx; padding-right: 0; + .message-content-wrapper { + flex-direction: row-reverse; + } + .message-text { margin-left: 10px; background-color: $im-color-primary-light-2; @@ -466,14 +496,6 @@ export default { } } - .message-image { - flex-direction: row-reverse; - } - - .message-file { - flex-direction: row-reverse; - } - .message-audio { flex-direction: row-reverse; diff --git a/im-uniapp/components/head-image/head-image.vue b/im-uniapp/components/head-image/head-image.vue index 1f1251e..9fa8bc2 100644 --- a/im-uniapp/components/head-image/head-image.vue +++ b/im-uniapp/components/head-image/head-image.vue @@ -16,7 +16,8 @@ export default { data() { return { colors: ["#5daa31", "#c7515a", "#e03697", "#85029b", - "#c9b455", "#326eb6"] + "#c9b455", "#326eb6" + ] } }, props: { @@ -34,6 +35,10 @@ export default { type: String, default: null }, + radius: { + type: String, + default: "50%" + }, online: { type: Boolean, default: false @@ -61,7 +66,7 @@ export default { 'minier': 48, 'lage': 108, 'lager': 120, - }[this.size] + } [this.size] } }, avatarImageStyle() { @@ -77,7 +82,7 @@ export default { ` }, textColor() { - if(!this.name){ + if (!this.name) { return '#fff'; } let hash = 0; diff --git a/im-uniapp/components/loading/loading.vue b/im-uniapp/components/loading/loading.vue index a56b8ea..b0f0c98 100644 --- a/im-uniapp/components/loading/loading.vue +++ b/im-uniapp/components/loading/loading.vue @@ -6,7 +6,6 @@ -