fashion-ssr-vue3/components/business/home/week.vue

<!-- @format -->

<script lang="ts" setup>
import { PageSizeEnum } from '~/enums/sizeEnum'
import {
  getGoodsHotSaleListApi,
  getGoodsListApi,
  getGoodsTrendingListApi,
} from '~/api/model/goods'

const goodsList = ref<any>([])
const labelGroup = ref<any>([
  {
    label: 'New Arrivals',
    value: 'arrivals',
  },
  {
    label: 'Bestsellers',
    value: 'hotSale',
  },
  {
    label: 'Trending',
    value: 'trends',
  },
])
const active = ref<string>('arrivals')
async function getGoodsList(params?: any, pageNo = PageSizeEnum.PAGE, pageSize = 8) {
  const fetchTask: any
    = active.value === 'arrivals'
      ? getGoodsListApi
      : active.value === 'trends'
        ? getGoodsTrendingListApi
        : getGoodsHotSaleListApi
  const data = await fetchTask({
    ...params,
    pageNo,
    pageSize,
  })
  goodsList.value = data.records
}
function selectLabel(val: string) {
  active.value = val
  getGoodsList()
}

getGoodsList()
</script>

<template>
  <div class="pt-120px text-center">
    <h2 class="fw-600 text-40px text-#363C40 custom-title-font">
      Products of The Week
    </h2>
    <div class="mt-20px w-500px mx-auto text-#999 text-16px lh-24px">
      Navigate through our diverse range of categories to find the products that fit your retail needs.
    </div>
    <div class="mt-40px mb-60px">
      <div class="flex mb-40px gap-85px justify-center">
        <div
          v-for="item in labelGroup"
          :key="item.value"
          class="cursor-pointer hover:text-#C58C64 pos-relative after:content-empty after:left-30% after:right-30% after:bottom--10px after:h-2px after:bg-#C58C64"
          :class="active === item.value && 'text-#C58C64 after:pos-absolute'"
          @click="selectLabel(item.value)"
        >
          <h3>
            {{ item.label }}
          </h3>
        </div>
      </div>
      <div class="grid grid-gap-66px grid-cols-4">
        <div v-for="item in goodsList" :key="item.id">
          <common-goods-item :item @update:login="getGoodsList" />
        </div>
      </div>
      <!-- <div class="flex justify-center items-center cursor-pointer">
        <div class="underline fw-500 text-32px hover:text-#CC9879">
          View All
        </div>
        <svgo-arrow class="!w-12px !h-12px ml-14px" />
      </div> -->
    </div>
  </div>
</template>