草稿处理

pages/im/private/components/sentText.nvue

@@ -1,12 +1,13 @@
 <template>
     <view class="text">
-        <input class="input" type="text" v-model="inputTxt" confirm-type="send" @confirm="send" cursor-spacing="10" />
+        <input class="input" type="text" v-model="inputTxt" confirm-type="send" @confirm="sent" cursor-spacing="10" />
-        <text class="button" size="mini" @click="send">发送</text>
+        <button class="button" size="mini" :disabled="disabled" @click="sent">发送</button>
     </view>
 </template>
 
 <script>
     import im from '@/utils/im/index.js'
+    import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
 
     export default {
         props: {
@@ -20,29 +21,48 @@
             },
             inputTxt: {
                 type: String,
-                default: '1234567890'
+                default: ''
             }
         },
+        computed: {
+            disabled() {
+                return this.inputTxt.length === 0
+            }
+        },
+        created() {
+            RongIMLib.getTextMessageDraft(this.conversationType, this.targetId, ({
+                draft
+            }) => {
+                draft ? this.inputTxt = draft : ''
+            })
+        },
+        beforeDestroy() {
+            RongIMLib.saveTextMessageDraft(this.conversationType, this.targetId, this.inputTxt, (res) => {
+                console.log('销毁组件之前，保存草稿信息，但是没有执行', res);
+            })
+        },
         methods: {
             // 发送文本消息
-            send() {
+            sent() {
-                if (this.inputTxt === '') return
+                if (!this.disabled) {
-                im.sentText(this.conversationType, this.targetId, this.inputTxt, () => {
+                    RongIMLib.clearTextMessageDraft(this.conversationType, this.targetId)
-                    setTimeout(() => {
+                    im.sentText(this.conversationType, this.targetId, this.inputTxt, () => {
-                        this.$emit('success')
+                        setTimeout(() => {
-                    }, 500)
+                            this.$emit('success')
-                    this.inputTxt = ''
+                        }, 500)
-                })
+                        this.inputTxt = ''
-            },
+                    })
+                }
+            }
         }
     }
 </script>
 
 <style scoped>
     .text {
-        display: flex;
+        display: flex;
-        flex-direction: row;
+        flex-direction: row;
-        justify-content: space-between;
+        justify-content: space-between;
     }
 
     .input {
@@ -55,6 +75,7 @@
     }
 
     .button {
+        border: none;
         background: #34CE98;
         color: white;
         width: 120rpx;
@@ -64,4 +85,8 @@
         font-size: 30rpx;
         font-weight: bold;
     }
+
+    .button[disabled] {
+        background-color: #555555;
+    }
 </style>