style: calender格式及细节调整

.hbuilderx/launch.json

@@ -2,6 +2,10 @@
   // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
     "version": "0.0",
     "configurations": [{
+     	"app-plus" : 
+     	{
+     		"launchtype" : "local"
+     	},
      	"default" : 
      	{
      		"launchtype" : "local"

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)

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"
+        :duration="500"
-        :current="current"
+        :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">
+            <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
-                <view class="date1 is-today" :class="[item.isToday ? 'is-today' : '', item.fullDate === data.selectedDate ? checkedClass : '']">{{ item.time.getDate() }}</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()
+  start: dayjs().startOf('month').valueOf(),
-    .startOf('month')
+  end: dayjs().endOf('month').valueOf(),
-    .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(() => {
+const nextDays = computed(() => {
-  let nexts = [];
+  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;
+  // const preMode = this.weekMode;
-  // let isweek = false;
+  // let isWeek = false;
-  // if (premode) {
+  // if (preMode) {
-  //   isweek = !!this.days.find((item) => item.fullDate === this.selectedDate);
+  //   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;

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') {
     // 年，月，日

pages/index/index.vue

@@ -36,14 +36,8 @@ onMounted(() => {
 
 const handleFindPoint = async (start, end) => {
   try {
-    const startTime = start
+    const startTime = start || dayjs().startOf('month').valueOf();
-      || dayjs()
+    const endTime = end || dayjs().endOf('month').valueOf();
-        .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) {
@@ -62,7 +56,6 @@ watch(
   },
   { immediate: true },
 );
-
 </script>
 
 <style>