搜索结果列表页面开发

src/components/historyRecord/index.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { ref, nextTick, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { getSearchHistory, delSearchHistory } from '@/api/home';
+import { useInfiniteScroll } from '@vueuse/core';
+defineOptions({ name: 'modal-searchHistory' });
+const visiable = ref<boolean>(false);
+const searchRecord = ref<any[]>([]);
+const loading = ref(false);
+const router = useRouter();
+import microApp from '@micro-zoe/micro-app';
+
+const handleRec = (rec:any, index: number) => { // 历史记录点击
+  if (microApp.router.current.has('micoro-app-homeweb-app')) {
+    microApp.router.push({
+      name: 'micoro-app-homeweb-app',
+      path: router.resolve({ name: 'search', query: { val: rec.title, threadId: rec.thread_id, type: 'chat' }}).href
+    });
+  } else {
+    router.push({
+      name: 'search',
+      query: { val: rec.title, threadId: rec.thread_id, type: 'chat' }
+    });
+  }
+  close();
+};
+
+const open = () => {
+  visiable.value = true;
+  reset();
+};
+const close = () => {
+  visiable.value = false;
+};
+const delRec = async(rec:any, index:number) => { // 删除历史记录
+  const res = await delSearchHistory({ thread_id: rec.thread_id });
+  if (res.data) {
+    searchRecord.value.splice(index, 1);
+  }
+};
+
+const pageSize = ref(20);
+const pageNum = ref(1);
+const hasMore = ref(true);
+const getHistory = async() => {
+  if (!hasMore.value || loading.value) return;
+  loading.value = true;
+  const params = {
+    per_page: pageSize.value,
+    page: pageNum.value
+  };
+  const res = await getSearchHistory(params);
+  loading.value = false;
+  if (res.data) {
+    const { content } = res.data.data;
+    searchRecord.value = searchRecord.value.concat(content);
+    if (content.length < pageSize.value) {
+      hasMore.value = false;
+    } else if (!isInitScroll.value) {
+      // 初始化滚动事件
+      setInfiniteScroll();
+      isInitScroll.value = true;
+    }
+  }
+};
+
+const historyList = ref(null);
+const isInitScroll = ref(false);
+const setInfiniteScroll = () => {
+  nextTick(() => {
+    useInfiniteScroll(historyList, () => getMoreList());
+  });
+};
+
+const getMoreList = () => {
+  if (loading.value || !hasMore.value) return;
+  pageNum.value += 1;
+  getHistory();
+};
+
+const reset = () => {
+  pageNum.value = 1;
+  searchRecord.value = [];
+  isInitScroll.value = false;
+  hasMore.value = true;
+  getHistory();
+};
+
+defineExpose({
+  open,
+  close
+});
+</script>
+
+<template>
+    <d-modal v-model="visiable" :draggable="false" class="modal-history-root rounded-md" :show-close="false" @close="close">
+        <template #header>
+            <div class="flex items-center justify-between py-[20px] px-[16px] text-[#000] bg-[#F9F9FB] rounded-md">
+                <div class="flex flex-initial text-large font-semibold"><span>搜索记录</span></div>
+                <div @click="close"><Icon name="gt-line-close" class="cursor-pointer"/></div>
+            </div>
+        </template>
+        <div ref="historyList" class="record-table max-h-[350px] min-h-[201px]">
+          <DataPanel emptyText="暂无历史记录" :empty="!searchRecord.length && !loading" skeleton>
+            <div class="search-rec" :title="rec.title" v-for="(rec,index) in searchRecord" :key="rec.thread_id" @click="handleRec(rec,index)">
+            <div class="search-rec-item py-2 px-2 cursor-pointer flex items-center justify-between">
+              <div class="ellipsis-three-line"><span>{{ rec.title }}</span></div>
+              <div @click.stop="delRec(rec,index)"><Icon class="del-btn" name="gt-line-delete"/></div>
+            </div>
+            </div>
+          </DataPanel>
+          <d-skeleton v-if="loading">
+            <gc-skeleton-item v-for="x in 3" :key="x" class="h-[24px] rounded-[27px] my-2" :style="{width:`calc(100% - ${100 + 60*Math.random()}px)`}"/>
+          </d-skeleton>
+        </div>
+    </d-modal>
+</template>
+<style lang="scss">
+.modal-history-root{
+    width: 640px !important;
+    @media screen and (max-width:768px) {
+        width: calc(100vw - 16px * 2) !important;
+    }
+    .record-table{
+      overflow-y:auto;
+      .search-rec {
+        &:not(:last-child){
+          @apply border-b border-gray-300;
+        }
+        &-item{
+          font-weight: 500;
+          border-radius: 4px;
+          overflow: hidden;
+          color: #3B3E55;
+          font-family: PingFang SC;
+          font-size: 16px;
+          font-weight: 500;
+          .del-btn{display:none;}
+          &:hover{
+            transition: .3s;
+            color:#000;
+            background-color: rgba(188, 188, 208, 0.2);
+            .del-btn{display:block;color:#DA203E !important;}
+          }
+        }
+      }
+    }
+}
+</style>