基板任务清单

This commit is contained in:
2023-01-04 10:10:39 +08:00
parent f9eb77079b
commit c17bdb8627
20 changed files with 188 additions and 298 deletions

8
README.md Normal file
View File

@@ -0,0 +1,8 @@
## 项目背景
该项目一个偶然的机会看到知乎todo清单哪个使用的评测看到很多使用的痛点于是就尝试自己开发一个看是否可用纯是个人爱好之前没有接触过微信小程序但是还是有些前端和后端的基础的
该项目使用微信原生的语言使用腾讯的开源的TDesign
- [什么是TDesign](https://tdesign.tencent.com/about/introduce)
TDesign 是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系。

View File

@@ -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 |

View File

@@ -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;
};
}

View File

@@ -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;

View File

@@ -1,3 +0,0 @@
{
"component": true
}

View File

@@ -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>

View File

@@ -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;
}

View File

@@ -1,3 +0,0 @@
import { TdDividerProps } from './type';
declare const props: TdDividerProps;
export default props;

View File

@@ -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;

View File

@@ -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;
};
}

View File

@@ -1,2 +0,0 @@
;
export {};

View File

@@ -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'},
],
},

View File

@@ -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"
}
}

View File

@@ -18,7 +18,6 @@
<text>今天{{item.repeat}}周年啦!</text>
</view>
</view>
<t-divider content="✿✿✿---■Quinn■---✿✿✿" />
</view>
<view class="block-position"></view>
</view>

View File

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

View File

@@ -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'
})
}
});

View File

@@ -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"
}
}

View File

@@ -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>

View File

@@ -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;
}

View File

@@ -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 || '年 月 日'}}"