From 574e7c8ac142b0e22199c5747c2abaebe90d46c2 Mon Sep 17 00:00:00 2001 From: limqhz Date: Wed, 14 Dec 2022 19:39:14 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E6=B6=88=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/dialog/README.md | 73 ++++++ components/dialog/dialog.d.ts | 24 ++ components/dialog/dialog.js | 90 ++++++++ components/dialog/dialog.json | 7 + components/dialog/dialog.wxml | 81 +++++++ components/dialog/dialog.wxs | 3 + components/dialog/dialog.wxss | 152 +++++++++++++ components/dialog/index.d.ts | 42 ++++ components/dialog/index.js | 70 ++++++ components/dialog/props.d.ts | 3 + components/dialog/props.js | 53 +++++ components/dialog/type.d.ts | 57 +++++ components/dialog/type.js | 1 + components/steps/README.md | 79 +++++++ components/steps/props.d.ts | 3 + components/steps/props.js | 32 +++ components/steps/step-item-props.d.ts | 3 + components/steps/step-item-props.js | 25 +++ components/steps/step-item.d.ts | 36 +++ components/steps/step-item.js | 150 +++++++++++++ components/steps/step-item.json | 6 + components/steps/step-item.wxml | 55 +++++ components/steps/step-item.wxss | 309 ++++++++++++++++++++++++++ components/steps/steps.d.ts | 21 ++ components/steps/steps.js | 78 +++++++ components/steps/steps.json | 6 + components/steps/steps.wxml | 5 + components/steps/steps.wxss | 40 ++++ components/steps/type.d.ts | 63 ++++++ components/steps/type.js | 1 + pages/message/index.wxml | 2 +- pages/myself/about/index.js | 47 +++- pages/myself/about/index.json | 4 +- pages/myself/about/index.wxml | 29 ++- pages/myself/about/index.wxss | 60 +++++ pages/myself/notify/index.js | 24 +- pages/myself/notify/index.json | 3 +- pages/myself/notify/index.wxml | 25 ++- pages/myself/notify/index.wxss | 7 + 39 files changed, 1745 insertions(+), 24 deletions(-) create mode 100644 components/dialog/README.md create mode 100644 components/dialog/dialog.d.ts create mode 100644 components/dialog/dialog.js create mode 100644 components/dialog/dialog.json create mode 100644 components/dialog/dialog.wxml create mode 100644 components/dialog/dialog.wxs create mode 100644 components/dialog/dialog.wxss create mode 100644 components/dialog/index.d.ts create mode 100644 components/dialog/index.js create mode 100644 components/dialog/props.d.ts create mode 100644 components/dialog/props.js create mode 100644 components/dialog/type.d.ts create mode 100644 components/dialog/type.js create mode 100644 components/steps/README.md create mode 100644 components/steps/props.d.ts create mode 100644 components/steps/props.js create mode 100644 components/steps/step-item-props.d.ts create mode 100644 components/steps/step-item-props.js create mode 100644 components/steps/step-item.d.ts create mode 100644 components/steps/step-item.js create mode 100644 components/steps/step-item.json create mode 100644 components/steps/step-item.wxml create mode 100644 components/steps/step-item.wxss create mode 100644 components/steps/steps.d.ts create mode 100644 components/steps/steps.js create mode 100644 components/steps/steps.json create mode 100644 components/steps/steps.wxml create mode 100644 components/steps/steps.wxss create mode 100644 components/steps/type.d.ts create mode 100644 components/steps/type.js diff --git a/components/dialog/README.md b/components/dialog/README.md new file mode 100644 index 0000000..870c672 --- /dev/null +++ b/components/dialog/README.md @@ -0,0 +1,73 @@ +--- +title: Dialog 对话框 +description: 用于显示重要提示或请求用户进行重要操作，一种打断当前操作的模态视图。 +spline: message +isComponent: true +--- + + +## 引入 + +全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。 + +```json +"usingComponents": { + "t-dialog": "tdesign-miniprogram/dialog/dialog" +} +``` + +## 代码演示 + +### 反馈类对话框 + + + +{{ base }} + +> 使用这种方式，对话框的 `visible` 是受控的，需要手动设置额 `visible` 为 `false` 才会关闭对话框。 + +### 确认类对话框 +{{ confirm }} + +### 输入类对话框 +{{ inputDialog }} + +### 命令调用 +{{ command }} + +### 开发能力按钮 + +当传入的按钮类型为对象时，整个对象都将透传至 `t-button`，因此按钮可以直接使用开放能力 + +{{ button }} + +## API +### Dialog Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +actions | Array / Slot | - | 操作栏。TS 类型：`Array`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N +button-layout | String | horizontal | 多按钮排列方式。可选项：horizontal/vertical | N +cancel-btn | String / Object / Slot | '' | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N +close-on-overlay-click | Boolean | true | 点击蒙层时是否触发关闭事件 | N +confirm-btn | String / Object / Slot | '' | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 | N +content | String / Slot | - | 内容 | N +external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、组件内容部分、确认按钮、取消按钮 等元素类名。`['t-class', 't-class-content', 't-class-confirm', 't-class-cancel']` | N +overlay-props | Object | {} | 透传至 Overlay 组件 | N +prevent-scroll-through | Boolean | true | 防止滚动穿透 | N +show-overlay | Boolean | true | 是否显示遮罩层 | N +title | String / Slot | - | 标题 | N +visible | Boolean | false | 控制对话框是否显示 | N +z-index | Number | 11500 | 组件层级，样式默认为 11500 | N + +### Dialog Events + +名称 | 参数 | 描述 +-- | -- | -- +cancel | - | 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 +close | `(trigger: DialogEventSource)` | 关闭事件，点击 取消按钮 或 点击蒙层 时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts)。
`type DialogEventSource = 'cancel' | 'overlay'`
+overlay-click | - | 如果蒙层存在，点击蒙层时触发 +confirm | - | 如果“确认”按钮存在，则点击“确认”按钮时触发 +action | `(index: number)` | 操作列表的点击时间，`index` 代表操作列表的顺序 +open-type-event | `(ButtonEventDetail)` | “确认”按钮具有开放能力的话，对应的成功回调 +open-type-error-event | `(ButtonError)` | “确认”按钮具有开放能力的话，对应的失败回调 diff --git a/components/dialog/dialog.d.ts b/components/dialog/dialog.d.ts new file mode 100644 index 0000000..42d8da9 --- /dev/null +++ b/components/dialog/dialog.d.ts @@ -0,0 +1,24 @@ +import { SuperComponent } from '../common/src/index'; +export default class Dialog extends SuperComponent { + // @ts-ignore + options: { + multipleSlots: boolean; + addGlobalClass: boolean; + }; + externalClasses: string[]; + properties: import("./type").TdDialogProps; + data: { + prefix: string; + classPrefix: string; + }; + methods: { + onTplButtonTap(e: any): void; + onConfirm(): void; + onCancel(): void; + close(): void; + overlayClick(): void; + onActionTap(e: any): void; + openValueCBHandle(e: any): void; + openValueErrCBHandle(e: any): void; + }; +} diff --git a/components/dialog/dialog.js b/components/dialog/dialog.js new file mode 100644 index 0000000..b998cb4 --- /dev/null +++ b/components/dialog/dialog.js @@ -0,0 +1,90 @@ +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}-dialog`; +let Dialog = class Dialog extends SuperComponent { + constructor() { + super(...arguments); + this.options = { + multipleSlots: true, + addGlobalClass: true, + }; + this.externalClasses = [ + `${prefix}-class`, + `${prefix}-class-content`, + `${prefix}-class-confirm`, + `${prefix}-class-cancel`, + `${prefix}-class-action`, + ]; + this.properties = props; + this.data = { + prefix, + classPrefix: name, + }; + this.methods = { + onTplButtonTap(e) { + var _a; + const evtType = e.type; + const { type } = e.target.dataset; + const button = this.data[`${type}Btn`]; + const cbName = `bind${evtType}`; + if (typeof button[cbName] === 'function') { + button[cbName](e); + } + if (evtType !== 'tap') { + const success = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.errMsg.indexOf('ok')) > -1; + this.triggerEvent(success ? 'open-type-event' : 'open-type-error-event', e.detail); + } + }, + onConfirm() { + this.triggerEvent('confirm'); + if (this._onComfirm) { + this._onComfirm(); + this.close(); + } + }, + onCancel() { + this.triggerEvent('close', { trigger: 'cancel' }); + this.triggerEvent('cancel'); + if (this._onCancel) { + this._onCancel(); + this.close(); + } + }, + close() { + this.setData({ visible: false }); + }, + overlayClick() { + if (this.properties.closeOnOverlayClick) { + this.triggerEvent('close', { trigger: 'overlay' }); + } + this.triggerEvent('overlayClick'); + }, + onActionTap(e) { + const { index } = e.currentTarget.dataset; + this.triggerEvent('action', { index }); + if (this._onAction) { + this._onAction({ index }); + this.close(); + } + }, + openValueCBHandle(e) { + this.triggerEvent('open-type-event', e.detail); + }, + openValueErrCBHandle(e) { + this.triggerEvent('open-type-error-event', e.detail); + }, + }; + } +}; +Dialog = __decorate([ + wxComponent() +], Dialog); +export default Dialog; diff --git a/components/dialog/dialog.json b/components/dialog/dialog.json new file mode 100644 index 0000000..3279f36 --- /dev/null +++ b/components/dialog/dialog.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "t-popup": "../popup/popup", + "t-button": "../button/button" + } +} diff --git a/components/dialog/dialog.wxml b/components/dialog/dialog.wxml new file mode 100644 index 0000000..bf1c13e --- /dev/null +++ b/components/dialog/dialog.wxml @@ -0,0 +1,81 @@ + + + + + + + {{title}} + + + {{content}} + + + + + + {{item.name}} + + + + {{cancelBtn}} + + + + + + + {{confirmBtn}} + + + + + + + + diff --git a/components/dialog/dialog.wxs b/components/dialog/dialog.wxs new file mode 100644 index 0000000..8677851 --- /dev/null +++ b/components/dialog/dialog.wxs @@ -0,0 +1,3 @@ +module.exports.getTypeof = function (obj) { + return typeof obj; +}; diff --git a/components/dialog/dialog.wxss b/components/dialog/dialog.wxss new file mode 100644 index 0000000..9d57400 --- /dev/null +++ b/components/dialog/dialog.wxss @@ -0,0 +1,152 @@ +.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-dialog__wrapper .t-dialog { + overflow: hidden; + width: 644rpx; + border-radius: 16rpx; + background-color: #fff; +} +.t-dialog__wrapper .t-dialog__content { + padding: 64rpx 48rpx; + min-height: 176rpx; + max-height: 776rpx; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: center; + font-size: 32rpx; + line-height: 1.5; +} +.t-dialog__wrapper .t-dialog__header { + text-align: center; + font-weight: bold; + font-size: 32rpx; + line-height: 1.5; + color: #000000; +} +.t-dialog__wrapper .t-dialog__body { + overflow-y: scroll; + text-align: center; + -webkit-overflow-scrolling: touch; + font-size: 32rpx; + color: #888888; + margin-top: 32rpx; +} +.t-dialog__wrapper .t-dialog__body--without-title { + margin-top: 0; +} +.t-dialog__wrapper .t-dialog__body-text { + word-wrap: break-word; +} +.t-dialog__wrapper .t-dialog__body--left { + text-align: left; +} +.t-dialog__wrapper .t-dialog__body--right { + text-align: right; +} +.t-dialog__wrapper .t-dialog__footer { + display: flex; +} +.t-dialog__wrapper .t-dialog__footer-button-host { + width: 100%; +} +.t-dialog__wrapper .t-dialog__footer--column { + flex-flow: column-reverse; +} +.t-dialog__wrapper .t-dialog__footer--column .t-dialog__button { + width: 100%; +} +.t-dialog__wrapper .t-dialog__button { + display: flex; + align-items: center; + justify-content: center; + flex: 1; + font-size: 32rpx; + padding: 0 48rpx; + background-color: #fff; + width: 644rpx; + height: 112rpx; + line-height: 112rpx; + border-radius: 0; + border: 0; +} +.t-dialog__wrapper .t-dialog__button:before { + content: ' '; + position: absolute; + box-sizing: border-box; + top: 0; + left: 0; + border-top: 1px solid #e7e7e7; + border-left: 1px solid #e7e7e7; + transform: scale(0.5); + transform-origin: 0 0; + width: 200%; + height: 200%; +} +.t-dialog__wrapper .t-dialog__button-half { + width: 322rpx; +} +.t-dialog__wrapper .t-dialog__button-confirm { + color: #0052d9; + font-weight: bold; +} +.t-dialog__wrapper .t-dialog__button-cancel { + color: #000000; + font-weight: normal; +} +.t-dialog__wrapper .t-dialog__button-bounce-enter { + transform: translate3d(-50%, -50%, 0) scale(0.7); + opacity: 0; +} +.t-dialog__wrapper .t-dialog__button-bounce-leave-active { + transform: translate3d(-50%, -50%, 0) scale(0.9); + opacity: 0; +} +.t-dialog__wrapper .t-dialog__button::after { + border-radius: 0; + border-color: rgba(0, 0, 0, 0.05); +} +.t-dialog__wrapper .t-dialog__text + .t-dialog__input { + margin-top: 48rpx; +} +.t-dialog__wrapper .t-dialog__input { + width: 100%; + background-color: #f0f0f0; + font-size: 32rpx; + color: #000000; + border-radius: 16rpx / 2; + height: 96rpx; + line-height: 1.5; + padding: 24rpx; + margin-top: 24rpx; + box-sizing: border-box; + text-align: left; +} +.t-dialog__wrapper .t-dialog__input-placeholder { + color: #bbbbbb; +} diff --git a/components/dialog/index.d.ts b/components/dialog/index.d.ts new file mode 100644 index 0000000..5de6982 --- /dev/null +++ b/components/dialog/index.d.ts @@ -0,0 +1,42 @@ +/// +/// +declare type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance; +interface DialogAlertOptionsType { + context?: Context; + selector?: string; + title?: string; + content: string; + zIndex?: number; + asyncClose?: boolean; + confirmButtonText?: string; + textAlign?: string; + cancelBtn?: string | object; + confirmBtn?: string | object; +} +interface DialogComfirmOptionsType extends DialogAlertOptionsType { + cancelButtonText?: string; +} +interface Action { + name: string; + primary?: boolean; + style?: string; +} +interface DialogActionOptionsType { + context?: Context; + selector?: string; + title?: string; + content: string; + zIndex?: number; + asyncClose?: boolean; + actions?: Action[]; + buttonLayout?: 'vertical' | 'horizontal'; +} +declare const _default: { + alert(options: DialogAlertOptionsType): Promise; + confirm(options: DialogComfirmOptionsType): Promise; + close(options: DialogComfirmOptionsType): Promise; + action(options: DialogActionOptionsType): Promise<{ + index: number; + }>; +}; +export default _default; diff --git a/components/dialog/index.js b/components/dialog/index.js new file mode 100644 index 0000000..3fa8122 --- /dev/null +++ b/components/dialog/index.js @@ -0,0 +1,70 @@ +var __rest = (this && this.__rest) || function (s, e) { + var t = {}; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) + t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === "function") + for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { + if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) + t[p[i]] = s[p[i]]; + } + return t; +}; +import props from './props'; +import { getInstance } from '../common/utils'; +const defaultOptions = { + actions: false, + buttonLayout: props.buttonLayout.value, + cancelBtn: props.cancelBtn.value, + closeOnOverlayClick: props.closeOnOverlayClick.value, + confirmBtn: props.confirmBtn.value, + content: '', + preventScrollThrough: props.preventScrollThrough.value, + showOverlay: props.showOverlay.value, + title: '', + visible: props.visible.value, +}; +export default { + alert(options) { + const _a = Object.assign(Object.assign({}, defaultOptions), options), { context, selector = '#t-dialog' } = _a, otherOptions = __rest(_a, ["context", "selector"]); + const instance = getInstance(context, selector); + if (!instance) + return Promise.reject(); + return new Promise((resolve) => { + instance.setData(Object.assign(Object.assign({ cancelBtn: '' }, otherOptions), { visible: true })); + instance._onComfirm = resolve; + }); + }, + confirm(options) { + const _a = Object.assign(Object.assign({}, defaultOptions), options), { context, selector = '#t-dialog' } = _a, otherOptions = __rest(_a, ["context", "selector"]); + const instance = getInstance(context, selector); + if (!instance) + return Promise.reject(); + return new Promise((resolve, reject) => { + instance.setData(Object.assign(Object.assign({}, otherOptions), { visible: true })); + instance._onComfirm = resolve; + instance._onCancel = reject; + }); + }, + close(options) { + const { context, selector = '#t-dialog' } = Object.assign({}, options); + const instance = getInstance(context, selector); + if (instance) { + instance.close(); + return Promise.resolve(); + } + return Promise.reject(); + }, + action(options) { + const _a = Object.assign(Object.assign({}, defaultOptions), options), { context, selector = '#t-dialog', actions } = _a, otherOptions = __rest(_a, ["context", "selector", "actions"]); + const instance = getInstance(context, selector); + if (!instance) + return Promise.reject(); + if (!actions || (typeof actions === 'object' && (actions.length === 0 || actions.length > 7))) { + console.warn('action 数量建议控制在1至7个'); + } + return new Promise((resolve) => { + instance.setData(Object.assign(Object.assign({ actions, buttonLayout: 'vertical' }, otherOptions), { visible: true })); + instance._onAction = resolve; + }); + }, +}; diff --git a/components/dialog/props.d.ts b/components/dialog/props.d.ts new file mode 100644 index 0000000..15d9d87 --- /dev/null +++ b/components/dialog/props.d.ts @@ -0,0 +1,3 @@ +import { TdDialogProps } from './type'; +declare const props: TdDialogProps; +export default props; diff --git a/components/dialog/props.js b/components/dialog/props.js new file mode 100644 index 0000000..74e0f34 --- /dev/null +++ b/components/dialog/props.js @@ -0,0 +1,53 @@ +const props = { + actions: { + type: Array, + }, + buttonLayout: { + type: String, + value: 'horizontal', + }, + cancelBtn: { + type: String, + optionalTypes: [Object], + value: '', + }, + closeOnOverlayClick: { + type: Boolean, + value: true, + }, + confirmBtn: { + type: null, + optionalTypes: [Object], + value: '', + }, + content: { + type: String, + }, + externalClasses: { + type: Array, + }, + overlayProps: { + type: Object, + value: {}, + }, + preventScrollThrough: { + type: Boolean, + value: true, + }, + showOverlay: { + type: Boolean, + value: true, + }, + title: { + type: String, + }, + visible: { + type: Boolean, + value: false, + }, + zIndex: { + type: Number, + value: 11500, + }, +}; +export default props; diff --git a/components/dialog/type.d.ts b/components/dialog/type.d.ts new file mode 100644 index 0000000..1d26eea --- /dev/null +++ b/components/dialog/type.d.ts @@ -0,0 +1,57 @@ +import { ButtonProps } from '../button/index'; +export interface TdDialogProps { + actions?: { + type: ArrayConstructor; + value?: Array; + }; + buttonLayout?: { + type: StringConstructor; + value?: 'horizontal' | 'vertical'; + }; + cancelBtn?: { + type: StringConstructor; + optionalTypes: Array; + value?: string | ButtonProps | null; + }; + closeOnOverlayClick?: { + type: BooleanConstructor; + value?: boolean; + }; + confirmBtn?: { + type: StringConstructor; + optionalTypes: Array; + value?: string | ButtonProps | null; + }; + content?: { + type: StringConstructor; + value?: string; + }; + externalClasses?: { + type: ArrayConstructor; + value?: ['t-class', 't-class-content', 't-class-confirm', 't-class-cancel']; + }; + overlayProps?: { + type: ObjectConstructor; + value?: object; + }; + preventScrollThrough?: { + type: BooleanConstructor; + value?: boolean; + }; + showOverlay?: { + type: BooleanConstructor; + value?: boolean; + }; + title?: { + type: StringConstructor; + value?: string; + }; + visible?: { + type: BooleanConstructor; + value?: boolean; + }; + zIndex?: { + type: NumberConstructor; + value?: number; + }; +} diff --git a/components/dialog/type.js b/components/dialog/type.js new file mode 100644 index 0000000..cb0ff5c --- /dev/null +++ b/components/dialog/type.js @@ -0,0 +1 @@ +export {}; diff --git a/components/steps/README.md b/components/steps/README.md new file mode 100644 index 0000000..8984773 --- /dev/null +++ b/components/steps/README.md @@ -0,0 +1,79 @@ +--- +title: Steps 步骤条 +description: 用于任务步骤展示或任务进度展示。 +spline: navigation +isComponent: true +--- + + +## 引入 + +全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。 + +```json +"usingComponents": { + "t-steps": "tdesign-miniprogram/steps/steps", + "t-step-item": "tdesign-miniprogram/steps/step-item", +} +``` + +## 代码演示 + +步骤条，方向可以横向和纵向，可以自定义步骤条显示内容以及是否可写 + +#### 横向可操作步骤条 + +{{ horizontal }} + +#### 横向只读步骤条 + +{{ readonly }} + + +#### 竖向只读步骤条 + +{{ vertical }} + +#### 竖向简化只读步骤条 + +{{ theme }} + +#### 竖向双层级只读步骤条 + +{{ double }} + +#### 自定义内容步骤条 + +{{ customization }} + + + +## API +### Steps Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +current | String / Number | 0 | 当前步骤，即整个步骤条进度，格式为`1`、`1-0`或`1-1`。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。若当前步骤条存在子步骤条，则会根据子步骤条重新判断当前步骤状态（子步骤条中存在error，则当前步骤error，子步骤条中存在process，当前步骤process，若最后一个子步骤条finish，当前步骤finish，优先级为`finish>error>process`）。注意：如果每个步骤条单独设置了status，则步骤条为设定的status，若传入`status:''`,将默认为未开始状态,传入的status优先级最高。 | N +default-current | String / Number | undefined | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成。非受控属性 | N +current-status | String | process | 用于控制 current 指向的步骤条的状态。可选项：default/process/finish/error | N +external-classes | Array | - | 组件类名，用于设置组件外层元素元素类名。`['t-class']` | N +layout | String | horizontal | 步骤条方向，有两种：横向和纵向。可选项：horizontal/vertical | N +readonly | Boolean | false | 只读状态 | N +theme | String | default | 步骤条风格。可选项：default/dot | N + +### Steps Events + +名称 | 参数 | 描述 +-- | -- | -- +change | `({current: string | number, previous: string | number})` | 当前步骤发生变化时触发 + +### StepItem Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +content | String / Slot | '' | 步骤描述 | N +external-classes | Array | - | 组件类名，用于设置组件外层元素元素类名。`['t-class', 't-class-inner', 't-class-content', 't-class-title', 't-class-description', 't-class-extra', 't-class-sub', 't-class-sub-dot', 't-class-sub-content']` | N +icon | String / Slot | - | 图标。传入 slot 代表使用插槽，其他字符串代表使用内置图标 | N +status | String | default | 当前步骤的状态。可选项：default/process/finish/error。TS 类型：`StepStatus` `type StepStatus = 'default' | 'process' | 'finish' | 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/steps/type.ts) | N +sub-step-items | Array | [] | 子步骤条，仅支持 layout = 'vertical' 时。TS 类型：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/steps/type.ts) | N +title | String / Slot | '' | 标题 | N diff --git a/components/steps/props.d.ts b/components/steps/props.d.ts new file mode 100644 index 0000000..fef4049 --- /dev/null +++ b/components/steps/props.d.ts @@ -0,0 +1,3 @@ +import { TdStepsProps } from './type'; +declare const props: TdStepsProps; +export default props; diff --git a/components/steps/props.js b/components/steps/props.js new file mode 100644 index 0000000..77f9b5c --- /dev/null +++ b/components/steps/props.js @@ -0,0 +1,32 @@ +const props = { + current: { + type: String, + optionalTypes: [Number], + value: null, + }, + defaultCurrent: { + type: String, + optionalTypes: [Number], + value: 0, + }, + currentStatus: { + type: String, + value: 'process', + }, + externalClasses: { + type: Array, + }, + layout: { + type: String, + value: 'horizontal', + }, + readonly: { + type: Boolean, + value: false, + }, + theme: { + type: String, + value: 'default', + }, +}; +export default props; diff --git a/components/steps/step-item-props.d.ts b/components/steps/step-item-props.d.ts new file mode 100644 index 0000000..d941a41 --- /dev/null +++ b/components/steps/step-item-props.d.ts @@ -0,0 +1,3 @@ +import { TdStepItemProps } from './type'; +declare const props: TdStepItemProps; +export default props; diff --git a/components/steps/step-item-props.js b/components/steps/step-item-props.js new file mode 100644 index 0000000..3308e91 --- /dev/null +++ b/components/steps/step-item-props.js @@ -0,0 +1,25 @@ +const props = { + content: { + type: String, + value: '', + }, + externalClasses: { + type: Array, + }, + icon: { + type: String, + }, + status: { + type: String, + value: 'default', + }, + subStepItems: { + type: Array, + value: [], + }, + title: { + type: String, + value: '', + }, +}; +export default props; diff --git a/components/steps/step-item.d.ts b/components/steps/step-item.d.ts new file mode 100644 index 0000000..61c13f5 --- /dev/null +++ b/components/steps/step-item.d.ts @@ -0,0 +1,36 @@ +import { SuperComponent, RelationsOptions } from '../common/src/index'; +export default class StepItem extends SuperComponent { + options: { + multipleSlots: boolean; + }; + relations: RelationsOptions; + externalClasses: string[]; + properties: import("./type").TdStepItemProps; + parent: any; + data: { + classPrefix: string; + prefix: string; + rootClassName: string; + index: number; + isDot: boolean; + curStatus: string; + curSubStepItems: any[]; + curSubStepItemsStatus: any[]; + layout: string; + type: string; + isLastChild: boolean; + isLarge: boolean; + readonly: boolean; + computedIcon: string; + }; + observers: { + icon(val: any): void; + }; + lifetimes: { + ready(): void; + }; + methods: { + updateStatus(current: any, currentStatus: any, index: any, theme: any, layout: any, steps: any, readonly: any): void; + click(): void; + }; +} diff --git a/components/steps/step-item.js b/components/steps/step-item.js new file mode 100644 index 0000000..b3813b8 --- /dev/null +++ b/components/steps/step-item.js @@ -0,0 +1,150 @@ +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 './step-item-props'; +const { prefix } = config; +let StepItem = class StepItem extends SuperComponent { + constructor() { + super(...arguments); + this.options = { + multipleSlots: true, + }; + this.relations = { + './steps': { + type: 'ancestor', + }, + }; + this.externalClasses = [ + `${prefix}-class`, + `${prefix}-class-inner`, + `${prefix}-class-content`, + `${prefix}-class-title`, + `${prefix}-class-description`, + `${prefix}-class-extra`, + `${prefix}-class-sub`, + `${prefix}-class-sub-dot`, + `${prefix}-class-sub-content`, + ]; + this.properties = props; + this.parent = null; + this.data = { + classPrefix: `${prefix}-steps-item`, + prefix, + rootClassName: '', + index: 0, + isDot: false, + curStatus: '', + curSubStepItems: [], + curSubStepItemsStatus: [], + layout: 'vertical', + type: 'default', + isLastChild: false, + isLarge: false, + readonly: false, + computedIcon: '', + }; + this.observers = { + icon(val) { + this.setData({ + computedIcon: val, + }); + }, + }; + this.lifetimes = { + ready() { + const [parent] = this.getRelationNodes('./steps') || []; + if (parent) { + this.parent = parent; + } + }, + }; + this.methods = { + updateStatus(current, currentStatus, index, theme, layout, steps, readonly) { + const _current = String(current); + const connectLine = '-'; + const judgeObjAttr = (data, attr) => { + return Array.isArray(data[attr]) && data[attr].length; + }; + const getStepLevel = (s) => { + const reg = new RegExp(`(.*)${connectLine}{1}.*`); + return s.replace(reg, '$1'); + }; + const isSameLevelStep = (stepsTag, current) => { + return stepsTag.length < current.length && getStepLevel(stepsTag) === getStepLevel(current); + }; + const stepFinalStatus = (item, itemTag, current, currentStatus) => { + let tempStepStatus = ''; + if (item.status !== 'default' && item.status !== undefined) { + tempStepStatus = item.status === '' ? 'default' : item.status; + } + else { + tempStepStatus = 'default'; + if (itemTag < current) { + tempStepStatus = 'finish'; + } + else if (itemTag === current && item.status !== '') { + tempStepStatus = currentStatus; + } + if (isSameLevelStep(itemTag, current)) { + if (judgeObjAttr(item, 'subStepItems')) { + const tempStepItemsStatus = item.subStepItems.map((subItem, subIndex) => { + const subItemTag = `${itemTag}${connectLine}${subIndex}`; + return stepFinalStatus(subItem, subItemTag, current, currentStatus); + }); + if (tempStepItemsStatus[tempStepItemsStatus.length - 1] === 'finish') { + tempStepStatus = 'finish'; + return tempStepStatus; + } + if (tempStepItemsStatus.includes('process') || tempStepItemsStatus.every((item) => item === 'default')) { + tempStepStatus = 'process'; + } + if (tempStepItemsStatus.includes('error')) { + tempStepStatus = 'error'; + } + } + } + } + return tempStepStatus; + }; + this.data.tempStatus = stepFinalStatus(this.data, String(index), _current, currentStatus); + const tempStatusList = []; + if (judgeObjAttr(this.data, 'subStepItems')) { + this.data.subStepItems.forEach((subItem, subIndex) => { + tempStatusList.push(stepFinalStatus(subItem, `${index}${connectLine}${subIndex}`, _current, currentStatus)); + }); + } + const tempIcon = new Map([ + ['finish', 'check'], + ['error', 'close'], + ]); + let iconStatus = ''; + if (readonly && tempIcon.has(this.data.tempStatus)) { + iconStatus = tempIcon.get(this.data.tempStatus); + } + this.setData({ + curStatus: this.data.tempStatus, + curSubStepItems: this.data.subStepItems || [], + curSubStepItemsStatus: tempStatusList || [], + computedIcon: this.data.icon || iconStatus, + index, + isDot: theme === 'dot' && layout === 'vertical', + layout, + theme, + isLastChild: steps.length - 1 === index, + }); + }, + click() { + this.parent.handleClick(this.data.index); + }, + }; + } +}; +StepItem = __decorate([ + wxComponent() +], StepItem); +export default StepItem; diff --git a/components/steps/step-item.json b/components/steps/step-item.json new file mode 100644 index 0000000..049940c --- /dev/null +++ b/components/steps/step-item.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-icon": "../icon/icon" + } +} diff --git a/components/steps/step-item.wxml b/components/steps/step-item.wxml new file mode 100644 index 0000000..09cac28 --- /dev/null +++ b/components/steps/step-item.wxml @@ -0,0 +1,55 @@ + + + + + + + + + + + + {{index + 1}} + + + + + {{ title }} + + + + {{ content }} + + + + + + + + + + + + + + + + {{ item.title }} + + + + + diff --git a/components/steps/step-item.wxss b/components/steps/step-item.wxss new file mode 100644 index 0000000..df29d1b --- /dev/null +++ b/components/steps/step-item.wxss @@ -0,0 +1,309 @@ +.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-steps-item { + flex: 1; + vertical-align: top; + position: relative; +} +.t-steps-item__inner { + position: relative; +} +.t-steps-item__icon { + z-index: 1; + vertical-align: top; + font-size: 28rpx; + position: relative; + color: #ddd; +} +.t-steps-item__icon-number { + display: flex; + justify-content: center; + align-items: center; + width: 24px; + height: 24px; + text-align: center; + border: 1px solid #c5c5c5; + border-radius: 50%; + background-color: #fff; + color: #c5c5c5; +} +.t-steps-item__icon-slot { + display: flex; + justify-content: center; + align-items: center; + width: 26px; + height: 26px; + text-align: center; + color: #c5c5c5; +} +.t-steps-item__content { + text-align: center; +} +.t-steps-item__title { + position: relative; + color: rgba(0, 0, 0, 0.26); + line-height: 22px; + font-size: 28rpx; + text-align: center; + margin-bottom: 4px; + font-weight: 700; +} +.t-steps-item__description { + color: rgba(0, 0, 0, 0.4); + line-height: 20px; + font-size: 24rpx; +} +.t-steps-item__extra:not(:empty) { + margin-top: 16rpx; +} +:host { + flex: 1; + vertical-align: top; + position: relative; + align-self: flex-start; + width: inherit; +} +.t-step--horizontal .t-steps-item__content { + max-width: 80px; + margin-top: 16rpx; +} +.t-step--horizontal .t-steps-item__inner .t-steps-item-wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.t-step--horizontal .t-steps-item--finish .t-steps-item__icon-number { + border-color: #0052d9; + color: #0052d9; +} +.t-step--horizontal .t-steps-item--finish .t-steps-item__title { + color: rgba(0, 0, 0, 0.9); +} +.t-step--horizontal .t-steps-item--process .t-steps-item__icon-number { + background: #0052d9; + color: #fff; + border-color: #0052d9; +} +.t-step--horizontal .t-steps-item--process .t-steps-item__title { + color: #0052d9; +} +.t-step--horizontal .t-steps-item--error .t-steps-item__icon-number { + color: #e34d59; + border-color: #e34d59; +} +.t-step--horizontal .t-steps-item--error .t-steps-item__title { + color: #e34d59; +} +.t-step--horizontal .t-steps-item--default .t-steps-item__icon-number { + border-color: #c5c5c5; + color: #c5c5c5; +} +.t-step--horizontal .t-steps-item--default .t-steps-item__title, +.t-step--horizontal .t-steps-item--default .t-steps-item__description { + color: rgba(0, 0, 0, 0.26); +} +.t-step--horizontal.t-step--not-last-child .t-steps-item__inner:after { + content: ''; + display: block; + height: 1px; + background: #0052d9; + position: absolute; + transform: translateY(-50%); + width: 100%; + top: 13px; + left: 50%; +} +.t-step--horizontal.t-step--not-last-child .t-steps-item__inner.t-steps-item__inner--large:after { + top: calc(40px / 2); +} +.t-step--horizontal.t-step--not-last-child.t-step--readonly .t-steps-item--process .t-steps-item__inner:after, +.t-step--horizontal.t-step--not-last-child.t-step--readonly .t-steps-item--error .t-steps-item__inner:after, +.t-step--horizontal.t-step--not-last-child.t-step--readonly .t-steps-item--default .t-steps-item__inner:after { + background: #c5c5c5; +} +.t-step--vertical .t-steps-item { + position: relative; +} +.t-step--vertical .t-steps-item-wrapper { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: flex-start; +} +.t-step--vertical .t-steps-item-wrapper:only-child { + padding-bottom: 50rpx; +} +.t-step--vertical .t-steps-item-wrapper + .t-steps-item__sub-wrapper:not(:empty) { + padding-top: 32rpx; + padding-bottom: 48rpx; +} +.t-step--vertical .t-steps-item-sub { + display: flex; + width: 100%; + height: 40rpx; + align-items: center; + padding-bottom: 8rpx; + font-size: 24rpx; + color: #0052d9; + font-weight: 500; +} +.t-step--vertical .t-steps-item-sub-dot { + display: flex; + justify-content: center; + width: 24px; + text-align: center; + border: 1px solid transparent; + color: #c5c5c5; + z-index: 2; +} +.t-step--vertical .t-steps-item-sub-dot-item { + width: 8px; + height: 8px; + border-radius: 50%; +} +.t-step--vertical .t-steps-item-sub .t-steps-item-sub__content { + margin-left: 16rpx; +} +.t-step--vertical .t-steps-item-sub-status--default { + color: #c5c5c5; +} +.t-step--vertical .t-steps-item-sub-status--default .t-steps-item-sub-dot-item { + background-color: #c5c5c5; +} +.t-step--vertical .t-steps-item-sub-status--finish { + color: #000000; +} +.t-step--vertical .t-steps-item-sub-status--finish .t-steps-item-sub-dot-item { + background-color: #0052d9; +} +.t-step--vertical .t-steps-item-sub-status--process { + color: #0052d9; +} +.t-step--vertical .t-steps-item-sub-status--process .t-steps-item-sub-dot-item { + background-color: #0052d9; +} +.t-step--vertical .t-steps-item-sub-status--error { + color: #e34d59; +} +.t-step--vertical .t-steps-item-sub-status--error .t-steps-item-sub-dot-item { + background-color: #e34d59; +} +.t-step--vertical .t-steps-item .t-steps-item-sub:last-child { + padding-bottom: 0rpx; +} +.t-step--vertical .t-steps-item__content { + margin-left: 16rpx; + margin-right: 32rpx; + flex: 1; +} +.t-step--vertical .t-steps-item__title { + text-align: left; + margin-top: 5px; + line-height: 28rpx; + margin-bottom: 16rpx; +} +.t-step--vertical .t-steps-item__description { + text-align: left; +} +.t-step--vertical.t-step--default-anchor .t-steps-item--default .t-steps-item__icon-number { + border-color: #c5c5c5; + color: #c5c5c5; +} +.t-step--vertical.t-step--default-anchor .t-steps-item--finish .t-steps-item__icon-number { + border-color: #0052d9; + color: #0052d9; +} +.t-step--vertical.t-step--default-anchor .t-steps-item--finish .t-steps-item__title { + color: rgba(0, 0, 0, 0.9); +} +.t-step--vertical.t-step--default-anchor .t-steps-item--process .t-steps-item__icon-number { + background: #0052d9; + color: #fff; + border-color: #0052d9; +} +.t-step--vertical.t-step--default-anchor .t-steps-item--process .t-steps-item__title { + color: #0052d9; +} +.t-step--vertical.t-step--default-anchor .t-steps-item--error .t-steps-item__icon-number { + color: #e34d59; + border-color: #e34d59; +} +.t-step--vertical.t-step--default-anchor .t-steps-item--error .t-steps-item__title { + color: #e34d59; +} +.t-step--vertical.t-step--default-anchor.t-step--not-last-child .t-steps-item__inner::after { + content: ''; + display: block; + height: 100%; + width: 1px; + background: #c5c5c5; + transform: translateX(-50%); + position: absolute; + left: 13px; + top: 13px; +} +.t-step--vertical.t-step--default-anchor.t-step--not-last-child .t-steps-item--finish .t-steps-item__inner:after { + background: #0052d9; +} +.t-step--vertical.t-step--default-anchor.t-step--not-last-child .t-steps-item--default .t-steps-item__inner:after { + background: #c5c5c5; +} +.t-step--vertical.t-step--dot-anchor .t-steps-item__icon-dot { + display: block; + width: 12px; + height: 12px; + box-sizing: border-box; + border: 2px solid #0052d9; + border-radius: 50%; + margin-top: 1px; +} +.t-step--vertical.t-step--dot-anchor .t-steps-item-sub-dot { + width: 12px; + box-sizing: border-box; + border: 2px solid transparent; +} +.t-step--vertical.t-step--dot-anchor .t-steps-item__title { + margin-top: 0; + color: rgba(0, 0, 0, 0.9); +} +.t-step--vertical.t-step--dot-anchor.t-step--not-last-child .t-steps-item__inner::after { + content: ''; + display: block; + height: calc(100% - 12px); + width: 1px; + background: #ddd; + transform: translateX(50%); + position: absolute; + left: 5px; + top: 13px; +} +.t-steps-item__icon-number--large { + width: 40px; + height: 40px; +} diff --git a/components/steps/steps.d.ts b/components/steps/steps.d.ts new file mode 100644 index 0000000..42e04ad --- /dev/null +++ b/components/steps/steps.d.ts @@ -0,0 +1,21 @@ +import { SuperComponent, RelationsOptions } from '../common/src/index'; +export default class Steps extends SuperComponent { + relations: RelationsOptions; + externalClasses: string[]; + properties: import("./type").TdStepsProps; + controlledProps: { + key: string; + event: string; + }[]; + data: { + prefix: string; + classPrefix: string; + }; + observers: { + current(): void; + }; + methods: { + updateChildren(): void; + handleClick(index: any): void; + }; +} diff --git a/components/steps/steps.js b/components/steps/steps.js new file mode 100644 index 0000000..664fa5d --- /dev/null +++ b/components/steps/steps.js @@ -0,0 +1,78 @@ +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}-steps`; +let Steps = class Steps extends SuperComponent { + constructor() { + super(...arguments); + this.relations = { + './step-item': { + type: 'descendant', + linked(child) { + this.updateChildren(); + const { readonly, layout } = this.data; + let isLarge = false; + if (!readonly && layout === 'horizontal' && child.data.icon !== 'slot') { + isLarge = !!child.data.icon; + } + child.setData({ + readonly, + isLarge, + }); + }, + }, + }; + this.externalClasses = [`${prefix}-class`]; + this.properties = props; + this.controlledProps = [ + { + key: 'current', + event: 'change', + }, + ]; + this.data = { + prefix, + classPrefix: name, + }; + this.observers = { + current() { + this.updateChildren(); + }, + }; + this.methods = { + updateChildren() { + const items = this.getRelationNodes('./step-item'); + const len = items.length; + const { current, currentStatus, readonly } = this.data; + if (len) { + items.forEach((item, index) => { + item.updateStatus(current, currentStatus, index, this.data.theme, this.data.layout, items, readonly); + }); + } + }, + handleClick(index) { + if (this.data.layout === 'vertical') { + return; + } + if (!this.data.readonly) { + const preIndex = this.data.current; + this._trigger('change', { + previous: preIndex, + current: index, + }); + } + }, + }; + } +}; +Steps = __decorate([ + wxComponent() +], Steps); +export default Steps; diff --git a/components/steps/steps.json b/components/steps/steps.json new file mode 100644 index 0000000..e77f87f --- /dev/null +++ b/components/steps/steps.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-step": "./step-item" + } +} diff --git a/components/steps/steps.wxml b/components/steps/steps.wxml new file mode 100644 index 0000000..26e2e09 --- /dev/null +++ b/components/steps/steps.wxml @@ -0,0 +1,5 @@ + + + diff --git a/components/steps/steps.wxss b/components/steps/steps.wxss new file mode 100644 index 0000000..d0a636c --- /dev/null +++ b/components/steps/steps.wxss @@ -0,0 +1,40 @@ +.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); +} +:host { + display: flex; +} +.t-step--vertical { + padding-right: 32rpx; +} +.t-steps { + display: flex; + width: 100%; +} +.t-steps--vertical { + flex-direction: column; +} diff --git a/components/steps/type.d.ts b/components/steps/type.d.ts new file mode 100644 index 0000000..f3281c7 --- /dev/null +++ b/components/steps/type.d.ts @@ -0,0 +1,63 @@ +export interface TdStepsProps { + current?: { + type: StringConstructor; + optionalTypes: Array; + value?: string | number; + }; + defaultCurrent?: { + type: StringConstructor; + optionalTypes: Array; + value?: string | number; + }; + currentStatus?: { + type: StringConstructor; + value?: 'default' | 'process' | 'finish' | 'error'; + }; + externalClasses?: { + type: ArrayConstructor; + value?: ['t-class']; + }; + layout?: { + type: StringConstructor; + value?: 'horizontal' | 'vertical'; + }; + readonly?: { + type: BooleanConstructor; + value?: boolean; + }; + theme?: { + type: StringConstructor; + value?: 'default' | 'dot'; + }; +} +export interface TdStepItemProps { + content?: { + type: StringConstructor; + value?: string; + }; + externalClasses?: { + type: ArrayConstructor; + value?: ['t-class', 't-class-content', 't-class-title', 't-class-description', 't-class-extra']; + }; + icon?: { + type: StringConstructor; + value?: string; + }; + status?: { + type: StringConstructor; + value?: StepStatus; + }; + subStepItems?: { + type: ArrayConstructor; + value?: SubStepItem[]; + }; + title?: { + type: StringConstructor; + value?: string; + }; +} +export declare type StepStatus = 'default' | 'process' | 'finish' | 'error'; +export interface SubStepItem { + status: StepStatus; + title: string; +} diff --git a/components/steps/type.js b/components/steps/type.js new file mode 100644 index 0000000..cb0ff5c --- /dev/null +++ b/components/steps/type.js @@ -0,0 +1 @@ +export {}; diff --git a/pages/message/index.wxml b/pages/message/index.wxml index dfdf303..5c43392 100644 --- a/pages/message/index.wxml +++ b/pages/message/index.wxml @@ -1,6 +1,6 @@ - + 开通会员 diff --git a/pages/myself/about/index.js b/pages/myself/about/index.js index e4d0cf4..e82dcae 100644 --- a/pages/myself/about/index.js +++ b/pages/myself/about/index.js @@ -1,10 +1,47 @@ Page({ data: { - activeValues: [], + customStepCurrent: 4, + customStepItems: [ + { + title: '二级步骤描述', + content: '可自定义此处内容', + extra: '可自定义此处内容', + }, + { + content: '可自定义此处内容', + extra: '可自定义此处内容', + }, + { + content: '可自定义此处内容', + extra: '可自定义此处内容', + }, + { + title: '二级步骤描述', + extra: '可自定义此处内容', + content: '可自定义此处内容', + }, + { + title: '二级步骤描述', + extra: '可自定义此处内容', + content: '可自定义此处内容', + }, + ], }, - handleChange(e) { - this.setData({ - activeValues: e.detail.value, + + onShow() { + const { customStepCurrent, customStepItems } = this.data; + const newCustomStepItems = customStepItems.map((element, elementIndex) => { + if (elementIndex < customStepCurrent) { + element.status = 'finish'; + } else if (elementIndex === customStepCurrent) { + element.status = 'active'; + } else { + element.status = 'default'; + } + return element; }); - }, + this.setData({ + customStepItems: newCustomStepItems, + }); + } }); diff --git a/pages/myself/about/index.json b/pages/myself/about/index.json index 157fe45..781e4b7 100644 --- a/pages/myself/about/index.json +++ b/pages/myself/about/index.json @@ -1,6 +1,6 @@ { "usingComponents": { - "t-collapse": "/components/collapse/collapse", - "t-collapse-panel": "/components/collapse/collapse-panel" + "t-steps": "/components/steps/steps", + "t-step-item": "/components/steps/step-item" } } diff --git a/pages/myself/about/index.wxml b/pages/myself/about/index.wxml index 3bafc93..47fd05f 100644 --- a/pages/myself/about/index.wxml +++ b/pages/myself/about/index.wxml @@ -1,11 +1,20 @@ - module.exports.contains = function(arr, target) { return arr.indexOf(target) > -1; } - - + - 我们很强真肉蛋 - - + + {{item.extra}} + + diff --git a/pages/myself/about/index.wxss b/pages/myself/about/index.wxss index e69de29..63a50b1 100644 --- a/pages/myself/about/index.wxss +++ b/pages/myself/about/index.wxss @@ -0,0 +1,60 @@ +.demo-steps { + padding-top: 80rpx; + padding-left: 32rpx; +} + +.t-icon-slot { + width: 14px; + height: 14px; + border-radius: 50%; + background-color: #c5c5c5; +} + +.t-icon-slot--child { + width: 10px; + height: 10px; +} + +.t-icon-slot--finish { + background-color: #0052d9; +} + +.t-icon-slot--active { + background-color: rgb(5, 150, 34); +} + +.t-icon-slot--default { + background-color: #c5c5c5; +} +/** 自定义line颜色： +* 方法1: 通过t-class-inner外部样式的 ::after +* 方法2: 覆盖组件内部样式。 +*/ +.t-class-inner--finish::after { + background-color: #0052d9; +} + +.t-class-inner--active::after { + background-color: #c5c5c5; +} + +.t-class-inner--default::after { + background-color: #c5c5c5; +} + +.t-class-title { + color: #000 !important; +} +.t-class-title--no { + margin: 0 !important; +} +.t-class-description { + color: rgb(38, 37, 37) !important; +} + +.t-class-extra { + color: #c5c5c5; + text-align: left; + font-size: 20rpx !important; + margin-top: 0px !important; +} diff --git a/pages/myself/notify/index.js b/pages/myself/notify/index.js index d172732..d6a28d1 100644 --- a/pages/myself/notify/index.js +++ b/pages/myself/notify/index.js @@ -3,9 +3,31 @@ Page({ messageList : [ {"taskId":"2022","isRead":true,"title":"今天是任务的需要的","content":"任务【测试...】已延期","date":"2022-12-14"}, {"taskId":"2022","isRead":false,"title":"任务延期","content":"点哦电脑玩i回家欧帝啊我你的破请问你的我i拿到钱哦i我你懂屁请问你oi","date":"2022-12-14"}, - {"taskId":"2022","isRead":true,"title":"任务【测试3213...】已延期","content":"点哦电脑玩i回家欧帝啊我你的破请问你的我i拿到钱哦i我你懂屁请问你oi","date":"2022-12-14"}, + {"taskId":"2022","isRead":true,"title":"任务【测试3213...】已延期","content":"","date":"2022-12-14"}, {"taskId":"2022","isRead":false,"title":"任务【测试412312...】已延期","content":"任务【测试...】已延期","date":"2022-12-14"} ], + dialogKey: '', + clearConfirm : false, + checkConfirm : false + }, + showDialog(e) { + const { key } = e.currentTarget.dataset; + this.setData({ [key]: true, dialogKey: key }); }, + closeDialog() { + const { dialogKey } = this.data; + this.setData({ [dialogKey]: false }); + }, + + clearMessage() { + console.log("清除消息成功！") + this.closeDialog(); + }, + + allRead() { + console.log("全部已读成功！") + this.closeDialog(); + } + }); diff --git a/pages/myself/notify/index.json b/pages/myself/notify/index.json index 8958e61..6a95ea4 100644 --- a/pages/myself/notify/index.json +++ b/pages/myself/notify/index.json @@ -1,5 +1,6 @@ { "usingComponents": { - "t-badge": "/components/badge/badge" + "t-badge": "/components/badge/badge", + "t-dialog": "/components/dialog/dialog" } } diff --git a/pages/myself/notify/index.wxml b/pages/myself/notify/index.wxml index 0974ec0..23c94a8 100644 --- a/pages/myself/notify/index.wxml +++ b/pages/myself/notify/index.wxml @@ -1,9 +1,8 @@ - - - + + - + {{item.date}} @@ -13,3 +12,21 @@ + + diff --git a/pages/myself/notify/index.wxss b/pages/myself/notify/index.wxss index c261220..3ce0c69 100644 --- a/pages/myself/notify/index.wxss +++ b/pages/myself/notify/index.wxss @@ -3,6 +3,13 @@ justify-content: space-between; padding: 20rpx 50rpx; } +.msgContent { + padding: 0; + margin: 0; +} .sendDate { padding-left: 20rpx; } +.custom-confirm-btn { + color: #ff4646 !important; +}