theluyuan/deming
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

v

Browse Source
This commit is contained in:
zmr900709
2020-07-02 08:39:38 +08:00
parent f377c1823b
commit b7f5711c02
480 changed files with 3971 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

544
pageD/chat/chat.vue Normal file
View File

@@ -0,0 +1,544 @@
<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>