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

群组聊天的基础功能，nvue

Browse Source
This commit is contained in:
Jason.Chen
2022-02-10 16:46:23 +08:00
parent 13aed4abf5
commit 8656ddef55
19 changed files with 361 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

54
apis/interfaces/im.js
View File

@@ -92,55 +92,10 @@ const pedingFriend = (recipient) => {
})
}
/**
* 好友申请数量
*/
const getPendingCount = () => {
// 以下是群组相关业务的接口
const getMyGroups = () => {
return request({
url: 'im/friends/pending/count'
})
}
/**
* 上传聊天附件
* 图片
* 语音
* 视频
*/
// 基础配置
const config = {
apiUrl: 'http://api.zh.shangkelian.cn/api/', // 正式环境
timeout: 60000
}
const uploadMessageFile = (file, type) => {
config.header = {
'Accept': 'application/json',
'Authorization': store.getters.getToken || ''
}
return new Promise((resolve, reject) => {
uni.uploadFile({
url: config.apiUrl + 'im/upload',
filePath: file,
name: 'upload',
formData: {
type
},
header: config.header || {},
success: (res) => {
if (res.statusCode === 200) {
let updData = JSON.parse(res.data)
if (updData.status_code === 200) {
resolve(updData.data)
} else {
reject(updData)
}
}
},
fail: (err) => {
console.log('ERR', err);
}
})
url: 'im/groups'
})
}
@@ -156,6 +111,5 @@ export {
rejectFriend,
searchFriend,
pedingFriend,
getPendingCount,
uploadMessageFile
getMyGroups
}

62
pages.json
View File

@@ -373,6 +373,15 @@
"navigationStyle": "custom"
}
},
{
"path": "pages/im/private/chat",
"style": {
"disableScroll": true,
"navigationBarTitleText": "聊天",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#F3F6FB"
}
},
{
"path": "pages/im/private/call",
"name": "imPrivateCall",
@@ -431,11 +440,54 @@
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/im/group/index",
"name": "imGroups",
"style": {
"navigationBarTitleText": "我的群聊",
"app-plus": {
"titleNView": {
"type": "default",
"buttons": [{
"float": "right",
"fontSrc": "/static/iconfont.ttf",
"text": "\ue60a",
"fontSize": "20px"
}]
}
}
}
},
{
"path": "pages/im/group/chat",
"name": "imGroupChat",
"style": {
"navigationBarTitleText": "我的群聊"
"navigationBarTitleText": "群聊",
"app-plus": {
"titleNView": {
"type": "default",
"buttons": [{
"float": "right",
"fontSrc": "/static/iconfont.ttf",
"text": "\ue607",
"fontSize": "20px"
}]
}
}
}
},
{
"path": "pages/im/group/info",
"name": "imGroupInfo",
"style": {
"navigationBarTitleText": "群信息"
}
},
{
"path": "pages/im/group/create",
"name": "imGroupCreate",
"style": {
"navigationBarTitleText": "创建群聊"
}
},
{
@@ -548,14 +600,6 @@
"navigationBarBackgroundColor": "#34CE98",
"navigationBarTextStyle": "white"
}
}, {
"path": "pages/im/private/chat",
"style": {
"disableScroll": true,
"navigationBarTitleText": "聊天",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#F3F6FB"
}
}
],
"tabBar": {

156
pages/im/components/conversationGroup.vue
View File

@@ -1,156 +0,0 @@
<template>
<view>
<view v-for="(item, index) in conversations" :key="index" :class="['message', { 'is-top': item.isTop }]"
:data-item="item" @longpress="onLongPress" @click="toDetail(item)">
<message-cell :item="item" />
</view>
<view class="shade" @click="hidePop" v-show="showPop">
<view class="pop" :style="popStyle" :class="{'show':showPop}">
<view v-for="(item, index) in popButton" :key="index" @click="pickerMenu" :data-index="index">
{{item}}
</view>
</view>
</view>
</view>
</template>
<script>
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import im from '@/utils/im/index.js'
import messageCell from './messageCell'
export default {
props: {
conversations: {
type: Array,
default: function() {
return []
}
}
},
components: {
messageCell
},
data() {
return {
/* 窗口尺寸 */
winSize: {},
/* 显示操作弹窗 */
showPop: false,
/* 弹窗按钮列表 */
popButton: ['置顶聊天', '删除该聊天'],
/* 弹窗定位样式 */
popStyle: "",
pickedItem: {},
}
},
methods: {
// 隐藏功能菜单
hidePop() {
this.showPop = false
this.pickedItem = {}
setTimeout(() => {
this.showShade = false
}, 250)
},
// 点击会话功能菜单
pickerMenu(e) {
const index = Number(e.currentTarget.dataset.index)
if (index == 0) {
RongIMLib.setConversationToTop(this.pickedItem.conversationType, this.pickedItem.targetId, !this
.pickedItem.isTop)
} else {
RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
RongIMLib.deleteMessages(this.pickedItem.conversationType, this.pickedItem.targetId)
}
this.$emit('refresh')
im.setNotifyBadge()
this.hidePop()
},
// 长按会话，展示功能菜单
onLongPress(e) {
let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item]
if (touches.clientY > (this.winSize.height / 2)) {
style = `bottom:${this.winSize.height-touches.clientY}px;`
} else {
style = `top:${touches.clientY}px;`
}
if (touches.clientX > (this.winSize.witdh / 2)) {
style += `right:${this.winSize.witdh-touches.clientX}px`
} else {
style += `left:${touches.clientX}px`
}
this.popButton[0] = item.isTop ? '取消置顶' : '置顶聊天'
this.popStyle = style
this.pickedItem = item
this.$nextTick(() => {
setTimeout(() => {
this.showPop = true;
}, 10)
})
},
toDetail(item) {
uni.navigateTo({
url: '/pages/im/group/chat?targetId=' + item.targetId
})
this.hidePop()
}
}
}
</script>
<style lang="scss" scoped>
.message {
background: white;
&.is-top {
background: $window-color;
}
}
/* 遮罩 */
.shade {
position: fixed;
width: 100%;
height: 100%;
.pop {
position: fixed;
z-index: 101;
width: 200rpx;
box-sizing: border-box;
font-size: 28rpx;
text-align: left;
color: #333;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
line-height: 80rpx;
transition: transform 0.15s ease-in-out 0s;
user-select: none;
-webkit-touch-callout: none;
transform: scale(0, 0);
&.show {
transform: scale(1, 1);
}
&>view {
padding: 0 20rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
user-select: none;
-webkit-touch-callout: none;
&:active {
background-color: #f3f3f3;
}
}
}
}
</style>

28
pages/im/components/conversationPrivate.vue → pages/im/components/conversationList.vue
View File

@@ -29,6 +29,9 @@
}
}
},
components: {
messageCell
},
data() {
return {
/* 窗口尺寸 */
@@ -42,16 +45,7 @@
pickedItem: {},
}
},
components: {
messageCell
},
computed: {
contact() {
return function(targetId) {
return this.$store.getters.contactInfo(targetId)
}
}
},
methods: {
// 隐藏功能菜单
hidePop() {
@@ -100,12 +94,18 @@
}, 10)
})
},
// 进入聊天的详情页面，清理未读消息数量
toDetail(item) {
if (item.conversationType == 1) {
uni.navigateTo({
url: '/pages/im/private/chat?targetId=' + item.targetId
})
} else if (item.conversationType == 3) {
uni.navigateTo({
url: '/pages/im/group/chat?targetId=' + item.targetId
})
}
this.hidePop()
uni.navigateTo({
url: '/pages/im/private/chat?targetId=' + item.targetId
})
}
}
}

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

@@ -6,7 +6,7 @@
<u-badge max="99" absolute :offset="[23, 20]" :value="pendingCount" />
<view class="info">新的朋友</view>
</view>
<view class="friend-flex" @click="showToast">
<view class="friend-flex" @click="toGroup">
<u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_00.png')"></u-avatar>
<view class="info">我的群聊</view>
</view>
@@ -16,10 +16,10 @@
</u-index-anchor>
<view v-for="(friendItem, index) in item" :key="index" class="friend-flex u-border-bottom"
@click="toFriend(friendItem.userId)">
<u-avatar size="40" shape="square" :src="contact(friendItem.userId).portraitUrl" />
@click="toFriend(friendItem.targetId)">
<u-avatar size="40" shape="square" :src="contact(friendItem.targetId).portraitUrl" />
<view class="info">
<view class="name">{{ contact(friendItem.userId).name }}</view>
<view class="name">{{ contact(friendItem.targetId).name }}</view>
<view class="address">{{ friendItem.address }}</view>
</view>
</view>
@@ -82,11 +82,13 @@
}
})
},
showToast() {
uni.showToast({
title: '群聊功能暂未开放，敬请期待',
icon: 'none'
});
toGroup() {
uni.navigateTo({
url: '/pages/im/group/index',
fail(err) {
console.log(err);
}
})
},
toFriend(targetId) {
uni.navigateTo({
@@ -138,6 +140,5 @@
font-size: $title-size-m - 5;
}
}
}
</style>

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

@@ -110,7 +110,7 @@
getFriendInfo(e.targetId).then(res => {
this.userInfo = res
// 获取到用户信息之后，去检查一下要不要更新
this.$store.dispatch('updateFriend', res)
this.$store.dispatch('updateContact', res)
uni.setNavigationBarTitle({
title: res.name
})

22
pages/im/group/chat.nvue
View File

@@ -3,7 +3,7 @@
<list class="body" :show-scrollbar="false">
<cell class="cell" v-for="(item, index) in messages" :key="index">
<view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
<u-avatar class="avatar" size="36" text="Ad" />
<u-avatar class="avatar" size="36" shape="square" :src="item.content.userInfo.portraitUrl" />
<view class="msg">
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
:msg="item.content" :name="item.content.userInfo.name" />
@@ -38,26 +38,38 @@
showVoice,
showImage,
showText,
sentMessageBar
sentMessageBar,
},
data() {
return {
targetId: '',
conversationType: 3,
messages: []
messages: [],
groupInfo: {
name: ''
}
}
},
onLoad(e) {
this.targetId = e.targetId
this.groupInfo = this.$store.getters.contactInfo(this.targetId)
uni.setNavigationBarTitle({
title: this.groupInfo.name
})
this.getMessageList()
uni.$on('onReceiveGroupMessage', (msg) => {
uni.$on('onReceiveMessage', (msg) => {
if (msg.targetId == this.targetId) {
this.getMessageList()
}
})
},
onBackPress() {
uni.$off('onReceiveGroupMessage')
uni.$off('onReceiveMessage')
},
onNavigationBarButtonTap() {
uni.navigateTo({
url: '/pages/im/group/info'
})
},
methods: {
// 获取消息列表

23
pages/im/group/create.nvue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<view>
</view>
</template>
<script>
export default {
data() {
},
onLoad() {
},
methods: {
}
}
</script>
<style>
</style>

79
pages/im/group/index.nvue Normal file
View File

@@ -0,0 +1,79 @@
<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="info">
<view class="name">{{ item.name }}</view>
</view>
</view>
</view>
</template>
<script>
import {
getMyGroups
} from '@/apis/interfaces/im.js'
export default {
data() {
return {
groups: []
}
},
computed: {
contact() {
return function(targetId) {
return this.$store.getters.contactInfo(targetId)
}
}
},
onNavigationBarButtonTap() {
uni.navigateTo({
url: 'pages/im/group/create'
})
},
onLoad() {
getMyGroups().then((res) => {
this.groups = res
res.map(item => {
this.$store.dispatch('updateContact', item)
})
})
},
methods: {
toGroup(targetId) {
uni.navigateTo({
url: '/pages/im/group/chat?targetId=' + targetId
})
}
}
}
</script>
<style lang="scss" scoped>
// 好友列表
.friend-flex {
position: relative;
padding: 20rpx $padding;
display: flex;
flex-direction: row;
align-items: center;
.info {
flex: 1;
margin-left: $padding;
.name {
font-size: $title-size + 2;
font-size: $title-size + 2;
color: #454545 !important;
}
.address {
color: $text-gray-m;
font-size: $title-size-m - 5;
}
}
}
</style>

33
pages/im/group/info.nvue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<view>
<view class="">
</view>
<view>
查看更多群成员
</view>
群聊名称
群公告
<view class="">
置顶
</view>
<view class="">
免打扰
</view>
清空聊天记录
删除并退出
解散群聊
</view>
</template>
<script>
export default {
}
</script>
<style>
</style>

195
pages/im/index.vue
View File

@@ -5,20 +5,13 @@
<view class="custom-header">
<view class="header-flex">
<view class="tabs">
<view :class="['item', {'active': showType == 0}]" @click="showPrivate">
私聊
<u-badge absolute max="99" shape="horn" :offset="[-7, -7]" :value="privateUnread" />
</view>
<view :class="['item', {'active': showType == 1}]" @click="showGroup">
群聊
<u-badge absolute max="99" shape="horn" :offset="[-7, -7]" :value="groupUnread" />
</view>
<view class="item active">聊聊</view>
</view>
<view class="btns">
<view class="item" @click="scanQrCode">
<uni-icons color="#555" type="scan" size="22" />
</view>
<view class="item" @click="onNav('imFriends', {})">
<view class="item" @click="toFriendList">
<u-badge absolute max="99" :offset="[-5, -5]" :value="hasNewFriends" />
<uni-icons color="#555" custom-prefix="iconfont" type="icon-tuandui" size="22" />
</view>
@@ -28,10 +21,7 @@
<u-alert type="warning" v-if="connection != 0" description="网络似乎断开了,请检查网络" :show-icon="true" />
<!-- content -->
<view v-if="$store.state.token !== ''">
<conversation-private v-show="showType == 0" @refresh="getPrivateConversationList()"
:conversations="conversations" />
<conversation-group v-show="showType == 1" @refresh="getGroupConversationList()"
:conversations="groupConversations" />
<conversation-list @refresh="getConversationList()" :conversations="conversations" />
</view>
<!-- 未登录 -->
<view v-else class="vertical null-list">
@@ -48,24 +38,18 @@
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import im from '@/utils/im/index.js'
import userAuth from '@/public/userAuth'
import conversationPrivate from './components/conversationPrivate'
import conversationGroup from './components/conversationGroup'
import conversationList from './components/conversationList'
export default {
data() {
return {
showType: 1, // 0 单聊，1 群聊
conversations: [], // 会话列表
groupConversations: [],
connection: 0,
privateUnread: 0,
groupUnread: 0,
hasNewFriends: 0
}
},
components: {
conversationPrivate,
conversationGroup
conversationList
},
onLoad() {
// 好友申请数量
@@ -77,48 +61,17 @@
},
onShow() {
if (this.$store.state.token !== '') {
this.getPrivateConversationList()
this.getGroupConversationList()
this.getConversationList()
}
console.log('开始监听');
// 监听新消息
uni.$on('onReceivePrivateMessage', (msg) => {
this.getPrivateConversationList()
})
uni.$on('onReceiveGroupMessage', (msg) => {
this.getGroupConversationList()
uni.$on('onReceiveMessage', (msg) => {
this.getConversationList()
})
},
onHide() {
uni.$off('onReceivePrivateMessage')
uni.$off('onReceiveGroupMessage')
console.log('index 隐藏');
},
onNavigationBarButtonTap(e) {
if (e.index == 0) {
uni.showToast({
title: '开发中暂未开放，敬请期待',
icon: 'none'
})
}
if (e.index == 1) {
if (this.toLogin()) {
this.$Router.push({
name: 'imFriends'
})
}
}
uni.$off('onReceiveMessage')
},
methods: {
showPrivate() {
console.log('切换到单聊');
this.showType = 0
},
showGroup() {
console.log('切换到群聊');
this.showType = 1
},
checkNewFriendPending() {
// 获取是否有新的好友申请
RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], 1000, 0, (res) => {
@@ -139,41 +92,16 @@
return true
},
// 获取私聊的会话列表
getPrivateConversationList() {
getConversationList() {
const count = 1000
const timestamp = 0
RongIMLib.getConversationList([RongIMLib.ConversationType.PRIVATE], count, timestamp, (res) => {
RongIMLib.getConversationList([1, 3], count, timestamp, (res) => {
if (res.code === 0) {
this.conversations = res.conversations
console.log(res.conversations);
}
})
},
// 获取群组会话列表
getGroupConversationList() {
const count = 1000
const timestamp = 0
RongIMLib.getConversationList([RongIMLib.ConversationType.GROUP], count, timestamp, (res) => {
if (res.code === 0) {
this.groupConversations = res.conversations
}
})
},
// 点击按钮
onNav(name, params) {
if (this.toLogin) {
if (name === '') {
uni.showToast({
title: '开发中，敬请期待',
icon: 'none'
})
return
}
this.$Router.push({
name,
params
})
}
},
// 调起扫码
scanQrCode() {
uni.scanCode({
@@ -186,62 +114,17 @@
}
}
})
},
toFriendList() {
uni.navigateTo({
url: '/pages/im/friends/index'
})
}
}
}
</script>
<style lang="scss" scoped>
// header
.custom-header {
@extend .ios-top;
background: $window-color;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
.header-flex {
padding: 20rpx $padding;
display: flex;
justify-content: space-between;
height: 60rpx;
line-height: 60rpx;
.tabs {
.item {
position: relative;
margin-left: $margin;
display: inline-block;
font-size: $title-size-lg;
color: $text-gray;
padding: 0 ($padding - 10);
border-radius: 30rpx;
&:first-child {
margin: 0;
}
&.active {
background: rgba($color: $main-color, $alpha: .1);
color: $main-color;
font-weight: bold;
}
}
}
.btns {
.item {
position: relative;
display: inline-block;
margin-left: $margin;
}
}
}
}
// contents
.contents {
background-color: $window-color;
@@ -249,6 +132,50 @@
padding-top: 90rpx + 20rpx;
box-sizing: border-box;
.custom-header {
@extend .ios-top;
background: $window-color;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
.header-flex {
padding: 20rpx $padding;
display: flex;
justify-content: space-between;
height: 60rpx;
line-height: 60rpx;
.tabs {
.item {
position: relative;
display: inline-block;
font-size: $title-size-lg;
color: $text-gray;
padding: 0 ($padding - 10);
border-radius: 30rpx;
&.active {
background: rgba($color: $main-color, $alpha: .1);
color: $main-color;
font-weight: bold;
}
}
}
.btns {
.item {
position: relative;
display: inline-block;
margin-left: $margin;
}
}
}
}
.null-list {
height: 100vh;
text-align: center;

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

@@ -7,8 +7,7 @@
<text class="text">{{ customCN(item.sentTime) }}</text>
</view>
<view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
<image class="avatar" :src="userInfo.portraitUrl" mode="aspectFill"
@click="showUser(targetId, item.messageDirection)"></image>
<u-avatar class="avatar" size="36" shape="square" @click="showUser(targetId, item.messageDirection)" :src="userInfo.portraitUrl" />
<view class="msg">
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
:msg="item.content" />
@@ -75,12 +74,15 @@
}
})
// 监听收到新消息，判断是否是当前会话，更新会话内容
uni.$on('onReceivePrivateMessage', (msg) => {
uni.$on('onReceiveMessage', (msg) => {
if (msg.targetId == this.targetId) {
this.getMessageList()
}
})
},
onBackPress() {
uni.$off('onReceiveMessage')
},
methods: {
customCN(val) {
return timeCustomCN(val)
@@ -170,13 +172,6 @@
}
}
.avatar {
width: 78rpx;
height: 78rpx;
background-color: white;
border-radius: 10rpx;
}
.msg {
margin: 0 20rpx;

10
router/index.js
View File

@@ -16,7 +16,17 @@ const ROUTES = [{
},{
'path': '/pages/im/group/chat',
'name': 'imGroupChat'
},{
'path': '/pages/im/group/info',
'name': 'imGroupInfo'
},{
'path': '/pages/im/group/index',
'name': 'imGroups'
},{
'path': '/pages/im/group/create',
'name': 'imGroupCreate'
}]
// #endif
const router = createRouter({

6
static/iconfont.css
View File

@@ -1,6 +1,6 @@
@font-face {
font-family: "iconfont"; /* Project id 2869797 */
src: url('@/static/iconfont.ttf') format('truetype');
src: url('@/static/iconfont.ttf') format('truetype'),
}
.iconfont {
@@ -11,6 +11,10 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-jia:before {
content: "\e60a";
}
.icon-dui:before {
content: "\e609";
}

BIN
static/iconfont.ttf
View File

Binary file not shown.

13
store/modules/im.js
View File

@@ -12,6 +12,7 @@ export default {
contactInfo: (state) => (targetId) => {
if (state.contacts[targetId]) {
const info = state.contacts[targetId]
console.log(targetId, info);
return {
name: info.name,
@@ -60,11 +61,15 @@ export default {
},
// 更新好友信息，这个时候要校验hash值了
updateContact({
commit
commit,
dispatch
}, contactInfo) {
const model = uni.model.contactModel
model.find('targetId=' + contactInfo.targetId, (err, result) => {
if (contactInfo.hash != result[0].hash) {
model.find('targetId="' + contactInfo.targetId + '"', (err, result) => {
if (result.length == 0) {
// 没有数据，直接新增一条
dispatch('initContact', contactInfo)
} else if (contactInfo.hash != result[0].hash) {
commit('updateContactInfo', contactInfo)
if (contactInfo.portraitUrl && contactInfo.portraitUrl != result[0].portraitUrl) {
saveAvatar(contactInfo, (savedFilePath) => {
@@ -86,7 +91,7 @@ export default {
portraitUrl: contactInfo.portraitUrl,
localAvatar: result[0].localAvatar
}
model.update('targetId=' + contactInfo.targetId, info, (err, res) => {})
model.update('targetId="' + contactInfo.targetId + '"', info, (err, res) => {})
}
} else {}
})

9
utils/im/index.js
View File

@@ -58,7 +58,7 @@ const connect = (token, userInfo, callback) => {
// 设置未读消息数量
setNotifyBadge()
// 首次运行获取好友列表
const FK = 'IFTJ_' + userInfo.targetId
const FK = 'IFT_' + userInfo.targetId
uni.getStorage({
key: FK,
@@ -207,16 +207,13 @@ const newMessage = (msg) => {
}) => {
if (code === 0) {
if (status) {
uni.vibrateLong()
triTone()
}
}
})
setNotifyBadge()
if (msg.conversationType === RongIMLib.ConversationType.PRIVATE) {
uni.$emit('onReceivePrivateMessage', msg)
} else {
uni.$emit('onReceiveGroupMessage', msg)
}
uni.$emit('onReceiveMessage', msg)
}
// 播放状态