fashion-ssr-vue3/components/business/goods/productRecommend.vue

<script lang='ts' setup>
import { PageSizeEnum } from '~/enums/sizeEnum'
import {
  getRecommendListOneApi,
  getRecommendListTwoApi,
} from '~/api/model/goods'

const props = defineProps({
  id: { type: String, default: '' },
})
watch(() => props.id, (mId: any) => {
  if (!mId)
    return
  getGoodsListOne({ mId })
  getGoodsListTwo({ mId })
}, {
  immediate: true,
})
const goodsListOne = ref<any>([])
const goodsListTwo = ref<any>([])
async function getGoodsListOne(params?: any, pageNo = PageSizeEnum.PAGE, pageSize = 4) {
  const data: any = await getRecommendListOneApi({
    ...params,
    pageNo,
    pageSize,
  })
  goodsListOne.value = data.records
}
async function getGoodsListTwo(params?: any, pageNo = PageSizeEnum.PAGE, pageSize = 4) {
  const data: any = await getRecommendListTwoApi({
    ...params,
    pageNo,
    pageSize,
  })
  goodsListTwo.value = data.records
}
</script>

<template>
  <div v-if="goodsListOne.length || goodsListTwo.length" class="w-1400px mx-auto mb-160px">
    <h2 class="!mb-60px fw-700 text-40px text-#363C40 text-center custom-title-font">
      Product recommendation
    </h2>
    <div class="grid grid-gap-66px grid-cols-4 mb-66px">
      <div v-for="item in goodsListOne" :key="item.id">
        <common-goods-item :item @update:login="goodsListOne" />
      </div>
    </div>
    <div class="grid grid-gap-66px grid-cols-4">
      <div v-for="item in goodsListTwo" :key="item.id">
        <common-goods-item :item @update:login="goodsListTwo" />
      </div>
    </div>
  </div>
</template>

<style lang='less' scoped>
</style>