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"> -->
  <!-- #ifdef APP-PLUS -->
  <theme v-if="!isOpenApp && firstOpenApp" class="relative flex flex-col h-full bg-gray-50">
  <!-- #endif -->
  <!-- #ifdef H5 -->
  <theme class="relative flex flex-col h-full bg-gray-50">
  <!-- #endif -->
    <view class="relative">
      <!-- <view class="relative" @touchmove="onMove"> -->
      <!-- 日历 -->
      <!-- <Calendar @selected-change="onDateChange" :show-back="true" ref="calendar" @handleFindPoint="handleFindPoint" /> -->
      <Calendar @selected-change="onDateChange" :show-back="true" ref="calendar" />

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

    <view class="login-box absolute" @click="toLogin">
      <text v-if="!userInfo || !userInfo.id">游客</text>
      <image v-else src="../../static/headimg4.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';
  import upApp from '../../uni_modules/uni-upgrade-center-app/utils/check-update.js';

  upApp();

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

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

  const user = uni.$storage.getStorageSync('user');
  if (!userInfo.value && user) {
    store.commit('user/setUser', JSON.parse(user));
  }

  getProjects();
  // handleFindPoint();

  // 监听token
  watchEffect(() => {
    // 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();
  // }

  async function toLogin() {
    if (!userInfo.value) {
      uni.navigateTo({
        url: '/pages/user/login'
      });
    } else {
      try{
        await uni.$ui.showModal('', '是否退出登录', true)
        signout();
      } catch(e) {
        console.log(e);
      }
    }
  }

  /**
   * 退出登录
   */
  function signout() {
    store.commit('user/setToken', '');
    store.commit('user/setUser', null);
    uni.$storage.setStorageSync('anyringToken', '');
    uni.$storage.setStorageSync('user', '');
  }
</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: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eeeeee;
    text-align: center;
    line-height: 40px;
    border: 1px solid #ddd;
    overflow: hidden;

    text {
      font-size: 12px;
    }

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