解构

pages/im/components/connectionStatus.vue

@@ -0,0 +1,67 @@
+<template>
+        <u-alert type="warning" v-if="connection != 0" :description="description" show-icon />
+</template>
+
+<script>
+    export default {
+        props: {
+            connection: {
+                type: Number,
+                default: 0
+            }
+        },
+        computed: {
+            description() {
+                return this.connectionStatusMap.filter(item => item.index == this.connection)[0].text
+            }
+        },
+        data() {
+            return {
+                connectionStatusMap: [{
+                        index: -1,
+                        text: '网络不可用'
+                    },
+                    {
+                        index: 0,
+                        text: '连接成功'
+                    },
+                    {
+                        index: 1,
+                        text: '连接中'
+                    },
+                    {
+                        index: 2,
+                        text: '未连接'
+                    },
+                    {
+                        index: 3,
+                        text: '用户账号在其它设备登录'
+                    },
+                    {
+                        index: 4,
+                        text: 'TOKEN过期'
+                    },
+                    {
+                        index: 6,
+                        text: '用户被禁用'
+                    },
+                    {
+                        index: 12,
+                        text: '退出登录'
+                    },
+                    {
+                        index: 13,
+                        text: '连接暂时被挂起'
+                    },
+                    {
+                        index: 14,
+                        text: '连接超时'
+                    },
+                ],
+            }
+        }
+    }
+</script>
+
+<style>
+</style>

pages/im/index.vue

@@ -17,10 +17,10 @@
                     </view>
                 </view>
             </view>
-        </view>
-        <u-alert type="warning" v-if="connection != 0" description="网络似乎断开了,请检查网络" :show-icon="true" />
+        </view>
         <!-- content -->
-        <view v-if="$store.state.token !== ''">
+        <view v-if="$store.state.token !== ''">
+            <connection-status :connection="connection" />
             <conversation-list @refresh="getConversationList()" :conversations="conversations" />
         </view>
         <!-- 未登录 -->
@@ -38,7 +38,8 @@
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
     import im from '@/utils/im/index.js'
     import userAuth from '@/public/userAuth'
-    import conversationList from './components/conversationList'
+    import conversationList from './components/conversationList'
+    import connectionStatus from './components/connectionStatus'
 
     export default {
         data() {
@@ -49,7 +50,8 @@
             }
         },
         components: {
-            conversationList
+            conversationList,
+            connectionStatus
         },
         onLoad() {
             // 好友申请数量
@@ -96,7 +98,7 @@
                 RongIMLib.getConversationList([1, 3], count, timestamp, ({
                     code,
                     conversations
-                }) => {
+                }) => {
                     if (code === 0) {
                         this.conversations = conversations
                     }