feat: 添加日历

.eslintrc.js

@@ -1,21 +1,41 @@
 module.exports = {
-    "env": {
-        "browser": true,
-        "es2021": true
+  env: {
+    browser: true,
+    es2021: true,
   },
-    "extends": [
-        "plugin:vue/essential",
-        "airbnb-base"
+  extends: [
+    'plugin:vue/essential',
+    'airbnb-base',
   ],
-    "parserOptions": {
-        "ecmaVersion": 13,
-        "parser": "@typescript-eslint/parser",
-        "sourceType": "module"
+  parserOptions: {
+    ecmaVersion: 13,
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module',
   },
-    "plugins": [
-        "vue",
-        "@typescript-eslint"
+  plugins: [
+    'vue',
+    '@typescript-eslint',
   ],
-    "rules": {
-    }
+  rules: {
+    'vue/html-self-closing': 'off',
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-param-reassign': 'off',
+    'max-len': ['error', { code: 140, tabWidth: 2 }],
+    'object-curly-newline': ['error', { multiline: true }],
+    'arrow-parens': ['error', 'as-needed'],
+    'linebreak-style': 'off',
+    'vue/attributes-order': 'off',
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/max-attributes-per-line': 'off',
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/html-indent': 'off',
+    'vue/html-closing-bracket-newline': [
+		  'error',
+		  {
+		    singleline: 'never',
+		    multiline: 'always',
+		  },
+    ],
+  },
 };

CHANGELOG.md

@@ -7,6 +7,7 @@
  - | first commit | [8dc26de](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/8dc26de)
  - | vue3 | [12ed2ad](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/12ed2ad)
  - | 使用uview完成api请求 | [1b3efd8](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/1b3efd8)
+ - | 更新代码 | [392c8cc](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/392c8cc)
 
 
 范围|描述|commitId

components/Calendar/Calendar - 副本.vue

@@ -0,0 +1,473 @@
+<template>
+  <view class="zzx-calendar">
+    <view class="calendar-heander">
+      {{ timeStr }}
+    </view>
+
+    <!-- 星期几标题 -->
+    <view class="calendar-weeks">
+      <view class="calendar-week" :class="{ 'text-red-500': week === '六' || week === '日' }" v-for="(week, index) in weeks" :key="index">
+        {{ week }}
+      </view>
+    </view>
+
+    <view class="calendar-content">
+      <swiper
+        class="calendar-swiper"
+        :style="{
+          width: '100%',
+          height: sheight,
+        }"
+        :indicator-dots="false"
+        :autoplay="false"
+        :duration="duration"
+        :current="current"
+        @change="changeSwp"
+        :circular="true"
+      >
+        <swiper-item class="calendar-item" v-for="sitem in swiper" :key="sitem">
+          <view class="calendar-days">
+            <!-- 当前的 -->
+            <template v-if="sitem === current">
+              <view
+                class="calendar-day"
+                v-for="(item, index) in days"
+                :key="index"
+                :class="{ 'day-hidden': !item.show }"
+                @click="clickItem(item)"
+              >
+                <view class="date" :class="[item.isToday ? todayClass : '', item.fullDate === selectedDate ? checkedClass : '']">
+                  {{ item.time.getDate() }}
+                </view>
+                <view class="dot-show" v-if="item.info === '0'" :style="dotStyle"> </view>
+              </view>
+            </template>
+            <template v-else>
+              <!-- 下一个月/周 -->
+              <template v-if="current - sitem === 1 || current - sitem === -2">
+                <view
+                  class="calendar-day"
+                  v-for="(item, index) in predays"
+                  :key="index"
+                  :class="{
+                    'day-hidden': !item.show,
+                  }"
+                >
+                  <view class="date" :class="[item.isToday ? todayClass : '']">
+                    {{ item.time.getDate() }}
+                  </view>
+                </view>
+              </template>
+              <!-- 上一个月/周 -->
+              <template v-else>
+                <view
+                  class="calendar-day"
+                  v-for="(item, index) in nextdays"
+                  :key="index"
+                  :class="{
+                    'day-hidden': !item.show,
+                  }"
+                >
+                  <view class="date" :class="[item.isToday ? todayClass : '']">
+                    {{ item.time.getDate() }}
+                  </view>
+                </view>
+              </template>
+            </template>
+          </view>
+        </swiper-item>
+      </swiper>
+
+      <!-- <view class="mode-change" @click="changeMode">
+        <view :class="weekMode ? 'mode-arrow-bottom' : 'mode-arrow-top'"> </view>
+      </view> -->
+    </view>
+
+    <view class="flex justify-center u-font-18" style="color: #3b82f6" @click="goToday"> 今日 </view>
+  </view>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import { gegerateDates, formatDate } from './generateDates.js';
+
+export default {
+  props: {
+    duration: { type: Number, default: 500 },
+    // 是否返回今日
+    showBack: { type: Boolean, default: false },
+    // 今日的自定义样式class
+    todayClass: { type: String, default: 'is-today' },
+    // 选中日期的样式class
+    checkedClass: { type: String, default: 'is-checked' },
+    // 打点日期的自定义样式
+    dotStyle: {
+      type: Object,
+      default: () => {
+        return { background: '#4ade80' };
+      },
+    },
+  },
+
+  watch: {
+    dotList: function (newvalue) {
+      const days = this.days.slice(0);
+      const index = days.findIndex(day => day.show);
+      days.forEach((day, i) => {
+        newvalue.forEach((item, j) => {
+          if (i - index === j) {
+            day.info = item;
+          }
+        });
+      });
+      this.days = days;
+    },
+  },
+
+  data() {
+    return {
+      weeks: ['日', '一', '二', '三', '四', '五', '六'], // 周
+      current: 1,
+      currentYear: '',
+      currentMonth: '',
+      currentDate: '',
+      days: [],
+      weekMode: false, // false -> 月  true -> 显示周
+      swiper: [0, 1, 2],
+      selectedDate: formatDate(new Date(), 'yyyy-MM-dd'), // 当前选中的日期
+      start: '',
+      end: '',
+    };
+  },
+
+  computed: {
+    ...mapState('project', ['dotList']),
+    sheight() {
+      // 根据年月判断有多少行
+      // 判断该月有多少天
+      let h = '35px';
+      if (!this.weekMode) {
+        const d = new Date(this.currentYear, this.currentMonth, 0);
+        const days = d.getDate(); // 判断本月有多少天
+        let day = new Date(d.setDate(1)).getDay();
+        // if (day === 0) {
+        //   day = 7;
+        // }
+        const pre = 8 - day;
+        const rows = Math.ceil((days - pre) / 7) + 1;
+        h = 35 * rows + 'px';
+      }
+      return h;
+    },
+
+    // 当前日期 年月
+    timeStr() {
+      let str = '';
+      const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate);
+      const y = d.getFullYear();
+      const m = d.getMonth() + 1 <= 9 ? `0${d.getMonth() + 1}` : d.getMonth() + 1;
+      str = `${y}年${m}月`;
+      return str;
+    },
+
+    // 上一周期的days书籍
+    predays() {
+      let pres = [];
+      if (this.weekMode) {
+        // 周模式
+        const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate);
+        d.setDate(d.getDate() - 7);
+        pres = gegerateDates(d, 'week');
+      } else {
+        // 月模式
+        const d = new Date(this.currentYear, this.currentMonth - 2, 1);
+        pres = gegerateDates(d, 'month');
+      }
+      return pres;
+    },
+
+    // 下一周期的days书籍
+    nextdays() {
+      let nexts = [];
+      if (this.weekMode) {
+        // 周模式
+        const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate);
+        d.setDate(d.getDate() + 7);
+        nexts = gegerateDates(d, 'week');
+      } else {
+        // 月模式
+        const d = new Date(this.currentYear, this.currentMonth, 1);
+        nexts = gegerateDates(d, 'month');
+      }
+      return nexts;
+    },
+  },
+
+  created() {
+    this.initDate();
+    this.start = this.$moment().startOf('month').valueOf();
+    this.end = this.$moment().endOf('month').valueOf();
+  },
+
+  methods: {
+    //
+    /**
+     * 滑动切换上下周期
+     * 根据前一个减去目前的值我们可以判断是下一个月/周还是上一个月/周
+     * current - pre === 1, -2 下一个月/周
+     * current - pre === -1, 2 上一个月或者上一周
+     */
+    changeSwp(e) {
+      const pre = this.current;
+      const current = e.target.current;
+      this.current = current;
+
+      if (current - pre === 1 || current - pre === -2) {
+        // 下一个月 或 下一周
+        this.daysNext();
+        const arr = this.days.filter(s => s.show);
+        const end = `${arr[arr.length - 1].fullDate} 23:59:59`;
+        this.start = this.$moment(arr[0].fullDate).valueOf();
+        this.end = this.$moment(end).valueOf();
+        this.$emit('handleFindPoint', this.start, this.end);
+      } else {
+        // 上一个月 或 上一周
+        this.daysPre();
+        const arr = this.days.filter(s => s.show);
+        const end = `${arr[arr.length - 1].fullDate} 23:59:59`;
+        this.start = this.$moment(arr[0].fullDate).valueOf();
+        this.end = this.$moment(end).valueOf();
+        this.$emit('handleFindPoint', this.start, this.end);
+      }
+    },
+
+    // 初始化日历的方法
+    initDate(cur) {
+      let date = '';
+      if (cur) {
+        date = new Date(cur);
+      } else {
+        date = new Date();
+      }
+      this.currentDate = date.getDate(); // 今日几号
+      this.currentYear = date.getFullYear(); // 当前年份
+      this.currentMonth = date.getMonth() + 1; // 当前月份
+      this.currentWeek = date.getDay() === 0 ? 7 : date.getDay(); // 1...6,0 星期几
+      // const nowY = new Date().getFullYear(); // 当前年份
+      // const nowM = new Date().getMonth() + 1;
+      // const nowD = new Date().getDate(); // 今日日期 几号
+      // const nowW = new Date().getDay();
+      // this.selectedDate = formatDate(new Date(), 'yyyy-MM-dd')
+      this.days = [];
+      let days = [];
+      if (this.weekMode) {
+        days = gegerateDates(date, 'week');
+        // this.selectedDate = days[0].fullDate;
+      } else {
+        days = gegerateDates(date, 'month');
+        // const sel = new Date(this.selectedDate.replace('-', '/').replace('-', '/'));
+        // const isMonth = sel.getFullYear() === this.currentYear && (sel.getMonth() + 1) === this.currentMonth;
+        // if(!isMonth) {
+        // 	this.selectedDate = formatDate(new Date(this.currentYear, this.currentMonth-1,1), 'yyyy-MM-dd')
+        // }
+      }
+      // 设置小红点
+      days.forEach((day, i) => {
+        this.dotList.forEach((item, j) => {
+          if (i === j) {
+            day.info = item;
+          }
+        });
+      });
+      this.days = days;
+      // 派发事件,时间发生改变
+      let obj = {
+        start: '',
+        end: '',
+      };
+      if (this.weekMode) {
+        obj.start = this.days[0].time;
+        obj.end = this.days[6].time;
+      } else {
+        const start = new Date(this.currentYear, this.currentMonth - 1, 1);
+        const end = new Date(this.currentYear, this.currentMonth, 0);
+        obj.start = start;
+        obj.end = end;
+      }
+      this.$emit('days-change', obj);
+    },
+
+    //  上一个
+    daysPre() {
+      if (this.weekMode) {
+        const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate);
+        d.setDate(d.getDate() - 7);
+        this.initDate(d);
+      } else {
+        const d = new Date(this.currentYear, this.currentMonth - 2, 1);
+        this.initDate(d);
+      }
+    },
+
+    //  下一个
+    daysNext() {
+      if (this.weekMode) {
+        const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate);
+        d.setDate(d.getDate() + 7);
+        this.initDate(d);
+      } else {
+        const d = new Date(this.currentYear, this.currentMonth, 1);
+        this.initDate(d);
+      }
+    },
+
+    // 切换模式
+    changeMode() {
+      const premode = this.weekMode;
+      let isweek = false;
+      if (premode) {
+        isweek = !!this.days.find(item => item.fullDate === this.selectedDate);
+      }
+      this.weekMode = !this.weekMode;
+      let d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate);
+      const sel = new Date(this.selectedDate.replace('-', '/').replace('-', '/'));
+      const isMonth = sel.getFullYear() === this.currentYear && sel.getMonth() + 1 === this.currentMonth;
+      if ((this.selectedDate && isMonth) || isweek) {
+        d = new Date(this.selectedDate.replace('-', '/').replace('-', '/'));
+      }
+      this.initDate(d);
+    },
+
+    // 点击日期
+    clickItem(e) {
+      this.selectedDate = e.fullDate;
+      this.$emit('selected-change', e);
+    },
+
+    // 返回
+    goToday() {
+      const d = new Date();
+      this.initDate(d);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.zzx-calendar {
+  width: 100%;
+  height: auto;
+  background-color: #fff;
+  padding-bottom: 10px;
+
+  .calendar-heander {
+    text-align: center;
+    padding: 16px 0;
+    position: relative;
+    font-size: 15px;
+  }
+
+  .calendar-weeks {
+    width: 100%;
+    display: flex;
+    flex-flow: row nowrap;
+    margin-bottom: 10px;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    color: #9ca3af;
+    font-weight: bold;
+
+    .calendar-week {
+      width: calc(100% / 7);
+      height: 100%;
+      text-align: center;
+    }
+  }
+  swiper {
+    width: 100%;
+    height: 60upx;
+  }
+  .calendar-content {
+    min-height: 30px;
+  }
+  .calendar-swiper {
+    min-height: 35px;
+    transition: height ease-out 0.3s;
+  }
+  .calendar-item {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+  }
+  .calendar-days {
+    display: flex;
+    flex-flow: row wrap;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    font-size: 14px;
+
+    .calendar-day {
+      width: calc(100% / 7);
+      height: 35px;
+      text-align: center;
+      display: flex;
+      flex-flow: column nowrap;
+      justify-content: flex-start;
+      align-items: center;
+      position: relative;
+    }
+  }
+  .day-hidden {
+    visibility: hidden;
+  }
+
+  .mode-change {
+    display: flex;
+    justify-content: center;
+    margin-top: 5px;
+
+    .mode-arrow-top {
+      width: 0;
+      height: 0;
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+      border-bottom: 5px solid #ff6633;
+    }
+    .mode-arrow-bottom {
+      width: 0;
+      height: 0;
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+      border-top: 5px solid #ff6633;
+    }
+  }
+  .is-today {
+    background: #ffffff;
+    border: 1upx solid #ff6633;
+    border-radius: 50%;
+    color: #ff6633;
+  }
+  .is-checked {
+    background: #ff6633;
+    color: #ffffff;
+  }
+  .date {
+    width: 25px;
+    height: 25px;
+    line-height: 25px;
+    margin: 0 auto;
+    border-radius: 25px;
+  }
+  .dot-show {
+    width: 6px;
+    height: 6px;
+    // background: red;
+    border-radius: 5px;
+    position: absolute;
+    top: 2px;
+    right: 10px;
+  }
+}
+</style>

components/Calendar/Calendar.vue

@@ -1,14 +1,10 @@
 <template>
   <view class="zzx-calendar">
-    <view class="calendar-heander">
-      {{ timeStr }}
-    </view>
+    <view class="calendar-heander">{{ timeStr }}</view>
 
     <!-- 星期几标题 -->
     <view class="calendar-weeks">
-      <view class="calendar-week" :class="{ 'text-red-500': week === '六' || week === '日' }" v-for="(week, index) in weeks" :key="index">
-        {{ week }}
-      </view>
+      <view class="calendar-week" :class="{ 'text-red-500': week === '六' || week === '日' }" v-for="(week, index) in data.weeks" :key="index">{{ week }}</view>
     </view>
 
     <view class="calendar-content">
@@ -25,26 +21,18 @@
         @change="changeSwp"
         :circular="true"
       >
-        <swiper-item class="calendar-item" v-for="sitem in swiper" :key="sitem">
+        <swiper-item class="calendar-item" v-for="sitem in data.swiper" :key="sitem">
           <view class="calendar-days">
             <!-- 当前的 -->
-            <template v-if="sitem === current">
-              <view
-                class="calendar-day"
-                v-for="(item, index) in days"
-                :key="index"
-                :class="{ 'day-hidden': !item.show }"
-                @click="clickItem(item)"
-              >
-                <view class="date" :class="[item.isToday ? todayClass : '', item.fullDate === selectedDate ? checkedClass : '']">
-                  {{ item.time.getDate() }}
-                </view>
+            <template v-if="sitem === data.current">
+              <view class="calendar-day" v-for="(item, index) in days" :key="index" :class="{ 'day-hidden': !item.show }" @click="clickItem(item)">
+                <view class="date" :class="[item.isToday ? todayClass : '', item.fullDate === selectedDate ? checkedClass : '']">{{ item.time.getDate() }}</view>
                 <view class="dot-show" v-if="item.info === '0'" :style="dotStyle"></view>
               </view>
             </template>
             <template v-else>
               <!-- 下一个月/周 -->
-              <template v-if="current - sitem === 1 || current - sitem === -2">
+              <template v-if="data.current - sitem === 1 || data.current - sitem === -2">
                 <view
                   class="calendar-day"
                   v-for="(item, index) in predays"
@@ -53,9 +41,7 @@
                     'day-hidden': !item.show,
                   }"
                 >
-                  <view class="date" :class="[item.isToday ? todayClass : '']">
-                    {{ item.time.getDate() }}
-                  </view>
+                  <view class="date" :class="[item.isToday ? todayClass : '']">{{ item.time.getDate() }}</view>
                 </view>
               </template>
               <!-- 上一个月/周 -->
@@ -68,9 +54,7 @@
                     'day-hidden': !item.show,
                   }"
                 >
-                  <view class="date" :class="[item.isToday ? todayClass : '']">
-                    {{ item.time.getDate() }}
-                  </view>
+                  <view class="date" :class="[item.isToday ? todayClass : '']">{{ item.time.getDate() }}</view>
                 </view>
               </template>
             </template>
@@ -87,12 +71,13 @@
   </view>
 </template>
 
-<script>
-import { mapState } from 'vuex';
+<script setup>
+import { reactive, computed, watch, defineProps, defineEmits } from 'vue';
+import { useStore } from 'vuex';
+import dayjs from 'dayjs';
 import { gegerateDates, formatDate } from './generateDates.js';
 
-export default {
-  props: {
+defineProps({
   duration: { type: Number, default: 500 },
   // 是否返回今日
   showBack: { type: Boolean, default: false },
@@ -103,29 +88,13 @@ export default {
   // 打点日期的自定义样式
   dotStyle: {
     type: Object,
-      default: () => {
-        return { background: '#4ade80' };
-      },
+    default: () => ({ background: '#4ade80' }),
   },
-  },
-
-  watch: {
-    dotList: function (newvalue) {
-      const days = this.days.slice(0);
-      const index = days.findIndex(day => day.show);
-      days.forEach((day, i) => {
-        newvalue.forEach((item, j) => {
-          if (i - index === j) {
-            day.info = item;
-          }
-        });
 });
-      this.days = days;
-    },
-  },
 
-  data() {
-    return {
+const emit = defineEmits(['handleFindPoint', 'handleFindPoint']);
+
+const data = reactive({
   weeks: ['日', '一', '二', '三', '四', '五', '六'], // 周
   current: 1,
   currentYear: '',
@@ -135,222 +104,225 @@ export default {
   weekMode: false, // false -> 月  true -> 显示周
   swiper: [0, 1, 2],
   selectedDate: formatDate(new Date(), 'yyyy-MM-dd'), // 当前选中的日期
-      start: '',
-      end: '',
-    };
-  },
-
-  computed: {
-    ...mapState('project', ['dotList']),
-    sheight() {
+  start: dayjs()
+    .startOf('month')
+    .valueOf(),
+  end: dayjs()
+    .endOf('month')
+    .valueOf(),
+});
+const store = useStore();
+const dotList = computed(() => store.state.project.dotList);
+const sheight = computed(() => {
   // 根据年月判断有多少行
   // 判断该月有多少天
   let h = '35px';
-      if (!this.weekMode) {
-        const d = new Date(this.currentYear, this.currentMonth, 0);
+  if (!data.weekMode) {
+    const d = new Date(data.currentYear, data.currentMonth, 0);
     const days = d.getDate(); // 判断本月有多少天
-        let day = new Date(d.setDate(1)).getDay();
+    const day = new Date(d.setDate(1)).getDay();
     // if (day === 0) {
     //   day = 7;
     // }
     const pre = 8 - day;
     const rows = Math.ceil((days - pre) / 7) + 1;
-        h = 35 * rows + 'px';
+    h = `${35 * rows}px`;
   }
   return h;
-    },
-
+});
 // 当前日期 年月
-    timeStr() {
+const timeStr = computed(() => {
   let str = '';
-      const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate);
+  const d = new Date(data.currentYear, data.currentMonth - 1, data.currentDate);
   const y = d.getFullYear();
   const m = d.getMonth() + 1 <= 9 ? `0${d.getMonth() + 1}` : d.getMonth() + 1;
   str = `${y}年${m}月`;
   return str;
-    },
-
+});
 // 上一周期的days书籍
-    predays() {
+const predays = computed(() => {
   let pres = [];
-      if (this.weekMode) {
+  if (data.weekMode) {
     // 周模式
-        const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate);
+    const d = new Date(data.currentYear, data.currentMonth - 1, data.currentDate);
     d.setDate(d.getDate() - 7);
     pres = gegerateDates(d, 'week');
   } else {
     // 月模式
-        const d = new Date(this.currentYear, this.currentMonth - 2, 1);
+    const d = new Date(data.currentYear, data.currentMonth - 2, 1);
     pres = gegerateDates(d, 'month');
   }
   return pres;
-    },
-
+});
 // 下一周期的days书籍
-    nextdays() {
+const nextdays = computed(() => {
   let nexts = [];
-      if (this.weekMode) {
+  if (data.weekMode) {
     // 周模式
-        const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate);
+    const d = new Date(data.currentYear, data.currentMonth - 1, data.currentDate);
     d.setDate(d.getDate() + 7);
     nexts = gegerateDates(d, 'week');
   } else {
     // 月模式
-        const d = new Date(this.currentYear, this.currentMonth, 1);
+    const d = new Date(data.currentYear, data.currentMonth, 1);
     nexts = gegerateDates(d, 'month');
   }
   return nexts;
-    },
-  },
+});
 
-  created() {
-    this.initDate();
-    this.start = this.$moment().startOf('month').valueOf();
-    this.end = this.$moment().endOf('month').valueOf();
-  },
+watch(dotList, newValue => {
+  // 直接监听
+  const days = data.days.slice(0);
+  const index = days.findIndex(day => day.show);
+  days.forEach((day, i) => {
+    newValue.forEach((item, j) => {
+      if (i - index === j) {
+        day.info = item;
+      }
+    });
+  });
+  data.days = days;
+});
+
+//  上一个
+const daysPre = () => {
+  // if (this.weekMode) {
+  //   const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate);
+  //   d.setDate(d.getDate() - 7);
+  //   this.initDate(d);
+  // } else {
+  //   const d = new Date(this.currentYear, this.currentMonth - 2, 1);
+  //   this.initDate(d);
+  // }
+};
+
+//  下一个
+const daysNext = () => {
+  // if (this.weekMode) {
+  //   const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate);
+  //   d.setDate(d.getDate() + 7);
+  //   this.initDate(d);
+  // } else {
+  //   const d = new Date(this.currentYear, this.currentMonth, 1);
+  //   this.initDate(d);
+  // }
+};
 
-  methods: {
-    //
 /**
  * 滑动切换上下周期
  * 根据前一个减去目前的值我们可以判断是下一个月/周还是上一个月/周
  * current - pre === 1, -2 下一个月/周
  * current - pre === -1, 2 上一个月或者上一周
  */
-    changeSwp(e) {
-      const pre = this.current;
-      const current = e.target.current;
-      this.current = current;
-
+const changeSwp = e => {
+  const pre = data.current;
+  const { current } = e.target;
+  data.current = current;
   if (current - pre === 1 || current - pre === -2) {
     // 下一个月 或 下一周
-        this.daysNext();
-        const arr = this.days.filter(s => s.show);
+    daysNext();
+    const arr = data.days.filter(s => s.show);
     const end = `${arr[arr.length - 1].fullDate} 23:59:59`;
-        this.start = this.$moment(arr[0].fullDate).valueOf();
-        this.end = this.$moment(end).valueOf();
-        this.$emit('handleFindPoint', this.start, this.end);
+    data.start = dayjs(arr[0].fullDate).valueOf();
+    data.end = dayjs(end).valueOf();
+    emit('handleFindPoint', this.start, this.end);
   } else {
     // 上一个月 或 上一周
-        this.daysPre();
-        const arr = this.days.filter(s => s.show);
+    daysPre();
+    const arr = data.days.filter(s => s.show);
     const end = `${arr[arr.length - 1].fullDate} 23:59:59`;
-        this.start = this.$moment(arr[0].fullDate).valueOf();
-        this.end = this.$moment(end).valueOf();
-        this.$emit('handleFindPoint', this.start, this.end);
+    data.start = dayjs(arr[0].fullDate).valueOf();
+    data.end = dayjs(end).valueOf();
+    emit('handleFindPoint', this.start, this.end);
   }
-    },
+};
 
 // 初始化日历的方法
-    initDate(cur) {
-      let date = '';
-      if (cur) {
-        date = new Date(cur);
-      } else {
-        date = new Date();
-      }
-      this.currentDate = date.getDate(); // 今日几号
-      this.currentYear = date.getFullYear(); // 当前年份
-      this.currentMonth = date.getMonth() + 1; // 当前月份
-      this.currentWeek = date.getDay() === 0 ? 7 : date.getDay(); // 1...6,0 星期几
-      // const nowY = new Date().getFullYear(); // 当前年份
-      // const nowM = new Date().getMonth() + 1;
-      // const nowD = new Date().getDate(); // 今日日期 几号
-      // const nowW = new Date().getDay();
-      // this.selectedDate = formatDate(new Date(), 'yyyy-MM-dd')
-      this.days = [];
-      let days = [];
-      if (this.weekMode) {
-        days = gegerateDates(date, 'week');
-        // this.selectedDate = days[0].fullDate;
-      } else {
-        days = gegerateDates(date, 'month');
-        // const sel = new Date(this.selectedDate.replace('-', '/').replace('-', '/'));
-        // const isMonth = sel.getFullYear() === this.currentYear && (sel.getMonth() + 1) === this.currentMonth;
-        // if(!isMonth) {
-        // 	this.selectedDate = formatDate(new Date(this.currentYear, this.currentMonth-1,1), 'yyyy-MM-dd')
+const initDate = cur => {
+  // let date = '';
+  // if (cur) {
+  //   date = new Date(cur);
+  // } else {
+  //   date = new Date();
   // }
-      }
-      // 设置小红点
-      days.forEach((day, i) => {
-        this.dotList.forEach((item, j) => {
-          if (i === j) {
-            day.info = item;
-          }
-        });
-      });
-      this.days = days;
-      // 派发事件,时间发生改变
-      let obj = {
-        start: '',
-        end: '',
+  // this.currentDate = date.getDate(); // 今日几号
+  // this.currentYear = date.getFullYear(); // 当前年份
+  // this.currentMonth = date.getMonth() + 1; // 当前月份
+  // this.currentWeek = date.getDay() === 0 ? 7 : date.getDay(); // 1...6,0 星期几
+  // // const nowY = new Date().getFullYear(); // 当前年份
+  // // const nowM = new Date().getMonth() + 1;
+  // // const nowD = new Date().getDate(); // 今日日期 几号
+  // // const nowW = new Date().getDay();
+  // // this.selectedDate = formatDate(new Date(), 'yyyy-MM-dd')
+  // this.days = [];
+  // let days = [];
+  // if (this.weekMode) {
+  //   days = gegerateDates(date, 'week');
+  //   // this.selectedDate = days[0].fullDate;
+  // } else {
+  //   days = gegerateDates(date, 'month');
+  //   // const sel = new Date(this.selectedDate.replace('-', '/').replace('-', '/'));
+  //   // const isMonth = sel.getFullYear() === this.currentYear && (sel.getMonth() + 1) === this.currentMonth;
+  //   // if(!isMonth) {
+  //   // 	this.selectedDate = formatDate(new Date(this.currentYear, this.currentMonth-1,1), 'yyyy-MM-dd')
+  //   // }
+  // }
+  // // 设置小红点
+  // days.forEach((day, i) => {
+  //   this.dotList.forEach((item, j) => {
+  //     if (i === j) {
+  //       day.info = item;
+  //     }
+  //   });
+  // });
+  // this.days = days;
+  // // 派发事件,时间发生改变
+  // const obj = {
+  //   start: '',
+  //   end: '',
+  // };
+  // if (this.weekMode) {
+  //   obj.start = this.days[0].time;
+  //   obj.end = this.days[6].time;
+  // } else {
+  //   const start = new Date(this.currentYear, this.currentMonth - 1, 1);
+  //   const end = new Date(this.currentYear, this.currentMonth, 0);
+  //   obj.start = start;
+  //   obj.end = end;
+  // }
+  // this.$emit('days-change', obj);
 };
-      if (this.weekMode) {
-        obj.start = this.days[0].time;
-        obj.end = this.days[6].time;
-      } else {
-        const start = new Date(this.currentYear, this.currentMonth - 1, 1);
-        const end = new Date(this.currentYear, this.currentMonth, 0);
-        obj.start = start;
-        obj.end = end;
-      }
-      this.$emit('days-change', obj);
-    },
-
-    //  上一个
-    daysPre() {
-      if (this.weekMode) {
-        const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate);
-        d.setDate(d.getDate() - 7);
-        this.initDate(d);
-      } else {
-        const d = new Date(this.currentYear, this.currentMonth - 2, 1);
-        this.initDate(d);
-      }
-    },
-
-    //  下一个
-    daysNext() {
-      if (this.weekMode) {
-        const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate);
-        d.setDate(d.getDate() + 7);
-        this.initDate(d);
-      } else {
-        const d = new Date(this.currentYear, this.currentMonth, 1);
-        this.initDate(d);
-      }
-    },
 
 // 切换模式
-    changeMode() {
-      const premode = this.weekMode;
-      let isweek = false;
-      if (premode) {
-        isweek = !!this.days.find(item => item.fullDate === this.selectedDate);
-      }
-      this.weekMode = !this.weekMode;
-      let d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate);
-      const sel = new Date(this.selectedDate.replace('-', '/').replace('-', '/'));
-      const isMonth = sel.getFullYear() === this.currentYear && sel.getMonth() + 1 === this.currentMonth;
-      if ((this.selectedDate && isMonth) || isweek) {
-        d = new Date(this.selectedDate.replace('-', '/').replace('-', '/'));
-      }
-      this.initDate(d);
-    },
+const changeMode = () => {
+  // const premode = this.weekMode;
+  // let isweek = false;
+  // if (premode) {
+  //   isweek = !!this.days.find((item) => item.fullDate === this.selectedDate);
+  // }
+  // this.weekMode = !this.weekMode;
+  // let d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate);
+  // const sel = new Date(this.selectedDate.replace('-', '/').replace('-', '/'));
+  // const isMonth = sel.getFullYear() === this.currentYear && sel.getMonth() + 1 === this.currentMonth;
+  // if ((this.selectedDate && isMonth) || isweek) {
+  //   d = new Date(this.selectedDate.replace('-', '/').replace('-', '/'));
+  // }
+  // this.initDate(d);
+};
 
 // 点击日期
-    clickItem(e) {
-      this.selectedDate = e.fullDate;
-      this.$emit('selected-change', e);
-    },
+const clickItem = e => {
+  // this.selectedDate = e.fullDate;
+  // this.$emit('selected-change', e);
+};
 
 // 返回
-    goToday() {
-      const d = new Date();
-      this.initDate(d);
-    },
-  },
+const goToday = () => {
+  // const d = new Date();
+  // this.initDate(d);
 };
+
+initDate();
 </script>
 
 <style lang="scss" scoped>

components/Projects/Projects.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages.json

@@ -3,13 +3,20 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationBarText": "TALL"
 			}
 		}
+		// {
+		// 	"path": "pages/project/project",
+		// 	"style": {
+		// 		"navigationStyle": "custom",
+		// 		"navigationBarTextStyle": "white"
+		// 	}
+		// }
 	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
+		"navigationBarTitleText": "TALL",
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8"
 	}

pages/index/index.vue

@@ -1,40 +1,71 @@
 <template>
-	<view :style="{ height: height }" class="flex flex-col overflow-hidden u-font-14">
-		<!-- 标题栏 -->
-		<Title />
-		
-		<view class="container flex flex-col flex-1 mx-auto overflow-hidden bg-gray-100">
-			<!-- 角色栏 -->
-			<Roles />
+  <view class="flex flex-col h-full bg-gray-50" @click="openAuth">
+    <view class="relative" @touchmove="onMove">
+      <!-- 日历 -->
+      <Calendar @selected-change="onDateChange" :show-back="true" ref="calendar" @handleFindPoint="handleFindPoint" />
+      <!-- 上传 导入wbs -->
+      <!-- <Upload @success="onUploadSuccess" @error="onUploadError" /> -->
+    </view>
 
-			<!-- 日常任务面板 -->
-			<Globals />
+    <!-- 项目列表 -->
+    <Projects @getProjects="getProjects" class="flex-1 overflow-y-auto" />
 
-			<!-- 定期任务面板 -->
-			<TimeLine @getTasks="getTasks" class="flex-1 overflow-hidden" ref="timeLine" />
-		</view>
+    <!-- 全局提示框 -->
+    <u-top-tips ref="uTips"></u-top-tips>
   </view>
 </template>
 
 <script setup>
-	import {
-		ref, onMounted
-	} from 'vue';
-	import Navbar from '@/components/Title/Title.vue';
-	import Roles from '@/components/Roles/Roles.vue';
-	import Globals from '@/components/Globals/Globals.vue';
-	import TimeLine from '@/components/TimeLine/TimeLine.vue';
+import { reactive, ref, onMounted, computed, watch } from 'vue';
+import { useStore } from 'vuex';
+import dayjs from 'dayjs';
+import Calendar from '@/components/Calendar/Calendar.vue';
+import Upload from '@/components/Upload/Upload.vue';
+import Projects from '@/components/Projects/Projects.vue';
+
+const data = reactive({
+  calendar: null,
+  days: [],
+});
+
+const height = ref(null);
+const store = useStore();
+const token = computed(() => store.state.user.token);
 
-	let height = ref(null);
+// 监听token
+watch(
+  () => token.value,
+  newValue => {
+    console.log('newValue', newValue);
+    if (!newValue) return;
+    if (newValue) {
+      handleFindPoint();
+    }
+  },
+  { immediate: true },
+);
 
 onMounted(() => {
   const system = uni.getSystemInfoSync();
-		height.value = system.windowHeight + 'px';
+  height.value = `${system.windowHeight}px`;
 });
 
-	function getTasks() {
-
+const handleFindPoint = async (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);
   }
+};
 </script>
 
 <style>

pages/project/project.vue

@@ -0,0 +1,64 @@
+<template>
+	<view :style="{ height: height }" class="flex flex-col overflow-hidden u-font-14">
+		<!-- 标题栏 -->
+		<Title />
+		
+		<view class="container flex flex-col flex-1 mx-auto overflow-hidden bg-gray-100">
+			<!-- 角色栏 -->
+			<Roles />
+
+			<!-- 日常任务面板 -->
+			<Globals />
+
+			<!-- 定期任务面板 -->
+			<TimeLine @getTasks="getTasks" class="flex-1 overflow-hidden" ref="timeLine" />
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { ref, onMounted } from 'vue';
+	import Navbar from '@/components/Title/Title.vue';
+	import Roles from '@/components/Roles/Roles.vue';
+	import Globals from '@/components/Globals/Globals.vue';
+	import TimeLine from '@/components/TimeLine/TimeLine.vue';
+
+	let height = ref(null);
+
+	onMounted(() => {
+		const system = uni.getSystemInfoSync();
+		height.value = system.windowHeight + 'px';
+	});
+
+	function getTasks() {
+
+	}
+</script>
+
+<style>
+	.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;
+	}
+</style>

store/index.js

@@ -1,6 +1,7 @@
 import { createStore } from 'vuex';
 import user from './user/index.js';
 import socket from './socket/index.js';
+import project from './project/index.js';
 
 // 不属于具体模块的 应用级的 store内容
 const state = {
@@ -41,5 +42,5 @@ export default createStore({
   state,
   getters,
   mutations,
-	modules: {user, socket}
+  modules: { user, socket, project },
 });

store/project/actions.js

@@ -0,0 +1,3 @@
+const actions = {};
+
+export default actions;

store/project/getters.js

@@ -0,0 +1,11 @@
+const getters = {
+  /**
+   * 当前项目的id
+   * @param {object} project
+   */
+  projectId({ project }) {
+    return project.id;
+  },
+};
+
+export default getters;

store/project/index.js

@@ -0,0 +1,12 @@
+import state from './state';
+import getters from './getters';
+import mutations from './mutations';
+import actions from './actions';
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions,
+};

store/project/mutations.js

@@ -0,0 +1,62 @@
+const mutations = {
+  /**
+   * 设置state projects书籍
+   * @param {object} state
+   * @param {array} projects 项目列表
+   */
+  setProjects(state, projects) {
+    if (!projects || !projects.length) {
+      state.projects = [];
+    } else {
+      state.projects = [...projects];
+    }
+  },
+
+  /**
+   * 设置子项目收缩展开
+   * @param { object } state
+   * @param { object } options options:{ index,show }
+   */
+  setProjectItemShow(state, options) {
+    if (options.show) {
+      for (var i = 0; i < state.projects.length; i++) {
+        if (i === options.index) {
+          state.projects[i].show = true;
+        } else {
+          state.projects[i].show = false;
+        }
+      }
+    } else {
+      state.projects[options.index].show = false;
+    }
+  },
+
+  /**
+   * 设置当前项目信息
+   * @param { object } state
+   * @param { object } data
+   */
+  setProject(state, data) {
+    state.project = data || { name: '加载中...' };
+  },
+
+  /**
+   * 设置当前项目名称
+   * @param { object } state
+   * @param { string } data
+   */
+  setProjectName(state, data) {
+    state.project.name = data;
+  },
+
+  /**
+   * 设置小红点
+   * @param { object } state
+   * @param { string } data
+   */
+  setDotList(state, data) {
+    state.dotList = data;
+  },
+};
+
+export default mutations;

store/project/state.js

@@ -0,0 +1,8 @@
+/* eslint-disable */
+const state = {
+  project: { name: '加载中...' }, // 当前项目信息
+  projects: [], // 项目列表
+  dotList: [], // 小红点
+};
+
+export default state;

utils/time.js

@@ -12,7 +12,7 @@ import dayjs from 'dayjs';
  * 格式化数字
  * @param {*} n
  */
-const formatNumber = n => {
+const formatNumber = (n) => {
   const str = n.toString();
   return str[1] ? str : `0${str}`;
 };
@@ -21,7 +21,7 @@ const formatNumber = n => {
  * 格式化时间
  * @param {number} beginTime
  */
-const formatTime = beginTime => {
+const formatTime = (beginTime) => {
   const date = new Date(beginTime);
   const year = date.getFullYear();
   const month = date.getMonth() + 1;
@@ -49,7 +49,7 @@ const add = (time, num, cycle) => {
  * @param {string} time
  * @returns {{hours: number, minutes: number}}
  */
-const convertTime = time => {
+const convertTime = (time) => {
   const arr = time.split(':');
   return {
     hours: parseInt(arr[0], 10),
@@ -61,7 +61,7 @@ const convertTime = time => {
  * 将秒 -> 分 秒
  * @param {number} seconds
  */
-const secondToMinute = seconds => {
+const secondToMinute = (seconds) => {
   const minute = formatNumber(Math.floor(seconds / 60));
   const second = formatNumber(parseInt(seconds % 60, 10));
   return {
@@ -75,7 +75,7 @@ const secondToMinute = seconds => {
  * @param {Number} timestamp 时间戳
  * @return date:2018/10/09   time: 12:59
  */
-const setTimestampToStr = timestamp => {
+const setTimestampToStr = (timestamp) => {
   const timeObj = new Date(timestamp);
   const year = timeObj.getFullYear();
   const month = formatNumber(timeObj.getMonth() + 1);
@@ -94,7 +94,7 @@ const setTimestampToStr = timestamp => {
  * 检测时间(ms)是不是今天
  * @param {Number} time 时间戳
  */
-const validateTimeIsToday = time => {
+const validateTimeIsToday = (time) => {
   const timeDate = new Date(time);
   const date = new Date();
   return timeDate.getFullYear() === date.getFullYear() && timeDate.getMonth() === date.getMonth() && timeDate
@@ -120,7 +120,7 @@ const isSame = (time, value, cycle) => {
  * 如果不是今年 -> 年/月/日 时:分
  * 否则 *月*日 时:分
  */
-const formatBeginTime = timestamp => {
+const formatBeginTime = (timestamp) => {
   const timeObj = new Date(timestamp);
   const year = timeObj.getFullYear();
   const month = formatNumber(timeObj.getMonth() + 1);
@@ -134,12 +134,11 @@ const formatBeginTime = timestamp => {
   if (validateTimeIsToday(timestamp)) {
     // 今天
     return `今天 ${time}`;
-	} else if (currentYear !== year) {
+  } if (currentYear !== year) {
     // 不是今年
     return `${date} ${time}`;
-	} else {
-		return `${month}月${day}日 ${time}`;
   }
+  return `${month}月${day}日 ${time}`;
 };
 
 /**
@@ -150,7 +149,7 @@ const formatBeginTime = timestamp => {
  * 其余的显示分钟
  * 超过2小时（ 2 * 60 * 60 * 1000 ms） 转换成小时 + 分钟数
  */
-const formatDuration = duration => {
+const formatDuration = (duration) => {
   const minuteTime = 60 * 1000;
   const hourTime = 60 * minuteTime;
   const dayTime = 24 * hourTime;
@@ -160,33 +159,29 @@ const formatDuration = duration => {
   if (duration <= 60 * 1000) {
     // 小于1分钟 返回几秒
     return `${Math.floor(duration / 1000)}秒`;
-	} else if (duration > dayTime) {
+  } if (duration > dayTime) {
     // 大于1天
     if (minutes === 0) {
       if (hours === 0) {
         // 分钟数是0 和 小时数是0 返回 几天
         return `${days}天`;
-			} else {
+      }
       // 分钟是0 小时不是0 返回 几天几小时
       return `${days}天${hours}小时`;
     }
-		} else {
     // 分钟不是0 返回几天几时几分
     return `${days}天${hours}时${minutes}分`;
-		}
-	} else if (duration > 2 * hourTime) {
+  } if (duration > 2 * hourTime) {
     // 大于2h
     if (minutes === 0) {
       // 分钟是0 返回几小时
       return `${hours}小时`;
-		} else {
+    }
     // 分钟不是0 返回几小时几分钟
     return `${hours}小时${minutes}分钟`;
   }
-	} else {
   // 其余情况 返回 几分钟
   return `${parseInt(duration / minuteTime)}分钟`;
-	}
 };
 
 /**
@@ -197,7 +192,7 @@ const formatDuration = duration => {
  * 其余的显示分钟 { days: 0, hours: 0, minutes, seconds: 0 }
  * 超过2小时（ 2 * 60 * 60 * 1000 ms） 转换成{ days: 0, hours, minutes, seconds: 0 }
  */
-const formatDurationToObject = duration => {
+const formatDurationToObject = (duration) => {
   const minuteTime = 60 * 1000;
   const hourTime = 60 * minuteTime;
   const dayTime = 24 * hourTime;
@@ -252,16 +247,14 @@ const formatDurationToObject = duration => {
  * @param {obj} 对象格式的时间 days, hours, minutes, seconds
  * @return 时长的ms
  */
-const formatObjectTimeToMs = (days = 0, hours = 0, minutes = 0, seconds = 0) => {
-	return days * 24 * 60 * 60 * 1000 + hours * 60 * 60 * 1000 + minutes * 60 * 1000 + seconds * 1000;
-};
+const formatObjectTimeToMs = (days = 0, hours = 0, minutes = 0, seconds = 0) => days * 24 * 60 * 60 * 1000 + hours * 60 * 60 * 1000 + minutes * 60 * 1000 + seconds * 1000;
 
 /**
  * 计算过滤 周期
  * @param {string} time 周期字符串
  * @return {string} cycle 周期英文字符串
  */
-const computeCycle = time => {
+const computeCycle = (time) => {
   // 加载下一个周期的任务
   let cycle = 'day';
   switch (time) {
@@ -314,12 +307,14 @@ const formatStartTimeToCycleTime = (cycle, time) => {
  * @param {number} leftTime 剩余时间ms
  * @returns { num: 显示的数字, time: 演示器演示时长 }
  */
-const computeDurationText = leftTime => {
+const computeDurationText = (leftTime) => {
   try {
-		if (leftTime < 0) return {
+    if (leftTime < 0) {
+      return {
         num: 0,
-			time: null
+        time: null,
       };
+    }
     const {
       years,
       months,
@@ -327,7 +322,7 @@ const computeDurationText = leftTime => {
       hours,
       minutes,
       seconds,
-			milliseconds
+      milliseconds,
     } = dayjs.duration(leftTime).$d;
     let num = 0;
     let time = 1000;
@@ -355,13 +350,13 @@ const computeDurationText = leftTime => {
     }
     return {
       num,
-			time
+      time,
     };
   } catch (error) {
     console.log('🚀 ~ file: time.js ~ line 335 ~ computeDurationText ~ error', error);
     return {
       num: 0,
-			time: null
+      time: null,
     };
   }
 };