135 lines
4.7 KiB
Vue
135 lines
4.7 KiB
Vue
<template>
|
||
<view class="messageBar">
|
||
<!-- footer -->
|
||
<view class="footer">
|
||
<view class="msg-type" @click="changeMessageType">
|
||
<image class="icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix" />
|
||
<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 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-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 sentEmoji from './sent/sentEmoji'
|
||
|
||
export default {
|
||
props: {
|
||
conversationType: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
targetId: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
components: {
|
||
sentText,
|
||
sentVoice,
|
||
sentPopups,
|
||
sentEmoji
|
||
},
|
||
data() {
|
||
return {
|
||
chatType : 1, // 0 语音，1 文本
|
||
showPopups : false,
|
||
showEmoji : false,
|
||
chatText : {
|
||
value : "",
|
||
cursor : 0
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
// 切换聊天类型，语音/文本
|
||
changeMessageType() {
|
||
this.chatType = this.chatType === 1 ? 0 : 1
|
||
if(this.showEmoji) this.showEmoji = false
|
||
if(this.showPopups) this.showPopups = false
|
||
},
|
||
onSuccess() {
|
||
this.$emit('onSuccess')
|
||
},
|
||
// 处理弹出层
|
||
onHidePopus(){
|
||
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
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.messageBar{
|
||
border-radius: ($radius*2) ($radius*2) 0 0;
|
||
background: white;
|
||
.footer {
|
||
padding: 20rpx 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-direction: row;
|
||
.msg-type {
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
|
||
.icon {
|
||
margin: 5rpx;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|