更新用户资料

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"
+                <u-avatar @click="inviteUser" shape="square" icon="plus" bg-color="#eeeeee" color="#999999">
-                    color="#999999">
                 </u-avatar>
                 <view class="name">邀请好友</view>
             </view>
@@ -60,6 +59,13 @@
                 avatarSize: 40
             }
         },
+        computed: {
+            contact() {
+                return function(targetId) {
+                    return this.$store.getters.contactInfo(targetId)
+                }
+            }
+        },
         created() {
             this.avatarSize = 126 / 750 * wx.getSystemInfoSync().windowWidth
             console.log(this.avatarSize)
@@ -233,73 +239,70 @@
 
 
 <style lang="scss" scoped>
-    .members {
+    .users {
+        flex-direction: row;
+        flex-wrap: wrap;
+        display: flex;
+        padding: 20rpx 0;
 
-        .users {
+        .user {
-            flex-direction: row;
+            overflow: hidden;
-            flex-wrap: wrap;
+            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 {
+            &.active {
-                overflow: hidden;
+                background-color: $window-color;
-                position: relative;
+            }
+
+            .name {
+                color: $text-gray-m;
                 width: 126rpx;
-                margin-left: 20rpx;
+                text-align: center;
-                margin-bottom: 20rpx;
+                font-size: 26rpx;
-                display: flex;
+                overflow: hidden;
-                flex-direction: column;
+                text-overflow: ellipsis;
-                justify-content: center;
+                white-space: nowrap;
-                align-items: center;
+                word-break: break-word;
-                border-radius: 0 10rpx 0 0;
+            }
 
-                &.active {
+            .admin {
-                    background-color: $window-color;
+                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 {
+            .owner {
-                    color: $text-gray-m;
+                position: absolute;
-                    width: 126rpx;
+                background-color: $text-price;
-                    text-align: center;
+                transform: rotate(45deg);
-                    font-size: 26rpx;
+                color: #ffffff;
-                    overflow: hidden;
+                font-size: 12rpx;
-                    text-overflow: ellipsis;
+                width: 100rpx;
-                    white-space: nowrap;
+                padding-top: 30rpx;
-                    word-break: break-word;
+                text-align: center;
-                }
+                right: -45rpx;
-
+                top: -20rpx;
-                .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;
-                }
             }
         }
+    }
 
-        .loadmore {
+    .loadmore {
-            font-size: 26rpx;
+        font-size: 26rpx;
-            color: $text-gray-m;
+        color: $text-gray-m;
-            text-align: center;
+        text-align: center;
-        }
     }
 </style>

store/modules/im.js

@@ -21,7 +21,7 @@ export default {
                 return {
                     name: '',
                     hash: '',
-                    portraitUrl: ''
+                    portraitUrl: require('@/static/user/cover.png')
                 }
             }
         },