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

调整聊聊模块列表

Browse Source
This commit is contained in:
唐明明
2022-01-24 15:32:09 +08:00
parent d8d54a4d1b
commit 17196b9779
2 changed files with 62 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
App.vue
View File

@@ -4,7 +4,8 @@
export default { export default {
onLaunch: function() { onLaunch: function() {
// im.initIm('lmxuhwaglu76d') im.initIm('lmxuhwaglu76d')
return
//#ifdef APP-PLUS //#ifdef APP-PLUS
// 获取系统版本号 // 获取系统版本号
getVersions({ getVersions({

88
pages/im/index.vue
View File

@@ -1,25 +1,24 @@
<template> <template>
<view class="content"> <view class="contents">
<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">群聊</view> <view class="item" @click="onNav('', {})">群聊</view>
</view> </view>
<view class="btns"> <view class="btns">
<view class="item"> <view class="item" @click="onNav('imFriends', {})">
<uni-icons color="#555" custom-prefix="iconfont" type="icon-sousuo" size="22"></uni-icons>
</view>
<view class="item">
<uni-icons color="#555" custom-prefix="iconfont" type="icon-gengduo2" size="22"></uni-icons>
</view>
<view class="item">
<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('', {})">
<uni-icons color="#555" custom-prefix="iconfont" type="icon-gengduo2" size="22"></uni-icons>
</view> </view>
</view> </view>
</view> </view>
</view>
<!-- 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">
@@ -32,27 +31,20 @@
</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 }]" <view v-for="(item, index) in conversations" :key="index" :class="['message', { 'is-top': item.isTop }]" @tap="toDetail(item)" @longpress="onLongPress" :data-item="item">
@tap="toDetail(item)" @longpress="onLongPress" :data-item="item">
<view class="avatar"> <view class="avatar">
<u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]" <u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]" :value="item.unreadMessageCount" />
:value="item.unreadMessageCount" /> <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>
<u-avatar size="44" v-if="!friend(item.targetId).portraitUrl" <u-avatar v-else :src="friend(item.targetId).portraitUrl" shape="square" size="44"></u-avatar>
:text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
font-size="14" randomBgColor></u-avatar>
<u-avatar v-else :src="friend(item.targetId).portraitUrl" size="44">
</u-avatar>
</view> </view>
<view class="content"> <view class="content">
<view class="header"> <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 || '&nbsp;' }}</view> <view class="preview">{{ item.latestMessage.content || '' }}</view>
</view> </view>
</view> </view>
<view class="shade" @tap="hidePop"> <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">
@@ -77,9 +69,7 @@
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 { import { getImToken } from '@/apis/interfaces/im.js'
getImToken
} from '@/apis/interfaces/im.js'
export default { export default {
data() { data() {
@@ -213,6 +203,19 @@
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){
if(this.toLogin){
if(name === ''){
uni.showToast({
title: '开发中，敬请期待',
icon : 'none'
})
return
}
this.$Router.push({name, params})
}
} }
} }
} }
@@ -227,7 +230,7 @@
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: 99; z-index: 9999;
.header-flex{ .header-flex{
padding: 20rpx $padding; padding: 20rpx $padding;
display: flex; display: flex;
@@ -261,15 +264,15 @@
} }
} }
// content // contents
.content { .contents {
background-color: $window-color; background-color: $window-color;
min-height: 100vh; min-height: 100vh;
padding-top: 90rpx;
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;
@@ -281,57 +284,46 @@
box-sizing: border-box; box-sizing: border-box;
} }
} }
.message { .message {
background: white;
padding: 20rpx 30rpx;
position: relative; position: relative;
display: flex; display: flex;
background: white;
padding: 24rpx 24rpx 20rpx 24rpx;
&.is-top { &.is-top {
background: $window-color; background: $window-color;
} }
.avatar { .avatar {
position: relative; position: relative;
.u-badge { .u-badge {
z-index: 999; z-index: 998;
} }
} }
.content { .content {
margin-left: 16rpx; padding-left: 30rpx;
flex: 1; flex: 1;
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.name { .name {
font-size: 36rpx font-size: $title-size + 4;
} }
.time { .time {
font-size: 24rpx; font-size: $title-size-sm;
color: $text-gray; color: $text-gray;
} }
} }
.preview { .preview {
width: 520rpx;
word-break: break-all; word-break: break-all;
color: $text-gray; color: $text-gray;
font-size: 26rpx; font-size: $title-size-sm;
@extend .nowrap; @extend .nowrap;
} }
} }
} }
.message:not(:last-child) { .message:not(:last-child) {
&::after { &::after {
position: absolute; position: absolute;
left: $padding + 108; left: calc(44px + #{$padding} + 30rpx);
right: 0; right: 0;
bottom: 0; bottom: 0;
content: " "; content: " ";