545 lines
15 KiB
Vue
545 lines
15 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="content-box" @touchstart="touchstart" id="content-box" :class="{'content-showfn':showFunBtn}">
|
||
<!-- 背景图- 定位方式 -->
|
||
<image class="content-box-bg" :src="_user_info.chatBgImg" :style="{ height: imgHeight }"></image>
|
||
<view class="content-box-loading" v-if="!loading"><u-loading mode="flower"></u-loading></view>
|
||
<view class="message" v-for="(item, index) in messageList" :key="index" :id="`msg-${item.hasBeenSentId}`">
|
||
<view class="message-item " :class="item.isItMe ? 'right' : 'left'">
|
||
<image class="img" :src="item.fromUserHeadImg" mode="" @tap="linkToBusinessCard(item.fromUserId)"></image>
|
||
<!-- contentType = 1 文本 -->
|
||
<view class="content" v-if="item.contentType == 1">{{ item.content }}</view>
|
||
<!-- contentType = 2 语音 -->
|
||
<view
|
||
class="content contentType2"
|
||
:class="[{ 'content-type-right': item.isItMe }]"
|
||
v-if="item.contentType == 2"
|
||
@tap="handleAudio(item)"
|
||
hover-class="contentType2-hover-class"
|
||
:style="{width:`${130+(item.contentDuration*2)}rpx`}"
|
||
>
|
||
<view
|
||
class="voice_icon"
|
||
:class="[
|
||
{ voice_icon_right: item.isItMe },
|
||
{ voice_icon_left: !item.isItMe },
|
||
{ voice_icon_right_an: item.anmitionPlay && item.isItMe },
|
||
{ voice_icon_left_an: item.anmitionPlay && !item.isItMe }
|
||
]"
|
||
></view>
|
||
<view class="">{{ item.contentDuration }}''</view>
|
||
</view>
|
||
<!-- contentType = 3 图片 -->
|
||
<view
|
||
class="content contentType3"
|
||
v-if="item.contentType == 3"
|
||
@tap="viewImg([item.content])"
|
||
>
|
||
<image :src="item.content" class="img" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部聊天输入框 -->
|
||
<view class="input-box" :class="{ 'input-box-mpInputMargin': mpInputMargin }">
|
||
<view class="input-box-flex">
|
||
<!-- #ifndef H5 -->
|
||
<image v-if="chatType === 'voice'" class="icon_img" :src="require('@/static/pageD/voice.png')" @click="switchChatType('keyboard')"></image>
|
||
<image v-if="chatType === 'keyboard'" class="icon_img" :src="require('@/static/pageD/keyboard.png')" @click="switchChatType('voice')"></image>
|
||
<!-- #endif -->
|
||
<view class="input-box-flex-grow">
|
||
<input
|
||
v-if="chatType === 'voice'"
|
||
type="text"
|
||
class="content"
|
||
id="input"
|
||
v-model="formData.content"
|
||
:hold-keyboard="true"
|
||
:confirm-type="'send'"
|
||
:confirm-hold="true"
|
||
placeholder-style="color:#DDDDDD;"
|
||
:cursor-spacing="10"
|
||
@confirm="sendMsg(null)"
|
||
/>
|
||
<view
|
||
class="voice_title"
|
||
v-if="chatType === 'keyboard'"
|
||
:style="{ background: recording ? '#c7c6c6' : '#FFFFFF' }"
|
||
@touchstart.stop.prevent="startVoice"
|
||
@touchmove.stop.prevent="moveVoice"
|
||
@touchend.stop="endVoice"
|
||
@touchcancel.stop="cancelVoice"
|
||
>
|
||
{{ voiceTitle }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 功能性按钮 -->
|
||
<image class=" icon_btn_add" :src="require('@/static/pageD/add.png')" @tap="switchFun"></image>
|
||
|
||
<!-- #ifdef H5 -->
|
||
<button class="btn" type="primary" size="mini" @touchend.prevent="sendMsg(null)">发送</button>
|
||
<!-- #endif -->
|
||
</view>
|
||
|
||
<view class="fun-box" :class="{'show-fun-box':showFunBtn}">
|
||
<u-grid :col="4" hover-class="contentType2-hover-class" :border="false" @click="clickGrid">
|
||
<u-grid-item v-for="(item, index) in funList" :index="index" :key="index" bg-color="#eaeaea">
|
||
<u-icon :name="item.icon" :size="52"></u-icon>
|
||
<view class="grid-text">{{ item.title }}</view>
|
||
</u-grid-item>
|
||
</u-grid>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<!-- //语音动画 -->
|
||
<view class="voice_an" v-if="recording">
|
||
<view class="voice_an_icon">
|
||
<view id="one" class="wave"></view>
|
||
<view id="two" class="wave"></view>
|
||
<view id="three" class="wave"></view>
|
||
<view id="four" class="wave"></view>
|
||
<view id="five" class="wave"></view>
|
||
<view id="six" class="wave"></view>
|
||
<view id="seven" class="wave"></view>
|
||
</view>
|
||
<view class="text">{{voiceIconText}}</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
fromUserInfo: {},
|
||
formData: {
|
||
content: '',
|
||
limit: 15,
|
||
index: 1
|
||
},
|
||
messageList: [],
|
||
loading: true, //标识是否正在获取数据
|
||
imgHeight: '1000px',
|
||
mpInputMargin: false, //适配微信小程序 底部输入框高度被顶起的问题
|
||
chatType:"voice", // 图标类型 'voice'语音 'keyboard'键盘
|
||
voiceTitle: '按住 说话',
|
||
Recorder: uni.getRecorderManager(),
|
||
Audio: uni.createInnerAudioContext(),
|
||
recording: false, //标识是否正在录音
|
||
isStopVoice: false, //加锁 防止点击过快引起的当录音正在准备(还没有开始录音)的时候,却调用了stop方法但并不能阻止录音的问题
|
||
voiceInterval:null,
|
||
voiceTime:0, //总共录音时长
|
||
canSend:true, //是否可以发送
|
||
PointY:0, //坐标位置
|
||
voiceIconText:"正在录音...",
|
||
showFunBtn:false, //是否展示功能型按钮
|
||
AudioExam:null, //正在播放音频的实例
|
||
funList: [
|
||
{ icon:"photo-fill",title:"照片",uploadType:["album"] },
|
||
{ icon:"camera-fill",title:"拍摄",uploadType:["camera"] },
|
||
],
|
||
};
|
||
},
|
||
methods: {
|
||
//拼接消息 处理滚动
|
||
async joinData() {
|
||
if (!this.loading) {
|
||
//如果没有获取数据 即loading为false时，return 避免用户重复上拉触发加载
|
||
return;
|
||
}
|
||
this.loading = false;
|
||
const data = await this.getMessageData();
|
||
//获取节点信息
|
||
const { index } = this.formData;
|
||
const sel = `#msg-${index > 1 ? this.messageList[0].hasBeenSentId : data[data.length - 1].hasBeenSentId}`;
|
||
this.messageList = [...data, ...this.messageList];
|
||
//填充数据后，视图会自动滚动到最上面一层然后瞬间再跳回bindScroll的指定位置 ---体验不是很好，后期优化
|
||
this.$nextTick(() => {
|
||
this.bindScroll(sel);
|
||
//如果还有数据
|
||
if (this.formData.limit >= data.length) {
|
||
this.formData.index++;
|
||
setTimeout(() => {
|
||
this.loading = true;
|
||
}, 200);
|
||
}
|
||
});
|
||
},
|
||
//处理滚动
|
||
bindScroll(sel, duration = 0) {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query
|
||
.select(sel)
|
||
.boundingClientRect(data => {
|
||
uni.pageScrollTo({
|
||
scrollTop: data && data.top - 40,
|
||
duration
|
||
});
|
||
})
|
||
.exec();
|
||
},
|
||
//获取消息
|
||
getMessageData() {
|
||
let getData = () => {
|
||
let arr = [];
|
||
let startIndex = (this.formData.index - 1) * this.formData.limit;
|
||
let endIndex = startIndex + this.formData.limit;
|
||
for (let i = startIndex; i < endIndex; i++) {
|
||
const isItMe = Math.random() > 0.5 ? true : false;
|
||
arr.unshift({
|
||
hasBeenSentId: i, //已发送过去消息的id
|
||
content: `很高兴认识你，这是第${i + 1}条消息。`,
|
||
fromUserHeadImg: isItMe ? this._user_info.headImg : this.fromUserInfo.fromUserHeadImg, //用户头像
|
||
fromUserId: isItMe ? this._user_info.id : this.fromUserInfo.fromUserId,
|
||
isItMe, //true此条信息是我发送的 false别人发送的
|
||
createTime: Date.now(),
|
||
contentType: 1, // 1文字文本 2语音
|
||
anmitionPlay: false //标识音频是否在播放
|
||
});
|
||
}
|
||
return arr;
|
||
};
|
||
return new Promise((resolve, reject) => {
|
||
const data = getData();
|
||
setTimeout(() => {
|
||
resolve(data);
|
||
}, 500);
|
||
});
|
||
},
|
||
//切换语音或者键盘方式
|
||
switchChatType(type) {
|
||
this.chatType = type;
|
||
this.showFunBtn =false;
|
||
},
|
||
//切换功能性按钮
|
||
switchFun(){
|
||
this.chatType = 'keyboard'
|
||
this.showFunBtn = !this.showFunBtn;
|
||
uni.hideKeyboard()
|
||
},
|
||
//发送消息
|
||
sendMsg(data) {
|
||
const params = {
|
||
hasBeenSentId: Date.now(), //已发送过去消息的id
|
||
content: this.formData.content,
|
||
fromUserHeadImg: this._user_info.headImg, //用户头像
|
||
fromUserId: this._user_info.id,
|
||
isItMe: true, //true此条信息是我发送的 false别人发送的
|
||
createTime: Date.now(),
|
||
contentType: 1
|
||
};
|
||
|
||
if (data) {
|
||
if(data.contentType == 2){
|
||
//说明是发送语音
|
||
params.content = data.content;
|
||
params.contentType = data.contentType;
|
||
params.contentDuration = data.contentDuration;
|
||
params.anmitionPlay = false;
|
||
}else if(data.contentType == 3){
|
||
//发送图片
|
||
params.content = data.content;
|
||
params.contentType = data.contentType;
|
||
}
|
||
} else if (!this.$u.trim(this.formData.content)) {
|
||
//验证输入框书否为空字符传
|
||
return;
|
||
}
|
||
|
||
this.messageList.push(params);
|
||
|
||
this.$nextTick(() => {
|
||
this.formData.content = '';
|
||
// #ifdef MP-WEIXIN
|
||
if(params.contentType == 1){
|
||
uni.pageScrollTo({
|
||
scrollTop: 99999,
|
||
duration: 0, //小程序如果有滚动效果 input的焦点也会随着页面滚动...
|
||
});
|
||
}else{
|
||
setTimeout(()=>{
|
||
uni.pageScrollTo({
|
||
scrollTop: 99999,
|
||
duration: 0, //小程序如果有滚动效果 input的焦点也会随着页面滚动...
|
||
});
|
||
},150)
|
||
}
|
||
// #endif
|
||
|
||
// #ifndef MP-WEIXIN
|
||
uni.pageScrollTo({
|
||
scrollTop: 99999,
|
||
duration: 100
|
||
});
|
||
// #endif
|
||
|
||
if(this.showFunBtn){
|
||
this.showFunBtn = false;
|
||
}
|
||
|
||
// #ifdef MP-WEIXIN
|
||
if (params.contentType == 1) {
|
||
this.mpInputMargin = true;
|
||
}
|
||
// #endif
|
||
//h5浏览器并没有很好的办法控制键盘一直处于唤起状态 而且会有样式性的问题
|
||
// #ifdef H5
|
||
uni.hideKeyboard();
|
||
// #endif
|
||
});
|
||
},
|
||
//用户触摸屏幕的时候隐藏键盘
|
||
touchstart() {
|
||
uni.hideKeyboard();
|
||
},
|
||
// userid 用户id
|
||
linkToBusinessCard(userId) {
|
||
this.$u.route({
|
||
url: 'pages/businessCard/businessCard',
|
||
params: {
|
||
userId
|
||
}
|
||
});
|
||
},
|
||
//准备开始录音
|
||
startVoice(e) {
|
||
if(!this.Audio.paused){
|
||
//如果音频正在播放 先暂停。
|
||
this.stopAudio(this.AudioExam)
|
||
}
|
||
this.recording = true;
|
||
this.isStopVoice = false;
|
||
this.canSend = true;
|
||
this.voiceIconText = "正在录音..."
|
||
this.PointY = e.touches[0].clientY;
|
||
this.Recorder.start({
|
||
format: 'mp3'
|
||
});
|
||
},
|
||
//录音已经开始
|
||
beginVoice(){
|
||
if (this.isStopVoice) {
|
||
this.Recorder.stop();
|
||
return;
|
||
}
|
||
this.voiceTitle = '松开 结束'
|
||
this.voiceInterval = setInterval(()=>{
|
||
this.voiceTime ++;
|
||
},1000)
|
||
},
|
||
//move 正在录音中
|
||
moveVoice(e){
|
||
const PointY = e.touches[0].clientY
|
||
const slideY = this.PointY - PointY;
|
||
if(slideY > uni.upx2px(120)){
|
||
this.canSend = false;
|
||
this.voiceIconText = '松开手指 取消发送 '
|
||
}else if(slideY > uni.upx2px(60)){
|
||
this.canSend = true;
|
||
this.voiceIconText = '手指上滑 取消发送 '
|
||
}else{
|
||
this.voiceIconText = '正在录音... '
|
||
}
|
||
},
|
||
//结束录音
|
||
endVoice() {
|
||
this.isStopVoice = true; //加锁 确保已经结束录音并不会录制
|
||
this.Recorder.stop();
|
||
this.voiceTitle = '按住 说话'
|
||
},
|
||
//录音被打断
|
||
cancelVoice(e){
|
||
this.voiceTime = 0;
|
||
this.voiceTitle = '按住 说话';
|
||
this.canSend = false;
|
||
this.Recorder.stop();
|
||
},
|
||
//处理录音文件
|
||
handleRecorder({ tempFilePath,duration }) {
|
||
let contentDuration;
|
||
// #ifdef MP-WEIXIN
|
||
this.voiceTime = 0;
|
||
if (duration < 600) {
|
||
this.voiceIconText="说话时间过短";
|
||
setTimeout(()=>{
|
||
this.recording = false;
|
||
},200)
|
||
return;
|
||
}
|
||
contentDuration = duration/1000;
|
||
// #endif
|
||
|
||
// #ifdef APP-PLUS
|
||
contentDuration = this.voiceTime +1;
|
||
this.voiceTime = 0;
|
||
if(contentDuration <= 0) {
|
||
this.voiceIconText="说话时间过短";
|
||
setTimeout(()=>{
|
||
this.recording = false;
|
||
},200)
|
||
return;
|
||
};
|
||
// #endif
|
||
|
||
this.recording = false;
|
||
const params = {
|
||
contentType: 2,
|
||
content: tempFilePath,
|
||
contentDuration: Math.ceil(contentDuration)
|
||
};
|
||
this.canSend && this.sendMsg(params);
|
||
},
|
||
//控制播放还是暂停音频文件
|
||
handleAudio(item) {
|
||
this.AudioExam = item;
|
||
this.Audio.paused ? this.playAudio(item) : this.stopAudio(item);
|
||
},
|
||
//播放音频
|
||
playAudio(item) {
|
||
this.Audio.src = item.content;
|
||
this.Audio.hasBeenSentId = item.hasBeenSentId;
|
||
this.Audio.play();
|
||
item.anmitionPlay = true;
|
||
},
|
||
//停止音频
|
||
stopAudio(item) {
|
||
item.anmitionPlay = false;
|
||
this.Audio.src = '';
|
||
this.Audio.stop();
|
||
},
|
||
//关闭动画
|
||
closeAnmition() {
|
||
const hasBeenSentId = this.Audio.hasBeenSentId;
|
||
const item = this.messageList.find(it => it.hasBeenSentId == hasBeenSentId);
|
||
item.anmitionPlay = false;
|
||
},
|
||
//点击宫格时触发
|
||
clickGrid(index){
|
||
if(index == 0){
|
||
this.chooseImage(['album'])
|
||
}else if(index == 1){
|
||
this.chooseImage(['camera'])
|
||
}
|
||
},
|
||
//发送图片
|
||
chooseImage(sourceType){
|
||
uni.chooseImage({
|
||
sourceType,
|
||
sizeType:['compressed'],
|
||
success:res=>{
|
||
this.showFunBtn = false;
|
||
for(let i = 0;i<res.tempFilePaths.length;i++){
|
||
const params = {
|
||
contentType: 3,
|
||
content: res.tempFilePaths[i],
|
||
};
|
||
this.sendMsg(params)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//查看大图
|
||
viewImg(imgList){
|
||
uni.previewImage({
|
||
urls: imgList,
|
||
// #ifndef MP-WEIXIN
|
||
indicator: 'number'
|
||
// #endif
|
||
});
|
||
},
|
||
},
|
||
onPageScroll(e) {
|
||
if (e.scrollTop < 50) {
|
||
this.joinData();
|
||
}
|
||
},
|
||
onNavigationBarButtonTap({ index }) {
|
||
if (index == 0) {
|
||
//用户详情 设置
|
||
} else if (index == 1) {
|
||
//返回按钮
|
||
this.$u.route({
|
||
type: 'switchTab',
|
||
url: 'pages/home/home'
|
||
});
|
||
}
|
||
},
|
||
//返回按钮事件
|
||
onBackPress(e) {
|
||
//以下内容对h5不生效
|
||
//--所以如果用浏览器自带的返回按钮进行返回的时候页面不会重定向 正在寻找合适的解决方案
|
||
this.$u.route({
|
||
type: 'switchTab',
|
||
url: 'pages/home/home'
|
||
});
|
||
return true;
|
||
},
|
||
onLoad(info) {
|
||
// { messageId,fromUserName,fromUserHeadImg } = info
|
||
const userInfo = this.firendList.filter(item => item.userId == info.fromUserId)[0];
|
||
console.log(userInfo)
|
||
this.fromUserInfo = {
|
||
fromUserName: userInfo.userName,
|
||
fromUserHeadImg: userInfo.headImg,
|
||
fromUserId: 4,
|
||
messageId: 2
|
||
};
|
||
|
||
//录音开始事件
|
||
this.Recorder.onStart(e => {
|
||
|
||
this.beginVoice();
|
||
});
|
||
//录音结束事件
|
||
this.Recorder.onStop(res => {
|
||
clearInterval(this.voiceInterval);
|
||
this.handleRecorder(res);
|
||
});
|
||
|
||
//音频停止事件
|
||
this.Audio.onStop(e => {
|
||
this.closeAnmition();
|
||
});
|
||
|
||
//音频播放结束事件
|
||
this.Audio.onEnded(e => {
|
||
this.closeAnmition();
|
||
});
|
||
},
|
||
onReady() {
|
||
//自定义返回按钮 因为原生的返回按钮不可阻止默认事件
|
||
// #ifdef H5
|
||
const icon = document.getElementsByClassName('uni-page-head-btn')[0];
|
||
icon.style.display = 'none';
|
||
// #endif
|
||
|
||
uni.setNavigationBarTitle({
|
||
title: this.fromUserInfo.fromUserName
|
||
});
|
||
this.joinData();
|
||
uni.getSystemInfo({
|
||
success: res => {
|
||
this.imgHeight = res.windowHeight + 'px';
|
||
}
|
||
});
|
||
|
||
uni.onKeyboardHeightChange(res => {
|
||
if (res.height == 0) {
|
||
// #ifdef MP-WEIXIN
|
||
this.mpInputMargin = false;
|
||
// #endif
|
||
}else{
|
||
this.showFunBtn = false;
|
||
}
|
||
});
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import './index.scss'
|
||
</style>
|