TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

聊天页面处理没有聊天内容展示

Browse Source
This commit is contained in:
张冬雪
2022-03-07 14:29:37 +08:00
parent 81d4b9017d 335a3aa8d6
commit ca40d790b1
26 changed files with 1251 additions and 532 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
pages/im/components/conversation/messagePreview.vue
View File

@@ -7,33 +7,36 @@
<view class="preview" v-if="msg.objectName=='RC:TxtMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>{{ msg.content || '' }}
</view>
<view class="preview" v-if="msg.objectName=='RC:HQVCMsg'">
<view class="preview" v-else-if="msg.objectName=='RC:HQVCMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[语音]
</view>
<view class="preview" v-if="msg.objectName=='RC:ImgMsg'">
<view class="preview" v-else-if="msg.objectName=='RC:ImgMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[图片]
</view>
<view class="preview" v-if="msg.objectName=='RC:GIFMsg'">
<view class="preview" v-else-if="msg.objectName=='RC:GIFMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[表情]
</view>
<view class="preview" v-if="msg.objectName=='RC:FileMsg'">
<view class="preview" v-else-if="msg.objectName=='RC:FileMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[文件]
</view>
<view class="preview" v-if="msg.objectName=='RC:LBSMsg'">
<view class="preview" v-else-if="msg.objectName=='RC:LBSMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[位置]
</view>
<view class="preview" v-if="msg.objectName=='RC:InfoNtf' && JSON.parse(msg.message).mediaType==0">
<view class="preview" v-else-if="msg.objectName=='RC:AudioMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[语音通话]
</view>
<view class="preview" v-if="msg.objectName=='RC:InfoNtf' && JSON.parse(msg.message).mediaType==1">
<view class="preview" v-else-if="msg.objectName=='RC:VideoMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[视频通话]
</view>
<view class="preview" v-if="msg.objectName=='RC:GrpNtf'">
<view class="preview" v-else-if="msg.objectName=='RC:GrpNtf'">
[{{ msg.message }}]
</view>
<view class="preview" v-if="msg.objectName=='RC:RcNtf'">
<view class="preview" v-else-if="msg.objectName=='RC:RcNtf'">
<text v-if="conversationType == 3">{{ user.name }}：</text> 撤回了一条消息
</view>
<view class="preview" v-else>
{{ msg.objectName }}
</view>
</block>
</view>
</template>

164
pages/im/components/sent/sentEmoji.vue
View File

@@ -1,79 +1,87 @@
<template>
<view class="emoji--lay" v-show="show">
<scroll-view class="scroll" :scroll-y="true">
<view class="emoji-flex">
<view class="item" v-for="(item, index) in emojiArr" :key="index" @click="$emit('onEmoji', item)">{{item.emoji}}</view>
</view>
</scroll-view>
<view class="tool">
<!-- <view class="item" @click="$emit('delete')">删除</view> -->
<view class="item sent" @click="$emit('sent')">发送</view>
</view>
</view>
</template>
<script>
import emoji from '@/static/im/emoji'
export default{
props:{
show: {
type: Boolean,
default: () => {
return false
}
}
},
data(){
return {
emojiArr: emoji
}
}
}
</script>
<style lang="scss" scoped>
.emoji--lay{
height: 600rpx;
position: relative;
.scroll{
height: 600rpx;
.emoji-flex{
padding: 15rpx 15rpx 120rpx;
display: flex;
flex-wrap: wrap;
.item{
margin: 10rpx 15rpx;
font-size: 52rpx;
width: calc(12.5% - 30rpx);
box-sizing: border-box;
}
}
}
.tool{
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-image: linear-gradient(to top, #FFF, rgba(255, 255, 255, .0));
display: flex;
justify-content: flex-end;
padding: 20rpx 30rpx 30rpx;
.item{
line-height: 70rpx;
border-radius: 35rpx;
width: 140rpx;
text-align: center;
font-size: 28rpx;
margin-left: 20rpx;
background: white;
border: solid 1rpx #f5f5f5;
box-sizing: border-box;
&.sent{
border-color: #34CE98;
background: #34CE98;
color: white;
}
}
}
}
<template>
<view class="emoji--lay" v-show="show">
<scroll-view class="scroll" :scroll-y="true">
<view class="emoji-flex">
<view class="item" v-for="(item, index) in emojiArr" :key="index" @click="$emit('onEmoji', item)">
{{item.emoji}}
</view>
</view>
</scroll-view>
<view class="tool">
<!-- <view class="item" @click="$emit('delete')">删除</view> -->
<view class="item sent" @click="$emit('sent')">发送</view>
</view>
</view>
</template>
<script>
import emoji from '@/static/im/emoji'
export default {
props: {
show: {
type: Boolean,
default: () => {
return false
}
}
},
data() {
return {
emojiArr: emoji
}
}
}
</script>
<style lang="scss" scoped>
.emoji--lay {
height: 600rpx;
position: relative;
.scroll {
height: 600rpx;
.emoji-flex {
padding: 15rpx 15rpx 120rpx;
display: flex;
flex-wrap: wrap;
.item {
margin: 10rpx 15rpx;
font-size: 52rpx;
width: calc(12.5% - 30rpx);
box-sizing: border-box;
}
}
}
.tool {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-image: linear-gradient(to top, #FFF, rgba(255, 255, 255, .0));
display: flex;
justify-content: flex-end;
padding: 20rpx 30rpx 30rpx;
.item {
line-height: 70rpx;
border-radius: 35rpx;
width: 140rpx;
text-align: center;
font-size: 28rpx;
margin-left: 20rpx;
background: white;
border: solid 1rpx #f5f5f5;
box-sizing: border-box;
&.sent {
border-color: #34CE98;
background: #34CE98;
color: white;
}
}
}
}
</style>

54
pages/im/components/sent/sentPopups.vue
View File

@@ -25,6 +25,8 @@
<text class="text">文件</text>
</view>
<tki-file-manager ref="filemanager" @result="sendFileMessage"></tki-file-manager>
<u-action-sheet :actions="callActions" cancelText="取消" @close="callShow = false" @select="singleCall"
:show="callShow">
</u-action-sheet>
@@ -34,11 +36,15 @@
<script>
import im from '@/utils/im/index.js'
import imBase from '../../mixins/imBase.js'
import tkiFileManager from "@/components/tki-file-manager/tki-file-manager.vue"
export default {
mixins: [
imBase
],
components: {
tkiFileManager
},
data() {
return {
callActions: [{
@@ -68,6 +74,23 @@
}
},
methods: {
sendFileMessage(path) {
if (path) {
im.sentFile(this.conversationType, this.targetId, path).then(res => {
this.success()
}).catch(err => {
uni.showToast({
icon: 'none',
title: '发送文件失败' + err
})
})
} else {
uni.showToast({
icon: 'none',
title: '选择文件失败'
})
}
},
singleCall(e) {
uni.navigateTo({
url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' + e.type +
@@ -81,10 +104,15 @@
count: 9,
sourceType: ['album'],
success: res => {
im.sentImage(this.conversationType, this.targetId, res.tempFilePaths[0],
this.sender, (res) => {
this.success()
})
let funs = []
res.tempFilePaths.map((item, index) => {
funs[index] = im.sentImage(this.conversationType, this
.targetId, item)
})
Promise.all(funs).then(res => {
this.success()
})
}
})
break;
@@ -92,8 +120,8 @@
uni.chooseImage({
sourceType: ['camera'],
success: res => {
im.sentImage(this.conversationType, this.targetId, res.tempFilePaths[0],
this.sender, (res) => {
im.sentImage(this.conversationType, this.targetId, res.tempFilePaths[0])
.then((res) => {
this.success()
})
}
@@ -104,8 +132,13 @@
break;
case 'location':
uni.chooseLocation({
success: (c) => {
console.log(c);
success: (location) => {
const thumbnail = ''
// 通过 location 的经纬度，合成一张图片，再把图片的base64发送出去
im.sentLocation(this.conversationType, this.targetId, location, thumbnail)
.then(() => {
this.success()
})
}
})
break;
@@ -116,10 +149,7 @@
})
break;
case 'file':
uni.showToast({
icon: 'none',
title: '功能正在开发中'
})
this.$refs.filemanager._openFile()
break;
}
},

45
pages/im/components/sent/sentText.vue
View File

@@ -1,17 +1,7 @@
<template>
<view class="sent--text">
<input
class="input"
type="text"
:auto-blur="true"
:focus="focusState"
v-model="inputTxt"
confirm-type="send"
cursor-spacing="10"
@focus="focus"
@blur="blur"
@confirm="sent"
/>
<input class="input" type="text" :auto-blur="true" :focus="focusState" v-model="inputTxt" confirm-type="send"
cursor-spacing="10" @focus="focus" @blur="blur" @confirm="sent" />
</view>
</template>
@@ -55,33 +45,33 @@
focusState: false,
inputTxt: ''
}
},
created(){
uni.$on('emojiValue', res => {
this.inputTxt = res.value
})
},
},
created() {
uni.$on('emojiValue', res => {
this.inputTxt = res.value
})
},
methods: {
sent() {
sent() {
if (!this.disabled) {
im.sentText(this.conversationType, this.targetId, this.inputTxt, this.sender, () => {
im.sentText(this.conversationType, this.targetId, this.inputTxt).then(() => {
RongIMLib.clearTextMessageDraft(this.conversationType, this.targetId)
this.$emit('success')
this.inputTxt = ''
})
})
}
},
focus() {
focus() {
this.$emit('focus')
},
blur(e) {
blur(e) {
uni.hideKeyboard()
this.$emit('blur', e.detail)
}
},
destroyed() {
uni.$off('emojiValue')
},
destroyed() {
uni.$off('emojiValue')
}
}
</script>
@@ -91,6 +81,7 @@
display: flex;
flex-direction: row;
justify-content: space-between;
.input {
background: #F3F6FB;
height: 70rpx;

388
pages/im/components/sent/sentVoice.vue
View File

@@ -1,21 +1,22 @@
<template>
<view class="send--voice">
<view class="voice" hover-class="chat-hover" @touchstart="startRecord" @touchend="stopRecord" @touchmove="touchmove">
<view class="voice" hover-class="chat-hover" @touchstart="startRecord" @touchend="stopRecord"
@touchmove="touchmove">
<text class="button">按住 说话</text>
</view>
<!-- 录音层 -->
<view class="lay" v-if="showRecordTip">
<view class="lay-header">
<view class="modal">
<image class="icon" src="@/static/icon/record-icon.png" mode="widthFix"></image>
<text class="text">录音中 {{recordTime}} s</text>
</view>
</view>
<view class="lay-toast">上滑取消</view>
<view class="lay-footer">
<image class="lay-footer-icon videoFlicker" src="@/static/icon/audio_green.png" mode="widthFix"></image>
<view class="lay-footer-text">松开发送</view>
</view>
</view>
<!-- 录音层 -->
<view class="lay" v-if="showRecordTip">
<view class="lay-header">
<view class="modal">
<image class="icon" src="@/static/icon/record-icon.png" mode="widthFix"></image>
<text class="text">录音中 {{recordTime}} s</text>
</view>
</view>
<view class="lay-toast">上滑取消</view>
<view class="lay-footer">
<image class="lay-footer-icon videoFlicker" src="@/static/icon/audio_green.png" mode="widthFix"></image>
<view class="lay-footer-text">松开发送</view>
</view>
</view>
</view>
</template>
@@ -23,8 +24,8 @@
<script>
import im from '@/utils/im/index.js'
import permision from '@/utils/permission.js'
import imBase from '../../mixins/imBase.js'
import imBase from '../../mixins/imBase.js'
export default {
mixins: [
imBase
@@ -41,15 +42,15 @@
},
data() {
return {
showRecordTip: false,
showRecordTip: false,
recordTime: 60,
interval: 0,
maxRecordTime: 60,
recorderManager: null,
mp3AudioSrc: null,
isMoveCancel: false,
isBetaPlay: false, // 暂时无用
startOffsetTop: 0
recorderManager: null,
mp3AudioSrc: null,
isMoveCancel: false,
isBetaPlay: false, // 暂时无用
startOffsetTop: 0
}
},
computed: {
@@ -57,20 +58,20 @@
return this.$store.getters.sender
}
},
created() {
created() {
this.recorderManager = uni.getRecorderManager()
},
methods: {
methods: {
// 检查安卓录制权限
async getAndroidPermission() {
return await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
},
// 录制语音消息
startRecord(e) {
startRecord(e) {
this.getAndroidPermission().then(code => {
switch (code) {
case 1:
this.startOffsetTop = e.target.offsetTop
case 1:
this.startOffsetTop = e.target.offsetTop
this.showRecordTip = true
this.recorderManager.start()
this.interval = setInterval(() => {
@@ -96,103 +97,103 @@
})
},
// 结束录音
stopRecord(e) {
if (!this.showRecordTip) return
// 延迟500毫秒结束录音
setTimeout(()=> {
this.recorderManager.stop()
clearInterval(this.interval)
// 监听录音结束
this.recorderManager.onStop(res => {
if(this.isMoveCancel) {
this.isMoveCancel = false
return
}
if((this.maxRecordTime - this.recordTime) <= 0){
uni.showToast({
title: '说话时间太短',
icon : 'none',
})
this.showRecordTip = false
return
}
this.mp3AudioSrc = res.tempFilePath
this.showRecordTip = false
this.senVoice()
})
},500)
},
// 发送语音消息
senVoice(){
if(this.mp3AudioSrc === null) {
uni.showToast({
title: '发送失败, 暂无音频信息',
icon : 'none'
})
return
}
im.sentVoice(this.conversationType, this.targetId, this.mp3AudioSrc, (this.maxRecordTime -
this.recordTime), this.sender, () => {
this.recordTime = this.maxRecordTime
this.mp3AudioSrc = null
setTimeout(() => {
this.$emit('success')
this.toastAudiMp3()
}, 500)
})
},
// 移动按钮
touchmove(e){
if(this.startOffsetTop - e.changedTouches[0].pageY > 100){
if(this.showRecordTip){
this.isMoveCancel = true
this.showRecordTip = false
this.recorderManager.stop()
clearInterval(this.interval)
this.recordTime = this.maxRecordTime
this.mp3AudioSrc = null
return
}
}
},
// 试听语音
startPlay() {
let betaAudio = uni.createInnerAudioContext()
betaAudio.src = this.mp3AudioSrc;
// 在播放中
if(this.isBetaPlay){
betaAudio.stop()
betaAudio.onStop(() => {
this.isBetaPlay = false;
betaAudio.destroy()
})
return
}
// 监听音频播放中
betaAudio.play()
betaAudio.onPlay(() => {
this.isBetaPlay = true;
})
// 监听音频结束
betaAudio.onEnded(() => {
this.isBetaPlay = false;
betaAudio.destroy()
})
},
// 播放提示音乐
toastAudiMp3(){
let toastAudio = uni.createInnerAudioContext()
toastAudio.src = require('@/static/im/toast/sentVoice.mp3')
toastAudio.autoplay = true
toastAudio.volume = .1
toastAudio.onEnded(() => {
toastAudio.destroy()
})
stopRecord(e) {
if (!this.showRecordTip) return
// 延迟500毫秒结束录音
setTimeout(() => {
this.recorderManager.stop()
clearInterval(this.interval)
// 监听录音结束
this.recorderManager.onStop(res => {
if (this.isMoveCancel) {
this.isMoveCancel = false
return
}
if ((this.maxRecordTime - this.recordTime) <= 0) {
uni.showToast({
title: '说话时间太短',
icon: 'none',
})
this.showRecordTip = false
return
}
this.mp3AudioSrc = res.tempFilePath
this.showRecordTip = false
this.senVoice()
})
}, 500)
},
// 发送语音消息
senVoice() {
if (this.mp3AudioSrc === null) {
uni.showToast({
title: '发送失败, 暂无音频信息',
icon: 'none'
})
return
}
im.sentVoice(this.conversationType, this.targetId, this.mp3AudioSrc, (this.maxRecordTime -
this.recordTime)).then(() => {
this.recordTime = this.maxRecordTime
this.mp3AudioSrc = null
setTimeout(() => {
this.$emit('success')
this.toastAudiMp3()
}, 500)
})
},
// 移动按钮
touchmove(e) {
if (this.startOffsetTop - e.changedTouches[0].pageY > 100) {
if (this.showRecordTip) {
this.isMoveCancel = true
this.showRecordTip = false
this.recorderManager.stop()
clearInterval(this.interval)
this.recordTime = this.maxRecordTime
this.mp3AudioSrc = null
return
}
}
},
// 试听语音
startPlay() {
let betaAudio = uni.createInnerAudioContext()
betaAudio.src = this.mp3AudioSrc;
// 在播放中
if (this.isBetaPlay) {
betaAudio.stop()
betaAudio.onStop(() => {
this.isBetaPlay = false;
betaAudio.destroy()
})
return
}
// 监听音频播放中
betaAudio.play()
betaAudio.onPlay(() => {
this.isBetaPlay = true;
})
// 监听音频结束
betaAudio.onEnded(() => {
this.isBetaPlay = false;
betaAudio.destroy()
})
},
// 播放提示音乐
toastAudiMp3() {
let toastAudio = uni.createInnerAudioContext()
toastAudio.src = require('@/static/im/toast/sentVoice.mp3')
toastAudio.autoplay = true
toastAudio.volume = .1
toastAudio.onEnded(() => {
toastAudio.destroy()
})
}
}
}
</script>
</script>
<style>
@keyframes playFlicker {
0% {
@@ -225,77 +226,86 @@
width: 400rpx;
border-radius: 10rpx;
margin-right: 15rpx;
padding: 0 20rpx;
font-weight: bold;
padding: 0 20rpx;
font-weight: bold;
.button {
font-size: 30rpx;
color: #333;
}
}
.lay{
position: absolute;
left: 0;
top: 0;
z-index: 9;
background: rgba($color: #000000, $alpha: .5);
height: 100vh;
width: 100vw;
box-sizing: border-box;
.lay-header{
height: calc(100vh - 140px);
display: flex;
justify-content: center;
align-items: center;
.modal {
display: flex;
background: rgba(0, 0, 0, .6);
position: fixed;
height: 200rpx;
width: 300rpx;
border-radius: 10rpx;
z-index: 99;
flex-direction: column;
align-items: center;
justify-content: center;
.icon {
width: 88rpx;
height: 88rpx;
}
.text {
font-size: 28rpx;
color: #FFFFFF;
}
}
}
.lay-toast{
text-align: center;
color: rgba($color: #fff, $alpha: .8);
font-size: 28rpx;
}
.lay-footer{
background-color: white;
height: 100px;
border-radius: 50% 50% 0 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
.lay-footer-icon{
width: 58rpx;
height: 58rpx;
}
.lay-footer-text{
line-height: 40rpx;
color: gray;
font-size: 28rpx;
}
}
}
.lay {
position: absolute;
left: 0;
top: 0;
z-index: 9;
background: rgba($color: #000000, $alpha: .5);
height: 100vh;
width: 100vw;
box-sizing: border-box;
.lay-header {
height: calc(100vh - 140px);
display: flex;
justify-content: center;
align-items: center;
.modal {
display: flex;
background: rgba(0, 0, 0, .6);
position: fixed;
height: 200rpx;
width: 300rpx;
border-radius: 10rpx;
z-index: 99;
flex-direction: column;
align-items: center;
justify-content: center;
.icon {
width: 88rpx;
height: 88rpx;
}
.text {
font-size: 28rpx;
color: #FFFFFF;
}
}
}
.lay-toast {
text-align: center;
color: rgba($color: #fff, $alpha: .8);
font-size: 28rpx;
}
.lay-footer {
background-color: white;
height: 100px;
border-radius: 50% 50% 0 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
.lay-footer-icon {
width: 58rpx;
height: 58rpx;
}
.lay-footer-text {
line-height: 40rpx;
color: gray;
font-size: 28rpx;
}
}
}
}
</style>

17
pages/im/components/show/showCall.vue → pages/im/components/show/showAudio.vue
View File

@@ -2,8 +2,7 @@
<view class="msg--call">
<view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
<view class="im--text" :class="isRemote ? 'left': 'right'">
<uni-icons type="videocam" size="44rpx" v-if="msg.mediaType == 1" />
<uni-icons type="phone" size="40rpx" v-else />
<uni-icons type="phone" size="44rpx" />
{{ label }}
</view>
</view>
@@ -18,7 +17,6 @@
mixins: [
imBase
],
name: 'showText',
props: {
message: {
type: Object,
@@ -31,23 +29,18 @@
default: false
}
},
mounted() {
},
computed: {
msg() {
return JSON.parse(this.message.content.message)
},
label() {
return this.msg.connected ? '通话时长：' + duration : '未接通'
return this.message.content.customFields.status == 1 ? '通话时长：' + duration : '未接通'
},
isRemote() {
return this.message.messageDirection == 2
},
duration() {
if (this.message.duration > 3600) {
return moment.utc(this.message.duration * 1000).format('HH:mm:ss')
if (this.message.content.customFields.duration > 3600) {
return moment.utc(this.message.content.customFields.duration * 1000).format('HH:mm:ss')
} else {
return moment.utc(this.message.duration * 1000).format('mm:ss')
return moment.utc(this.message.content.customFields.duration * 1000).format('mm:ss')
}
}
}

95
pages/im/components/show/showFile.vue Normal file
View File

@@ -0,0 +1,95 @@
<template>
<view class="msg--file">
<message-state :message="message" :isGroup="isGroup" :isRemote="isRemote" />
<view class="">
<view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
<view class="file" :class="isRemote ? 'left': 'right'">
<view class="img">
{{ content.fileType }}
{{ content.name }}
</view>
</view>
</view>
</view>
</template>
<!-- "content": {
"fileType": "jpg",
"remote": "https://rongcloud-spic.ronghub.com/Xl1PRVpHVldeRQAGVgEHAAcBBgYGBgcDAwMGMjA3MA%3D%3D.jpg?e=1661583313&token=livk5rb3__JZjCtEiMxXpQ8QscLxbNLehwhHySnX:t58hs4uvM1RFsBeKLTcDbVW-k5w=",
"size": 347062,
"objectName": "RC:FileMsg",
"name": "Screenshot_2022-02-25-14-44-55-886_io.zhhealth.app.jpg",
"local": "file:///storage/emulated/0/DCIM/Screenshots/Screenshot_2022-02-25-14-44-55-886_io.zhhealth.app.jpg",
"userInfo": {
"userId": "10051",
"name": "Jason.电信",
"extra": "",
"portraitUrl": "http://storage.zh.shangkelian.cn/uploads/2022/02/16/29b13f5301694721ad7acd8b8b67bbd9.jpg"
}
}, -->
<script>
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import messageState from './messageState'
import imBase from '../../mixins/imBase.js'
export default {
mixins: [
imBase
],
props: {
message: {
type: Object,
default: () => {
return {}
}
},
isGroup: {
type: Boolean,
default: false
}
},
components: {
messageState
},
computed: {
isRemote() {
return this.message.messageDirection == 2
},
content() {
return this.message.content
}
}
}
</script>
<style lang="scss" scoped>
.msg--file {
display: flex;
align-items: flex-end;
.name {
font-size: 24rpx;
color: $text-gray-m;
}
.file {
.img {
width: 180rpx;
}
&.left {
.img {
border-radius: 0 10rpx 10rpx 10rpx;
}
}
&.right {
.img {
border-radius: 10rpx 0 10rpx 10rpx;
}
}
}
}
</style>

112
pages/im/components/show/showLocation.vue Normal file
View File

@@ -0,0 +1,112 @@
<template>
<view class="msg--location">
<message-state :message="message" :isGroup="isGroup" :isRemote="isRemote" />
<view class="">
<view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
<view class="location" :class="isRemote ? 'left': 'right'" @click="showLocation">
<view class="location--name">
{{ content.customFields.name }}
</view>
<view class="location--address">
{{ content.customFields.address }}
</view>
<image class="map" :src="require('@/static/imgs/map.jpeg')" mode="aspectFill" />
</view>
</view>
</view>
</template>
<script>
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import messageState from './messageState'
import imBase from '../../mixins/imBase.js'
export default {
mixins: [
imBase
],
name: 'showImage',
props: {
message: {
type: Object,
default: () => {
return {}
}
},
isGroup: {
type: Boolean,
default: false
}
},
components: {
messageState
},
computed: {
isRemote() {
return this.message.messageDirection == 2
},
content() {
return this.message.content
}
},
methods: {
showLocation() {
uni.openLocation({
latitude: Number(this.content.customFields.latitude),
longitude: Number(this.content.customFields.longitude),
fail: (err) => {
uni.showToast({
icon: 'none',
title: '打开地图失败'
})
}
})
}
}
}
</script>
<style scoped lang="scss">
.msg--location {
display: flex;
align-items: flex-end;
.name {
font-size: 24rpx;
color: $text-gray-m;
}
.location {
position: relative;
width: 400rpx;
background: #FFFFFF;
padding: 10rpx;
.location--name {
font-size: 32rpx;
overflow: hidden;
word-break: break-all;
}
.location--address {
padding-bottom: 10rpx;
font-size: 24rpx;
color: $text-gray-m;
}
.map {
width: 400rpx;
height: 200rpx;
}
&.left {
border-radius: 0 10rpx 10rpx 10rpx;
}
&.right {
border-radius: 10rpx 0 10rpx 10rpx;
}
}
}
</style>

36
pages/im/components/show/showNormal.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<view class="">
<show-location v-if="message.content.objectName == 'RC:LBSMsg'" :message="message" :isGroup="isGroup" />
<show-video v-else-if="message.content.objectName == 'RC:VideoMsg'" :message="message" :isGroup="isGroup" />
<show-audio v-else-if="message.content.objectName == 'RC:AudioMsg'" :message="message" :isGroup="isGroup" />
</view>
</template>
<script>
import showLocation from './showLocation'
import showAudio from './showAudio'
import showVideo from './showVideo'
export default {
props: {
message: {
type: Object,
default: () => {
return {}
}
},
isGroup: {
type: Boolean,
default: false
}
},
components: {
showLocation,
showAudio,
showVideo
}
}
</script>
<style>
</style>

84
pages/im/components/show/showVideo.vue Normal file
View File

@@ -0,0 +1,84 @@
<template>
<view class="msg--call">
<view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
<view class="im--text" :class="isRemote ? 'left': 'right'">
<uni-icons type="videocam" size="44rpx" />
{{ label }}
</view>
</view>
</template>
<script>
import utils from '@/utils/index.js'
import moment from 'moment'
import imBase from '../../mixins/imBase.js'
export default {
mixins: [
imBase
],
props: {
message: {
type: Object,
default: () => {
return {}
}
},
isGroup: {
type: Boolean,
default: false
}
},
computed: {
label() {
return this.message.content.customFields.status == 1 ? '通话时长：' + duration : '未接通'
},
isRemote() {
return this.message.messageDirection == 2
},
duration() {
if (this.message.content.customFields.duration > 3600) {
return moment.utc(this.message.content.customFields.duration * 1000).format('HH:mm:ss')
} else {
return moment.utc(this.message.content.customFields.duration * 1000).format('mm:ss')
}
}
}
}
</script>
<style scoped lang="scss">
.msg--call {
.name {
font-size: 26rpx;
color: $text-gray-m;
display: inline-block;
}
.im--text {
max-width: 508rpx;
padding: 20rpx;
line-height: 46rpx;
font-size: 32rpx;
color: $text-color;
display: flex;
flex-direction: row;
align-items: center;
&.left {
border-radius: 0 20rpx 20rpx 20rpx;
background: white;
}
&.right {
border-radius: 20rpx 0 20rpx 20rpx;
background: $main-color;
color: white;
.uni-icons {
color: white !important;
}
}
}
}
</style>

17
pages/im/components/showMessageCell.vue
View File

@@ -7,6 +7,9 @@
</view>
<view class="notify" v-else-if="message.objectName === 'RC:RcNtf'">
{{ contact(message.senderUserId).name }} 撤回了一条消息
</view>
<view class="notify" v-else-if="message.objectName === 'RC:InfoNtf'">
{{ message.sentTime|timeCustomCN }}
</view>
<view v-else :class="['cell-item', message.messageDirection == 1 ? 'right' : 'left']">
<u-avatar class="avatar" @click="toUser(message)" :size="avatarSize" shape="square"
@@ -15,7 +18,9 @@
<show-text v-if="message.objectName === 'RC:TxtMsg'" :message="message" :isGroup="isGroup" />
<show-voice v-else-if="message.objectName === 'RC:HQVCMsg'" :message="message" :isGroup="isGroup" />
<show-image v-else-if="message.objectName === 'RC:ImgMsg'" :message="message" :isGroup="isGroup" />
<show-call v-else-if="message.objectName === 'RC:InfoNtf'" :message="message" :isGroup="isGroup" />
<show-file v-else-if="message.objectName === 'RC:FileMsg'" :message="message" :isGroup="isGroup" />
<show-normal v-else-if="message.objectName === 'RC:IWNormalMsg'" :message="message" :isGroup="isGroup" />
<view v-else class="">
[未处理的消息类型 {{ message.objectName }}]
</view>
@@ -33,7 +38,8 @@
import showVoice from './show/showVoice'
import showImage from './show/showImage'
import showText from './show/showText'
import showCall from './show/showCall'
import showFile from './show/showFile'
import showNormal from './show/showNormal'
import utils from '@/utils/index.js'
import imBase from '../mixins/imBase.js'
@@ -42,11 +48,12 @@
imBase
],
components: {
showCall,
showVoice,
showImage,
showText
},
showText,
showFile,
showNormal
},
props: {
message: {
type: Object,

50
pages/im/group/chat.vue
View File

@@ -1,6 +1,7 @@
<template>
<view class="chat">
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
<sent-message-bar id="msgbar" :conversationType="conversationType" :targetId="targetId"
@onSuccess="getNewMessage()" />
<view class="shade" @click="hidePop" v-show="showPop">
<view class="pop" :style="popStyle" :class="{'show':showPop}">
@@ -11,7 +12,8 @@
</view>
<view class="body">
<view class="scroll">
<view class="place" :style="{ height: placeHeight + 'px' }"></view>
<view class="scroll" id="scroll">
<view class="cell" v-for="(message, index) in messages" :key="index">
<show-message-cell :message="message" isGroup @messageAction="messageAction" />
</view>
@@ -30,13 +32,13 @@
import showMessageCell from '../components/showMessageCell'
import utils from '@/utils/index.js'
import onGroupDismiss from '../mixins/onGroupDismiss.js'
import imBase from '../mixins/imBase.js'
import imBase from '../mixins/imBase.js'
import messageActions from '../mixins/messageActions.js'
export default {
mixins: [
imBase,
onGroupDismiss,
onGroupDismiss,
messageActions
],
components: {
@@ -51,7 +53,9 @@
messages: [],
groupInfo: {
name: ''
}
},
placeHeight: uni.getSystemInfoSync().windowHeight,
bottomHeihgt: 56
}
},
computed: {
@@ -69,6 +73,20 @@
this.initGroupInfo()
},
onLoad(e) {
const query = uni.createSelectorQuery().in(this);
this.$nextTick(function() {
query.select('#msgbar').boundingClientRect(bottom => {
this.bottomHeihgt = bottom.height
}).exec();
})
// 监听键盘高度变化
uni.onKeyboardHeightChange(keyboard => {
query.select('#scroll').boundingClientRect(scroll => {
const placeHeight = this.windowHeight - scroll.height - keyboard.height - this
.bottomHeihgt
this.placeHeight = placeHeight > 0 ? placeHeight : 0
}).exec();
})
this.targetId = e.targetId
// 获取历史消息列表
this.getMessageList()
@@ -99,7 +117,7 @@
})
// 清理聊天记录
uni.$once('cleanGroupMessage', this.getMessageList)
uni.$on('onRecallMessage_' + this.targetId, (message) => {
uni.$on('onRecallMessage_' + this.targetId, (message) => {
this.messages = this.messages.map(item => {
if (message.messageId == item.messageId) {
return message
@@ -138,14 +156,25 @@
this.$refs.messageBar.onHidePopus()
},
getNewMessage() {
if (new Date().getTime() - this.latestMessage.sentTime > 18000000) {
// 在本地插入一条时间的消息
const messageContent = {
objectName: 'RC:InfoNtf',
message: 'DateInfo'
}
RongIMLib.insertOutgoingMessage(this.conversationType, this.targetId, 50, messageContent, 0)
}
im.getMessageList(
this.conversationType,
this.targetId,
this.latestMessage.sentTime,
this.latestMessage.sentTime || 0,
10,
false,
(messages) => {
this.messages.unshift(...messages)
console.log(messages);
//
this.messages.unshift(...messages.reverse())
this.scrollBottom()
})
},
@@ -158,12 +187,9 @@
20,
true,
(messages) => {
console.log('获取消息列表', messages);
const msgs = messages.filter(item => item.receivedStatus == 0)
console.log('未读消息', msgs);
if (msgs.length) {
RongIMLib.sendReadReceiptResponse(3, this.targetId, msgs, (res) => {
console.error('发送群聊已读回执成功', res);
msgs.map(item => {
RongIMLib.setMessageReceivedStatus(item.messageId, 1)
})
@@ -228,7 +254,7 @@
height: 100%;
z-index: 999;
.pop {
.pop {
border-radius: 10rpx;
position: fixed;
z-index: 101;

39
pages/im/index.vue
View File

@@ -20,10 +20,17 @@
</view>
<!-- content -->
<view v-if="$store.state.token !== ''">
<connection-status :connection="connection" />
<conversation-list @refresh="getConversationList()" :conversations="conversations" />
<block v-if="conversations.length>0">
<connection-status :connection="connection" />
<conversation-list @refresh="getConversationList()" :conversations="conversations" />
</block>
<view class="no-lists" v-else>
<u-image class="cover" radius="4" width="500rpx" height="500rpx"
:src="require('@/static/imgs/no-new-news.png')" :lazy-load="true" />
<span> 空空如也~</span>
</view>
</view>
<!-- 未登录 -->
<!-- 未登录 -->
<view v-else class="vertical null-list">
<u-empty icon="http://cdn.uviewui.com/uview/empty/permission.png" textColor="#999" text="登录后开启聊天吧~">
<template>
@@ -55,6 +62,11 @@
connectionStatus
},
onLoad() {
RongIMLib.getCurrentUserId(({
userId
}) => {
console.log('getCurrentUserId', userId);
})
// 监听新的好友申请
uni.$on('onNewContactConversation', () => {
console.log('更新好友申请数量');
@@ -106,8 +118,8 @@
code,
conversations
}) => {
if (code === 0) {
console.log(conversations,',,,,,')
if (code === 0) {
console.log('获取会话列表', conversations);
this.conversations = conversations
}
})
@@ -214,5 +226,22 @@
.u-border-bottom {
border-bottom: solid 1rpx #f9f9f9 !important;
}
.no-lists {
min-height: 80vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: $title-size-m;
color: $text-gray-m;
.cover{
opacity: 0.8!important;
}
span {
padding-top: $padding;
}
}
</style>

3
pages/im/mixins/imBase.js
View File

@@ -12,6 +12,9 @@ export default {
},
sender() {
return this.$store.getters.sender
},
windowHeight() {
return uni.getSystemInfoSync().windowHeight
}
},
methods: {

32
pages/im/private/call.nvue
View File

@@ -75,7 +75,7 @@
// 关闭扬声器
volumeOff: false,
// 通话时长
duration: 0,
duration: 0,
interval: null
}
},
@@ -83,7 +83,7 @@
this.avatarSize = utils.rpx2px(200)
this.targetId = e.targetId
this.mediaType = e.mediaType
this.isCall = Boolean(e.isCall)
this.isCall = Boolean(e.isCall)
// 进入页面开启外呼
if (this.isCall) {
CallLib.startSingleCall(this.targetId, this.mediaType, '');
@@ -131,25 +131,9 @@
}
},
methods: {
afterHangup() {
clearInterval(this.interval)
const targetId = this.targetId
const sentStatus = 30
const messageContent = {
objectName: 'RC:InfoNtf',
userInfo: this.$store.getters.sender,
message: JSON.stringify({
mediaType: this.mediaType,
connected: this.connected,
duration: this.duration
})
}
const sentTime = 0
if (this.isCall) {
IMLib.insertOutgoingMessage(1, targetId, sentStatus, messageContent, sentTime)
} else {
IMLib.insertIncomingMessage(1, targetId, targetId, sentStatus, messageContent, sentTime)
}
afterHangup() {
clearInterval(this.interval)
// duration: this.duration
uni.$emit('onReceiveMessage_' + this.targetId, {
targetId: this.targetId
})
@@ -179,9 +163,9 @@
CallLib.setVideoView(session.targetId, this.$refs.bigVideoView.ref, 0, false)
CallLib.setVideoView(session.mine.userId, this.$refs.smallVideoView.ref, 0, true)
}, 200)
}
this.interval = setInterval(() => {
this.duration++
}
this.interval = setInterval(() => {
this.duration++
}, 1000)
},
// 切换主屏显示人

72
pages/im/private/chat.vue
View File

@@ -1,6 +1,7 @@
<template>
<view class="chat">
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
<sent-message-bar id="msgbar" :conversationType="conversationType" :targetId="targetId"
@onSuccess="getNewMessage()" />
<view class="shade" @click="hidePop" v-show="showPop">
<view class="pop" :style="popStyle" :class="{'show':showPop}">
<view v-for="(item, index) in popButton" :key="index" @click="pickerMenu(item)">
@@ -10,7 +11,8 @@
</view>
<!-- chat -->
<view class="body">
<view class="scroll">
<view class="place" :style="{ height: placeHeight + 'px' }"></view>
<view class="scroll" id="scroll">
<view class="cell" v-for="(message, index) in messages" :key="index">
<show-message-cell :message="message" @messageAction="messageAction" />
</view>
@@ -26,11 +28,11 @@
import showMessageCell from '../components/showMessageCell'
import utils from '@/utils/index.js'
import imBase from '../mixins/imBase.js'
import messageActions from '../mixins/messageActions.js'
import messageActions from '../mixins/messageActions.js'
export default {
mixins: [
imBase,
imBase,
messageActions
],
components: {
@@ -46,7 +48,9 @@
name: '',
userId: '',
portraitUrl: ''
}
},
placeHeight: uni.getSystemInfoSync().windowHeight,
bottomHeihgt: 56
}
},
computed: {
@@ -59,13 +63,27 @@
}
}
}
},
onShow() {
uni.setNavigationBarTitle({
title: this.contact(this.targetId).name
})
},
onLoad(e) {
onShow() {
uni.setNavigationBarTitle({
title: this.contact(this.targetId).name
})
},
onLoad(e) {
const query = uni.createSelectorQuery().in(this);
this.$nextTick(function() {
query.select('#msgbar').boundingClientRect(bottom => {
this.bottomHeihgt = bottom.height
}).exec();
})
// 监听键盘高度变化
uni.onKeyboardHeightChange(keyboard => {
query.select('#scroll').boundingClientRect(scroll => {
const placeHeight = this.windowHeight - scroll.height - keyboard.height - this
.bottomHeihgt
this.placeHeight = placeHeight > 0 ? placeHeight : 0
}).exec();
})
this.targetId = e.targetId
this.userInfo = this.$store.getters.contactInfo(this.targetId)
// 获取消息列表
@@ -106,27 +124,41 @@
})
},
onUnload() {
uni.offKeyboardHeightChange(res => {
console.log('卸载监听键盘高度变化', res);
})
uni.$off('onUserDelete_' + this.targetId)
uni.$off('onReceiveMessage_' + this.targetId)
uni.$off('onRecallMessage_' + this.targetId)
uni.$off('onRecallMessage')
uni.$off('onReadReceiptReceived')
},
onNavigationBarButtonTap() {
uni.navigateTo({
url:'/pages/im/friends/info?targetId='+this.targetId
})
},
onNavigationBarButtonTap() {
uni.navigateTo({
url: '/pages/im/friends/info?targetId=' + this.targetId
})
},
methods: {
getNewMessage() {
if (new Date().getTime() - this.latestMessage.sentTime > 18000000) {
// 在本地插入一条时间的消息
const messageContent = {
objectName: 'RC:InfoNtf',
message: 'DateInfo'
}
RongIMLib.insertOutgoingMessage(this.conversationType, this.targetId, 50, messageContent, 0)
}
im.getMessageList(
this.conversationType,
this.targetId,
this.latestMessage.sentTime || 0,
1,
10,
false,
(messages) => {
this.messages.unshift(...messages)
console.log(messages);
//
this.messages.unshift(...messages.reverse())
this.scrollBottom()
})
},
@@ -160,6 +192,8 @@
</script>
<style scoped lang="scss">
.place {}
/* 窗口 */
.chat {
background: $window-color;