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

merge

Browse Source
This commit is contained in:
唐明明
2022-01-30 18:32:52 +08:00
parent 3082219b58 50cb518620
commit dbfe047ba2
4 changed files with 189 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
apis/interfaces/im.js
View File

@@ -4,7 +4,7 @@
* 碌碌无为枉半生，一朝惊醒万事空。 * 碌碌无为枉半生，一朝惊醒万事空。
* moduleName: 聊聊 * moduleName: 聊聊
*/ */
import store from '@/store'
import { import {
request request
} from '../index' } from '../index'
@@ -94,6 +94,49 @@ const getPendingCount = () => {
}) })
} }
/**
* 上传聊天附件
* 图片
* 语音
* 视频
*/
// 基础配置
const config = {
apiUrl: 'http://api.zh.shangkelian.cn/api/', // 正式环境
timeout: 60000
}
const uploadMessageFile = (file, type) => {
config.header = {
'Accept': 'application/json',
'Authorization': store.getters.getToken || ''
}
return new Promise((resolve, reject) => {
uni.uploadFile({
url: config.apiUrl + 'im/upload',
filePath: file,
name: 'upload',
formData: {
type
},
header: config.header || {},
success: (res) => {
if (res.statusCode === 200) {
let updData = JSON.parse(res.data)
if (updData.status_code === 200) {
resolve(updData.data)
} else {
reject(updData)
}
}
},
fail: (err) => {
console.log('ERR', err);
}
})
})
}
export { export {
getImToken, getImToken,
deleteFriend, deleteFriend,
@@ -105,5 +148,6 @@ export {
rejectFriend, rejectFriend,
searchFriend, searchFriend,
pedingFriend, pedingFriend,
getPendingCount getPendingCount,
uploadMessageFile
} }

95
components/im/imAUDIO.vue
View File

@@ -2,7 +2,7 @@
<view> <view>
<view class="im--audio" :class="guest ? 'right': 'left'" @click="onPlayMsg"> <view class="im--audio" :class="guest ? 'right': 'left'" @click="onPlayMsg">
<image v-if="!guest" class="audio-mp3" src="@/static/icon/audio_green.png" mode="widthFix"></image> <image v-if="!guest" class="audio-mp3" src="@/static/icon/audio_green.png" mode="widthFix"></image>
<text class="audio-text">"{{msg.time}}"</text> <text class="audio-text">"{{msg.duration}}"</text>
<image v-if="guest" class="audio-mp3" src="@/static/icon/audio_white.png" mode="widthFix"></image> <image v-if="guest" class="audio-mp3" src="@/static/icon/audio_white.png" mode="widthFix"></image>
</view> </view>
</view> </view>
@@ -10,14 +10,16 @@
<script> <script>
export default { export default {
name:"im", name: "im",
props:{ props: {
msg : { msg: {
type : Object, type: Object,
default: () => { default: () => {
return { return {
src: "", local: '',
time: "20" remote: '',
objectName: '',
duration: 0
} }
} }
}, },
@@ -26,44 +28,29 @@
default: true default: true
} }
}, },
data(){ methods: {
return {
audioContextPaused: true
}
},
methods:{
// 播放语音消息 // 播放语音消息
onPlayMsg() { onPlayMsg() {
uni.downloadFile({
console.log(this.msg.remote) url: this.msg.remote,
success: (res) => {
uni.downloadFile({ if (res.statusCode === 200) {
url: this.msg.remote, let innerAudioContext = uni.createInnerAudioContext()
success: res=> { innerAudioContext.src = res.tempFilePath
console.log(res) if (this.audioContextPaused) {
} innerAudioContext.play()
}) this.audioContextPaused = false
return
}
let innerAudioContext = uni.createInnerAudioContext() innerAudioContext.stop()
innerAudioContext.src = "" innerAudioContext.onStop(resStop => {
if (this.audioContextPaused) { this.audioContextPaused = true
innerAudioContext.play() })
this.audioContextPaused = false innerAudioContext.onError(err => {
console.log(err);
innerAudioContext.onPlay(res => { })
console.log('开始播放') }
}) }
innerAudioContext.onError(err => {
console.log(err)
})
return
}
innerAudioContext.stop()
innerAudioContext.onStop(resStop => {
this.audioContextPaused = true
}) })
} }
} }
@@ -71,7 +58,7 @@
</script> </script>
<style scoped> <style scoped>
.im--audio{ .im--audio {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@@ -79,27 +66,33 @@
width: 170rpx; width: 170rpx;
padding: 0 20rpx; padding: 0 20rpx;
box-sizing: border-box; box-sizing: border-box;
}, }
.im--audio.left{
,
.im--audio.left {
border-radius: 0 20rpx 20rpx 20rpx; border-radius: 0 20rpx 20rpx 20rpx;
background: white; background: white;
} }
.im--audio.right{ .im--audio.right {
border-radius: 20rpx 0 20rpx 20rpx; border-radius: 20rpx 0 20rpx 20rpx;
background: #34CE98; background: #34CE98;
} }
.audio-mp3{
.audio-mp3 {
width: 38rpx; width: 38rpx;
height: 38rpx; height: 38rpx;
} }
.audio-text{
.audio-text {
font-size: 30rpx; font-size: 30rpx;
} }
.im--audio.left .audio-text{
.im--audio.left .audio-text {
color: #333; color: #333;
} }
.im--audio.right .audio-text{
.im--audio.right .audio-text {
color: white; color: white;
} }
</style> </style>

148
pages/im/private/chat.nvue
View File

@@ -7,11 +7,15 @@
<text class="cell-time-text">{{ item.sentTime|timeCustomCN }}</text> <text class="cell-time-text">{{ item.sentTime|timeCustomCN }}</text>
</view> </view>
<view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'"> <view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
<image class="active" :src="userInfo.portraitUrl" mode="aspectFill" @click="showFriend(targetId, item.messageDirection)"></image> <image class="active" :src="userInfo.portraitUrl" mode="aspectFill"
@click="showFriend(targetId, item.messageDirection)"></image>
<view class="msg"> <view class="msg">
<imAUDIO v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1" :msg="item.content"></imAUDIO> <imAUDIO v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
<imIMG v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1" :msg="item.content.content"></imIMG> :msg="item.content"></imAUDIO>
<imTXT v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1" :msg="item.content.content"></imTXT> <imIMG v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
:msg="item.content.content"></imIMG>
<imTXT v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
:msg="item.content.content"></imTXT>
<view class="state" v-if="item.messageDirection == 1"> <view class="state" v-if="item.messageDirection == 1">
<text class="state-text">{{ item.sentStatus == 50 ? '已读': '未读'}}</text> <text class="state-text">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
</view> </view>
@@ -23,8 +27,10 @@
<!-- footer --> <!-- footer -->
<view class="chat-footer"> <view class="chat-footer">
<view class="msg-type" @click="msgType"> <view class="msg-type" @click="msgType">
<image class="msg-type-icon" src="@/static/icon/key-icon.png" v-if="importTabs === 0" mode="widthFix"></image> <image class="msg-type-icon" src="@/static/icon/key-icon.png" v-if="importTabs === 0" mode="widthFix">
<image class="msg-type-icon" src="@/static/icon/msg-icon.png" v-if="importTabs === 1" mode="widthFix"></image> </image>
<image class="msg-type-icon" src="@/static/icon/msg-icon.png" v-if="importTabs === 1" mode="widthFix">
</image>
</view> </view>
<block v-if="importTabs === 0"> <block v-if="importTabs === 0">
<view class="chat-mp3" hover-class="chat-hover" @touchstart="startAudio" @touchend="chendAudio"> <view class="chat-mp3" hover-class="chat-hover" @touchstart="startAudio" @touchend="chendAudio">
@@ -32,7 +38,8 @@
</view> </view>
</block> </block>
<block v-if="importTabs === 1"> <block v-if="importTabs === 1">
<input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send" cursor-spacing="10" /> <input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send"
cursor-spacing="10" />
</block> </block>
<text class="chat-push" size="mini" @click="send">发送</text> <text class="chat-push" size="mini" @click="send">发送</text>
</view> </view>
@@ -64,7 +71,6 @@
inputTxt: '', inputTxt: '',
messages: [], messages: [],
conversationType: 1, conversationType: 1,
totalCount: 0,
userInfo: { userInfo: {
name: '', name: '',
userId: '', userId: '',
@@ -77,19 +83,14 @@
audioContextPaused: true audioContextPaused: true
} }
}, },
components:{ imAUDIO, imIMG, imTXT }, components: {
imAUDIO,
imIMG,
imTXT
},
onLoad(e) { onLoad(e) {
this.targetId = e.targetId this.targetId = e.targetId
this.conversationType = e.conversationType // 会话类型 this.conversationType = e.conversationType // 会话类型
// 消息总数量
RongIMLib.getMessageCount(this.conversationType, this.targetId, ({
code,
count
}) => {
if (code == 0) {
this.totalCount = count
}
})
this.userInfo = this.$store.getters.userInfo(this.targetId) this.userInfo = this.$store.getters.userInfo(this.targetId)
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: this.$store.getters.userInfo(this.targetId).name title: this.$store.getters.userInfo(this.targetId).name
@@ -110,7 +111,7 @@
} }
}) })
// 简童收到新消息，判断是否是当前会话，更新会话内容 // 监听收到新消息，判断是否是当前会话，更新会话内容
uni.$on('onReceiveMessage', (msg) => { uni.$on('onReceiveMessage', (msg) => {
if (msg.targetId == this.targetId) { if (msg.targetId == this.targetId) {
RongIMLib.clearMessagesUnreadStatus(msg.conversationType, msg.targetId, msg.sentTime) RongIMLib.clearMessagesUnreadStatus(msg.conversationType, msg.targetId, msg.sentTime)
@@ -185,19 +186,19 @@
}, },
// 结束录音 // 结束录音
chendAudio(e) { chendAudio(e) {
if (!this.showAudioTranscribe) return if (!this.showAudioTranscribe) return
recorderManager.stop() recorderManager.stop()
clearInterval(transcribe) clearInterval(transcribe)
// 监听录音结束 // 监听录音结束
recorderManager.onStop(res => { recorderManager.onStop(res => {
if (res.tempFilePath) this.audioSrc = res.tempFilePath if (res.tempFilePath) this.audioSrc = res.tempFilePath
im.sendVoiceMsg(this.conversationType, this.targetId, res.tempFilePath, (60 - this im.sendVoiceMsg(this.conversationType, this.targetId, res.tempFilePath, (60 - this
.transcribeTime), () => { .transcribeTime), () => {
this.getMessageList() this.getMessageList()
}) })
this.transcribeTime = 60 this.transcribeTime = 60
this.showAudioTranscribe = false this.showAudioTranscribe = false
}) })
}, },
getMessageList() { getMessageList() {
// 获取消息列表 // 获取消息列表
@@ -215,7 +216,7 @@
'RC:CombineMsg' 'RC:CombineMsg'
] ]
const timeStamp = new Date().getTime() const timeStamp = new Date().getTime()
const count = 20 // 获取的消息数量 const count = 30 // 获取的消息数量
const isForward = true // 是否向前获取 const isForward = true // 是否向前获取
RongIMLib.getHistoryMessagesByTimestamp(this.conversationType, this.targetId, objectNames, timeStamp, RongIMLib.getHistoryMessagesByTimestamp(this.conversationType, this.targetId, objectNames, timeStamp,
count, count,
@@ -224,11 +225,7 @@
code, code,
messages messages
}) => { }) => {
console.log(messages.reverse())
if (code === 0) { if (code === 0) {
console.log(this.messages)
this.messages = messages.reverse() this.messages = messages.reverse()
this.scrollBottom() this.scrollBottom()
} }
@@ -236,7 +233,7 @@
) )
}, },
send() { send() {
if(this.inputTxt === '') return if (this.inputTxt === '') return
im.sendMsg(this.conversationType, this.targetId, this.inputTxt, () => { im.sendMsg(this.conversationType, this.targetId, this.inputTxt, () => {
this.getMessageList() this.getMessageList()
this.inputTxt = '' this.inputTxt = ''
@@ -244,16 +241,17 @@
}, },
showFriend(targetId, type) { showFriend(targetId, type) {
uni.navigateTo({ uni.navigateTo({
url: type === 1 ? '/pages/im/friends/mine?targetId=' +targetId : '/pages/im/friends/info?targetId=' +targetId url: type === 1 ? '/pages/im/friends/mine?targetId=' + targetId :
'/pages/im/friends/info?targetId=' + targetId
}) })
}, },
scrollBottom() { scrollBottom() {
setTimeout(() => { setTimeout(() => {
let el = this.$refs.chatBottom let el = this.$refs.chatBottom
ChatList.scrollToElement(el, { ChatList.scrollToElement(el, {
animated: true animated: true
}) })
},100) }, 100)
} }
} }
@@ -262,7 +260,7 @@
<style scoped> <style scoped>
.audio-transcribe { .audio-transcribe {
background: rgba(0,0,0,.6); background: rgba(0, 0, 0, .6);
position: fixed; position: fixed;
height: 200rpx; height: 200rpx;
width: 300rpx; width: 300rpx;
@@ -275,7 +273,7 @@
justify-content: center; justify-content: center;
} }
.audio-transcribe-src{ .audio-transcribe-src {
width: 88rpx; width: 88rpx;
height: 88rpx; height: 88rpx;
} }
@@ -286,22 +284,26 @@
} }
/* 窗口 */ /* 窗口 */
.chat{ .chat {
background: #F3F6FB; background: #F3F6FB;
flex: 1; flex: 1;
} }
.chat-scroll{
.chat-scroll {
flex: 1; flex: 1;
} }
.cell{
padding:10rpx 30rpx; .cell {
padding: 10rpx 30rpx;
} }
.cell-time{
.cell-time {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding-bottom: 20rpx; padding-bottom: 20rpx;
} }
.cell-time-text{
.cell-time-text {
background: #fff; background: #fff;
font-size: 24rpx; font-size: 24rpx;
color: #666; color: #666;
@@ -309,57 +311,70 @@
padding: 0 20rpx; padding: 0 20rpx;
border-radius: 10rpx; border-radius: 10rpx;
} }
.cell-item{
.cell-item {
width: 690rpx; width: 690rpx;
justify-content: flex-start; justify-content: flex-start;
} }
.cell-footer{
.cell-footer {
height: 20rpx; height: 20rpx;
} }
.active{
.active {
width: 78rpx; width: 78rpx;
height: 78rpx; height: 78rpx;
background-color: white; background-color: white;
border-radius: 10rpx; border-radius: 10rpx;
} }
.msg{
.msg {
margin: 0 20rpx; margin: 0 20rpx;
} }
.state{
.state {
padding-top: 10rpx; padding-top: 10rpx;
} }
.state-text{
.state-text {
font-size: 24rpx; font-size: 24rpx;
color: #666; color: #666;
} }
.cell-item.left{
.cell-item.left {
flex-direction: row; flex-direction: row;
} }
.cell-item.right{
.cell-item.right {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.cell-item.right .state{
.cell-item.right .state {
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
} }
/* footer */ /* footer */
.chat-footer{ .chat-footer {
background: white; background: white;
padding: 20rpx 30rpx; padding: 20rpx 30rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-direction: row; flex-direction: row;
} }
.msg-type{
.msg-type {
width: 70rpx; width: 70rpx;
height: 70rpx; height: 70rpx;
} }
.msg-type > .msg-type-icon{
.msg-type>.msg-type-icon {
margin: 5rpx; margin: 5rpx;
width: 60rpx; width: 60rpx;
height: 60rpx; height: 60rpx;
} }
.chat-mp3{
.chat-mp3 {
background: #F3F6FB; background: #F3F6FB;
height: 70rpx; height: 70rpx;
line-height: 70rpx; line-height: 70rpx;
@@ -369,11 +384,13 @@
border-radius: 10rpx; border-radius: 10rpx;
margin-right: 15rpx; margin-right: 15rpx;
} }
.chat-mp3-text{
.chat-mp3-text {
font-size: 30rpx; font-size: 30rpx;
color: #333; color: #333;
} }
.chat-input{
.chat-input {
background: #F3F6FB; background: #F3F6FB;
height: 70rpx; height: 70rpx;
width: 460rpx; width: 460rpx;
@@ -381,7 +398,8 @@
margin-right: 15rpx; margin-right: 15rpx;
padding: 0 20rpx; padding: 0 20rpx;
} }
.chat-push{
.chat-push {
background: #34CE98; background: #34CE98;
color: white; color: white;
width: 120rpx; width: 120rpx;

1
utils/im/index.js
View File

@@ -1,3 +1,4 @@
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index' import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index' import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
import store from '@/store/index.js' import store from '@/store/index.js'