nvue-vue

pages/im/components/sentText.vue

@@ -0,0 +1,84 @@
+<template>
+    <view class="sent--text">
+        <input class="input" type="text" @focus="focus" @blur="blur" v-model="inputTxt" confirm-type="send"
+            @confirm="sent" cursor-spacing="10" />
+        <!-- <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: {
+            conversationType: {
+                type: Number,
+                default: 0
+            },
+            targetId: {
+                type: String,
+                default: ''
+            },
+            inputTxt: {
+                type: String,
+                default: ''
+            }
+        },
+        computed: {
+            disabled() {
+                return this.inputTxt.length === 0
+            },
+            sender() {
+                return this.$store.getters.sender
+            }
+        },
+        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: {
+            // 发送文本消息
+            sent() {
+                if (!this.disabled) {
+                    RongIMLib.clearTextMessageDraft(this.conversationType, this.targetId)
+                    im.sentText(this.conversationType, this.targetId, this.inputTxt, this.sender, () => {
+                        this.$emit('success')
+                        this.inputTxt = ''
+                    })
+                }
+            },
+            focus() {
+                this.$emit('focus')
+            },
+            blur() {
+                this.$emit('blur')
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    .sent--text {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        .input {
+            background: #F3F6FB;
+            height: 70rpx;
+            width: 500rpx;
+            border-radius: 10rpx;
+            margin-right: 15rpx;
+            padding: 0 20rpx;
+        }
+    }
+</style>