This commit is contained in:
2022-01-28 11:41:13 +08:00
11 changed files with 961 additions and 859 deletions

View File

@@ -4,7 +4,9 @@
<view>
<view class="friend-flex u-border-bottom" @click="toPending">
<u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_01.png')"></u-avatar>
<view class="name">新的朋友</view>
<view class="name">
新的朋友 ({{ pendingCount }})
</view>
</view>
<view class="friend-flex" @click="showToast">
<u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_00.png')"></u-avatar>
@@ -22,7 +24,8 @@
<u-index-anchor :text="indexs[friend]" bgColor="#F3F6FB" height="20" size="12" color="#666">
</u-index-anchor>
<!-- #endif -->
<view v-for="(friendItem, index) in item" :key="friendItem.userId" class="friend-flex u-border-bottom"
<view v-for="(friendItem, index) in item" :key="friendItem.userId"
class="friend-flex u-border-bottom"
@click="$Router.push({ name: 'imFriendsInfo', params: { targetId: friendItem.userId } })">
<block v-if="friendItem.portraitUrl != ''">
<u-avatar class="cover" size="40" shape="square" :src="friendItem.portraitUrl || ''"
@@ -47,24 +50,29 @@
<script>
import {
getFriends
getFriends,
getPendingCount
} from '@/apis/interfaces/im';
export default {
data() {
return {
indexs: [],
friends: []
friends: [],
pendingCount: 0
};
},
onShow() {
getFriends().then(res => {
this.indexs = res.indexList;
this.friends = res.itemArr;
});
this.indexs = res.indexList
this.friends = res.itemArr
})
getPendingCount().then(res => {
console.log(res);
this.pendingCount = res
})
},
computed: {},
methods: {
// 扫码提示
showToast() {
uni.showToast({
title: '群聊功能暂未开放,敬请期待',

View File

@@ -104,7 +104,8 @@
callShow: false
}
},
onLoad(e) {
onLoad(e) {
console.log(e);
this.targetId = e.targetId
getFriendInfo(e.targetId).then(res => {
this.userInfo = res
@@ -243,16 +244,14 @@
})
},
singleCall(e) {
CallLib.startSingleCall(this.targetId, e.type, '');
uni.redirectTo({
url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' + e.type,
success: (err) => {
console.log('跳转视频通话成功');
},
fail: (err) => {
console.log('跳转视频页失败', err);
}
uni.showToast({
icon: 'none',
title: '功能正在开发中'
})
// CallLib.startSingleCall(this.targetId, e.type, '');
// uni.redirectTo({
// url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' + e.type
// })
}
}
}

View File

@@ -1,183 +1,191 @@
<template>
<view class="content">
<!-- 用户信息 -->
<view class="info-flex">
<u-avatar
:src="infoObj.portraitUrl"
shape="square"
size="50"
bg-color="#fff"
></u-avatar>
<view class="info-text">
<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>HASH</label>
<view class="text">{{infoObj.hash}}</view>
</view>
</view>
<!-- 二维码 -->
<view class="info-code">
<uqrcode class="info-code-src" :size="198" ref="uQRCode" text="qrContent" />
<view class="info-code-text">
<view>ZH-HEALTH扫一扫上面的二维码</view>
<view>添加我的好友</view>
</view>
</view>
</view>
</template>
<script>
import { getUserInfo } from '@/apis/interfaces/im'
export default{
data(){
return{
infoObj: {
userId : '',
username : '',
name : '',
address : '',
portraitUrl : '',
gender : 0,
hash : ''
},
qrContent: 'ADDFRIEND|'
}
},
onLoad(e){
console.log(e)
},
mounted() {
getUserInfo(this.$Route.query.targetId).then(res => {
this.infoObj = res
this.qrContent += res.userId
console.log(this.infoObj)
})
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.content{
background: $window-color;
min-height: 100vh;
padding-top: $padding;
box-sizing: border-box;
.info-code{
background: white;
margin: 0 $margin;
border-radius: $radius;
padding: $padding*3 $padding $padding;
text-align: center;
&-src{
display: inline-block;
}
&-text{
text-align: center;
color: $text-gray;
font-size: $title-size-sm;
line-height: 40rpx;
padding: $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;
}
.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{
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;
}
}
}
<template>
<view class="content">
<!-- 用户信息 -->
<view class="info-flex">
<u-avatar :src="infoObj.portraitUrl" shape="square" size="50" bg-color="#fff"></u-avatar>
<view class="info-text">
<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>HASH</label>
<view class="text">{{infoObj.hash}}</view>
</view>
</view>
<!-- 二维码 -->
<view class="info-code">
<uqrcode class="info-code-src" :size="198" ref="uQRCode" :text="qrContent" />
<view class="info-code-text">
<view>ZH-HEALTH扫一扫上面的二维码</view>
<view>添加我的好友</view>
</view>
</view>
</view>
</template>
<script>
import {
getUserInfo
} from '@/apis/interfaces/im'
export default {
data() {
return {
infoObj: {
userId: '',
username: '',
name: '',
address: '',
portraitUrl: '',
gender: 0,
hash: ''
},
qrContent: 'ADDFRIEND|'
}
},
onLoad(e) {},
mounted() {
getUserInfo(this.$Route.query.targetId).then(res => {
this.infoObj = res
this.qrContent += res.userId
})
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.content {
background: $window-color;
min-height: 100vh;
padding-top: $padding;
box-sizing: border-box;
.info-code {
background: white;
margin: 0 $margin;
border-radius: $radius;
padding: $padding*3 $padding $padding;
text-align: center;
&-src {
display: inline-block;
}
&-text {
text-align: center;
color: $text-gray;
font-size: $title-size-sm;
line-height: 40rpx;
padding: $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;
}
.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 {
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;
}
}
}
}
</style>

View File

@@ -56,7 +56,7 @@
{{item}}
</view>
</view>
</view>
</view>
</block>
</view>
<!-- 未登录 -->
@@ -74,7 +74,9 @@
import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
import im from '@/utils/im/index.js'
import userAuth from '@/public/userAuth'
import { getImToken } from '@/apis/interfaces/im.js'
import {
getImToken
} from '@/apis/interfaces/im.js'
export default {
data() {
return {
@@ -99,13 +101,20 @@
}
}
},
onLoad() {
if (this.isShown) {
uni.$on('onReceiveMessage', (msg) => {
console.log(msg);
this.getConversationList()
})
uni.$on('onConnectionStatusChange', (status) => {
this.connection = status
})
}
},
onShow() {
if (this.$store.state.token !== '') {
getImToken().then(res => {
im.connect(res.token, res.userInfo, () => {
this.getConversationList()
})
})
this.getConversationList()
}
this.isShown = true
},
@@ -127,16 +136,6 @@
}
}
},
watch: {
'$store.getters.newMessage': function(n, o) {
if (this.isShown) {
this.getConversationList()
}
},
'$store.getters.connection': function(n, o) {
this.connection = n
}
},
methods: {
hidePop() {
this.showPop = false
@@ -202,9 +201,6 @@
// 进入聊天的详情页面,清理未读消息数量
toDetail(item) {
this.hidePop()
// uni.navigateTo({
// url: '/pages/im/private/call?targetId=' + item.targetId + '&mediaType=1'
// })
uni.navigateTo({
url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
.conversationType
@@ -229,10 +225,8 @@
scanQrCode() {
uni.scanCode({
success: (res) => {
// "result": "ADDFRIEND|10010",
if (res.scanType == 'QR_CODE') {
res.result.substr(0, 10) == 'ADDFRIEND|'
// 跳转到添加好友页面
uni.navigateTo({
url: '/pages/im/friends/info?targetId=' + res.result.substr(10)
})

View File

@@ -123,6 +123,18 @@
console.log('------------------获取到了录音的临时路径---------------')
console.log(res.tempFilePath)
})
// 简童收到新消息,判断是否是当前会话,更新会话内容
uni.$on('onReceiveMessage', (msg) => {
if (msg.targetId == this.targetId) {
RongIMLib.clearMessagesUnreadStatus(msg.conversationType, msg.targetId, msg.sentTime)
RongIMLib.sendReadReceiptMessage(msg.conversationType, msg.targetId, msg.sentTime)
this.getMessageList()
im.setNotifyBadge()
}
})
},
beforeDestroy() {
uni.$off('onReceiveMessage')
},
onUnload() {
RongIMLib.clearReadReceiptReceivedListener()
@@ -146,16 +158,6 @@
})
}
},
watch: {
'$store.getters.newMessage': function(msg) {
if (msg.targetId == this.targetId) {
RongIMLib.clearMessagesUnreadStatus(msg.conversationType, msg.targetId, msg.sentTime)
RongIMLib.sendReadReceiptMessage(msg.conversationType, msg.targetId, msg.sentTime)
this.getMessageList()
im.setNotifyBadge()
}
}
},
methods: {
// 播放语音消息
onPlayMsg() {