fashion-ssr-vue3/components/business/categories/list.vue

<!-- @format -->

<script lang="ts" setup>
import templateTwo from './comp/temp2.vue'
import templateOne from './comp/temp1.vue'
import { Api } from '@/api/model/url'

const categoryList = ref<any>([])
const list_column_one = ref<any>([])
const list_column_two = ref<any>([])
const list_column_three = ref<any>([])

const requestUrl = `${process.env.MY_ENV_DEV_URL}${Api.CategoryList}`
const { data, pending, error, refresh } = await useAsyncData(
  'category-catalogue',
  () => $fetch(`${requestUrl}`, { params: { all: true } }),
)
categoryList.value = data.value?.result || []
// 获取categoryList的前3个元素给到list_column_one,并且不改变原数组categoryList
list_column_one.value = categoryList.value.slice(0, 3)
list_column_two.value = categoryList.value.slice(3, 5)
list_column_three.value = categoryList.value.slice(5, 8)
console.log('categoryList', categoryList.value, list_column_one.value, list_column_two.value, list_column_three.value)
</script>

<template>
  <div class="bg-#fff py-120px">
    <div class="w-1200-auto text-center">
      <h2 class="text-36px fw-800 text-#333 !mb-20px custom-title-font">
        Access Category-Driven <span class="custom-title-bg">Solutions</span>
      </h2>
      <div class="text-#999 text-22px mb-80px">
        For viral-ready, trend-optimized products - Ready to download！
      </div>
      <div class="flex gap-40px text-left">
        <div class="flex flex-col gap-40px flex-1">
          <div v-for="(item, index) in list_column_one" :key="index">
            <template-one v-if="index % 2 === 0" :item />
            <template-two v-else :item />
          </div>
        </div>
        <div class="flex flex-col gap-40px flex-1">
          <div v-for="(item, index) in list_column_two" :key="index">
            <template-two :item />
          </div>
        </div>
        <div class="flex flex-col gap-40px flex-1">
          <div v-for="(item, index) in list_column_three" :key="index">
            <template-one v-if="index % 2 === 0" :item />
            <template-two v-else :item />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>

</style>