IM 部分页面逻辑，聊天列表-详情页

apis/interfaces/im.js

@@ -2,19 +2,27 @@ import {
     request
 } from '../index'
 
+const getImToken = () => {
+    return request({
+        url: 'im/token',
+    }, true)
+}
+
 const getFriends = () => {
     return request({
         url: 'im/friends',
-    })
+    }, true)
 }
 
 const getUserInfo = async (targetId) => {
-    const [err, res] = await request({
+    const [err, res] = await uni.request({
-        url: 'im/userInfo/' + targetId,
+        url: 'http://api.zh.shangkelian.cn/api/im/userInfo/' + targetId,
     })
-    return res
+    return res.data.data
 }
 
 export {
-    getFriends
+    getImToken,
+    getFriends,
+    getUserInfo
 }

pages.json

@@ -384,20 +384,12 @@
                         "buttons": [{
                             "float": "right",
                             "fontSrc": "/static/uniicons.ttf",
-                            "text": "\ue64d"
+                            "text": "\ue607"
                         }]
                     }
                 }
             }
         },
-        {
-            "path": "pages/im/chum",
-            "name": "ImChum",
-            "style": {
-                "navigationBarTitleText": "好友",
-                "enablePullDownRefresh": false
-            }
-        },
         {
             "path": "pages/wallet/add",
             "name": "WalletAdd",

pages/im/chum.vue

@@ -1,19 +0,0 @@
-<template>
-	<view>
-		好友列表
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				
-			};
-		}
-	}
-</script>
-
-<style lang="scss">
-
-</style>

pages/im/detail.vue

@@ -184,6 +184,7 @@
 
     .scroll {
         height: calc(100vh - 55px);
+        width: 100vw;
         padding: 0 $uni-spacing-col-lg;
     }
 
@@ -242,11 +243,11 @@
         }
 
         .msg {
-            font-size: $uni-font-size-lg;
+            font-size: $uni-font-size-base;
             margin: $uni-spacing-col-base;
-            padding: $uni-spacing-col-base + 5rpx;
+            padding: $uni-spacing-col-lg;
             word-wrap: break-word;
-            width: 70%;
+            width: 60%;
             border-radius: $uni-border-radius-base;
             position: relative;
 

pages/im/friends/index.vue

@@ -0,0 +1,14 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script>
+    export default {
+
+    }
+</script>
+
+<style lang="scss" scoped>
+</style>

pages/im/friends/info.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages/im/friends/mine.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages/im/index.vue

@@ -1,43 +1,43 @@
 <template>
     <div>
-        <u-popup overlay mode="left" closeable closeOnClickOverlay :show="showLeft" @close="showLeft = false">
+        <div v-if="$store.state.token != ''">
-            <leftMenu></leftMenu>
+            <div class="container">
-        </u-popup>
+                <div class="msg-item u-border-bottom" v-for="(item, index) in conversations" @click="toDetail(item)">
-
+                    <div class="avatar">
-        <div class="container">
+                        <u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-7, -7]"
-            <div class="msg-item u-border-bottom" v-for="(item, index) in conversations" @click="toDetail(item)">
+                            :value="item.unreadMessageCount" />
-                <div class="avatar">
+                        <u-avatar shape="square" :src="friend(item.targetId).portraitUrl"></u-avatar>
-                    <u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-7, -7]"
+                    </div>
-                        :value="item.unreadMessageCount" />
+                    <div class="content ">
-                    <u-avatar shape="square" :src="friend(item.targetId).portraitUrl"></u-avatar>
+                        <div class="name">
-                </div>
+                            <h3>{{ friend(item.targetId).name }}</h3>
-                <div class="content ">
+                            <span class="time">{{ item.sentTime|timeCustomCN }}</span>
-                    <div class="name">
+                        </div>
-                        <h3>{{ friend(item.targetId).name }}</h3>
+                        <div class="u-line-1">{{ item.latestMessage.content }}</div>
-                        <span class="time">{{ item.sentTime|timeCustomCN }}</span>
                     </div>
-                    <div class="u-line-1">{{ item.latestMessage.content }}</div>
                 </div>
             </div>
+            <u-loadmore status="nomore" />
+        </div>
+        <div v-else>
+            <button @click="toLogin">去登录</button>
         </div>
-        <u-loadmore status="nomore" />
     </div>
 </template>
 
 <script>
     import * as RongIMLib from '@rongcloud/imlib-uni'
     import im from '@/utils/im/index.js'
-    import leftMenu from './components/left_menu.vue'
+    import userAuth from '@/public/userAuth'
+    import {
+        getImToken
+    } from '@/apis/interfaces/im.js'
 
     export default {
-        components: {
-            leftMenu
-        },
         data() {
             return {
                 isShown: true, // 当前页面显示状态
-                conversations: [], // 会话列表
+                conversations: [] // 会话列表
-                showLeft: false
             }
         },
         computed: {
@@ -47,7 +47,12 @@
                 }
             }
         },
-        onLoad() {},
+        onLoad() {
+            getImToken().then(res => {
+                im.syncFriends()
+                im.connect(res.token, res.userInfo)
+            })
+        },
         onShow() {
             this.getConversationList()
             this.isShown = true
@@ -57,7 +62,6 @@
         },
         onNavigationBarButtonTap(e) {
             if (e.index == 0) {
-                this.showLeft = true
             }
         },
         watch: {
@@ -68,6 +72,15 @@
             }
         },
         methods: {
+            // 检查登录
+            toLogin() {
+                if (this.$store.state.token === '') {
+                    const Auth = new userAuth()
+                    Auth.Login()
+                    return false
+                }
+                return true
+            },
             getFriend(targetId) {
                 return this.$store.getters.userInfo(targetId)
             },

store/modules/im.js

@@ -19,7 +19,7 @@ export default {
             if (state.friends.filter((item) => item.userId == targetId)[0]) {
                 return state.friends.filter((item) => String(item.userId) == targetId)[0]
             } else {
-                return getUserInfo()
+                return getUserInfo(targetId)
             }
         },
         sender(state) {

utils/im/index.js

@@ -45,6 +45,10 @@ const connect = (token, userInfo) => {
     setNotifyBadge()
 }
 
+const disconnect = () => {
+    RongIMLib.disconnect()
+}
+
 const addListeners = () => {
     // 添加连接状态监听函数 
     RongIMLib.addConnectionStatusListener((res) => {