新增表情包组件

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;

pages/im/components/sentMessageBar.vue

@@ -7,18 +7,27 @@
                 <image class="icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix" />
             </view>
             <sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId" @success="onSuccess" />
-            <sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId" @success="onSuccess" />
-            <view class="msg-type msg-popups" @click="showPopups = !showPopups"> <image class="icon" src="@/static/icon/popups-icon.png" /> </view>
+            <sent-text ref="textView" v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId" @success="onSuccess" @blur="onBlur"  />
+            <view class="msg-type msg-popups" @click="onShowEmoji">
+                <image class="icon" src="@/static/icon/emoji-icon.png" /> 
+                <!-- 考虑唤起键盘，暂时保留v-show -->
+                <!-- <image v-show="!showEmoji" class="icon" src="@/static/icon/emoji-icon.png" /> -->
+                <!-- <image v-show="showEmoji" class="icon" src="@/static/icon/key-icon.png" /> -->
+            </view>
+            <view class="msg-type msg-popups" @click="() => {showPopups = !showPopups, showEmoji = false}"> <image class="icon" src="@/static/icon/popups-icon.png" /> </view>
         </view>
         <!-- 弹出层 -->
-        <sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId" @success="() => {showPopups = false, onSuccess()}" />
+        <sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId" @success="() => {showPopups = false, onSuccess()}" />
+        <!-- 表情包 -->
+        <sent-emoji :show="showEmoji" @onEmoji="onEmoji" @delete="onDelete" @sent="onSent"></sent-emoji>
     </view>
 </template>
 
 <script>
     import sentText from './sent/sentText'
     import sentVoice from './sent/sentVoice'
-    import sentPopups from './sent/sentPopups'
+    import sentPopups from './sent/sentPopups'
+    import sentEmoji from './sent/sentEmoji'
 
     export default {
         props: {
@@ -34,18 +43,26 @@
         components: {
             sentText,
             sentVoice,
-            sentPopups
+            sentPopups,
+            sentEmoji
         },
         data() {
             return {
-                chatType: 1, // 0 语音，1 文本
-                showPopups: false
+                chatType    : 1, // 0 语音，1 文本
+                showPopups  : false,
+                showEmoji   : false,
+                chatText    : {
+                    value   : "",
+                    cursor  : 0
+                }
             }
         },
         methods: {
             // 切换聊天类型，语音/文本
             changeMessageType() {
-                this.chatType = this.chatType === 1 ? 0 : 1
+                this.chatType = this.chatType === 1 ? 0 : 1
+                if(this.showEmoji) this.showEmoji = false
+                if(this.showPopups) this.showPopups = false
             },
             onSuccess() {
                 this.$emit('onSuccess')
@@ -55,6 +72,39 @@
                 if(this.showPopups){
                     this.showPopups = false
                 }
+            },
+            // 输入表情
+            onEmoji(e){
+                let atMsg  = this.chatText
+                let newMsg = () => {
+                    return atMsg.value.slice(0, atMsg.cursor) + e.emoji + atMsg.value.slice(atMsg.cursor)
+                }
+                atMsg.value = newMsg()
+                atMsg.cursor += 2
+                // 全局通讯
+                uni.$emit('emojiValue', atMsg)
+            },
+            // 删除表情
+            onDelete(){
+                console.log('删除')
+            },
+            // 发送消息
+            onSent(){
+                this.$refs.textView.sent()
+                this.chatText = {
+                    value   : "",
+                    cursor  : 0
+                }
+            },
+            // 获取输入框文字最新状态
+            onBlur(e){
+                this.chatText = e
+            },
+            // 显示emoji表情
+            onShowEmoji(){
+                this.showEmoji = !this.showEmoji
+                this.chatType = 1
+                if(this.showPopups) this.showPopups = false
             }
         }
     }