ieplus-app/src/pagesMain/pages/index/index.vue

<template>
  <ie-page bg-color="white">
    <ie-navbar transparent bg-color="#FFFFFF" :placeholder="false" custom-back :click-hover="false">
      <template #headerLeft>
        <view class="flex items-center">
          <view class="text-36 text-fore-title font-bold">{{ orgName }}</view>
          <view class="w-6 h-6 rounded-2 bg-black mx-12"></view>
          <view>升学备考好帮手</view>
        </view>
      </template>
      <template #headerRight="{ isTransparent }">
        <view v-if="userStore.getLocation" class="ml-10 flex items-center gap-x-4" @click="handleChangeLocation">
          <uv-icon name="map" size="14" :color="isTransparent ? '#333' : 'var(--primary-color)'" />
          <text class="text-26 transition-colors duration-300"
            :class="[isTransparent ? 'text-fore-title' : 'text-primary']">
            {{ userStore.getLocation }}
          </text>
        </view>
      </template>
    </ie-navbar>
    <view class="absolute top-0 left-0 right-0 z-0 h-[489rpx] bg-gradient-to-b from-[#6ACAFF] to-white"></view>
    <view class="relative z-2" :style="{ paddingTop: baseStickyTop + 10 + 'px' }">
      <index-banner />
      <index-guide @detail="handleDetail" />
      <index-news @detail="handleDetail" />
    </view>
    <template #tabbar>
      <ie-tabbar :active="0" />
      <index-popup ref="popupRef" />
    </template>
  </ie-page>
</template>

<script lang="ts" setup>
import IndexBanner from './components/index-banner.vue';
import IndexGuide from './components/index-guide.vue';
import IndexNews from './components/index-news.vue';
import indexPopup from './components/index-popup.vue';

import { useUserStore } from '@/store/userStore';
// @ts-ignore
import mxConst from '@/common/mxConst';
import { useTransferPage } from '@/hooks/useTransferPage';
import { useNavbar } from '@/hooks/useNavbar';
import { onPageShow } from '@dcloudio/uni-app';
const { transferTo } = useTransferPage();
const { baseStickyTop } = useNavbar();
const scrollTop = ref(0);
const isHide = ref(false);
const userStore = useUserStore();
const orgName = computed(() => userStore.orgInfo.orgName);

const handleDetail = async (id: number | string, title?: string) => {
  if (('' + id).includes(',')) {
    transferTo(mxConst.routes.newsGroup, {
      data: {
        ids: id,
        title: title
      }
    });
  } else {
    transferTo(mxConst.routes.newsDetail, {
      data: {
        id: id,
        title: title
      }
    })
  }
}

const popupRef = ref();
const checkProvinceInfo = () => {
  if (!userStore.isLogin && !userStore.tempInfo?.location) {
    popupRef.value.open();
  }
}
const checkTeacherInfo = async () => {
  await userStore.checkInfoComplete();
}
const reloadUserInfo = async () => {
  if (userStore.isLogin) {
    await userStore.getUserInfo();
  }
}
const handleChangeLocation = () => {
  if (userStore.isLogin) {
    return;
  }
  popupRef.value.open();
}
onHide(() => {
  isHide.value = true;
})
onPageScroll((e) => {
  if (!isHide.value) {
    scrollTop.value = e.scrollTop;
  }
});
onShow(() => {
  setTimeout(() => {
    uni.pageScrollTo({
      scrollTop: scrollTop.value,
      duration: 0
    });
  }, 0);
  setTimeout(() => {
    checkProvinceInfo();
    checkTeacherInfo();
    reloadUserInfo();
  }, 500);
  isHide.value = false;
});
</script>

<style lang="scss" scoped></style>