基板任务清单

2023-01-04 10:10:39 +08:00
parent f9eb77079b
commit c17bdb8627
20 changed files with 188 additions and 298 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,8 @@
+## 项目背景
+
+该项目一个偶然的机会看到知乎todo清单哪个使用的评测，看到很多使用的痛点，于是就尝试自己开发一个看是否可用，纯是个人爱好，之前没有接触过微信小程序，但是还是有些前端和后端的基础的
+该项目使用微信原生的语言使用腾讯的开源的TDesign
+
+- [什么是TDesign？](https://tdesign.tencent.com/about/introduce)
+
+TDesign 是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系。
--- a/components/divider/README.md
+++ b/components/divider/README.md
@@ -1,57 +0,0 @@
---
-title: Divider 分割符
-description: 用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。
-spline: message
-isComponent: true
---
-
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
-## 引入
-
-全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
-
-```json
-"usingComponents": {
-  "t-divider": "/components/divider/divider"
-}
-```
-
-### 主题定制
-
-CSS 变量名|说明
--|--
--td-divider-color | 分割线颜色
--td-divider-content-color | 分割线文本颜色
-
-
-## 代码演示
-
-### 基础分割符
-
-分割符主要是由直线和文字组成，通过`slot`传入分割线文案或者其他自定义内容，通过`layout`控制分隔符是垂直还是横向，`line-color`属性可定义线条颜色
-
-<img src="https://tdesign.gtimg.com/miniprogram/readme/divider.png" width="375px" height="50%">
-
-{{ base }}
-
-### 文字 + 直线
-
-{{ text-line }}
-
-### 纯文字 + 分割
-
-{{ text-only }}
-
-## API
-
-### Divider Props
-
-| 名称             | 类型          | 默认值     | 说明                                                                                                 | 必传 |
-| ---------------- | ------------- | ---------- | ---------------------------------------------------------------------------------------------------- | ---- |
-| align            | String        | center     | 文本位置（仅在水平分割线有效）。可选项：left/right/center                                            | N    |
-| content          | String / Slot | -          | 子元素                                                                                               | N    |
-| dashed           | Boolean       | false      | 是否虚线（仅在水平分割线有效）                                                                       | N    |
-| external-classes | Array         | -          | 组件类名，分别用于设置 组件外层类名、分隔线类名 等。`['t-class', 't-class-line', 't-class-content']` | N    |
-| layout           | String        | horizontal | 分隔线类型有两种：水平和垂直。可选项：horizontal/vertical                                            | N    |
-| line-color       | String        | -          | 分隔线颜色                                                                                           | N    |
-| theme            | String        | horizontal | 已废弃。请更为使用 `layout`。分隔线类型有两种：水平和垂直。可选项：horizontal/vertical               | N    |
--- a/components/divider/divider.d.ts
+++ b/components/divider/divider.d.ts
@@ -1,13 +0,0 @@
-import { SuperComponent } from '../common/src/index';
-export default class Divider extends SuperComponent {
-    externalClasses: string[];
-    options: {
-        addGlobalClass: boolean;
-        multipleSlots: boolean;
-    };
-    properties: import("./type").TdDividerProps;
-    data: {
-        prefix: string;
-        classPrefix: string;
-    };
-}
--- a/components/divider/divider.js
+++ b/components/divider/divider.js
@@ -1,30 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { SuperComponent, wxComponent } from '../common/src/index';
-import config from '../common/config';
-import props from './props';
-const { prefix } = config;
-const name = `${prefix}-divider`;
-let Divider = class Divider extends SuperComponent {
-    constructor() {
-        super(...arguments);
-        this.externalClasses = ['t-class', 't-class-content'];
-        this.options = {
-            addGlobalClass: true,
-            multipleSlots: true,
-        };
-        this.properties = props;
-        this.data = {
-            prefix,
-            classPrefix: name,
-        };
-    }
-};
-Divider = __decorate([
-    wxComponent()
-], Divider);
-export default Divider;
--- a/components/divider/divider.json
+++ b/components/divider/divider.json
@@ -1,3 +0,0 @@
-{
-  "component": true
-}
--- a/components/divider/divider.wxml
+++ b/components/divider/divider.wxml
@@ -1,11 +0,0 @@
-<view class="{{layout==='vertical'? classPrefix + '--vertical-center' : ''}}">
-  <view
-    class="{{prefix}}-class {{classPrefix}} {{classPrefix}}--{{layout}} {{classPrefix}}--{{align}} {{dashed? classPrefix + '--dashed' : ''}} "
-    style="{{ lineColor  ? 'border-color: ' + lineColor + ';' : '' }}"
-  >
-    <view class="{{prefix}}-class-content {{classPrefix}}__content">
-      <view wx:if="{{content}}"> {{content}} </view>
-      <slot wx:else name="content" />
-    </view>
-  </view>
-</view>
--- a/components/divider/divider.wxss
+++ b/components/divider/divider.wxss
@@ -1,100 +0,0 @@
-.t-float-left {
-  float: left;
-}
-.t-float-right {
-  float: right;
-}
-@keyframes tdesign-fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-.hotspot-expanded.relative {
-  position: relative;
-}
-.hotspot-expanded::after {
-  content: '';
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  transform: scale(1.5);
-}
-page {
-  --td-divider-color: #e7e7e7;
-  --td-divider-content-color: rgba(0, 0, 0, 0.4);
-}
-.t-divider--horizontal {
-  display: flex;
-  align-items: center;
-  color: var(--td-divider-color);
-  border-color: var(--td-divider-color);
-  border-style: solid;
-  border-width: 0;
-  margin-top: 20rpx;
-  margin-bottom: 20rpx;
-}
-.t-divider--horizontal::before,
-.t-divider--horizontal::after {
-  display: block;
-  flex: 1;
-  box-sizing: border-box;
-  border-color: inherit;
-  border-style: inherit;
-  border-width: 1rpx 0 0;
-}
-.t-divider--horizontal::before {
-  content: '';
-}
-.t-divider--horizontal .t-divider__content:not(:empty) {
-  margin: 0 24rpx;
-}
-.t-divider--vertical {
-  display: flex;
-  flex-direction: column;
-  height: 1em;
-  margin: 0 16rpx;
-  color: var(--td-divider-color);
-  border-color: var(--td-divider-color);
-  border-style: solid;
-  border-width: 0;
-}
-.t-divider--vertical::before,
-.t-divider--vertical::after {
-  content: '';
-  display: block;
-  flex: 1;
-  box-sizing: border-box;
-  border-color: inherit;
-  border-style: inherit;
-  border-width: 0 1rpx 0 0;
-}
-.t-divider--vertical-center {
-  display: flex;
-  align-items: center;
-  height: 100%;
-}
-.t-divider--dashed {
-  border-style: dashed;
-}
-.t-divider__content {
-  font-size: 24rpx;
-  line-height: 40rpx;
-  color: var(--td-divider-content-color);
-}
-.t-divider--center::after,
-.t-divider--left::after,
-.t-divider--right::after {
-  content: '';
-}
-.t-divider--left::before {
-  max-width: 60rpx;
-}
-.t-divider--right::after {
-  max-width: 60rpx;
-}
--- a/components/divider/props.d.ts
+++ b/components/divider/props.d.ts
@@ -1,3 +0,0 @@
-import { TdDividerProps } from './type';
-declare const props: TdDividerProps;
-export default props;
--- a/components/divider/props.js
+++ b/components/divider/props.js
@@ -1,29 +0,0 @@
-const props = {
-    align: {
-        type: String,
-        value: 'center',
-    },
-    content: {
-        type: String,
-    },
-    dashed: {
-        type: Boolean,
-        value: false,
-    },
-    externalClasses: {
-        type: Array,
-    },
-    layout: {
-        type: String,
-        value: 'horizontal',
-    },
-    lineColor: {
-        type: String,
-        value: '',
-    },
-    theme: {
-        type: String,
-        value: 'horizontal',
-    },
-};
-export default props;
--- a/components/divider/type.d.ts
+++ b/components/divider/type.d.ts
@@ -1,37 +0,0 @@
-export interface TdDividerProps {
-    align?: {
-        type: StringConstructor;
-        value?: 'left' | 'right' | 'center';
-        required?: boolean;
-    };
-    content?: {
-        type: StringConstructor;
-        value?: string;
-        required?: boolean;
-    };
-    dashed?: {
-        type: BooleanConstructor;
-        value?: boolean;
-        required?: boolean;
-    };
-    externalClasses?: {
-        type: ArrayConstructor;
-        value?: ['t-class', 't-class-line', 't-class-content'];
-        required?: boolean;
-    };
-    layout?: {
-        type: StringConstructor;
-        value?: 'horizontal' | 'vertical';
-        required?: boolean;
-    };
-    lineColor?: {
-        type: StringConstructor;
-        value?: string;
-        required?: boolean;
-    };
-    theme?: {
-        type: StringConstructor;
-        value?: 'horizontal' | 'vertical';
-        required?: boolean;
-    };
-}
--- a/components/divider/type.js
+++ b/components/divider/type.js
@@ -1,2 +0,0 @@
-;
-export {};
--- a/pages/anniversary/index.js
+++ b/pages/anniversary/index.js
@@ -3,13 +3,13 @@ Page({
        aIconList: ['check-rectangle','star-filled','notification','circle'],
        dataEmpty: false,
        anniversaryList: [
-            {'title':'老公的工作纪念日','type':'life','dateType':'农历','totalDay':88,'today':false,'date':'2018-12-28','repeat':'3','nextDate':'2022-12-28'},
-            {'title':'结婚纪念日','type':'love','dateType':'公历','totalDay':88,'today':true,'date':'2017-12-28','repeat':'4','nextDate':'2022-12-28'},
-            {'title':'真正的操作的纪念日','type':'life','dateType':'公历','totalDay':88,'today':true,'date':'2017-12-28','repeat':'4','nextDate':'2022-12-28'},
-            {'title':'宝宝出生日期','type':'baby','dateType':'公历','totalDay':88,'today':true,'date':'2017-12-28','repeat':'4','nextDate':'2022-12-28'},
-            {'title':'王xx的生日','type':'birthday','dateType':'公历','totalDay':88,'today':false,'date':'2017-12-28','repeat':'4','nextDate':'2022-12-28'},
-            {'title':'天才的生日','type':'birthday','dateType':'公历','totalDay':88,'today':false,'date':'2017-12-28','repeat':'4','nextDate':'2022-12-28'},
-            {'title':'大家爱送到家我i的生日','type':'birthday','dateType':'公历','totalDay':88,'today':true,'date':'2017-12-28','repeat':'4','nextDate':'2022-12-28'},
+            {'title':'老公的工作纪念日','type':'life','dateType':'农历','totalDay':88,'today':false,'date':'2018-12-28','repeat':'3','nextDate':'2023-01-28'},
+            {'title':'结婚纪念日','type':'love','dateType':'公历','totalDay':88,'today':true,'date':'2017-12-28','repeat':'4','nextDate':'2023-12-28'},
+            {'title':'真正的操作的纪念日','type':'life','dateType':'公历','totalDay':88,'today':true,'date':'2017-12-28','repeat':'4','nextDate':'2023-02-28'},
+            {'title':'宝宝出生日期','type':'baby','dateType':'公历','totalDay':88,'today':true,'date':'2017-12-28','repeat':'4','nextDate':'2023-02-28'},
+            {'title':'王xx的生日','type':'birthday','dateType':'公历','totalDay':88,'today':false,'date':'2017-12-28','repeat':'4','nextDate':'2023-02-28'},
+            {'title':'天才的生日','type':'birthday','dateType':'公历','totalDay':88,'today':false,'date':'2017-12-28','repeat':'4','nextDate':'2023-02-28'},
+            {'title':'大家爱送到家我i的生日','type':'birthday','dateType':'公历','totalDay':88,'today':true,'date':'2017-12-28','repeat':'4','nextDate':'2023-02-28'},
        ],
    },

--- a/pages/anniversary/index.json
+++ b/pages/anniversary/index.json
@@ -3,7 +3,6 @@
    "foot-tab": "../foot-tab/foot-tab",
    "t-empty": "/components/empty/empty",
    "t-fab": "/components/fab/fab",
-    "t-countdown": "/components/countdown/index",
-    "t-divider": "/components/divider/divider"
+    "t-countdown": "/components/countdown/index"
  }
 }
--- a/pages/anniversary/index.wxml
+++ b/pages/anniversary/index.wxml
@@ -18,7 +18,6 @@
                <text>今天{{item.repeat}}周年啦!</text>
            </view>
        </view>
-        <t-divider content="✿✿✿---■Quinn■---✿✿✿" />
    </view>
    <view class="block-position"></view>
 </view>
--- a/pages/myself/account/index.js
+++ b/pages/myself/account/index.js
@@ -22,7 +22,7 @@ Page({

    exitLogin(){
        wx.clearStorageSync();
-        wx.reLaunch({url:"/pages/login/index"})
+        git ({url:"/pages/login/index"})
    }

 });
--- a/pages/task/taskDetail/index.js
+++ b/pages/task/taskDetail/index.js
@@ -0,0 +1,73 @@
+let taskId = '';
+Page({
+    data: {
+        mode: '',
+        alertVisible: false,
+        completeVisible: false,
+        repeatVisible: false,
+        repeatKey: [
+            { label: '每1天', value: '1' },
+            { label: '工作日', value: '2' },
+            { label: '每1周', value: '3' },
+            { label: '每1月', value: '4' },
+            { label: '每1年', value: '5' },
+        ],
+        date: new Date('2021-12-23').getTime(), // 支持时间戳传入
+        alertText: '',
+        completeText: '',
+        repeatText: '',
+        repeatValue: '',
+        // 指定选择区间起始值
+        start: '2008-01-01 00:00:00',
+        end: '2040-12-31 23:59:59',
+    },
+    onLoad: function (options) {
+        taskId = options.id;
+    },
+
+    showPicker(e) {
+        const { mode } = e?.currentTarget?.dataset;
+        this.setData({
+            mode,
+            [`${mode}Visible`]: true,
+        });
+    },
+    hidePicker() {
+        const { mode } = this.data;
+        this.setData({
+            [`${mode}Visible`]: false,
+        });
+    },
+    onConfirm(e) {
+        const { value } = e?.detail;
+        const { mode } = this.data;
+
+        console.log('confim', value);
+
+        this.setData({
+            [mode]: value,
+            [`${mode}Text`]: value,
+        });
+
+        this.hidePicker();
+    },
+
+    onPickerConfirm(e) {
+        const { label,value } = e?.detail;
+        this.setData({
+            repeatText : label,
+            repeatValue: value
+        });
+        this.hidePicker();
+    },
+
+    submitTask() {
+        //TODO 新增或者修改
+        console.log('保存成功')
+        wx.redirectTo({
+            url: '../task/index'
+        })
+    }
+
+
+});
--- a/pages/task/taskDetail/index.json
+++ b/pages/task/taskDetail/index.json
@@ -0,0 +1,9 @@
+{
+  "usingComponents": {
+    "t-date-time-picker": "/components/date-time-picker/date-time-picker",
+    "t-picker": "/components/picker/picker",
+    "t-picker-item": "/components/picker/picker-item",
+    "t-switch": "/components/switch/switch",
+    "t-button": "/components/button/button"
+  }
+}
--- a/pages/task/taskDetail/index.wxml
+++ b/pages/task/taskDetail/index.wxml
@@ -0,0 +1,70 @@
+<t-input label="任务名" value="{{'任务的农安我i吗哇哦i对面'}}" placeholder="请输入任务名称" maxlength="{{10}}" clearable />
+<t-cell
+        title="完成日期"
+        hover
+        note="{{completeText || '年 月 日'}}"
+        arrow
+        data-mode="complete"
+        bindtap="showPicker"
+        t-class="pannel-item"
+        t-class-note="{{completeText ? 'sub-text' : 'empty'}}"
+/>
+<t-cell
+        title="提醒日期"
+        hover
+        note="{{alertText || '年 月 日'}}"
+        arrow
+        data-mode="alert"
+        bindtap="showPicker"
+        t-class="pannel-item"
+        t-class-note="{{alertText ? 'sub-text' : 'empty'}}"
+/>
+<t-cell
+        title="任务重复"
+        hover
+        note="{{repeatText || '选择重复周期'}}"
+        arrow
+        data-mode="repeat"
+        bindtap="showPicker"
+        t-class="pannel-item"
+        t-class-note="{{repeatText ? 'sub-text' : 'empty'}}"
+/>
+<t-textarea label="备注" placeholder="请输入任务备注..." maxcharacter="200" />
+<t-button t-class="external-class" theme="primary" block bind:tap="submitTask">保存</t-button>
+<input value="{{repeatValue}}" hidden/>
+<t-date-time-picker
+        title="完成日期"
+        visible="{{completeVisible}}"
+        mode="date"
+        defaultValue="{{date}}"
+        format="YYYY-MM-DD"
+        bindchange="onConfirm"
+        bindpick="onColumnChange"
+        bindcancel="hidePicker"
+        start="{{start}}"
+        end="{{end}}"
+></t-date-time-picker>
+<t-date-time-picker
+        title="截止日期"
+        visible="{{alertVisible}}"
+        mode="date"
+        defaultValue="{{date}}"
+        format="YYYY-MM-DD"
+        bindchange="onConfirm"
+        bindpick="onColumnChange"
+        bindcancel="hidePicker"
+        start="{{start}}"
+        end="{{end}}"
+></t-date-time-picker>
+<t-picker
+        visible="{{repeatVisible}}"
+        value="{{repeatText}}"
+        data-key="repeatKey"
+        title="请选择重复周期"
+        cancelBtn="取消"
+        confirmBtn="确认"
+        bindchange="onPickerConfirm"
+        bindpick="onColumnChange"
+>
+    <t-picker-item options="{{repeatKey}}"></t-picker-item>
+</t-picker>
--- a/pages/task/taskDetail/index.wxss
+++ b/pages/task/taskDetail/index.wxss
@@ -0,0 +1,17 @@
+.pannel-item {
+    font-size: 32rpx;
+}
+
+.pannel-item::after {
+    border: 0;
+}
+
+.sub-text {
+    color: #000;
+    opacity: 0.9;
+}
+
+.empty {
+    color: #000;
+    opacity: 0.32;
+}
--- a/pages/task/taskView/index.wxml
+++ b/pages/task/taskView/index.wxml
@@ -1,4 +1,4 @@
-<t-input label="任务名" value="{{'任务的农安我i吗哇哦i对面'}}" disabled placeholder="请输入任务名称" maxlength="{{10}}" clearable />
+<t-input label="任务名" value="{{'任务的农安我i吗哇哦i对面'}}" disabled placeholder="请输入任务名称" maxlength="{{10}}" />
 <t-cell
        title="完成日期"
        note="{{completeText || '年 月 日'}}"
@@ -8,7 +8,7 @@
        t-class="pannel-item"
        t-class-note="{{completeText ? 'sub-text' : 'empty'}}"
 />
-<t-cell
+ <t-cell
        title="提醒日期"
        note="{{alertText || '年 月 日'}}"
        arrow