新增表情包组件

pages/im/components/sent/sentEmoji.vue

@@ -0,0 +1,79 @@
+<template>
+    <view class="emoji--lay" v-show="show">
+        <scroll-view class="scroll" :scroll-y="true">
+            <view class="emoji-flex">
+                <view class="item" v-for="(item, index) in emojiArr" :key="index" @click="$emit('onEmoji', item)">{{item.emoji}}</view>
+            </view>
+        </scroll-view>
+        <view class="tool">
+            <!-- <view class="item" @click="$emit('delete')">删除</view> -->
+            <view class="item sent" @click="$emit('sent')">发送</view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import emoji from '@/static/im/emoji'
+    export default{
+        props:{
+            show: {
+                type: Boolean,
+                default: () => {
+                    return false
+                }
+            }
+        },
+        data(){
+            return {
+                emojiArr: emoji
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .emoji--lay{
+        height: 600rpx;
+        position: relative;
+        .scroll{
+            height: 600rpx;
+            .emoji-flex{
+                padding: 15rpx 15rpx 120rpx;
+                display: flex;
+                flex-wrap: wrap;
+                .item{
+                    margin: 10rpx 15rpx;
+                    font-size: 52rpx;
+                    width: calc(12.5% - 30rpx);
+                    box-sizing: border-box;
+                }
+            }
+        }
+        .tool{
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-image: linear-gradient(to top, #FFF, rgba(255, 255, 255, .0));
+            display: flex;
+            justify-content: flex-end;
+            padding: 20rpx 30rpx 30rpx;
+            .item{
+                line-height: 70rpx;
+                border-radius: 35rpx;
+                width: 140rpx;
+                text-align: center;
+                font-size: 28rpx;
+                margin-left: 20rpx;
+                background: white;
+                border: solid 1rpx #f5f5f5;
+                box-sizing: border-box;
+                &.sent{
+                    border-color: #34CE98;
+                    background: #34CE98;
+                    color: white;
+                }
+            }
+        }
+    }
+</style>

pages/im/components/sent/sentText.vue

@@ -1,7 +1,17 @@
 <template>
     <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" />
+        <input
+            class="input"
+            type="text"
+            :auto-blur="true"
+            :focus="focusState"
+            v-model="inputTxt"
+            confirm-type="send"
+            cursor-spacing="10"
+            @focus="focus"
+            @blur="blur"
+            @confirm="sent"
+        />
     </view>
 </template>
 
@@ -27,7 +37,7 @@
         computed: {
             disabled() {
                 return this.inputTxt.length === 0
-            }
+            },
         },
         mounted() {
             RongIMLib.getTextMessageDraft(this.conversationType, this.targetId, ({
@@ -45,9 +55,15 @@
                 focusState: false,
                 inputTxt: ''
             }
-        },
+        },
+        created(){
+            uni.$on('emojiValue', res => {
+                this.inputTxt = res.value
+            })
+        },
+        
         methods: {
-            sent() {
+            sent() {
                 if (!this.disabled) {
                     im.sentText(this.conversationType, this.targetId, this.inputTxt, this.sender, () => {
                         RongIMLib.clearTextMessageDraft(this.conversationType, this.targetId)
@@ -56,13 +72,16 @@
                     })
                 }
             },
-            focus() {
+            focus() {
                 this.$emit('focus')
             },
-            blur() {
+            blur(e) {
                 uni.hideKeyboard()
-                this.$emit('blur')
+                this.$emit('blur', e.detail)
             }
+        },
+        destroyed() {
+            uni.$off('emojiValue')
         }
     }
 </script>
@@ -75,7 +94,7 @@
         .input {
             background: #F3F6FB;
             height: 70rpx;
-            width: 460rpx;
+            width: 400rpx;
             border-radius: 10rpx;
             margin-right: 15rpx;
             padding: 0 20rpx;

pages/im/components/sent/sentVoice.vue

@@ -1,7 +1,7 @@
 <template>
     <view class="send--voice">
         <view class="voice" hover-class="chat-hover" @touchstart="startRecord" @touchend="stopRecord" @touchmove="touchmove">
-            <text class="button">按住说话</text>
+            <text class="button">按住 说话</text>
         </view>
         <!-- 录音层 -->
         <view class="lay" v-if="showRecordTip">
@@ -222,10 +222,11 @@
             line-height: 70rpx;
             justify-content: center;
             align-items: center;
-            width: 500rpx;
+            width: 400rpx;
             border-radius: 10rpx;
             margin-right: 15rpx;
-
+            padding: 0 20rpx;
+            font-weight: bold;
             .button {
                 font-size: 30rpx;
                 color: #333;