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

统一聊天页的头像大小，改用rpx2px的计算，84rpx

Browse Source
This commit is contained in:
Jason.Chen
2022-02-21 16:28:34 +08:00
parent 883f32f54c
commit fbe1add9cf
7 changed files with 106 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
pages/im/components/connectionStatus.vue
View File

@@ -1,67 +1,67 @@
<template>
<u-alert type="warning" v-if="connection != 0" :description="description" show-icon />
</template>
<script>
export default {
props: {
connection: {
type: Number,
default: 0
}
},
computed: {
description() {
return this.connectionStatusMap.filter(item => item.index == this.connection)[0].text
}
},
data() {
return {
connectionStatusMap: [{
index: -1,
text: '网络不可用'
},
{
index: 0,
text: '连接成功'
},
{
index: 1,
text: '连接中'
},
{
index: 2,
text: '未连接'
},
{
index: 3,
text: '用户账号在其它设备登录'
},
{
index: 4,
text: 'TOKEN过期'
},
{
index: 6,
text: '用户被禁用'
},
{
index: 12,
text: '退出登录'
},
{
index: 13,
text: '连接暂时被挂起'
},
{
index: 14,
text: '连接超时'
},
],
}
}
}
</script>
<style>
<template>
<u-alert type="warning" v-if="connection != 0" :description="description" show-icon />
</template>
<script>
export default {
props: {
connection: {
type: Number,
default: 0
}
},
computed: {
description() {
return this.connectionStatusMap.filter(item => item.index == this.connection)[0].text
}
},
data() {
return {
connectionStatusMap: [{
index: -1,
text: '网络不可用'
},
{
index: 0,
text: '连接成功'
},
{
index: 1,
text: '连接中'
},
{
index: 2,
text: '未连接'
},
{
index: 3,
text: '用户账号在其它设备登录'
},
{
index: 4,
text: 'TOKEN过期'
},
{
index: 6,
text: '用户被禁用'
},
{
index: 12,
text: '退出登录'
},
{
index: 13,
text: '连接暂时被挂起'
},
{
index: 14,
text: '连接超时'
},
],
}
}
}
</script>
<style>
</style>

8
pages/im/components/groupUserList.vue
View File

@@ -59,7 +59,7 @@
actionMap: [],
actionTitle: '',
currentUser: {},
avatarSize: 45,
avatarSize: 84,
labelSize: 14,
iconSize: 14
}
@@ -72,7 +72,7 @@
}
},
created() {
this.avatarSize = utils.rpx2px(90)
this.avatarSize = utils.rpx2px(84)
this.labelSize = utils.rpx2px(24)
this.iconSize = utils.rpx2px(26)
},
@@ -271,8 +271,8 @@
.avatar {
border-radius: 0 8rpx 0 0;
position: relative;
width: 90rpx;
height: 90rpx;
width: 84rpx;
height: 84rpx;
overflow: hidden;
.admin {

16
pages/im/components/messageCell.vue
View File

@@ -2,7 +2,7 @@
<view class="message--cell">
<view class="avatar">
<u-badge max="99" shape="horn" absolute :offset="[-5, -8]" :value="item.unreadMessageCount" />
<u-avatar :src="contact(item.targetId).portraitUrl" shape="square" size="44" />
<u-avatar :src="contact(item.targetId).portraitUrl" shape="square" :size="avatarSize" />
</view>
<view class="content">
<view class="header">
@@ -18,6 +18,7 @@
<script>
import messagePreview from './messagePreview'
import utils from '@/utils/index.js'
export default {
props: {
@@ -27,8 +28,16 @@
return {}
}
}
},
},
data() {
return {
avatarRpx: 84
}
},
computed: {
avatarSize() {
return utils.rpx2px(this.avatarRpx)
},
contact() {
return function(targetId) {
return this.$store.getters.contactInfo(targetId)
@@ -48,6 +57,7 @@
.avatar {
position: relative;
padding-top: 5rpx;
.u-badge {
z-index: 998;
@@ -59,8 +69,6 @@
box-sizing: border-box;
position: relative;
flex: 1;
border-bottom-width: 0.5px !important;
border-color: #f9f9f9 !important;
border-bottom-style: solid;

12
pages/im/group/chat.vue
View File

@@ -7,7 +7,7 @@
<view class="cell" v-for="(item, index) in messages" :key="index">
<view class="time" v-if="item.senderUserId === '__system__'">{{ item.content.message }}</view>
<view v-else :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
<u-avatar class="avatar" @click="toUser(item)" size="36" shape="square"
<u-avatar class="avatar" @click="toUser(item)" :size="avatarSize" shape="square"
:src="contact(item.senderUserId).portraitUrl" />
<view class="msg">
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
@@ -37,6 +37,7 @@
import showImage from '../components/showImage'
import showText from '../components/showText'
import sentMessageBar from '../components/sentMessageBar'
import utils from '@/utils/index.js'
export default {
components: {
@@ -47,6 +48,7 @@
},
data() {
return {
avatarRpx: 84,
targetId: '',
conversationType: RongIMLib.ConversationType.GROUP,
messages: [],
@@ -56,6 +58,9 @@
}
},
computed: {
avatarSize() {
return utils.rpx2px(this.avatarRpx)
},
latestMessage() {
if (this.messages.length) {
return this.messages[0]
@@ -74,8 +79,8 @@
onLoad(e) {
this.targetId = e.targetId
// 获取群成员数量
getGroupBase(this.targetId).then(res => {
console.log(res);
getGroupBase(this.targetId).then(res => {
console.log(res);
uni.setNavigationBarTitle({
title: res.name + `(${res.members})`
})
@@ -174,6 +179,7 @@
.cell {
padding: 10rpx 30rpx;
.time {
text-align: center;
font-size: 24rpx;

10
pages/im/index.vue
View File

@@ -19,7 +19,7 @@
</view>
</view>
<!-- content -->
<view v-if="$store.state.token !== ''">
<view v-if="$store.state.token !== ''">
<connection-status :connection="connection" />
<conversation-list @refresh="getConversationList()" :conversations="conversations" />
</view>
@@ -76,13 +76,7 @@
onHide() {
uni.$off('onReceiveMessage')
},
methods: {
onDemo(){
console.log('1111')
uni.navigateTo({
url: '/pages/im/chatDemo'
})
},
methods: {
checkNewFriendPending() {
im.getPendingList((pendings) => {
this.hasNewFriends = pendings.length

17
pages/im/private/chat.vue
View File

@@ -7,7 +7,7 @@
<view class="cell" v-for="(item, index) in messages" :key="index">
<view class="time">{{ item.sentTime|timeCustomCN }}</view>
<view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
<u-avatar class="avatar" size="40" shape="square"
<u-avatar class="avatar" :size="avatarSize" shape="square"
@click="showUser(item.senderUserId, item.messageDirection)"
:src="contact(item.senderUserId).portraitUrl" />
<view class="msg">
@@ -37,7 +37,9 @@
import showImage from '../components/showImage'
import showText from '../components/showText'
import showCall from '../components/showCall'
import sentMessageBar from '../components/sentMessageBar'
import sentMessageBar from '../components/sentMessageBar'
import utils from '@/utils/index.js'
export default {
components: {
sentMessageBar,
@@ -47,7 +49,8 @@
showCall
},
data() {
return {
return {
avatarRpx: 84,
targetId: '',
messages: [],
conversationType: 1,
@@ -58,7 +61,10 @@
}
}
},
computed: {
computed: {
avatarSize() {
return utils.rpx2px(this.avatarRpx)
},
latestMessage() {
if (this.messages.length) {
return this.messages[0]
@@ -179,7 +185,8 @@
.time {
text-align: center;
font-size: 24rpx;
color: #666;
color: #666;
margin-bottom: 10rpx;
}
.cell-item {