From db9602b85fcd3e500c01eb2f2e26a64ae8f62bfa Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Wed, 5 Jan 2022 15:54:58 +0800
Subject: [PATCH] =?UTF-8?q?style:=20calender=E6=A0=BC=E5=BC=8F=E5=8F=8A?=
 =?UTF-8?q?=E7=BB=86=E8=8A=82=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .hbuilderx/launch.json               |   4 +
 CHANGELOG.md                         |   7 ++
 components/Calendar/Calendar.vue     |  96 +++++++-------
 components/Calendar/generateDates.js |   2 +-
 pages/index/index.vue                | 179 +++++++++++++--------------
 5 files changed, 148 insertions(+), 140 deletions(-)

diff --git a/.hbuilderx/launch.json b/.hbuilderx/launch.json
index 32f4dc5..4bbcf3c 100644
--- a/.hbuilderx/launch.json
+++ b/.hbuilderx/launch.json
@@ -2,6 +2,10 @@
   // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
     "version": "0.0",
     "configurations": [{
+     	"app-plus" : 
+     	{
+     		"launchtype" : "local"
+     	},
      	"default" : 
      	{
      		"launchtype" : "local"
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 301b0bd..a6db990 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,10 +7,17 @@
  - | 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)
+ - | 日历页添加 | [1b46a91](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/1b46a91)
  - | 日历页首页 | [561c8e6](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/561c8e6)
  - | 更新代码 | [392c8cc](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/392c8cc)
 
 
+### chore
+范围|描述|commitId
+--|--|--
+ - | editorconfig update | [0c08089](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/0c08089)
+
+
 范围|描述|commitId
 --|--|--
  - | Initial commit | [52b8f49](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/52b8f49)
diff --git a/components/Calendar/Calendar.vue b/components/Calendar/Calendar.vue
index e37a2d5..0fe5138 100644
--- a/components/Calendar/Calendar.vue
+++ b/components/Calendar/Calendar.vue
@@ -1,9 +1,14 @@
 <template>
   <view class="zzx-calendar">
-    <view class="calendar-heander">{{ timeStr }}</view>
+    <view class="calendar-header">{{ timeStr }}</view>
     <!-- 星期几标题 -->
     <view class="calendar-weeks">
-      <view class="calendar-week" :class="{ 'text-red-500': week === '六' || week === '日' }" v-for="(week, index) in data.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">
@@ -11,43 +16,54 @@
         class="calendar-swiper"
         :style="{
           width: '100%',
-          height: sheight,
+          height: calenderHeight,
         }"
         :indicator-dots="false"
         :autoplay="false"
-        :duration="duration"
-        :current="current"
+        :duration="500"
+        :current="data.current"
         @change="changeSwp"
         :circular="true"
       >
-        <swiper-item class="calendar-item" v-for="sitem in data.swiper" :key="sitem">
+        <swiper-item class="calendar-item" v-for="sItem in data.swiper" :key="sItem">
           <view class="calendar-days">
             <!-- 当前的 -->
-            <template v-if="sitem === data.current">
-              <view class="calendar-day" v-for="(item, index) in data.days" :key="index" :class="{ 'day-hidden': !item.show }" @click="clickItem(item)">
-                <view class="date1 is-today" :class="[item.isToday ? 'is-today' : '', item.fullDate === data.selectedDate ? checkedClass : '']">{{ item.time.getDate() }}</view>
+            <template v-if="sItem === data.current">
+              <view
+                class="calendar-day"
+                v-for="(item, index) in data.days"
+                :key="index"
+                :class="{ 'day-hidden': !item.show }"
+                @click="clickItem(item)"
+              >
+                <view
+                  class="date"
+                  :class="[item.isToday ? 'is-today' : '', item.fullDate === data.selectedDate ? 'is-checked' : '']"
+                >{{ item.time.getDate() }}</view>
                 <view class="dot-show" v-if="item.info === '0'" :style="dotStyle"></view>
               </view>
             </template>
+
             <template v-else>
               <!-- 下一个月/周 -->
-              <template v-if="data.current - sitem === 1 || data.current - sitem === -2">
+              <template v-if="data.current - sItem === 1 || data.current - sItem === -2">
                 <view
                   class="calendar-day"
-                  v-for="(item, index) in predays"
+                  v-for="(item, index) in preDays"
                   :key="index"
                   :class="{
                     'day-hidden': !item.show,
                   }"
                 >
-                  <view class="date2" :class="[item.isToday ? 'is-today' : '']">{{ item.time.getDate() }}</view>
+                  <view class="date" :class="[item.isToday ? 'is-today' : '']">{{ item.time.getDate() }}</view>
                 </view>
               </template>
+
               <!-- 上一个月/周 -->
               <template v-else>
                 <view
                   class="calendar-day"
-                  v-for="(item, index) in nextdays"
+                  v-for="(item, index) in nextDays"
                   :key="index"
                   :class="{
                     'day-hidden': !item.show,
@@ -63,7 +79,7 @@
 
       <!-- <view class="mode-change" @click="changeMode">
         <view :class="weekMode ? 'mode-arrow-bottom' : 'mode-arrow-top'"> </view>
-      </view> -->
+      </view>-->
     </view>
 
     <view class="flex justify-center u-font-18" style="color: #3b82f6" @click="goToday">今日</view>
@@ -74,16 +90,9 @@
 import { reactive, computed, watchEffect, defineProps, defineEmits } from 'vue';
 import { useStore } from 'vuex';
 import dayjs from 'dayjs';
-import { gegerateDates, formatDate } from './generateDates.js';
+import { generateDates, formatDate } from './generateDates.js';
 
 defineProps({
-  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,
@@ -103,16 +112,12 @@ const data = reactive({
   weekMode: false, // false -> 月  true -> 显示周
   swiper: [0, 1, 2],
   selectedDate: formatDate(new Date(), 'yyyy-MM-dd'), // 当前选中的日期
-  start: dayjs()
-    .startOf('month')
-    .valueOf(),
-  end: dayjs()
-    .endOf('month')
-    .valueOf(),
+  start: dayjs().startOf('month').valueOf(),
+  end: dayjs().endOf('month').valueOf(),
 });
 const store = useStore();
 const dotList = computed(() => store.state.project.dotList);
-const sheight = computed(() => {
+const calenderHeight = computed(() => {
   // 根据年月判断有多少行
   // 判断该月有多少天
   let h = '35px';
@@ -138,34 +143,34 @@ const timeStr = computed(() => {
   return str;
 });
 // 上一周期的days书籍
-const predays = computed(() => {
+const preDays = computed(() => {
   let pres = [];
   if (data.weekMode) {
     // 周模式
     const d = new Date(data.currentYear, data.currentMonth - 1, data.currentDate);
     d.setDate(d.getDate() - 7);
-    pres = gegerateDates(d, 'week');
+    pres = generateDates(d, 'week');
   } else {
     // 月模式
     const d = new Date(data.currentYear, data.currentMonth - 2, 1);
-    pres = gegerateDates(d, 'month');
+    pres = generateDates(d, 'month');
   }
   return pres;
 });
 // 下一周期的days书籍
-const nextdays = computed(() => {
-  let nexts = [];
+const nextDays = computed(() => {
+  let next = [];
   if (data.weekMode) {
     // 周模式
     const d = new Date(data.currentYear, data.currentMonth - 1, data.currentDate);
     d.setDate(d.getDate() + 7);
-    nexts = gegerateDates(d, 'week');
+    next = generateDates(d, 'week');
   } else {
     // 月模式
     const d = new Date(data.currentYear, data.currentMonth, 1);
-    nexts = gegerateDates(d, 'month');
+    next = generateDates(d, 'month');
   }
-  return nexts;
+  return next;
 });
 
 watchEffect(() => {
@@ -271,10 +276,10 @@ const initDate = cur => {
   data.days = [];
   let days = [];
   if (data.weekMode) {
-    days = gegerateDates(date, 'week');
+    days = generateDates(date, 'week');
     // this.selectedDate = days[0].fullDate;
   } else {
-    days = gegerateDates(date, 'month');
+    days = generateDates(date, 'month');
 
     // const sel = new Date(this.selectedDate.replace('-', '/').replace('-', '/'));
     // const isMonth = sel.getFullYear() === this.currentYear && (sel.getMonth() + 1) === this.currentMonth;
@@ -314,16 +319,16 @@ initDate();
 
 // 切换模式
 const changeMode = () => {
-  // const premode = this.weekMode;
-  // let isweek = false;
-  // if (premode) {
-  //   isweek = !!this.days.find((item) => item.fullDate === this.selectedDate);
+  // 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) {
+  // if ((this.selectedDate && isMonth) || isWeek) {
   //   d = new Date(this.selectedDate.replace('-', '/').replace('-', '/'));
   // }
   // this.initDate(d);
@@ -340,7 +345,6 @@ const goToday = () => {
   // const d = new Date();
   // this.initDate(d);
 };
-
 </script>
 
 <style lang="scss" scoped>
@@ -350,7 +354,7 @@ const goToday = () => {
   background-color: #fff;
   padding-bottom: 10px;
 
-  .calendar-heander {
+  .calendar-header {
     text-align: center;
     padding: 16px 0;
     position: relative;
diff --git a/components/Calendar/generateDates.js b/components/Calendar/generateDates.js
index c08fc6a..c2c84d1 100644
--- a/components/Calendar/generateDates.js
+++ b/components/Calendar/generateDates.js
@@ -58,7 +58,7 @@ export const dateEqual = (before, after) => {
   }
 };
 
-export const gegerateDates = (date = new Date(), type = 'week') => {
+export const generateDates = (date = new Date(), type = 'week') => {
   const result = [];
   if (judgeType(date) === 'Date') {
     // 年，月，日
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 2868b40..a2c73a9 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,94 +1,87 @@
-<template>
-  <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>
-
-    <!-- 项目列表 -->
-    <Projects @getProjects="getProjects" class="flex-1 overflow-y-auto" />
-
-    <!-- 全局提示框 -->
-    <u-top-tips ref="uTips"></u-top-tips>
-  </view>
-</template>
-
-<script setup>
-import { reactive, ref, onMounted, computed, watch } from 'vue';
-import { useStore } from 'vuex';
-import dayjs from 'dayjs';
-
-const data = reactive({
-  calendar: null,
-  days: [],
-});
-
-const height = ref(null);
-const store = useStore();
-const token = computed(() => store.state.user.token);
-
-onMounted(() => {
-  const system = uni.getSystemInfoSync();
-  height.value = `${system.windowHeight}px`;
-});
-
-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);
-  }
-};
-
-// 监听token
-watch(
-  () => token.value,
-  newValue => {
-    if (!newValue) return;
-    if (newValue) {
-      handleFindPoint();
-    }
-  },
-  { immediate: true },
-);
-
-</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;
-}
+<template>
+  <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>
+
+    <!-- 项目列表 -->
+    <Projects @getProjects="getProjects" class="flex-1 overflow-y-auto" />
+
+    <!-- 全局提示框 -->
+    <u-top-tips ref="uTips"></u-top-tips>
+  </view>
+</template>
+
+<script setup>
+import { reactive, ref, onMounted, computed, watch } from 'vue';
+import { useStore } from 'vuex';
+import dayjs from 'dayjs';
+
+const data = reactive({
+  calendar: null,
+  days: [],
+});
+
+const height = ref(null);
+const store = useStore();
+const token = computed(() => store.state.user.token);
+
+onMounted(() => {
+  const system = uni.getSystemInfoSync();
+  height.value = `${system.windowHeight}px`;
+});
+
+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);
+  }
+};
+
+// 监听token
+watch(
+  () => token.value,
+  newValue => {
+    if (!newValue) return;
+    if (newValue) {
+      handleFindPoint();
+    }
+  },
+  { immediate: true },
+);
+</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>