diff --git a/app.json b/app.json index b26ed3d..a7fd267 100644 --- a/app.json +++ b/app.json @@ -6,7 +6,10 @@ "pages/message/index", "pages/taskDetail/index", "pages/anniversary/index", - "pages/anniversary/create/index" + "pages/anniversary/create/index", + "pages/myself/notify/index", + "pages/myself/question/index", + "pages/myself/about/index" ], "usingComponents": { "t-icon": "/components/icon/icon", diff --git a/components/collapse/README.md b/components/collapse/README.md new file mode 100644 index 0000000..7fca3ba --- /dev/null +++ b/components/collapse/README.md @@ -0,0 +1,68 @@ +--- +title: Collapse 折叠面板 +description: 用于对复杂区域进行分组和隐藏 常用于订单信息展示等 +spline: data +isComponent: true +--- + + +## 引入 + +全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。 + +```json +"usingComponents": { + "t-collapse": "/components/collapse/collapse", + "t-collapse-panel": "/components/collapse/collapse-panel" +} +``` + +## 代码演示 + +### 基本使用 + +基础折叠面板 + +{{ base }} + +### 带操作说明 + +自定义面板头部的右侧区域 + +{{ action }} + +### 手风琴模式 + +每个面板互斥展开 + +{{ accordion }} + +## API +### Collapse Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +default-expand-all | Boolean | false | 默认是否展开全部 | N +disabled | Boolean | - | 是否禁用面板展开/收起操作 | N +expand-icon | Boolean / Slot | true | 展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标；值类型为函数，则表示完全自定义展开图标 | N +expand-mutex | Boolean | false | 每个面板互斥展开，每次只展开一个面板 | N +value | Array | - | 展开的面板集合。TS 类型：`CollapseValue` `type CollapseValue = Array`。[详细类型定义](https://github.com/Tencent//components/tree/develop/src/collapse/type.ts) | N +default-value | Array | undefined | 展开的面板集合。非受控属性。TS 类型：`CollapseValue` `type CollapseValue = Array`。[详细类型定义](https://github.com/Tencent//components/tree/develop/src/collapse/type.ts) | N + +### Collapse Events + +名称 | 参数 | 描述 +-- | -- | -- +change | `(value: CollapseValue)` | 切换面板时触发，返回变化的值 + +### CollapsePanel Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +content | String / Slot | - | 折叠面板内容 | N +disabled | Boolean | undefined | 禁止当前面板展开，优先级大于 Collapse 的同名属性 | N +expand-icon | Boolean / Slot | undefined | 当前折叠面板展开图标，优先级大于 Collapse 的同名属性 | N +external-classes | Array | - | 组件类名，用于组件外层元素、标题、内容。`['t-class', 't-class-header', 't-class-content']` | N +header | String / Slot | - | 面板头内容 | N +header-right-content | String / Slot | - | 面板头的右侧区域，一般用于呈现面板操作 | N +value | String / Number | - | 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | N diff --git a/components/collapse/collapse-panel-props.d.ts b/components/collapse/collapse-panel-props.d.ts new file mode 100644 index 0000000..829dbea --- /dev/null +++ b/components/collapse/collapse-panel-props.d.ts @@ -0,0 +1,3 @@ +import { TdCollapsePanelProps } from './type'; +declare const props: TdCollapsePanelProps; +export default props; diff --git a/components/collapse/collapse-panel-props.js b/components/collapse/collapse-panel-props.js new file mode 100644 index 0000000..7022351 --- /dev/null +++ b/components/collapse/collapse-panel-props.js @@ -0,0 +1,26 @@ +const props = { + content: { + type: String, + }, + disabled: { + type: Boolean, + value: null, + }, + expandIcon: { + type: Boolean, + value: true, + }, + externalClasses: { + type: Array, + }, + header: { + type: String, + }, + headerRightContent: { + type: String, + }, + value: { + type: null, + }, +}; +export default props; diff --git a/components/collapse/collapse-panel.d.ts b/components/collapse/collapse-panel.d.ts new file mode 100644 index 0000000..aee59d7 --- /dev/null +++ b/components/collapse/collapse-panel.d.ts @@ -0,0 +1,29 @@ +import { SuperComponent, RelationsOptions } from '../common/src/index'; +import type { TdCollapsePanelProps } from './type'; +export interface CollapsePanelProps extends TdCollapsePanelProps { +} +export default class CollapsePanel extends SuperComponent { + externalClasses: string[]; + options: { + multipleSlots: boolean; + }; + relations: RelationsOptions; + properties: TdCollapsePanelProps; + data: { + prefix: string; + contentHeight: number; + expanded: boolean; + classPrefix: string; + classBasePrefix: string; + ultimateExpandIcon: boolean; + ultimateDisabled: boolean; + }; + methods: { + set(data: Record): Promise; + updateExpanded(activeValues: any): Promise; + getRect(selector: string): Promise; + updateStyle(expanded: boolean): any; + onClick(): void; + onTransitionEnd(): void; + }; +} diff --git a/components/collapse/collapse-panel.js b/components/collapse/collapse-panel.js new file mode 100644 index 0000000..975e591 --- /dev/null +++ b/components/collapse/collapse-panel.js @@ -0,0 +1,116 @@ +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 './collapse-panel-props'; +const { prefix } = config; +const name = `${prefix}-collapse-panel`; +const nextTick = () => new Promise((resolve) => setTimeout(resolve, 20)); +let CollapsePanel = class CollapsePanel extends SuperComponent { + constructor() { + super(...arguments); + this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-header`]; + this.options = { + multipleSlots: true, + }; + this.relations = { + './collapse': { + type: 'ancestor', + linked(target) { + this.parent = target; + const { value, defaultExpandAll, expandMutex, expandIcon, disabled } = target.properties; + const activeValues = defaultExpandAll && !expandMutex ? [this.properties.value] : value; + this.setData({ + ultimateExpandIcon: expandIcon || this.properties.expandIcon, + ultimateDisabled: this.properties.disabled == null ? disabled : this.properties.disabled, + }); + this.updateExpanded(activeValues); + }, + }, + }; + this.properties = props; + this.data = { + prefix, + contentHeight: 0, + expanded: false, + classPrefix: name, + classBasePrefix: prefix, + ultimateExpandIcon: false, + ultimateDisabled: false, + }; + this.methods = { + set(data) { + this.setData(data); + return new Promise((resolve) => wx.nextTick(resolve)); + }, + updateExpanded(activeValues) { + if (!this.parent) { + return Promise.resolve() + .then(nextTick) + .then(() => { + const data = { transition: true }; + if (this.data.expanded) { + data.contentHeight = 'auto'; + } + this.setData(data); + }); + } + const { value } = this.properties; + const expanded = activeValues.includes(value); + if (expanded === this.properties.expanded) + return; + this.setData({ expanded }); + this.updateStyle(expanded); + }, + getRect(selector) { + return new Promise((resolve) => { + wx.createSelectorQuery() + .in(this) + .select(selector) + .boundingClientRect((rect) => { + if (rect) { + resolve(rect); + } + }) + .exec(); + }); + }, + updateStyle(expanded) { + return this.getRect(`.${name}__content`) + .then((rect) => rect.height) + .then((height) => { + if (expanded) { + return this.set({ + contentHeight: height ? `${height}px` : 'auto', + }); + } + return this.set({ contentHeight: `${height}px` }) + .then(nextTick) + .then(() => this.set({ contentHeight: 0 })); + }); + }, + onClick() { + const { ultimateDisabled } = this.data; + const { value } = this.properties; + if (ultimateDisabled) + return; + this.parent.switch(value); + }, + onTransitionEnd() { + if (this.data.expanded) { + this.setData({ + contentHeight: 'auto', + }); + } + }, + }; + } +}; +CollapsePanel = __decorate([ + wxComponent() +], CollapsePanel); +export default CollapsePanel; diff --git a/components/collapse/collapse-panel.json b/components/collapse/collapse-panel.json new file mode 100644 index 0000000..5160a95 --- /dev/null +++ b/components/collapse/collapse-panel.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-cell": "../cell/cell" + } +} diff --git a/components/collapse/collapse-panel.wxml b/components/collapse/collapse-panel.wxml new file mode 100644 index 0000000..ee954cb --- /dev/null +++ b/components/collapse/collapse-panel.wxml @@ -0,0 +1,31 @@ + + + + + + + + + + + {{content}} + + + + + + diff --git a/components/collapse/collapse-panel.wxss b/components/collapse/collapse-panel.wxss new file mode 100644 index 0000000..de4e547 --- /dev/null +++ b/components/collapse/collapse-panel.wxss @@ -0,0 +1,92 @@ +.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-collapse-panel { + overflow: hidden; + transition: height 200ms ease-in-out; + box-shadow: inset 0 -1px 0 0 #eeeeee; + background-color: #fff; +} +.t-collapse-panel--active { + height: auto; +} +.t-collapse-panel--disabled { + pointer-events: none; +} +.t-collapse-panel--disabled .t-collapse-panel__content, +.t-collapse-panel--disabled .t-collapse-panel__header { + opacity: 0.3; +} +.t-collapse-panel__header { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + padding-left: 32rpx; + height: 96rpx; + box-shadow: inset 0 -1px 0 0 #eeeeee; + color: #000000; +} +.t-collapse-panel__header-right { + display: inline-flex; + align-items: center; + height: 100%; +} +.t-collapse-panel__header-icon { + height: 100%; + padding-left: 8px; + width: 44px; + padding-right: 8px; + color: rgba(0, 0, 0, 0.4); +} +.t-collapse-panel__extra { + font-size: 32rpx; +} +.t-collapse-panel__body { + box-shadow: inset 0 -1px 0 0 #eeeeee; +} +.t-collapse-panel__wrapper { + transition: height 200ms ease-in-out; +} +.t-collapse-panel__content { + color: #000000; + font-size: 28rpx; + padding: 32rpx; + line-height: 1.5; +} +.class-title { + font-size: 32rpx; +} +.class-title--disabled { + color: rgba(0, 0, 0, 0.26); +} +.class-note--disabled { + color: rgba(0, 0, 0, 0.26) !important; +} +.class-right-icon--disabled { + color: rgba(0, 0, 0, 0.26) !important; +} diff --git a/components/collapse/collapse.d.ts b/components/collapse/collapse.d.ts new file mode 100644 index 0000000..426459f --- /dev/null +++ b/components/collapse/collapse.d.ts @@ -0,0 +1,27 @@ +import { SuperComponent, RelationsOptions } from '../common/src/index'; +import type { CollapseValue, TdCollapseProps } from './type'; +export interface CollapseProps extends TdCollapseProps { +} +export default class Collapse extends SuperComponent { + options: { + addGlobalClass: boolean; + }; + externalClasses: string[]; + relations: RelationsOptions; + controlledProps: { + key: string; + event: string; + }[]; + properties: TdCollapseProps; + data: { + prefix: string; + classPrefix: string; + }; + observers: { + 'value, expandMutex '(): void; + }; + methods: { + updateExpanded(): void; + switch(panelValue: CollapseValue): void; + }; +} diff --git a/components/collapse/collapse.js b/components/collapse/collapse.js new file mode 100644 index 0000000..5ff08ed --- /dev/null +++ b/components/collapse/collapse.js @@ -0,0 +1,70 @@ +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}-collapse`; +let Collapse = class Collapse extends SuperComponent { + constructor() { + super(...arguments); + this.options = { + addGlobalClass: true, + }; + this.externalClasses = [`${prefix}-class`]; + this.relations = { + './collapse-panel': { + type: 'descendant', + linked() { + this.updateExpanded(); + }, + }, + }; + this.controlledProps = [ + { + key: 'value', + event: 'change', + }, + ]; + this.properties = props; + this.data = { + prefix, + classPrefix: name, + }; + this.observers = { + 'value, expandMutex '() { + this.updateExpanded(); + }, + }; + this.methods = { + updateExpanded() { + const panels = this.getRelationNodes('./collapse-panel'); + if (panels.length === 0) + return; + panels.forEach((child) => { + child.updateExpanded(this.properties.value); + }); + }, + switch(panelValue) { + const { expandMutex, value: activeValues } = this.properties; + let value = []; + const hit = activeValues.indexOf(panelValue); + if (hit > -1) { + value = activeValues.filter((item) => item !== panelValue); + } + else { + value = expandMutex ? [panelValue] : activeValues.concat(panelValue); + } + this._trigger('change', { value }); + }, + }; + } +}; +Collapse = __decorate([ + wxComponent() +], Collapse); +export default Collapse; diff --git a/components/collapse/collapse.json b/components/collapse/collapse.json new file mode 100644 index 0000000..467ce29 --- /dev/null +++ b/components/collapse/collapse.json @@ -0,0 +1,3 @@ +{ + "component": true +} diff --git a/components/collapse/collapse.wxml b/components/collapse/collapse.wxml new file mode 100644 index 0000000..b687971 --- /dev/null +++ b/components/collapse/collapse.wxml @@ -0,0 +1,3 @@ + + + diff --git a/components/collapse/collapse.wxss b/components/collapse/collapse.wxss new file mode 100644 index 0000000..aa3be03 --- /dev/null +++ b/components/collapse/collapse.wxss @@ -0,0 +1,49 @@ +.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-collapse__title { + font-size: 28rpx; + padding: 12px; + padding-top: 24px; + color: #999; +} +.hairline--top-bottom:after { + position: absolute; + box-sizing: border-box; + transform-origin: center; + content: ' '; + pointer-events: none; + top: -50%; + right: -50%; + bottom: -50%; + left: -50%; + border: 0 solid #eee; + transform: scale(0.5); +} +.hairline--top-bottom:after { + border-width: 1px 0; +} diff --git a/components/collapse/index.d.ts b/components/collapse/index.d.ts new file mode 100644 index 0000000..2e917ab --- /dev/null +++ b/components/collapse/index.d.ts @@ -0,0 +1,6 @@ +export { default as Collapse } from './collapse'; +export * from './type'; +export * from './props'; +export * from './collapse-panel-props'; +export { CollapseProps } from './collapse'; +export { CollapsePanelProps } from './collapse-panel'; diff --git a/components/collapse/index.js b/components/collapse/index.js new file mode 100644 index 0000000..f7e4b3a --- /dev/null +++ b/components/collapse/index.js @@ -0,0 +1,4 @@ +export { default as Collapse } from './collapse'; +export * from './type'; +export * from './props'; +export * from './collapse-panel-props'; diff --git a/components/collapse/props.d.ts b/components/collapse/props.d.ts new file mode 100644 index 0000000..8ab2059 --- /dev/null +++ b/components/collapse/props.d.ts @@ -0,0 +1,3 @@ +import { TdCollapseProps } from './type'; +declare const props: TdCollapseProps; +export default props; diff --git a/components/collapse/props.js b/components/collapse/props.js new file mode 100644 index 0000000..bcd348b --- /dev/null +++ b/components/collapse/props.js @@ -0,0 +1,25 @@ +const props = { + defaultExpandAll: { + type: Boolean, + value: false, + }, + disabled: { + type: Boolean, + }, + expandIcon: { + type: Boolean, + value: null, + }, + expandMutex: { + type: Boolean, + value: false, + }, + value: { + type: Array, + value: null, + }, + defaultValue: { + type: Array, + }, +}; +export default props; diff --git a/components/collapse/type.d.ts b/components/collapse/type.d.ts new file mode 100644 index 0000000..6b10d96 --- /dev/null +++ b/components/collapse/type.d.ts @@ -0,0 +1,57 @@ +export interface TdCollapseProps { + defaultExpandAll?: { + type: BooleanConstructor; + value?: boolean; + }; + disabled?: { + type: BooleanConstructor; + value?: boolean; + }; + expandIcon?: { + type: BooleanConstructor; + value?: boolean; + }; + expandMutex?: { + type: BooleanConstructor; + value?: boolean; + }; + value?: { + type: ArrayConstructor; + value?: CollapseValue; + }; + defaultValue?: { + type: ArrayConstructor; + value?: CollapseValue; + }; +} +export interface TdCollapsePanelProps { + content?: { + type: StringConstructor; + value?: string; + }; + disabled?: { + type: BooleanConstructor; + value?: boolean; + }; + expandIcon?: { + type: BooleanConstructor; + value?: boolean; + }; + externalClasses?: { + type: ArrayConstructor; + value?: ['t-class', 't-class-header', 't-class-content']; + }; + header?: { + type: StringConstructor; + value?: string; + }; + headerRightContent?: { + type: StringConstructor; + value?: string; + }; + value?: { + type: null; + value?: string | number; + }; +} +export declare type CollapseValue = Array; diff --git a/components/collapse/type.js b/components/collapse/type.js new file mode 100644 index 0000000..cb0ff5c --- /dev/null +++ b/components/collapse/type.js @@ -0,0 +1 @@ +export {}; diff --git a/components/fab/fab.wxss b/components/fab/fab.wxss index 7d7ee86..8bf438f 100644 --- a/components/fab/fab.wxss +++ b/components/fab/fab.wxss @@ -34,7 +34,7 @@ padding: 0 40rpx; box-sizing: border-box; border-radius: 48rpx; - margin-bottom: 60rpx; + margin-bottom: 143rpx; } .t-fab .t-button__text { display: flex; diff --git a/components/message/README.md b/components/message/README.md index 9e900cd..1dbff9b 100644 --- a/components/message/README.md +++ b/components/message/README.md @@ -12,7 +12,7 @@ isComponent: true ```json "usingComponents": { - "t-message": "tdesign-miniprogram/message/message" + "t-message": "/components/message/message" } ``` @@ -21,7 +21,7 @@ isComponent: true 若以 API 形式调用 Message，则需在页面 `page.js` 中引入组件 API： ```js -import Message from 'tdesign-miniprogram/message/index'; +import Message from '/components/message/index'; ``` ## 代码演示 @@ -59,9 +59,9 @@ import Message from 'tdesign-miniprogram/message/index'; | duration | Number | 3000 | 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器。 | N | | external-classes | Array | - | 样式类名，分别用于设置 组件外层、消息内容、左侧图标、操作按钮、关闭按钮等元素类名。`['t-class', 't-class-content', 't-class-icon', 't-class-action', 't-class-close-btn']` | N | | icon | String / Boolean / Slot | true | 消息提醒前面的图标。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标。值为 'info' 或 'bell' 则显示组件内置图标。也可以完全自定义图标节点。TS 类型：`boolean | 'info' | 'bell'` | N | -| marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean | DrawMarquee`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N | +| marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean | DrawMarquee`。[详细类型定义](https://github.com/Tencent//components/tree/develop/src/message/type.ts) | N | | offset | Array | - | 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10rpx', '8rpx']。TS 类型：`Array` | N | -| theme | String | info | 消息组件风格。可选项：info/success/warning/error。TS 类型：`MessageThemeList`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N | +| theme | String | info | 消息组件风格。可选项：info/success/warning/error。TS 类型：`MessageThemeList`。[详细类型定义](https://github.com/Tencent//components/tree/develop/src/message/type.ts) | N | | visible | Boolean | false | 是否显示，隐藏时默认销毁组件 | N | | z-index | Number | 15000 | 组件层级，样式默认为 15000 | N | diff --git a/components/message/api.md b/components/message/api.md index 26e9582..7c543c5 100644 --- a/components/message/api.md +++ b/components/message/api.md @@ -14,7 +14,7 @@ ```json "usingComponents": { - "t-message": "tdesign-miniprogram/message/message" + "t-message": "/components/message/message" } ``` @@ -23,7 +23,7 @@ 若以 API 形式调用 Message，则需在页面 `page.js` 中引入组件 API： ```js -import Message from 'tdesign-miniprogram/message/index'; +import Message from '/components/message/index'; ``` ## 用法 @@ -48,7 +48,7 @@ Message.info({ ### `` 组件 -组件路径：`tdesign-miniprogram/message/message` +组件路径：`/components/message/message` #### Props diff --git a/components/toast/README.md b/components/toast/README.md index affc6c0..b59ae3a 100644 --- a/components/toast/README.md +++ b/components/toast/README.md @@ -12,7 +12,7 @@ isComponent: true ```json "usingComponents": { - "t-toast": "tdesign-miniprogram/toast/toast" + "t-toast": "/components/toast/toast" } ``` diff --git a/pages/myself/about/index.js b/pages/myself/about/index.js new file mode 100644 index 0000000..e4d0cf4 --- /dev/null +++ b/pages/myself/about/index.js @@ -0,0 +1,10 @@ +Page({ + data: { + activeValues: [], + }, + handleChange(e) { + this.setData({ + activeValues: e.detail.value, + }); + }, +}); diff --git a/pages/myself/about/index.json b/pages/myself/about/index.json new file mode 100644 index 0000000..157fe45 --- /dev/null +++ b/pages/myself/about/index.json @@ -0,0 +1,6 @@ +{ + "usingComponents": { + "t-collapse": "/components/collapse/collapse", + "t-collapse-panel": "/components/collapse/collapse-panel" + } +} diff --git a/pages/myself/about/index.wxml b/pages/myself/about/index.wxml new file mode 100644 index 0000000..3bafc93 --- /dev/null +++ b/pages/myself/about/index.wxml @@ -0,0 +1,11 @@ + module.exports.contains = function(arr, target) { return arr.indexOf(target) > -1; } + + + 我们很强真肉蛋 + + diff --git a/pages/myself/about/index.wxss b/pages/myself/about/index.wxss new file mode 100644 index 0000000..e69de29 diff --git a/pages/myself/index.js b/pages/myself/index.js index a8d1d8c..6ac5786 100644 --- a/pages/myself/index.js +++ b/pages/myself/index.js @@ -6,61 +6,41 @@ Page({ */ data: { aIconList: ['check-rectangle','star','notification','info-circle-filled'], + hasUserAttar: false, + userInfo: {}, }, - /** - * 生命周期函数--监听页面加载 - */ - onLoad(options) { - + fetchWXAttar(){ + wx.getUserProfile({ + desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 + success: (res) => { + console.log(res) + this.setData({ + userInfo: res.userInfo, + hasUserAttar: true + }) + }, + fail: (e) => { + console.log(e); + } + }) }, - /** - * 生命周期函数--监听页面初次渲染完成 - */ - onReady() { - + viewMyMessage(){ + wx.navigateTo({ + url: '/pages/myself/notify/index' + }); }, - /** - * 生命周期函数--监听页面显示 - */ - onShow() { - + viewQuestion(){ + wx.navigateTo({ + url: '/pages/myself/question/index' + }); }, - /** - * 生命周期函数--监听页面隐藏 - */ - onHide() { - - }, - - /** - * 生命周期函数--监听页面卸载 - */ - onUnload() { - - }, - - /** - * 页面相关事件处理函数--监听用户下拉动作 - */ - onPullDownRefresh() { - - }, - - /** - * 页面上拉触底事件的处理函数 - */ - onReachBottom() { - - }, - - /** - * 用户点击右上角分享 - */ - onShareAppMessage() { - + viewAboutUs(){ + wx.navigateTo({ + url: '/pages/myself/about/index' + }); } }) diff --git a/pages/myself/index.wxml b/pages/myself/index.wxml index 91dee11..a4c55a3 100644 --- a/pages/myself/index.wxml +++ b/pages/myself/index.wxml @@ -1,5 +1,18 @@ -关于我的 + + + + + + + + + + + + + + diff --git a/pages/myself/index.wxss b/pages/myself/index.wxss index 505d799..dc71ff5 100644 --- a/pages/myself/index.wxss +++ b/pages/myself/index.wxss @@ -1 +1,7 @@ -/* pages/myself/index.wxss */ \ No newline at end of file +/* pages/myself/index.wxss */ +.avatar { + width: 200rpx; + height: 200rpx; + border-radius: 50%; + overflow: hidden; +} diff --git a/pages/myself/notify/index.js b/pages/myself/notify/index.js new file mode 100644 index 0000000..e4d0cf4 --- /dev/null +++ b/pages/myself/notify/index.js @@ -0,0 +1,10 @@ +Page({ + data: { + activeValues: [], + }, + handleChange(e) { + this.setData({ + activeValues: e.detail.value, + }); + }, +}); diff --git a/pages/myself/notify/index.json b/pages/myself/notify/index.json new file mode 100644 index 0000000..157fe45 --- /dev/null +++ b/pages/myself/notify/index.json @@ -0,0 +1,6 @@ +{ + "usingComponents": { + "t-collapse": "/components/collapse/collapse", + "t-collapse-panel": "/components/collapse/collapse-panel" + } +} diff --git a/pages/myself/notify/index.wxml b/pages/myself/notify/index.wxml new file mode 100644 index 0000000..7d16e47 --- /dev/null +++ b/pages/myself/notify/index.wxml @@ -0,0 +1,11 @@ + module.exports.contains = function(arr, target) { return arr.indexOf(target) > -1; } + + + 这个凑数的，到时候改成已读未读的消息 + + diff --git a/pages/myself/notify/index.wxss b/pages/myself/notify/index.wxss new file mode 100644 index 0000000..e69de29 diff --git a/pages/myself/question/index.js b/pages/myself/question/index.js new file mode 100644 index 0000000..5c47061 --- /dev/null +++ b/pages/myself/question/index.js @@ -0,0 +1,11 @@ +Page({ + data: { + activeValues: [], + }, + handleChange(e) { + console.log(this.data.activeValues) + this.setData({ + activeValues: e.detail.value, + }); + }, +}); diff --git a/pages/myself/question/index.json b/pages/myself/question/index.json new file mode 100644 index 0000000..157fe45 --- /dev/null +++ b/pages/myself/question/index.json @@ -0,0 +1,6 @@ +{ + "usingComponents": { + "t-collapse": "/components/collapse/collapse", + "t-collapse-panel": "/components/collapse/collapse-panel" + } +} diff --git a/pages/myself/question/index.wxml b/pages/myself/question/index.wxml new file mode 100644 index 0000000..7b78ff9 --- /dev/null +++ b/pages/myself/question/index.wxml @@ -0,0 +1,11 @@ + module.exports.contains = function(arr, target) { return arr.indexOf(target) > -1; } + + + 你不要注册了，不给你注册，呸！ + + diff --git a/pages/myself/question/index.wxss b/pages/myself/question/index.wxss new file mode 100644 index 0000000..e69de29