开发Ta的主页

pages/personal/index.js

@@ -29,7 +29,6 @@ Page({
   // 关注
   async setFans() {
     let newLike = !this.data.userInfo.like
-    console.log(newLike);
     await setFans({
       uid: this.data.userInfo.user.uid
     }, 'put')
@@ -41,4 +40,11 @@ Page({
       icon: 'none'
     })
   },
+  toPkPage({
+    currentTarget
+  }) {
+    wx.navigateTo({
+      url: `/pages/pkPage/index?videoId=${currentTarget.dataset.id}`
+    })
+  },
 })

pages/personal/index.less

@@ -1,5 +1,10 @@
 .personalBox {
-  padding: 12rpx 20rpx;
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  box-sizing: border-box;
+  flex-direction: column;
+  padding: 0rpx 20rpx;
 
   .userBox {
     display: flex;
@@ -110,4 +115,78 @@
       }
     }
   }
+
+  .divider {
+    margin: 36rpx 4rpx;
+
+    .title {
+      font-size: 32rpx;
+      font-weight: bold;
+    }
+  }
+
+  .worksList {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+
+    .worksBox {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 26rpx 20rpx;
+      box-sizing: border-box;
+      background-color: white;
+      border-radius: 20rpx;
+      margin-bottom: 20rpx;
+
+      .left {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .cover {
+          width: 144rpx;
+          height: 80rpx;
+          border-radius: 8rpx;
+        }
+
+        .work {
+          margin-left: 26rpx;
+
+          .title {
+            font-size: 32rpx;
+            font-weight: bold;
+            margin-bottom: 10rpx;
+          }
+
+          .statistic {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .playImg {
+              width: 34rpx;
+              height: 28rpx;
+            }
+
+            .num {
+              font-size: 26rpx;
+              color: #666666;
+            }
+          }
+        }
+      }
+
+      .goRead {
+        padding: 6rpx 32rpx 8rpx;
+        color: white;
+        font-size: 32rpx;
+        background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
+        box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
+        border-radius: 50rpx;
+      }
+    }
+  }
 }

pages/personal/index.wxml

@@ -31,4 +31,27 @@
       </view>
     </view>
   </view>
+  <view class="divider">
+    <view class="title">ta的作品</view>
+  </view>
+  <view style="flex: 1;overflow: hidden;">
+    <scroll-view class="worksList" scroll-y="true" enhanced show-scrollbar="{{false}}" scroll-top="{{scrollTop}}"
+      bindscrolltolower='bindscrolltolower'>
+      <view class="worksBox" wx:for="{{16}}" wx:key="index">
+        <view class="left">
+          <image src="https://yfklxt-image.ai160.com/reader/20211012/1634004843742426.jpg" class="cover" />
+          <view class="work">
+            <view class="title">狼来了</view>
+            <view class="statistics">
+              <view class="statistic">
+                <image src="/static/play.png" class="playImg" mode="" />
+                <view class="num">1234</view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="goRead" data-id="103126010" bindtap="toPkPage">挑战PK</view>
+      </view>
+    </scroll-view>
+  </view>
 </view>

pages/personal/index.wxss

@@ -1,5 +1,10 @@
 .personalBox {
-  padding: 12rpx 20rpx;
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  box-sizing: border-box;
+  flex-direction: column;
+  padding: 0rpx 20rpx;
 }
 .personalBox .userBox {
   display: flex;
@@ -93,3 +98,65 @@
   text-align: right;
   border: none;
 }
+.personalBox .divider {
+  margin: 36rpx 4rpx;
+}
+.personalBox .divider .title {
+  font-size: 32rpx;
+  font-weight: bold;
+}
+.personalBox .worksList {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+}
+.personalBox .worksList .worksBox {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 26rpx 20rpx;
+  box-sizing: border-box;
+  background-color: white;
+  border-radius: 20rpx;
+  margin-bottom: 20rpx;
+}
+.personalBox .worksList .worksBox .left {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.personalBox .worksList .worksBox .left .cover {
+  width: 144rpx;
+  height: 80rpx;
+  border-radius: 8rpx;
+}
+.personalBox .worksList .worksBox .left .work {
+  margin-left: 26rpx;
+}
+.personalBox .worksList .worksBox .left .work .title {
+  font-size: 32rpx;
+  font-weight: bold;
+  margin-bottom: 10rpx;
+}
+.personalBox .worksList .worksBox .left .work .statistic {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.personalBox .worksList .worksBox .left .work .statistic .playImg {
+  width: 34rpx;
+  height: 28rpx;
+}
+.personalBox .worksList .worksBox .left .work .statistic .num {
+  font-size: 26rpx;
+  color: #666666;
+}
+.personalBox .worksList .worksBox .goRead {
+  padding: 6rpx 32rpx 8rpx;
+  color: white;
+  font-size: 32rpx;
+  background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
+  box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
+  border-radius: 50rpx;
+}