搜索页面 ts 处理

核心代码

window.addEventListener("DOMContentLoaded", () => {
  const APP_ID = 30054;
  const HLX_SERCH_URL = "/foreground-gateway/retrieval/intensify/search";

  const { keyword, currentPage = 1, pageSize = 20 } = parseSearchParams();

  const { data, signature, nonce, timestamp } = createHlxSearchParam(APP_ID, {
    keyword,
    currentPage,
    pageSize,
  });

  const url = `${HLX_SERCH_URL}?signature=${signature}&nonce=${nonce}&timestamp=${timestamp}`;

  post(url, data, {
    onSuccess: (data) => {
      const dataObj: IHlxSerchApiResponse = JSON.parse(data);

      const { code, dataList = [] } = dataObj;

      if (+code !== 200) {
        return showError("查询失败，请稍后重试");
      }

      if (!Array.isArray(dataList)) {
        return showError("获取到的查询数据异常，请稍后重试");
      }

      hlxSearchRenderList(dataObj);
      hlxSearchRenderPagination(dataObj);
    },
    onError: (error) => {
      console.error(error);
    },
  });
});

列表渲染根据 UI 不同而不同，这里只是一个示例

function hlxSearchRenderList(data: IHlxSerchApiResponse) {
  const colList = document.querySelector(".hlx-search-engine__item");
  if (!colList) {
    return showError("缺少承载查询列表的 DOM 节点 .hlx-search-engine__item");
  }

  const { dataList = [] } = data;

  for (const item of dataList) {
    const rItem = hlxSearchRenderSearchItem(item, data);

    if (rItem) {
      colList.appendChild(rItem);
    }
  }
}

function hlxSearchRenderSearchItem(
  item: IHlxSearchDataItem,
  data: IHlxSerchApiResponse
) {
  const { title, content, url, publishTime, newsColumnList } = item;

  const date = new Date(+publishTime);
  const dateStr = `${date.getFullYear()}/${
    date.getMonth() + 1
  }/${date.getDate()}`;

  const rItem = document.createElement("div");

  rItem.className = "search-item";

  rItem.innerHTML = `<a class="hlx-search-result-item" href="${url.pc}" title="${title}">
      <div class="title"> ${title} </div>
      <div class="info">
        <span> ${url.pc} </span>
        <span> ${dateStr} </span>
        <span>来源：重庆档案信息网</span>
      </div>
    </a>`;

  return rItem;
}

分页处理

function hlxSearchRenderPagination(data: IHlxSerchApiResponse) {
  const { currentPage = 1, pageSize = 0, totalSize = 0 } = data;

  // 没有数据的时候不渲染分页
  if (!totalSize) {
    return;
  }

  const param = parseSearchParams();

  /**
   * 总页数
   */
  const totalPage = Math.ceil(totalSize / pageSize);

  const getHrefByPage = function (p: number) {
    const base = window.location.origin + window.location.pathname;

    return (
      base +
      "?keyword=" +
      param.keyword +
      "&currentPage=" +
      p +
      "&pageSize=" +
      pageSize
    );
  };

  new HlxWanxPagination({
    search: {
      currentPage: +currentPage,
      totalPage: totalPage,
      pageSize: +pageSize,
    },
    txt: { toPagePrefix: "", toPageSuffix: "" },

    onClickNext: function () {
      if (currentPage >= totalPage) {
        return showError("已经是最后一页了");
      }

      window.location.href = getHrefByPage(currentPage + 1);
    },
    onClickPrevious: function () {
      if (currentPage <= 1) {
        return showError("已经是第一页了");
      }
      window.location.href = getHrefByPage(currentPage - 1);
    },
    onClickGo: function (page) {
      if (page > totalPage) {
        showError("页码超出范围");

        // 阻止默认行为
        return;
      }

      window.location.href = getHrefByPage(page);
    },
    onClickPage: function (page) {
      window.location.href = getHrefByPage(page);
    },
  }).render("#hlx-pagination");
}

搜索页面 ts 处理 ​

搜索页面 ts 处理