diff --git a/custom-tab-bar/index.json b/custom-tab-bar/index.json index 672f3db..31f8169 100644 --- a/custom-tab-bar/index.json +++ b/custom-tab-bar/index.json @@ -3,5 +3,5 @@ "usingComponents": { "t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar", "t-tab-bar-item": "tdesign-miniprogram/tab-bar-item/tab-bar-item" - } + } } \ No newline at end of file diff --git a/pages/my/components/custom-top-bar/index.js b/pages/my/components/custom-top-bar/index.js new file mode 100644 index 0000000..9051de5 --- /dev/null +++ b/pages/my/components/custom-top-bar/index.js @@ -0,0 +1,29 @@ +// components/custom-top-bar/index.js +const app = getApp(); + +Component({ + /** + * 组件的属性列表 + */ + properties: { + + }, + + /** + * 组件的初始数据 + */ + data: { + navBarHeight: app.globalData.navBarHeight, + statusBarHeight: app.globalData.statusBarHeight + }, + + /** + * 组件的方法列表 + */ + methods: { + + }, + lifetimes: { + + } +}) \ No newline at end of file diff --git a/pages/my/components/custom-top-bar/index.json b/pages/my/components/custom-top-bar/index.json new file mode 100644 index 0000000..e8cfaaf --- /dev/null +++ b/pages/my/components/custom-top-bar/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/pages/my/components/custom-top-bar/index.less b/pages/my/components/custom-top-bar/index.less new file mode 100644 index 0000000..f690bc7 --- /dev/null +++ b/pages/my/components/custom-top-bar/index.less @@ -0,0 +1,15 @@ +/* pages/my/components/custom-top-bar/index.wxss */ +.topbar-container { + background-color: #fff; + background-size: cover; + + .title { + display: flex; + color: #000000e6; + font-size: 18px; + font-weight: 600; + font-family: "PingFang SC"; + text-align: center; + justify-content: center; + } +} \ No newline at end of file diff --git a/pages/my/components/custom-top-bar/index.wxml b/pages/my/components/custom-top-bar/index.wxml new file mode 100644 index 0000000..9ec97d1 --- /dev/null +++ b/pages/my/components/custom-top-bar/index.wxml @@ -0,0 +1,4 @@ + + + 我的 + \ No newline at end of file diff --git a/pages/my/components/info-card/index.js b/pages/my/components/info-card/index.js new file mode 100644 index 0000000..88d21da --- /dev/null +++ b/pages/my/components/info-card/index.js @@ -0,0 +1,34 @@ +// pages/my/components/info-card/index.js +Component({ + /** + * 组件的属性列表 + */ + properties: { + "info": { + "type": Object, + "value": {} + } + }, + + /** + * 组件的初始数据 + */ + data: { + info: [] + }, + + /** + * 组件的方法列表 + */ + methods: { + + }, + + lifetimes: { + attached(){ + this.setData({ + info: this.properties.info + }) + } + } +}) diff --git a/pages/my/components/info-card/index.json b/pages/my/components/info-card/index.json new file mode 100644 index 0000000..6ffda42 --- /dev/null +++ b/pages/my/components/info-card/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-image": "tdesign-miniprogram/image/image" + } +} \ No newline at end of file diff --git a/pages/my/components/info-card/index.less b/pages/my/components/info-card/index.less new file mode 100644 index 0000000..1cb54e6 --- /dev/null +++ b/pages/my/components/info-card/index.less @@ -0,0 +1,73 @@ +/* pages/my/components/info-card/index.wxss */ +.info-card { + width: 311px; + height: 120px; + margin: 16px auto; + background-color: #fff; + overflow: hidden; + border-radius: 9px; + box-shadow: 0 6px 30px 5px #0000000d, 0 16px 24px 2px #0000000a, 0 8px 10px -5px #00000014; + + .atvInfo { + display: inline-flex; + flex-direction: column; + margin: 16px 0 0 16px; + + .name { + width: 159px; + text-align: left; + color: #000000e6; + font-size: 14px; + font-weight: 400; + font-family: "PingFang SC"; + line-height: 22px; + margin-bottom: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .date { + width: 159px; + text-align: left; + color: #00000099; + font-size: 12px; + font-weight: 400; + font-family: "PingFang SC"; + line-height: 20px; + } + + .status { + width: 159px; + text-align: left; + position: relative; + margin-top: 24px; + } + + .unfinished { + color: #2ba471; + font-size: 14px; + font-weight: 600; + font-family: "PingFang SC"; + line-height: 22px; + } + + .finished { + color: #00000066; + font-size: 14px; + font-weight: 600; + font-family: "PingFang SC"; + line-height: 22px; + } + + .comment { + position: absolute; + right: 0; + color: #0052d9; + font-size: 14px; + font-weight: 400; + font-family: "PingFang SC"; + line-height: 22px; + } + } +} \ No newline at end of file diff --git a/pages/my/components/info-card/index.wxml b/pages/my/components/info-card/index.wxml new file mode 100644 index 0000000..3e08dd7 --- /dev/null +++ b/pages/my/components/info-card/index.wxml @@ -0,0 +1,12 @@ + + + + + {{info.name}} + {{info.date}} + + {{info.status ? '已完成' : '待参加'}} + 去评价 + + + \ No newline at end of file diff --git a/pages/my/index.js b/pages/my/index.js index 026df8e..921d1b5 100644 --- a/pages/my/index.js +++ b/pages/my/index.js @@ -1,11 +1,29 @@ -// logs.js -const util = require('../../utils/util.js') +// index.js +const app = getApp(); +import { + fetchMyatvs +} from '../../services/fetchMyAtvs'; Page({ data: { - logs: [] + navBarHeight: app.globalData.navBarHeight, + profile: "https://tdesign.gtimg.com/miniprogram/images/avatar1.png", + username: '蔡宣轩', + tags: ['29岁', '设计/艺术从业者'], + myAtvs: [] + }, + + // 加载页面数据 + async loadData() { + const { + data + } = await fetchMyatvs(); + this.setData({ + myAtvs: data + }) }, - onLoad() { + onLoad() { + this.loadData(); } -}) +}) \ No newline at end of file diff --git a/pages/my/index.json b/pages/my/index.json index c0a8251..3a6db00 100644 --- a/pages/my/index.json +++ b/pages/my/index.json @@ -1,4 +1,14 @@ { "navigationBarTitleText": "我的", - "usingComponents": {} + "usingComponents": { + "t-avatar": "tdesign-miniprogram/avatar/avatar", + "t-avatar-group": "tdesign-miniprogram/avatar-group/avatar-group", + "t-icon": "tdesign-miniprogram/icon/icon", + "custom-top-bar": "./components/custom-top-bar/index", + "t-tabs": "tdesign-miniprogram/tabs/tabs", + "t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel", + "t-image": "tdesign-miniprogram/image/image", + "info-card": "./components/info-card/index" + }, + "navigationStyle": "custom" } \ No newline at end of file diff --git a/pages/my/index.less b/pages/my/index.less index 94d4b88..1d9ad48 100644 --- a/pages/my/index.less +++ b/pages/my/index.less @@ -1,8 +1,85 @@ -.log-list { - display: flex; - flex-direction: column; - padding: 40rpx; +page { + background: #f5f6f7; + position: relative; +} + +.background { + height: 163px; + background-color: #fff; + background-size: cover; +} + +custom-top-bar { + width: 100%; + position: fixed; + z-index: 99; + top: 0; } -.log-item { - margin: 10rpx; + +.content { + position: absolute; + width: 100%; + margin-top: 5px; + padding-bottom: calc(env(safe-area-inset-bottom) + 112rpx); +} + +.myInfo { + width: 343px; + height: 96px; + border-radius: 12px; + background: #ffffff; + margin: 0 auto 16px auto; + display: flex; + flex-direction: row; + align-items: center; + position: relative; + + .profile { + margin: 16px; + } + + .info { + .username { + color: #000000e6; + font-size: 16px; + font-weight: 600; + font-family: "PingFang SC"; + line-height: 24px; + margin-bottom: 8px; + } + + .tags { + text { + display: inline-block; + height: 24px; + border-radius: 3px; + background: #f3f3f3; + color: #000000e6; + font-size: 12px; + font-weight: 400; + font-family: "PingFang SC"; + text-align: center; + line-height: 24px; + margin-right: 8px; + padding: 0 8px; + } + } + } + + .t-icon { + position: absolute; + right: 16px; + } } + +.myAtvs { + width: 343px; + border-radius: 12px; + overflow: hidden; + background: #ffffff; + margin: 0 auto; + + .custom-tabs { + height: 48px; + } +} \ No newline at end of file diff --git a/pages/my/index.wxml b/pages/my/index.wxml index d5ba77b..26cacf0 100644 --- a/pages/my/index.wxml +++ b/pages/my/index.wxml @@ -1,4 +1,24 @@ - - - My Page + + + + + + + + {{username}} + + {{item}} + + + + + + + + + + + + + \ No newline at end of file diff --git a/services/delay.js b/services/delay.js index d573617..d768498 100644 --- a/services/delay.js +++ b/services/delay.js @@ -3,4 +3,4 @@ export default function delay(ms = 500) { return new Promise(resolve => { setTimeout(resolve, ms); }) -} +} \ No newline at end of file diff --git a/services/fetchMyAtvs.js b/services/fetchMyAtvs.js new file mode 100644 index 0000000..441510b --- /dev/null +++ b/services/fetchMyAtvs.js @@ -0,0 +1,49 @@ +/** 模拟获取我的页面的数据 */ +import { + config +} from '../config/index'; +import delay from './delay'; + +const myAtvs = [{ + imgUrl: '/src/imgs/my/atv2.png', + name: '2021 SICC服务设计创新大会', + date: '2021年3月16日', + status: 0 + }, + { + imgUrl: '/src/imgs/my/atv3.png', + name: '少年与星空 插画巡展', + date: '2021年6月5日', + status: 1 + }, + { + imgUrl: '/src/imgs/my/atv1.png', + name: '2019 SICC服务设计创新大会', + date: '2019年3月16日', + status: 1 + }, + { + imgUrl: '/src/imgs/my/atv4.png', + name: 'Universe AI艺术展', + date: '2019年3月16日', + status: 1 + } +]; + +function mockFetchMyatvs() { + return delay().then(() => { + return { + data: myAtvs + }; + }) +}; + +export function fetchMyatvs() { + if (config.useMock) { + return mockFetchMyatvs(); + } else { + return new Promise((resolve) => { + resolve('real api') + }); + } +} \ No newline at end of file diff --git a/src/imgs/my/atv1.png b/src/imgs/my/atv1.png new file mode 100644 index 0000000..9493368 Binary files /dev/null and b/src/imgs/my/atv1.png differ diff --git a/src/imgs/my/atv2.png b/src/imgs/my/atv2.png new file mode 100644 index 0000000..68aa099 Binary files /dev/null and b/src/imgs/my/atv2.png differ diff --git a/src/imgs/my/atv3.png b/src/imgs/my/atv3.png new file mode 100644 index 0000000..7f3863f Binary files /dev/null and b/src/imgs/my/atv3.png differ diff --git a/src/imgs/my/atv4.png b/src/imgs/my/atv4.png new file mode 100644 index 0000000..c735ac6 Binary files /dev/null and b/src/imgs/my/atv4.png differ diff --git a/src/imgs/top-bar/topbar-bc.png b/src/imgs/top-bar/topbar-bc.png new file mode 100644 index 0000000..8ca488a Binary files /dev/null and b/src/imgs/top-bar/topbar-bc.png differ