update

src/components/Chat/Information.vue

@@ -1,12 +1,14 @@
 <script setup>
 import UploadButton from "../upload/UploadButton.vue";
 import XImage from "../XImage/Index.vue";
-import {reactive} from "vue";
+import {reactive, useTemplateRef} from "vue";
 import Api from "../../api";
 import {Message} from "@arco-design/web-vue";
 import useTableQuery from "../../hooks/useTableQuery.js";
 import dayjs from "dayjs";
+import {throttle} from "lodash";
 
+const ChatBoxRef = useTemplateRef('ChatBox');
 const {task} = defineProps({
     task: {
         type: Object,
@@ -29,7 +31,11 @@ const {loading, pagination, initFetchData, fetchData} = useTableQuery({
     parameter: po,
     api: Api.merchant.getExchangeLog,
     callback: (data) => {
-        Object.assign(vo, data);
+        if (data.rows.length === 0) {
+        } else {
+            vo.total = data.total;
+            vo.rows.push(...data.rows);
+        }
     }
 });
 
@@ -43,10 +49,21 @@ const send = async () => {
     form.images.length = 0;
     await fetchData();
 }
+
+const handleScroll = ({target}) => {
+    const {scrollTop, clientHeight, scrollHeight} = target;
+    if (scrollTop + clientHeight >= scrollHeight - 10 && !loading.value) {
+        throttle(() => {
+            pagination.current++;
+        }, 500)();
+    }
+}
 </script>
 
 <template>
-    <div class="size-full flex flex-col gap-[30px]">
+    <div
+        @scroll="handleScroll"
+        class="size-full flex flex-col gap-[30px] max-h-[600px] overflow-auto">
         <div :class="['flex gap-[18px]', v.right === 0 ? 'chat-right' : 'chat-left']" v-for="v in vo.rows">
             <a-image :src="v.people.avatar" class="rounded-[50%] overflow-hidden" width="64px"
                      height="64px"></a-image>
@@ -66,6 +83,9 @@ const send = async () => {
                         </x-image>
                     </div>
                 </div>
+                <div class="msg-state text-[14px] text-[#1D2129] mt-[4px]">
+                    已读
+                </div>
             </div>
         </div>
     </div>
@@ -119,6 +139,26 @@ const send = async () => {
     }
 }
 
+.msg-state {
+    @apply flex items-center gap-[8px];
+    &::before {
+        content: '';
+        @apply block size-[14px] rounded-[50%];
+    }
+}
+
+.read {
+    &::before {
+        @apply bg-[rgb(var(--arcoblue-6))];
+    }
+}
+
+.unRead {
+    &::before {
+        @apply bg-[rgb(var(--orange-6))];
+    }
+}
+
 .chat-left {
 
 }