u

code/link/link-frontend/src/views/im/index.vue

@@ -1,7 +1,42 @@
 <script setup>
 import { Search } from '@element-plus/icons-vue'
+import { onMounted, ref } from 'vue'
 import Avatar from '@/components/avatar.vue'
 import Icon from '@/components/icon.vue'
+import { axiosGet, axiosPost } from '@/utils/axios'
+import { useUserStore } from '../../stores/userStore'
+import { useWebSocket } from '../../stores/websocketStore'
+
+const websocket = useWebSocket()
+const userStore = useUserStore()
+
+const friendList = ref([])
+const groupList = ref([])
+onMounted(async () => {
+  const userid = userStore.userInfo.userid
+
+  const friendSql = `
+                SELECT 
+                    f.*, 
+                    u.b_name,
+                    m.b_content AS last_message,
+                    m.b_SendTime AS last_message_time
+                FROM IM_Friends f
+                INNER JOIN b_user u 
+                    ON f.b_frienduser_id = u.b_id
+                LEFT JOIN IM_PrivateMessages m
+                    ON f.b_last_message_id = m.b_id
+                WHERE f.b_user_id = '${userid}';
+              `
+
+  const friendRes = await axiosGet('/selectlistbysql', {
+    sql: friendSql,
+  })
+
+  if (friendRes.data.records) {
+    friendList.value = friendRes.data.records
+  }
+})
 </script>
 
 <template>
@@ -26,10 +61,13 @@ import Icon from '@/components/icon.vue'
           <Avatar name="User" />
           <div class="im__user-info">
             <div class="im__user-name">
-              用户A
+              {{ userStore.userInfo.username }}
             </div>
-            <div class="im__user-status im__user-status--online">
-              <span>在线</span>
+            <div
+              class="im__user-status"
+              :class="websocket.isConnected.value ? 'im__user-status--online' : 'im__user-status--offline'"
+            >
+              <span>{{ websocket.isConnected.value ? '在线' : '离线' }}</span>
             </div>
           </div>
         </div>
@@ -350,6 +388,9 @@ import Icon from '@/components/icon.vue'
         .im__user-status--online {
           color: #4caf50;
         }
+        .im__user-status--offline {
+          color: #666;
+        }
       }
     }
   }