overseas-jsm-mall-front/src/pages/home/index.vue

<template>
  <div class="home-page">
    <header>
      <Notice v-if="mainData.noticeContent" :content="mainData.noticeContent" />
      <Toolbar
        :isLogin="isLogin"
        :storageId="storageId"
        @contact-us="contactUsFn"
      />
      <HandleBar
        :isLogin="isLogin"
        :storageId="storageId"
        :storeList="storeList"
        @change-store="changeStoreFn"
      />
      <Category :tabs="categoryList" :tab-index="tabIndex" @change="changeTabsFn" />
    </header>
    <main class="app-main__content">
      <RouterView />
    </main>
    <LinkList v-if="mainData.linkList" :data="mainData.linkList" />
    <LevelMessage :open="mainData.msgOpen" :contact-us="mainData.contactUs" @close="mainData.msgOpen = false" />
    <a-float-button
      shape="circle"
      type="primary"
      :style="{
        right: '20px',
        bottom: '20px'
      }"
      @click="handleLevelMsg"
    >
      <template #icon>
        <MessageOutlined />
      </template>
    </a-float-button>
    <a-float-button
      v-if="showBackIcon"
      shape="circle"
      type="primary"
      :style="{
        right: '70px',
        bottom: '20px'
      }"
      @click="router.back()"
    >
      <template #icon>
        <ArrowLeftOutlined />
      </template>
    </a-float-button>
  </div>
</template>

<script setup lang="js">
import Notice from './components/Notice.vue';
import Toolbar from './components/Toolbar.vue';
import HandleBar from './components/HandleBar.vue';
import Category from './components/Category.vue';
import LinkList from './components/LinkList.vue';
import LevelMessage from './components/LevelMessage.vue';
import { MessageOutlined, ArrowLeftOutlined } from '@ant-design/icons-vue';
import { onMounted, computed, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '@/store/user';
import { useHomeStore } from '@/store/home';
import { useGoodsStore } from '@/store/goods';
import { useCategoryStore } from '@/store/category';
import { useStorageStore } from '@/store/storage';
import { getNotice } from '@/api/common';
import { getAmityList } from '@/api/home';

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const homeStore = useHomeStore();
const goodsStore = useGoodsStore();
const categoryStore = useCategoryStore();
const storageStore = useStorageStore();

const tabIndex = computed(() => homeStore.tabIndex);
const categoryList = computed(() => categoryStore.list);
const isLogin = computed(() => {
  return userStore.userInfo != null
});
const showBackIcon = computed(() => route.path !== '/category');
const storeList = computed(() => storageStore.list);
const storageId = computed(() => storageStore.activedId);

const mainData = reactive({
  linkList: [],
  noticeContent: '',
  disabled: false,
  msgOpen: false,
  contactUs: false
})

const changeTabsFn = async (newTabIndex) => {
  homeStore.changeTab(newTabIndex);
  goodsStore.resetParams();
  goodsStore.resetListData();
  if (showBackIcon.value) {
    router.back()
  }
  const tabCategoryId = categoryList.value[newTabIndex]?.categoryId;
  if (tabCategoryId) {
    await categoryStore.fetchChildListData({ type: '1', parentId: tabCategoryId });
    if (categoryStore.childList && categoryStore.childList.length > 0) {
      goodsStore.updateParams({
        categoryId: categoryStore.childList[0].categoryId || ''
      })
      goodsStore.fetchListData();
    }
  }
}

/**
 * 切换仓库, 切换仓库后需要将一切数据都重新加载,并且回到当前主页
 */
const changeStoreFn = row => {
  storageStore.updateActivedId(row.storageId);
  window.location.href = '/';
}

const fetchNoticeData = async () => {
  const res = await getNotice();
  mainData.noticeContent = res.data || '';
}

//  获取友情链接
const fetchgetAmityList = async () => {
  const res = await getAmityList()
  mainData.linkList = res.data || []
}

const handleLevelMsg = () => {
  mainData.msgOpen = true;
  mainData.contactUs = false;
}

const contactUsFn = () => {
  mainData.msgOpen = true;
  mainData.contactUs = true;
}

onMounted(async () => {
  await storageStore.fetchListData();
  // 判断本地存储仓库id是否存在
  if (storeList.value && storeList.value.length > 0) {
    if (storageStore.activedId) {
      const isExist = storeList.value.find(item => item.storageId == storageStore.activedId);
      if (!isExist) {
        storageStore.updateActivedId(storeList.value[0].storageId);
      }
    }
    fetchNoticeData();
    fetchgetAmityList();
    isLogin.value && userStore.fetchUserDetail();
    await categoryStore.fetchListData();
    const tabCategoryId = categoryList.value[tabIndex.value]?.categoryId;
    if (tabCategoryId) {
      await categoryStore.fetchChildListData({ type: '1', parentId: tabCategoryId });
      if (categoryStore.childList && categoryStore.childList.length > 0) {
        goodsStore.updateParams({
          categoryId: categoryStore.childList[0].categoryId || ''
        })
        goodsStore.fetchListData();
      }
    }
  }
})

</script>

<style lang="less" scoped>
.app-main__content {
  padding: 20px;
}

</style>