update: add user basic information section

Author: Lsnsh

src/pages/topic/topic.js

@@ -127,6 +127,7 @@ Page({
  if (res) {
  // 页面onShow时，更新主题部分信息
  if (bIsOnShow) {
+ // TODO: 增量更新评论列表数据
  this.setData({
  'oTopicDetail.tab': res.top ? 'top' : res.good ? 'good' : res.tab,
  'oTopicDetail.visit_count': res.visit_count,

src/pages/user/user.js

@@ -1,28 +1,77 @@
 Page({
  data: {
- sUserName: ''
+ bIsReady: false, // 页面是否准备就绪
+ aTabBar: [
+ {
+ active: true,
+ text: '最近回复'
+ },
+ {
+ text: '最新发布'
+ },
+ {
+ text: '话题收藏'
+ }
+ ],
+ oUserProfile: {}
  },
  onLoad(options) {
  if (options.name) {
  this.fnGetUserProfile(options.name);
- this.setData({
- sUserName: options.name
- });
  }
  },
  // 获取用户资料
  fnGetUserProfile(sUserName) {
+ // 显示标题栏加载效果
+ wx.showNavigationBarLoading();
  wx.dc.user
- .detail({
- urlData: {
- loginname: sUserName
- }
- })
+ .detail(
+ {
+ urlData: {
+ loginname: sUserName
+ }
+ },
+ this.fnUserProfileDataModel
+ )
  .then(res => {
- console.log(res);
+ this.setData({
+ bIsReady: true,
+ oUserProfile: res
+ });
+ // 停止加载效果
+ wx.hideNavigationBarLoading();
  })
  .catch(err => {
- console.log(err);
+ this.setData({
+ bIsReady: true
+ });
+ // 停止加载效果
+ wx.hideNavigationBarLoading();
  });
+ },
+ fnUserProfileDataModel(oData) {
+ let oResult = {
+ ...oData,
+ create_at: wx.moment(oData.create_at).format('YYYY-MM-DD HH:mm:ss')
+ };
+ if (!Array.isArray(oResult.recent_replies)) {
+ oResult.recent_replies = [];
+ }
+ if (!Array.isArray(oResult.recent_topics)) {
+ oResult.recent_topics = [];
+ }
+ oResult.recent_replies = oResult.recent_replies.map(oItem => {
+ return {
+ ...oItem,
+ last_reply_at: wx.moment(oItem.last_reply_at).fromNow()
+ };
+ });
+ oResult.recent_topics = oResult.recent_topics.map(oItem => {
+ return {
+ ...oItem,
+ last_reply_at: wx.moment(oItem.last_reply_at).fromNow()
+ };
+ });
+ return oResult;
  }
 });

src/pages/user/user.wxml

@@ -1,2 +1,22 @@
-<!-- TODO: 完善页面结构与样式 -->
-<view class="ta-c">敬请期待</view>
+<view class="fadein-init {{bIsReady ? 'fadein' : ''}}">
+ <!-- 用户资料 -->
+ <view class="user-profile-wrap ta-c">
+ <image class="user-avatrl mlr-auto rounded-p50" src="{{oUserProfile.avatar_url}}"></image>
+ <view class="user-name color-white">{{oUserProfile.loginname}}</view>
+ <view class="user-github-link">{{oUserProfile.githubUsername}}@github.com</view>
+ <view class="clf" style="font-size: 24rpx;">
+ <view class="fl-left color-white">注册时间：{{oUserProfile.create_at}}</view>
+ <view class="fl-right color-green">积分：{{oUserProfile.score}}</view>
+ </view>
+ </view>
+ <!-- 用户动态 -->
+ <view class="user-activity-wrap">
+ <!-- tabbar -->
+ <view class="tabbar-wrap ta-c">
+ <view class="tab {{item.active ? 'tab-active color-white' : 'color-grey'}}" wx:for="{{aTabBar}}" wx:key="{{index}}">
+ <view>{{item.text}}</view>
+ </view>
+ </view>
+ <!-- TODO: tab对应的列表 -->
+ </view>
+</view>

src/pages/user/user.wxss

@@ -0,0 +1,34 @@
+.user-profile-wrap {
+ padding: 40rpx 30rpx 20rpx 30rpx;
+ background: #333;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+.user-avatrl {
+ display: block;
+ width: 200rpx;
+ height: 200rpx;
+}
+.user-name {
+ margin-top: 10rpx;
+ margin-bottom: 10rpx;
+}
+.user-github-link {
+ margin-bottom: 60rpx;
+ font-size: 28rpx;
+ color: #A2A099;
+ text-decoration: underline;
+}
+/* 用户动态 */
+.tabbar-wrap {
+ display: flex;
+ background: #2e3331;
+}
+.tabbar-wrap .tab {
+ flex: 1;
+ height: 100rpx;
+ line-height: 100rpx;
+ font-size: 28rpx;
+}
+.tabbar-wrap .tab.tab-active {
+ border-bottom: 6rpx solid #80bd01;
+}

src/style/base.wxss

@@ -80,10 +80,6 @@
 /* 谈入谈出 */
 .fadein-init {
  opacity: 0;
- -webkit-transition: opacity 0.2s ease-in;
- -moz-transition: opacity 0.2s ease-in;
- -ms-transition: opacity 0.2s ease-in;
- -o-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
 }
 .fadein {