TALL-MUI-4/pages/index/index.vue

<template>
  <!-- 这里是适配的状态栏的代码 -->
  <view class="statbar">
    <view class="status_bar"></view>
  </view>

  <!-- #ifdef APP-PLUS -->
  <!-- 广告 -->
  <!-- <Adv v-if="isOpenApp"></Adv> -->

  <!-- 引导页 -->
  <!-- <Guide v-else-if="!firstOpenApp"></Guide> -->
  <!-- #endif -->

  <!-- <view class="flex flex-col h-full bg-gray-50" @click="openAuth"> -->
  <theme class="relative flex flex-col h-full bg-gray-50">
    <view class="relative">
      <!-- <view class="relative" @touchmove="onMove"> -->
      <!-- 日历 -->
      <Calendar @selected-change="onDateChange" :show-back="true" ref="calendar" @handleFindPoint="handleFindPoint" />

      <!-- 上传 导入wbs -->
      <Upload @success="onUploadSuccess" @error="onUploadError" />
    </view>

    <view class="login-box absolute" @click="toLogin">
      <text v-if="!userInfo">游客</text>
      <image v-else src="../../static/headimg.png" mode=""></image>
    </view>
    <!-- <u-button class="mt-4" @click="toLogin">登录</u-button> -->

    <!-- 项目列表 -->
    <Projects @getProjects="getProjects" class="flex-1 overflow-y-auto" />

    <!-- 全局提示框 -->
    <u-top-tips ref="uTips"></u-top-tips>
  </theme>
</template>

<script setup>
  import { reactive, computed, watchEffect, ref } from 'vue';
  import { useStore } from 'vuex';
  import dayjs from 'dayjs';

  const store = useStore();
  const token = computed(() => store.state.user.token);
  const uTips = ref(null);
  // const firstOpenApp = computed(() => store.state.firstOpenApp);
  // const isOpenApp = computed(() => store.state.isOpenApp); // 是否打开APP
  const userInfo = computed(() => store.state.user.user);

  const data = reactive({
    calendar: null,
    // days: [],
  });

  getProjects();
  handleFindPoint();

  // 监听token
  watchEffect(() => {
    const user = uni.$storage.getStorageSync('user');
    if (!userInfo.value && user) {
      store.commit('user/setUser', JSON.parse(user));
    }
    // if (!token.value) return;
    // if (token.value) {
    //   getProjects();
    //   handleFindPoint();
    // }
  });

  // 获取项目列表
  function getProjects(start = dayjs().startOf('day').valueOf(), end = dayjs().endOf('day').valueOf()) {
    uni.$catchReq.getProjects(start, end, (err, data) => {
      if (err) {
        console.error('err: ', err);
      } else {
        data.forEach(item => {
          item.show = false;
        });
        store.commit('project/setProjects', data);
      }
    });
  }

  async function handleFindPoint(start, end) {
    try {
      const startTime = start || dayjs().startOf('month').valueOf();
      const endTime = end || dayjs().endOf('month').valueOf();
      const res = await uni.$u.api.findRedPoint(startTime, endTime);
      store.commit('project/setDotList', res);
    } catch (error) {
      console.log('error: ', error);
    }
  }

  // 点击了某个日期
  const onDateChange = event => {
    const day = dayjs(event.fullDate);
    const start = day.startOf('date').valueOf();
    const end = day.endOf('date').valueOf();
    getProjects(start, end);
  };

  // 导入成功
  const onUploadSuccess = () => {
    uni.$ui.showToast('导入成功，即将打开新项目', 3000);
    // uTips.show({
    //   title: '导入成功，即将打开新项目',
    //   type: 'success',
    //   duration: '3000',
    // });
  };

  // 导入失败
  const onUploadError = error => {
    uni.$ui.showToast('导入失败', 6000);
    // uTips.show({
    //   title: error || '导入失败',
    //   type: 'error',
    //   duration: '6000',
    // });
  };

  // 监听触摸滑动 切换日历的模式 月/周
  // function onMove(event) {
  //   const y = event.changedTouches[0].pageY;
  //   const prevY = 0;
  //   if (y - prevY > 0) {
  //     // 向下滑动 如果是周视图weekMode=true 就 变成 月视图weekMode=false
  //     data.calendar.weekMode && (data.calendar.weekMode = false);
  //   } else if (y - prevY < 0) {
  //     // 向上滑动 如果是月视图weekMode=false 就变成 周视图weekMode=true
  //     !data.calendar.weekMode && (data.calendar.weekMode = true);
  //   }
  //   prevY = y;
  //   data.calendar.initDate();
  // }

  function toLogin() {
    console.log(11)
    if (!userInfo.value) {
      uni.navigateTo({
        url: '/pages/user/login'
      });
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }

  .login-box {
    top: 10px;
    right: 10px;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #eeeeee;
    text-align: center;
    line-height: 50px;
    border: 1px solid #ddd;
    overflow: hidden;

    image {
      display: inline-block;
      width: 40px;
      height: 40px;
      object-fit: cover;
    }
  }
</style>