From 36f70e1b5e454d09e32303f338c737121b589a19 Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Tue, 22 Feb 2022 17:44:15 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9F=B3=E8=A7=86=E9=A2=91=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/im/components/show/showCall.vue  |  60 +++---
 pages/im/components/show/showImage.vue | 248 ++++++++++++++-----------
 pages/im/components/show/showVoice.vue | 130 ++++++++-----
 3 files changed, 254 insertions(+), 184 deletions(-)

diff --git a/pages/im/components/show/showCall.vue b/pages/im/components/show/showCall.vue
index 7f08570..8e6f592 100644
--- a/pages/im/components/show/showCall.vue
+++ b/pages/im/components/show/showCall.vue
@@ -1,47 +1,55 @@
 <template>
     <view class="msg--call">
-        <view class="name" v-if="!guest && name">{{ name }}</view>
-        <view class="im--text" :class="guest ? 'right': 'left'">
-            <u-icon name="camera" size="22" v-if="message.mediaType == 1"
-                :label="message.connected ? '通话时长：' + duration : '未接通'" />
-            <u-icon name="phone" size="22" v-else :label="message.connected ? '通话时长：' + duration : '未接通'" />
+        <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
+        <view class="im--text" :class="isRemote ? 'left': 'right'">
+            <u-icon name="camera" size="22" v-if="msg.mediaType == 1" :label="label" />
+            <u-icon name="phone" size="22" v-else :label="label" />
         </view>
     </view>
 </template>
 
 <script>
-    import utils from '@/utils/index.js'
-    import moment from 'moment'
-    
+    import utils from '@/utils/index.js'
+    import moment from 'moment'
+
     export default {
         name: 'showText',
         props: {
-            msg: {
+            message: {
                 type: Object,
                 default: () => {
                     return {}
                 }
             },
-            name: {
-                type: String,
-                default: ''
-            },
-            guest: {
+            isGroup: {
                 type: Boolean,
-                default: true
+                default: false
             }
         },
-        computed: {
-            message() {
-                return JSON.parse(this.msg.message)
-            },
-            duration() {
-                if (this.message.duration > 3600) {
-                    return moment.utc(this.message.duration * 1000).format('HH:mm:ss')
-                } else {
-                    return moment.utc(this.message.duration * 1000).format('mm:ss')
-                }
-            }
+        mounted() {
+        },
+        computed: {
+            msg() {
+                return JSON.parse(this.message.content.message)
+            },
+            label() {
+                return this.msg.connected ? '通话时长：' + duration : '未接通'
+            },
+            isRemote() {
+                return this.message.messageDirection == 2
+            },
+            contact() {
+                return function(targetId) {
+                    return this.$store.getters.contactInfo(targetId)
+                }
+            },
+            duration() {
+                if (this.message.duration > 3600) {
+                    return moment.utc(this.message.duration * 1000).format('HH:mm:ss')
+                } else {
+                    return moment.utc(this.message.duration * 1000).format('mm:ss')
+                }
+            }
         }
     }
 </script>
diff --git a/pages/im/components/show/showImage.vue b/pages/im/components/show/showImage.vue
index 7654eb6..4b78be9 100644
--- a/pages/im/components/show/showImage.vue
+++ b/pages/im/components/show/showImage.vue
@@ -1,110 +1,140 @@
-<template>
-    <view class="">
-        <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
-        <view class="msg--image" :class="isRemote ? 'left': 'right'">
-            <image class="img" :src="content.thumbnail" @click="previewImage" mode="widthFix"></image>
-        </view>
-    </view>
-</template>
-
-<script>
-    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
-
-    export default {
-        name: 'showImage',
-        props: {
-            message: {
-                type: Object,
-                default: () => {
-                    return {}
-                }
-            },
-            isGroup: {
-                type: Boolean,
-                default: false
-            }
-        },
-        computed: {
-            isRemote() {
-                return this.message.messageDirection == 2
-            },
-            content() {
-                return this.message.content
-            },
-            contact() {
-                return function(targetId) {
-                    return this.$store.getters.contactInfo(targetId)
-                }
-            }
-        },
-        methods: {
-            previewImage() {
-                if (this.content.local) {
-                    uni.previewImage({
-                        urls: [
-                            this.content.local
-                        ],
-                        success: (e) => {
-                            console.log(e);
-                        },
-                        fail: (er) => {
-                            console.log(er);
-                        }
-                    })
-                } else {
-                    RongIMLib.downloadMediaMessage(this.messageId, {
-                        success: (path) => {
-                            this.content.local = path
-                            uni.previewImage({
-                                urls: [
-                                    path
-                                ],
-                                success: (e) => {
-                                    console.log(e);
-                                },
-                                fail: (er) => {
-                                    console.log(er);
-                                }
-                            })
-                        },
-                        progress: (progress, messageId) => {
-                            console.log('progress', progress);
-                        },
-                        cancel: (messageId) => {
-                            console.log('cancel', messageId);
-                        },
-                        error: (errorCode, messageId) => {
-                            console.log('errorCode', errorCode);
-                        }
-                    })
-                }
-            }
-        }
-    }
-</script>
-
-<style scoped lang="scss">
-    .name {
-        font-size: 24rpx;
-        color: $text-gray-m;
-    }
-
-    .msg--image {
-        .img {
-            width: 180rpx;
-        }
-
-        &.left {
-            .img {
-                border-radius: 0 10rpx 10rpx 10rpx;
-            }
-        }
-
-        &.right {
-            .img {
-                border-radius: 10rpx 0 10rpx 10rpx;
-            }
-        }
-
-    }
+<template>
+    <view class="msg--image">
+        <view class="state" v-if="!isGroup && !isRemote">
+            <!-- 已发送 -->
+            <u-icon name="checkbox-mark" class="sent" :color="message.sentStatus >= 30 ? '#34CE98' : '#999999' " />
+            <!-- 已阅读 -->
+            <u-icon name="checkbox-mark" class="receive" :color="message.sentStatus >= 50 ? '#34CE98' : '#999999' " />
+        </view>
+        <view class="">
+            <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
+            <view class="image" :class="isRemote ? 'left': 'right'">
+                <image class="img" :src="content.thumbnail" @click="previewImage" mode="widthFix"></image>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+
+    export default {
+        name: 'showImage',
+        props: {
+            message: {
+                type: Object,
+                default: () => {
+                    return {}
+                }
+            },
+            isGroup: {
+                type: Boolean,
+                default: false
+            }
+        },
+        computed: {
+            isRemote() {
+                return this.message.messageDirection == 2
+            },
+            content() {
+                return this.message.content
+            },
+            contact() {
+                return function(targetId) {
+                    return this.$store.getters.contactInfo(targetId)
+                }
+            }
+        },
+        methods: {
+            previewImage() {
+                if (this.content.local) {
+                    uni.previewImage({
+                        urls: [
+                            this.content.local
+                        ],
+                        success: (e) => {
+                            console.log(e);
+                        },
+                        fail: (er) => {
+                            console.log(er);
+                        }
+                    })
+                } else {
+                    RongIMLib.downloadMediaMessage(this.messageId, {
+                        success: (path) => {
+                            this.content.local = path
+                            uni.previewImage({
+                                urls: [
+                                    path
+                                ],
+                                success: (e) => {
+                                    console.log(e);
+                                },
+                                fail: (er) => {
+                                    console.log(er);
+                                }
+                            })
+                        },
+                        progress: (progress, messageId) => {
+                            console.log('progress', progress);
+                        },
+                        cancel: (messageId) => {
+                            console.log('cancel', messageId);
+                        },
+                        error: (errorCode, messageId) => {
+                            console.log('errorCode', errorCode);
+                        }
+                    })
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    .msg--image {
+        display: flex;
+        align-items: flex-end;
+
+        .state {
+            padding: 10rpx;
+            border-radius: 30rpx;
+            width: 40rpx;
+            background-color: #ddd;
+            display: flex;
+            margin-right: 10rpx;
+
+            .sent {
+                z-index: 2;
+            }
+
+            .receive {
+                z-index: 1;
+                margin-left: -20rpx;
+            }
+        }
+
+        .name {
+            font-size: 24rpx;
+            color: $text-gray-m;
+        }
+
+        .image {
+            .img {
+                width: 180rpx;
+            }
+
+            &.left {
+                .img {
+                    border-radius: 0 10rpx 10rpx 10rpx;
+                }
+            }
+
+            &.right {
+                .img {
+                    border-radius: 10rpx 0 10rpx 10rpx;
+                }
+            }
+        }
+    }
 </style>
diff --git a/pages/im/components/show/showVoice.vue b/pages/im/components/show/showVoice.vue
index 0349c8d..d6f6f6c 100644
--- a/pages/im/components/show/showVoice.vue
+++ b/pages/im/components/show/showVoice.vue
@@ -1,16 +1,25 @@
 <template>
-    <view class="">
-        <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
-        <view class="msg--voice">
-            <view :class="['voice', isRemote ? 'left': 'right', {'onPlay': onPlay}]" :style="{width: width + 'rpx'}"
-                @click="startPlay">
-                <image v-if="isRemote" class="icon" :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }"
-                    src="@/static/icon/audio_green.png" mode="widthFix"></image>
-                <image v-else class="icon" :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }"
-                    src="@/static/icon/audio_white.png" mode="widthFix"></image>
-                <text class="duration">{{ duration }}"</text>
+    <view class="msg--voice">
+        <view class="state" v-if="!isGroup && !isRemote">
+            <!-- 已发送 -->
+            <u-icon name="checkbox-mark" class="sent" :color="message.sentStatus >= 30 ? '#34CE98' : '#999999' " />
+            <!-- 已阅读 -->
+            <u-icon name="checkbox-mark" class="receive" :color="message.sentStatus >= 50 ? '#34CE98' : '#999999' " />
+        </view>
+        <view class="">
+            <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
+            <view class="msg-voice">
+                <view :class="['voice', isRemote ? 'left': 'right', {'onPlay': onPlay}]" :style="{width: width + 'rpx'}"
+                    @click="startPlay">
+                    <image v-if="isRemote" class="icon"
+                        :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }"
+                        src="@/static/icon/audio_green.png" mode="widthFix"></image>
+                    <image v-else class="icon" :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }"
+                        src="@/static/icon/audio_white.png" mode="widthFix"></image>
+                    <text class="duration">{{ duration }}"</text>
+                </view>
+                <u-badge isDot :show="message.content.local =='' && isRemote" />
             </view>
-            <u-badge isDot :show="message.content.local =='' && isRemote" />
         </view>
     </view>
 </template>
@@ -79,8 +88,8 @@
                 if (this.onPlay) {
                     this.stopPlay()
                     return
-                }
-                this.onPlay = true
+                }
+                this.onPlay = true
                 // 如果下载到了本地，那么直接播放，否则调用下载语音消息接口，下载后再播放
                 if (this.message.content.local && this.message.content.local.indexOf('///data/user/') < 0) {
                     this.playVoice(this.message.content.local)
@@ -162,59 +171,82 @@
 </style>
 
 <style scoped lang="scss">
-    .name {
-        font-size: 24rpx;
-        color: $text-gray-m;
-    }
-
     .msg--voice {
         display: flex;
-        align-items: center;
+        align-items: flex-end;
 
-        .u-badge {
-            margin-left: 20rpx;
+        .state {
+            padding: 10rpx;
+            border-radius: 30rpx;
+            width: 40rpx;
+            background-color: #ddd;
+            display: flex;
+            margin-right: 10rpx;
+
+            .sent {
+                z-index: 2;
+            }
+
+            .receive {
+                z-index: 1;
+                margin-left: -20rpx;
+            }
         }
 
-        .voice {
+        .name {
+            font-size: 24rpx;
+            color: $text-gray-m;
+        }
+
+        .msg-voice {
             display: flex;
-            flex-direction: row;
-            justify-content: space-between;
             align-items: center;
-            height: 84rpx;
-            padding: 0 30rpx;
-            box-sizing: border-box;
 
-            .icon {
-                width: 38rpx;
-                height: 38rpx;
+            .u-badge {
+                margin-left: 20rpx;
             }
 
-            &.left {
-                border-radius: 0 20rpx 20rpx 20rpx;
-                background: white;
+            .voice {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                align-items: center;
+                height: 84rpx;
+                padding: 0 30rpx;
+                box-sizing: border-box;
 
-                &.onPlay {
-                    background-color: #EEEEEE;
+                .icon {
+                    width: 38rpx;
+                    height: 38rpx;
                 }
 
-                .duration {
-                    color: #333;
-                    font-size: 30rpx;
-                }
-            }
+                &.left {
+                    border-radius: 0 20rpx 20rpx 20rpx;
+                    background: white;
 
-            &.right {
-                border-radius: 20rpx 0 20rpx 20rpx;
-                background: $main-color;
-                flex-direction: row-reverse;
+                    &.onPlay {
+                        background-color: #EEEEEE;
+                    }
 
-                &.onPlay {
-                    background-color: darken($main-color, 10);
+                    .duration {
+                        color: #333;
+                        font-size: 30rpx;
+                    }
                 }
 
-                .duration {
-                    color: white;
-                    font-size: 30rpx;
+                &.right {
+                    border-radius: 20rpx 0 20rpx 20rpx;
+                    background: $main-color;
+                    flex-direction: row-reverse;
+
+                    &.onPlay {
+                        background-color: darken($main-color, 10);
+                    }
+
+                    .duration {
+                        color: white;
+                        font-size: 30rpx;
+                    }
                 }
             }
         }