tall-mui-3/src/pages/index/index.vue

<template>
  <view class="bg-gray-50">
    <view class="relative">
      <!-- 日历 -->
      <Calendar @selected-change="onDateChange" :show-back="true" :dot-list="days" />
      <!-- 上传 导入wbs -->
      <Upload @show-alert="onShowAlert" />
    </view>

    <!-- 项目列表 -->
    <Projects />

    <!-- 全局提示框 -->
    <u-alert-tips
      class="top-0 -inset-x-0"
      style="position: fixed !important"
      type="error"
      :close-able="true"
      :title="alert.title"
      :show="alert.show"
      :description="alert.description"
      @close="alert.show = false"
    ></u-alert-tips>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  data() {
    return {
      days: [
        { date: '2020-08-14' },
        { date: '2020-08-27' },
        { date: '2020-08-09' },
        // {date: '2020-08-16'}
      ],
      alert: {
        show: false,
        title: '',
        description: '',
      },
    };
  },

  computed: mapState('user', ['token']),

  watch: {
    token(value) {
      if (!value) return;
      this.getProjects();
    },
  },

  onShow() {
    if (!this.token) return;
    this.getProjects();
  },

  methods: {
    ...mapMutations('project', ['setProjects']),

    // 获取项目列表
    async getProjects(start = this.$moment().startOf('day').valueOf(), end = this.$moment().endOf('day').valueOf()) {
      try {
        const data = await this.$u.api.getProjects(start, end);
        this.setProjects(data);
      } catch (error) {
        console.log('error: ', error);
      }
    },

    changeList() {
      this.days = [{ date: '2021-08-03' }, { date: '2021-08-04' }, { date: '2021-08-06' }];
    },

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

    // 收到展示alert的消息
    onShowAlert(event) {
      this.alert.description = event || '发生了点小意外';
      this.alert.show = true;
      setTimeout(() => (this.alert.show = false), 10000);
    },
  },
};
</script>