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-02-16 17:11:07 +08:00
parent 255a727d32
commit ff334c1cb0
2 changed files with 68 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,16 +1,15 @@
<template>
<view class="members">
<view class="member--list">
<view class="users">
<view :class="['user', {'active': item.targetId == currentUser.targetId}]" @longpress="showAction(item)"
v-for="(item, index) in users" :key="index" @click="toUser(item)">
<u-avatar :size="avatarSize" shape="square" :src="item.portraitUrl"></u-avatar>
<u-avatar :size="avatarSize" shape="square" :src="contact(item.targetId).portraitUrl"></u-avatar>
<view class="name">{{ item.name }}</view>
<view class="admin" v-if="item.is_admin">管理</view>
<view class="owner" v-if="item.targetId === adminUid">群主</view>
</view>
<view class="user" v-if="isAdmin">
<u-avatar @click="inviteUser" size="126rpx" shape="square" icon="plus" bg-color="#eeeeee"
color="#999999">
<u-avatar @click="inviteUser" shape="square" icon="plus" bg-color="#eeeeee" color="#999999">
</u-avatar>
<view class="name">邀请好友</view>
</view>
@@ -59,6 +58,13 @@
currentUser: {},
avatarSize: 40
}
},
computed: {
contact() {
return function(targetId) {
return this.$store.getters.contactInfo(targetId)
}
}
},
created() {
this.avatarSize = 126 / 750 * wx.getSystemInfoSync().windowWidth
@@ -233,73 +239,70 @@
<style lang="scss" scoped>
.members {
.users {
flex-direction: row;
flex-wrap: wrap;
display: flex;
padding: 20rpx 0;
.users {
flex-direction: row;
flex-wrap: wrap;
.user {
overflow: hidden;
position: relative;
width: 126rpx;
margin-left: 20rpx;
margin-bottom: 20rpx;
display: flex;
padding: 20rpx 0;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 0 10rpx 0 0;
.user {
overflow: hidden;
position: relative;
&.active {
background-color: $window-color;
}
.name {
color: $text-gray-m;
width: 126rpx;
margin-left: 20rpx;
margin-bottom: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 0 10rpx 0 0;
text-align: center;
font-size: 26rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-word;
}
&.active {
background-color: $window-color;
}
.admin {
position: absolute;
background-color: $main-color;
transform: rotate(45deg);
color: #ffffff;
font-size: 12rpx;
width: 100rpx;
padding-top: 30rpx;
text-align: center;
right: -45rpx;
top: -20rpx;
}
.name {
color: $text-gray-m;
width: 126rpx;
text-align: center;
font-size: 26rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-word;
}
.admin {
position: absolute;
background-color: $main-color;
transform: rotate(45deg);
color: #ffffff;
font-size: 12rpx;
width: 100rpx;
padding-top: 30rpx;
text-align: center;
right: -45rpx;
top: -20rpx;
}
.owner {
position: absolute;
background-color: $text-price;
transform: rotate(45deg);
color: #ffffff;
font-size: 12rpx;
width: 100rpx;
padding-top: 30rpx;
text-align: center;
right: -45rpx;
top: -20rpx;
}
.owner {
position: absolute;
background-color: $text-price;
transform: rotate(45deg);
color: #ffffff;
font-size: 12rpx;
width: 100rpx;
padding-top: 30rpx;
text-align: center;
right: -45rpx;
top: -20rpx;
}
}
}
.loadmore {
font-size: 26rpx;
color: $text-gray-m;
text-align: center;
}
.loadmore {
font-size: 26rpx;
color: $text-gray-m;
text-align: center;
}
</style>