diff --git a/components/countdown/countdown.js b/components/countdown/countdown.js new file mode 100644 index 0000000..c672fec --- /dev/null +++ b/components/countdown/countdown.js @@ -0,0 +1,41 @@ +function setTwo(num){ return num<10 ? ('0'+num) : (''+num); }; +export default class CountDown{ + constructor(t){ + if(t instanceof Array){ + this.time =new Date().getTime()+ (new Date(t[1]).getTime() - new Date(t[0]).getTime()); + }else{ + this.time =/\//gi.test(t.toString()) ? (new Date(t).getTime()) : ( new Date().getTime()+parseInt(t)); + } + } + timeOut (fn,t) { + let _now = new Date().getTime(), + json={}, + count = Math.round((this.time - _now)/1000); + if(count <= 0) { + json = {day :'00',hour :'00',min :'00',sec :'00',ms :'00'} + fn.call(this, json) + this.endFn && this.endFn.call(this, json) + return; + }; + json = { + day : setTwo(Math.floor(count/86400)), //天数 + hour : setTwo(Math.floor(count/ (60 * 60) % 24 )), //小时 + min : setTwo(Math.floor(count/60 % 60)), //分钟 + sec : setTwo(Math.floor(count%60)), //秒 + ms : setTwo((this.time - _now)%1000).substr(0,2) //豪秒 + }; + let _end = new Date().getTime(); + let _diff = _now - _end; //误差 + fn.call(this, json); + setTimeout(function(that){ + that.timeOut(fn,t) + }, t ? (t) : 1000 - _diff,this) + } + end(fn){ + this.endFn = fn; + } + run(fn,t){ + this.timeOut(fn,t); + return this + } +}; diff --git a/components/countdown/index.js b/components/countdown/index.js new file mode 100644 index 0000000..d40b16b --- /dev/null +++ b/components/countdown/index.js @@ -0,0 +1,69 @@ +import CountDown from './countdown.js'; +Component({ + properties: { + showDay : { + type: null, + value: 0 , + observer(val) { + this.setData({ + dayOff : typeof val === 'string' ? JSON.parse(val) : val + }); + } + }, + format : { + type: null, + value: '' + }, + showHour : { + type: null, + value: 1 , + observer(val) { + this.setData({ + hourOff :typeof val === 'string' ? JSON.parse(val) : val + }); + } + }, + showMin : { + type: null, + value: 1 , + observer(val) { + this.setData({ + minOff :typeof val === 'string' ? JSON.parse(val) : val + }); + } + }, + showSec : { + type: null, + value: 1 , + observer(val) { + this.setData({ + secOff :typeof val === 'string' ? JSON.parse(val) : val + }); + } + }, + index : { + type: null, + value: 0 + }, + time: { + type: null, + value: 0 + } + }, + data: { + dayOff : 0, + hourOff :1, + minOff :1, + secOff :1, + countTime: '' + }, + attached(){ + new CountDown(this.data.time).run(t=>{ + this.setData({ + countTime : t + }); + }).end(()=>{ + this.triggerEvent('end',{index : this.data.index}) + }); + } +}) diff --git a/components/countdown/index.json b/components/countdown/index.json new file mode 100644 index 0000000..ac34bd7 --- /dev/null +++ b/components/countdown/index.json @@ -0,0 +1,5 @@ +{ + "component": true, + "usingComponents": { + } +} diff --git a/components/countdown/index.wxml b/components/countdown/index.wxml new file mode 100644 index 0000000..24db8f8 --- /dev/null +++ b/components/countdown/index.wxml @@ -0,0 +1,7 @@ + + + {{countTime.day}}{{format ? format : '天'}} + {{countTime.hour}}{{format ? format : '时'}} + {{countTime.min}}{{format ? format : '分'}} + {{countTime.sec}}{{format ? '' : '秒'}} + diff --git a/components/countdown/index.wxss b/components/countdown/index.wxss new file mode 100644 index 0000000..739fa88 --- /dev/null +++ b/components/countdown/index.wxss @@ -0,0 +1,13 @@ +.countDownView { + display: inline-block; + line-height: 1 +} + +.countDownView text { + padding: 0 3px; + margin: 0 2px; +} + +.countDownView view { + display: inline-block; +} diff --git a/components/divider/README.md b/components/divider/README.md new file mode 100644 index 0000000..8ca202a --- /dev/null +++ b/components/divider/README.md @@ -0,0 +1,57 @@ +--- +title: Divider 分割符 +description: 用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。 +spline: message +isComponent: true +--- + + +## 引入 + +全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。 + +```json +"usingComponents": { + "t-divider": "tdesign-miniprogram/divider/divider" +} +``` + +### 主题定制 + +CSS 变量名|说明 +--|-- +--td-divider-color | 分割线颜色 +--td-divider-content-color | 分割线文本颜色 + + +## 代码演示 + +### 基础分割符 + +分割符主要是由直线和文字组成，通过`slot`传入分割线文案或者其他自定义内容，通过`layout`控制分隔符是垂直还是横向，`line-color`属性可定义线条颜色 + + + +{{ 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 | diff --git a/components/divider/divider.d.ts b/components/divider/divider.d.ts new file mode 100644 index 0000000..f1cec01 --- /dev/null +++ b/components/divider/divider.d.ts @@ -0,0 +1,13 @@ +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; + }; +} diff --git a/components/divider/divider.js b/components/divider/divider.js new file mode 100644 index 0000000..f8ff10f --- /dev/null +++ b/components/divider/divider.js @@ -0,0 +1,30 @@ +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; diff --git a/components/divider/divider.json b/components/divider/divider.json new file mode 100644 index 0000000..467ce29 --- /dev/null +++ b/components/divider/divider.json @@ -0,0 +1,3 @@ +{ + "component": true +} diff --git a/components/divider/divider.wxml b/components/divider/divider.wxml new file mode 100644 index 0000000..f4ed8a0 --- /dev/null +++ b/components/divider/divider.wxml @@ -0,0 +1,11 @@ + + + + {{content}} + + + + diff --git a/components/divider/divider.wxss b/components/divider/divider.wxss new file mode 100644 index 0000000..035b9e5 --- /dev/null +++ b/components/divider/divider.wxss @@ -0,0 +1,100 @@ +.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; +} diff --git a/components/divider/props.d.ts b/components/divider/props.d.ts new file mode 100644 index 0000000..806aab2 --- /dev/null +++ b/components/divider/props.d.ts @@ -0,0 +1,3 @@ +import { TdDividerProps } from './type'; +declare const props: TdDividerProps; +export default props; diff --git a/components/divider/props.js b/components/divider/props.js new file mode 100644 index 0000000..32a0a83 --- /dev/null +++ b/components/divider/props.js @@ -0,0 +1,29 @@ +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; diff --git a/components/divider/type.d.ts b/components/divider/type.d.ts new file mode 100644 index 0000000..1c39340 --- /dev/null +++ b/components/divider/type.d.ts @@ -0,0 +1,37 @@ +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; + }; +} diff --git a/components/divider/type.js b/components/divider/type.js new file mode 100644 index 0000000..95da36c --- /dev/null +++ b/components/divider/type.js @@ -0,0 +1,2 @@ +; +export {}; diff --git a/components/empty/README.md b/components/empty/README.md new file mode 100644 index 0000000..3a5f759 --- /dev/null +++ b/components/empty/README.md @@ -0,0 +1,47 @@ +--- +title: Empty 空内容 +description: 用于空状态时的占位提示。 +spline: data +isComponent: true +--- + + +## 引入 + +全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。 + +```json +"usingComponents": { + "t-empty": "tdesign-miniprogram/empty/empty" +} +``` + +## 代码演示 + +### 图标空状态 + +{{ base }} + +### 自定义图片空状态 + +{{ imageEmpty }} + +### 带操作空状态 + +{{ buttonEmpty }} + +### 空页面 + +{{ pageEmpty }} + +## API + +### Empty Props + +| 名称 | 类型 | 默认值 | 说明 | 必传 | +| ---------------- | ------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | +| action | Slot | - | 操作按钮 | N | +| description | String / Slot | - | 描述文字 | N | +| external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、文本描述类名、图片类名、操作按钮类名。`['t-class', 't-class-description', 't-class-image', 't-class-actions']` | N | +| icon | String | - | 图标名称 | N | +| image | String / Slot | - | 图片地址 | N | diff --git a/components/empty/empty.d.ts b/components/empty/empty.d.ts new file mode 100644 index 0000000..557e732 --- /dev/null +++ b/components/empty/empty.d.ts @@ -0,0 +1,11 @@ +import { SuperComponent } from '../common/src/index'; +export default class extends SuperComponent { + options: { + multipleSlots: boolean; + }; + externalClasses: string[]; + properties: import("./type").TdEmptyProps; + data: { + classPrefix: string; + }; +} diff --git a/components/empty/empty.js b/components/empty/empty.js new file mode 100644 index 0000000..b8a1f13 --- /dev/null +++ b/components/empty/empty.js @@ -0,0 +1,28 @@ +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 props from './props'; +import config from '../common/config'; +const { prefix } = config; +const name = `${prefix}-empty`; +let default_1 = class extends SuperComponent { + constructor() { + super(...arguments); + this.options = { + multipleSlots: true, + }; + this.externalClasses = ['t-class', 't-class-description', 't-class-image']; + this.properties = props; + this.data = { + classPrefix: name, + }; + } +}; +default_1 = __decorate([ + wxComponent() +], default_1); +export default default_1; diff --git a/components/empty/empty.json b/components/empty/empty.json new file mode 100644 index 0000000..049940c --- /dev/null +++ b/components/empty/empty.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-icon": "../icon/icon" + } +} diff --git a/components/empty/empty.wxml b/components/empty/empty.wxml new file mode 100644 index 0000000..94e07c6 --- /dev/null +++ b/components/empty/empty.wxml @@ -0,0 +1,21 @@ + + + + + + + + {{description}} + + + + + + diff --git a/components/empty/empty.wxs b/components/empty/empty.wxs new file mode 100644 index 0000000..88305a6 --- /dev/null +++ b/components/empty/empty.wxs @@ -0,0 +1,12 @@ +var REGEXP = getRegExp('^\d+(\.\d+)?$'); + +function addUnit(value) { + if (value == null) { + return undefined; + } + return REGEXP.test('' + value) ? value + 'px' : value; +} + +module.exports = { + addUnit: addUnit, +}; diff --git a/components/empty/empty.wxss b/components/empty/empty.wxss new file mode 100644 index 0000000..7f98f9b --- /dev/null +++ b/components/empty/empty.wxss @@ -0,0 +1,48 @@ +.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); +} +.t-empty { + display: flex; + flex-direction: column; +} +.t-empty__content { + text-align: center; +} +.t-empty__img { + width: 100rpx; + height: 100rpx; +} +.t-empty__description { + margin-top: 48rpx; + text-align: center; + color: rgba(0, 0, 0, 0.4); + font-size: 28rpx; + line-height: 44rpx; +} +.t-empty__description + .t-empty__actions:not(:empty) { + margin-top: 48rpx; +} diff --git a/components/empty/props.d.ts b/components/empty/props.d.ts new file mode 100644 index 0000000..6f04c79 --- /dev/null +++ b/components/empty/props.d.ts @@ -0,0 +1,3 @@ +import { TdEmptyProps } from './type'; +declare const props: TdEmptyProps; +export default props; diff --git a/components/empty/props.js b/components/empty/props.js new file mode 100644 index 0000000..c05a85d --- /dev/null +++ b/components/empty/props.js @@ -0,0 +1,16 @@ +const props = { + description: { + type: String, + }, + externalClasses: { + type: Array, + }, + icon: { + type: String, + value: '', + }, + image: { + type: String, + }, +}; +export default props; diff --git a/components/empty/type.d.ts b/components/empty/type.d.ts new file mode 100644 index 0000000..409aa4f --- /dev/null +++ b/components/empty/type.d.ts @@ -0,0 +1,22 @@ +export interface TdEmptyProps { + description?: { + type: StringConstructor; + value?: string; + required?: boolean; + }; + externalClasses?: { + type: ArrayConstructor; + value?: ['t-class', 't-class-description', 't-class-image', 't-class-actions']; + required?: boolean; + }; + icon?: { + type: StringConstructor; + value?: string; + required?: boolean; + }; + image?: { + type: StringConstructor; + value?: string; + required?: boolean; + }; +} diff --git a/components/empty/type.js b/components/empty/type.js new file mode 100644 index 0000000..95da36c --- /dev/null +++ b/components/empty/type.js @@ -0,0 +1,2 @@ +; +export {}; diff --git a/images/add.png b/images/add.png deleted file mode 100644 index 6b8c336..0000000 Binary files a/images/add.png and /dev/null differ diff --git a/images/baby.png b/images/baby.png new file mode 100644 index 0000000..cc19bcc Binary files /dev/null and b/images/baby.png differ diff --git a/images/birthday.jpg b/images/birthday.jpg new file mode 100644 index 0000000..e046ca6 Binary files /dev/null and b/images/birthday.jpg differ diff --git a/images/life.jpg b/images/life.jpg new file mode 100644 index 0000000..c81201c Binary files /dev/null and b/images/life.jpg differ diff --git a/images/love.png b/images/love.png new file mode 100644 index 0000000..815774c Binary files /dev/null and b/images/love.png differ diff --git a/pages/anniversary/index.js b/pages/anniversary/index.js index 287fabb..7e15980 100644 --- a/pages/anniversary/index.js +++ b/pages/anniversary/index.js @@ -1,8 +1,15 @@ Page({ data: { aIconList: ['check-rectangle','star-filled','notification','circle'], - }, - onLoad: function (options) { - + dataEmpty: false, + anniversaryList: [ + {'title':'老公的工作纪念日','type':'life','dateType':'农历','date':'2018/12/30','repeat':'3','nextDate':'2022/12/30'}, + {'title':'结婚纪念日','type':'love','dateType':'公历','date':'2017/12/30','repeat':'4','nextDate':'2022/12/30'}, + {'title':'真正的操作的纪念日','type':'life','dateType':'公历','date':'2017/12/30','repeat':'4','nextDate':'2022/12/30'}, + {'title':'宝宝出生日期','type':'baby','dateType':'公历','date':'2017/12/30','repeat':'4','nextDate':'2022/12/30'}, + {'title':'王xx的生日','type':'birthday','dateType':'公历','date':'2017/12/30','repeat':'4','nextDate':'2022/12/30'}, + {'title':'天才的生日','type':'birthday','dateType':'公历','date':'2017/12/30','repeat':'4','nextDate':'2022/12/30'}, + {'title':'大家爱送到家我i的生日','type':'birthday','dateType':'公历','date':'2017/12/30','repeat':'4','nextDate':'2022/12/30'}, + ], } }); diff --git a/pages/anniversary/index.json b/pages/anniversary/index.json index d06748f..d3183d1 100644 --- a/pages/anniversary/index.json +++ b/pages/anniversary/index.json @@ -1,5 +1,10 @@ { "usingComponents": { - "foot-tab": "../foot-tab/foot-tab" + "foot-tab": "../foot-tab/foot-tab", + "t-empty": "/components/empty/empty", + "t-fab": "/components/fab/fab", + "t-badge": "/components/badge/badge", + "t-countdown": "/components/countdown/index", + "t-divider": "/components/divider/divider" } } diff --git a/pages/anniversary/index.wxml b/pages/anniversary/index.wxml index caf93ad..7307544 100644 --- a/pages/anniversary/index.wxml +++ b/pages/anniversary/index.wxml @@ -1,5 +1,27 @@ -纪念日 + + + + + + + + {{item.title}} + + + + 距离{{item.repeat}}周年 + + + + 今天{{item.repeat}}周年啦! + + + + + + + diff --git a/pages/anniversary/index.wxss b/pages/anniversary/index.wxss index e69de29..2f62d78 100644 --- a/pages/anniversary/index.wxss +++ b/pages/anniversary/index.wxss @@ -0,0 +1,27 @@ +.empty-cls { + margin-top: 250rpx !important; +} +.contentView{ + padding-bottom: 50px; +} +.anniversary{ + height: 300rpx; + margin: 10rpx 20rpx; + border: 5px ridge #f0a1a8; + border-radius: 5px; +} +image{ + width: 100%; + height: 120rpx; +} +.title { + padding-left: 10rpx; + font-size: 38rpx; +} +.remark { + padding-left: 10rpx; + margin-top: 5rpx; + font-size: 28rpx; + line-height: 28rpx; + color: #999999; +} diff --git a/pages/task/index.js b/pages/task/index.js index 06ed466..7b34ac7 100644 --- a/pages/task/index.js +++ b/pages/task/index.js @@ -51,6 +51,8 @@ Page({ taskList: [], over: false }; + console.log(data) + console.log(data.over) let listData = this.data.delayList || []; pageData.requesting = false; if (type === 'refresh') { diff --git a/utils/api.js b/utils/api.js index b479915..d7a2398 100644 --- a/utils/api.js +++ b/utils/api.js @@ -228,7 +228,7 @@ export default { */ taskList(params) { return new Promise(x => { - let job = {data:'test'}; + let job = {data:{over:true}}; x(job) console.log(x + '请求成功'); wx.hideLoading();