开发官方资源作品页面视频下方增加分享点赞评论收藏

pages/reading/index.js

@@ -789,6 +789,20 @@ Page({
             }
         })
     },
+    // 点赞
+    async likeVideo() {
+        /*   let {
+              id
+          } = this.data.videoInfoCopy.userRead
+          if (this.data.videoInfoCopy.isLike) {
+              return
+          }
+          await likeVideo(id)
+          this.setData({
+              ['videoInfoCopy.isLike']: true,
+              ['videoInfoCopy.userRead.likeAmount']: this.data.videoInfoCopy.userRead.likeAmount + 1
+          }) */
+    },
     creatShare() {
         return new Promise((resolve, reject) => {
             let video = this.data.videoInfo

pages/reading/index.less

@@ -1,502 +1,540 @@
 .readingBox {
-  position: relative;
-  height: 100vh;
-  width: 100vw;
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-
-  .moreWork {
-    width: 100%;
-    height: 100rpx;
-    padding: 0rpx 26rpx;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 32rpx;
-
-    .right {
-      position: relative;
-      height: 100rpx;
-      display: flex;
-      align-items: center;
-
-      .moreImg {
-        width: 60rpx;
-        height: 60rpx;
-        right: 0px;
-        position: absolute;
-        z-index: 1;
-        border: 6rpx solid white;
-        border-radius: 50%;
-        background-color: #e4e1e1;
-      }
-
-    }
-  }
-
-  .videoBox {
-    position: relative;
-  }
-
-  .poster {
-    top: 0px;
-    left: 0px;
-    position: absolute;
-    width: 100%;
-    height: 422rpx;
-    z-index: 10;
-    pointer-events: auto;
-  }
-
-  .playBtn {
-    position: absolute;
-    width: 100rpx;
-    height: 100rpx;
-    left: 0px;
-    right: 0px;
-    top: 160rpx;
-    margin: 0rpx auto;
-    z-index: 11;
-  }
-
-  .watermark {
-    position: absolute;
-    left: 0px;
-    top: 0px;
-    width: 100%;
-    height: 422rpx;
-    z-index: 10;
-    pointer-events: none;
-  }
-
-  #myVideo {
-    width: 100%;
-    height: 422rpx;
-    pointer-events: auto;
-
-  }
-
-  .audio {
-    position: relative;
-    width: 100%;
-    height: 422rpx;
-
-
-    .audioPlay {
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      margin: auto;
-      background-size: cover;
-      background-color: rgba(0, 0, 0, 0.3);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .audioPlayBg {
-        width: 260rpx;
-        height: 260rpx;
-      }
-
-      .audioPlayZhen {
-        position: absolute;
-        right: 230rpx;
-        top: 98rpx;
-        width: 62rpx;
-        height: 70rpx;
-      }
-
-      .cover {
-        position: absolute;
-        width: 230rpx;
-        height: 230rpx;
-        border-radius: 50%;
-      }
-
-      .circle {
-        animation: identifier 12s infinite linear;
-      }
-    }
-
-    .progressBar {
-      position: absolute;
-      left: 0px;
-      bottom: 0px;
-      width: 100%;
-      padding: 0rpx 24rpx;
-      box-sizing: border-box;
-      font-size: 0rpx;
-      display: flex;
-      align-items: center;
-
-      .audioSwitch {
-        width: 26rpx;
-        height: 34rpx;
-        padding: 10rpx;
-        margin-right: 20rpx;
-      }
-
-      .time {
-        color: white;
-        font-size: 22rpx;
-      }
-
-      .slider {
-        flex: 1;
-      }
-    }
-  }
-
-  .contentBox {
-    flex: 1;
-    width: 100%;
-    overflow: hidden;
     position: relative;
-
-    .articleMask {
-      position: absolute;
-      top: 0rpx;
-      width: 100%;
-      height: 50rpx;
-      z-index: 10;
-      background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0.4))
-    }
-
-    .content {
-      width: 100%;
-      height: 100%;
-      padding: 0rpx 30rpx;
-      padding-bottom: calc(170rpx + env(safe-area-inset-bottom));
-      text-align: center;
-      box-sizing: border-box;
-
-      .row {
-        min-height: 60rpx;
-        padding: 18rpx 0rpx;
-        font-size: 40rpx;
-      }
-
-      .currentRow {
-        font-weight: bold;
-        color: #019e45;
-      }
-
-      .article {
-        height: 2000rpx;
-        background-color: red;
-      }
-    }
-  }
-
-  .controller {
-    width: 100%;
-    height: 110rpx;
-    position: absolute;
-    bottom: 0px;
-    left: 0px;
+    height: 100vh;
+    width: 100vw;
     display: flex;
-    align-items: center;
     flex-direction: column;
-    padding-bottom: env(safe-area-inset-bottom);
-    box-shadow: rgba(14, 30, 37, 0.12) 0px 2rpx 4rpx 0px, rgba(14, 30, 37, 0.32) 0px 2rpx 16rpx 0px;
     background-color: white;
-    z-index: 10;
 
-    .workBox {
-      position: absolute;
-      top: -62rpx;
-      .vipLogo {
-        position: absolute;
-        right: 0px;
-        top: -10rpx;
-        z-index: 1;
-        padding: 4rpx 12rpx;
-        border-radius: 20rpx;
-        font-weight: bold;
-        font-size: 24rpx;
-        background-image: linear-gradient(116deg, #FFF3DF 0%, #FEC98D 95%);
-      }
-
-      .readingNow {
-        border-radius: 50%;
-        width: 114rpx;
-        height: 114rpx;
-        padding: 26rpx;
+    .moreWork {
+        width: 100%;
+        height: 100rpx;
+        padding: 0rpx 26rpx;
         box-sizing: border-box;
-        box-shadow: #4EC4FF 0px 0rpx 14rpx;
-        background-color: #4EC4FF;
-      }
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 32rpx;
+
+        .right {
+            position: relative;
+            height: 100rpx;
+            display: flex;
+            align-items: center;
+
+            .moreImg {
+                width: 60rpx;
+                height: 60rpx;
+                right: 0px;
+                position: absolute;
+                z-index: 1;
+                border: 6rpx solid white;
+                border-radius: 50%;
+                background-color: #e4e1e1;
+            }
 
-      .playImg {
-        border-radius: 50%;
-        width: 114rpx;
-        height: 114rpx;
-        box-shadow: #4EC4FF 0px 0rpx 14rpx;
-        background-color: #4EC4FF;
-      }
+        }
+    }
 
+    .videoBox {
+        position: relative;
     }
 
-    .text {
-      position: absolute;
-      top: 60rpx;
-      font-size: 28rpx;
+    .poster {
+        top: 0px;
+        left: 0px;
+        position: absolute;
+        width: 100%;
+        height: 422rpx;
+        z-index: 10;
+        pointer-events: auto;
     }
 
-    .btnPosition {
-      position: absolute;
-      right: 30rpx;
-      top: 20rpx;
+    .playBtn {
+        position: absolute;
+        width: 100rpx;
+        height: 100rpx;
+        left: 0px;
+        right: 0px;
+        top: 160rpx;
+        margin: 0rpx auto;
+        z-index: 11;
     }
 
-    .stBtn {
-      position: absolute;
-      left: 30rpx;
-      top: 20rpx;
-      padding: 16rpx 0rpx;
-      text-align: center;
-      border-radius: 50rpx;
-      width: 220rpx;
-      font-size: 30rpx;
-      color: white;
-      background-color: #66C5FF;
-      box-shadow: 0 6px 14px 0 rgba(50, 197, 255, 0.65);
+    .watermark {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        width: 100%;
+        height: 422rpx;
+        z-index: 10;
+        pointer-events: none;
     }
-  }
-
-  .playImgBg {
-    position: absolute;
-    width: 134rpx;
-    height: 124rpx;
-    z-index: 1;
-    left: 0px;
-    right: 0px;
-    margin: auto;
-    bottom: calc(56rpx + env(safe-area-inset-bottom));
-    background-color: white;
-    box-shadow: rgba(14, 30, 37, 0.12) 0px 2rpx 4rpx 0px, rgba(14, 30, 37, 0.32) 0px 2rpx 16rpx 0px;
-    border-radius: 50%;
 
-  }
+    #myVideo {
+        width: 100%;
+        height: 422rpx;
+        pointer-events: auto;
 
-  .countDownBox {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(255, 255, 255, 0);
-    z-index: 999;
-
-    .countDown {
-      position: absolute;
-      left: 0rpx;
-      right: 0rpx;
-      top: 30%;
-      margin: auto;
-      width: 293rpx;
-      height: 293rpx;
-      border-radius: 30rpx;
-      color: white;
-      background-color: rgba(0, 0, 0, 0.8);
-      text-align: center;
-      padding: 30rpx 0rpx;
-      box-sizing: border-box;
-
-      .number {
-        font-size: 124rpx;
-        margin-bottom: 6rpx;
-      }
     }
-  }
 
-  .uploadBox {
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.3);
-    z-index: 999;
-
-    .upload {
-      position: absolute;
-      left: 0rpx;
-      right: 0rpx;
-      top: 30%;
-      margin: auto;
-      color: white;
-      text-align: center;
-      box-sizing: border-box;
-      font-size: 32rpx;
-      font-weight: bold;
-      z-index: 998;
-
-      .tipsImg {
-        width: 221rpx;
-        height: 190rpx;
-        margin-right: 30rpx;
-        margin-bottom: 12rpx;
-      }
-
-      .speed {
+    .audio {
         position: relative;
-        margin: 14rpx auto;
-        text-align: center;
-        font-size: 50rpx;
-        animation: jump 1s ease-out infinite;
-      }
-
-      @keyframes jump {
-        0% {
-          opacity: 0;
+        width: 100%;
+        height: 422rpx;
+
+
+        .audioPlay {
+            position: absolute;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            margin: auto;
+            background-size: cover;
+            background-color: rgba(0, 0, 0, 0.3);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .audioPlayBg {
+                width: 260rpx;
+                height: 260rpx;
+            }
+
+            .audioPlayZhen {
+                position: absolute;
+                right: 230rpx;
+                top: 98rpx;
+                width: 62rpx;
+                height: 70rpx;
+            }
+
+            .cover {
+                position: absolute;
+                width: 230rpx;
+                height: 230rpx;
+                border-radius: 50%;
+            }
+
+            .circle {
+                animation: identifier 12s infinite linear;
+            }
         }
 
-        50% {
-          opacity: 1;
+        .progressBar {
+            position: absolute;
+            left: 0px;
+            bottom: 0px;
+            width: 100%;
+            padding: 0rpx 24rpx;
+            box-sizing: border-box;
+            font-size: 0rpx;
+            display: flex;
+            align-items: center;
+
+            .audioSwitch {
+                width: 26rpx;
+                height: 34rpx;
+                padding: 10rpx;
+                margin-right: 20rpx;
+            }
+
+            .time {
+                color: white;
+                font-size: 22rpx;
+            }
+
+            .slider {
+                flex: 1;
+            }
         }
+    }
 
-        100% {
-          opacity: 0;
+    .workFooter {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20rpx 20rpx 10rpx;
+
+        .mangeL-box {
+            position: relative;
+            display: flex;
+            align-items: center;
+            margin-right: 30rpx;
+
+            .noticeTips {
+                position: absolute;
+                right: -38rpx;
+                top: -10rpx;
+                width: 34rpx;
+                padding: 4rpx 0rpx;
+                border-radius: 40rpx;
+                color: white;
+                font-size: 16rpx;
+                text-align: center;
+                background-color: #FF0000;
+            }
+
+            .icon {
+                width: 44rpx;
+                height: 44rpx;
+            }
+
+            .icon-name {
+                margin-left: 8rpx;
+                font-size: 26rpx;
+            }
         }
-      }
     }
-  }
 
-}
-
-.scoreBoxC {
-  flex: 1;
-  width: 100%;
-  overflow: auto;
-  position: relative;
-  padding-bottom: calc(170rpx + env(safe-area-inset-bottom));
+    .contentBox {
+        flex: 1;
+        width: 100%;
+        overflow: hidden;
+        position: relative;
 
-  .scoreBox {
-    width: 610rpx;
-    margin: 80rpx auto 0rpx;
+        .articleMask {
+            position: absolute;
+            top: 0rpx;
+            width: 100%;
+            height: 50rpx;
+            z-index: 10;
+            background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0.4))
+        }
 
-    .lightBox {
-      position: relative;
-      height: 180rpx;
+        .content {
+            width: 100%;
+            height: 100%;
+            padding: 0rpx 30rpx;
+            padding-bottom: calc(170rpx + env(safe-area-inset-bottom));
+            text-align: center;
+            box-sizing: border-box;
+
+            .row {
+                min-height: 60rpx;
+                padding: 18rpx 0rpx;
+                font-size: 40rpx;
+            }
+
+            .currentRow {
+                font-weight: bold;
+                color: #019e45;
+            }
+
+            .article {
+                height: 2000rpx;
+                background-color: red;
+            }
+        }
+    }
 
-      .light {
+    .controller {
+        width: 100%;
+        height: 110rpx;
         position: absolute;
-        width: 360rpx;
-        height: 180rpx;
+        bottom: 0px;
         left: 0px;
-        right: 0px;
-        margin: auto;
-      }
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        padding-bottom: env(safe-area-inset-bottom);
+        box-shadow: rgba(14, 30, 37, 0.12) 0px 2rpx 4rpx 0px, rgba(14, 30, 37, 0.32) 0px 2rpx 16rpx 0px;
+        background-color: white;
+        z-index: 10;
+
+        .workBox {
+            position: absolute;
+            top: -62rpx;
+
+            .vipLogo {
+                position: absolute;
+                right: 0px;
+                top: -10rpx;
+                z-index: 1;
+                padding: 4rpx 12rpx;
+                border-radius: 20rpx;
+                font-weight: bold;
+                font-size: 24rpx;
+                background-image: linear-gradient(116deg, #FFF3DF 0%, #FEC98D 95%);
+            }
+
+            .readingNow {
+                border-radius: 50%;
+                width: 114rpx;
+                height: 114rpx;
+                padding: 26rpx;
+                box-sizing: border-box;
+                box-shadow: #4EC4FF 0px 0rpx 14rpx;
+                background-color: #4EC4FF;
+            }
+
+            .playImg {
+                border-radius: 50%;
+                width: 114rpx;
+                height: 114rpx;
+                box-shadow: #4EC4FF 0px 0rpx 14rpx;
+                background-color: #4EC4FF;
+            }
 
-      .stars {
-        position: absolute;
-        width: 62rpx;
-        height: 62rpx;
-      }
-
-      .stars-1 {
-        top: 64rpx;
-        left: 132rpx;
-      }
-
-      .stars-2 {
-        top: 25rpx;
-        left: 198rpx;
-      }
-
-      .stars-3 {
-        top: 6rpx;
-        left: 276rpx;
-      }
-
-      .stars-4 {
-        top: 25rpx;
-        right: 198rpx;
-      }
-
-      .stars-5 {
-        top: 62rpx;
-        right: 132rpx;
-      }
-    }
+        }
 
-    .score {
-      position: relative;
-      width: 100%;
-      box-sizing: border-box;
-      padding: 70rpx 40rpx 32rpx;
-      border-radius: 18rpx;
-      background-color: white;
-      box-shadow: rgba(255, 255, 255, 0.15) 0px 6px 12px -2px, rgba(255, 255, 255, 0.1) 0px 3px 7px -3px;
+        .text {
+            position: absolute;
+            top: 60rpx;
+            font-size: 28rpx;
+        }
 
-      .avatarBox {
+        .btnPosition {
+            position: absolute;
+            right: 30rpx;
+            top: 20rpx;
+        }
+
+        .stBtn {
+            position: absolute;
+            left: 30rpx;
+            top: 20rpx;
+            padding: 16rpx 0rpx;
+            text-align: center;
+            border-radius: 50rpx;
+            width: 220rpx;
+            font-size: 30rpx;
+            color: white;
+            background-color: #66C5FF;
+            box-shadow: 0 6px 14px 0 rgba(50, 197, 255, 0.65);
+        }
+    }
+
+    .playImgBg {
         position: absolute;
-        top: -72rpx;
+        width: 134rpx;
+        height: 124rpx;
+        z-index: 1;
         left: 0px;
         right: 0px;
-        margin: 0 auto;
-        width: 100rpx;
-        height: 100rpx;
-        padding: 16rpx;
-        border-radius: 50%;
+        margin: auto;
+        bottom: calc(56rpx + env(safe-area-inset-bottom));
         background-color: white;
-        font-size: 0px;
-
-        .avatar {
-          width: 100%;
-          height: 100%;
-          border-radius: 50%;
-        }
-      }
+        box-shadow: rgba(14, 30, 37, 0.12) 0px 2rpx 4rpx 0px, rgba(14, 30, 37, 0.32) 0px 2rpx 16rpx 0px;
+        border-radius: 50%;
 
-      .nickName {
-        font-size: 36rpx;
-        text-align: center;
-      }
+    }
 
-      .totalScore {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-top: 26rpx;
-        font-size: 42rpx;
+    .countDownBox {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(255, 255, 255, 0);
+        z-index: 999;
+
+        .countDown {
+            position: absolute;
+            left: 0rpx;
+            right: 0rpx;
+            top: 30%;
+            margin: auto;
+            width: 293rpx;
+            height: 293rpx;
+            border-radius: 30rpx;
+            color: white;
+            background-color: rgba(0, 0, 0, 0.8);
+            text-align: center;
+            padding: 30rpx 0rpx;
+            box-sizing: border-box;
+
+            .number {
+                font-size: 124rpx;
+                margin-bottom: 6rpx;
+            }
+        }
+    }
 
-        .num {
-          color: #58C5FF;
-          font-size: 42rpx;
+    .uploadBox {
+        position: fixed;
+        top: 0px;
+        left: 0px;
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(0, 0, 0, 0.3);
+        z-index: 999;
+
+        .upload {
+            position: absolute;
+            left: 0rpx;
+            right: 0rpx;
+            top: 30%;
+            margin: auto;
+            color: white;
+            text-align: center;
+            box-sizing: border-box;
+            font-size: 32rpx;
+            font-weight: bold;
+            z-index: 998;
+
+            .tipsImg {
+                width: 221rpx;
+                height: 190rpx;
+                margin-right: 30rpx;
+                margin-bottom: 12rpx;
+            }
+
+            .speed {
+                position: relative;
+                margin: 14rpx auto;
+                text-align: center;
+                font-size: 50rpx;
+                animation: jump 1s ease-out infinite;
+            }
+
+            @keyframes jump {
+                0% {
+                    opacity: 0;
+                }
+
+                50% {
+                    opacity: 1;
+                }
+
+                100% {
+                    opacity: 0;
+                }
+            }
         }
-      }
+    }
 
-      .progressBox {
-        margin-top: 50rpx;
+}
 
-        .row {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          margin-bottom: 42rpx;
+.scoreBoxC {
+    flex: 1;
+    width: 100%;
+    overflow: auto;
+    position: relative;
+    padding-bottom: calc(170rpx + env(safe-area-inset-bottom));
+
+    .scoreBox {
+        width: 610rpx;
+        margin: 80rpx auto 0rpx;
+
+        .lightBox {
+            position: relative;
+            height: 180rpx;
+
+            .light {
+                position: absolute;
+                width: 360rpx;
+                height: 180rpx;
+                left: 0px;
+                right: 0px;
+                margin: auto;
+            }
+
+            .stars {
+                position: absolute;
+                width: 62rpx;
+                height: 62rpx;
+            }
+
+            .stars-1 {
+                top: 64rpx;
+                left: 132rpx;
+            }
+
+            .stars-2 {
+                top: 25rpx;
+                left: 198rpx;
+            }
+
+            .stars-3 {
+                top: 6rpx;
+                left: 276rpx;
+            }
+
+            .stars-4 {
+                top: 25rpx;
+                right: 198rpx;
+            }
+
+            .stars-5 {
+                top: 62rpx;
+                right: 132rpx;
+            }
+        }
 
-          .name {
-            font-size: 32rpx;
-            width: 96rpx;
-          }
-
-          .progress {
-            width: 306rpx;
-            border-radius: 20rpx;
-            overflow: hidden;
-          }
-
-          .scoreInfo {
-            font-size: 27rpx;
-            color: #666666;
-          }
+        .score {
+            position: relative;
+            width: 100%;
+            box-sizing: border-box;
+            padding: 70rpx 40rpx 32rpx;
+            border-radius: 18rpx;
+            background-color: white;
+            box-shadow: rgba(255, 255, 255, 0.15) 0px 6px 12px -2px, rgba(255, 255, 255, 0.1) 0px 3px 7px -3px;
+
+            .avatarBox {
+                position: absolute;
+                top: -72rpx;
+                left: 0px;
+                right: 0px;
+                margin: 0 auto;
+                width: 100rpx;
+                height: 100rpx;
+                padding: 16rpx;
+                border-radius: 50%;
+                background-color: white;
+                font-size: 0px;
+
+                .avatar {
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 50%;
+                }
+            }
+
+            .nickName {
+                font-size: 36rpx;
+                text-align: center;
+            }
+
+            .totalScore {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-top: 26rpx;
+                font-size: 42rpx;
+
+                .num {
+                    color: #58C5FF;
+                    font-size: 42rpx;
+                }
+            }
+
+            .progressBox {
+                margin-top: 50rpx;
+
+                .row {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    margin-bottom: 42rpx;
+
+                    .name {
+                        font-size: 32rpx;
+                        width: 96rpx;
+                    }
+
+                    .progress {
+                        width: 306rpx;
+                        border-radius: 20rpx;
+                        overflow: hidden;
+                    }
+
+                    .scoreInfo {
+                        font-size: 27rpx;
+                        color: #666666;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 
 }

pages/reading/index.wxml

@@ -36,6 +36,32 @@
             <view class="time">{{silderData.endTime}}</view>
         </view>
     </view>
+    <view class="workFooter" wx:if="{{readingType=='public'}}">
+        <button class="resetBtn mangeL-box" open-type="share" data-info='{{videoInfo}}' bindtap="shareVideo"
+            wx:if="{{shareBtn}}">
+            <image src="/static/share.png" mode="" class="icon" />
+            <view class="icon-name">分享</view>
+        </button>
+        <view class="resetBtn mangeL-box" wx:else>
+            <image src="/static/share.png" mode="" class="icon" />
+            <view class="icon-name">分享</view>
+        </view>
+        <view class="mangeL-box" bindtap="collect">
+            <image src="{{videoInfo.isFavorites ? '/static/star_colored.png' : '/static/star.png'}}" mode=""
+                class="icon" />
+            <view class="icon-name">{{videoInfo.isFavorites?'已收藏':'收藏'}}</view>
+        </view>
+        <view class="mangeL-box" bindtap="openComment">
+            <view class="noticeTips" wx:if="{{videoType=='my'&&videoInfo.unReadPostsCount>0}}">
+                +{{videoInfo.unReadPostsCount}}</view>
+            <image src="/static/comment.png" mode="" class="icon" />
+            <view class="icon-name">{{filters.numFilter(videoInfo.userRead.commentAmount)}}</view>
+        </view>
+        <view class="mangeL-box" bindtap="likeVideo">
+            <image src="{{videoInfo.isLike ? '/static/heart_colored.png' : '/static/heart.png'}}" class="icon" />
+            <view class="icon-name">{{filters.numFilter(videoInfo.userRead.likeAmount)}}</view>
+        </view>
+    </view>
     <view class="contentBox" wx:if="{{!readingReset}}">
         <view class="articleMask"></view>
         <scroll-view class="content" scroll-y enhanced show-scrollbar="{{false}}" scroll-top="{{scrollTop}}"

pages/reading/index.wxss

@@ -130,6 +130,38 @@
 .readingBox .audio .progressBar .slider {
   flex: 1;
 }
+.readingBox .workFooter {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20rpx 20rpx 10rpx;
+}
+.readingBox .workFooter .mangeL-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-right: 30rpx;
+}
+.readingBox .workFooter .mangeL-box .noticeTips {
+  position: absolute;
+  right: -38rpx;
+  top: -10rpx;
+  width: 34rpx;
+  padding: 4rpx 0rpx;
+  border-radius: 40rpx;
+  color: white;
+  font-size: 16rpx;
+  text-align: center;
+  background-color: #FF0000;
+}
+.readingBox .workFooter .mangeL-box .icon {
+  width: 44rpx;
+  height: 44rpx;
+}
+.readingBox .workFooter .mangeL-box .icon-name {
+  margin-left: 8rpx;
+  font-size: 26rpx;
+}
 .readingBox .contentBox {
   flex: 1;
   width: 100%;