你用vue写一个带有会话列表并且可以选择用户的微信聊天页,用户有头像、昵称、发送消息的时间,会话列表中有数字角标

以下是一个简单的Vue组件，实现了一个带有会话列表并且可以选择用户的微信聊天页。组件包括一个会话列表和一个聊天窗口，用户可以点击会话列表中的用户头像进入聊天窗口，同时会话列表中会显示未读消息的数量。

<template>
  <div class="chat-container">
    <div class="session-list">
      <div v-for="(user, index) in userList" :key="index" class="session-item" :class="{active: activeIndex === index}" @click="selectUser(index)">
        <img :src="user.avatar" alt="user-avatar">
        <div class="session-info">
          <div class="user-name">{{user.name}}</div>
          <div class="last-message">{{user.lastMessage}}</div>
        </div>
        <div class="unread-count" v-if="user.unreadCount > 0">{{user.unreadCount}}</div>
      </div>
    </div>
    <div class="chat-window">
      <div v-if="selectedUser">
        <div class="header">
          <img :src="selectedUser.avatar" alt="selected-user-avatar">
          <div class="user-name">{{selectedUser.name}}</div>
        </div>
        <div class="message-list">
          <div v-for="(message, index) in selectedUser.messages" :key="index" class="message-item">
            <div class="user-avatar">
              <img :src="message.avatar" alt="user-avatar">
            </div>
            <div class="message-content">
              <div class="user-name">{{message.name}}</div>
              <div class="message-text">{{message.text}}</div>
              <div class="message-time">{{message.time}}</div>
            </div>
          </div>
        </div>
        <div class="message-input">
          <input type="text" placeholder="请输入消息" v-model="newMessage">
          <button @click="sendMessage">发送</button>
        </div>
      </div>
      <div v-else class="empty-chat">请选择一个用户开始聊天</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        {
          name: '用户1',
          avatar: 'user1.png',
          lastMessage: '这是用户1的最后一条消息',
          messages: [
            {
              name: '用户1',
              avatar: 'user1.png',
              text: '你好',
              time: '2022-01-01 10:00:00'
            },
            {
              name: '我',
              avatar: 'my-avatar.png',
              text: '你好，很高兴认识你',
              time: '2022-01-01 10:01:00'
            }
          ],
          unreadCount: 1
        },
        {
          name: '用户2',
          avatar: 'user2.png',
          lastMessage: '这是用户2的最后一条消息',
          messages: [
            {
              name: '用户2',
              avatar: 'user2.png',
              text: '在干什么呢',
              time: '2022-01-01 11:00:00'
            },
            {
              name: '我',
              avatar: 'my-avatar.png',
              text: '我在写代码，你呢',
              time: '202