diff --git a/app.json b/app.json index 5f44e13..5b11991 100644 --- a/app.json +++ b/app.json @@ -11,7 +11,11 @@ "pages/myself/notify/index", "pages/myself/question/index", "pages/myself/about/index", - "pages/myself/account/index" + "pages/myself/account/index", + "pages/login/index", + "pages/register/index", + "pages/register/password/index", + "pages/register/ok/index" ], "usingComponents": { "t-icon": "/components/icon/icon", diff --git a/components/dialog/README.md b/components/dialog/README.md index 870c672..d8eeca3 100644 --- a/components/dialog/README.md +++ b/components/dialog/README.md @@ -12,7 +12,7 @@ isComponent: true ```json "usingComponents": { - "t-dialog": "tdesign-miniprogram/dialog/dialog" + "t-dialog": "/components/dialog/dialog" } ``` @@ -46,9 +46,9 @@ isComponent: true 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -actions | Array / Slot | - | 操作栏。TS 类型:`Array`,[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N +actions | Array / Slot | - | 操作栏。TS 类型:`Array`,[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent//components/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 +cancel-btn | String / Object / Slot | '' | 取消按钮,可自定义。值为 null 则不显示取消按钮。值类型为字符串,则表示自定义按钮文本,值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时,需自行控制取消事件。[详细类型定义](https://github.com/Tencent//components/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 @@ -65,7 +65,7 @@ z-index | Number | 11500 | 组件层级,样式默认为 11500 | N 名称 | 参数 | 描述 -- | -- | -- cancel | - | 如果“取消”按钮存在,则点击“取消”按钮时触发,同时触发关闭事件 -close | `(trigger: DialogEventSource)` | 关闭事件,点击 取消按钮 或 点击蒙层 时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts)。
`type DialogEventSource = 'cancel' | 'overlay'`
+close | `(trigger: DialogEventSource)` | 关闭事件,点击 取消按钮 或 点击蒙层 时触发。[详细类型定义](https://github.com/Tencent//components/tree/develop/src/dialog/type.ts)。
`type DialogEventSource = 'cancel' | 'overlay'`
overlay-click | - | 如果蒙层存在,点击蒙层时触发 confirm | - | 如果“确认”按钮存在,则点击“确认”按钮时触发 action | `(index: number)` | 操作列表的点击时间,`index` 代表操作列表的顺序 diff --git a/components/result/README.md b/components/result/README.md new file mode 100644 index 0000000..eb379f8 --- /dev/null +++ b/components/result/README.md @@ -0,0 +1,40 @@ +--- +title: Result 结果 +description: 反馈结果状态。 +spline: data +isComponent: true +--- + + +## 引入 + +全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。 + +```json +"usingComponents": { + "t-result": "/components/result/result" +} +``` + +## 代码演示 + +### 结果状态 + +{{ theme }} + +### 自定义结果 + +{{ custom }} + +## API + +### Result Props + +| 名称 | 类型 | 默认值 | 说明 | 必传 | +| ---------------- | ------------- | ------ | ------ | ---- | +| title | String / Slot | - | 标题 | N | +| description | String / Slot | - | 描述文字 | N | +| external-classes | Array | - | 组件类名,分别用于设置 组件外层类名、文本描述类名、图片类名、操作按钮类名。`['t-class', 't-class-image', 't-class-title', 't-class-description']` | N | +| icon | String | - | 图标名称 | N | +| image | String / Slot | - | 图片地址 | N | +| theme | String | default| 内置主题。可选项:default/success/warning/error | N | diff --git a/components/result/index.d.ts b/components/result/index.d.ts new file mode 100644 index 0000000..74469ef --- /dev/null +++ b/components/result/index.d.ts @@ -0,0 +1,3 @@ +export * from './type'; +export * from './props'; +export * from './result'; diff --git a/components/result/index.js b/components/result/index.js new file mode 100644 index 0000000..74469ef --- /dev/null +++ b/components/result/index.js @@ -0,0 +1,3 @@ +export * from './type'; +export * from './props'; +export * from './result'; diff --git a/components/result/props.d.ts b/components/result/props.d.ts new file mode 100644 index 0000000..7336c63 --- /dev/null +++ b/components/result/props.d.ts @@ -0,0 +1,3 @@ +import { TdResultProps } from './type'; +declare const props: TdResultProps; +export default props; diff --git a/components/result/props.js b/components/result/props.js new file mode 100644 index 0000000..746ff9c --- /dev/null +++ b/components/result/props.js @@ -0,0 +1,24 @@ +const props = { + description: { + type: String, + }, + externalClasses: { + type: Array, + }, + icon: { + type: String, + value: '', + }, + image: { + type: String, + }, + title: { + type: String, + value: '', + }, + theme: { + type: String, + value: 'default', + }, +}; +export default props; diff --git a/components/result/result.d.ts b/components/result/result.d.ts new file mode 100644 index 0000000..9aee111 --- /dev/null +++ b/components/result/result.d.ts @@ -0,0 +1,18 @@ +import { SuperComponent } from '../common/src/index'; +export default class extends SuperComponent { + options: { + multipleSlots: boolean; + }; + externalClasses: string[]; + properties: import("./type").TdResultProps; + data: { + prefix: string; + classPrefix: string; + }; + lifetimes: { + ready(): void; + }; + methods: { + setIcon(): void; + }; +} diff --git a/components/result/result.js b/components/result/result.js new file mode 100644 index 0000000..dfb28d3 --- /dev/null +++ b/components/result/result.js @@ -0,0 +1,58 @@ +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}-result`; +let default_1 = class extends SuperComponent { + constructor() { + super(...arguments); + this.options = { + multipleSlots: true, + }; + this.externalClasses = [ + `${prefix}-class`, + `${prefix}-class-image`, + `${prefix}-class-title`, + `${prefix}-class-description`, + ]; + this.properties = props; + this.data = { + prefix, + classPrefix: name, + }; + this.lifetimes = { + ready() { + this.setIcon(); + }, + }; + this.methods = { + setIcon() { + const { icon, theme } = this.properties; + if (icon) { + this.setData({ + iconName: icon !== 'null' ? `${icon}` : '', + }); + } + else { + const themeResult = { + default: 'error-circle', + success: 'check-circle', + warning: 'error-circle', + error: 'close-circle', + }; + this.setData({ iconName: themeResult[theme] }); + } + }, + }; + } +}; +default_1 = __decorate([ + wxComponent() +], default_1); +export default default_1; diff --git a/components/result/result.json b/components/result/result.json new file mode 100644 index 0000000..9a40e60 --- /dev/null +++ b/components/result/result.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "t-icon": "../icon/icon", + "t-image": "../image/image" + } +} diff --git a/components/result/result.wxml b/components/result/result.wxml new file mode 100644 index 0000000..b28ad1f --- /dev/null +++ b/components/result/result.wxml @@ -0,0 +1,16 @@ + + + + + + + + + {{title}} + + + + {{description}} + + + diff --git a/components/result/result.wxss b/components/result/result.wxss new file mode 100644 index 0000000..0729ec0 --- /dev/null +++ b/components/result/result.wxss @@ -0,0 +1,65 @@ +.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-result { + display: flex; + flex-direction: column; + align-items: center; +} +.t-result__title { + line-height: 56rpx; + font-size: 40rpx; + font-weight: 700; + color: rgba(0, 0, 0, 0.9); +} +.t-result__icon { + font-size: 80px; +} +.t-result__thumb + .t-result__title:not(:empty) { + margin-top: 16rpx; +} +.t-result__description { + text-align: center; + color: rgba(0, 0, 0, 0.6); + font-size: 28rpx; + line-height: 44rpx; +} +.t-result__title + .t-result__description:not(:empty) { + margin-top: 24rpx; +} +.t-result--theme-default { + color: #0052d9; +} +.t-result--theme-success { + color: #00a870; +} +.t-result--theme-warning { + color: #ed7b2f; +} +.t-result--theme-error { + color: #e34d59; +} diff --git a/components/result/type.d.ts b/components/result/type.d.ts new file mode 100644 index 0000000..868bd19 --- /dev/null +++ b/components/result/type.d.ts @@ -0,0 +1,30 @@ +export interface TdResultProps { + description?: { + type: StringConstructor; + value?: string; + required?: boolean; + }; + externalClasses?: { + type: ArrayConstructor; + value?: ['t-class', 't-class-description', 't-class-image']; + required?: boolean; + }; + icon?: { + type: StringConstructor; + value?: string; + required?: boolean; + }; + image?: { + type: StringConstructor; + value?: string; + required?: boolean; + }; + title?: { + type: StringConstructor; + value?: string; + }; + theme?: { + type: StringConstructor; + value?: 'default' | 'success' | 'warning' | 'error'; + }; +} diff --git a/components/result/type.js b/components/result/type.js new file mode 100644 index 0000000..cb0ff5c --- /dev/null +++ b/components/result/type.js @@ -0,0 +1 @@ +export {}; diff --git a/components/steps/README.md b/components/steps/README.md index 8984773..5bb09fa 100644 --- a/components/steps/README.md +++ b/components/steps/README.md @@ -12,8 +12,8 @@ isComponent: true ```json "usingComponents": { - "t-steps": "tdesign-miniprogram/steps/steps", - "t-step-item": "tdesign-miniprogram/steps/step-item", + "t-steps": "/components/steps/steps", + "t-step-item": "/components/steps/step-item", } ``` @@ -74,6 +74,6 @@ change | `({current: string | number, previous: string | number})` | 当前步 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 +status | String | default | 当前步骤的状态。可选项:default/process/finish/error。TS 类型:`StepStatus` `type StepStatus = 'default' | 'process' | 'finish' | 'error'`。[详细类型定义](https://github.com/Tencent//components/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//components/tree/develop/src/steps/type.ts) | N title | String / Slot | '' | 标题 | N diff --git a/components/tag/README.md b/components/tag/README.md new file mode 100644 index 0000000..0ddd86a --- /dev/null +++ b/components/tag/README.md @@ -0,0 +1,93 @@ +--- +title: Tag 标签 +description: 用于表明主体的类目,属性或状态。 +spline: data +isComponent: true +--- + + +## 引入 + +全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。 + +```json +"usingComponents": { + "t-tag": "/components/tag/tag", + "t-check-tag": "/components/tag/check-tag" +} +``` + +## 代码演示 + +### 类型 +#### 展示型标签 + +{{ theme }} + +#### 带图标标签 + +{{ iconDemo }} + +#### 圆角标签 + +{{ shape }} + +#### 可关闭标签 + +{{ closable }} + +#### 超长省略文本标签 + +{{ ellipsis }} + + +## 状态 + +#### 标签状态 + +{{ checkable }} + +#### 标签规格 + +{{ size }} + +## API +### Tag Props + +| 名称 | 类型 | 默认值 | 说明 | 必传 | +| ---------------- | --------------- | ------- | -------------------------------------------------------------------------------------------- | ------- | +| closable | Boolean | false | 标签是否可关闭 | N | +| disabled | Boolean | false | 标签禁用态,失效标签不能触发事件。默认风格(theme=default)才有禁用态 | N | +| external-classes | Array | - | 组件类名,用于设置 组件外层元素元素类名。`['t-class']` | N | +| icon | String | - | 标签中的图标,可自定义图标呈现 | N | +| max-width | String / Number | - | 标签最大宽度,宽度超出后会出现省略号。示例:'50px' / 80。TS 类型:`CSSProperties['maxWidth'] | number` | N | +| shape | String | square | 标签类型,有三种:方形、圆角方形、标记型。可选项:square/round/mark | N | +| size | String | medium | 标签尺寸。可选项:small/medium/large。TS 类型:`SizeEnum` | N | +| theme | String | default | 组件风格,用于描述组件不同的应用场景。可选项:default/primary/warning/danger/success | N | +| variant | String | dark | 标签风格变体。可选项:dark/light/outline/light-outline | N | + +### Tag Events + +| 名称 | 参数 | 描述 | +| ----- | ---- | ------------------------------------ | +| click | - | 点击时触发 | +| close | - | 如果关闭按钮存在,点击关闭按钮时触发 | + +### CheckTag Props + +| 名称 | 类型 | 默认值 | 说明 | 必传 | +| -------- | ---------------------- | --------- | --------------------------------------------------------------------- | ---- | +| checked | Boolean | undefined | 标签选中的状态,默认风格(theme=default)才有选中态 | N | +| closable | String / Boolean | false | 是否可以关闭 | N | +| content | String / Number / Slot | - | 组件子元素 | N | +| disabled | Boolean | false | 标签禁用态,失效标签不能触发事件。默认风格(theme=default)才有禁用态 | N | +| icon | String / Slot | - | 标签图标 | N | +| shape | String | square | 标签类型,有三种:方形、圆角方形、标记型。可选项:square/round/mark | N | +| size | String | medium | 标签尺寸。可选项:small/medium/large。TS 类型:`SizeEnum` | N | + +### CheckTag Events + +| 名称 | 参数 | 描述 | +| ------ | -------------------- | -------------- | +| change | `(checked: boolean)` | 组件子元素 | +| close | - | 如果关闭按钮存在,点击关闭按钮时触发 | diff --git a/components/tag/check-tag-props.d.ts b/components/tag/check-tag-props.d.ts new file mode 100644 index 0000000..57c816f --- /dev/null +++ b/components/tag/check-tag-props.d.ts @@ -0,0 +1,3 @@ +import { TdCheckTagProps } from './type'; +declare const props: TdCheckTagProps; +export default props; diff --git a/components/tag/check-tag-props.js b/components/tag/check-tag-props.js new file mode 100644 index 0000000..fbb7120 --- /dev/null +++ b/components/tag/check-tag-props.js @@ -0,0 +1,34 @@ +const props = { + checked: { + type: Boolean, + value: undefined, + }, + defaultChecked: { + type: null, + value: undefined, + }, + closable: { + type: Boolean, + value: false, + }, + content: { + type: String, + optionalTypes: [Number], + }, + disabled: { + type: Boolean, + value: false, + }, + icon: { + type: String, + }, + shape: { + type: String, + value: 'square', + }, + size: { + type: String, + value: 'medium', + }, +}; +export default props; diff --git a/components/tag/check-tag.d.ts b/components/tag/check-tag.d.ts new file mode 100644 index 0000000..3f4b757 --- /dev/null +++ b/components/tag/check-tag.d.ts @@ -0,0 +1,27 @@ +import { SuperComponent } from '../common/src/index'; +export default class CheckTag extends SuperComponent { + data: { + prefix: string; + classPrefix: string; + className: string; + }; + properties: import("./type").TdCheckTagProps; + controlledProps: { + key: string; + event: string; + }[]; + options: { + multipleSlots: boolean; + }; + lifetimes: { + attached(): void; + }; + observers: { + 'size, shape, closable, disabled, checked'(): void; + }; + methods: { + setClass(): void; + handleClose(e: WechatMiniprogram.BaseEvent): void; + handleChange(): void; + }; +} diff --git a/components/tag/check-tag.js b/components/tag/check-tag.js new file mode 100644 index 0000000..0745d4d --- /dev/null +++ b/components/tag/check-tag.js @@ -0,0 +1,81 @@ +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 './check-tag-props'; +import { classNames } from '../common/utils'; +const { prefix } = config; +const name = `${prefix}-tag`; +let CheckTag = class CheckTag extends SuperComponent { + constructor() { + super(...arguments); + this.data = { + prefix, + classPrefix: name, + className: '', + }; + this.properties = props; + this.controlledProps = [ + { + key: 'checked', + event: 'change', + }, + ]; + this.options = { + multipleSlots: true, + }; + this.lifetimes = { + attached() { + this.setClass(); + }, + }; + this.observers = { + 'size, shape, closable, disabled, checked'() { + this.setClass(); + }, + }; + this.methods = { + setClass() { + const { prefix, classPrefix } = this.data; + const { size, shape, closable, disabled, checked, defaultChecked } = this.properties; + const isChecked = checked || defaultChecked; + const tagClass = [ + classPrefix, + `${classPrefix}--checkable`, + closable ? `${classPrefix}--closable ${prefix}-is-closable` : '', + disabled ? `${classPrefix}--disabled ${prefix}-is-disabled` : '', + isChecked ? `${classPrefix}--checked ${prefix}-is-checked` : '', + `${classPrefix}--size-${size || 'medium'}`, + `${classPrefix}--shape-${shape || 'square'}`, + ]; + const className = classNames(tagClass); + this.setData({ + className, + }); + }, + handleClose(e) { + if (this.data.disabled) + return; + this.triggerEvent('close', e); + }, + handleChange() { + if (this.data.disabled) + return; + const { checked, defaultChecked } = this.properties; + const isChecked = checked || defaultChecked; + this.setData({ + checked: !isChecked, + }); + this._trigger('change', { checked: !isChecked }); + }, + }; + } +}; +CheckTag = __decorate([ + wxComponent() +], CheckTag); +export default CheckTag; diff --git a/components/tag/check-tag.json b/components/tag/check-tag.json new file mode 100644 index 0000000..fc075a1 --- /dev/null +++ b/components/tag/check-tag.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-icon": ".././icon/icon" + } +} diff --git a/components/tag/check-tag.wxml b/components/tag/check-tag.wxml new file mode 100644 index 0000000..25113cd --- /dev/null +++ b/components/tag/check-tag.wxml @@ -0,0 +1,16 @@ + + + + + + + + + + diff --git a/components/tag/check-tag.wxss b/components/tag/check-tag.wxss new file mode 100644 index 0000000..c023544 --- /dev/null +++ b/components/tag/check-tag.wxss @@ -0,0 +1,233 @@ +.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-tag { + display: inline-flex; + align-items: center; + border: 2rpx solid transparent; + box-sizing: border-box; + border-radius: 8rpx; + font-size: 24rpx; + user-select: none; + vertical-align: middle; +} +.t-tag__text { + word-wrap: normal; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.t-tag__icon, +.t-tag__icon-close { + display: flex; + align-items: center; +} +.t-tag__icon:not(:empty) + .t-tag__text:not(:empty), +.t-tag__text:not(:empty) + .t-tag__icon-close:not(:empty) { + margin-left: 8rpx; +} +.t-tag.t-tag--size-small { + height: 44rpx; + line-height: 44rpx; + padding: 0 11rpx; + font-size: 20rpx; +} +.t-tag.t-tag--size-small .t-icon, +.t-tag.t-tag--size-small .t-icon-close { + font-size: 24rpx; +} +.t-tag.t-tag--size-medium { + height: 48rpx; + line-height: 48rpx; + padding: 0 15rpx; + font-size: 24rpx; +} +.t-tag.t-tag--size-medium .t-icon, +.t-tag.t-tag--size-medium .t-icon-close { + font-size: 28rpx; +} +.t-tag.t-tag--size-large { + height: 60rpx; + line-height: 60rpx; + padding: 0 23rpx; + font-size: 28rpx; +} +.t-tag.t-tag--size-large .t-icon, +.t-tag.t-tag--size-large .t-icon-close { + font-size: 36rpx; +} +.t-tag.t-tag--shape-square { + border-radius: 8rpx; +} +.t-tag.t-tag--shape-round { + border-radius: 999px; +} +.t-tag.t-tag--shape-mark { + border-radius: 0 999px 999px 0; +} +.t-tag--variant-dark.t-tag--theme-primary { + background-color: #0052d9; + border-color: #0052d9; + color: #ffffff; +} +.t-tag--variant-dark.t-tag--theme-success { + background-color: #00a870; + border-color: #00a870; + color: #ffffff; +} +.t-tag--variant-dark.t-tag--theme-warning { + background-color: #ed7b2f; + border-color: #ed7b2f; + color: #ffffff; +} +.t-tag--variant-dark.t-tag--theme-default { + background-color: #e7e7e7; + border-color: #e7e7e7; + color: rgba(0, 0, 0, 0.9); +} +.t-tag--variant-dark.t-tag--theme-danger { + background-color: #e34d59; + border-color: #e34d59; + color: #ffffff; +} +.t-tag--variant-light.t-tag--theme-primary { + background-color: #e6eefb; + border-color: #e6eefb; + color: #0052d9; +} +.t-tag--variant-light.t-tag--theme-success { + background-color: #e6f6f1; + border-color: #e6f6f1; + color: #00a870; +} +.t-tag--variant-light.t-tag--theme-warning { + background-color: #fdf2ea; + border-color: #fdf2ea; + color: #ed7b2f; +} +.t-tag--variant-light.t-tag--theme-default { + background-color: rgba(28, 28, 28, 0.91); + border-color: rgba(28, 28, 28, 0.91); + color: #e7e7e7; +} +.t-tag--variant-light.t-tag--theme-danger { + background-color: #fcedee; + border-color: #fcedee; + color: #e34d59; +} +.t-tag--variant-light.t-tag--theme-default { + color: rgba(0, 0, 0, 0.9); + border-color: #f3f3f3; + background-color: #f3f3f3; +} +.t-tag--variant-outline.t-tag--theme-primary { + background-color: #ffffff; + border-color: #0052d9; + color: #0052d9; +} +.t-tag--variant-outline.t-tag--theme-success { + background-color: #ffffff; + border-color: #00a870; + color: #00a870; +} +.t-tag--variant-outline.t-tag--theme-warning { + background-color: #ffffff; + border-color: #ed7b2f; + color: #ed7b2f; +} +.t-tag--variant-outline.t-tag--theme-default { + background-color: rgba(0, 0, 0, 0.9); + border-color: #e7e7e7; + color: #e7e7e7; +} +.t-tag--variant-outline.t-tag--theme-danger { + background-color: #ffffff; + border-color: #e34d59; + color: #e34d59; +} +.t-tag--variant-outline.t-tag--theme-default { + color: rgba(0, 0, 0, 0.9); + border-color: #dcdcdc; + background-color: #fff; +} +.t-tag--variant-light-outline.t-tag--theme-primary { + background-color: #e6eefb; + border-color: #0052d9; + color: #0052d9; +} +.t-tag--variant-light-outline.t-tag--theme-success { + background-color: #e6f6f1; + border-color: #00a870; + color: #00a870; +} +.t-tag--variant-light-outline.t-tag--theme-warning { + background-color: #fdf2ea; + border-color: #ed7b2f; + color: #ed7b2f; +} +.t-tag--variant-light-outline.t-tag--theme-default { + background-color: rgba(28, 28, 28, 0.91); + border-color: #e7e7e7; + color: #e7e7e7; +} +.t-tag--variant-light-outline.t-tag--theme-danger { + background-color: #fcedee; + border-color: #e34d59; + color: #e34d59; +} +.t-tag--variant-light-outline.t-tag--theme-default { + color: rgba(0, 0, 0, 0.9); + border-color: #dcdcdc; + background-color: #f3f3f3; +} +.t-tag.t-tag--checkable { + cursor: pointer; + color: rgba(0, 0, 0, 0.9); + background-color: #e7e7e7; + border-color: #e7e7e7; +} +.t-tag.t-tag--checkable.t-tag--checked { + color: #fff; + background-color: #0052d9; + border-color: #0052d9; +} +.t-tag.t-tag--checkable.t-tag--checked.t-tag--disabled { + color: #fff; + background-color: #bbd3fb; +} +.t-tag.t-tag--checkable.t-tag--disabled { + cursor: not-allowed; + color: rgba(0, 0, 0, 0.26); + background-color: #e7e7e7; + border-color: #e7e7e7; +} +.t-tag.t-tag--closable.t-tag--disabled { + cursor: not-allowed; + color: rgba(0, 0, 0, 0.26); + background-color: #e7e7e7; + border-color: #e7e7e7; +} diff --git a/components/tag/common/base.wxss b/components/tag/common/base.wxss new file mode 100644 index 0000000..c023544 --- /dev/null +++ b/components/tag/common/base.wxss @@ -0,0 +1,233 @@ +.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-tag { + display: inline-flex; + align-items: center; + border: 2rpx solid transparent; + box-sizing: border-box; + border-radius: 8rpx; + font-size: 24rpx; + user-select: none; + vertical-align: middle; +} +.t-tag__text { + word-wrap: normal; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.t-tag__icon, +.t-tag__icon-close { + display: flex; + align-items: center; +} +.t-tag__icon:not(:empty) + .t-tag__text:not(:empty), +.t-tag__text:not(:empty) + .t-tag__icon-close:not(:empty) { + margin-left: 8rpx; +} +.t-tag.t-tag--size-small { + height: 44rpx; + line-height: 44rpx; + padding: 0 11rpx; + font-size: 20rpx; +} +.t-tag.t-tag--size-small .t-icon, +.t-tag.t-tag--size-small .t-icon-close { + font-size: 24rpx; +} +.t-tag.t-tag--size-medium { + height: 48rpx; + line-height: 48rpx; + padding: 0 15rpx; + font-size: 24rpx; +} +.t-tag.t-tag--size-medium .t-icon, +.t-tag.t-tag--size-medium .t-icon-close { + font-size: 28rpx; +} +.t-tag.t-tag--size-large { + height: 60rpx; + line-height: 60rpx; + padding: 0 23rpx; + font-size: 28rpx; +} +.t-tag.t-tag--size-large .t-icon, +.t-tag.t-tag--size-large .t-icon-close { + font-size: 36rpx; +} +.t-tag.t-tag--shape-square { + border-radius: 8rpx; +} +.t-tag.t-tag--shape-round { + border-radius: 999px; +} +.t-tag.t-tag--shape-mark { + border-radius: 0 999px 999px 0; +} +.t-tag--variant-dark.t-tag--theme-primary { + background-color: #0052d9; + border-color: #0052d9; + color: #ffffff; +} +.t-tag--variant-dark.t-tag--theme-success { + background-color: #00a870; + border-color: #00a870; + color: #ffffff; +} +.t-tag--variant-dark.t-tag--theme-warning { + background-color: #ed7b2f; + border-color: #ed7b2f; + color: #ffffff; +} +.t-tag--variant-dark.t-tag--theme-default { + background-color: #e7e7e7; + border-color: #e7e7e7; + color: rgba(0, 0, 0, 0.9); +} +.t-tag--variant-dark.t-tag--theme-danger { + background-color: #e34d59; + border-color: #e34d59; + color: #ffffff; +} +.t-tag--variant-light.t-tag--theme-primary { + background-color: #e6eefb; + border-color: #e6eefb; + color: #0052d9; +} +.t-tag--variant-light.t-tag--theme-success { + background-color: #e6f6f1; + border-color: #e6f6f1; + color: #00a870; +} +.t-tag--variant-light.t-tag--theme-warning { + background-color: #fdf2ea; + border-color: #fdf2ea; + color: #ed7b2f; +} +.t-tag--variant-light.t-tag--theme-default { + background-color: rgba(28, 28, 28, 0.91); + border-color: rgba(28, 28, 28, 0.91); + color: #e7e7e7; +} +.t-tag--variant-light.t-tag--theme-danger { + background-color: #fcedee; + border-color: #fcedee; + color: #e34d59; +} +.t-tag--variant-light.t-tag--theme-default { + color: rgba(0, 0, 0, 0.9); + border-color: #f3f3f3; + background-color: #f3f3f3; +} +.t-tag--variant-outline.t-tag--theme-primary { + background-color: #ffffff; + border-color: #0052d9; + color: #0052d9; +} +.t-tag--variant-outline.t-tag--theme-success { + background-color: #ffffff; + border-color: #00a870; + color: #00a870; +} +.t-tag--variant-outline.t-tag--theme-warning { + background-color: #ffffff; + border-color: #ed7b2f; + color: #ed7b2f; +} +.t-tag--variant-outline.t-tag--theme-default { + background-color: rgba(0, 0, 0, 0.9); + border-color: #e7e7e7; + color: #e7e7e7; +} +.t-tag--variant-outline.t-tag--theme-danger { + background-color: #ffffff; + border-color: #e34d59; + color: #e34d59; +} +.t-tag--variant-outline.t-tag--theme-default { + color: rgba(0, 0, 0, 0.9); + border-color: #dcdcdc; + background-color: #fff; +} +.t-tag--variant-light-outline.t-tag--theme-primary { + background-color: #e6eefb; + border-color: #0052d9; + color: #0052d9; +} +.t-tag--variant-light-outline.t-tag--theme-success { + background-color: #e6f6f1; + border-color: #00a870; + color: #00a870; +} +.t-tag--variant-light-outline.t-tag--theme-warning { + background-color: #fdf2ea; + border-color: #ed7b2f; + color: #ed7b2f; +} +.t-tag--variant-light-outline.t-tag--theme-default { + background-color: rgba(28, 28, 28, 0.91); + border-color: #e7e7e7; + color: #e7e7e7; +} +.t-tag--variant-light-outline.t-tag--theme-danger { + background-color: #fcedee; + border-color: #e34d59; + color: #e34d59; +} +.t-tag--variant-light-outline.t-tag--theme-default { + color: rgba(0, 0, 0, 0.9); + border-color: #dcdcdc; + background-color: #f3f3f3; +} +.t-tag.t-tag--checkable { + cursor: pointer; + color: rgba(0, 0, 0, 0.9); + background-color: #e7e7e7; + border-color: #e7e7e7; +} +.t-tag.t-tag--checkable.t-tag--checked { + color: #fff; + background-color: #0052d9; + border-color: #0052d9; +} +.t-tag.t-tag--checkable.t-tag--checked.t-tag--disabled { + color: #fff; + background-color: #bbd3fb; +} +.t-tag.t-tag--checkable.t-tag--disabled { + cursor: not-allowed; + color: rgba(0, 0, 0, 0.26); + background-color: #e7e7e7; + border-color: #e7e7e7; +} +.t-tag.t-tag--closable.t-tag--disabled { + cursor: not-allowed; + color: rgba(0, 0, 0, 0.26); + background-color: #e7e7e7; + border-color: #e7e7e7; +} diff --git a/components/tag/props.d.ts b/components/tag/props.d.ts new file mode 100644 index 0000000..8074655 --- /dev/null +++ b/components/tag/props.d.ts @@ -0,0 +1,3 @@ +import { TdTagProps } from './type'; +declare const props: TdTagProps; +export default props; diff --git a/components/tag/props.js b/components/tag/props.js new file mode 100644 index 0000000..c7c9d67 --- /dev/null +++ b/components/tag/props.js @@ -0,0 +1,38 @@ +const props = { + closable: { + type: Boolean, + value: false, + }, + disabled: { + type: Boolean, + value: false, + }, + externalClasses: { + type: Array, + }, + icon: { + type: String, + value: '', + }, + maxWidth: { + type: String, + optionalTypes: [Number], + }, + shape: { + type: String, + value: 'square', + }, + size: { + type: String, + value: 'medium', + }, + theme: { + type: String, + value: 'default', + }, + variant: { + type: String, + value: 'dark', + }, +}; +export default props; diff --git a/components/tag/tag.d.ts b/components/tag/tag.d.ts new file mode 100644 index 0000000..64311c1 --- /dev/null +++ b/components/tag/tag.d.ts @@ -0,0 +1,27 @@ +import { SuperComponent } from '../common/src/index'; +export default class Tag extends SuperComponent { + data: { + prefix: string; + classPrefix: string; + className: string; + tagStyle: string; + }; + properties: import("./type").TdTagProps; + externalClasses: string[]; + options: { + multipleSlots: boolean; + }; + lifetimes: { + attached(): void; + }; + observers: { + 'size, shape, theme, variant, closable, disabled'(): void; + maxWidth(): void; + }; + methods: { + setClass(): void; + setTagStyle(): string; + handleClick(e: WechatMiniprogram.BaseEvent): void; + handleClose(e: WechatMiniprogram.BaseEvent): void; + }; +} diff --git a/components/tag/tag.js b/components/tag/tag.js new file mode 100644 index 0000000..b6a8345 --- /dev/null +++ b/components/tag/tag.js @@ -0,0 +1,83 @@ +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'; +import { classNames, isNumber } from '../common/utils'; +const { prefix } = config; +const name = `${prefix}-tag`; +let Tag = class Tag extends SuperComponent { + constructor() { + super(...arguments); + this.data = { + prefix, + classPrefix: name, + className: '', + tagStyle: '', + }; + this.properties = props; + this.externalClasses = [`${prefix}-class`]; + this.options = { + multipleSlots: true, + }; + this.lifetimes = { + attached() { + this.setClass(); + this.setTagStyle(); + }, + }; + this.observers = { + 'size, shape, theme, variant, closable, disabled'() { + this.setClass(); + }, + maxWidth() { + this.setTagStyle(); + }, + }; + this.methods = { + setClass() { + const { prefix, classPrefix } = this.data; + const { size, shape, theme, variant, closable, disabled } = this.properties; + const tagClass = [ + classPrefix, + `${classPrefix}--theme-${theme || 'default'}`, + `${classPrefix}--variant-${variant || 'dark'}`, + closable ? `${classPrefix}--closable ${prefix}-is-closable` : '', + disabled ? `${classPrefix}--disabled ${prefix}-is-disabled` : '', + `${classPrefix}--size-${size || 'medium'}`, + `${classPrefix}--shape-${shape || 'square'}`, + ]; + const className = classNames(tagClass); + this.setData({ + className, + }); + }, + setTagStyle() { + const { maxWidth } = this.properties; + if (!maxWidth) { + return ''; + } + const width = isNumber(maxWidth) ? `${maxWidth}px` : maxWidth; + this.setData({ tagStyle: `max-width:${width};` }); + }, + handleClick(e) { + if (this.data.disabled) + return; + this.triggerEvent('click', e); + }, + handleClose(e) { + if (this.data.disabled) + return; + this.triggerEvent('close', e); + }, + }; + } +}; +Tag = __decorate([ + wxComponent() +], Tag); +export default Tag; diff --git a/components/tag/tag.json b/components/tag/tag.json new file mode 100644 index 0000000..fc075a1 --- /dev/null +++ b/components/tag/tag.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-icon": ".././icon/icon" + } +} diff --git a/components/tag/tag.wxml b/components/tag/tag.wxml new file mode 100644 index 0000000..73ba35b --- /dev/null +++ b/components/tag/tag.wxml @@ -0,0 +1,16 @@ + + + + + + + + + + diff --git a/components/tag/tag.wxss b/components/tag/tag.wxss new file mode 100644 index 0000000..c023544 --- /dev/null +++ b/components/tag/tag.wxss @@ -0,0 +1,233 @@ +.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-tag { + display: inline-flex; + align-items: center; + border: 2rpx solid transparent; + box-sizing: border-box; + border-radius: 8rpx; + font-size: 24rpx; + user-select: none; + vertical-align: middle; +} +.t-tag__text { + word-wrap: normal; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.t-tag__icon, +.t-tag__icon-close { + display: flex; + align-items: center; +} +.t-tag__icon:not(:empty) + .t-tag__text:not(:empty), +.t-tag__text:not(:empty) + .t-tag__icon-close:not(:empty) { + margin-left: 8rpx; +} +.t-tag.t-tag--size-small { + height: 44rpx; + line-height: 44rpx; + padding: 0 11rpx; + font-size: 20rpx; +} +.t-tag.t-tag--size-small .t-icon, +.t-tag.t-tag--size-small .t-icon-close { + font-size: 24rpx; +} +.t-tag.t-tag--size-medium { + height: 48rpx; + line-height: 48rpx; + padding: 0 15rpx; + font-size: 24rpx; +} +.t-tag.t-tag--size-medium .t-icon, +.t-tag.t-tag--size-medium .t-icon-close { + font-size: 28rpx; +} +.t-tag.t-tag--size-large { + height: 60rpx; + line-height: 60rpx; + padding: 0 23rpx; + font-size: 28rpx; +} +.t-tag.t-tag--size-large .t-icon, +.t-tag.t-tag--size-large .t-icon-close { + font-size: 36rpx; +} +.t-tag.t-tag--shape-square { + border-radius: 8rpx; +} +.t-tag.t-tag--shape-round { + border-radius: 999px; +} +.t-tag.t-tag--shape-mark { + border-radius: 0 999px 999px 0; +} +.t-tag--variant-dark.t-tag--theme-primary { + background-color: #0052d9; + border-color: #0052d9; + color: #ffffff; +} +.t-tag--variant-dark.t-tag--theme-success { + background-color: #00a870; + border-color: #00a870; + color: #ffffff; +} +.t-tag--variant-dark.t-tag--theme-warning { + background-color: #ed7b2f; + border-color: #ed7b2f; + color: #ffffff; +} +.t-tag--variant-dark.t-tag--theme-default { + background-color: #e7e7e7; + border-color: #e7e7e7; + color: rgba(0, 0, 0, 0.9); +} +.t-tag--variant-dark.t-tag--theme-danger { + background-color: #e34d59; + border-color: #e34d59; + color: #ffffff; +} +.t-tag--variant-light.t-tag--theme-primary { + background-color: #e6eefb; + border-color: #e6eefb; + color: #0052d9; +} +.t-tag--variant-light.t-tag--theme-success { + background-color: #e6f6f1; + border-color: #e6f6f1; + color: #00a870; +} +.t-tag--variant-light.t-tag--theme-warning { + background-color: #fdf2ea; + border-color: #fdf2ea; + color: #ed7b2f; +} +.t-tag--variant-light.t-tag--theme-default { + background-color: rgba(28, 28, 28, 0.91); + border-color: rgba(28, 28, 28, 0.91); + color: #e7e7e7; +} +.t-tag--variant-light.t-tag--theme-danger { + background-color: #fcedee; + border-color: #fcedee; + color: #e34d59; +} +.t-tag--variant-light.t-tag--theme-default { + color: rgba(0, 0, 0, 0.9); + border-color: #f3f3f3; + background-color: #f3f3f3; +} +.t-tag--variant-outline.t-tag--theme-primary { + background-color: #ffffff; + border-color: #0052d9; + color: #0052d9; +} +.t-tag--variant-outline.t-tag--theme-success { + background-color: #ffffff; + border-color: #00a870; + color: #00a870; +} +.t-tag--variant-outline.t-tag--theme-warning { + background-color: #ffffff; + border-color: #ed7b2f; + color: #ed7b2f; +} +.t-tag--variant-outline.t-tag--theme-default { + background-color: rgba(0, 0, 0, 0.9); + border-color: #e7e7e7; + color: #e7e7e7; +} +.t-tag--variant-outline.t-tag--theme-danger { + background-color: #ffffff; + border-color: #e34d59; + color: #e34d59; +} +.t-tag--variant-outline.t-tag--theme-default { + color: rgba(0, 0, 0, 0.9); + border-color: #dcdcdc; + background-color: #fff; +} +.t-tag--variant-light-outline.t-tag--theme-primary { + background-color: #e6eefb; + border-color: #0052d9; + color: #0052d9; +} +.t-tag--variant-light-outline.t-tag--theme-success { + background-color: #e6f6f1; + border-color: #00a870; + color: #00a870; +} +.t-tag--variant-light-outline.t-tag--theme-warning { + background-color: #fdf2ea; + border-color: #ed7b2f; + color: #ed7b2f; +} +.t-tag--variant-light-outline.t-tag--theme-default { + background-color: rgba(28, 28, 28, 0.91); + border-color: #e7e7e7; + color: #e7e7e7; +} +.t-tag--variant-light-outline.t-tag--theme-danger { + background-color: #fcedee; + border-color: #e34d59; + color: #e34d59; +} +.t-tag--variant-light-outline.t-tag--theme-default { + color: rgba(0, 0, 0, 0.9); + border-color: #dcdcdc; + background-color: #f3f3f3; +} +.t-tag.t-tag--checkable { + cursor: pointer; + color: rgba(0, 0, 0, 0.9); + background-color: #e7e7e7; + border-color: #e7e7e7; +} +.t-tag.t-tag--checkable.t-tag--checked { + color: #fff; + background-color: #0052d9; + border-color: #0052d9; +} +.t-tag.t-tag--checkable.t-tag--checked.t-tag--disabled { + color: #fff; + background-color: #bbd3fb; +} +.t-tag.t-tag--checkable.t-tag--disabled { + cursor: not-allowed; + color: rgba(0, 0, 0, 0.26); + background-color: #e7e7e7; + border-color: #e7e7e7; +} +.t-tag.t-tag--closable.t-tag--disabled { + cursor: not-allowed; + color: rgba(0, 0, 0, 0.26); + background-color: #e7e7e7; + border-color: #e7e7e7; +} diff --git a/components/tag/type.d.ts b/components/tag/type.d.ts new file mode 100644 index 0000000..4df6195 --- /dev/null +++ b/components/tag/type.d.ts @@ -0,0 +1,92 @@ +import { SizeEnum } from '../common/common'; +export interface TdTagProps { + closable?: { + type: BooleanConstructor; + value?: boolean; + required?: boolean; + }; + disabled?: { + type: BooleanConstructor; + value?: boolean; + required?: boolean; + }; + externalClasses?: { + type: ArrayConstructor; + value?: ['t-class']; + required?: boolean; + }; + icon?: { + type: StringConstructor; + value?: string; + required?: boolean; + }; + maxWidth?: { + type: StringConstructor; + optionalTypes: Array; + value?: string | number; + required?: boolean; + }; + shape?: { + type: StringConstructor; + value?: 'square' | 'round' | 'mark'; + required?: boolean; + }; + size?: { + type: StringConstructor; + value?: SizeEnum; + required?: boolean; + }; + theme?: { + type: StringConstructor; + value?: 'default' | 'primary' | 'warning' | 'danger' | 'success'; + required?: boolean; + }; + variant?: { + type: StringConstructor; + value?: 'dark' | 'light' | 'outline' | 'light-outline'; + required?: boolean; + }; +} +export interface TdCheckTagProps { + checked?: { + type: BooleanConstructor; + value?: boolean; + required?: boolean; + }; + defaultChecked?: { + type: BooleanConstructor; + value?: boolean; + required?: boolean; + }; + closable?: { + type: BooleanConstructor; + value?: boolean; + required?: boolean; + }; + content?: { + type: StringConstructor; + optionalTypes: Array; + value?: string | number; + required?: boolean; + }; + disabled?: { + type: BooleanConstructor; + value?: boolean; + required?: boolean; + }; + icon?: { + type: StringConstructor; + value?: string; + required?: boolean; + }; + shape?: { + type: StringConstructor; + value?: 'square' | 'round' | 'mark'; + required?: boolean; + }; + size?: { + type: StringConstructor; + value?: SizeEnum; + required?: boolean; + }; +} diff --git a/components/tag/type.js b/components/tag/type.js new file mode 100644 index 0000000..cb0ff5c --- /dev/null +++ b/components/tag/type.js @@ -0,0 +1 @@ +export {}; diff --git a/pages/foot-tab/foot-tab.js b/pages/foot-tab/foot-tab.js index 556c51f..d51a36f 100644 --- a/pages/foot-tab/foot-tab.js +++ b/pages/foot-tab/foot-tab.js @@ -62,7 +62,22 @@ Component({ } }, + checkLogin(){ + let userInfo = wx.getStorageSync('userInfo'); + let token = wx.getStorageSync('userToken'); + console.log('userInfo===' + userInfo); + console.log('token===' + token); + if (userInfo && token){ + return true; + }else { + return false; + } + }, + onChange(event) { + if (!this.checkLogin()){ + wx.redirectTo({url:"/pages/login/index"}); + } this.setIconData(event.detail.value); }, } diff --git a/pages/login/index.js b/pages/login/index.js new file mode 100644 index 0000000..e034c23 --- /dev/null +++ b/pages/login/index.js @@ -0,0 +1,73 @@ +import Toast from '../../components/toast/index'; +Page({ + data: { + body:{ + userName:'', + password:'', + code:'' + } + }, + // 输入框输入时 + inputChange(event) { + let key = event.currentTarget.dataset.type; + this.data.body[key] = event.detail.value; + }, + toast(option) { + Toast({ + context: this, + selector: '#t-toast', + ...option, + }); + }, + + clickRegister() { + wx.redirectTo({ + url:"/pages/register/index" + }) + }, + + longin(){ + if (!this.data.body.userName) { + this.toast({ + message: '用户名不能为空!', + theme: 'fail', + placement: 'bottom', + direction: 'column' + }); + return; + } + if (!this.data.body.password) { + this.toast({ + message: '请输入密码!', + theme: 'fail', + placement: 'bottom', + direction: 'column' + }); + return; + } + if (!this.data.body.code) { + this.toast({ + message: '请输入验证码!', + theme: 'fail', + placement: 'bottom', + direction: 'column' + }); + return; + } + if (this.data.body.code != '1') { + this.toast({ + message: '验证码不匹配!', + theme: 'fail', + placement: 'bottom', + direction: 'column' + }); + return; + } + console.log('登录成功'); + wx.setStorageSync('userInfo',this.data.body); + wx.setStorageSync('userToken','123456'); + wx.redirectTo({url:'/pages/myself/index'}); + + } + +}); diff --git a/pages/login/index.json b/pages/login/index.json new file mode 100644 index 0000000..e1c2776 --- /dev/null +++ b/pages/login/index.json @@ -0,0 +1,6 @@ +{ + "usingComponents": { + "t-toast": "/components/toast/toast", + "t-button": "/components/button/button" + } +} diff --git a/pages/login/index.wxml b/pages/login/index.wxml new file mode 100644 index 0000000..d0b18c9 --- /dev/null +++ b/pages/login/index.wxml @@ -0,0 +1,18 @@ + + + + + + + + +点击注册> + + + 登录 + + diff --git a/pages/login/index.wxss b/pages/login/index.wxss new file mode 100644 index 0000000..94e3746 --- /dev/null +++ b/pages/login/index.wxss @@ -0,0 +1,13 @@ +.inputClass { + margin-top: 200rpx; + padding: 20rpx; +} +.inputButton { + padding: 20rpx; + margin-top: 50rpx; +} +.clickRegister{ + margin-top: 10rpx; + font-size: 28rpx; + float: right; +} diff --git a/pages/myself/account/index.js b/pages/myself/account/index.js index b3b2179..c1b5191 100644 --- a/pages/myself/account/index.js +++ b/pages/myself/account/index.js @@ -18,5 +18,11 @@ Page({ console.log(e); } }) + }, + + exitLogin(){ + wx.clearStorageSync(); + wx.redirectTo({url:"/pages/login/index"}) } + }); diff --git a/pages/myself/account/index.json b/pages/myself/account/index.json index c77dc7a..7696f87 100644 --- a/pages/myself/account/index.json +++ b/pages/myself/account/index.json @@ -1,4 +1,5 @@ { "usingComponents": { + "t-button": "/components/button/button" } } diff --git a/pages/myself/account/index.wxml b/pages/myself/account/index.wxml index b5e15cd..09e6beb 100644 --- a/pages/myself/account/index.wxml +++ b/pages/myself/account/index.wxml @@ -10,3 +10,6 @@ + + 退出登录 + diff --git a/pages/myself/account/index.wxss b/pages/myself/account/index.wxss index 8b8f32f..73f8cbf 100644 --- a/pages/myself/account/index.wxss +++ b/pages/myself/account/index.wxss @@ -4,3 +4,8 @@ border-radius: 50%; overflow: hidden; } +.subButton { + position: absolute; + width: 100%; + bottom:10rpx; +} diff --git a/pages/register/index.js b/pages/register/index.js new file mode 100644 index 0000000..f9dfe00 --- /dev/null +++ b/pages/register/index.js @@ -0,0 +1,79 @@ +Page({ + data: { + nameConfirm: false, + checkedId: '', + checkedName: '', + userNameList: [ + {"id":1,"userName":"浙A88123","checked":false}, + {"id":2,"userName":"浙A88dae","checked":false}, + {"id":3,"userName":"浙A88F32","checked":false}, + {"id":4,"userName":"浙A88231","checked":false}, + {"id":5,"userName":"浙A88F213","checked":false}, + {"id":6,"userName":"浙A88F1U7","checked":false}, + {"id":7,"userName":"浙A81237","checked":false}, + {"id":8,"userName":"浙A1238FU7","checked":false}, + {"id":9,"userName":"浙A88FU7","checked":false}, + {"id":10,"userName":"浙A88FU7","checked":false}, + {"id":11,"userName":"浙A88FU7","checked":false}, + {"id":12,"userName":"浙A88FU7","checked":false}, + {"id":13,"userName":"浙A88FU7","checked":false}, + {"id":14,"userName":"浙A88FU7","checked":false}, + {"id":15,"userName":"浙A88FU7","checked":false}, + {"id":16,"userName":"浙A88FU7","checked":false}, + {"id":17,"userName":"浙A88FU7","checked":false}, + {"id":18,"userName":"浙A88FU7","checked":false}, + {"id":19,"userName":"浙A88FU7","checked":false}, + {"id":20,"userName":"浙A88FU7","checked":false}, + {"id":21,"userName":"浙A88FU7","checked":false}, + {"id":22,"userName":"浙A88FU7","checked":false}, + {"id":23,"userName":"浙A88FU7","checked":false}, + {"id":24,"userName":"浙A88FU7","checked":false}, + {"id":25,"userName":"浙A88FU7","checked":false}, + {"id":26,"userName":"浙A88FU7","checked":false}, + {"id":27,"userName":"浙A88FU7","checked":false}, + {"id":28,"userName":"浙A88FU7","checked":false}, + {"id":29,"userName":"浙A88FU7","checked":false}, + {"id":30,"userName":"浙A88FU7","checked":false}, + {"id":31,"userName":"浙A88FU7","checked":false}, + {"id":32,"userName":"浙A88FU7","checked":false}, + {"id":33,"userName":"浙A88FU7","checked":false}, + {"id":34,"userName":"浙A88FU7","checked":false}, + {"id":35,"userName":"浙A88FU7","checked":false}, + {"id":36,"userName":"浙A88FU7","checked":false}, + {"id":37,"userName":"浙A88FU7","checked":false}, + {"id":38,"userName":"浙A88FU7","checked":false}, + {"id":39,"userName":"浙A88FU7","checked":false}, + {"id":40,"userName":"浙A88FU7","checked":false} + ], + }, + + checkName() { + this.closeDialog(); + wx.navigateTo({url:"/pages/register/password/index?name=" + this.data.checkedName}) + }, + + changeCheckEasy() { + let dataList = this.data.userNameList; + let dataCheck = dataList[this.data.checkedId]; + dataCheck.checked = !dataCheck.checked; + dataList[this.data.checkedId] = dataCheck; + this.setData({ + userNameList: dataList, + }) + }, + + closeDialog() { + this.changeCheckEasy(); + this.setData({ nameConfirm : false }); + }, + + handleCheckTagChange(e){ + this.setData({ + checkedId : e.currentTarget.id - 1, + checkedName : e.currentTarget.dataset.name, + nameConfirm : true + }) + this.changeCheckEasy(); + } + +}); diff --git a/pages/register/index.json b/pages/register/index.json new file mode 100644 index 0000000..7134197 --- /dev/null +++ b/pages/register/index.json @@ -0,0 +1,10 @@ +{ + "usingComponents": { + "t-grid": "/components/grid/grid", + "t-grid-item": "/components/grid/grid-item", + "t-tag": "/components/tag/tag", + "t-steps": "/components/steps/steps", + "t-step-item": "/components/steps/step-item", + "t-dialog": "/components/dialog/dialog" + } +} diff --git a/pages/register/index.wxml b/pages/register/index.wxml new file mode 100644 index 0000000..175442e --- /dev/null +++ b/pages/register/index.wxml @@ -0,0 +1,22 @@ + + + + + + + + + + {{item.userName}} + {{item.userName}} + + + diff --git a/pages/register/index.wxss b/pages/register/index.wxss new file mode 100644 index 0000000..a15889b --- /dev/null +++ b/pages/register/index.wxss @@ -0,0 +1,3 @@ +.custom-confirm-btn { + color: #ff4646 !important; +} diff --git a/pages/register/ok/index.js b/pages/register/ok/index.js new file mode 100644 index 0000000..02bb565 --- /dev/null +++ b/pages/register/ok/index.js @@ -0,0 +1,13 @@ +Page({ + data: { + userName:'', + }, + onLoad: function (options) { + this.setData({ + userName:options.name + }) + }, + toLongin(){ + wx.redirectTo({url:"/pages/login/index"}); + } +}); diff --git a/pages/register/ok/index.json b/pages/register/ok/index.json new file mode 100644 index 0000000..21cea24 --- /dev/null +++ b/pages/register/ok/index.json @@ -0,0 +1,8 @@ +{ + "usingComponents": { + "t-steps": "/components/steps/steps", + "t-step-item": "/components/steps/step-item", + "t-result": "/components/result/result", + "t-button": "/components/button/button" + } +} diff --git a/pages/register/ok/index.wxml b/pages/register/ok/index.wxml new file mode 100644 index 0000000..4992ada --- /dev/null +++ b/pages/register/ok/index.wxml @@ -0,0 +1,13 @@ + + + + + + + + + + + + 去登录>>> + diff --git a/pages/register/ok/index.wxss b/pages/register/ok/index.wxss new file mode 100644 index 0000000..441797e --- /dev/null +++ b/pages/register/ok/index.wxss @@ -0,0 +1,3 @@ +.leaveTop{ + margin-top: 88rpx; +} diff --git a/pages/register/password/index.js b/pages/register/password/index.js new file mode 100644 index 0000000..98e6dec --- /dev/null +++ b/pages/register/password/index.js @@ -0,0 +1,15 @@ +Page({ + data: { + userName:'', + }, + onLoad: function (options) { + this.setData({ + userName:options.name + }) + }, + + toRegister(){ + wx.navigateTo({url:"/pages/register/ok/index?name=" + this.data.userName}) + } + +}); diff --git a/pages/register/password/index.json b/pages/register/password/index.json new file mode 100644 index 0000000..1a8f71e --- /dev/null +++ b/pages/register/password/index.json @@ -0,0 +1,7 @@ +{ + "usingComponents": { + "t-steps": "/components/steps/steps", + "t-step-item": "/components/steps/step-item", + "t-button": "/components/button/button" + } +} diff --git a/pages/register/password/index.wxml b/pages/register/password/index.wxml new file mode 100644 index 0000000..8484fd8 --- /dev/null +++ b/pages/register/password/index.wxml @@ -0,0 +1,15 @@ + + + + + + + + + + + + + +注册 + diff --git a/pages/register/password/index.wxss b/pages/register/password/index.wxss new file mode 100644 index 0000000..441797e --- /dev/null +++ b/pages/register/password/index.wxss @@ -0,0 +1,3 @@ +.leaveTop{ + margin-top: 88rpx; +} diff --git a/pages/task/index.js b/pages/task/index.js index 7431695..d965fcc 100644 --- a/pages/task/index.js +++ b/pages/task/index.js @@ -9,7 +9,6 @@ Page({ */ data: { tapCheckHandle: undefined, - dateVisible: true, 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'}], @@ -36,13 +35,9 @@ Page({ getList(type, currentPage) { let currentCur = this.data.categoryCur; let pageData = this.getCurrentData(currentCur); - if (pageData.end) return; + if ('more' == type && pageData.end) return; pageData.requesting = true; this.setCurrentData(currentCur, pageData); - wx.showLoading({ - title: '请稍候...', - mask: true, - }) app.$api.taskList({}).then(res =>{ // this.setData({ // taskList:res.data.taskList, @@ -51,8 +46,6 @@ 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/pages/task/taskView/index.json b/pages/task/taskView/index.json index d0e8daf..d978358 100644 --- a/pages/task/taskView/index.json +++ b/pages/task/taskView/index.json @@ -3,7 +3,6 @@ "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" + "t-switch": "/components/switch/switch" } } diff --git a/utils/api.js b/utils/api.js index d7a2398..8a9f13c 100644 --- a/utils/api.js +++ b/utils/api.js @@ -231,7 +231,6 @@ export default { let job = {data:{over:true}}; x(job) console.log(x + '请求成功'); - wx.hideLoading(); }) // return fetchGet('', params, false); },