fashion-ssr-vue3/pages/categories/useData.ts

/** @format */

import { getGoodsListApi } from "~/api/model/goods"
import { PageSizeEnum } from "~/enums/sizeEnum"
import { getCategoryListApi } from "~/api/model/common"
import { updateURLParameter } from "~/utils/object"

type FeatureType = "Newest" | "Trending" | " Exlusive"

export function useData() {
  const categories = ref<any>([])
  const goodsList = ref<any>([])
  const selectedCategory = ref()
  const page_size = ref(15)
  const currentPage = ref(PageSizeEnum.PAGE)
  const total = ref()
  const top_data = ref({
    entityQty: 0,
  })
  const form = ref<any>({
    orderby: "",
    trendingCollections: [],
    recommend: [],
    texture: [],
    categoryId: "",
  })
  const getCategories = async () => {
    const route = useRoute()
    const slug = route.params.id
    const data = await getCategoryListApi({ slug, all: true, np: 1 })
    top_data.value = data.shift()
    categories.value = data
    top_data.value.entityQty = data.reduce((total: number, item: any) => {
      total += item.entityQty
      return total
    }, 0)
  }
  const getGoodsList = async (
    params?: any,
    pageNo = currentPage.value,
    pageSize = page_size.value
  ) => {
    const data: any = await getGoodsListApi({
      ...params,
      pageNo,
      pageSize,
    })
    total.value = data.total
    currentPage.value = data.current
    data.records.forEach((item: any) => {
      if (form.value.recommend.length && item.recommend) {
        if (item.recommend.includes(form.value.recommend[0]))
          item.recommend = form.value.recommend[0]
      }
    })
    goodsList.value = data.records
  }

  const handleSelectedCategory = (value: any) => {
    selectedCategory.value = value
    form.value.categoryId = selectedCategory.value
    getGoodsList(form.value, PageSizeEnum.PAGE, page_size.value)
    // 将地址栏中的secondKey参数改为选中的值key
    const route = useRoute()
    const secondLevel = route.query.secondKey
    if (secondLevel) {
      updateURLParameter("secondKey", value)
    }
  }

  const handleSelectedFilters = (type: any, value: any) => {
    if (type === "clearAll") {
      form.value.recommend = []
      form.value.texture = []
      form.value.trendingCollections = []
    } else {
      ;(form.value as any)[type] = value
    }
    getGoodsList(form.value, PageSizeEnum.PAGE, page_size.value)
  }

  const handleOrderBy = (value: any) => {
    ;(form.value as any).orderby = value
    getGoodsList(form.value, PageSizeEnum.PAGE, page_size.value)
  }

  const changePage = (current: number, size: number) => {
    if (!selectedCategory.value) {
      const route = useRoute()
      selectedCategory.value = route.query.key
    }
    form.value.categoryId = selectedCategory.value
    getGoodsList(form.value, current, size)
    const dom: any = document.getElementById("app-scroller")
    dom.scrollTo({
      top: 400,
      behavior: "smooth",
    })
  }

  return {
    goodsList,
    getCategories,
    categories,
    selectedCategory,
    page_size,
    changePage,
    currentPage,
    total,
    top_data,
    form,
    getGoodsList,
    handleSelectedCategory,
    handleSelectedFilters,
    handleOrderBy,
  }
}