113 lines
3.1 KiB
Plaintext
113 lines
3.1 KiB
Plaintext
<template>
|
|
<view class="chat">
|
|
<!-- chat -->
|
|
<scroll-view class="chat-scroll" scroll-y="true" :scroll-into-view="toMsg" scroll-with-animation>
|
|
<view v-for="(item, index) in msgArr" :key="index" :id="'msg'+index">{{toMsg || '-'}} / msg{{item}} - {{index}}</view>
|
|
</scroll-view>
|
|
<!-- chat-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>
|
|
export default {
|
|
data() {
|
|
return {
|
|
toMsg : '',
|
|
msgArr : [
|
|
"NVUE界面信息"
|
|
],
|
|
importTabs: 1
|
|
}
|
|
},
|
|
|
|
created() {
|
|
|
|
},
|
|
methods: {
|
|
send(){
|
|
this.msgArr.push("新消息NVUE")
|
|
this.toMsg = 'msg' + (this.msgArr.length - 1)
|
|
},
|
|
msgType(){
|
|
this.importTabs = this.importTabs === 1 ? 0 : 1
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 窗口 */
|
|
.chat{
|
|
background: #F3F6FB;
|
|
flex: 1;
|
|
}
|
|
.chat-scroll{
|
|
flex: 1;
|
|
}
|
|
/* footer */
|
|
.chat-footer{
|
|
background: white;
|
|
padding: 20upx 30upx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
|
|
}
|
|
.msg-type{
|
|
width: 70upx;
|
|
height: 70upx;
|
|
}
|
|
.msg-type > .msg-type-icon{
|
|
margin: 5upx;
|
|
width: 60upx;
|
|
height: 60upx;
|
|
}
|
|
.chat-mp3{
|
|
background: #F3F6FB;
|
|
height: 70upx;
|
|
line-height: 70upx;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 460upx;
|
|
border-radius: 10upx;
|
|
margin-right: 15upx;
|
|
}
|
|
.chat-mp3-text{
|
|
font-size: 30upx;
|
|
color: #333;
|
|
}
|
|
.chat-input{
|
|
background: #F3F6FB;
|
|
height: 70upx;
|
|
width: 460upx;
|
|
border-radius: 10upx;
|
|
margin-right: 15upx;
|
|
padding: 0 20upx;
|
|
}
|
|
.chat-push{
|
|
background: #34CE98;
|
|
color: white;
|
|
width: 120upx;
|
|
line-height: 70upx;
|
|
text-align: center;
|
|
border-radius: 10upx;
|
|
font-size: 30upx;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|