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

聊天完成

Browse Source
This commit is contained in:
luyuan
2020-08-07 14:44:11 +08:00
parent c1a3a11781
commit 93c412a515
34 changed files with 1481 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/login/login.vue
View File

@@ -99,7 +99,7 @@ export default {
return
}
// 清除本地存储才可以正常登陆（具体原因没有仔细检查）
uni.clearStorage();
// uni.clearStorage();
// 账号登录1达人0商家
if(this.state==1){
this.$u.api.login({ member_name: this.zhanghaoA, member_password: this.mimaA }).then(res => {

59
pages/messages/messagesList.vue
View File

@@ -7,12 +7,12 @@
</view>
</view>
<!-- 消息列表 -->
<view class="massage_list" v-for="(item,index) in list" :key="index">
<view class="massage_list" v-for="(item,index) in list" :key="index" @click="gochat(item)">
<view class="images">
<image :src="item.url" ></image>
<image :src="item.avatar" ></image>
</view>
<view class="names">{{item.name}}</view>
<view class="content">{{item.content}}</view>
<view class="content u-line-1">{{item.text}}</view>
<view class="times">{{item.time}}</view>
</view>
<u-toast ref="uToast" />
@@ -23,32 +23,41 @@
data() {
return {
keyword: '搜索',
list: [{
name: '瘦瘦',
content: "木糖少女小紫薯西装领连衣裙夏季新款女装装领连衣裙夏季装领连衣裙夏季装领连衣裙夏季夏收腰格子格纹裙子",
url: '../../static/image/tosign/tosigin(5).png',
id : '1',
time : '10：15'
},
{
name: '瘦瘦',
content: "木糖少女小紫薯西装领连衣裙夏季新款女装装领连衣裙夏季装领连衣裙夏季装领连衣裙夏季夏收腰格子格纹裙子",
url: '../../static/image/tosign/tosigin(5).png',
id : '1',
time : '10：15'
},
{
name: '瘦瘦',
content: "木糖少女小紫薯西装领连衣裙夏季新款女装装领连衣裙夏季装领连衣裙夏季装领连衣裙夏季夏收腰格子格纹裙子",
url: '../../static/image/tosign/tosigin(5).png',
id : '1',
time : '10：15'
},
list: [
],
};
},
methods: {
gochat(id){
console.log(id)
this.$u.route({
url:"/pages/messages/privateChat",
params:{
id:JSON.stringify(id)
}
})
},
onFriendListChange(onlineFriends) {
//todo:比较垃圾的处理方式，因为Uniapp的基于MAP的双向绑定在H5端不稳定，H5端偶尔会抽风
// 下边这一行删掉，有时候页面可以更新，有时候不行，大家有优雅的方式，也欢迎跟我们沟通
console.log(onlineFriends,121212)
this.information_dl = onlineFriends;
this.$forceUpdate();
},
},
onShow(){
this.list = this.imService.friends;
this.imService.onFriendListChange=this.onFriendListChange;
},
onLoad(){
const user = uni.getStorageSync('userinfo');
console.log(user)
this.imService.login(user.userId,"","")
this.imService.connectIM()
this.information_dl = this.imService.friends;
}
};
</script>

615
pages/messages/privateChat.vue Normal file
View File

@@ -0,0 +1,615 @@
<template>
<div class="chatInterface">
<div class="chat-scroll-container">
<scroll-view ref="myScroll" scroll-y="true" class="scroll-view" :scroll-into-view="contentPosition">
<div :class="[allHistoryLoaded ? 'top gray' : 'top']" @click="loadMoreHistoryMessage">
<span class="description">{{allHistoryLoaded ? '已经没有更多的历史消息' : '点击加载更多历史消息'}}</span>
</div>
<!--已经收到的消息-->
<div v-for="(message, key) in messages || []"
:id="'message_' + message.timestamp"
:key="message.timestamp"
class = "message-item"
:class="{'self' : message.senderId == (currentUser && currentUser.uuid)}">
<div :class="friend.online ? 'avatar' : 'avatar offline-gray'"
v-if="message.senderId != (currentUser && currentUser.uuid)">
<image :src="friend.avatar" ></image>
</div>
<div class="avatar" v-else>
<image :src="currentUser.avatar"></image>
</div>
<div class="content">
<span class="text-content" v-if="message.type =='text'">{{message.payload.text}}</span>
<image class="image-content" v-if="message.type == 'image'" :src="message.payload.url" :data-url="message.payload.url" @click="showImageFullScreen" mode="widthFix" @load="scrollToBottom"></image>
<div class="video-snapshot" v-if="message.type == 'video'" :data-url="message.payload.video.url" @click="playVideo">
<image :src="message.payload.thumbnail.url" mode="aspectFit" @load="scrollToBottom"></image>
<div class="video-play-icon"></div>
</div>
<GoEasyAudioPlayer v-if="message.type =='audio'" :src="message.payload.url" :duration="message.payload.duration" />
</div>
</div>
<!--发送中的消息-->
<div v-for="(message, index) in pendingMessages || []"
:key="index"
:id="'pendingMessage_' + index"
class = "message-item"
:class="{'self' : message.senderId == (currentUser && currentUser.uuid)}">
<div :class="friend.online ? 'avatar' : 'avatar offline-gray'"
v-if="message.senderId != (currentUser && currentUser.uuid)">
<image :src="friend.avatar"></image>
</div>
<div class="avatar" v-else>
<image :src="currentUser.avatar"></image>
</div>
<div class="content">
<b class="pending"></b>
<span class="text-content" v-if="message.type =='text'">{{message.payload.text}}</span>
<image class="image-content" v-if="message.type == 'image'" :src="message.payload.url" mode="widthFix" @load="scrollToBottom"></image>
<div v-if="message.type == 'video'" class="video-snapshot">
<image :src="message.payload.thumbnail.url" mode="aspectFit" @load="scrollToBottom"></image>
<div class="video-play-icon"></div>
</div>
<GoEasyAudioPlayer v-if="message.type =='audio'" :src="message.payload.url" :duration="message.payload.duration" />
</div>
</div>
</scroll-view>
</div>
<div class="action-box" v-if="!video.visible">
<div class="action-top">
<div :class="[audio.visible ? 'record-icon record-open':'record-icon']" @click="switchAudioKeyboard"></div>
<div class="record-input" @longpress="onRecordStart" @touchend="onRecordEnd" v-if="audio.visible" >{{audio.recording ? '松开发送' : '按住录音'}}</div>
<div class="message-input" v-else>
<input type="text" placeholder="发送消息" v-model="content">
</div>
<div class="file-icon img-video" @click="sendImage"></div>
<div class="file-icon" @click="sendVideo"></div>
<span class="send-message-btn" @click="sendMessage">发送</span>
</div>
</div>
<div class="record-loading" v-if="audio.recording"></div>
<video style="width:100%;height: 100%" :src="video.url" v-if="video.visible" id="videoPlayer" autoplay="true" @fullscreenchange="onVideoFullScreenChange" @play="onVideoPlayStart"></video>
</div>
</template>
<script>
import GoEasyAudioPlayer from "../../components/GoEasyAudioPlayer/GoEasyAudioPlayer";
const recorderManager = uni.getRecorderManager();
export default {
name: "privateChat",
components : {
GoEasyAudioPlayer,
},
data() {
return {
//聊天文本框
content: '',
friend: null,
currentUser: null,
//已经接收到的消息
messages: [],
//正在发送中的消息
pendingMessages : [],
//已经加载完所有历史消息
allHistoryLoaded: false,
contentPosition : '',
audio : {
//语音录音中
recording : false,
//录音按钮展示
visible : false
},
video : {
visible : false,
url : '',
context : null
}
}
},
watch : {
//每当新增了发送中的消息，都滑动到底部
pendingMessages(){
this.scrollToBottom()
}
},
onReady () {
this.video.context = uni.createVideoContext('videoPlayer');
},
onLoad(options) {
if(!this.imService.currentUser){
uni.navigateTo({
url : '../login/login'
});
}
//对话数据
this.friend = JSON.parse(options.id);
this.currentUser = this.imService.currentUser;
let privateMessages = this.imService.getPrivateMessages(this.friend.uuid);
this.messages = privateMessages.sentMessages;
this.pendingMessages = privateMessages.pendingMessages;
uni.setNavigationBarTitle({
title : this.friend.name
});
setTimeout(() => {
uni.setNavigationBarColor({
backgroundColor : '#D02129',
frontColor : '#ffffff'
});
}, 10);
this.initialListeners();
//每次进入聊天页面，总是滚动到底部
this.scrollToBottom()
},
onUnload() {
//退出聊天页面之前，清空页面传入的监听器
this.imService.onNewPrivateMessageReceive = (friendId, message)=> {};
this.imService.onPrivateHistoryLoad = (friendId, messages) =>{};
//将未读消息数清零
this.imService.resetFriendUnReadMessage(this.friend);
},
methods: {
initialListeners () {
//传入监听器，收到一条私聊消息总是滚到到页面底部
this.imService.onNewPrivateMessageReceive = (friendId, message)=> {
if (friendId == this.friend.uuid) {
//收到新消息，是滚动到最底部
this.scrollToBottom()
}
};
//传入监听器，完成一次私聊历史加载时，如果加载结果为空，显示没有更多消息
this.imService.onPrivateHistoryLoad = (friendId, messages) =>{
if (messages.length == 0) {
//灰色，就不能点击了
this.allHistoryLoaded = true
}
};
// 录音监听器
this.initRecorderListeners();
},
initRecorderListeners(){
var self = this;
// 监听录音开始
recorderManager.onStart(function(){
self.audio.recording = true;
});
//录音结束后，发送
recorderManager.onStop(function(res){
self.audio.recording = false;
self.imService.sendPrivateAudioMessage(self.friend.uuid, res)
});
// 监听录音报错
recorderManager.onError(function(res){
console.log("录音报错：",res);
})
},
sendMessage() {//发送消息
if (this.content.trim() != '') {
this.imService.sendPrivateTextMessage(this.friend.uuid, this.content);
let that = this
setTimeout(function(){
that.scrollToBottom();
},500)
}
this.content = "";
},
loadMoreHistoryMessage() {//历史消息
let lastMessageTimeStamp = Date.now();
let lastMessage = this.messages[0];
if (lastMessage) {
lastMessageTimeStamp = lastMessage.timestamp;
}
this.imService.loadPrivateHistoryMessage(this.friend.uuid, lastMessageTimeStamp);
},
onRecordStart () {
try{
recorderManager.start();
}catch(e){
console.log("e:",e);
uni.showModal({
title: '录音错误',
content : '请在app和小程序端体验录音，Uni官方明确H5不支持getRecorderManager, 详情查看Uni官方文档'
});
}
},
onRecordEnd () {
try{
recorderManager.stop();
}catch(e){
console.log("e:",e);
uni.showModal({
title: '录音错误',
content : '请在app和小程序端体验录音，Uni官方明确H5不支持getRecorderManager, 详情查看Uni官方文档'
});
}
},
sendVideo () {//发送文件
uni.chooseVideo({
success : (res) => {
console.log(res)
this.imService.sendPrivateVideoMessage(this.friend.uuid, res)
}
})
},
sendImage() {
uni.chooseImage({
count :1,
success :(res) => {
console.log(res)
this.imService.sendPrivateImageMessage(this.friend.uuid,res);
}
})
},
showImageFullScreen (e) {
var imagesUrl = [e.currentTarget.dataset.url];
uni.previewImage({
urls: imagesUrl
});
},
//语音录制按钮和键盘输入的切换
switchAudioKeyboard() {
this.audio.visible = !this.audio.visible;
},
playVideo (e) {
this.video.visible = true;
this.video.url =e.currentTarget.dataset.url;
},
onVideoPlayStart () {
this.video.context.requestFullScreen({
direction : 0
});
},
onVideoFullScreenChange (e) {
//当退出全屏播放时，隐藏播放器
if(this.video.visible && !e.detail.fullScreen){
this.video.visible = false;
this.video.context.stop();
}
},
scrollToBottom () {
this.$nextTick(() => {
if(this.messages && this.messages.length !=0){
this.contentPosition = 'message_' + (this.messages[this.messages.length-1].timestamp || '');
}
})
}
}
}
</script>
<style >
page {
height: 100%;;
}
uni-page-body, uni-page-refresh {
height: 100%;;
}
.chatInterface{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow-x: hidden;
}
.chatInterface .chat-scroll-container{
overflow: hidden;
padding-left: 20rpx;
padding-right: 20rpx;
height: 100%;
display: flex;
flex: 1;
}
.chatInterface .scroll-view{
flex: 1;
overflow: auto;
box-sizing: border-box;
}
.chatInterface .top{
font-size: 24rpx;
height: 90rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
color: blue;
}
.chatInterface .top .description{
text-decoration: underline;
}
.chatInterface .message-item{
/* max-height: 400rpx; */
margin-top: 40rpx;
overflow: hidden;
}
.chatInterface .avatar{
width: 80rpx;
height: 80rpx;
margin-right:20rpx ;
}
.chatInterface .message-item.self .avatar{
margin-left: 20rpx;
}
.chatInterface .message-item .avatar image{
width: 100%;
height: 100%;
}
.chatInterface .content{
font-size: 34rpx;
line-height: 44rpx;
/* max-height: 400rpx; */
display: flex;
align-items: center;
justify-content: right;
}
.chatInterface .content .image-content{
padding: 16rpx;
border-radius: 12rpx;
width: 300rpx;
height: 300rpx;
}
.chatInterface .content .text-content{
padding: 16rpx;
border-radius: 12rpx;
max-width: 520rpx;
}
.chatInterface .content .pending{
background: url("../../static/images/pending.gif") no-repeat center;
background-size: 30rpx;
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
flex-grow: 0;
flex-shrink: 0;
}
.chatInterface .action-box{
display: flex;
height: 80rpx;
padding-top: 20rpx;
padding-bottom: 20rpx;
backdrop-filter: blur(0.27rpx);
width: 100%;
}
.chatInterface .action-top{
display: flex;
padding-top: 20rpx;
padding-bottom: 20rpx;
backdrop-filter: blur(0.27rem);
height: 80rpx;
width: 100%;
}
.chatInterface .record-icon{
font-size: 32rpx;
width: 80rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background: url("../../static/images/record-appearance-icon.png") no-repeat center;
background-size: 50%;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.chatInterface .action-top .file-icon{
background: url("../../static/images/vedio.png") no-repeat center;
background-size: 70%;
color: #9D9D9D;
position: relative;
width:80rpx;
height: 80rpx;
line-height: 80rpx;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.chatInterface .record-icon.record-open{
background: url("../../static/images/jianpan.png") no-repeat center;
background-size: 70%;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.chatInterface .action-top .img-video{
background: url("../../static/images/file.png") no-repeat center;
background-size: 74%;
}
.chatInterface .record-input{
width: 480rpx;
height: 80rpx;
line-height: 80rpx;
border-radius: 12rpx;
font-size: 28rpx;
background: #cccccc;
color: #ffffff;
text-align: center;
}
.chatInterface .message-input{
border-radius: 12rpx;
}
.chatInterface .message-input input{
width: 440rpx;
height: 80rpx;
line-height: 80rpx;
padding-left: 20rpx;
font-size: 28rpx;
}
.chatInterface .send-message-btn{
font-size: 32rpx;
width: 80rpx;
line-height: 80rpx;
}
.record-loading{
position: absolute;
top:50%;
left: 50%;
width: 300rpx;
height: 300rpx;
margin: -150rpx -150rpx;
background: #262628;
background: url("../../static/images/recording-loading.gif") no-repeat center;
background-size: 100%;
border-radius: 40rpx;
}
.chatInterface .img-layer{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000000;
z-index: 9999;
padding: 6rpx;
display: flex;
justify-content: center;
align-items: center;
}
.chatInterface .img-layer uni-image {
height: 100%!important;
}
.chatInterface .img-layer {
height: 100%!important;
width: 100%!important;
}
.chatInterface .content .file-content .file-info{
height: 0.5rem;
width: 1.5rem;
display: flex;
flex-direction: column;
padding: 0 0.1rem;
}
.chatInterface .content .file-content .file-info .title{
height: 0.3rem;
line-height: 0.3rem;
overflow: hidden;
font-size: 0.16rem;
padding: 0;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
color: #262628;
text-align: left;
}
.chatInterface .content .file-content .file-info .size{
font-size: 0.14rem;
height: 0.2rem;
line-height: 0.2rem;
padding: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
color: #999999;
text-align: left;
}
.chatInterface .video-snapshot{
position: relative;
height: 300rpx;
max-width: 400rpx;
background: #000000;
}
.chatInterface .video-snapshot image{
max-height: 300rpx;
max-width: 400rpx;
}
.chatInterface .video-snapshot video{
max-height: 300rpx;
max-width: 400rpx;
}
.video-snapshot .video-play-icon{
position: absolute;
width: 40rpx;
height: 40rpx;
border-radius: 20rpx;
background:url("../../static/images/play.png") no-repeat center;
background-size: 100%;
top:50%;
left: 50%;
margin:-20rpx;
}
.chatInterface .avatar{
overflow: hidden;
float: left;
}
.chatInterface .avatar img{
width: 100%;
height: 100%;
display: block;
}
.chatInterface .content{
float: left;
overflow: hidden;
}
.chatInterface .content span{
font-family: Source Han Sans CN;
letter-spacing: -0.41px;
color: #262628;
background: #efefef;
display: inline-block;
word-break: break-all;
}
.chatInterface .message-item.self{
margin-right: 0;
}
.chatInterface .message-item.self .avatar{
margin-right: 0;
float: right;
}
.chatInterface .message-item.self .content{
text-align: right;
float: right;
}
.chatInterface .message-item.self .content span{
color: #ffffff;
background:#D02129;
word-break: break-all;
text-align: left;
max-width: 520rpx;
}
.chatInterface .action-box{
background: #FAFAFA;
display: flex;
align-content: center;
align-items: center;
}
.chatInterface .message-input{
background: #efefef;
border: 0;
outline: none;
}
.chatInterface .send-message-btn{
flex-grow: 1;
text-align: center;
color: #95949A;
}
.chatInterface .member-layer{
width:100%;
height: 100%;
background: #FFFFFF;
top: 0;
left: 0;
position: absolute;
}
.member-layer .member{
display: flex;
flex-wrap: wrap;
}
.chatInterface .group-icon{
position: absolute;
}
.chatInterface .gray{
color: gray!important;
text-decoration: none!important;
}
</style>