同步数据
This commit is contained in:
@@ -21,7 +21,8 @@
|
||||
"OAuth" : {},
|
||||
"Payment" : {},
|
||||
"Share" : {},
|
||||
"SQLite" : {}
|
||||
"SQLite" : {},
|
||||
"VideoPlayer" : {}
|
||||
},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
|
||||
@@ -393,6 +393,13 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/im/private/call",
|
||||
"name": "imPrivateCall",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/im/private/setting",
|
||||
"name": "imPrivateSetting",
|
||||
|
||||
20
pages/im/friends/group/index.vue
Normal file
20
pages/im/friends/group/index.vue
Normal 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>
|
||||
@@ -2,7 +2,7 @@
|
||||
<view class="content">
|
||||
<!-- 用户信息 -->
|
||||
<view class="info-flex">
|
||||
<u-avatar :src="userInfo.portraitUrl" shape="square" size="50" bg-color="#fff" />
|
||||
<u-avatar :src="userInfo.portraitUrl" shape="square" size="50" bg-color="#fff"></u-avatar>
|
||||
<view class="info-text">
|
||||
<view class="nickname">{{userInfo.name}}</view>
|
||||
<view class="address" @longpress="copyAddress">地址:{{userInfo.address}}</view>
|
||||
@@ -20,15 +20,15 @@
|
||||
|
||||
<block v-if="userInfo.is_friend">
|
||||
<view class="info-btns">
|
||||
<view class="item" @click="setRemark">
|
||||
<view class="item u-border-bottom" @click="setRemark">
|
||||
<label>设置备注</label>
|
||||
<u-icon name="arrow-right" color="#999" size="16" />
|
||||
<u-icon name="arrow-right" color="#999" size="16"></u-icon>
|
||||
</view>
|
||||
<view class="item" @click="setRemark">
|
||||
<view class="item u-border-bottom" @click="setRemark">
|
||||
<label>设置标签</label>
|
||||
<u-icon name="arrow-right" color="#999" size="16" />
|
||||
<u-icon name="arrow-right" color="#999" size="16"></u-icon>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="item u-border-bottom">
|
||||
<label>聊天免打扰</label>
|
||||
<u-switch size="22" v-model="status" activeColor="#34CE98" @change="setStatus"></u-switch>
|
||||
</view>
|
||||
@@ -39,15 +39,21 @@
|
||||
</view>
|
||||
<view class="footer">
|
||||
<view class="footer-item" @click="deleteFriend">
|
||||
<view class="icon"><u-icon class="icon-u" name="close-circle-fill" color="#fff" size="26" /></view>
|
||||
<view class="icon">
|
||||
<u-icon class="icon-u" name="close-circle-fill" color="#fff" size="26"></u-icon>
|
||||
</view>
|
||||
<view class="text">删除好友</view>
|
||||
</view>
|
||||
<view class="footer-item" @click="toPrivate">
|
||||
<view class="icon"><u-icon class="icon-u" name="chat-fill" color="#fff" size="26" /></view>
|
||||
<view class="icon">
|
||||
<u-icon class="icon-u" name="chat-fill" color="#fff" size="26"></u-icon>
|
||||
</view>
|
||||
<view class="text">发送消息</view>
|
||||
</view>
|
||||
<view class="footer-item" @click="toPrivate">
|
||||
<view class="icon"><u-icon class="icon-u" name="camera-fill" color="#fff" size="26" /></view>
|
||||
<view class="footer-item" @click="callShow = true">
|
||||
<view class="icon">
|
||||
<u-icon class="icon-u" name="camera-fill" color="#fff" size="26"></u-icon>
|
||||
</view>
|
||||
<view class="text">视频通话</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -55,17 +61,27 @@
|
||||
<block v-else>
|
||||
<view class="footer">
|
||||
<view class="footer-item" @click="toBeFriend">
|
||||
<view class="icon"><u-icon class="icon-u" name="plus-people-fill" color="#fff" size="26" /></view>
|
||||
<view class="icon">
|
||||
<u-icon class="icon-u" name="plus-people-fill" color="#fff" size="26"></u-icon>
|
||||
</view>
|
||||
<view class="text">申请好友</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<u-action-sheet :actions="callActions" cancelText="取消" @close="callShow = false" @select="singleCall"
|
||||
:show="callShow">
|
||||
</u-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getFriendInfo, pedingFriend, deleteFriend } from '@/apis/interfaces/im.js';
|
||||
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index';
|
||||
import {
|
||||
getFriendInfo,
|
||||
pedingFriend,
|
||||
deleteFriend
|
||||
} from '@/apis/interfaces/im.js'
|
||||
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
|
||||
import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -75,35 +91,38 @@ export default {
|
||||
status: false, // 0 是免打扰,1是正常通知
|
||||
isTop: false,
|
||||
block: false,
|
||||
conversationType: 1
|
||||
};
|
||||
conversationType: 1,
|
||||
callActions: [{
|
||||
type: 0,
|
||||
name: '语音通话'
|
||||
},
|
||||
{
|
||||
type: 1,
|
||||
name: '视频通话'
|
||||
}
|
||||
],
|
||||
callShow: false
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.targetId = e.targetId;
|
||||
this.targetId = e.targetId
|
||||
getFriendInfo(e.targetId).then(res => {
|
||||
this.userInfo = res;
|
||||
this.userInfo = res
|
||||
uni.setNavigationBarTitle({
|
||||
title: res.name
|
||||
});
|
||||
});
|
||||
RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({ status }) => {
|
||||
this.status = !Boolean(status);
|
||||
});
|
||||
RongIMLib.getConversation(this.conversationType, this.targetId, ({ code, conversation }) => {
|
||||
})
|
||||
})
|
||||
RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({
|
||||
status
|
||||
}) => {
|
||||
this.status = !Boolean(status)
|
||||
})
|
||||
RongIMLib.getConversation(this.conversationType, this.targetId, ({
|
||||
code,
|
||||
conversation
|
||||
}) => {
|
||||
if (code == 0) {
|
||||
this.isTop = conversation.isTop;
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
copyAddress() {
|
||||
uni.setClipboardData({
|
||||
data: this.userInfo.address,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '复制区块链成功'
|
||||
});
|
||||
this.isTop = conversation.isTop
|
||||
}
|
||||
});
|
||||
},
|
||||
@@ -139,38 +158,88 @@ export default {
|
||||
});
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
toPrivate() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
|
||||
})
|
||||
},
|
||||
setRemark() {
|
||||
uni.showToast({
|
||||
title: '开发中',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
deleteFriend() {
|
||||
uni.showModal({
|
||||
title: '删除确认',
|
||||
content: '确认删除后不可恢复',
|
||||
success: (e) => {
|
||||
if (e.confirm) {
|
||||
deleteFriend(this.targetId).then(res => {
|
||||
// 删除聊天记录
|
||||
RongIMLib.deleteMessages(1, this.targetId)
|
||||
RongIMLib.removeConversation(1, this.targetId)
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '好友删除成功',
|
||||
success() {
|
||||
uni.switchTab({
|
||||
url: '/pages/im/index'
|
||||
})
|
||||
}
|
||||
});
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
setStatus() {
|
||||
RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status, ({ status }) => {
|
||||
this.status = !Boolean(status);
|
||||
});
|
||||
RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status, ({
|
||||
status
|
||||
}) => {
|
||||
this.status = !Boolean(status)
|
||||
})
|
||||
},
|
||||
setTop() {
|
||||
RongIMLib.setConversationToTop(this.conversationType, this.targetId, this.isTop, res => {
|
||||
RongIMLib.getConversation(this.conversationType, this.targetId, ({ conversation }) => {
|
||||
this.isTop = conversation.isTop;
|
||||
});
|
||||
});
|
||||
RongIMLib.setConversationToTop(this.conversationType, this.targetId, this.isTop, (res) => {
|
||||
RongIMLib.getConversation(this.conversationType, this.targetId, ({
|
||||
conversation
|
||||
}) => {
|
||||
this.isTop = conversation.isTop
|
||||
})
|
||||
})
|
||||
},
|
||||
setBlock() {},
|
||||
// 申请好友
|
||||
toBeFriend() {
|
||||
pedingFriend(this.targetId)
|
||||
.then(res => {
|
||||
pedingFriend(this.targetId).then(res => {
|
||||
uni.showToast({
|
||||
title: '申请成功',
|
||||
icon: 'none'
|
||||
});
|
||||
|
||||
})
|
||||
.catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
title: err.message,
|
||||
duration: 2000
|
||||
});
|
||||
});
|
||||
})
|
||||
})
|
||||
},
|
||||
singleCall(e) {
|
||||
CallLib.startSingleCall(this.targetId, e.type, '');
|
||||
uni.redirectTo({
|
||||
url: '/pages/im/private/call',
|
||||
success: (err) => {
|
||||
console.log('跳转视频通话成功');
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('跳转视频页失败', err);
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -191,16 +260,19 @@ export default {
|
||||
display: flex;
|
||||
background: white;
|
||||
border-radius: $radius;
|
||||
|
||||
.info-text {
|
||||
width: calc(100% - 50px);
|
||||
padding-left: $padding;
|
||||
box-sizing: border-box;
|
||||
|
||||
.nickname {
|
||||
line-height: 30px;
|
||||
font-size: $title-size + 6;
|
||||
color: $text-color;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.address {
|
||||
line-height: 20px;
|
||||
font-size: $title-size-sm;
|
||||
@@ -220,9 +292,11 @@ export default {
|
||||
padding: $padding*2 $padding;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.footer-item {
|
||||
margin: 0 $margin/2;
|
||||
text-align: center;
|
||||
|
||||
.icon {
|
||||
background: $main-color;
|
||||
width: 88rpx;
|
||||
@@ -230,11 +304,13 @@ export default {
|
||||
line-height: 88rpx;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
|
||||
.icon-u {
|
||||
margin-top: calc((88rpx/2) - 13px);
|
||||
margin-left: calc((88rpx/2) - 13px);
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
color: $main-color;
|
||||
font-size: $title-size-m;
|
||||
@@ -250,20 +326,19 @@ export default {
|
||||
background: white;
|
||||
margin: $margin;
|
||||
border-radius: $radius;
|
||||
|
||||
.item {
|
||||
line-height: 100rpx;
|
||||
border-bottom: solid 1rpx $border-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 $padding;
|
||||
justify-content: space-between;
|
||||
font-size: $title-size-lg;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: calc(100% - 200rpx);
|
||||
color: $text-gray-m;
|
||||
|
||||
@@ -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
219
pages/im/private/call.nvue
Normal 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>
|
||||
@@ -10,16 +10,19 @@
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
@@ -35,10 +38,12 @@
|
||||
<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>
|
||||
<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" />
|
||||
<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>
|
||||
@@ -104,9 +109,10 @@
|
||||
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()
|
||||
}
|
||||
})
|
||||
@@ -256,7 +262,9 @@
|
||||
showFriend(targetId, type) {
|
||||
this.$Router.push({
|
||||
name: type === 1 ? 'imFriendsMine' : 'imFriendsInfo',
|
||||
params: {targetId}
|
||||
params: {
|
||||
targetId
|
||||
}
|
||||
})
|
||||
},
|
||||
scrollBottom() {
|
||||
@@ -303,10 +311,12 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
image {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
@@ -341,6 +351,7 @@
|
||||
|
||||
.chat-msg {
|
||||
overflow: hidden;
|
||||
|
||||
.chat-msg-text {
|
||||
display: inline-block;
|
||||
padding: ($padding - 10) $padding;
|
||||
@@ -348,9 +359,11 @@
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
|
||||
.chat-msg-audio {
|
||||
@extend .chat-msg-text;
|
||||
width: 50%;
|
||||
|
||||
image {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
@@ -381,6 +394,7 @@
|
||||
.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,11 +432,13 @@
|
||||
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;
|
||||
@@ -429,6 +446,7 @@
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
background: $window-color;
|
||||
height: 80rpx;
|
||||
@@ -446,6 +464,7 @@
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: $title-size-m;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,18 @@
|
||||
import { RouterMount, createRouter } from 'uni-simple-router';
|
||||
import {
|
||||
RouterMount,
|
||||
createRouter
|
||||
} from 'uni-simple-router';
|
||||
import store from '@/store/index'
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
// CALL 页面,必须是nvue,但是NVUE 不支持webpack的 ROUTES 注入
|
||||
// https://github.com/SilurianYang/uni-read-pages/issues/20
|
||||
const ROUTES = [{
|
||||
'path': '/pages/im/private/call',
|
||||
'name': 'imPrivateCall'
|
||||
}]
|
||||
// #endif
|
||||
|
||||
const router = createRouter({
|
||||
platform: process.env.VUE_APP_PLATFORM,
|
||||
routes: [...ROUTES]
|
||||
|
||||
BIN
static/im/sounds/call-down.mp3
Normal file
BIN
static/im/sounds/call-down.mp3
Normal file
Binary file not shown.
BIN
static/im/sounds/call-ring.mp3
Normal file
BIN
static/im/sounds/call-ring.mp3
Normal file
Binary file not shown.
BIN
static/im/sounds/new-msg.mp3
Normal file
BIN
static/im/sounds/new-msg.mp3
Normal file
Binary file not shown.
BIN
utils/im/.DS_Store
vendored
Normal file
BIN
utils/im/.DS_Store
vendored
Normal file
Binary file not shown.
@@ -1,4 +1,5 @@
|
||||
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 store from '@/store/index.js'
|
||||
import {
|
||||
getFriends,
|
||||
@@ -7,6 +8,7 @@ import {
|
||||
|
||||
const initIm = (KEY) => {
|
||||
RongIMLib.init(KEY)
|
||||
CallLib.init()
|
||||
addListeners()
|
||||
}
|
||||
|
||||
@@ -98,6 +100,40 @@ const addListeners = () => {
|
||||
newMessage(message)
|
||||
}
|
||||
})
|
||||
// 监听通话呼入
|
||||
CallLib.onCallReceived((res) => {
|
||||
console.log("Engine:OnCallReceived=>" + "监听通话呼入, 目标id=>", res.data.targetId);
|
||||
console.log('RES', res);
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/private/call?targetId=' + res.data.targetId + '&mediaType=' +
|
||||
res.data.mediaType,
|
||||
success: (err) => {
|
||||
console.log('跳转视频通话成功');
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('跳转视频页失败', err);
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
CallLib.onCallConnected((res) => {
|
||||
uni.$emit('onCallConnected');
|
||||
})
|
||||
CallLib.onCallOutgoing((res) => {
|
||||
uni.$emit('onCallOutgoing');
|
||||
})
|
||||
CallLib.onRemoteUserRinging((res) => {
|
||||
uni.$emit('onRemoteUserRinging');
|
||||
})
|
||||
CallLib.onRemoteUserJoined((res) => {
|
||||
uni.$emit('onRemoteUserJoined');
|
||||
})
|
||||
CallLib.onCallDisconnected((res) => {
|
||||
uni.$emit('onCallDisconnected');
|
||||
})
|
||||
CallLib.onRemoteUserLeft((res) => {
|
||||
uni.$emit('onCallDisconnected');
|
||||
})
|
||||
}
|
||||
|
||||
// 维护消息列表
|
||||
@@ -135,7 +171,7 @@ const triTone = () => {
|
||||
if (tipState == false) {
|
||||
const innerAudioContext = uni.createInnerAudioContext()
|
||||
innerAudioContext.autoplay = true
|
||||
innerAudioContext.src = '/static/tri-tone.mp3'
|
||||
innerAudioContext.src = '/utils/im/sounds/new-msg.mp3'
|
||||
innerAudioContext.onPlay(() => {
|
||||
tipState = true
|
||||
})
|
||||
|
||||
51
utils/im/视频呼入.json
Normal file
51
utils/im/视频呼入.json
Normal file
@@ -0,0 +1,51 @@
|
||||
{
|
||||
"type": "Engine:OnCallReceived",
|
||||
"module": "RongCloud-Call-RCUniCall",
|
||||
"data": {
|
||||
"endTime": 0,
|
||||
"users": [{
|
||||
"userId": "10051",
|
||||
"enableCamera": false,
|
||||
"mediaId": "420111350",
|
||||
"mediaType": 1,
|
||||
"userType": 0,
|
||||
"enableMicrophone": false
|
||||
}, {
|
||||
"userId": "10047",
|
||||
"enableCamera": false,
|
||||
"mediaType": 1,
|
||||
"userType": 0,
|
||||
"enableMicrophone": false
|
||||
}],
|
||||
"inviter": {
|
||||
"userId": "10051",
|
||||
"enableCamera": false,
|
||||
"mediaId": "420111350",
|
||||
"mediaType": 1,
|
||||
"userType": 0,
|
||||
"enableMicrophone": false
|
||||
},
|
||||
"caller": {
|
||||
"userId": "10051",
|
||||
"enableCamera": false,
|
||||
"mediaId": "420111350",
|
||||
"mediaType": 1,
|
||||
"userType": 0,
|
||||
"enableMicrophone": false
|
||||
},
|
||||
"connectedTime": 0,
|
||||
"extra": "",
|
||||
"startTime": 0,
|
||||
"mediaType": 1,
|
||||
"callId": "c28cb9d8-6581-474c-bfa5-9872a4824b65",
|
||||
"targetId": "10051",
|
||||
"callType": 0,
|
||||
"mine": {
|
||||
"userId": "10047",
|
||||
"enableCamera": false,
|
||||
"mediaType": 1,
|
||||
"userType": 0,
|
||||
"enableMicrophone": false
|
||||
}
|
||||
}
|
||||
}
|
||||
51
utils/im/语音呼入.json
Normal file
51
utils/im/语音呼入.json
Normal file
@@ -0,0 +1,51 @@
|
||||
{
|
||||
"type": "Engine:OnCallReceived",
|
||||
"module": "RongCloud-Call-RCUniCall",
|
||||
"data": {
|
||||
"endTime": 0,
|
||||
"users": [{
|
||||
"userId": "10051",
|
||||
"enableCamera": false,
|
||||
"mediaId": "420068630",
|
||||
"mediaType": 0,
|
||||
"userType": 0,
|
||||
"enableMicrophone": false
|
||||
}, {
|
||||
"userId": "10047",
|
||||
"enableCamera": true,
|
||||
"mediaType": 0,
|
||||
"userType": 0,
|
||||
"enableMicrophone": false
|
||||
}],
|
||||
"inviter": {
|
||||
"userId": "10051",
|
||||
"enableCamera": false,
|
||||
"mediaId": "420068630",
|
||||
"mediaType": 0,
|
||||
"userType": 0,
|
||||
"enableMicrophone": false
|
||||
},
|
||||
"caller": {
|
||||
"userId": "10051",
|
||||
"enableCamera": false,
|
||||
"mediaId": "420068630",
|
||||
"mediaType": 0,
|
||||
"userType": 0,
|
||||
"enableMicrophone": false
|
||||
},
|
||||
"connectedTime": 0,
|
||||
"extra": "",
|
||||
"startTime": 0,
|
||||
"mediaType": 0,
|
||||
"callId": "1a1462b8-b63b-40a9-bf95-963e810ac49a",
|
||||
"targetId": "10051",
|
||||
"callType": 0,
|
||||
"mine": {
|
||||
"userId": "10047",
|
||||
"enableCamera": true,
|
||||
"mediaType": 0,
|
||||
"userType": 0,
|
||||
"enableMicrophone": false
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user