新增表情包组件
This commit is contained in:
唐明明
79
pages/im/components/sent/sentEmoji.vue
Normal file
79
pages/im/components/sent/sentEmoji.vue
Normal file
@@ -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>
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<view class="chat">
|
||||
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
|
||||
|
||||
<view class="shade" @click="hidePop" v-show="showPop">
|
||||
<view class="pop" :style="popStyle" :class="{'show':showPop}">
|
||||
<view v-for="(item, index) in popButton" :key="index" @click="pickerMenu(item)">
|
||||
@@ -9,7 +8,6 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- chat -->
|
||||
<view class="body">
|
||||
<view class="scroll">
|
||||
|
||||
Reference in New Issue
Block a user