151 lines
4.3 KiB
Plaintext
151 lines
4.3 KiB
Plaintext
<template>
|
|
<view class="chat">
|
|
<!-- chat -->
|
|
<list class="chat-scroll">
|
|
<cell class="cell" :class="{'left': index%2 == 0, 'right': index%2 == 1}" v-for="(item, index) in msgArr" :key="index">
|
|
<image class="active" src="" mode="aspectFill"></image>
|
|
<view class="msg">
|
|
<imAUDIO :guest="index%2 == 1"></imAUDIO>
|
|
<imIMG :guest="index%2 == 1"></imIMG>
|
|
<imTXT :guest="index%2 == 1"></imTXT>
|
|
</view>
|
|
</cell>
|
|
<cell class="cell-footer" ref="chatBottom"></cell>
|
|
</list>
|
|
<!-- footer -->
|
|
<view class="chat-footer">
|
|
<view class="msg-type" @click="msgType">
|
|
<image class="msg-type-icon" src="@/static/icon/key-icon.png" v-if="importTabs === 0" mode="widthFix"></image>
|
|
<image class="msg-type-icon" src="@/static/icon/msg-icon.png" v-if="importTabs === 1" mode="widthFix"></image>
|
|
</view>
|
|
<block v-if="importTabs === 0">
|
|
<view class="chat-mp3" hover-class="chat-hover" @touchstart="startAudio" @touchend="chendAudio">
|
|
<text class="chat-mp3-text">按住说话</text>
|
|
</view>
|
|
</block>
|
|
<block v-if="importTabs === 1">
|
|
<input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send" cursor-spacing="10" />
|
|
</block>
|
|
<text class="chat-push" :disabled="disabled" size="mini" @click="send">发送</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const ChatList = uni.requireNativePlugin('dom')
|
|
import imAUDIO from '@/components/im/imAUDIO'
|
|
import imIMG from '@/components/im/imIMG'
|
|
import imTXT from '@/components/im/imTXT'
|
|
export default {
|
|
data() {
|
|
return {
|
|
toMsg : '',
|
|
msgArr : [
|
|
"NVUE界面信息界面信息界面信息界面信息界面信息界面信息界面信息界面信息界面信息"
|
|
],
|
|
importTabs: 1
|
|
}
|
|
},
|
|
components:{ imAUDIO, imIMG, imTXT },
|
|
methods: {
|
|
send(){
|
|
this.msgArr.push("新消息NVUE")
|
|
// 此处等待数据渲染完成后滚动至底部
|
|
setTimeout(() => {
|
|
let el = this.$refs.chatBottom
|
|
ChatList.scrollToElement(el, {
|
|
animated: true
|
|
})
|
|
},50)
|
|
},
|
|
msgType(){
|
|
this.importTabs = this.importTabs === 1 ? 0 : 1
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 窗口 */
|
|
.chat{
|
|
background: #F3F6FB;
|
|
flex: 1;
|
|
}
|
|
.chat-scroll{
|
|
flex: 1;
|
|
}
|
|
.cell{
|
|
width: 690rpx;
|
|
margin: 0 30rpx;
|
|
padding:10rpx 0;
|
|
justify-content: flex-start;
|
|
}
|
|
.cell-footer{
|
|
height: 20rpx;
|
|
}
|
|
.active{
|
|
width: 78rpx;
|
|
height: 78rpx;
|
|
background-color: white;
|
|
border-radius: 10rpx;
|
|
}
|
|
.msg{
|
|
margin: 0 20rpx;
|
|
}
|
|
.cell.left{
|
|
flex-direction: row;
|
|
}
|
|
.cell.right{
|
|
flex-direction: row-reverse;
|
|
}
|
|
/* footer */
|
|
.chat-footer{
|
|
background: white;
|
|
padding: 20rpx 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
}
|
|
.msg-type{
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
}
|
|
.msg-type > .msg-type-icon{
|
|
margin: 5rpx;
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
.chat-mp3{
|
|
background: #F3F6FB;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 460rpx;
|
|
border-radius: 10rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
.chat-mp3-text{
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
}
|
|
.chat-input{
|
|
background: #F3F6FB;
|
|
height: 70rpx;
|
|
width: 460rpx;
|
|
border-radius: 10rpx;
|
|
margin-right: 15rpx;
|
|
padding: 0 20rpx;
|
|
}
|
|
.chat-push{
|
|
background: #34CE98;
|
|
color: white;
|
|
width: 120rpx;
|
|
line-height: 70rpx;
|
|
text-align: center;
|
|
border-radius: 10rpx;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|