This commit is contained in:
2022-02-18 11:50:22 +08:00
17 changed files with 237 additions and 102 deletions

View File

@@ -493,7 +493,7 @@
}, },
{ {
"path": "pages/im/group/reviewed", "path": "pages/im/group/reviewed",
"name": "imGroupInvite", "name": "imGroupReviewed",
"style": { "style": {
"navigationBarTitleText": "群聊邀请确认" "navigationBarTitleText": "群聊邀请确认"
} }

View File

@@ -1,19 +1,23 @@
<template> <template>
<view class="group--chat"> <view class="group--chat">
<list class="body" :show-scrollbar="false"> <scroll-view class="body" :show-scrollbar="false">
<cell class="cell" v-for="(item, index) in messages" :key="index"> <view class="cell" v-for="(item, index) in messages" :key="index">
<view class="cell-system" v-if="item.senderUserId === '__system__'"> <text class="text">{{ item.content.message }}</text> </view> <view class="cell-system" v-if="item.senderUserId === '__system__'">{{ item.content.message }}</view>
<view v-else :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']"> <view v-else :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
<u-avatar class="avatar" @click="toUser(item)" size="36" shape="square" :src="contact(item.senderUserId).portraitUrl" /> <u-avatar class="avatar" @click="toUser(item)" size="36" shape="square"
:src="contact(item.senderUserId).portraitUrl" />
<view class="msg"> <view class="msg">
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1" :msg="item.content" :name="contact(item.senderUserId).name" /> <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
<show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1" :msg="item.content" :name="contact(item.senderUserId).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="contact(item.senderUserId).name" /> <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
:msg="item.content" :name="contact(item.senderUserId).name" />
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
:msg="item.content" :name="contact(item.senderUserId).name" />
</view> </view>
</view> </view>
</cell> </view>
<cell class="cell-footer" ref="chatBottom" /> <view class="cell-footer" ref="chatBottom"></view>
</list> </scroll-view>
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" /> <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
</view> </view>
</template> </template>
@@ -163,24 +167,24 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.group--chat { .group--chat {
background: $window-color; background: $window-color;
flex: 1; height: 100vh;
display: flex;
.body { flex-direction: column;
.body {
overflow: scroll;
flex: 1; flex: 1;
.cell { .cell {
padding: 10rpx 30rpx; padding: 10rpx 30rpx;
.cell-system { .cell-system {
align-items: center; text-align: center;
.text {
font-size: 24rpx;
color: $text-gray-m;
}
} }
.cell-item { .cell-item {
display: flex;
flex-direction: row;
width: 690rpx; width: 690rpx;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;

View File

@@ -1,6 +1,6 @@
<template> <template>
<view> <view>
<u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98"> <!-- <u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
<view class="search"> <view class="search">
<u--input class="search-input" placeholder="搜索" border="none" prefixIcon="search" v-model="searchTxt" <u--input class="search-input" placeholder="搜索" border="none" prefixIcon="search" v-model="searchTxt"
disabledColor="#Fff" prefixIconStyle="font-size: 22px;color: #909399" /> disabledColor="#Fff" prefixIconStyle="font-size: 22px;color: #909399" />
@@ -26,25 +26,49 @@
:src="searchTxt=== '' ? require('@/static/imgs/no-friend.png') :require('@/static/imgs/no-search.png')" :src="searchTxt=== '' ? require('@/static/imgs/no-friend.png') :require('@/static/imgs/no-search.png')"
:lazy-load="true" /> :lazy-load="true" />
<span>{{searchTxt=== ''?'暂无好友列表~':'暂无搜索内容~'}}</span> <span>{{searchTxt=== ''?'暂无好友列表~':'暂无搜索内容~'}}</span>
</view> </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> </u-index-list>
</view> </view>
</template> </template>
<script> <script>
import { import {
getFriendsLetter getFriendsLetter,
inviteGroupUser
} from '@/apis/interfaces/im'; } from '@/apis/interfaces/im';
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index' import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
export default { export default {
data() { data() {
return { return {
// indexs: [],
// friends: [],
// pendingCount: 0,
// searchTxt: '',
// checkboxValue: [],
targetId: '',
indexs: [], indexs: [],
friends: [], friends: [],
pendingCount: 0, checkboxValue: []
searchTxt: '',
checkboxValue: [],
}; };
}, },
computed: { computed: {
@@ -54,39 +78,65 @@
} }
} }
}, },
onLoad() { // onLoad() {
// this.getFriendList()
// this.checkNewFriendPending()
// uni.$on('onContactNotification', this.checkNewFriendPending)
// },
// methods: {
// // group事件
// checkboxChange(n) {
// console.log('change', n);
// },
// getFriendList() {
// getFriendsLetter().then(res => {
// console.log(res)
onLoad(e) {
this.targetId = e.targetId
this.getFriendList() this.getFriendList()
this.checkNewFriendPending()
uni.$on('onContactNotification', this.checkNewFriendPending)
}, },
methods: { methods: {
// group事件
checkboxChange(n) {
console.log('change', n);
},
getFriendList() { getFriendList() {
getFriendsLetter().then(res => { getFriendsLetter().then(res => {
console.log(res)
this.indexs = res.indexList this.indexs = res.indexList
this.friends = res.itemArr this.friends = res.itemArr
}) })
}, },
selectFriend(targetId) { // selectFriend(targetId) {
console.log(targetId,typeof targetId) // console.log(targetId,typeof targetId)
let arr = this.checkboxValue // let arr = this.checkboxValue
let index = arr.findIndex(item => item === targetId) // let index = arr.findIndex(item => item === targetId)
if(index>0){ // if(index>0){
console.log('选择了再次点击清除数据le') // console.log('选择了再次点击清除数据le')
}else{ // }else{
console.log('没有选择过,添加数据') // console.log('没有选择过,添加数据')
} // }
console.log(this.checkboxValue,index) // console.log(this.checkboxValue,index)
console.log('奥克兰打开',targetId) // console.log('奥克兰打开',targetId)
// },
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> </script>

View File

@@ -1,47 +1,72 @@
<!-- 群聊邀请确认列表页面 --> <!-- 群聊邀请确认列表页面 -->
<template> <template>
<view class="reviewed"> <view class="reviewed">
<view class="reviewed-item"> <view class="reviewed-item">
<u-icon name="plus-people-fill" color="#fff" class="add-icon" /> <u-avatar class="avatar" src="require('@/static/user/cover.png')" shape="square" size="44" />
{{`' 艾米的猫儿洛基 '想邀请 1位朋友加入群聊`}} <view style="width: 500rpx;">
<view class="sure"> 去确认 </view> <view class="nickname"><span>艾米的猫儿</span>想邀请<span>艾米的猫儿洛基艾米</span>加入群聊</view>
</view> <view> 申请原因{{`呵呵哒。。`}}</view>
</view>
<view class="sure" @click="sure(2)"> 去确认 </view>
</view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
indexs: [], lists: [],
}; };
}, },
onLoad() { onLoad() {
}, },
methods: { methods: {
sure(id) {
console.log(id, '....')
uni.navigateTo({
url: "/pages/im/group/reviewedInfo?id=" + id
})
}
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.reviewed{ .reviewed {
.reviewed-item{ .reviewed-item {
margin: $padding - 10;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: flex-start;
justify-content: center; justify-content: flex-start;
box-sizing: border-box; box-sizing: border-box;
border-bottom: solid 1rpx #f9f9f9;
.add-icon{ font-size: $title-size-m - 2;
padding-bottom: 20rpx;
color: $text-gray-m;
.avatar {
background-color: $main-color; background-color: $main-color;
padding: 10rpx;
border-radius: 6rpx; border-radius: 6rpx;
margin-right: 20rpx;
}
.nickname{
font-size: $title-size-m;
span{
color: rgba($color: $main-color, $alpha: 0.5);
}
}
.sure {
color: $main-color;
text-align: center;
font-size: $title-size-m;
padding: 6rpx 20rpx;
border-radius: 10rpx;
} }
} }
} }
</style> </style>

View File

@@ -0,0 +1,62 @@
<!-- 群聊邀请确认列表页面 -->
<template>
<view class="reviewed">
确认信息页面
</view>
</template>
<script>
export default {
data() {
return {
lists: [],
};
},
onLoad() {
},
methods: {
sure(id) {
uni.navigateTo({
url:"/pages/im/group/reviewedInfo?id="+id
})
}
}
};
</script>
<style lang="scss" scoped>
.reviewed {
.reviewed-item {
margin: $padding;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
border-bottom: solid 1rpx #f9f9f9;
font-size: $title-size-m;
padding-bottom: 20rpx;
color: $text-gray;
.add-icon {
background-color: $main-color;
padding: 10rpx;
border-radius: 6rpx;
margin-right: 20rpx;
}
.sure {
// width: 140rpx;
// background-color: $main-color;
color: $main-color;
text-align: center;
font-size: $title-size-m;
padding: 6rpx 20rpx;
border-radius: 10rpx;
}
}
}
</style>

View File

@@ -99,7 +99,7 @@
code, code,
conversations conversations
}) => { }) => {
if (code === 0) { if (code === 0) {
this.conversations = conversations this.conversations = conversations
} }
}) })

View File

@@ -10,8 +10,7 @@
<view class="status" v-if="!connected || mediaType == 0"> <view class="status" v-if="!connected || mediaType == 0">
<view class="remote"> <view class="remote">
<u-avatar :src="contact(targetId).portraitUrl" shape="square" size="96" <u-avatar :src="contact(targetId).portraitUrl" shape="square" size="96" bgColor="#fff" />
bgColor="#fff" />
<view><text class="nickname">{{ contact(targetId).name }}</text></view> <view><text class="nickname">{{ contact(targetId).name }}</text></view>
<view v-if="remoteRinging"><text class="mediaType">等待对方接听</text></view> <view v-if="remoteRinging"><text class="mediaType">等待对方接听</text></view>
<view v-if="connected"><text class="mediaType">已接通</text></view> <view v-if="connected"><text class="mediaType">已接通</text></view>
@@ -68,10 +67,10 @@
}, },
onLoad(e) { onLoad(e) {
this.targetId = e.targetId this.targetId = e.targetId
this.mediaType = e.mediaType this.mediaType = e.mediaType
// 进入页面开启外呼 // 进入页面开启外呼
CallLib.startSingleCall(this.targetId, this.mediaType, ''); CallLib.startSingleCall(this.targetId, this.mediaType, '');
// 响铃
this.startRing() this.startRing()
// 监听通话链接状态 // 监听通话链接状态
uni.$once('onCallConnected', this.onCallConnected) uni.$once('onCallConnected', this.onCallConnected)
@@ -92,11 +91,11 @@
}, },
windowHeight() { windowHeight() {
return uni.getSystemInfoSync().windowHeight return uni.getSystemInfoSync().windowHeight
}, },
contact() { contact() {
return function(targetId) { return function(targetId) {
return this.$store.getters.contactInfo(targetId) return this.$store.getters.contactInfo(targetId)
} }
} }
}, },
methods: { methods: {
@@ -120,10 +119,8 @@
if (this.mediaType == 1) { if (this.mediaType == 1) {
const session = CallLib.getCurrentCallSession() const session = CallLib.getCurrentCallSession()
setTimeout(() => { setTimeout(() => {
CallLib.setVideoView(session.targetId, this.$refs.bigVideoView.ref, 0, CallLib.setVideoView(session.targetId, this.$refs.bigVideoView.ref, 0, false)
false) CallLib.setVideoView(session.mine.userId, this.$refs.smallVideoView.ref, 0, true)
CallLib.setVideoView(session.mine.userId, this.$refs.smallVideoView.ref, 0,
true)
}, 200) }, 200)
} }
}, },

View File

@@ -1,9 +1,9 @@
<template> <template>
<view class="chat"> <view class="chat">
<!-- chat --> <!-- chat -->
<list class="body" :show-scrollbar="false"> <scroll-view class="body" scroll-y>
<cell class="cell" v-for="(item, index) in messages" :key="index"> <view class="cell" v-for="(item, index) in messages" :key="index">
<view class="time"> <text class="text">{{ customCN(item.sentTime) }}</text> </view> <view class="time">{{ customCN(item.sentTime) }}</view>
<view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']"> <view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
<u-avatar class="avatar" size="40" shape="square" @click="showUser(targetId, item.messageDirection)" <u-avatar class="avatar" size="40" shape="square" @click="showUser(targetId, item.messageDirection)"
:src="contact(item.senderUserId).portraitUrl" /> :src="contact(item.senderUserId).portraitUrl" />
@@ -15,13 +15,14 @@
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1" <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
:msg="item.content" /> :msg="item.content" />
<view class="state" v-if="item.messageDirection == 1"> <view class="state" v-if="item.messageDirection == 1">
<text :class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text> <text
:class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
</view> </view>
</view> </view>
</view> </view>
</cell> </view>
<cell class="cell-footer" ref="chatBottom" /> <view class="cell-footer" ref="chatBottom"></view>
</list> </scroll-view>
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" /> <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
</view> </view>
</template> </template>
@@ -78,7 +79,7 @@
this.targetId = e.targetId this.targetId = e.targetId
this.userInfo = this.$store.getters.contactInfo(this.targetId) this.userInfo = this.$store.getters.contactInfo(this.targetId)
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: this.userInfo.name title: this.contact(this.targetId).name
}) })
// //
this.getMessageList() this.getMessageList()
@@ -169,31 +170,25 @@
/* 窗口 */ /* 窗口 */
.chat { .chat {
background: $window-color; background: $window-color;
flex: 1; height: 100vh;
display: flex;
flex-direction: column;
.body { .body {
flex: 1; flex: 1;
overflow: scroll;
.cell { .cell {
padding: 10rpx 30rpx; padding: 10rpx 30rpx;
.time { .time {
justify-content: center; text-align: center;
align-items: center; font-size: 24rpx;
padding-bottom: 20rpx; color: #666;
.text {
background: #fff;
font-size: 24rpx;
color: #666;
line-height: 40rpx;
padding: 0 20rpx;
border-radius: 10rpx;
}
} }
.cell-item { .cell-item {
display: flex;
width: 690rpx; width: 690rpx;
justify-content: flex-start; justify-content: flex-start;
@@ -223,7 +218,7 @@
.state-text-active { .state-text-active {
font-size: $title-size-m - 2; font-size: $title-size-m - 2;
color: #cecece; color: #cecece;
} }
} }
} }

View File

@@ -18,7 +18,9 @@ const initIm = (KEY) => {
// 初始化的时候 自动链接 // 初始化的时候 自动链接
if (store.getters.getToken !== '') { if (store.getters.getToken !== '') {
getImToken().then(res => { getImToken().then(res => {
connect(res.token, res.userInfo, () => {}) connect(res.token, res.userInfo, (res) => {
console.log('IM.CONNECT', res);
})
}) })
} }
} }