merge

pages/im/components/sentText.vue

@@ -2,7 +2,6 @@
     <view class="sent--text">
         <input class="input" type="text" :auto-blur="true" @focus="focus" @blur="blur" :focus="focusState"
             v-model="inputTxt" confirm-type="send" @confirm="sent" cursor-spacing="10" />
-        <!-- <button class="button" size="mini" :disabled="disabled" @click="demo">{{focusState ? '失焦': '聚焦'}}</button> -->
     </view>
 </template>
 
@@ -19,10 +18,6 @@
             targetId: {
                 type: String,
                 default: ''
-            },
-            inputTxt: {
-                type: String,
-                default: ''
             }
         },
         computed: {
@@ -33,7 +28,7 @@
                 return this.$store.getters.sender
             }
         },
-        created() {
+        mounted() {
             RongIMLib.getTextMessageDraft(this.conversationType, this.targetId, ({
                 draft
             }) => {
@@ -46,25 +41,20 @@
         },
         data() {
             return {
-                focusState: false,
+                focusState: false,
+                inputTxt: ''
             }
         },
         methods: {
-            // 发送文本消息
             sent() {
-                if (!this.disabled) {
-                    RongIMLib.clearTextMessageDraft(this.conversationType, this.targetId)
-                    im.sentText(this.conversationType, this.targetId, this.inputTxt, this.sender, () => {
+                if (!this.disabled) {
+                    im.sentText(this.conversationType, this.targetId, this.inputTxt, this.sender, () => {
+                        RongIMLib.clearTextMessageDraft(this.conversationType, this.targetId)
                         this.$emit('success')
-                        this.inputTxt = ''
+                        this.inputTxt = ''
                     })
                 }
             },
-            demo() {
-                console.log(this.focusState)
-
-                this.focusState = !this.focusState
-            },
             focus() {
                 this.$emit('focus')
             },

pages/im/components/showMessage.vue

@@ -1,8 +0,0 @@
-<template>
-</template>
-
-<script>
-</script>
-
-<style>
-</style>

pages/im/components/showText.vue

@@ -1,13 +1,21 @@
 <template>
-    <view class="msg--text">
-        <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
-        <view>
-            <text class="im--text" :class="isRemote ? 'left': 'right'">{{ content }}</text>
+    <view class="msg--text">
+        <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 @longpress="backMessage" :class="['text', isRemote ? 'left': 'right']">{{ content }}</view>
         </view>
     </view>
 </template>
 
 <script>
+    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+
     export default {
         name: 'showText',
         props: {
@@ -21,37 +29,77 @@
                 type: Boolean,
                 default: false
             }
-        },
-        computed: {
-            isRemote() {
-                return this.message.messageDirection == 2
-            },
-            content() {
-                return this.message.content.content
-            },
-            contact() {
-                return function(targetId) {
-                    return this.$store.getters.contactInfo(targetId)
-                }
-            }
         },
+        computed: {
+            isRemote() {
+                return this.message.messageDirection == 2
+            },
+            content() {
+                return this.message.content.content
+            },
+            contact() {
+                return function(targetId) {
+                    return this.$store.getters.contactInfo(targetId)
+                }
+            }
+        },
+        methods: {
+            // 撤回消息测试
+            backMessage() {
+                console.log('撤回消息');
+                const pushContent = '推送内容'
+                RongIMLib.recallMessage(this.message.messageId, pushContent,
+                    ({
+                        code,
+                        message
+                    }) => {
+                        console.error(code);
+                        // 撤回消息成功
+                        if (code === 0) {
+                            console.error(message);
+                        }
+                    }
+                )
+            }
+        }
     }
 </script>
 
 <style scoped lang="scss">
     .msg--text {
+        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;
         }
 
-        .im--text {
-            max-width: 508rpx;
+        .text {
+            box-sizing: border-box;
+            max-width: 502rpx;
             padding: 20rpx;
             line-height: 46rpx;
             font-size: 32rpx;
             color: $text-color;
-            display: inline-block;
             word-break: break-all;
 
             &.left {