83 lines
2.6 KiB
Vue
83 lines
2.6 KiB
Vue
<template>
|
||
<view class="">
|
||
<!-- 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 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>
|
||
</view>
|
||
<!-- 弹出层 -->
|
||
<sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId" @success="() => {showPopups = false, onSuccess()}" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import sentText from '../components/sentText'
|
||
import sentVoice from '../components/sentVoice'
|
||
import sentPopups from '../components/sentPopups'
|
||
|
||
export default {
|
||
props: {
|
||
conversationType: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
targetId: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
components: {
|
||
sentText,
|
||
sentVoice,
|
||
sentPopups
|
||
},
|
||
data() {
|
||
return {
|
||
chatType: 1, // 0 语音，1 文本
|
||
showPopups: false
|
||
}
|
||
},
|
||
methods: {
|
||
// 切换聊天类型，语音/文本
|
||
changeMessageType() {
|
||
this.chatType = this.chatType === 1 ? 0 : 1
|
||
},
|
||
onSuccess() {
|
||
this.$emit('onSuccess')
|
||
},
|
||
// 处理弹出层
|
||
onHidePopus(){
|
||
if(this.showPopups){
|
||
this.showPopups = false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.footer {
|
||
background: white;
|
||
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>
|