用户资料更新规则，基础流程

apis/interfaces/im.js

@@ -11,6 +11,13 @@ import {
 
 // 获取好友列表
 const getFriends = () => {
+    return request({
+        url: 'im/friends',
+    }, true)
+}
+
+// 获取好友列表
+const getFriendsLetter = () => {
     return request({
         url: 'im/friends/letter',
     }, true)
@@ -141,6 +148,7 @@ export {
     getImToken,
     deleteFriend,
     getFriends,
+    getFriendsLetter,
     getUserInfo,
     getFriendInfo,
     getPedings,

pages/im/friends/index.vue

@@ -14,28 +14,20 @@
                 </view>
             </view>
             <block v-if="friends.length > 0">
-                <template v-for="(item, friend) in friends">
+                <template v-for="(item, fkey) in friends">
                     <!-- #ifdef APP-NVUE -->
-                    <u-index-anchor :text="indexs[friend]" bgColor="#F3F6FB" height="20" size="12" color="#666">
+                    <u-index-anchor :text="indexs[fkey]" bgColor="#F3F6FB" height="20" size="12" color="#666">
                     </u-index-anchor>
                     <!-- #endif -->
                     <u-index-item>
                         <!-- #ifndef APP-NVUE -->
-                        <u-index-anchor :text="indexs[friend]" bgColor="#F3F6FB" height="20" size="12" color="#666">
+                        <u-index-anchor :text="indexs[fkey]" bgColor="#F3F6FB" height="20" size="12" color="#666">
                         </u-index-anchor>
                         <!-- #endif -->
                         <view v-for="(friendItem, index) in item" :key="friendItem.userId"
-                            class="friend-flex u-border-bottom"
+                            class="friend-flex u-border-bottom" @click="toFriend(friendItem.userId)">
-                            @click="$Router.push({ name: 'imFriendsInfo', params: { targetId: friendItem.userId } })">
+                            <u-avatar size="40" shape="square" :src="friend(friendItem.userId).portraitUrl" />
-                            <block v-if="friendItem.portraitUrl != ''">
+                            <view class="name">{{ friend(friendItem.userId).name }}</view>
-                                <u-avatar class="cover" size="40" shape="square" :src="friendItem.portraitUrl || ''"
-                                    :default-url="require('@/static/user/cover.png')"></u-avatar>
-                            </block>
-                            <block v-else>
-                                <u-avatar class="cover" size="40" shape="square"
-                                    :src="require('@/static/user/cover.png')"></u-avatar>
-                            </block>
-                            <view class="name">{{ friendItem.name }}</view>
                         </view>
                     </u-index-item>
                 </template>
@@ -50,7 +42,7 @@
 
 <script>
     import {
-        getFriends,
+        getFriendsLetter,
         getPendingCount
     } from '@/apis/interfaces/im';
 
@@ -62,8 +54,15 @@
                 pendingCount: 0
             };
         },
-        onShow() {
+        computed: {
-            getFriends().then(res => {
+            friend() {
+                return function(targetId) {
+                    return this.$store.getters.userInfo(targetId)
+                }
+            }
+        },
+        onLoad() {
+            getFriendsLetter().then(res => {
                 this.indexs = res.indexList
                 this.friends = res.itemArr
             })
@@ -79,6 +78,11 @@
                     icon: 'none'
                 });
             },
+            toFriend(targetId) {
+                uni.navigateTo({
+                    url: '/pages/im/friends/info?targetId=' + targetId
+                })
+            },
             // 新朋友
             toPending() {
                 uni.navigateTo({
@@ -108,7 +112,6 @@
         flex-direction: row;
         align-items: center;
 
-        // .cover
         .name {
             flex: 1;
             padding-left: $padding;

pages/im/friends/info.vue

@@ -2,7 +2,8 @@
     <view class="content">
         <!-- 用户信息 -->
         <view class="info-flex">
-            <u-avatar :src="userInfo.portraitUrl || require('@/static/user/cover.png')" shape="square" size="50" bg-color="#fff"></u-avatar>
+            <u-avatar :src="userInfo.portraitUrl || require('@/static/user/cover.png')" shape="square" size="50"
+                bg-color="#fff"></u-avatar>
             <view class="info-text">
                 <view class="nickname">{{userInfo.name}}</view>
                 <view class="address" @longpress="copyAddress">地址：{{userInfo.address}}</view>
@@ -105,10 +106,11 @@
             }
         },
         onLoad(e) {
-            console.log(e);
             this.targetId = e.targetId
             getFriendInfo(e.targetId).then(res => {
                 this.userInfo = res
+                // 获取到用户信息之后，去检查一下要不要更新
+                this.$store.dispatch('updateFriend', res)
                 uni.setNavigationBarTitle({
                     title: res.name
                 })
@@ -313,14 +315,16 @@
         background: white;
         margin: $margin;
         border-radius: $radius;
-        .u-border-bottom{
+
+        .u-border-bottom {
             border-bottom: solid 1rpx #f9f9f9 !important;
         }
+
         .item {
             line-height: 100rpx;
             display: flex;
             align-items: center;
-            padding:10rpx $padding;
+            padding: 10rpx $padding;
             justify-content: space-between;
             font-size: $title-size-lg;
 

pages/im/index.vue

@@ -40,8 +40,7 @@
                     <view class="avatar" @click="toFriend(item.targetId)">
                         <u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]"
                             :value="item.unreadMessageCount" />
-                        <u-avatar :src="friend(item.targetId).portraitUrl || require('@/static/user/cover.png')"
+                        <u-avatar :src="friend(item.targetId).portraitUrl" shape="square" size="44" />
-                            shape="square" size="44" />
                     </view>
                     <view class="content u-border-bottom">
                         <view class="header">

pages/im/private/chat.nvue

@@ -41,7 +41,8 @@
             </view>
         </view>
         <!-- 弹出层 -->
-        <sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId" @success="() => {showPopups = false, getMessageList()}"></sent-popups>
+        <sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId"
+            @success="() => {showPopups = false, getMessageList()}"></sent-popups>
     </view>
 </template>
 
@@ -89,6 +90,7 @@
             this.conversationType = e.conversationType // 会话类型
             this.userInfo = this.$store.getters.userInfo(this.targetId)
 
+            console.log(this.userInfo);
             // 获取消息列表
             this.initMessageList()
 
@@ -148,7 +150,7 @@
             },
             // 滚动到底部
             scrollBottom(type) {
-                if(type === 'msgPopups'){
+                if (type === 'msgPopups') {
                     this.showPopups = !this.showPopups
                 }
                 setTimeout(() => {
@@ -168,14 +170,18 @@
     .chat {
         background: $window-color;
         flex: 1;
+
         .body {
             flex: 1;
+
             .cell {
                 padding: 10rpx 30rpx;
+
                 .time {
                     justify-content: center;
                     align-items: center;
                     padding-bottom: 20rpx;
+
                     .text {
                         background: #fff;
                         font-size: 24rpx;
@@ -237,9 +243,11 @@
             display: flex;
             justify-content: space-between;
             flex-direction: row;
+
             .msg-type {
                 width: 70rpx;
                 height: 70rpx;
+
                 .icon {
                     margin: 5rpx;
                     width: 60rpx;

store/modules/im.js

@@ -11,27 +11,27 @@ export default {
         },
         userInfo: (state) => (targetId) => {
             if (state.friends[targetId]) {
-                return state.friends[targetId]
+                const info = state.friends[targetId]
-            } else {
+
-                console.log('没找到,死循环了，得处理  todo', targetId);
-                // im.syncUserInfo(targetId)
                 return {
+                    userId: info.userId,
+                    name: info.name,
+                    portraitUrl: info.localAvatar ? info.localAvatar : require('@/static/user/cover.png')
+                }
+            } else {
+                return {
+                    userId: '',
                     name: '',
-                    address: '',
-                    hash: '',
                     portraitUrl: ''
                 }
             }
         },
-        hasUser: (state) => (targetId) => {
-            return Boolean(state.friends[targetId])
-        },
         sender(state) {
             return state.sender
         }
     },
     mutations: {
-        updateFriends(state, userInfo) {
+        updateFriendInfo(state, userInfo) {
             Vue.set(state.friends, userInfo.userId, userInfo)
         },
         SET_state_sender(state, userInfo) {
@@ -44,49 +44,79 @@ export default {
         }, userInfo) {
             commit('SET_state_sender', userInfo)
         },
-        updateFriends({
+        // 载入好友信息
+        launchFriend({
+            commit
+        }, data) {
+            commit('updateFriendInfo', data)
+        },
+        // 更新好友信息，这个时候要校验hash值了
+        updateFriend({
             commit
         }, userInfo) {
-            commit('updateFriends', userInfo)
             const model = uni.model.friendModel
-            model.find('userId=' + userInfo.userId, (err, user) => {
+            model.find('userId=' + userInfo.userId, (err, result) => {
-                if (!err && user.length == 0) {
+                if (userInfo.hash != result[0].hash) {
+                    commit('updateFriendInfo', userInfo)
+                    if (userInfo.portraitUrl && userInfo.portraitUrl != result[0].portraitUrl) {
                         saveAvatar(userInfo, (savedFilePath) => {
-                        model.insert({
+                            const info = {
                                 userId: userInfo.userId,
                                 name: userInfo.name,
                                 hash: userInfo.hash,
-                            address: userInfo.address,
+                                portraitUrl: userInfo.portraitUrl,
-                            portraitUrl: savedFilePath,
+                                localAvatar: savedFilePath
-                        }, (err, result) => {})
+                            }
-                        userInfo.portraitUrl = savedFilePath
+                            model.update('userId=' + userInfo.userId, info)
-                        commit('updateFriends', userInfo)
+                            commit('updateFriendInfo', info)
-                    })
-                } else if (!err && user[0].hash != userInfo.hash) {
-                    saveAvatar(userInfo, (savedFilePath) => {
-                        model.update('userId=' + userInfo.userId, {
-                            name: userInfo.name,
-                            hash: userInfo.hash,
-                            portraitUrl: savedFilePath,
-                        }, (err, result) => {})
-                        userInfo.portraitUrl = savedFilePath
-                        commit('updateFriends', userInfo)
-                    })
-                } else if (!err && user[0].portraitUrl.length > 50) {
-                    saveAvatar(userInfo, (savedFilePath) => {
-                        model.update('userId=' + userInfo.userId, {
-                            name: userInfo.name,
-                            hash: userInfo.hash,
-                            portraitUrl: savedFilePath,
-                        }, (err, result) => {})
-
-                        userInfo.portraitUrl = savedFilePath
-                        commit('updateFriends', userInfo)
                         })
                     } else {
-                    console.log('不用操作', user[0]);
+                        const info = {
+                            userId: userInfo.userId,
+                            name: userInfo.name,
+                            hash: userInfo.hash,
+                            portraitUrl: userInfo.portraitUrl,
+                            localAvatar: ''
+                        }
+                        model.update('userId=' + userInfo.userId, info)
+                    }
+                } else {
+                    console.log('不用更新的用户', userInfo.userId, userInfo.name);
                 }
             })
+        },
+        // 初始化好友信息
+        initFriend({
+            commit
+        }, userInfo) {
+            // 将好友信息保存到vuex的内存中，方便立即使用
+            commit('updateFriendInfo', userInfo)
+            const model = uni.model.friendModel
+            // 用户头像，是否需要下载到本地
+            if (userInfo.portraitUrl) {
+                saveAvatar(userInfo, (savedFilePath) => {
+                    const info = {
+                        userId: userInfo.userId,
+                        name: userInfo.name,
+                        hash: userInfo.hash,
+                        portraitUrl: userInfo.portraitUrl,
+                        localAvatar: savedFilePath
+                    }
+                    model.insert(info)
+                    // 保存头像后，更新信息
+                    commit('updateFriendInfo', info)
+                })
+            } else {
+                // 直接将信息，写入数据库
+                const info = {
+                    userId: userInfo.userId,
+                    name: userInfo.name,
+                    hash: userInfo.hash,
+                    portraitUrl: userInfo.portraitUrl,
+                    localAvatar: ''
+                }
+                model.insert(info)
+            }
         }
     }
 }

utils/im/index.js

@@ -51,21 +51,38 @@ const setNotifyBadge = () => {
  */
 const connect = (token, userInfo, callback) => {
     RongIMLib.connect(token, res => {
-        console.log('连接结果', res);
-
         callback(res)
-    })
+        // 更新个人信息
-
         store.dispatch('setSenderInfo', userInfo)
-
+        // 设置未读消息数量
         setNotifyBadge()
+        // 首次运行获取好友列表
+        const FK = 'IFT_' + userInfo.userId
 
         const model = uni.model.friendModel
-
         model.find((err, results) => {
-        console.log('好友列表', results);
+            console.log('SQL 全部数据', results);
+        })
+
+        uni.getStorage({
+            key: FK,
+            success: () => {
+                const model = uni.model.friendModel
+                model.find((err, results) => {
                     results.map(item => {
-            store.dispatch('updateFriends', item)
+                        store.dispatch('launchFriend', item)
+                    })
+                })
+            },
+            fail: () => {
+                // 程序是首次运行，初始化加载好友信息
+                getFriends().then(res => {
+                    res.map(item => {
+                        store.dispatch('initFriend', item)
+                    })
+                    uni.setStorageSync(FK, userInfo.userId)
+                })
+            }
         })
     })
 }
@@ -184,19 +201,9 @@ const newMessage = (msg) => {
 
     setNotifyBadge()
 
-    if (!store.getters.hasUser(msg.targetId)) {
-        syncUserInfo(msg.targetId)
-    }
-
     uni.$emit('onReceiveMessage', msg);
 }
 
-function syncUserInfo(targetId) {
-    getUserInfo(targetId).then(res => {
-        store.dispatch('updateFriends', res)
-    })
-}
-
 // 播放状态
 let tipState = false
 
@@ -215,23 +222,9 @@ const triTone = () => {
     }
 }
 
-/**
- * 同步好友信息，保存头像地址等
- */
-const syncFriends = () => {
-    getFriends().then(res => {
-        res.map(item => {
-            console.log('item', item);
-            store.dispatch('updateFriends', item)
-        })
-    })
-}
-
 export default {
     initIm,
     connect,
     setNotifyBadge,
-    syncFriends,
-    syncUserInfo,
     ...message
 }

utils/im/models.js

@@ -9,12 +9,12 @@ const friendModel = usqlite.model('friends', {
         unique: true
     },
     name: String,
-    address: String,
     hash: {
         type: String,
         unique: true
     },
-    portraitUrl: String
+    portraitUrl: String,
+    localAvatar: String
 })
 
 export default {