zhusen / kelude-outside-web · Files

<script setup lang="ts">
import { onMounted, watchEffect, toValue } from 'vue'

import { RouterView } from 'vue-router'

import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { useCategoryStore } from './stores/category'
import { useProductListStore } from './stores/product_list'

import { isMobile } from './utils'
import MobileHeader from './components/MobileHeader.vue'

const categoryStore = useCategoryStore()
const productListStore = useProductListStore()

onMounted(() => {
  // 请求分类列表
  categoryStore.getList()
})

watchEffect(() => {
  if (toValue(categoryStore?.list)) {
    const cId = categoryStore?.list?.[0]?.list?.[0]?.id
    if (cId) productListStore.updateCategory(cId)
  }
})
</script>

<template>

  <Header v-if="!isMobile()" />
  <MobileHeader v-if="isMobile()" />

  <div class="tw-min-h-[700px]">

    <KeepAlive>
      <RouterView />
    </KeepAlive>

  </div>
  <Footer />
</template>