update: add recent reply list in the user profile

Author: Lsnsh

src/pages/user/user.js

@@ -1,6 +1,7 @@
 Page({
   data: {
     bIsReady: false, // 页面是否准备就绪
+    nActiveTabIndex: 0,
     aTabBar: [
       {
         active: true,
@@ -20,6 +21,13 @@ Page({
       this.fnGetUserProfile(options.name);
     }
   },
+  // 点击切换tab
+  fnClickSwitchTab(e) {
+    let oDataSet = e.currentTarget.dataset;
+    this.setData({
+      nActiveTabIndex: oDataSet.index
+    });
+  },
   // 获取用户资料
   fnGetUserProfile(sUserName) {
     // 显示标题栏加载效果

src/pages/user/user.wxml

@@ -13,10 +13,43 @@
   <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 
+        class="tab {{index === nActiveTabIndex ? 'tab-active color-white' : 'color-grey'}}"
+        wx:for="{{aTabBar}}"
+        wx:key="{{index}}"
+        data-index="{{index}}"
+        bindtap="fnClickSwitchTab"
+      >
         <view>{{item.text}}</view>
       </view>
     </view>
-    <!-- TODO: tab对应的列表 -->
+    <!-- 最近回复列表 -->
+    <block wx:if="{{nActiveTabIndex === 0}}">
+      <view class="recent-reply-list" >
+        <!-- TODO: 点击头像跳转用户资料页，点击文字跳转话题详情 -->
+        <view class="reply-item" wx:for="{{oUserProfile.recent_replies}}" wx:key="{{index}}">
+          <image class="reply-left inbl vtal-top rounded-p50" src="{{item.author.avatar_url}}"/>
+          <view class="reply-right inbl vtal-top">
+            <view class="reply-topic-title text-ellipsis">{{item.title}}</view>
+            <view class="clf color-grey">
+              <view class="fl-left">{{item.author.loginname}}</view>
+              <view class="fl-right">{{item.last_reply_at}}</view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </block>
+    <!-- TODO: 最新发布列表 -->
+    <block wx:elif="{{nActiveTabIndex === 1}}">
+      <view class="recent-topic-list ta-c">
+        <view>敬请期待</view>
+      </view>
+    </block>
+    <!-- TODO: 话题收藏列表 -->
+    <block wx:elif="{{nActiveTabIndex === 2}}">
+      <view class="topic-collection-list ta-c">
+        <view>敬请期待</view>
+      </view>
+    </block>
   </view>
 </view>

src/pages/user/user.wxss

@@ -28,7 +28,43 @@
   height: 100rpx;
   line-height: 100rpx;
   font-size: 28rpx;
+  border-bottom: 6rpx solid #2e3331;
+  box-sizing: border-box;
 }
 .tabbar-wrap .tab.tab-active {
-  border-bottom: 6rpx solid #80bd01;
+  border-color: #80bd01;
+}
+/* 最近回复列表 */
+.recent-reply-list {
+  padding: 30rpx 20rpx;
+}
+.reply-item {
+  padding: 30rpx;
+  margin-bottom: 10rpx;
+  /* border-bottom: 0.01rem solid #7c7c7c; */
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 8rpx;
+}
+.reply-left {
+  width: 100rpx;
+  height: 100rpx;
+}
+.reply-right {
+  width: 520rpx;
+  margin-left: 30rpx;
+  font-size: 28rpx;
+}
+.reply-topic-title {
+  margin-bottom: 20rpx;
+  font-size: 32rpx;
+}
+/* 最近话题列表 */
+.recent-topic-list {
+  padding: 30rpx 20rpx;
+  font-size: 28rpx;
+}
+/* 话题收藏列表 */
+.topic-collection-list  {
+  padding: 30rpx 20rpx;
+  font-size: 28rpx;
 }

src/style/base.wxss

@@ -77,6 +77,12 @@
 .color-green {
   color: #80bd01;
 }
+/* 文本溢出隐藏 */
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 /* 谈入谈出 */
 .fadein-init {
   opacity: 0;