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

rename

Browse Source
This commit is contained in:
Jason.Chen
2022-01-20 16:15:24 +08:00
parent 93a20f2d3d
commit 088327eaff
14 changed files with 348 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

314
pages/im/index.vue
View File

@@ -1,76 +1,63 @@
<template>
<view class="content">
<view v-if="$store.state.token != ''">
<block v-if="conversations.length < 1">
<view class="vertical null-list">
<u-empty
icon="http://cdn.uviewui.com/uview/empty/message.png"
textColor="#999"
text="暂无好友消息"
>
<template>
<view class="null-list-btn">开启聊天</view>
</template>
</u-empty>
</view>
</block>
<block v-else>
<view v-for="(item, index) in conversations" :key="index" class="mssage-box" @click="toDetail(item)">
<view class="mssage-action">
<block v-if="!friend(item.targetId).portraitUrl">
<u-avatar
clsss="mssage-action-cover"
size="44"
:text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
font-size="14"
randomBgColor
></u-avatar>
</block>
<block v-else>
<u-avatar
clsss="mssage-action-cover"
:src="friend(item.targetId).portraitUrl"
size="44"
></u-avatar>
</block>
<view class="mssage-action-content">
<view class="mssage-header">
<view class="header-name">{{ friend(item.targetId).name || '未知用户' }}</view>
<view class="header-time">{{ item.sentTime|timeCustomCN }}</view>
</view>
<view class="mssage-msg">{{ item.latestMessage.content }}</view>
</view>
</view>
</view>
</block>
</view>
<!-- 未登录 -->
<view v-else class="vertical null-list">
<u-empty
icon="http://cdn.uviewui.com/uview/empty/permission.png"
textColor="#999"
text="登录后开启聊天吧~"
>
<template>
<view class="null-list-btn" @click="toLogin">去登录</view>
</template>
</u-empty>
</view>
</view>
<template>
<view class="content">
<view v-if="$store.state.token != ''">
<block v-if="conversations.length < 1">
<view class="vertical null-list">
<u-empty icon="http://cdn.uviewui.com/uview/empty/message.png" textColor="#999" text="暂无好友消息">
<template>
<view class="null-list-btn">开启聊天</view>
</template>
</u-empty>
</view>
</block>
<block v-else>
<view v-for="(item, index) in conversations" :key="index" class="mssage-box" @click="toDetail(item)">
<view class="mssage-action">
<block v-if="!friend(item.targetId).portraitUrl">
<u-avatar clsss="mssage-action-cover" size="44"
:text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
font-size="14" randomBgColor></u-avatar>
</block>
<block v-else>
<u-avatar clsss="mssage-action-cover" :src="friend(item.targetId).portraitUrl" size="44">
</u-avatar>
</block>
<view class="mssage-action-content">
<view class="mssage-header">
<view class="header-name">{{ friend(item.targetId).name || '未知用户' }}</view>
<view class="header-time">{{ item.sentTime|timeCustomCN }}</view>
</view>
<view class="mssage-msg">{{ item.latestMessage.content }}</view>
</view>
</view>
</view>
</block>
</view>
<!-- 未登录 -->
<view v-else class="vertical null-list">
<u-empty icon="http://cdn.uviewui.com/uview/empty/permission.png" textColor="#999" text="登录后开启聊天吧~">
<template>
<view class="null-list-btn" @click="toLogin">去登录</view>
</template>
</u-empty>
</view>
</view>
</template>
<script>
import * as RongIMLib from '@rongcloud/imlib-uni'
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 {
isShown: true, // 当前页面显示状态
conversations: [] ,// 会话列表
isImToken: '', // 是否已鉴权
conversations: [], // 会话列表
isImToken: '', // 是否已鉴权
}
},
computed: {
@@ -80,36 +67,37 @@
}
}
},
onShow() {
if (this.$store.state.token !== '') {
if(this.isImToken === ''){
getImToken().then(res => {
im.syncFriends()
im.connect(res.token, res.userInfo)
this.isImToken = res.token
this.getConversationList()
})
}
this.getConversationList()
this.isShown = true
}
onShow() {
if (this.$store.state.token !== '') {
if (this.isImToken === '') {
getImToken().then(res => {
im.connect(res.token, res.userInfo)
this.isImToken = res.token
this.getConversationList()
})
}
this.getConversationList()
this.isShown = true
}
},
onHide() {
this.isShown = false
},
onNavigationBarButtonTap(e) {
if (e.index == 0) {
uni.showToast({
title: '开发中暂未开放，敬请期待',
icon : 'none'
})
}
if (e.index == 1) {
this.$Router.push({name: 'imFriends'})
if (e.index == 0) {
uni.showToast({
title: '开发中暂未开放，敬请期待',
icon: 'none'
})
}
if (e.index == 1) {
this.$Router.push({
name: 'imFriends'
})
}
},
watch: {
'$store.getters.newMessage': function(n, o) {
'$store.getters.newMessage': function(n, o) {
if (this.isShown) {
this.getConversationList()
}
@@ -131,90 +119,102 @@
getConversationList() {
const count = 1000
const timestamp = 0 // 会话的时间戳（获取这个时间戳之前的会话列表，0 表示从最新开始获取）会话类型
RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
if (res.code === 0 && res.conversations.length > 0) {
this.conversations = res.conversations
this.conversations = res.conversations
}
})
},
// 进入聊天的详情页面，清理未读消息数量
toDetail(item) {
uni.navigateTo({
url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item.conversationType
url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
.conversationType
})
}
}
}
</script>
<style lang="scss" scoped>
.content{
background-color: $window-color;
min-height: 100vh;
.null-list{
height: 100vh;
text-align: center;
&-btn{
margin-top: $margin * 2;
line-height: 70rpx;
color: $main-color;
border:solid 1rpx $main-color;
padding: 0 ($padding*3);
font-size: $title-size-m;
border-radius: 35rpx;
box-sizing: border-box;
}
}
.mssage-box{
background: white;
.mssage-action{
position: relative;
padding: 20rpx $padding;
&::after{
position: absolute;
left: $padding + 108;
right: 0;
bottom: 0;
content: " ";
height: 1rpx;
background: $border-color;
}
&-content{
position: absolute;
top: 20rpx;
height: 44px;
left: $padding + 108;
right: $margin;
display: flex;
flex-direction: column;
justify-content: center;
.mssage-header{
display: flex;
font-size: $title-size;
line-height: 40rpx;
justify-content: space-between;
.header-name{
flex: 1;
@extend .nowrap;
}
.header-time{
padding-left: $padding;
font-size: $title-size-sm - 2;
color: $text-gray;
}
}
.mssage-msg{
font-size: $title-size-sm - 2;
color: $text-gray;
@extend .nowrap;
}
}
}
&-item:last-child{
.mssage-action::after{
display: none;
}
}
}
}
<style lang="scss" scoped>
.content {
background-color: $window-color;
min-height: 100vh;
.null-list {
height: 100vh;
text-align: center;
&-btn {
margin-top: $margin * 2;
line-height: 70rpx;
color: $main-color;
border: solid 1rpx $main-color;
padding: 0 ($padding*3);
font-size: $title-size-m;
border-radius: 35rpx;
box-sizing: border-box;
}
}
.mssage-box {
background: white;
.mssage-action {
position: relative;
padding: 20rpx $padding;
&::after {
position: absolute;
left: $padding + 108;
right: 0;
bottom: 0;
content: " ";
height: 1rpx;
background: $border-color;
}
&-content {
position: absolute;
top: 20rpx;
height: 44px;
left: $padding + 108;
right: $margin;
display: flex;
flex-direction: column;
justify-content: center;
.mssage-header {
display: flex;
font-size: $title-size;
line-height: 40rpx;
justify-content: space-between;
.header-name {
flex: 1;
@extend .nowrap;
}
.header-time {
padding-left: $padding;
font-size: $title-size-sm - 2;
color: $text-gray;
}
}
.mssage-msg {
font-size: $title-size-sm - 2;
color: $text-gray;
@extend .nowrap;
}
}
}
&-item:last-child {
.mssage-action::after {
display: none;
}
}
}
}
</style>