feat/my

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"
-  }  
+  }
 }

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: {
+
+  }
+})

pages/my/components/custom-top-bar/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

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;
+  }
+}

pages/my/components/custom-top-bar/index.wxml

@@ -0,0 +1,4 @@
+<!--pages/my/components/custom-top-bar/index.wxml-->
+<view class="topbar-container" style="height: {{navBarHeight}}px; background-image: url(../../../../src/imgs/top-bar/topbar-bc.png);">
+  <view class="title" style="padding-top: {{ statusBarHeight }}px; line-height: {{ navBarHeight - statusBarHeight}}px;">我的</view>
+</view>

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
+      })
+    }
+  }
+})

pages/my/components/info-card/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-image": "tdesign-miniprogram/image/image"
+  }
+}

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;
+    }
+  }
+}

pages/my/components/info-card/index.wxml

@@ -0,0 +1,12 @@
+<!--pages/my/components/info-card/index.wxml-->
+<view class="info-card">
+  <t-image src="{{info.imgUrl}}" mode="aspectFill" width="120" height="120" />
+  <view class="atvInfo">
+    <text class="name">{{info.name}}</text>
+    <text class="date">{{info.date}}</text>
+    <view class="status">
+      <text class="{{info.status ? 'finished': 'unfinished'}}">{{info.status ? '已完成' : '待参加'}}</text>
+      <text class="comment" wx:if="{{info.status}}">去评价</text>
+    </view>
+  </view>
+</view>

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();
   }
-})
+})

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"
 }

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;
+  }
+}

pages/my/index.wxml

@@ -1,4 +1,24 @@
-<!--logs.wxml-->
-<view class="container">
-  My Page
+<!--my/index.wxml-->
+<view class="background" style="background-image: url(../../src/imgs/top-bar/topbar-bc.png);">
 </view>
+<custom-top-bar></custom-top-bar>
+<view class="content" style="top: {{navBarHeight}}px;">
+  <view class="myInfo">
+    <t-avatar class="profile" image="{{profile}}" size="64px" />
+    <view class="info">
+      <view class="username">{{username}}</view>
+      <view class="tags">
+        <text wx:for="{{tags}}">{{item}}</text>
+      </view>
+    </view>
+    <t-icon name="edit-1" size="20px" bind:click="onIconTap" />
+  </view>
+  <view class="myAtvs">
+    <t-tabs defaultValue="{{0}}" t-class="custom-tabs">
+      <t-tab-panel label="待参加" value="0" />
+      <t-tab-panel label="已完成" value="1" />
+      <t-tab-panel label="全部活动" value="2" />
+    </t-tabs>
+    <info-card wx:for="{{myAtvs}}" info="{{item}}"></info-card>
+  </view>
+</view>

services/delay.js

@@ -3,4 +3,4 @@ export default function delay(ms = 500) {
   return new Promise(resolve => {
     setTimeout(resolve, ms);
   })
-}
+}