diff --git a/app.json b/app.json index bffa9c5..81dff6b 100644 --- a/app.json +++ b/app.json @@ -4,7 +4,8 @@ "pages/logs/logs", "pages/myself/index", "pages/message/index", - "pages/taskDetail/index" + "pages/taskDetail/index", + "pages/anniversary/index" ], "usingComponents": { "t-icon": "/components/icon/icon", diff --git a/components/switch/README.md b/components/switch/README.md new file mode 100644 index 0000000..d89fd40 --- /dev/null +++ b/components/switch/README.md @@ -0,0 +1,63 @@ +--- +title: Switch 开关 +description: 用于控制某个功能的开启和关闭。 +spline: form +isComponent: true +--- + + +## 引入 + +全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。 + +```json +"usingComponents": { + "t-switch": "tdesign-miniprogram/switch/switch" +} +``` + +## 代码演示 + +### 基础开关 + + + +{{ base }} + + +### 开关状态 + +{{ status }} + + +### 受控用法 + +```html + + +``` +### 非受控用法 + +```html + +``` + +## API +### Switch Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +colors | Array | - | 自定义颜色，[打开时的颜色，关闭时的颜色]。组件默认颜色为 ['#0052d9', 'rgba(0, 0, 0, .26']。示例：[blue, gray]。TS 类型：`string[]` | N +custom-value | Array | - | 开关内容，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]。TS 类型：`Array` | N +disabled | Boolean | false | 是否禁用组件 | N +label | String | '' | 开关的标签 | N +loading | Boolean | false | 是否处于加载中状态 | N +size | String | medium | 开关尺寸。可选项：small/medium/large | N +value | String / Number / Boolean | undefined | 开关值。TS 类型：`SwitchValue` `type SwitchValue = string | number | boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/switch/type.ts) | N +default-value | String / Number / Boolean | undefined | 开关值。非受控属性。TS 类型：`SwitchValue` `type SwitchValue = string | number | boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/switch/type.ts) | N + +### Switch Events + +名称 | 参数 | 描述 +-- | -- | -- +change | `(value: SwitchValue)` | 数据发生变化时触发 diff --git a/components/switch/_var.wxss b/components/switch/_var.wxss new file mode 100644 index 0000000..1d532d2 --- /dev/null +++ b/components/switch/_var.wxss @@ -0,0 +1,27 @@ +.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); +} diff --git a/components/switch/props.d.ts b/components/switch/props.d.ts new file mode 100644 index 0000000..489f18a --- /dev/null +++ b/components/switch/props.d.ts @@ -0,0 +1,3 @@ +import { TdSwitchProps } from './type'; +declare const props: TdSwitchProps; +export default props; diff --git a/components/switch/props.js b/components/switch/props.js new file mode 100644 index 0000000..da52943 --- /dev/null +++ b/components/switch/props.js @@ -0,0 +1,36 @@ +const props = { + colors: { + type: Array, + }, + customValue: { + type: Array, + value: [true, false], + }, + disabled: { + type: Boolean, + value: false, + }, + label: { + type: String, + value: '', + }, + loading: { + type: Boolean, + value: false, + }, + size: { + type: String, + value: 'medium', + }, + value: { + type: Boolean, + optionalTypes: [Number, String], + value: null, + }, + defaultValue: { + type: Boolean, + optionalTypes: [Number, String], + value: null, + }, +}; +export default props; diff --git a/components/switch/switch.d.ts b/components/switch/switch.d.ts new file mode 100644 index 0000000..10cb0aa --- /dev/null +++ b/components/switch/switch.d.ts @@ -0,0 +1,24 @@ +import { SuperComponent } from '../common/src/index'; +export default class Switch extends SuperComponent { + externalClasses: string[]; + behaviors: string[]; + properties: import("./type").TdSwitchProps; + data: { + classPrefix: string; + isActive: boolean; + bodyStyle: string; + }; + controlledProps: { + key: string; + event: string; + }[]; + observers: { + value(val: any): void; + }; + methods: { + switchChange(): void; + handleColorChange(): void; + onTapBackground(): void; + onTapDot(): void; + }; +} diff --git a/components/switch/switch.js b/components/switch/switch.js new file mode 100644 index 0000000..4644391 --- /dev/null +++ b/components/switch/switch.js @@ -0,0 +1,69 @@ +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 { wxComponent, SuperComponent } from '../common/src/index'; +import config from '../common/config'; +import props from './props'; +const { prefix } = config; +const name = `${prefix}-switch`; +let Switch = class Switch extends SuperComponent { + constructor() { + super(...arguments); + this.externalClasses = ['t-class', 't-class-label', 't-class-body', 't-class-dot']; + this.behaviors = ['wx://form-field']; + this.properties = props; + this.data = { + classPrefix: name, + isActive: false, + bodyStyle: '', + }; + this.controlledProps = [ + { + key: 'value', + event: 'change', + }, + ]; + this.observers = { + value(val) { + const [activeValue] = this.data.customValue; + this.setData({ + isActive: val === activeValue, + }); + this.handleColorChange(); + }, + }; + this.methods = { + switchChange() { + const { disabled, value, customValue } = this.data; + const [activeValue, inactiveValue] = customValue; + if (disabled) + return; + this._trigger('change', { + value: value === activeValue ? inactiveValue : activeValue, + }); + }, + handleColorChange() { + const { disabled, colors = [] } = this.data; + const [activedColor = '#0052d9', inactivedColor = 'rgba(0, 0, 0, .26)'] = colors; + if (!disabled) { + this.setData({ + bodyStyle: `background-color: ${this.data.isActive ? activedColor : inactivedColor}`, + }); + } + }, + onTapBackground() { + this.switchChange(); + }, + onTapDot() { + this.switchChange(); + }, + }; + } +}; +Switch = __decorate([ + wxComponent() +], Switch); +export default Switch; diff --git a/components/switch/switch.json b/components/switch/switch.json new file mode 100644 index 0000000..a89ef4d --- /dev/null +++ b/components/switch/switch.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} diff --git a/components/switch/switch.wxml b/components/switch/switch.wxml new file mode 100644 index 0000000..fa1cf96 --- /dev/null +++ b/components/switch/switch.wxml @@ -0,0 +1,13 @@ + + {{label}} + + + + diff --git a/components/switch/switch.wxss b/components/switch/switch.wxss new file mode 100644 index 0000000..06fc604 --- /dev/null +++ b/components/switch/switch.wxss @@ -0,0 +1,70 @@ +.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-switch { + display: flex; + align-items: center; +} +.t-switch__label { + display: inline-block; + vertical-align: middle; + text-align: right; + margin-right: 32rpx; + font-size: 32rpx; + color: rgba(0, 0, 0, 0.4); +} +.t-switch__body { + vertical-align: middle; + width: 88rpx; + height: 48rpx; + border-radius: 24rpx; + background-color: rgba(0, 0, 0, 0.26); + position: relative; +} +.t-switch__body--active { + background-color: #0052d9; +} +.t-switch__body--disabled { + background-color: #E7E7E7; +} +.t-switch__body--active.t-switch__body--disabled { + background-color: #96BBF8; +} +.t-switch__dot { + position: absolute; + left: 5rpx; + top: 50%; + width: 40rpx; + height: 40rpx; + border-radius: 50%; + background-color: #fff; + transition: all 0.3s; + transform: translateY(-50%); +} +.t-switch__dot--active { + left: 45rpx; +} diff --git a/components/switch/type.d.ts b/components/switch/type.d.ts new file mode 100644 index 0000000..ada78ed --- /dev/null +++ b/components/switch/type.d.ts @@ -0,0 +1,37 @@ +export interface TdSwitchProps { + colors?: { + type: ArrayConstructor; + value?: string[]; + }; + customValue?: { + type: ArrayConstructor; + value?: Array; + }; + disabled?: { + type: BooleanConstructor; + value?: boolean; + }; + label?: { + type: StringConstructor; + value?: string; + }; + loading?: { + type: BooleanConstructor; + value?: boolean; + }; + size?: { + type: StringConstructor; + value?: 'small' | 'medium' | 'large'; + }; + value?: { + type: BooleanConstructor; + optionalTypes: Array; + value?: SwitchValue; + }; + defaultValue?: { + type: BooleanConstructor; + optionalTypes: Array; + value?: SwitchValue; + }; +} +export declare type SwitchValue = string | number | boolean; diff --git a/components/switch/type.js b/components/switch/type.js new file mode 100644 index 0000000..cb0ff5c --- /dev/null +++ b/components/switch/type.js @@ -0,0 +1 @@ +export {}; diff --git a/pages/anniversary/index.js b/pages/anniversary/index.js new file mode 100644 index 0000000..287fabb --- /dev/null +++ b/pages/anniversary/index.js @@ -0,0 +1,8 @@ +Page({ + data: { + aIconList: ['check-rectangle','star-filled','notification','circle'], + }, + onLoad: function (options) { + + } +}); diff --git a/pages/anniversary/index.json b/pages/anniversary/index.json new file mode 100644 index 0000000..d06748f --- /dev/null +++ b/pages/anniversary/index.json @@ -0,0 +1,5 @@ +{ + "usingComponents": { + "foot-tab": "../foot-tab/foot-tab" + } +} diff --git a/pages/anniversary/index.wxml b/pages/anniversary/index.wxml new file mode 100644 index 0000000..caf93ad --- /dev/null +++ b/pages/anniversary/index.wxml @@ -0,0 +1,5 @@ + +纪念日 + + + diff --git a/pages/anniversary/index.wxss b/pages/anniversary/index.wxss new file mode 100644 index 0000000..e69de29 diff --git a/pages/foot-tab/foot-tab.js b/pages/foot-tab/foot-tab.js index ddc2667..556c51f 100644 --- a/pages/foot-tab/foot-tab.js +++ b/pages/foot-tab/foot-tab.js @@ -41,7 +41,7 @@ Component({ 'iconList[1]': 'star-filled' }) wx.redirectTo({ - url: '../task/index' + url: '../anniversary/index' }) } if (cur == 3){ diff --git a/pages/index/index.js b/pages/index/index.js deleted file mode 100644 index 92eb37c..0000000 --- a/pages/index/index.js +++ /dev/null @@ -1,48 +0,0 @@ -// index.js -// 获取应用实例 -const app = getApp() -Page({ - data: { - aIconList: ['check-rectangle-filled','star','notification','circle'], - motto: 'Hello World', - userInfo: {}, - hasUserInfo: false, - canIUse: wx.canIUse('button.open-type.getUserInfo'), - canIUseGetUserProfile: false, - canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false - }, - // 事件处理函数 - bindViewTap() { - wx.navigateTo({ - url: '../logs/logs' - }) - }, - onLoad() { - if (wx.getUserProfile) { - this.setData({ - canIUseGetUserProfile: true - }) - } - }, - getUserProfile(e) { - // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗 - wx.getUserProfile({ - desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 - success: (res) => { - console.log(res) - this.setData({ - userInfo: res.userInfo, - hasUserInfo: true - }) - } - }) - }, - getUserInfo(e) { - // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息 - console.log(e) - this.setData({ - userInfo: e.detail.userInfo, - hasUserInfo: true - }) - } -}) diff --git a/pages/index/index.json b/pages/index/index.json deleted file mode 100644 index 59a2e0b..0000000 --- a/pages/index/index.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "usingComponents": { - "foot-tab": "../foot-tab/foot-tab" - } -} \ No newline at end of file diff --git a/pages/index/index.wxml b/pages/index/index.wxml deleted file mode 100644 index a67fe7c..0000000 --- a/pages/index/index.wxml +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - - - 请使用1.4.4及以上版本基础库 - - - - {{userInfo.nickName}} - - - - {{motto}} - - - - - \ No newline at end of file diff --git a/pages/index/index.wxss b/pages/index/index.wxss deleted file mode 100644 index eb64203..0000000 --- a/pages/index/index.wxss +++ /dev/null @@ -1,19 +0,0 @@ -/**index.wxss**/ -.userinfo { - display: flex; - flex-direction: column; - align-items: center; - color: #aaa; -} - -.userinfo-avatar { - overflow: hidden; - width: 128rpx; - height: 128rpx; - margin: 20rpx; - border-radius: 50%; -} - -.usermotto { - margin-top: 200px; -} \ No newline at end of file diff --git a/pages/task/index.js b/pages/task/index.js index 1aa22b0..f5019eb 100644 --- a/pages/task/index.js +++ b/pages/task/index.js @@ -10,7 +10,7 @@ Page({ data: { tapCheckHandle: undefined, dateVisible: true, - aIconList: ['check-rectangle', 'star-filled', 'notification', 'info-circle'], + aIconList: ['check-rectangle-filled', 'star', 'notification', 'info-circle'], taskList: [{'taskId':'1','title':'标题德外旗舰店1','note':'2022-11-11'},{'taskId':'2','title':'标题德外旗舰店2','note':'2022-11-11'}], todayList: [{'taskId':'1','title':'标题德外旗舰店1','note':'2022-11-11'},{'taskId':'2','title':'标题德外旗舰店2','note':'2022-11-11'}], delayList: [{'taskId':'1','title':'si哦大家艾吉奥是我','note':'2022-11-11','complete':true,'notification':false}, diff --git a/pages/taskDetail/index.js b/pages/taskDetail/index.js index 7d64a20..86167c5 100644 --- a/pages/taskDetail/index.js +++ b/pages/taskDetail/index.js @@ -2,9 +2,11 @@ let taskId = ''; Page({ data: { mode: '', - dateVisible: false, + alertVisible: false, + completeVisible: false, date: new Date('2021-12-23').getTime(), // 支持时间戳传入 - dateText: '', + alertText: '', + completeText: '', // 指定选择区间起始值 start: '2008-01-01 00:00:00', end: '2040-12-31 23:59:59', diff --git a/pages/taskDetail/index.json b/pages/taskDetail/index.json index 1155386..bf45ea0 100644 --- a/pages/taskDetail/index.json +++ b/pages/taskDetail/index.json @@ -1,5 +1,8 @@ { "usingComponents": { - "t-date-time-picker": "../../components/date-time-picker/date-time-picker" + "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" } } diff --git a/pages/taskDetail/index.wxml b/pages/taskDetail/index.wxml index c60d6df..252ff2e 100644 --- a/pages/taskDetail/index.wxml +++ b/pages/taskDetail/index.wxml @@ -2,17 +2,51 @@ + + + + + - diff --git a/pages/taskDetail/index.wxss b/pages/taskDetail/index.wxss index e8a484a..c7c7789 100644 --- a/pages/taskDetail/index.wxss +++ b/pages/taskDetail/index.wxss @@ -1,6 +1,5 @@ .pannel-item { font-size: 32rpx; - margin-bottom: 32rpx; } .pannel-item::after {