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

用户申请调整

Browse Source
This commit is contained in:
Jason.Chen
2022-01-25 15:27:33 +08:00
parent 530f1507f4
commit 33ee2ebd55
4 changed files with 191 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -68,12 +68,14 @@ export default {
// 新朋友 // 新朋友
toPending() { toPending() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/im/friends/search' url: '/pages/im/friends/pending'
}); });
} }
}, },
onNavigationBarButtonTap(e) { onNavigationBarButtonTap(e) {
this.toPending(); uni.navigateTo({
url: '/pages/im/friends/search'
});
} }
}; };
</script> </script>

300
pages/im/index.vue
View File

@@ -1,51 +1,53 @@
<template> <template>
<view class="contents"> <view class="contents">
<view class="ios-top"></view> <view class="ios-top"></view>
<!-- header --> <!-- header -->
<view class="custom-header"> <view class="custom-header">
<view class="header-flex"> <view class="header-flex">
<view class="tabs"> <view class="tabs">
<view class="item show">私聊</view> <view class="item show">私聊</view>
<view class="item" @click="onNav('', {})">群聊</view> <view class="item" @click="onNav('', {})">群聊</view>
</view> </view>
<view class="btns"> <view class="btns">
<view class="item" @click="onNav('imFriends', {})"> <view class="item" @click="onNav('imFriends', {})">
<uni-icons color="#555" custom-prefix="iconfont" type="icon-tuandui" size="22"></uni-icons> <uni-icons color="#555" custom-prefix="iconfont" type="icon-tuandui" size="22"></uni-icons>
</view> </view>
<view class="item" @click="onNav('', {})"> <view class="item" @click="onNav('', {})">
<uni-icons color="#555" custom-prefix="iconfont" type="icon-gengduo2" size="22"></uni-icons> <uni-icons color="#555" custom-prefix="iconfont" type="icon-gengduo2" size="22"></uni-icons>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<!-- content --> <!-- content -->
<view v-if="$store.state.token != ''"> <view v-if="$store.state.token != ''">
<block v-if="conversations.length < 1"> <block v-if="conversations.length < 1">
<view class="vertical null-list"> <view class="vertical null-list">
<u-empty icon="http://cdn.uviewui.com/uview/empty/message.png" textColor="#999" text="暂无好友消息"> <u-empty mode="message" textColor="#999" text="暂无好友消息" />
<!-- <template>
<view class="null-list-btn">开启聊天</view>
</template> -->
</u-empty>
</view> </view>
</block> </block>
<block v-else> <block v-else>
<u-alert type="warning" v-if="connection != 0" description="网络似乎断开了" :show-icon="true"></u-alert> <u-alert type="warning" v-if="connection != 0" description="网络似乎断开了" :show-icon="true"></u-alert>
<view v-for="(item, index) in conversations" :key="index" :class="['message', { 'is-top': item.isTop }]" @tap="toDetail(item)" @longpress="onLongPress" :data-item="item"> <view v-for="(item, index) in conversations" :key="index"
<view class="avatar"> :class="['message', 'u-border-bottom', { 'is-top': item.isTop }]" @tap="toDetail(item)"
<u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]" :value="item.unreadMessageCount" /> @longpress="onLongPress" :data-item="item">
<u-avatar size="44" v-if="!friend(item.targetId).portraitUrl" shape="square" :text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'" font-size="16" randomBgColor></u-avatar> <view class="avatar">
<u-avatar v-else :src="friend(item.targetId).portraitUrl" shape="square" size="44"></u-avatar> <u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]"
</view> :value="item.unreadMessageCount" />
<view class="content"> <u-avatar size="44" v-if="!friend(item.targetId).portraitUrl" shape="square"
<view class="header"> :text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
font-size="16" randomBgColor></u-avatar>
<u-avatar v-else :src="friend(item.targetId).portraitUrl" shape="square" size="44"></u-avatar>
</view>
<view class="content">
<view class="header">
<view class="name">{{ friend(item.targetId).name || '未知用户' }}</view> <view class="name">{{ friend(item.targetId).name || '未知用户' }}</view>
<view class="time">{{ item.sentTime|timeCustomCN }}</view> <view class="time">{{ item.sentTime|timeCustomCN }}</view>
</view> </view>
<view class="preview">{{ item.latestMessage.content || '' }}</view> <view class="preview">{{ item.latestMessage.content || '' }}</view>
</view> </view>
</view> </view>
<view class="shade" @tap="hidePop"> <!-- TODO 长按的弹出框，怎么点击隐藏，没搞明白 -->
<view class="shade" @tap="hidePop">
<view class="pop" :style="popStyle" :class="{'show':showPop}"> <view class="pop" :style="popStyle" :class="{'show':showPop}">
<view v-for="(item, index) in popButton" :key="index" @tap="pickerMenu" :data-index="index"> <view v-for="(item, index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">
{{item}} {{item}}
@@ -69,8 +71,10 @@
import * as RongIMLib from '@rongcloud/imlib-uni' import * as RongIMLib from '@rongcloud/imlib-uni'
import im from '@/utils/im/index.js' import im from '@/utils/im/index.js'
import userAuth from '@/public/userAuth' import userAuth from '@/public/userAuth'
import { getImToken } from '@/apis/interfaces/im.js' import {
getImToken
} from '@/apis/interfaces/im.js'
export default { export default {
data() { data() {
return { return {
@@ -97,13 +101,12 @@
}, },
onShow() { onShow() {
if (this.$store.state.token !== '') { if (this.$store.state.token !== '') {
getImToken().then(res => { getImToken().then(res => {
console.log("IMTOKEN", res); im.connect(res.token, res.userInfo, () => {
im.connect(res.token, res.userInfo, () => { this.getConversationList()
this.getConversationList()
}) })
}) })
} }
this.isShown = true this.isShown = true
}, },
onHide() { onHide() {
@@ -150,11 +153,12 @@
.pickedItem.isTop) .pickedItem.isTop)
} else { } else {
RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId) RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
} }
im.setNotifyBadge()
this.getConversationList() this.getConversationList()
this.hidePop() this.hidePop()
}, },
onLongPress(e) { onLongPress(e) {
let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item] let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item]
if (touches.clientY > (this.winSize.height / 2)) { if (touches.clientY > (this.winSize.height / 2)) {
@@ -189,12 +193,12 @@
getConversationList() { getConversationList() {
const count = 1000 const count = 1000
const timestamp = 0 const timestamp = 0
RongIMLib.getConversationList(undefined, count, timestamp, (res) => { RongIMLib.getConversationList([RongIMLib.ConversationType.PRIVATE], count, timestamp, (res) => {
console.log('获取列表', res); console.log('getConversationList', res);
if (res.code === 0 && res.conversations.length > 0) { if (res.code === 0) {
this.conversations = res.conversations this.conversations = res.conversations
} }
}) })
}, },
// 进入聊天的详情页面，清理未读消息数量 // 进入聊天的详情页面，清理未读消息数量
toDetail(item) { toDetail(item) {
@@ -203,76 +207,86 @@
url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
.conversationType .conversationType
}) })
}, },
// 点击按钮 // 点击按钮
onNav(name, params){ onNav(name, params) {
if(this.toLogin){ if (this.toLogin) {
if(name === ''){ if (name === '') {
uni.showToast({ uni.showToast({
title: '开发中，敬请期待', title: '开发中，敬请期待',
icon : 'none' icon: 'none'
}) })
return return
} }
this.$Router.push({name, params}) this.$Router.push({
} name,
} params
})
}
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// header // header
.custom-header{ .custom-header {
@extend .ios-top; @extend .ios-top;
background: white; background: $window-color;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: 9999; z-index: 9999;
.header-flex{
padding: 20rpx $padding; .header-flex {
display: flex; padding: 20rpx $padding;
justify-content: space-between; display: flex;
height: 60rpx; justify-content: space-between;
line-height: 60rpx; height: 60rpx;
.tabs{ line-height: 60rpx;
.item{
margin-left: $margin; .tabs {
display: inline-block; .item {
font-size: $title-size-lg; margin-left: $margin;
color: $text-gray; display: inline-block;
padding: 0 ($padding - 10); font-size: $title-size-lg;
border-radius: 30rpx; color: $text-gray;
&:first-child{ padding: 0 ($padding - 10);
margin: 0; border-radius: 30rpx;
}
&.show{ &:first-child {
background: rgba($color: $main-color, $alpha: .1); margin: 0;
color: $main-color; }
font-weight: bold;
} &.show {
} background: rgba($color: $main-color, $alpha: .1);
} color: $main-color;
.btns{ font-weight: bold;
.item{ }
display: inline-block; }
margin-left: $margin; }
}
} .btns {
} .item {
} display: inline-block;
margin-left: $margin;
// contents }
}
}
}
// contents
.contents { .contents {
background-color: $window-color; background-color: $window-color;
min-height: 100vh; min-height: 100vh;
padding-top: 90rpx; padding-top: 90rpx;
box-sizing: border-box; box-sizing: border-box;
.null-list { .null-list {
height: 100vh; height: 100vh;
text-align: center; text-align: center;
&-btn { &-btn {
margin-top: $margin * 2; margin-top: $margin * 2;
line-height: 70rpx; line-height: 70rpx;
@@ -284,54 +298,66 @@
box-sizing: border-box; box-sizing: border-box;
} }
} }
.message { .message {
background: white; background: white;
padding: 20rpx 30rpx; padding: 20rpx 30rpx;
position: relative; position: relative;
display: flex; display: flex;
&.u-border-bottom {}
&.is-top { &.is-top {
background: $window-color; background: $window-color;
} }
.avatar {
position: relative; .avatar {
position: relative;
.u-badge { .u-badge {
z-index: 998; z-index: 998;
} }
} }
.content {
padding-left: 30rpx; .content {
width: calc(100% - 44px); padding-left: 30rpx;
box-sizing: border-box; width: calc(100% - 44px);
box-sizing: border-box;
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.name { .name {
font-size: $title-size + 4; font-size: $title-size + 4;
} }
.time { .time {
font-size: $title-size-sm; font-size: $title-size-sm;
color: $text-gray; color: $text-gray;
} }
} }
.preview { .preview {
word-break: break-all; word-break: break-all;
color: $text-gray; color: $text-gray;
font-size: $title-size-sm; font-size: $title-size-sm;
@extend .nowrap; @extend .nowrap;
} }
} }
} }
.message:not(:last-child) {
&::after { // .message:not(:last-child) {
position: absolute; // &::after {
left: calc(44px + #{$padding} + 30rpx); // position: absolute;
right: 0; // left: calc(44px + #{$padding} + 30rpx);
bottom: 0; // right: 0;
content: " "; // bottom: 0;
height: 1rpx; // content: " ";
background: $border-color; // height: 1rpx;
} // background: $border-color;
} // }
// }
} }
/* 遮罩 */ /* 遮罩 */

23
utils/im/historyMessages.json Normal file
View File

@@ -0,0 +1,23 @@
[{
"objectName": "RC:TxtMsg",
"receivedTime": 1643080237399,
"extra": "",
"messageUId": "BUFC-3FSU-OLE4-I31K",
"conversationType": 1,
"messageDirection": 2,
"senderUserId": "10041",
"content": {
"content": "你好，这是 1710 条消息条消息条消息条消息条消息条消息条消息条消息条消息0.97796900 1642741562",
"objectName": "RC:TxtMsg",
"userInfo": {
"userId": "10041",
"name": "我是eth",
"portraitUrl": "http://storage.zh.shangkelian.cn/images/2022/01/12/3d2a103386df6822db7e5290272e8bc2.png"
}
},
"targetId": "10041",
"sentTime": 1642741563003,
"messageId": 2,
"receivedStatus": 1,
"sentStatus": 30
}]

2
utils/im/index.js
View File

@@ -10,7 +10,7 @@ const initIm = (KEY) => {
addListeners() addListeners()
} }
const setNotifyBadge = (count) => { const setNotifyBadge = () => {
// 获取未读消息数量 // 获取未读消息数量
RongIMLib.getTotalUnreadCount(({ RongIMLib.getTotalUnreadCount(({
code, code,