diff --git a/pages.json b/pages.json
index f055dff..7acd702 100644
--- a/pages.json
+++ b/pages.json
@@ -733,10 +733,13 @@
 				"pagePath": "pages/index/index"
 			},
             {
-				"pagePath": "pages/index/category"
-            },
+				"pagePath": "pages/index/list"
+			},
 			{
-				"pagePath": "pages/index/cart"
+				"pagePath": "pages/index/room"
+			},
+			{
+				"pagePath": "pages/index/chat"
 			},
 			{
 				"pagePath": "pages/index/user"
diff --git a/pages/index/chat.vue b/pages/index/chat.vue
index 9f165bf..fbe2767 100644
--- a/pages/index/chat.vue
+++ b/pages/index/chat.vue
@@ -1,9 +1,223 @@
 <template>
-  <s-layout title="聊天" tabbar="/pages/index/chat" navbar="custom" :bgStyle="{ color: '#fff' }">
-    聊天
+  <s-layout
+    class="chat-wrap"
+    :title="!isReconnecting ? '连接客服成功' : '会话重连中'"
+    navbar="inner"
+    tabbar="/pages/index/chat"
+  >
+    <!--  覆盖头部导航栏背景颜色  -->
+    <view class="page-bg" :style="{ height: sys_navBar + 'px' }"></view>
+    <!--  聊天区域  -->
+    <MessageList ref="messageListRef">
+      <template #bottom>
+        <message-input
+          v-model="chat.msg"
+          @on-tools="onTools"
+          @send-message="onSendMessage"
+          :auto-focus="false"
+          :show-char-count="true"
+          :max-length="500"
+        ></message-input>
+      </template>
+    </MessageList>
+    <!--  聊天工具  -->
+    <tools-popup
+      :show-tools="chat.showTools"
+      :tools-mode="chat.toolsMode"
+      @close="handleToolsClose"
+      @on-emoji="onEmoji"
+      @image-select="onSelect"
+      @on-show-select="onShowSelect"
+    >
+      <message-input
+        v-model="chat.msg"
+        @on-tools="onTools"
+        @send-message="onSendMessage"
+        :auto-focus="false"
+        :show-char-count="true"
+        :max-length="500"
+      ></message-input>
+    </tools-popup>
+    <!--  商品订单选择  -->
+    <SelectPopup
+      :mode="chat.selectMode"
+      :show="chat.showSelect"
+      @select="onSelect"
+      @close="chat.showSelect = false"
+    />
   </s-layout>
 </template>
 
-<script setup></script>
+<script setup>
+  import MessageList from '@/pages/chat/components/messageList.vue';
+  import { reactive, ref, toRefs } from 'vue';
+  import sheep from '@/sheep';
+  import ToolsPopup from '@/pages/chat/components/toolsPopup.vue';
+  import MessageInput from '@/pages/chat/components/messageInput.vue';
+  import SelectPopup from '@/pages/chat/components/select-popup.vue';
+  import {
+    KeFuMessageContentTypeEnum,
+    WebSocketMessageTypeConstants,
+  } from '@/pages/chat/util/constants';
+  import FileApi from '@/sheep/api/infra/file';
+  import KeFuApi from '@/sheep/api/promotion/kefu';
+  import { useWebSocket } from '@/pages/chat/util/useWebSocket';
+  import { jsonParse } from '@/sheep/helper/utils';
 
-<style lang="scss" scoped></style>
+  const sys_navBar = sheep.$platform.navbar;
+
+  const chat = reactive({
+    msg: '',
+    scrollInto: '',
+    showTools: false,
+    toolsMode: '',
+    showSelect: false,
+    selectMode: '',
+  });
+
+  // 发送消息
+  async function onSendMessage() {
+    if (!chat.msg) return;
+    try {
+      const data = {
+        contentType: KeFuMessageContentTypeEnum.TEXT,
+        content: JSON.stringify({ text: chat.msg }),
+      };
+      await KeFuApi.sendKefuMessage(data);
+      chat.msg = '';
+    } finally {
+      chat.showTools = false;
+    }
+  }
+
+  const messageListRef = ref();
+
+  //======================= 聊天工具相关 start =======================
+
+  function handleToolsClose() {
+    chat.showTools = false;
+    chat.toolsMode = '';
+  }
+
+  function onEmoji(item) {
+    chat.msg += item.name;
+  }
+
+  // 点击工具栏开关
+  function onTools(mode) {
+    if (isReconnecting.value) {
+      sheep.$helper.toast('您已掉线！请返回重试');
+      return;
+    }
+
+    // 第二次点击关闭
+    if (chat.showTools && chat.toolsMode === mode) {
+      handleToolsClose();
+      return;
+    }
+    // 切换工具栏
+    if (chat.showTools && chat.toolsMode !== mode) {
+      chat.showTools = false;
+      chat.toolsMode = '';
+    }
+    // 延迟打开等一下过度效果
+    setTimeout(() => {
+      chat.toolsMode = mode;
+      chat.showTools = true;
+    }, 200);
+  }
+
+  function onShowSelect(mode) {
+    chat.showTools = false;
+    chat.showSelect = true;
+    chat.selectMode = mode;
+  }
+
+  async function onSelect({ type, data }) {
+    let msg;
+    switch (type) {
+      case 'image':
+        const res = await FileApi.uploadFile(data.tempFiles[0].path);
+        msg = {
+          contentType: KeFuMessageContentTypeEnum.IMAGE,
+          content: JSON.stringify({ picUrl: res.data }),
+        };
+        break;
+      case 'goods':
+        msg = {
+          contentType: KeFuMessageContentTypeEnum.PRODUCT,
+          content: JSON.stringify(data),
+        };
+        break;
+      case 'order':
+        msg = {
+          contentType: KeFuMessageContentTypeEnum.ORDER,
+          content: JSON.stringify(data),
+        };
+        break;
+    }
+    if (msg) {
+      // 发送消息
+      // scrollBottom();
+      await KeFuApi.sendKefuMessage(msg);
+      await messageListRef.value.refreshMessageList();
+      chat.showTools = false;
+      chat.showSelect = false;
+      chat.selectMode = '';
+    }
+  }
+
+  //======================= 聊天工具相关 end =======================
+  const { options } = useWebSocket({
+    // 连接成功
+    onConnected: async () => {},
+    // 收到消息
+    onMessage: async (data) => {
+      const type = data.type;
+      if (!type) {
+        console.error('未知的消息类型：' + data);
+        return;
+      }
+      // 2.2 消息类型：KEFU_MESSAGE_TYPE
+      if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
+        // 刷新消息列表
+        await messageListRef.value.refreshMessageList(jsonParse(data.content));
+        return;
+      }
+      // 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
+      if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
+        console.log('管理员已读消息');
+        // 更新消息已读状态
+        sheep.$helper.toast('客服已读您的消息');
+      }
+    },
+  });
+  const isReconnecting = toRefs(options).isReconnecting; // 重连状态
+</script>
+
+<style scoped lang="scss">
+  .chat-wrap {
+    .page-bg {
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-color: var(--ui-BG-Main);
+      z-index: 1;
+    }
+
+    .status {
+      position: relative;
+      box-sizing: border-box;
+      z-index: 3;
+      height: 70rpx;
+      padding: 0 30rpx;
+      background: var(--ui-BG-Main-opacity-1);
+      display: flex;
+      align-items: center;
+      font-size: 30rpx;
+      font-weight: 400;
+      color: var(--ui-BG-Main);
+    }
+  }
+</style>