From ff334c1cb0ec8cbb373f69907aab879107dbe9eb Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Wed, 16 Feb 2022 17:11:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=94=A8=E6=88=B7=E8=B5=84?=
 =?UTF-8?q?=E6=96=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/im/components/groupUserList.vue | 129 +++++++++++++-------------
 store/modules/im.js                   |   4 +-
 2 files changed, 68 insertions(+), 65 deletions(-)

diff --git a/pages/im/components/groupUserList.vue b/pages/im/components/groupUserList.vue
index 4efd6f6..5a3cfcf 100644
--- a/pages/im/components/groupUserList.vue
+++ b/pages/im/components/groupUserList.vue
@@ -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>
diff --git a/store/modules/im.js b/store/modules/im.js
index 6526937..211f93a 100644
--- a/store/modules/im.js
+++ b/store/modules/im.js
@@ -11,7 +11,7 @@ export default {
         },
         contactInfo: (state) => (targetId) => {
             if (state.contacts[targetId]) {
-                const info = state.contacts[targetId]
+                const info = state.contacts[targetId]
                 return {
                     name: info.name,
                     hash: info.hash,
@@ -21,7 +21,7 @@ export default {
                 return {
                     name: '',
                     hash: '',
-                    portraitUrl: ''
+                    portraitUrl: require('@/static/user/cover.png')
                 }
             }
         },