feat(calendar, tall.js): 上下滑动切换日历的模式,tall.js中domain根据环境变量切换

CHANGELOG.md

@@ -1,4 +1,4 @@
-# 0.1.0 (2021-08-10)
+# 0.1.0 (2021-08-11)
 
 ### 🌟 新功能
 范围|描述|commitId
@@ -33,6 +33,7 @@
  - | 标题栏角色栏全局任务组件新建 | 0500cb4
  - | 模拟接口测试 | 69e7931
  - | 添加时间轴上下滚动 | 2b81bbc
+ - | 点击日历日期查询项目列表 | c458385
  - | 角色栏实现 | 94cd671
  - | 距调整pc端 | 5069aa1
  - | 配置默认插件接口 | f0c177d

src/components/Calendar/Calendar.vue

@@ -92,31 +92,19 @@ import { gegerateDates, dateEqual, formatDate } from './generateDates.js';
 
 export default {
   props: {
-    duration: {
+    duration: { type: Number, default: 500 },
-      type: Number,
+    // 打点日期列表
-      default: 500,
+    dotList: { type: Array, default: () => [] },
-    },
+    // 是否返回今日
-    dotList: {
+    showBack: { type: Boolean, default: false },
-      type: Array, /// 打点日期列表
+    // 今日的自定义样式class
-      default() {
+    todayClass: { type: String, default: 'is-today' },
-        return [];
+    // 选中日期的样式class
-      },
+    checkedClass: { type: String, default: 'is-checked' },
-    },
+    // 打点日期的自定义样式
-    showBack: {
-      type: Boolean, // 是否返回今日
-      default: false,
-    },
-    todayClass: {
-      type: String, // 今日的自定义样式class
-      default: 'is-today',
-    },
-    checkedClass: {
-      type: String, // 选中日期的样式class
-      default: 'is-checked',
-    },
     dotStyle: {
-      type: Object, // 打点日期的自定义样式
+      type: Object,
-      default() {
+      default: () => {
         return { background: '#FF0000' };
       },
     },

src/components/Projects/Projects.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="py-3 mt-4 bg-white">
+  <view class="py-3 mt-4 bg-white u-font-15">
     <view v-for="(project, index) in projects" :key="index">
       <!-- 有子项目 -->
       <view class="flex items-center justify-between p-3">

src/pages/index/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <view class="bg-gray-50">
+  <view class="bg-gray-50" @touchmove="onMove">
     <view class="relative">
       <!-- 日历 -->
-      <Calendar @selected-change="onDateChange" :show-back="true" :dot-list="days" />
+      <Calendar @selected-change="onDateChange" :show-back="true" :dot-list="days" ref="calendar" />
       <!-- 上传 导入wbs -->
       <Upload @show-alert="onShowAlert" />
     </view>
@@ -27,6 +27,8 @@
 <script>
 import { mapState, mapMutations } from 'vuex';
 
+let prevY = 0;
+
 export default {
   data() {
     return {
@@ -41,6 +43,7 @@ export default {
         title: '',
         description: '',
       },
+      calendar: null,
     };
   },
 
@@ -58,6 +61,10 @@ export default {
     this.getProjects();
   },
 
+  onReady() {
+    this.calendar = this.$refs.calendar;
+  },
+
   methods: {
     ...mapMutations('project', ['setProjects']),
 
@@ -89,6 +96,19 @@ export default {
       this.alert.show = true;
       setTimeout(() => (this.alert.show = false), 10000);
     },
+
+    // 监听触摸滑动 切换日历的模式 月/周
+    onMove(event) {
+      const y = event.changedTouches[0].pageY;
+      if (y - prevY > 0) {
+        // 向下滑动 如果是周视图weekMode=true 就 变成 月视图weekMode=false
+        this.calendar.weekMode && (this.calendar.weekMode = false);
+      } else if (y - prevY < 0) {
+        // 向上滑动 如果是月视图weekMode=false 就变成 周视图weekMode=true
+        !this.calendar.weekMode && (this.calendar.weekMode = true);
+      }
+      prevY = y;
+    },
   },
 };
 </script>

src/utils/tall.js

@@ -7,6 +7,8 @@ import time from '@/utils/time.js';
 import ui from '@/utils/ui.js';
 import upload from '@/utils/upload.js';
 
+const gateway = process.env.VUE_APP_API_URL;
+
 const $t = {
   zIndex, // 定位元素层级
   app, // app级别的相关配置
@@ -16,7 +18,7 @@ const $t = {
   timeConfig, // 时间相关配置
   ui, // ui界面提示相关
   chooseAndUpload: upload.chooseAndUpload, // 选择并上传单个文件相关的封装
-  domain: 'https://www.tall.wiki/gateway/defaultwbs',
+  domain: `${gateway}/defaultwbs`,
 };
 
 uni.$t = $t;