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

merge

Browse Source
This commit is contained in:
唐明明
2022-02-18 10:52:29 +08:00
parent 56f1435c4f 6c0feb9cb6
commit 88c6a85d07
43 changed files with 1388 additions and 872 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

2
apis/interfaces/im.js
View File

@@ -259,7 +259,7 @@ const removeGroupAdmin = (groupId, userId) => {
*/
const transferGroupOwner = (groupId, userId) => {
return request({
method: 'DELETE',
method: 'POST',
url: 'im/groups/' + groupId + '/owner/' + userId
})
}

4
manifest.json
View File

@@ -2,8 +2,8 @@
"name" : "ZH-HEALTH",
"appid" : "__UNI__C29473D",
"description" : "ZH-HEALTH，您手上的健康管理专家",
"versionName" : "1.0.8",
"versionCode" : 108,
"versionName" : "1.0.10",
"versionCode" : 110,
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {

6
pages.json
View File

@@ -390,7 +390,7 @@
"path": "pages/im/friends/index",
"name": "imFriends",
"style": {
"navigationBarTitleText": "我的好友",
"navigationBarTitleText": "通讯录",
"app-plus": {
"titleNView": {
"type": "default",
@@ -429,7 +429,9 @@
"path": "pages/im/friends/mine",
"name": "imFriendsMine",
"style": {
"navigationBarTitleText": "我的资料"
"navigationBarTitleText": "我的二维码",
"navigationBarBackgroundColor": "#34CE98",
"navigationBarTextStyle": "white"
}
},
{

67
pages/im/components/connectionStatus.vue Normal file
View File

@@ -0,0 +1,67 @@
<template>
<u-alert type="warning" v-if="connection != 0" :description="description" show-icon />
</template>
<script>
export default {
props: {
connection: {
type: Number,
default: 0
}
},
computed: {
description() {
return this.connectionStatusMap.filter(item => item.index == this.connection)[0].text
}
},
data() {
return {
connectionStatusMap: [{
index: -1,
text: '网络不可用'
},
{
index: 0,
text: '连接成功'
},
{
index: 1,
text: '连接中'
},
{
index: 2,
text: '未连接'
},
{
index: 3,
text: '用户账号在其它设备登录'
},
{
index: 4,
text: 'TOKEN过期'
},
{
index: 6,
text: '用户被禁用'
},
{
index: 12,
text: '退出登录'
},
{
index: 13,
text: '连接暂时被挂起'
},
{
index: 14,
text: '连接超时'
},
],
}
}
}
</script>
<style>
</style>

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

@@ -46,6 +46,16 @@
}
},
created() {
uni.getSystemInfo({
success: (e) => {
this.winSize = {
width: e.windowWidth,
height: e.windowHeight
}
}
})
},
methods: {
// 隐藏功能菜单
hidePop() {
@@ -79,12 +89,15 @@
} else {
style = `top:${touches.clientY}px;`
}
if (touches.clientX > (this.winSize.witdh / 2)) {
style += `right:${this.winSize.witdh-touches.clientX}px`
if (touches.clientX > (this.winSize.width / 2)) {
style += `right:${this.winSize.width-touches.clientX}px`
} else {
style += `left:${touches.clientX}px`
}
this.popButton[0] = item.isTop ? '取消置顶' : '置顶聊天'
this.popStyle = style
this.pickedItem = item

31
pages/im/components/friendApplyCell.vue
View File

@@ -1,20 +1,15 @@
<template>
<view class="apply--cell u-border-bottom">
<view class="apply--cell">
<view class="avatar">
<u-avatar :src="user.portraitUrl" shape="square" size="46" />
<u-avatar :src="user.portraitUrl || require('@/static/user/cover.png')" shape="square" size="46" />
</view>
<view class="info">
<view class="name">
{{ user.name }}
<view class="name"> {{ user.name }}</view>
<view class="message"> {{ message.message!=='null' ? message.message : '听说你很优秀，想认识下你~' }} </view>
</view>
<view class="message">
{{ message.message }}
</view>
</view>
<view class="action">
<u-button type="success" size="mini" @click="resolve">通过</u-button>
<u-button type="warning" size="mini" @click="reject">拒绝</u-button>
<u-button class="u-button" size="default" type="success" @click="resolve">通过</u-button>
<u-button class="u-button" size="default" type="warning" @click="reject">拒绝</u-button>
</view>
</view>
</template>
@@ -46,6 +41,7 @@
icon: 'none',
title: '通过好友申请'
})
uni.navigateBack({})
}).catch(err => {
uni.showToast({
icon: 'none',
@@ -85,6 +81,7 @@
display: flex;
padding: $padding;
align-items: center;
border-bottom: solid 1rpx #f9f9f9;
.info {
flex: 1;
@@ -103,9 +100,19 @@
.action {
justify-content: space-between;
display: flex;
flex-direction: row;
align-items: center;
box-sizing: border-box;
.u-button {
padding: 10rpx 20rpx !important;
font-size: $title-size-m;
height: 60rpx !important;
}
.u-button+.u-button {
margin-top: 10rpx;
margin-left: 10rpx;
}
}
}

3
pages/im/components/friendApplyList.vue
View File

@@ -8,7 +8,7 @@
<view class="right">
<view class="title">
<view class="name">{{ item.name }}</view>
<view class="des">{{ item.latestMessage.message }}</view>
<view class="des">{{ item.latestMessage.message || '--' }}</view>
</view>
<view class="agress-btn">
<span v-if="isAgree" @click="action('agree', item)">通过</span>
@@ -105,6 +105,7 @@ export default {
.agress-btn {
display: flex;
color: #fff;
font-size: $title-size-m;
span {
display: inline-block;
padding: 6rpx 14rpx;

139
pages/im/components/friendSearchList.vue Normal file
View File

@@ -0,0 +1,139 @@
<template>
<view class="friend-apply">
<block v-for="(item, index) in lists" v-if="lists.length > 0" :key="index">
<view class="lists">
<view class="" style="width: 100rpx;height: 100rpx;">
<u-avatar :src="item.portraitUrl || require('@/static/user/cover.png')" shape="square" size="44" />
</view>
<view class="right">
<view class="title">
<view class="name">{{ item.name }}</view>
<view class="des">{{ item.address }}</view>
</view>
<view class="agress-btn">
<span v-if="isApply && item.friendship !=='accepted'" @click="action('apply', item)">查看</span>
<span class="isFri" v-if="isApply && item.friendship ==='accepted'" @click="action('isFriend', item)">已是好友</span>
</view>
</view>
</view>
</block>
</view>
</template>
<script>
export default {
name: 'friend-apply-reject-agree',
props: {
lists: {
type: Array,
default: []
},
isAgree: {
type: Boolean,
default: false
},
isReject: {
type: Boolean,
default: false
},
isApply: {
type: Boolean,
default: false
}
},
created() {
console.log(this.lists);
},
methods: {
action(type, item) {
if (type === 'isFriend') {
// ，后期可以跳转到信息介绍页面，先留在这里
// return uni.showToast({
// title: '已是好友，无需重复添加',
// icon: 'none',
// duration: 2000
// });
}
this.$emit('action', {
type,
item
});
}
}
};
</script>
<style lang="scss" scoped>
.lists {
padding: 0 $padding;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
font-size: $title-size;
color: $text-gray;
.cover {
background-color: #ffffff;
}
.right {
width: 570rpx;
margin-left: $margin - 10;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: $padding 0;
border-bottom: solid 1rpx #f9f9f9;
.title {
width: 370rpx;
.name {
width: 100%;
color: $text-color;
font-size: $title-size;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.des {
width: 100%;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: $title-size-m - 2;
margin-top: $margin - 10;
color: $text-gray-m;
}
}
.agress-btn {
display: flex;
color: #fff;
font-size: $title-size-m;
span {
display: inline-block;
padding: 6rpx 14rpx;
background-color: $text-price;
border-radius: 10rpx;
}
span:nth-child(1) {
background-color: $main-color;
margin-right: 10rpx;
}
.isFri {
background-color: #f9f9f9 !important;
color: #666;
}
}
}
}
</style>

331
pages/im/components/groupUserList.vue Normal file
View File

@@ -0,0 +1,331 @@
<template>
<view class="member--list">
<view class="users">
<view :class="['user', {'active': item.targetId === currentUser.targetId}]" @longpress="showAction(item)"
v-for="(item, index) in users" :key="index" @click="toUser(item)">
<view class="avatar">
<u-avatar :size="avatarSize" shape="square" :src="contact(item.targetId).portraitUrl" />
<view class="admin" v-if="item.is_admin === 1">管理</view>
<view class="owner" v-if="item.is_admin === 2">群主</view>
</view>
<view class="name">{{ item.name }}</view>
</view>
<view class="user" v-if="isAdmin">
<u-avatar @click="inviteUser" :size="avatarSize" shape="square" icon="plus" bgColor="#f9f9f9" color="#c7c7c7" />
<view class="name">邀请好友</view>
</view>
</view>
<view class="loadmore">
<u-icon name="arrow-right" @click="loadMore" v-if="members > users.length" color="#999" labelColor="#999"
label="查看更多群成员" labelPos="left" :labelSize="labelSize" :size="iconSize" />
</view>
<u-action-sheet :actions="actionMap" :title="actionTitle" cancelText="取消" @close="hideAction"
@select="handleAction" :show="actionShow" />
</view>
</template>
<script>
import {
getGroupUsers,
getGroupBase,
removeGroupUser,
setGroupAdmin,
removeGroupAdmin,
transferGroupOwner
} from '@/apis/interfaces/im.js'
import utils from '@/utils/index.js'
export default {
props: {
targetId: {
type: String,
default: ''
},
count: {
type: Number,
default: 0
}
},
data() {
return {
users: [],
isOwner: false,
isAdmin: false,
adminUid: 0,
members: 0,
actionShow: false,
actionMap: [],
actionTitle: '',
currentUser: {},
avatarSize: 45,
labelSize: 14,
iconSize: 14
}
},
computed: {
contact() {
return function(targetId) {
return this.$store.getters.contactInfo(targetId)
}
}
},
created() {
this.avatarSize = utils.rpx2px(90)
this.labelSize = utils.rpx2px(24)
this.iconSize = utils.rpx2px(26)
},
mounted() {
this.initGroupInfo()
getGroupUsers(this.targetId, this.count).then(res => {
this.users = res
res.map(item => {
this.$store.dispatch('updateContact', item)
})
})
},
methods: {
initGroupInfo() {
getGroupBase(this.targetId).then(res => {
this.isOwner = res.is_owner
this.isAdmin = res.is_admin
this.adminUid = res.user_id
this.members = res.members
})
},
initUsers() {
getGroupUsers(this.targetId, this.count).then(res => {
this.users = res
})
},
hideAction(item) {
this.actionShow = false
},
showAction(item) {
this.currentUser = item
this.actionTitle = item.name
// 只有管理员以上才会弹窗
if (this.isAdmin) {
if (this.isOwner) {
if (!item.is_admin) {
this.actionMap = [{
key: 0,
name: '移除成员',
disabled: false
}, {
key: 1,
name: '设置管理',
disabled: false
}, {
key: 2,
name: '转移群主',
disabled: false
}]
} else {
this.actionMap = [{
key: 0,
name: '移除成员',
disabled: false
}, {
key: 4,
name: '取消管理',
disabled: false
}, {
key: 2,
name: '转移群主',
disabled: false
}]
}
} else {
this.actionMap = [{
key: 0,
name: '移除成员',
disabled: false
}]
}
this.actionShow = true
}
},
handleAction(e) {
switch (e.key) {
case 0:
removeGroupUser(this.targetId, this.currentUser.targetId).then(res => {
uni.showToast({
icon: 'none',
title: '成员移除成功'
})
}).catch(err => {
uni.showToast({
icon: 'none',
title: err.message
})
}).finally(() => {
this.initUsers()
})
break;
case 1:
setGroupAdmin(this.targetId, this.currentUser.targetId).then(res => {
uni.showToast({
icon: 'none',
title: '设置管理成功'
})
}).catch(err => {
uni.showToast({
icon: 'none',
title: err.message
})
}).finally(() => {
this.initUsers()
})
break;
case 4:
removeGroupAdmin(this.targetId, this.currentUser.targetId).then(res => {
uni.showToast({
icon: 'none',
title: '取消管理员成功'
})
}).catch(err => {
uni.showToast({
icon: 'none',
title: err.message
})
}).finally(() => {
this.initUsers()
})
break;
case 2:
uni.showModal({
title: '转让群主',
content: '这个操作不可逆转，确定要转让群主身份么？',
success: (res) => {
if (res.confirm) {
console.log(this.targetId, this.currentUser.targetId);
transferGroupOwner(this.targetId, this.currentUser.targetId).then(
res => {
uni.showToast({
icon: 'none',
title: '群主转让成功'
})
}).catch(err => {
uni.showToast({
icon: 'none',
title: err.message
})
}).finally(() => {
this.initUsers()
this.initGroupInfo()
})
}
}
})
break;
}
},
inviteUser() {
uni.navigateTo({
url: '/pages/im/group/invite?targetId=' + this.targetId
})
},
loadMore() {
uni.navigateTo({
url: '/pages/im/group/users?targetId=' + this.targetId
})
},
toUser(item) {
if (item.targetId == this.$store.getters.sender.userId) {
uni.navigateTo({
url: '/pages/im/friends/mine?targetId=' + item.targetId
})
} else {
uni.navigateTo({
url: '/pages/im/friends/info?targetId=' + item.targetId
})
}
}
}
}
</script>
<style lang="scss" scoped>
.users {
flex-direction: row;
flex-wrap: wrap;
display: flex;
padding: 20rpx 0;
.user {
width: 126rpx;
margin-left: 20rpx;
margin-bottom: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&.active {
background-color: $window-color;
}
.avatar {
border-radius: 0 8rpx 0 0;
position: relative;
width: 90rpx;
height: 90rpx;
overflow: hidden;
.admin {
position: absolute;
background-color: $main-color;
transform: rotate(45deg);
color: #ffffff;
font-size: 16rpx;
width: 100rpx;
padding-top: 30rpx;
text-align: center;
right: -45rpx;
top: -20rpx;
}
.owner {
position: absolute;
background-color: $text-price;
transform: rotate(45deg);
color: #ffffff;
font-size: 16rpx;
width: 100rpx;
padding-top: 30rpx;
text-align: center;
right: -45rpx;
top: -20rpx;
}
}
.name {
color: 20rpx;
width: 126rpx;
padding-top: 6rpx;
text-align: center;
font-size: 22rpx !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-word;
color: $text-gray-m !important;
}
}
}
.loadmore {
font-size: 26rpx;
color: $text-gray-m;
text-align: center;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
</style>

16
pages/im/components/messageCell.vue
View File

@@ -6,8 +6,7 @@
</view>
<view class="content">
<view class="header">
<view class="name">{{ contact(item.targetId).name }} <text v-if="item.conversationType === 3"
class='qun'>[群]</text></view>
<view class="name">{{ contact(item.targetId).name }} <text v-if="item.conversationType === 3" class='qun'>[群]</text></view>
<view class="time">{{ item.sentTime|timeCustomCN }}</view>
</view>
<message-preview class="preview" :msg="item.latestMessage" :conversationType="item.conversationType"
@@ -44,7 +43,7 @@
<style lang="scss" scoped>
.message--cell {
display: flex;
padding: 20rpx 0 0 20rpx;
padding: 20rpx 10rpx 0 30rpx;
.avatar {
position: relative;
@@ -60,8 +59,9 @@
position: relative;
flex: 1;
border-bottom-width: 0.5px !important;
border-color: $u-border-color !important;
border-color: #f9f9f9 !important;
border-bottom-style: solid;
.header {
@@ -76,16 +76,20 @@
.qun {
color: $main-color;
font-size: $title-size-m;
font-size: $title-size-m - 4;
margin-left: 4px;
position: relative;
top: -4rpx;
}
}
.time {
font-size: $title-size-sm;
font-size: $title-size-sm - 3;
color: $text-gray-m;
position: absolute;
right: 30rpx;
padding-top: 4rpx;
font-weight: normal;
}
}
}

23
pages/im/components/messagePreview.nvue → pages/im/components/messagePreview.vue
View File

@@ -1,28 +1,31 @@
<template>
<view>
<view class="preview" v-if="msg.objectName=='RC:TxtMsg'">
<text v-if="conversationType == 3">{{ user.name }}: </text>{{ msg.content || '' }}
<text v-if="conversationType == 3">{{ user.name }}：</text>{{ msg.content || '' }}
</view>
<view class="preview" v-if="msg.objectName=='RC:HQVCMsg'">
<text v-if="conversationType == 3">{{ user.name }}: </text>[语音]
<text v-if="conversationType == 3">{{ user.name }}：</text>[语音]
</view>
<view class="preview" v-if="msg.objectName=='RC:ImgMsg'">
<text v-if="conversationType == 3">{{ user.name }}: </text>[图片]
<text v-if="conversationType == 3">{{ user.name }}：</text>[图片]
</view>
<view class="preview" v-if="msg.objectName=='RC:GIFMsg'">
<text v-if="conversationType == 3">{{ user.name }}: </text>[表情]
<text v-if="conversationType == 3">{{ user.name }}：</text>[表情]
</view>
<view class="preview" v-if="msg.objectName=='RC:FileMsg'">
<text v-if="conversationType == 3">{{ user.name }}: </text>[文件]
<text v-if="conversationType == 3">{{ user.name }}：</text>[文件]
</view>
<view class="preview" v-if="msg.objectName=='RC:LBSMsg'">
<text v-if="conversationType == 3">{{ user.name }}: </text>[位置]
<text v-if="conversationType == 3">{{ user.name }}：</text>[位置]
</view>
<view class="preview" v-if="msg.objectName=='RC:AudioMsg'">
<text v-if="conversationType == 3">{{ user.name }}: </text>[语音通话]
<text v-if="conversationType == 3">{{ user.name }}：</text>[语音通话]
</view>
<view class="preview" v-if="msg.objectName=='RC:VideoMsg'">
<text v-if="conversationType == 3">{{ user.name }}: </text>[视频通话]
<text v-if="conversationType == 3">{{ user.name }}：</text>[视频通话]
</view>
<view class="preview" v-if="msg.objectName=='RC:GrpNtf'">
[{{ msg.message }}]
</view>
</view>
</template>
@@ -54,9 +57,9 @@
.preview {
word-break: break-all;
color: $text-gray-m;
padding-top: $padding - 20;
padding-top: 6rpx;
padding-bottom: $padding;
font-size: $title-size-m;
font-size: $title-size-m - 2;
height: 32rpx;
line-height: 32rpx;
width: 520rpx;

19
pages/im/components/sentMessageBar.nvue → pages/im/components/sentMessageBar.vue
View File

@@ -3,22 +3,15 @@
<!-- footer -->
<view class="footer">
<view class="msg-type" @click="changeMessageType">
<image class="icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix">
</image>
<image class="icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix">
</image>
</view>
<sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId"
@success="onSuccess" />
<sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId"
@success="onSuccess" @focus="onHidePopus" />
<view class="msg-type msg-popups" @click="() => { showPopups = !showPopups, onHidePopus }">
<image class="icon" src="@/static/icon/popups-icon.png"></image>
<image class="icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix" />
<image class="icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix" />
</view>
<sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId" @success="onSuccess" />
<sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId" @success="onSuccess" />
<view class="msg-type msg-popups" @click="showPopups = !showPopups"> <image class="icon" src="@/static/icon/popups-icon.png" /> </view>
</view>
<!-- 弹出层 -->
<sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId"
@success="() => {showPopups = false, onSuccess()}"></sent-popups>
<sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId" @success="() => {showPopups = false, onSuccess()}" />
</view>
</template>

20
pages/im/components/sentPopups.nvue → pages/im/components/sentPopups.vue
View File

@@ -8,7 +8,7 @@
<image class="icon" src="@/static/icon/popups-icon-01.png" mode="widthFix"></image>
<text class="text">拍摄</text>
</view>
<view class="item" @click="onPopupsItem('video')">
<view class="item" @click="onPopupsItem('video')" v-if="conversationType == 1">
<image class="icon" src="@/static/icon/popups-icon-02.png" mode="widthFix"></image>
<text class="text">视频通话</text>
</view>
@@ -33,6 +33,7 @@
<script>
import im from '@/utils/im/index.js'
import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
export default {
data() {
@@ -64,20 +65,15 @@
}
},
computed: {
user() {
sender() {
return this.$store.getters.sender
}
},
methods: {
singleCall(e) {
uni.showToast({
icon: 'none',
title: '功能正在开发中'
uni.navigateTo({
url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' + e.type
})
// CallLib.startSingleCall(this.targetId, e.type, '');
// uni.redirectTo({
// url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' + e.type
// })
},
onPopupsItem(type) {
switch (type) {
@@ -87,8 +83,7 @@
sourceType: ['album'],
success: res => {
im.sentImage(this.conversationType, this.targetId, res.tempFilePaths[0],
this.user, (
res) => {
this.sender, (res) => {
this.success()
})
}
@@ -99,8 +94,7 @@
sourceType: ['camera'],
success: res => {
im.sentImage(this.conversationType, this.targetId, res.tempFilePaths[0],
this.user, (
res) => {
this.sender, (res) => {
this.success()
})
}

4
pages/im/components/sentText.nvue → pages/im/components/sentText.vue
View File

@@ -29,7 +29,7 @@
disabled() {
return this.inputTxt.length === 0
},
user() {
sender() {
return this.$store.getters.sender
}
},
@@ -55,7 +55,7 @@
sent() {
if (!this.disabled) {
RongIMLib.clearTextMessageDraft(this.conversationType, this.targetId)
im.sentText(this.conversationType, this.targetId, this.inputTxt, this.user, () => {
im.sentText(this.conversationType, this.targetId, this.inputTxt, this.sender, () => {
this.$emit('success')
this.inputTxt = ''
})

5
pages/im/components/sentVoice.nvue → pages/im/components/sentVoice.vue
View File

@@ -36,7 +36,7 @@
}
},
computed: {
user() {
sender() {
return this.$store.getters.sender
}
},
@@ -85,8 +85,7 @@
// 监听录音结束
this.recorderManager.onStop(res => {
im.sentVoice(this.conversationType, this.targetId, res.tempFilePath, (this.maxRecordTime -
this
.recordTime), this.user, () => {
this.recordTime), this.sender, () => {
setTimeout(() => {
this.$emit('success')
}, 500)

0
pages/im/components/showImage.nvue → pages/im/components/showImage.vue
View File

0
pages/im/components/showText.nvue → pages/im/components/showText.vue
View File

0
pages/im/components/showVoice.nvue → pages/im/components/showVoice.vue
View File

67
pages/im/friends/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<view>
<u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
<view class="friend-flex u-border-bottom" @click="toPending">
<view class="friend-flex" @click="toPending">
<u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_01.png')"></u-avatar>
<u-badge max="99" absolute :offset="[23, 20]" :value="pendingCount" />
<view class="info">新的朋友</view>
@@ -12,22 +12,21 @@
</view>
<block v-if="friends.length > 0">
<u-index-item v-for="(item, fkey) in friends" :key="fkey">
<u-index-anchor :text="indexs[fkey]" bgColor="#F3F6FB" height="20" size="12" color="#666">
</u-index-anchor>
<view v-for="(friendItem, index) in item" :key="index" class="friend-flex u-border-bottom"
<u-index-anchor :text="indexs[fkey]" bgColor="#ededed" height="20" size="12" color="#666"
style="padding:10rpx 30rpx" />
<view v-for="(friendItem, index) in item" :key="index" class="friend-flex"
@click="toFriend(friendItem.targetId)">
<u-avatar size="40" shape="square" :src="contact(friendItem.targetId).portraitUrl" />
<u-avatar class="avatar-img" size="40" shape="square"
:src="contact(friendItem.targetId).portraitUrl" />
<view class="info">
<view class="name">{{ contact(friendItem.targetId).name }}</view>
<view class="address">{{ friendItem.address }}</view>
<!-- <view class="address">Hash:{{ friendItem.address }}</view> -->
</view>
</view>
</u-index-item>
</block>
<block v-else>
<u-empty class="pages-null" mode="data" text="暂无好友">
</u-empty>
<u-empty class="pages-null" mode="data" text="暂无好友" />
</block>
</u-index-list>
</view>
@@ -57,13 +56,7 @@
onLoad() {
this.getFriendList()
this.checkNewFriendPending()
uni.$on('onContactNotification', () => {
this.checkNewFriendPending()
this.getFriendList()
})
},
onUnload() {
uni.$off('onContactNotification')
uni.$on('onContactNotification', this.checkNewFriendPending)
},
methods: {
getFriendList() {
@@ -97,9 +90,18 @@
},
// 新朋友
toPending() {
if (this.pendingCount > 0) {
uni.navigateTo({
url: '/pages/im/friends/pending'
});
} else {
uni.showToast({
title: ` 暂无好友申请 ~ `,
icon: "none",
mask: true,
duration: 3000
})
}
}
},
onNavigationBarButtonTap(e) {
@@ -119,26 +121,51 @@
// 好友列表
.friend-flex {
position: relative;
padding: 20rpx $padding;
padding: 0 $padding 0 $padding;
display: flex;
flex-direction: row;
align-items: center;
box-sizing: border-box;
.avatar-img {
box-shadow: 0 0 20rpx rgba($color: $main-color, $alpha: 0.2);
}
.info {
flex: 1;
margin-left: $padding;
border-bottom: solid 1rpx #f9f9f9;
height: 120rpx;
line-height: 120rpx;
.name {
font-size: $title-size + 2;
font-size: $title-size + 2;
font-size: $title-size;
color: #454545 !important;
@extend .nowrap;
}
.address {
color: $text-gray-m;
font-size: $title-size-m - 5;
font-size: $title-size-m - 3;
padding-top: 10rpx;
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 600rpx;
}
}
}
.list-cell {
display: flex;
box-sizing: border-box;
width: 100%;
padding: 10px 24rpx;
overflow: hidden;
color: #323233;
font-size: 14px;
line-height: 24px;
background-color: #fff;
}
</style>

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

@@ -6,7 +6,7 @@
bg-color="#fff"></u-avatar>
<view class="info-text">
<view class="nickname">{{ userInfo.name }}</view>
<view class="address" @longpress="copyAddress">地址：{{ userInfo.address }}</view>
<view class="address" @longpress="copyAddress">Hash：{{ userInfo.address }}</view>
</view>
</view>
<!-- 用户资料 -->
@@ -19,7 +19,7 @@
</view>
</view>
<block v-if="userInfo.is_friend">
<block v-if="userInfo.friendship ==='accepted'">
<view class="info-btns">
<view class="item u-border-bottom" @click="setRemark">
<label>设置备注</label>
@@ -83,7 +83,11 @@
} 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'
// friendship: '' 没有好友关系
// accepted 好友
// pending 申请中
// denied 拒绝
// blocked 黑名单
export default {
data() {
return {
@@ -108,6 +112,7 @@
onLoad(e) {
this.targetId = e.targetId
getFriendInfo(e.targetId).then(res => {
console.log(res, "获取朋友的信息")
this.userInfo = res
// 获取到用户信息之后，去检查一下要不要更新
this.$store.dispatch('updateContact', res)
@@ -198,17 +203,23 @@
toBeFriend() {
pedingFriend(this.targetId).then(res => {
uni.showToast({
title: '申请成功',
icon: 'none'
title: ` 申请成功,等待审核 `,
icon: 'none',
duration: 3000,
mask: true
});
})
.catch(err => {
// if(err.status_code === 6001){
// this.userInfo.friendship = 'accepted'
// }else{
uni.showToast({
icon: 'error',
title: err.message,
duration: 2000
duration: 2000,
mask: true
})
// }
})
},
singleCall(e) {

215
pages/im/friends/mine.vue
View File

@@ -1,32 +1,20 @@
<template>
<view class="content">
<view class="friend-ewm-content">
<view class="bg"></view>
<!-- 用户信息 -->
<view class="info-flex">
<u-avatar :src="infoObj.portraitUrl" shape="square" size="50" bg-color="#fff"></u-avatar>
<view class="info-text">
<view class="info-flex-item">
<u-avatar :src="infoObj.portraitUrl" shape="square" size="210rpx" bg-color="#fff" class="avatar" />
<view class="nickname">{{infoObj.name}}</view>
<view class="address">地址：{{infoObj.address}}</view>
</view>
</view>
<!-- 用户身份 -->
<view class="info-btns">
<view class="item">
<label>性别</label>
<view class="text" v-if="infoObj.gender === 0">保密</view>
<view class="text" v-if="infoObj.gender === 1">男</view>
<view class="text" v-if="infoObj.gender === 2">女</view>
</view>
<view class="item">
<label>地址</label>
<view class="text">{{infoObj.address}}</view>
</view>
</view>
<!-- 二维码 -->
<view class="address">{{infoObj.address}}</view>
<view class="info-code">
<uqrcode class="info-code-src" :size="198" :text="qrContent" />
<view class="info-code-text">
<view>ZH-HEALTH扫一扫上面的二维码</view>
<view>添加我的好友</view>
<uqrcode class="info-code-src" :size="160" :text="qrContent" />
<view class="info-code-text">扫描二维码加我ZH大健康好友</view>
</view>
<u-icon class="download" :name="require('@/static/imgs/copy-333.png')" size="14" :bold="true"
@click="copy" :label="'应用下载:'+ downUrl" labelPos="left" labelSize="14" space="6"
labelColor="#26a377" />
<view class="copy" @click="copy"> 复制地址 </view>
</view>
</view>
</view>
@@ -48,6 +36,7 @@
gender: 0,
hash: ''
},
downUrl: 'http://www.baidu.com',
qrContent: 'ADDFRIEND|'
}
},
@@ -58,131 +47,115 @@
})
},
methods: {
copy() {
uni.setClipboardData({
data: this.downUrl,
success: function() {
uni.showToast({
title: ` 下载链接已复制到剪贴板 `,
icon: 'none',
position:'bottom',
mask: true,
duration: 2000
})
}
});
}
}
}
</script>
<style lang="scss" scoped>
.content {
background: $window-color;
.friend-ewm-content {
background: #fff;
min-height: 100vh;
padding-top: $padding;
box-sizing: border-box;
.bg {
background-color: red;
width: 100%;
height: 340rpx;
background-color: $main-color;
}
// 用户信息
.info-flex {
padding: $padding 0;
// margin: 0 $margin;
background: white;
border-radius: 50rpx 50rpx 0 0;
position: relative;
top: -100rpx;
.info-flex-item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
box-sizing: border-box;
position: relative;
top: -160rpx;
.avatar {
// padding: 14rpx;
border-radius: 10rpx;
background-color: #fff;
border: solid 14rpx rgba($color: #fff, $alpha:1);
}
.nickname {
line-height: 80rpx;
font-size: $title-size + 5;
color: $text-color;
font-weight: 600;
}
.address {
line-height: 60rpx;
font-size: $title-size-m + 2;
color: $text-gray;
text-align: left;
@extend .nowrap;
}
.info-code {
background: white;
margin: 0 $margin;
border-radius: $radius;
padding: $padding*3 $padding $padding;
padding: $padding * 1.4 $padding $padding;
text-align: center;
&-src {
display: inline-block;
border-radius: 10rpx;
border: solid 20rpx rgba($color: #f9f9f9, $alpha:1);
background-color: #fff;
padding: 14rpx;
}
&-text {
text-align: center;
color: $text-gray;
font-size: $title-size-sm;
font-size: $title-size-m + 1;
line-height: 40rpx;
padding: $padding 0;
padding: 8rpx 0 $padding 0;
}
}
// 用户信息
.info-flex {
padding: $padding;
margin: 0 $margin;
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;
.download {
background-color: #f9f9fb;
padding: 20rpx 30rpx 10rpx 30rpx;
border-radius: 10rpx;
}
.address {
line-height: 20px;
font-size: $title-size-sm;
color: $text-gray;
text-align: left;
@extend .nowrap;
}
}
}
// footer
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: $padding*2 $padding;
display: flex;
justify-content: space-around;
.footer-item {
margin: 0 $margin/2;
.icon {
background: $main-color;
width: 88rpx;
height: 88rpx;
line-height: 88rpx;
display: inline-block;
border-radius: 50%;
.icon-u {
margin-top: calc((88rpx/2) - 13px);
margin-left: calc((88rpx/2) - 13px);
}
}
.text {
.copy {
font-size: $title-size + 4;
color: $main-color;
font-size: $title-size-m;
text-align: center;
padding-top: 10rpx;
}
}
}
// btns
.info-btns {
background: white;
margin: $margin;
border-radius: $radius;
.item {
line-height: 100rpx;
border-bottom: solid 1rpx $border-color;
display: flex;
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;
text-align: right;
@extend .nowrap;
background-color: rgba($color: $main-color, $alpha: .1);
padding: 20rpx 100rpx;
border-radius: 50rpx;
margin-top: 40rpx;
}
}
}

3
pages/im/friends/pending.vue
View File

@@ -29,9 +29,6 @@
this.getPendingList()
uni.$on('onContactNotification', this.getPendingList)
},
onUnload() {
uni.$off('onContactNotification')
},
methods: {
getPendingList() {
im.getPendingList((pendings) => {

10
pages/im/friends/search.vue
View File

@@ -31,7 +31,7 @@
searchFriend,
pedingFriend
} from '@/apis/interfaces/im.js';
import applyFriend from '../components/friendApplyList.vue';
import applyFriend from '../components/friendSearchList.vue';
export default {
components: {
applyFriend
@@ -45,9 +45,15 @@
},
methods: {
search() {
// friendship: '' 没有好友关系
// accepted 好友
// pending 申请中
// denied 拒绝
// blocked 黑名单
searchFriend(this.searchValue)
.then(res => {
this.searchResult = res;
console.log(res)
})
.catch(err => {
uni.showToast({
@@ -58,7 +64,7 @@
},
action(e) {
uni.navigateTo({
url: '/pages/im/friends/info?targetId=' + e.item.userId
url: '/pages/im/friends/info?targetId=' + e.item.targetId
})
}
}

54
pages/im/group/apply.vue
View File

@@ -1,21 +1,23 @@
<template>
<view class="apply">
<u-avatar :src="group.cover" size="128" shape="square"></u-avatar>
<view class="apply" v-if="loaded">
<u-avatar :src="group.cover || require('@/static/user/cover.png')" size="128" shape="square" />
<view class="name">
{{ group.name }}
</view>
<u-button v-if="group.can_join" @click="applyGroup" text="申请加群" :disabled="disabled" color="#34CE98" />
<u-button class="apply-btn" v-if="group.can_join" @click="applyGroup" text="申请加群" :disabled="disabled"
color="#34CE98" />
<view class="" v-else>
<view class="" v-if="group.is_full">群已满员</view>
<view class="" v-if="group.deny_apply">禁止申请</view>
<u-button v-if="group.state === 'accepted'" color="#34CE98" text="进入群聊" @click="toGroupChat" />
<u-button class="apply-btn2" v-if="group.state === 'accepted'" color="#34CE98" text="进入群聊"
@click="toGroupChat" />
</view>
<u-modal negativeTop="300" :show="modalShow" title="申请原因" showCancelButton @cancel="onHideModal"
@confirm="onJoinGroup">
<view class="slot-content">
<u--input placeholder="申请原因" border="surround" focus v-model="message"></u--input>
<u--input placeholder="申请原因" border="surround" focus v-model="message" />
</view>
</u-modal>
</view>
@@ -34,14 +36,24 @@
group: {},
modalShow: false,
message: '',
disabled: false
disabled: false,
loaded: false
}
},
onLoad(e) {
console.log(e, 'e。。。。。。')
this.targetId = e.targetId
// this.targetId = "TG2"
joinGroupPre(this.targetId).then(res => {
console.log(res);
this.group = res
this.loaded = true
}).catch(err => {
uni.showToast({
title: err.message,
icon: 'none',
mask: true,
duration: 3000
})
})
},
methods: {
@@ -62,8 +74,13 @@
console.log('申请结果', res);
uni.showToast({
icon: 'none',
title: '申请成功'
title: '申请成功',
duration:2000,
mast:true
})
setTimeout(() => {
this.$Router.back()
}, 2000)
}).catch(err => {
uni.showToast({
icon: 'none',
@@ -82,10 +99,27 @@
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
min-height: 100vh;
background-color: $window-color;
.u-avatar {
width: 200rpx;
height: 200rpx;
margin-top: 60rpx;
width: 180rpx;
height: 180rpx;
}
.name {
margin: 40rpx 0;
font-size: $title-size + 2;
}
.apply-btn {
width: 80%;
font-size: $title-size;
}
.apply-btn2{
padding: 0 100rpx;
}
}
</style>

60
pages/im/group/chat.nvue → pages/im/group/chat.vue
View File

@@ -1,23 +1,24 @@
<template>
<view class="group--chat">
<list class="body" :show-scrollbar="false" @click="onScroll">
<cell class="cell" v-for="(item, index) in messages" :key="index">
<view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
<scroll-view class="body" :show-scrollbar="false">
<view class="cell" v-for="(item, index) in messages" :key="index">
<view class="cell-system" v-if="item.senderUserId === '__system__'">{{ item.content.message }}</view>
<view v-else :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
<u-avatar class="avatar" @click="toUser(item)" size="36" shape="square"
:src="item.content.userInfo.portraitUrl" />
:src="contact(item.senderUserId).portraitUrl" />
<view class="msg">
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
:msg="item.content" :name="item.content.userInfo.name" />
:msg="item.content" :name="contact(item.senderUserId).name" />
<show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
:msg="item.content" :name="item.content.userInfo.name" />
:msg="item.content" :name="contact(item.senderUserId).name" />
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
:msg="item.content" :name="item.content.userInfo.name" />
:msg="item.content" :name="contact(item.senderUserId).name" />
</view>
</view>
</cell>
<cell class="cell-footer" ref="chatBottom"></cell>
</list>
<sent-message-bar ref="messageBar" :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
</view>
<view class="cell-footer" ref="chatBottom"></view>
</scroll-view>
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
</view>
</template>
@@ -25,6 +26,9 @@
import {
timeCustomCN
} from '@/utils/filters.js'
import {
getGroupBase
} from '@/apis/interfaces/im.js'
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import im from '@/utils/im/index.js'
import showVoice from '../components/showVoice'
@@ -53,13 +57,18 @@
},
computed: {
latestMessage() {
if (this.messages.length > 1) {
if (this.messages.length) {
return this.messages[this.messages.length - 1]
} else {
return {
sentTime: 0
}
}
},
contact() {
return function(targetId) {
return this.$store.getters.contactInfo(targetId)
}
}
},
onLoad(e) {
@@ -68,12 +77,21 @@
uni.setNavigationBarTitle({
title: this.groupInfo.name
})
// 获取群成员数量
getGroupBase(this.targetId).then(res => {
uni.setNavigationBarTitle({
title: this.groupInfo.name + `(${res.members})`
})
})
// 获取历史消息列表
this.getMessageList()
// 监听收到本群的消息，追加消息
uni.$on('onReceiveMessage', (msg) => {
if (msg.targetId == this.targetId) {
this.getNewMessage()
}
})
// 清理聊天记录
uni.$once('cleanGroupMessage', this.getMessageList)
},
onNavigationBarButtonTap() {
@@ -81,10 +99,15 @@
url: '/pages/im/group/info?targetId=' + this.targetId
})
},
<<<<<<< HEAD:pages/im/group/chat.nvue
methods: {
onScroll(e){
this.$refs.messageBar.onHidePopus()
},
=======
methods: {
// 转到好友资料页面
>>>>>>> 6c0feb9cb60e7c756df3bbe34e36fbe467b90d27:pages/im/group/chat.vue
toUser(item) {
if (item.senderUserId == '__system__') {
return
@@ -104,7 +127,7 @@
this.conversationType,
this.targetId,
this.latestMessage.sentTime,
1,
10,
false,
(messages) => {
this.messages = this.messages.concat(messages)
@@ -151,15 +174,24 @@
<style lang="scss" scoped>
.group--chat {
background: $window-color;
flex: 1;
height: 100vh;
display: flex;
flex-direction: column;
.body {
overflow: scroll;
flex: 1;
.cell {
padding: 10rpx 30rpx;
.cell-system {
text-align: center;
}
.cell-item {
display: flex;
flex-direction: row;
width: 690rpx;
justify-content: flex-start;
align-items: flex-start;

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

@@ -1,12 +1,13 @@
<template>
<view>
<view v-for="(item, index) in groups" :key="index" class="friend-flex u-border-bottom"
@click="toGroup(item.targetId)">
<u-avatar size="40" shape="square" :src="contact(item.targetId).portraitUrl" />
<view class="group">
<view class="title"> 群聊 </view>
<view v-for="(item, index) in groups" :key="index" class="friend-flex" @click="toGroup(item.targetId)">
<u-avatar size="38" shape="square" :src="contact(item.targetId).portraitUrl" />
<view class="info">
<view class="name">{{ item.name }}</view>
</view>
</view>
<view class="group-count"> {{groups.length}}个群聊 </view>
<u-modal negativeTop="300" :show="createModal" title="创建群聊" showCancelButton @cancel="onHideModal"
@confirm="onCreateGroup">
<view class="slot-content">
@@ -42,6 +43,7 @@
},
onLoad() {
this.initData()
uni.$on('onGroupDismiss', this.initData)
},
methods: {
initData() {
@@ -63,13 +65,14 @@
uni.showToast({
title: '创建成功'
})
this.initData()
this.onHideModal()
}).catch(err => {
uni.showToast({
icon: 'none',
title: err
title: err.message
})
}).finally(() => {
this.initData()
this.onHideModal()
})
},
toGroup(targetId) {
@@ -82,6 +85,24 @@
</script>
<style lang="scss" scoped>
.group {
min-height: 100vh;
background-color: $window-color;
.title{
font-size: $title-size-m;
color: $text-gray-m;
padding: 10rpx $padding;
}
.group-count{
text-align: center;
font-size: $title-size;
color: $text-gray;
background-color: #fff;
padding: 10rpx $padding $padding $padding;
font-weight: normal;
}
}
// 好友列表
.friend-flex {
position: relative;
@@ -89,14 +110,17 @@
display: flex;
flex-direction: row;
align-items: center;
background-color: #fff;
.info {
flex: 1;
margin-left: $padding;
margin-left: $padding + 10;
border-bottom: solid 1rpx #f9f9f9;
padding-bottom: $padding;
.name {
font-size: $title-size + 2;
font-size: $title-size + 2;
font-size: $title-size + 1;
color: #454545 !important;
}

226
pages/im/group/info.vue
View File

@@ -1,53 +1,37 @@
<template>
<view class="container">
<view class="members u-border-bottom">
<view class="users">
<view :class="['user', {'active': item.targetId == currentUser.targetId}]"
v-for="(item, index) in users" :key="index" @click="toUser(item)"
@longpress="showUserActionSheet(item)">
<u-avatar size="44" shape="square" :src="item.portraitUrl">
</u-avatar>
<view class="name">{{ item.name }}</view>
</view>
<view class="user" v-if="group.can_invite">
<u-avatar @click="inviteUser" size="44" shape="square" icon="plus" bg-color="#eeeeee"
color="#999999"></u-avatar>
<view class="name">邀请好友</view>
</view>
<group-user-list :targetId="targetId" :count="14" />
</view>
<view @click="loadMore" v-if="members > users.length" class="loadmore">查看更多群成员 ></view>
</view>
<u-cell-group class="cells">
<u-cell isLink title="群公告" :label="announcement" @click="toAnnouncement"></u-cell>
<u-cell isLink title="二维码" @click="showGroupQrCode"></u-cell>
<u-cell title="聊天置顶">
<u-switch slot="value" size="20" v-model="isTop" activeColor="#34CE98" @change="setTop"></u-switch>
<u-cell-group class="cells" :border="false" >
<u-cell :border="false" class="u-border-bottom" isLink title="群公告" :label="announcement" @click="toAnnouncement" />
<u-cell :border="false" class="u-border-bottom" isLink title="二维码" @click="showGroupQrCode" />
<u-cell :border="false" class="u-border-bottom" title="聊天置顶">
<u-switch slot="value" size="20" v-model="isTop" activeColor="#34CE98" @change="setTop" />
</u-cell>
<u-cell title="免打扰">
<u-switch slot="value" size="20" v-model="status" activeColor="#34CE98" @change="setStatus"></u-switch>
<u-cell class="u-border-bottom" :border="false" title="免打扰">
<u-switch slot="value" size="20" v-model="status" activeColor="#34CE98" @change="setStatus" />
</u-cell>
</u-cell-group>
<u-cell-group class="cells" v-if="group.is_admin">
<u-cell isLink title="修改群聊名称" :value="groupName" @click="onGroupName"></u-cell>
<u-cell isLink title="修改群头像">
<u-avatar slot="value" size="25" shape="square" @click="onGroupAvatar" :src="group.cover"></u-avatar>
<u-cell-group class="cells" v-if="group.is_admin" :border="false">
<u-cell :border="false" class="u-border-bottom" isLink title="修改群聊名称" :value="groupName" @click="onGroupName" />
<u-cell :border="false" class="u-border-bottom" isLink title="修改群头像" @click="onGroupAvatar">
<u-avatar slot="value" size="25" shape="square" :src="group.cover" />
</u-cell>
<u-cell isLink v-if="group.is_owner" title="准入方式" :value="joinType" @click="onChangeJoinType"></u-cell>
<u-cell :border="false" class="u-border-bottom" isLink v-if="group.is_owner" title="准入方式" :value="joinType" @click="onChangeJoinType" />
</u-cell-group>
<view class="cells actions u-border-top" v-if="loaded">
<view class="cells actions" v-if="loaded">
<view class="action u-border-bottom" @click="onClean">清空聊天记录</view>
<view class="action u-border-bottom" v-if="group.is_owner" @click="onDismiss">解散群聊</view>
<view class="action u-border-bottom" v-else @click="onQuite">删除并退出</view>
</view>
<u-modal negativeTop="300" :show="modalShow" title="修改群名称" showCancelButton @cancel="onHideModal"
@confirm="onChangeGroupName">
<u-modal negativeTop="300" :show="modalShow" title="修改群名称" showCancelButton @cancel="onHideModal" @confirm="onChangeGroupName">
<view class="slot-content">
<u--input placeholder="群名称" border="surround" focus v-model="groupName"></u--input>
<u--input placeholder="群名称" border="surround" focus v-model="groupName" />
</view>
</u-modal>
@@ -57,13 +41,7 @@
</view>
</u-modal>
<u-action-sheet @select="doAction" :actions="joinTypeMap" cancelText="取消" :show="showActions"
@close="showActions=false">
</u-action-sheet>
<u-action-sheet @select="handleUserAction" :actions="userActionMap" cancelText="取消" :show="showUserAction"
@close="hideUserAction">
</u-action-sheet>
<u-action-sheet @select="doAction" :actions="joinTypeMap" cancelText="取消" :show="showActions" @close="showActions=false" />
</view>
</template>
@@ -72,27 +50,24 @@
getGroupInfo,
updateGroup,
quitGroup,
removeGroupUser,
setGroupAdmin,
removeGroupAdmin,
dismissGroup,
transferGroupOwner,
getGroupUsers
dismissGroup
} from '@/apis/interfaces/im.js'
import {
uploads
} from '@/apis/interfaces/uploading'
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import groupUserList from '../components/groupUserList'
export default {
components: {
groupUserList
},
data() {
return {
targetId: '',
group: {},
conversationType: 3,
announcement: '',
users: [],
members: 0,
status: false,
isTop: false,
loaded: false,
@@ -102,24 +77,7 @@
qrContent: 'JOINGROUP|',
joinType: '',
joinTypeMap: [],
showActions: false,
showUserAction: false,
userActionMap: [{
key: 0,
name: '移除成员',
disabled: false
}, {
key: 1,
name: '设置管理',
disabled: true
},
{
key: 2,
name: '转移群主',
disabled: true
}
],
currentUser: {}
showActions: false
}
},
onLoad(e) {
@@ -139,18 +97,12 @@
}
})
this.initData()
this.initUsers()
uni.$on('groupAnnouncementCreated', this.initData)
},
onUnload() {
uni.$off('groupAnnouncementCreated')
},
methods: {
initUsers() {
getGroupUsers(this.targetId, 14).then(res => {
this.users = res
})
},
initData() {
getGroupInfo(this.targetId).then(res => {
this.group = res.group
@@ -190,27 +142,6 @@
})
})
},
toUser(item) {
if (item.targetId == this.$store.getters.sender.userId) {
uni.navigateTo({
url: '/pages/im/friends/mine?targetId=' + item.targetId
})
} else {
uni.navigateTo({
url: '/pages/im/friends/info?targetId=' + item.targetId
})
}
},
inviteUser() {
uni.navigateTo({
url: '/pages/im/group/invite?targetId=' + this.targetId
})
},
loadMore() {
uni.navigateTo({
url: '/pages/im/group/users?targetId=' + this.targetId
})
},
toAnnouncement() {
uni.navigateTo({
url: '/pages/im/group/announcement?targetId=' + this.targetId
@@ -339,6 +270,7 @@
success: (res) => {
if (res.confirm) {
dismissGroup(this.targetId).then(res => {
console.log('解散群', res);
uni.showToast({
icon: 'none',
title: '解散成功'
@@ -373,73 +305,6 @@
}
}
})
},
showUserActionSheet(item) {
this.currentUser = item
// 只有管理员以上才会弹窗
if (this.group.is_admin) {
if (this.group.is_owner) {
this.userActionMap.map((item) => {
item.disabled = false
return item
})
}
this.showUserAction = true
}
},
hideUserAction() {
this.currentUser = {}
this.showUserAction = false
},
handleUserAction(e) {
switch (e.key) {
case 0:
removeGroupUser(this.targetId, this.currentUser.targetId).then(res => {
uni.showToast({
icon: 'none',
title: '成员移除成功'
})
}).catch(err => {
uni.showToast({
icon: 'none',
title: err.message
})
}).finally(() => {
this.initUsers()
})
break;
case 1:
setGroupAdmin(this.targetId, this.currentUser.targetId).then(res => {
uni.showToast({
icon: 'none',
title: '设置管理成功'
})
}).catch(err => {
uni.showToast({
icon: 'none',
title: err.message
})
}).finally(() => {
this.initUsers()
})
break;
case 2:
transferGroupOwner(this.targetId, this.currentUser.targetId).then(res => {
uni.showToast({
icon: 'none',
title: '群主转让成功'
})
}).catch(err => {
uni.showToast({
icon: 'none',
title: err.message
})
}).finally(() => {
this.initUsers()
this.initData()
})
break;
}
}
}
}
@@ -459,44 +324,6 @@
.members {
background-color: white;
padding-bottom: 40rpx;
.users {
flex-direction: row;
flex-wrap: wrap;
display: flex;
padding: 20rpx 0;
.user {
width: 126rpx;
margin-left: 20rpx;
margin-bottom: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&.active {
background-color: $window-color;
}
.name {
color: $text-gray-m;
width: 126rpx;
text-align: center;
font-size: 26rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-word;
}
}
}
.loadmore {
font-size: 26rpx;
color: $text-gray-m;
text-align: center;
}
}
.actions {
@@ -509,4 +336,9 @@
justify-content: center;
}
}
.u-border-bottom {
border-bottom: solid 1rpx #f9f9f9 !important;
}
</style>

124
pages/im/group/invite.vue
View File

@@ -1,21 +1,137 @@
<template>
<view class="">
<view>
<button type="default" @click="onInvite">确定</button>
<u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
<u-checkbox-group v-if="friends.length > 0" v-model="checkboxValue" placement="column">
<u-index-item v-for="(item, fkey) in friends" :key="fkey">
<u-index-anchor :text="indexs[fkey]" bgColor="#ededed" height="20" size="12" color="#666"
style="padding:10rpx 30rpx" />
<view v-for="(friendItem, index) in item" :key="index" class="friend-flex"
@click="addContact(friendItem.targetId)">
<u-checkbox :name="friendItem.targetId" shape="circle" />
<u-avatar class="avatar-img" size="40" shape="square"
:src="contact(friendItem.targetId).portraitUrl" />
<view class="info">
<view class="name">{{ contact(friendItem.targetId).name }}</view>
<!-- <view class="address">Hash:{{ friendItem.address }}</view> -->
</view>
</view>
</u-index-item>
</u-checkbox-group>
</u-index-list>
</view>
</template>
<script>
import {
getFriendsLetter,
inviteGroupUser
} from '@/apis/interfaces/im';
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
export default {
data() {
return {
targetId: ''
targetId: '',
indexs: [],
friends: [],
checkboxValue: []
};
},
computed: {
contact() {
return function(targetId) {
return this.$store.getters.contactInfo(targetId)
}
}
},
onLoad(e) {
this.targetId = e.targetId
this.getFriendList()
},
methods: {
getFriendList() {
getFriendsLetter().then(res => {
this.indexs = res.indexList
this.friends = res.itemArr
})
},
addContact(targetId) {
if (!this.checkboxValue.find(item => item == targetId)) {
this.checkboxValue.push(targetId)
} else {
const index = this.checkboxValue.findIndex(item => item == targetId)
this.checkboxValue = this.checkboxValue.splice(index, 1)
}
},
onInvite() {
inviteGroupUser(this.targetId, this.checkboxValue).then(res => {
uni.navigateBack()
}).catch(err => {
uni.showToast({
icon: 'none',
title: err.message
})
})
}
}
}
</script>
<style>
<style lang="scss" scoped>
// 页面空
.pages-null {
height: 70vh;
}
// 好友列表
.friend-flex {
position: relative;
padding: 0 $padding 0 $padding;
display: flex;
flex-direction: row;
align-items: center;
box-sizing: border-box;
.avatar-img {
box-shadow: 0 0 20rpx rgba($color: $main-color, $alpha: 0.2);
}
.info {
flex: 1;
margin-left: $padding;
border-bottom: solid 1rpx #f9f9f9;
height: 120rpx;
line-height: 120rpx;
.name {
font-size: $title-size;
color: #454545 !important;
@extend .nowrap;
}
.address {
color: $text-gray-m;
font-size: $title-size-m - 3;
padding-top: 10rpx;
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 600rpx;
}
}
}
.list-cell {
display: flex;
box-sizing: border-box;
width: 100%;
padding: 10px 24rpx;
overflow: hidden;
color: #323233;
font-size: 14px;
line-height: 24px;
background-color: #fff;
}
</style>

150
pages/im/group/users.vue
View File

@@ -1,164 +1,24 @@
<template>
<view class="members">
<view class="users">
<view class="user" v-if="isAdmin">
<u-avatar @click="inviteUser" size="44" shape="square" icon="plus" bg-color="#eeeeee" color="#999999">
</u-avatar>
<view class="name">邀请好友</view>
</view>
<view :class="['user', {'active': item.targetId == currentUser.targetId}]" @longpress="showAction(item)"
v-for="(item, index) in members" :key="index" @click="toUser(item)">
<u-avatar size="44" shape="square" :src="item.portraitUrl"></u-avatar>
<view class="name">{{ item.name }}</view>
</view>
</view>
<view class="loadmore">成员总数（{{ members.length }}）</view>
<u-action-sheet :actions="userActions" :title="actionTitle" cancelText="取消" @close="hideAction"
@select="doAction" :show="actionShow">
</u-action-sheet>
</view>
<group-user-list :targetId="targetId" />
</template>
<script>
import {
getGroupBase,
getGroupUsers
} from '@/apis/interfaces/im.js'
import groupUserList from '../components/groupUserList'
export default {
components: {
groupUserList
},
data() {
return {
targetId: '',
members: [],
isOwner: false,
isAdmin: false,
actionShow: false,
userActions: [{
type: 0,
name: '设置管理员',
disabled: false
},
{
type: 1,
name: '解除管理员',
disabled: false
},
{
type: 2,
name: '移除成员',
disabled: false
}
],
actionTitle: '',
currentUser: {}
}
},
onLoad(e) {
this.targetId = e.targetId
getGroupBase(this.targetId).then(res => {
this.isOwner = res.is_owner
this.isAdmin = res.is_admin
if (this.isOwner) {
this.userActions.push({
type: 3,
name: '转移群主',
disabled: false
})
}
})
this.getUserList()
},
methods: {
getUserList() {
getGroupUsers(this.targetId).then(res => {
this.members = res
})
},
toUser(item) {
uni.navigateTo({
url: '/pages/im/friends/info?targetId=' + item.targetId
})
},
showAction(item) {
this.currentUser = item
this.actionTitle = item.name
this.actionShow = true
// 根据当前用户，是不是管理，来控制按钮的可用性
this.userActions[0].disabled = true
},
hideAction(item) {
this.actionShow = false
this.actionTitle = ''
this.currentUser = {}
this.userActions[0].disabled = false
this.userActions[1].disabled = false
},
doAction(e) {
switch (e.type) {
case 0:
// 设置管理
break;
case 1:
// 取消管理
break;
case 2:
// 移除成员
break;
case 3:
// 转移管理员
break;
}
this.getUserList()
},
inviteUser() {
}
}
}
</script>
<style lang="scss" scoped>
.members {
background-color: white;
padding-bottom: 40rpx;
.users {
flex-direction: row;
flex-wrap: wrap;
display: flex;
padding: 20rpx 0;
.user {
width: 126rpx;
margin-left: 20rpx;
margin-bottom: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&.active {
background-color: $window-color;
}
.name {
color: $text-gray-m;
width: 126rpx;
text-align: center;
font-size: 26rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-word;
}
}
}
.loadmore {
font-size: 26rpx;
color: $text-gray-m;
text-align: center;
}
}
</style>

29
pages/im/index.vue
View File

@@ -18,10 +18,9 @@
</view>
</view>
</view>
<u-alert type="warning" v-if="connection != 0" description="网络似乎断开了,请检查网络" :show-icon="true" />
<!-- content -->
<view v-if="$store.state.token !== ''">
<view @click="onDemo">临时测试用</view>
<connection-status :connection="connection" />
<conversation-list @refresh="getConversationList()" :conversations="conversations" />
</view>
<!-- 未登录 -->
@@ -40,6 +39,7 @@
import im from '@/utils/im/index.js'
import userAuth from '@/public/userAuth'
import conversationList from './components/conversationList'
import connectionStatus from './components/connectionStatus'
export default {
data() {
@@ -50,20 +50,24 @@
}
},
components: {
conversationList
conversationList,
connectionStatus
},
onLoad() {
// 好友申请数量
this.checkNewFriendPending()
uni.$on('onConnectionStatusChange', (status) => {
this.connection = status
// 监听新的好友申请
uni.$on('onContactNotification', () => {
this.checkNewFriendPending()
})
uni.$on('onContactNotification', this.checkNewFriendPending)
},
onShow() {
if (this.$store.state.token !== '') {
this.getConversationList()
}
uni.$on('onConnectionStatusChange', (status) => {
this.connection = status
})
// 监听新消息
uni.$on('onReceiveMessage', (msg) => {
this.getConversationList()
@@ -97,9 +101,12 @@
getConversationList() {
const count = 1000
const timestamp = 0
RongIMLib.getConversationList([1, 3], count, timestamp, (res) => {
if (res.code === 0) {
this.conversations = res.conversations
RongIMLib.getConversationList([1, 3], count, timestamp, ({
code,
conversations
}) => {
if (code === 0) {
this.conversations = conversations
}
})
},
@@ -137,9 +144,9 @@
<style lang="scss" scoped>
// contents
.contents {
background-color: $window-color;
background-color: #fff;
min-height: 100vh;
padding-top: 90rpx + 20rpx;
padding-top: 90rpx + 6rpx;
box-sizing: border-box;
.custom-header {

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

@@ -10,11 +10,8 @@
<view class="status" v-if="!connected || mediaType == 0">
<view class="remote">
<u-avatar v-if="userInfo.portraitUrl" :src="userInfo.portraitUrl" shape="square" size="96"
bgColor="#fff" />
<u-avatar size="80" v-if="!userInfo.portraitUrl" shape="square"
:text="userInfo.name ? userInfo.name.substring(0,1) : '未'" font-size="44" randomBgColor />
<view><text class="nickname">{{userInfo.name}}</text></view>
<u-avatar :src="contact(targetId).portraitUrl" shape="square" size="96" bgColor="#fff" />
<view><text class="nickname">{{ contact(targetId).name }}</text></view>
<view v-if="remoteRinging"><text class="mediaType">等待对方接听</text></view>
<view v-if="connected"><text class="mediaType">已接通</text></view>
<view v-else><text class="mediaType">{{ mediaType == 0 ? '邀请您语音通话' : '邀请您视频通话' }}</text></view>
@@ -52,17 +49,14 @@
</template>
<script>
import {
getFriendInfo
} from '@/apis/interfaces/im.js'
import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
import * as IMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
export default {
data() {
return {
targetId: '',
mediaType: 0, // 0 语音 1 视频
userInfo: {},
isOut: false,
connected: false,
micStatus: false,
@@ -74,9 +68,9 @@
onLoad(e) {
this.targetId = e.targetId
this.mediaType = e.mediaType
getFriendInfo(this.targetId).then(res => {
this.userInfo = res
})
// 进入页面开启外呼
CallLib.startSingleCall(this.targetId, this.mediaType, '');
// 响铃
this.startRing()
// 监听通话链接状态
uni.$once('onCallConnected', this.onCallConnected)
@@ -87,6 +81,9 @@
uni.$once('onRemoteUserJoined', () => {
this.remoteRinging = false
})
},
beforeDestroy() {
},
computed: {
windowWidth() {
@@ -94,6 +91,11 @@
},
windowHeight() {
return uni.getSystemInfoSync().windowHeight
},
contact() {
return function(targetId) {
return this.$store.getters.contactInfo(targetId)
}
}
},
methods: {
@@ -117,10 +119,8 @@
if (this.mediaType == 1) {
const session = CallLib.getCurrentCallSession()
setTimeout(() => {
CallLib.setVideoView(session.targetId, this.$refs.bigVideoView.ref, 0,
false)
CallLib.setVideoView(session.mine.userId, this.$refs.smallVideoView.ref, 0,
true)
CallLib.setVideoView(session.targetId, this.$refs.bigVideoView.ref, 0, false)
CallLib.setVideoView(session.mine.userId, this.$refs.smallVideoView.ref, 0, true)
}, 200)
}
},
@@ -130,9 +130,7 @@
setTimeout(() => {
this.downRing()
uni.switchTab({
url: '/pages/im/index'
})
uni.navigateBack()
}, 200);
},
toHome() {

61
pages/im/private/chat.nvue → pages/im/private/chat.vue
View File

@@ -1,14 +1,12 @@
<template>
<view class="chat">
<!-- chat -->
<list class="body" :show-scrollbar="false">
<cell class="cell" v-for="(item, index) in messages" :key="index">
<view class="time">
<text class="text">{{ customCN(item.sentTime) }}</text>
</view>
<view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
<u-avatar class="avatar" size="36" shape="square" @click="showUser(targetId, item.messageDirection)"
:src="userInfo.portraitUrl" />
<scroll-view class="body" scroll-y>
<view class="cell" v-for="(item, index) in messages" :key="index">
<view class="time">{{ customCN(item.sentTime) }}</view>
<view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
<u-avatar class="avatar" size="40" shape="square" @click="showUser(targetId, item.messageDirection)"
:src="contact(item.senderUserId).portraitUrl" />
<view class="msg">
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
:msg="item.content" />
@@ -17,13 +15,14 @@
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
:msg="item.content" />
<view class="state" v-if="item.messageDirection == 1">
<text class="state-text">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
<text
:class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
</view>
</view>
</view>
</cell>
<cell class="cell-footer" ref="chatBottom"></cell>
</list>
</view>
<view class="cell-footer" ref="chatBottom"></view>
</scroll-view>
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
</view>
</template>
@@ -62,20 +61,25 @@
},
computed: {
latestMessage() {
if (this.messages.length > 1) {
if (this.messages.length) {
return this.messages[this.messages.length - 1]
} else {
return {
sentTime: 0
}
}
},
contact() {
return function(targetId) {
return this.$store.getters.contactInfo(targetId)
}
}
},
onLoad(e) {
this.targetId = e.targetId
this.userInfo = this.$store.getters.contactInfo(this.targetId)
uni.setNavigationBarTitle({
title: this.userInfo.name
title: this.contact(this.targetId).name
})
// 获取消息列表
this.getMessageList()
@@ -113,6 +117,7 @@
1,
false,
(messages) => {
console.log(messages);
this.messages = this.messages.concat(messages)
this.scrollBottom()
})
@@ -126,6 +131,7 @@
100,
true,
(messages) => {
console.log(messages);
this.messages = messages.reverse()
this.scrollBottom()
})
@@ -164,34 +170,28 @@
/* 窗口 */
.chat {
background: $window-color;
flex: 1;
height: 100vh;
display: flex;
flex-direction: column;
.body {
flex: 1;
overflow: scroll;
.cell {
padding: 10rpx 30rpx;
.time {
justify-content: center;
align-items: center;
padding-bottom: 20rpx;
.text {
background: #fff;
text-align: center;
font-size: 24rpx;
color: #666;
line-height: 40rpx;
padding: 0 20rpx;
border-radius: 10rpx;
}
}
.cell-item {
display: flex;
width: 690rpx;
justify-content: flex-start;
&.left {
flex-direction: row;
}
@@ -212,8 +212,13 @@
padding-top: 10rpx;
.state-text {
font-size: 24rpx;
color: #666;
font-size: $title-size-m - 2;
color: rgba($color: $main-color, $alpha: 0.3)
}
.state-text-active {
font-size: $title-size-m - 2;
color: #cecece;
}
}
}

4
pages/user/index.vue
View File

@@ -260,7 +260,9 @@
success: function() {
uni.showToast({
title: '复制成功',
icon: 'none'
icon: 'none',
mask:true,
duration:2000
})
}
});

3
public/userAuth.js
View File

@@ -109,8 +109,7 @@ class userAuth {
.access_token)
// 在这里，登录成功，链接IM服务
getImToken().then(res => {
console.log('在这获取IM-TOKEN', res);
im.connect(res.token, res.userInfo)
im.connect(res.token, res.userInfo, () => {})
})
resolve()
}).catch(err => {

BIN
static/imgs/copy-333.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

9
store/modules/im.js
View File

@@ -12,6 +12,7 @@ export default {
contactInfo: (state) => (targetId) => {
if (state.contacts[targetId]) {
const info = state.contacts[targetId]
return {
name: info.name,
hash: info.hash,
@@ -21,7 +22,7 @@ export default {
return {
name: '',
hash: '',
portraitUrl: ''
portraitUrl: require('@/static/user/cover.png')
}
}
},
@@ -68,7 +69,6 @@ export default {
// 没有数据，直接新增一条
dispatch('initContact', contactInfo)
} else if (contactInfo.hash != result[0].hash) {
commit('updateContactInfo', contactInfo)
if (contactInfo.portraitUrl && contactInfo.portraitUrl != result[0].portraitUrl) {
saveAvatar(contactInfo, (savedFilePath) => {
const info = {
@@ -80,7 +80,7 @@ export default {
}
model.update('targetId="' + contactInfo.targetId + '"', info, (err,
res) => {
console.log('UPDATE AVATAR, ERR', err);
console.log('UPDATE AVATAR, ERR', err, info);
})
commit('updateContactInfo', info)
})
@@ -93,8 +93,9 @@ export default {
localAvatar: result[0].localAvatar
}
model.update('targetId="' + contactInfo.targetId + '"', info, (err, res) => {
console.log('UPDATE NAME, ERR', err);
console.log('UPDATE NAME, ERR', err, info);
})
commit('updateContactInfo', info)
}
} else {
console.log('updateContact, 无操作');

2
uni.scss
View File

@@ -37,7 +37,7 @@ $uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
$uni-border-color:#c8c7cc;
$uni-border-color:#f9f9f9;
/* 尺寸变量 */

0
lib/emoji.js → utils/emoji.js
View File

131
utils/im/index.js
View File

@@ -12,12 +12,15 @@ import {
const initIm = (KEY) => {
RongIMLib.init(KEY)
// CallLib.init()
addListeners()
CallLib.init()
listeners.imLibListeners()
listeners.callLibListeners()
// 初始化的时候 自动链接
if (store.getters.getToken !== '') {
getImToken().then(res => {
connect(res.token, res.userInfo, () => {})
connect(res.token, res.userInfo, (res) => {
console.log('IM.CONNECT', res);
})
})
}
}
@@ -59,7 +62,7 @@ const connect = (token, userInfo, callback) => {
// 设置未读消息数量
setNotifyBadge()
// 首次运行获取好友列表
const FK = 'ZHK_' + userInfo.targetId
const FK = 'ZHKD_' + userInfo.targetId
uni.getStorage({
key: FK,
@@ -100,125 +103,6 @@ const disconnect = () => {
})
}
// 允许通知的消息类型，触发更新消息列表操作
const notifyMsgTypes = [
'RC:TxtMsg',
'RC:VcMsg',
'RC:HQVCMsg',
'RC:ImgMsg',
'RC:GIFMsg',
'RC:ImgTextMsg',
'RC:FileMsg',
'RC:LBSMsg',
'RC:SightMsg',
'RC:ReferenceMsg',
'RC:CombineMsg',
]
function inArray(search, array) {
for (var i in array) {
if (array[i] == search) {
return true
}
}
return false
}
const addListeners = () => {
// 添加连接状态监听函数
RongIMLib.addConnectionStatusListener((res) => {
console.log('连接状态监听', res.data.status)
uni.$emit('onConnectionStatusChange', res.data.status)
})
// 添加消息监听函数
RongIMLib.addReceiveMessageListener((res) => {
const message = res.data.message
console.log('收到消息', message)
if (inArray(message.objectName, notifyMsgTypes)) {
if (!store.getters.contactIsExist(message.targetId)) {
getUserInfo(message.targetId).then(res => {
store.dispatch('initContact', res)
}).catch(err => {
console.log('ERR', err)
})
}
newMessage(message)
} else if (message.objectName === RongIMLib.ObjectName.ProfileNotification) {
store.dispatch('updateContact', JSON.parse(message.content.data))
// 调用完更新之后，删除这条消息
RongIMLib.deleteMessagesByIds([message.messageId], ({
code
}) => {
console.log('消息删除结果', code)
})
} else if (message.objectName === RongIMLib.ObjectName.ContactNotification) {
// 触发一个新好友的通知事件
uni.$emit('onContactNotification', message.content)
}
})
// 监听消息回执
RongIMLib.addReadReceiptReceivedListener(({
data
}) => {
uni.$emit('onReadReceiptReceived', data)
})
// 音视频通话相关的
// 监听通话呼入
// CallLib.onCallReceived(({
// data
// }) => {
// uni.navigateTo({
// url: '/pages/im/private/call?targetId=' + data.targetId + '&mediaType=' +
// data.mediaType
// })
// })
// // 通话建立成功
// CallLib.onCallConnected(() => {
// uni.$emit('onCallConnected')
// })
// // 外呼
// CallLib.onCallOutgoing((res) => {
// uni.$emit('onCallOutgoing')
// })
// // 远端响铃
// CallLib.onRemoteUserRinging((res) => {
// uni.$emit('onRemoteUserRinging')
// })
// // 远端加入
// CallLib.onRemoteUserJoined((res) => {
// uni.$emit('onRemoteUserJoined')
// })
// // 断开链接
// CallLib.onCallDisconnected((res) => {
// console.log('断开链接', res)
// uni.$emit('onCallDisconnected')
// })
// // 远端挂断
// CallLib.onRemoteUserLeft((res) => {
// console.log('远端离开', res)
// uni.$emit('onRemoteUserLeft')
// })
}
// 维护消息列表，检查是否需要通知声音，设置新消息提醒的数量
const newMessage = (msg) => {
RongIMLib.getConversationNotificationStatus(msg.conversationType, msg.targetId, ({
code,
status
}) => {
if (code === 0) {
if (status) {
uni.vibrateLong()
triTone()
}
}
})
setNotifyBadge()
uni.$emit('onReceiveMessage', msg)
}
// 播放状态
let tipState = false
@@ -240,6 +124,7 @@ const triTone = () => {
export default {
initIm,
connect,
disconnect,
setNotifyBadge,
...message
}

141
utils/im/listeners.js
View File

@@ -0,0 +1,141 @@
import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
import * as IMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import store from '@/store/index.js'
import im from "@/utils/im/index.js"
import utils from '../index.js'
import {
getUserInfo
} from '@/apis/interfaces/im.js'
// 维护消息列表，检查是否需要通知声音，设置新消息提醒的数量
const onReceiveMessage = (message) => {
IMLib.getConversationNotificationStatus(message.conversationType, message.targetId, ({
code,
status
}) => {
if (code === 0) {
if (status) {
// triTone()
}
}
})
im.setNotifyBadge()
uni.$emit('onReceiveMessage', message)
}
// 允许通知的消息类型，触发更新消息列表操作,提示音
const notifyMsgTypes = [
IMLib.ObjectName.Text,
IMLib.ObjectName.File,
IMLib.ObjectName.Image,
IMLib.ObjectName.GIF,
IMLib.ObjectName.Location,
IMLib.ObjectName.Voice,
IMLib.ObjectName.HQVoice,
IMLib.ObjectName.Sight,
IMLib.ObjectName.Text,
IMLib.ObjectName.Text,
IMLib.ObjectName.Text
]
const imLibListeners = () => {
// 添加连接状态监听函数
IMLib.addConnectionStatusListener((res) => {
console.log('连接状态监听', res.data.status)
uni.$emit('onConnectionStatusChange', res.data.status)
})
// 添加消息监听函数
IMLib.addReceiveMessageListener((res) => {
const message = res.data.message
console.error('[收到消息]', message)
if (utils.inArray(message.objectName, notifyMsgTypes)) {
if (!store.getters.contactIsExist(message.targetId)) {
getUserInfo(message.targetId).then(res => {
store.dispatch('initContact', res)
}).catch(err => {
console.error('getUserInfo ERR', err)
})
}
if (!store.getters.contactIsExist(message.senderUserId)) {
getUserInfo(message.senderUserId).then(res => {
store.dispatch('initContact', res)
}).catch(err => {
console.error('getUserInfo ERR', err)
})
}
onReceiveMessage(message)
} else if (message.objectName === IMLib.ObjectName.ProfileNotification) {
// 更新会话信息
store.dispatch('updateContact', JSON.parse(message.content.data))
// 调用完更新之后，删除这条消息
IMLib.deleteMessagesByIds([message.messageId])
} else if (message.objectName === IMLib.ObjectName.ContactNotification) {
// 触发一个新好友的通知事件
uni.$emit('onContactNotification', message)
} else if (message.objectName === IMLib.ObjectName.GroupNotification) {
// 解散群
if (message.content.operation === 'Dismiss') {
IMLib.cleanHistoryMessages(message.conversationType, message.targetId, message.sentTime,
false)
// 解散了就删了吧
IMLib.removeConversation(message.conversationType, message.targetId)
uni.$emit('onGroupDismiss', message.targetId)
}
uni.$emit('onReceiveMessage', message)
}
})
// 监听消息回执
IMLib.addReadReceiptReceivedListener(({
data
}) => {
uni.$emit('onReadReceiptReceived', data)
})
}
const callLibListeners = () => {
// 音视频通话相关的
// 监听通话呼入
CallLib.onCallReceived(({
data
}) => {
console.log('onCallReceived');
uni.navigateTo({
url: '/pages/im/private/call?targetId=' + data.targetId + '&mediaType=' +
data.mediaType
})
})
// 通话建立成功
CallLib.onCallConnected(() => {
uni.$emit('onCallConnected')
})
// 外呼
CallLib.onCallOutgoing((res) => {
console.log('onCallOutgoing', res);
uni.$emit('onCallOutgoing')
})
// 远端响铃
CallLib.onRemoteUserRinging((res) => {
uni.$emit('onRemoteUserRinging')
})
// 远端加入
CallLib.onRemoteUserJoined((res) => {
console.log('远端接听');
uni.$emit('onRemoteUserJoined')
})
// 断开链接
CallLib.onCallDisconnected((res) => {
console.log('断开链接', res)
uni.$emit('onCallDisconnected')
})
// 远端挂断
CallLib.onRemoteUserLeft((res) => {
console.log('远端离开', res)
uni.$emit('onRemoteUserLeft')
})
}
export default {
imLibListeners,
callLibListeners
}

13
utils/im/message.js
View File

@@ -15,7 +15,8 @@ const getMessageList = (conversationType, targetId, timeStamp, count, isForward,
'RC:LBSMsg',
'RC:SightMsg',
'RC:ReferenceMsg',
'RC:CombineMsg'
'RC:CombineMsg',
'RC:GrpNtf'
]
RongIMLib.getHistoryMessagesByTimestamp(
@@ -151,14 +152,15 @@ const sentImage = (conversationType, targetId, imageUrl, user, callback) => {
})
}
const sentGif = (conversationType, targetId, gifUrl, time, callback) => {
const sentGif = (conversationType, targetId, gifUrl, time, user, callback) => {
const msg = {
conversationType: conversationType,
targetId: String(targetId),
content: {
objectName: 'RC:GIFMsg',
local: 'file:///' + plus.io.convertLocalFileSystemURL(gifUrl),
duration: time
duration: time,
userInfo: user
}
}
RongIMLib.sendMediaMessage(msg, {
@@ -177,14 +179,15 @@ const sentGif = (conversationType, targetId, gifUrl, time, callback) => {
})
}
const sendFile = (conversationType, targetId, fileUrl, time, callback) => {
const sendFile = (conversationType, targetId, fileUrl, time, user, callback) => {
const msg = {
conversationType: conversationType,
targetId: String(targetId),
content: {
objectName: 'RC:FileMsg',
local: 'file:///' + plus.io.convertLocalFileSystemURL(fileUrl),
duration: time
duration: time,
userInfo: user
}
}
RongIMLib.sendMediaMessage(msg, {

12
utils/index.js
View File

@@ -1,6 +1,17 @@
import env from './conf/env.js'
export default {
inArray: (search, array) => {
for (var i in array) {
if (array[i] == search) {
return true
}
}
return false
},
rpx2px: (rpx) => {
return rpx / 750 * uni.getSystemInfoSync().windowWidth
},
checkPhone: (phone) => {
let re = /^[0-9]+.?[0-9]*/;
if (phone.length === 11) {
@@ -73,7 +84,6 @@ export default {
let days = Math.abs(currentDate.getTime() - valDate.getTime()) / (1000 * 60 * 60 * 24);
return Math.ceil(days) + '天前';
}
}
},
timeStamp(timestamp, formats) {