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-27 16:47:25 +08:00
parent a79c694509 35bd9bf283
commit 2561119a17
12 changed files with 485 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
pages/im/friends/group/index.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<div>
<u-button @click="toIndex">会首页</u-button>
</div>
</template>
<script>
export default {
methods: {
toIndex() {
uni.switchTab({
url: '/pages/im/index'
})
}
}
}
</script>
<style>
</style>

5
pages/im/friends/info.vue
View File

@@ -55,7 +55,7 @@
<u-icon class="icon-u" name="camera-fill" color="#fff" size="26"></u-icon>
</view>
<view class="text">视频通话</view>
</view>
</view>
</view>
</block>
<block v-else>
@@ -207,8 +207,7 @@
singleCall(e) {
CallLib.startSingleCall(this.targetId, e.type, '');
uni.redirectTo({
url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' +
e.mediaType,
url: '/pages/im/private/call',
success: (err) => {
console.log('跳转视频通话成功');
},

15
pages/im/group/index.vue
View File

@@ -1,19 +1,10 @@
<template>
<div>
<u-button @click="toIndex">会首页</u-button>
</div>
<view class="">
</view>
</template>
<script>
export default {
methods: {
toIndex() {
uni.switchTab({
url: '/pages/im/index'
})
}
}
}
</script>
<style>

219
pages/im/private/call.nvue Normal file
View File

@@ -0,0 +1,219 @@
<template>
<view class="call-page">
<view class="video">
<RongCloud-Call-RCUniCallView ref="bigVideoView" :style="{width:windowWidth+'px',height:windowHeight+'px'}"
class="bigVideoView">
</RongCloud-Call-RCUniCallView>
<RongCloud-Call-RCUniCallView ref="smallVideoView" class="smallVideoView">
</RongCloud-Call-RCUniCallView>
</view>
<view class="status" v-if="!connected">
<view class="call-user">
<u-avatar :src="userInfo.portraitUrl" size="150" bg-color="#fff"></u-avatar>
<view class="nickname">{{userInfo.name}}</view>
<view v-if="remoteRinging" class="mediaType">等待对方接听</view>
<view v-if="connected" class="mediaType">已接通 {{ connected }}</view>
<view v-else class="mediaType">{{ mediaType == 0 ? '邀请您语音通话' : '邀请您视频通话' }}</view>
</view>
</view>
<view class="buttons">
<view class="btn" v-if="connected" @click="changeMicrophone"><text class="white">麦克风</text></view>
<view class="btn hangup" @click="hangup"><text class="white">挂断</text></view>
<view class="btn" v-if="!connected" @click="accept"><text class="white">接听</text></view>
<view class="btn" v-if="connected" @click="changeSpeaker"><text class="white">扬声器</text></view>
</view>
</view>
</template>
<script>
import {
getFriendInfo
} from '@/apis/interfaces/im.js'
import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
export default {
data() {
return {
targetId: '',
mediaType: 0, // 0 语音 1 视频
users: [],
userInfo: {},
isOut: false,
connected: false,
micStatus: false,
speStatus: false,
remoteRinging: false,
innerAudioContext: null
}
},
onLoad(e) {
this.targetId = e.targetId || 10051
this.mediaType = e.mediaType
getFriendInfo(this.targetId).then(res => {
this.userInfo = res
})
this.startRing()
// 监听通话链接状态
setTimeout(() => {
CallLib.setVideoView(10047, this.$refs.bigVideoView.ref, 0, false)
}, 200)
uni.$on('onCallConnected', () => {
console.log('OnCallConnected');
this.connected = true
this.stopRing()
})
uni.$on('onCallDisconnected', () => {
this.hangup()
})
uni.$on('onRemoteUserRinging', () => {
this.remoteRinging = true
})
uni.$on('onRemoteUserJoined', () => {
this.remoteRinging = false
})
},
beforeDestroy() {
uni.$off('onCallConnected')
uni.$off('onCallDisconnected')
uni.$off('onRemoteUserRinging')
uni.$off('onRemoteUserJoined')
},
computed: {
windowWidth() {
return uni.getSystemInfoSync().windowWidth
},
windowHeight() {
return uni.getSystemInfoSync().windowHeight
}
},
methods: {
changeMicrophone() {
CallLib.enableMicrophone(this.micStatus)
this.micStatus = !this.micStatus
},
changeSpeaker() {
CallLib.enableSpeaker(this.speStatus)
this.speStatus = !this.speStatus
},
accept() {
CallLib.accept()
// 视频通话，才开摄像头
if (this.mediaType == 1) {
const session = CallLib.getCurrentCallSession()
this.users = session.users
setTimeout(() => {
CallLib.setVideoView(session.targetId, this.$refs.bigVideoView.ref, 0,
false)
CallLib.setVideoView(session.mine.userId, this.$refs.smallVideoView.ref, 0,
true)
}, 200)
}
},
hangup() {
CallLib.hangup()
this.stopRing()
setTimeout(() => {
this.downRing()
uni.navigateBack()
// uni.redirectTo({
// url: '/pages/im/private/index?targetId=' + this.targetId + '&conversationType=1'
// })
}, 500);
},
toHome() {
uni.switchTab({
url: '/pages/im/index'
})
},
startRing() {
const innerAudioContext = uni.createInnerAudioContext()
this.innerAudioContext = innerAudioContext
innerAudioContext.autoplay = true
innerAudioContext.loop = true
innerAudioContext.src = '/static/im/sounds/call-ring.mp3'
innerAudioContext.onEnded(() => {
innerAudioContext.destroy()
})
},
stopRing() {
this.innerAudioContext.stop()
},
downRing() {
const innerAudioContext = uni.createInnerAudioContext()
innerAudioContext.autoplay = true
innerAudioContext.src = '/static/im/sounds/call-down.mp3'
innerAudioContext.onEnded(() => {
innerAudioContext.destroy()
})
}
}
}
</script>
<style scoped>
.call-page {
flex: 1;
flex-direction: column;
position: relative;
background: #666;
}
.bigVideoView {
background: #000;
}
.smallVideoView {
position: absolute;
right: 100rpx;
top: 100rpx;
width: 180rpx;
height: 320rpx;
}
.buttons {
position: fixed;
bottom: 100rpx;
width: 750rpx;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.btn {
background: #34CE98;
width: 132rpx;
height: 132rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.btn .white {
color: #FFFFFF;
font-size: 32rpx;
}
.btn.hangup {
background: #dd524d;
}
.call-user {
flex: 1;
position: fixed;
width: 750rpx;
top: 200rpx;
left: 0;
display: flex;
align-items: center;
}
.nickname {
margin: 30rpx;
font-size: 40rpx;
}
</style>

182
pages/im/private/call.vue
View File

@@ -1,182 +0,0 @@
<template>
<view>
<view class="video">
<RongCloud-Call-RCUniCallView style="width: 100%;height: 100%" ref="bigVideoView">
</RongCloud-Call-RCUniCallView>
<view class="call-user">
<u-avatar :src="userInfo.portraitUrl" size="150" bg-color="#fff"></u-avatar>
<view class="nickname">{{userInfo.name}}</view>
<view v-if="remoteRinging" class="mediaType">
等待对方接听
</view>
<view v-if="connected" class="mediaType">
已接通
</view>
<view v-else class="mediaType">
{{ mediaType == 0 ? '邀请您语音通话' : '邀请您视频通话' }}
</view>
</view>
<view class="buttons">
<view class="btn" v-if="connected" @click="changeMicrophone">麦克风</view>
<view class="btn hangup" @click="hangup">挂断</view>
<view class="btn" v-if="!connected" @click="accept">接听</view>
<view class="btn" v-if="connected" @click="changeSpeaker">扬声器</view>
</view>
</view>
</view>
</template>
<script>
import {
getFriendInfo
} from '@/apis/interfaces/im.js'
import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
export default {
data() {
return {
targetId: '',
mediaType: 0, // 0 语音 1 视频
users: [],
userInfo: {},
isOut: false,
connected: false,
micStatus: false,
speStatus: false,
remoteRinging: false
}
},
onLoad(e) {
this.targetId = e.targetId
this.mediaType = e.mediaType
getFriendInfo(this.targetId).then(res => {
this.userInfo = res
})
// 监听通话链接状态
CallLib.onCallConnected((res) => {
this.connected = true
console.log("通话接通时，当前 call 的详细信息", res)
})
// 通过这个，来判断是主叫还是被叫
CallLib.onCallOutgoing((res) => {
this.isOut = true
console.log("主叫端拨出电话后，当前 call 的详细信息", res)
})
// 主叫监听对方振铃
CallLib.onRemoteUserRinging((res) => {
this.remoteRinging = true
console.log("主叫端拨出电话，被叫端收到请求，发出振铃响应时触发，对端Id为=>", res.data.userId)
})
CallLib.onRemoteUserJoined((res) => {
this.remoteRinging = false
console.log("主叫端拨出电话，被叫端收到请求后，加入通话，被叫端Id为=>", res.data.userId);
})
CallLib.onCallDisconnected((res) => {
console.log("挂断成功, 挂断原因=>", res.data.reason)
this.hangup()
})
CallLib.onRemoteUserLeft((res) => {
console.log("远端用户挂断，远端Id为=>", res.data.reason)
this.hangup()
})
},
onUnload() {
CallLib.removeCallOutgoingListener()
CallLib.removeCallConnectedListener()
CallLib.removeRemoteUserJoinedListener()
CallLib.removeCallDisconnectedListener()
CallLib.removeRemoteUserLeftListener()
CallLib.removeRemoteUserRingingListener()
},
methods: {
changeMicrophone() {
CallLib.enableMicrophone(this.micStatus)
this.micStatus = !this.micStatus
},
changeSpeaker() {
CallLib.enableSpeaker(this.speStatus)
this.speStatus = !this.speStatus
},
accept() {
CallLib.accept()
// 视频通话，才开摄像头
if (this.mediaType == 1) {
const currentCallSession = CallLib.getCurrentCallSession()
this.users = currentCallSession.users
setTimeout(() => {
CallLib.setVideoView(currentCallSession.mine.userId, 'bigVideoView', 0, true)
}, 500);
}
},
hangup() {
CallLib.hangup()
setTimeout(() => {
uni.redirectTo({
url: '/pages/im/private/index?targetId=' + this.targetId + '&conversationType=1'
})
}, 200);
},
toHome() {
uni.switchTab({
url: '/pages/im/index'
})
}
}
}
</script>
<style lang="scss" scoped>
.video {
width: 100vw;
height: 100vh;
position: relative;
background: $text-gray;
.call-user {
position: fixed;
text-align: center;
width: 100%;
top: 200rpx;
left: 0;
display: flex;
align-items: center;
flex-direction: column;
.nickname {
margin: $margin;
font-size: 40rpx;
}
.mediaType {
color: $text-gray-m;
}
}
.buttons {
position: fixed;
bottom: 100rpx;
width: 100%;
display: flex;
justify-content: space-around;
.btn {
background: $main-color;
width: 132rpx;
height: 132rpx;
line-height: 132rpx;
border-radius: 50%;
color: white;
text-align: center;
&.hangup {
background: $uni-color-error;
}
}
}
}
</style>

369
pages/im/private/index.vue
View File

@@ -5,21 +5,24 @@
<!-- 聊天窗口 -->
<view class="chat-item" v-for="(item,index) in messages" :key="index">
<view class="chat-item-article" :class="item.messageDirection == 1 ? 'right' : 'left'">
<view class="chat-msg">
<view class="chat-msg">
<!-- 文字消息 -->
<view class="chat-msg-text">{{ item.content.content }}</view>
<view class="chat-msg-text">{{ item.content.content }}</view>
<!-- 语音消息 -->
<view class="chat-msg-audio" @click="onPlayMsg()">
<image v-if="item.messageDirection == 0" src="@/static/icon/audio_ green.png" mode="widthFix"></image>
10"
<image v-if="item.messageDirection == 1" src="@/static/icon/audio_white.png" mode="widthFix"></image>
<view class="chat-msg-audio" @click="onPlayMsg()">
<image v-if="item.messageDirection == 0" src="@/static/icon/audio_ green.png"
mode="widthFix"></image>
10"
<image v-if="item.messageDirection == 1" src="@/static/icon/audio_white.png"
mode="widthFix"></image>
</view>
<!-- 预留一些图片，语音表情包等位置 -->
</view>
<view class="chat-status" :class="{'hide': item.sentStatus == 50}"
v-if="item.messageDirection == 1">{{targetId}}{{ item.sentStatus == 50 ? '已读': '未读'}}</view>
<view class="chat-avatar" @click="showFriend(targetId, item.messageDirection)">
<u-avatar v-if="item.messageDirection == 2" shape="square" bg-color="#ffffff" :src="userInfo.portraitUrl"></u-avatar>
<view class="chat-avatar" @click="showFriend(targetId, item.messageDirection)">
<u-avatar v-if="item.messageDirection == 2" shape="square" bg-color="#ffffff"
:src="userInfo.portraitUrl"></u-avatar>
<u-avatar v-else shape="square" bg-color="#ffffff" :src="$store.getters.sender.portraitUrl" />
</view>
</view>
@@ -29,34 +32,36 @@
</view>
</scroll-view>
<view class="chat-footer">
<view class="msg-type" @click="msgType">
<image src="@/static/icon/key-icon.png" v-if="importTabs === 0" mode="widthFix"></image>
<image src="@/static/icon/msg-icon.png" v-if="importTabs === 1" mode="widthFix"></image>
</view>
<block v-if="importTabs === 0">
<button type="default" class="chat-mp3" hover-class="chat-hover" @touchstart="startAudio" @touchend="chendAudio">按住 说话</button>
</block>
<block v-if="importTabs === 1">
<input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send" cursor-spacing="10" />
</block>
<view class="chat-footer">
<view class="msg-type" @click="msgType">
<image src="@/static/icon/key-icon.png" v-if="importTabs === 0" mode="widthFix"></image>
<image src="@/static/icon/msg-icon.png" v-if="importTabs === 1" mode="widthFix"></image>
</view>
<block v-if="importTabs === 0">
<button type="default" class="chat-mp3" hover-class="chat-hover" @touchstart="startAudio"
@touchend="chendAudio">按住 说话</button>
</block>
<block v-if="importTabs === 1">
<input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send"
cursor-spacing="10" />
</block>
<button class="chat-push" :disabled="disabled" size="mini" @click="send">发送</button>
</view>
<!-- 录音中提示 -->
<view class="audio-transcribe" v-if="showAudioTranscribe">
<image src="@/static/icon/record-icon.png" mode="widthFix"></image>
<view class="text">录音中 {{transcribeTime}} s</view>
</view>
<!-- 录音中提示 -->
<view class="audio-transcribe" v-if="showAudioTranscribe">
<image src="@/static/icon/record-icon.png" mode="widthFix"></image>
<view class="text">录音中 {{transcribeTime}} s</view>
</view>
</view>
</template>
<script>
<script>
import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
import im from '@/utils/im/index.js'
import permision from "@/js_sdk/wa-permission/permission.js"
var transcribe
import im from '@/utils/im/index.js'
import permision from "@/js_sdk/wa-permission/permission.js"
var transcribe
var recorderManager = uni.getRecorderManager()
export default {
@@ -72,11 +77,11 @@
name: '',
userId: '',
portraitUrl: ''
},
importTabs: 0,
showAudioTranscribe:false,
transcribeTime: 60,
audioSrc: '',
},
importTabs: 0,
showAudioTranscribe: false,
transcribeTime: 60,
audioSrc: '',
audioContextPaused: true
}
},
@@ -104,18 +109,19 @@
this.getMessageList()
// 监听消息回执
RongIMLib.addReadReceiptReceivedListener((result) => {
const res = result.data.message
if (res.targetId == this.targetId) {
RongIMLib.addReadReceiptReceivedListener(({
data
}) => {
if (data.targetId == this.targetId) {
this.getMessageList()
}
})
// 监听录音结束
recorderManager.onStop(res => {
if(res.tempFilePath) this.audioSrc = res.tempFilePath
console.log('------------------获取到了录音的临时路径---------------')
console.log(res.tempFilePath)
})
// 监听录音结束
recorderManager.onStop(res => {
if (res.tempFilePath) this.audioSrc = res.tempFilePath
console.log('------------------获取到了录音的临时路径---------------')
console.log(res.tempFilePath)
})
},
onUnload() {
@@ -155,66 +161,66 @@
}
}
},
methods: {
// 播放语音消息
onPlayMsg(){
let innerAudioContext = uni.createInnerAudioContext()
innerAudioContext.src = this.audioSrc
if(this.audioContextPaused){
innerAudioContext.play()
this.audioContextPaused = false
return
}
innerAudioContext.stop()
innerAudioContext.onStop(resStop => {
this.audioContextPaused = true
})
},
// 检查安卓录制权限
async getAndroidPermission(){
return await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
},
// 切换聊天信息
msgType(){
this.importTabs = this.importTabs === 1 ? 0: 1
},
// 录制语音消息
startAudio(e){
this.getAndroidPermission().then(code => {
switch (code){
case 1:
this.showAudioTranscribe = true
recorderManager.start()
transcribe = setInterval(() => {
this.transcribeTime -= 1
if(this.transcribeTime === 0){
this.chendAudio()
}
},1000)
break;
case 0:
uni.showToast({
title: '暂无麦克风权限，请前往应用设置开启麦克风',
icon : 'none'
})
break;
case -1:
uni.showToast({
title: '应用权限错误',
icon : 'none'
})
break;
}
})
},
// 结束录音
chendAudio(e){
if(!this.showAudioTranscribe) return
recorderManager.stop()
clearInterval(transcribe)
this.transcribeTime = 60
this.showAudioTranscribe = false
},
methods: {
// 播放语音消息
onPlayMsg() {
let innerAudioContext = uni.createInnerAudioContext()
innerAudioContext.src = this.audioSrc
if (this.audioContextPaused) {
innerAudioContext.play()
this.audioContextPaused = false
return
}
innerAudioContext.stop()
innerAudioContext.onStop(resStop => {
this.audioContextPaused = true
})
},
// 检查安卓录制权限
async getAndroidPermission() {
return await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
},
// 切换聊天信息
msgType() {
this.importTabs = this.importTabs === 1 ? 0 : 1
},
// 录制语音消息
startAudio(e) {
this.getAndroidPermission().then(code => {
switch (code) {
case 1:
this.showAudioTranscribe = true
recorderManager.start()
transcribe = setInterval(() => {
this.transcribeTime -= 1
if (this.transcribeTime === 0) {
this.chendAudio()
}
}, 1000)
break;
case 0:
uni.showToast({
title: '暂无麦克风权限，请前往应用设置开启麦克风',
icon: 'none'
})
break;
case -1:
uni.showToast({
title: '应用权限错误',
icon: 'none'
})
break;
}
})
},
// 结束录音
chendAudio(e) {
if (!this.showAudioTranscribe) return
recorderManager.stop()
clearInterval(transcribe)
this.transcribeTime = 60
this.showAudioTranscribe = false
},
getMessageList() {
// 获取消息列表
const objectNames = [
@@ -253,10 +259,12 @@
this.inputTxt = ''
})
},
showFriend(targetId, type) {
this.$Router.push({
name: type === 1 ? 'imFriendsMine' : 'imFriendsInfo',
params: {targetId}
showFriend(targetId, type) {
this.$Router.push({
name: type === 1 ? 'imFriendsMine' : 'imFriendsInfo',
params: {
targetId
}
})
},
scrollBottom() {
@@ -285,31 +293,33 @@
<style lang="scss" scoped>
.chat-content {
height: 100vh;
background: $window-color;
.audio-transcribe{
background: rgba($color: #000000, $alpha: .6);
position: fixed;
height: 200rpx;
width: 300rpx;
border-radius: $radius;
color: white;
z-index: 99;
top: 50%;
left: 50%;
margin-top: -200rpx;
margin-left: -150rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
image{
width: 88rpx;
height: 88rpx;
}
.text{
font-size: $title-size-m;
}
background: $window-color;
.audio-transcribe {
background: rgba($color: #000000, $alpha: .6);
position: fixed;
height: 200rpx;
width: 300rpx;
border-radius: $radius;
color: white;
z-index: 99;
top: 50%;
left: 50%;
margin-top: -200rpx;
margin-left: -150rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
image {
width: 88rpx;
height: 88rpx;
}
.text {
font-size: $title-size-m;
}
}
.chat-scrool {
@@ -341,22 +351,25 @@
.chat-msg {
overflow: hidden;
.chat-msg-text {
display: inline-block;
padding: ($padding - 10) $padding;
color: $text-color;
box-sizing: border-box;
font-size: $title-size-lg;
}
.chat-msg-audio{
@extend .chat-msg-text;
width: 50%;
image{
width: 38rpx;
height: 38rpx;
margin: 0;
vertical-align: middle;
}
}
.chat-msg-audio {
@extend .chat-msg-text;
width: 50%;
image {
width: 38rpx;
height: 38rpx;
margin: 0;
vertical-align: middle;
}
}
}
@@ -372,15 +385,16 @@
.chat-avatar {
position: absolute;
top: 0;
background: white;
border-radius: $radius-m;
top: 0;
background: white;
border-radius: $radius-m;
}
&.left {
.chat-avatar {
left: $margin;
}
.chat-msg {
.chat-msg-text {
background-color: white;
@@ -396,6 +410,7 @@
.chat-msg {
text-align: right;
.chat-msg-text {
border-radius: $radius*2 0 $radius*2 $radius*2;
background: $main-color;
@@ -417,18 +432,21 @@
background: white;
box-sizing: border-box;
z-index: 99;
.msg-type{
position: absolute;
top: 20rpx;
left: $padding;
line-height: 80rpx;
image{
width: 64rpx;
height: 64rpx;
vertical-align: middle;
margin-bottom: 10rpx;
}
.msg-type {
position: absolute;
top: 20rpx;
left: $padding;
line-height: 80rpx;
image {
width: 64rpx;
height: 64rpx;
vertical-align: middle;
margin-bottom: 10rpx;
}
}
.chat-input {
background: $window-color;
height: 80rpx;
@@ -436,23 +454,24 @@
font-size: $title-size-m;
padding: 0 $padding;
box-sizing: border-box;
}
.chat-mp3{
background: $window-color;
line-height: 80rpx;
text-align: center;
border-radius: $radius-lg;
font-weight: bold;
color: #333;
font-size: $title-size-m;
&::after{
display: none;
}
}
.chat-hover{
opacity: .5;
}
.chat-mp3 {
background: $window-color;
line-height: 80rpx;
text-align: center;
border-radius: $radius-lg;
font-weight: bold;
color: #333;
font-size: $title-size-m;
&::after {
display: none;
}
}
.chat-hover {
opacity: .5;
}
.chat-push[size='mini'] {