<template>
<view>
<view class="msgbox" v-for="item in list1">
<!-- 左边 -->
<view class="msgleft">
<view class="msg-imgbox"><image class="msg-img" src="../../static/img/feinene/6.gif" mode=""></image></view>
<view class="msg-text">
<text class="msg-textarea">{{ item.msg1 }}</text>
</view>
</view>
<!-- 右边 -->
<view class="msgright">
<view class="msg-text2">
<text class="msg-textarea2">{{ item.msg1 }}</text>
</view>
<view class="msg-imgbox2"><image class="msg-img2" src="../../static/img/feinene/6.gif" mode=""></image></view>
</view>
</view>
<view style="height: 100rpx;"></view>
<!-- 固定输入文字框 -->
<view class="fixbox">
<view class="fixbox1">
<view class="pic-yy" v-show="isyy" @click="changeyy"><image class="pic-yy-img" src="../../static/yy.png"></image></view>
<view class="pic-yy2" v-show="isjp" @click="changejp"><image class="pic-yy-img" src="../../static/jp.png"></image></view>
<view class="msg">
<textarea @input="changeicon" v-show="istextarea" class="msg-info" v-model="messages"></textarea>
<!-- <textarea v-show="istextarea" @focus="changefocus" class="msg-info" v-model="messages"></textarea> -->
<button v-show="isbutton" class="msg-info2">按住说话</button>
</view>
<view class="pic-jia">
<image @click="changejia" v-show="isjia" class="pic-jia-img" src="../../static/jia.png"></image>
<image @click="changedown" v-show="isdown" class="pic-jia-img" src="../../static/down.png"></image>
<image @click="sendmsg(messages)" v-show="issend" class="pic-jia-img" src="../../static/send.png"></image>
</view>
</view>
<view class="bottom-area" v-show="isbox2">
<view class="flexbox">
<view class="flex1">
<view class="flex1-top"><image class="flex1-img" src="../../static/pz.png" mode=""></image></view>
<view class="flex1-text"><text>拍摄</text></view>
</view>
<view class="flex1">
<view class="flex1-top"><image class="flex1-img" src="../../static/pz.png" mode=""></image></view>
<view class="flex1-text"><text>拍摄</text></view>
</view>
<view class="flex1">
<view class="flex1-top"><image class="flex1-img" src="../../static/pz.png" mode=""></image></view>
<view class="flex1-text"><text>拍摄</text></view>
</view>
<view class="flex1">
<view class="flex1-top"><image class="flex1-img" src="../../static/pz.png" mode=""></image></view>
<view class="flex1-text"><text>拍摄</text></view>
</view>
</view>
<view class="flexbox">
<view class="flex1">
<view class="flex1-top"><image class="flex1-img" src="../../static/pz.png" mode=""></image></view>
<view class="flex1-text"><text>拍摄</text></view>
</view>
<view class="flex1">
<view class="flex1-top"><image class="flex1-img" src="../../static/pz.png" mode=""></image></view>
<view class="flex1-text"><text>拍摄</text></view>
</view>
<view class="flex1">
<view class="flex1-top"><image class="flex1-img" src="../../static/pz.png" mode=""></image></view>
<view class="flex1-text"><text>拍摄</text></view>
</view>
<view class="flex1">
<view class="flex1-top"><image class="flex1-img" src="../../static/pz.png" mode=""></image></view>
<view class="flex1-text"><text>拍摄</text></view>
</view>
</view>
<!-- <view class="flexbox">
<view class="flex1"><image class="flex1-img" src="../../static/pz.png" mode=""></image></view>
<view class="flex1"><image class="flex1-img" src="../../static/pz.png" mode=""></image></view>
<view class="flex1"><image class="flex1-img" src="../../static/pz.png" mode=""></image></view>
<view class="flex1"><image class="flex1-img" src="../../static/pz.png" mode=""></image></view>
</view> -->
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isjia: true,
issend: false,
messages: '',
istextarea: true,
isbutton: false,
isjp: false,
isyy: true,
isbox2: false,
isdown: false,
list1: [
{
msg1: '这是第1条测试数据'
}
],
list2: [
{
msg2: '这是第1条测试数据'
},
{
msg2: '这是第2条测试数据'
}
]
};
},
methods: {
// 点击键盘
changejp() {
this.isjp = !this.isjp;
this.isyy = !this.isyy;
this.isbutton = !this.isbutton;
this.istextarea = !this.istextarea;
},
// 点击语音
changeyy() {
this.isjp = !this.isjp;
this.isyy = !this.isyy;
this.isbutton = !this.isbutton;
this.istextarea = !this.istextarea;
},
// 改变加号 弹出相机
changejia() {
this.isbox2 = true;
this.isdown = true;
this.isjia = false;
},
changedown() {
this.isbox2 = false;
this.isdown = false;
this.isjia = true;
},
// changefocus() {
// this.isjia = !this.isjia;
// this.issend = !this.issend;
// },
// changeblur() {
// this.isjia = !this.isjia;
// this.issend = !this.issend;
// },
// 发送信息
sendmsg(msg) {
console.log(msg);
console.log(this.messages);
let lists = {
msg1: this.messages
};
this.list1.push(lists);
this.messages = '';
this.isjia = true;
this.issend = false;
},
changeicon(data) {
let sum = data.detail.value.length;
if (sum > 0) {
this.isjia = false;
this.issend = true;
} else {
this.isjia = true;
this.issend = false;
}
}
},
onLoad() {
// if(this.messages.value.length>0){
// this.isshow=false
// }
}
};
</script>
<style>
.fixbox {
position: fixed;
width: 100%;
height: auto;
padding: 20rpx 0rpx 20rpx 20rpx;
box-sizing: border-box;
bottom: 0;
/* display: flex; */
/* align-items: center; */
background-color: #c8c7cc;
}
.fixbox1 {
/* position: fixed; */
width: 100%;
height: auto;
/* padding: 20rpx 0rpx 20rpx 20rpx; */
/* box-sizing:border-box; */
/* bottom: 0; */
display: flex;
align-items: center;
/* background-color: #C8C7CC; */
}
.bottom-area {
height: 300rpx;
background-color: #c8c7cc;
}
.pic-yy {
width: 10%;
height: 20%;
float: left;
/* background-color: #007AFF; */
}
.pic-yy2 {
width: 10%;
height: 20%;
float: left;
/* background-color: #007AFF; */
}
.pic-yy-img {
width: 50rpx;
height: 50rpx;
}
.msg {
width: 75%;
float: left;
background-color: #ffffff;
border-radius: 5rpx;
}
.msg-info {
width: 100%; /*自动适应父布局宽度*/
overflow: auto;
word-break: break-all;
height: 50rpx;
}
.msg-info2 {
width: 100%; /*自动适应父布局宽度*/
/* overflow:auto;
word-break:break-all; */
height: 50rpx;
font-size: 20rpx;
line-height: 50rpx;
}
.pic-jia {
width: 10%;
float: left;
margin-left: 5%;
/* background-color: #4CD964; */
}
.pic-jia-img {
width: 40rpx;
height: 40rpx;
}
.flexbox {
width: 100%;
display: flex;
padding: 3% 0rpx;
justify-content: space-between;
box-sizing: border-box;
}
.flex1 {
width: 25%;
height: 25%;
text-align: center;
/* line-height: 20%; */
/* margin-left: 8%; */
/* padding: 6% 0rpx; */
}
.flex1-top {
width: 50%;
height: 50%;
border-radius: 15rpx;
background-color: #ffffff;
line-height: 50%;
padding: 2%;
margin: 0 auto;
}
.flex1-img {
width: 60rpx;
height: 60rpx;
/* line-height: 70rpx; */
}
.flex1-text {
text-align: center;
font-size: 25rpx;
margin-top: 5rpx;
}
.msgbox {
}
.msgleft {
display: flex;
align-items: center;
margin-top: 1%;
}
.msg-imgbox {
width: 10%;
height: 10%;
margin: 0% 3%;
}
.msg-img {
width: 100rpx;
height: 100rpx;
border-radius: 10rpx;
}
.msg-text {
max-width: 80%;
/* width: 80%;
*/ /* margin: 20rpx; */
display: inline-block;
/* width: 480rpx; */
/* margin-left: 30rpx; */
overflow-wrap: break-word;
white-space: normal;
}
.msg-textarea {
padding: 2%;
border-radius: 10rpx;
background-color: #4cd964;
height: auto;
width: 95%;
white-space: wrap;
overflow: hidden;
padding: 10rpx;
/* text-overflow: ellipsis; */
display: -webkit-box;
-webkit-line-clamp: 50; // 控制多行的行数
/* -webkit-box-orient: vertical; */
}
.msgright {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 2%;
box-sizing: border-box;
}
.msg-imgbox2 {
width: 10%;
height: 10%;
margin: 0% 3%;
}
.msg-img2 {
width: 100rpx;
height: 100rpx;
border-radius: 10rpx;
}
.msg-text2 {
/* width: 80%; */
/* min-height: 50%; */
max-width: 80%;
/* margin: 20rpx; */
display: inline-block;
/* width: 480rpx; */
/* margin-left: 30rpx; */
overflow-wrap: break-word;
white-space: normal;
}
.msg-textarea2 {
padding: 2%;
border-radius: 10rpx;
background-color: #4cd964;
height: auto;
width: 95%;
white-space: wrap;
overflow: hidden;
padding: 10rpx;
/* text-overflow: ellipsis; */
display: -webkit-box;
-webkit-line-clamp: 50; // 控制多行的行数
/* -webkit-box-orient: vertical; */
}
</style>
