开发我的作品页面

api/video.js

@@ -0,0 +1,8 @@
+import {
+    request
+} from "../utils/request";
+
+module.exports = {
+    //设置视频状态。比如删除。禁用
+    setVideoStatus: data => request('/userRead', 'put', data),
+}

pages/activity/index/index.wxml

@@ -1,114 +1,128 @@
 <!--pages/activity/index/index.wxml-->
 <view class="activity-index">
-  <image class="activity-bg" src="http://reader-wx.ai160.com/images/reader/activity/bg.jpg" mode="scaleToFill"></image>
-  <view class="rule" bindtap="rule">
-    <image src="../../../static/activity/rule-img.png"></image>
-  </view>
-  <view class="strategy" bindtap="strategy">
-    <image src="../../../static/activity/strategy-img.png"></image>
-  </view>
-  <!-- <view class="strategy" bindtap="getPrice">
+    <image class="activity-bg" src="http://reader-wx.ai160.com/images/reader/activity/bg.jpg" mode="scaleToFill">
+    </image>
+    <view class="rule" bindtap="rule">
+        <image src="../../../static/activity/rule-img.png"></image>
+    </view>
+    <view class="strategy" bindtap="strategy">
+        <image src="../../../static/activity/strategy-img.png"></image>
+    </view>
+    <!-- <view class="strategy" bindtap="getPrice">
     <image src="../../../static/activity/get_price.png"></image>
   </view> -->
-  <view class="activity-works">
-    <image class="swiper-bg" src="http://reader-wx.ai160.com/images/reader/activity/swiper-bg.png" mode="scaleToFill"></image>
-    <text class="gradeText">{{grades}}朗读范文素材</text>
-    <view class="activity-works-swiper">
-      <swiper indicator-dots="true" autoplay="false" circular="true" previous-margin="66rpx" next-margin="56rpx" indicator-color="#BABABA" indicator-active-color="#fff">
-        <block wx:for="{{activityReadData}}" wx:key="*this">
-          <swiper-item>
-            <view class="swiper-item-view" bindtap="goToReading" data-id="{{item.id}}">
-              <image src="{{item.iconImg}}" mode="scaleToFill"></image>
-            </view>
-          </swiper-item>
-        </block>
-      </swiper>
-    </view>
-  </view>
-  <view class="activity-ranking">
-    <view class="activity-ranking-tab">
-      <!-- <image class="tab-bg" src="../../../static/activity/tab-bg.png" mode="scaleToFill"></image> -->
-      <image  class="select-bg {{selectInd === 0 ? 'left' : 'right'}}" src="{{selectBg[selectInd]}}" mode="scaleToFill"></image>
-      <text class="left {{selectInd === 0 && 'select'}}" data-index="0" bindtap="tabSelect">人气榜 TOP100</text>
-      <text class="right {{selectInd === 1 && 'select'}}" data-index="1" bindtap="tabSelect">我的参赛作品</text>
+    <view class="activity-works">
+        <image class="swiper-bg" src="http://reader-wx.ai160.com/images/reader/activity/swiper-bg.png"
+            mode="scaleToFill"></image>
+        <text class="gradeText">{{grades}}朗读范文素材</text>
+        <view class="activity-works-swiper">
+            <swiper indicator-dots="true" autoplay="false" circular="true" previous-margin="66rpx" next-margin="56rpx"
+                indicator-color="#BABABA" indicator-active-color="#fff">
+                <block wx:for="{{activityReadData}}" wx:key="*this">
+                    <swiper-item>
+                        <view class="swiper-item-view" bindtap="goToReading" data-id="{{item.id}}">
+                            <image src="{{item.iconImg}}" mode="scaleToFill"></image>
+                        </view>
+                    </swiper-item>
+                </block>
+            </swiper>
+        </view>
     </view>
-    <view class="activity-ranking-container" style="background: #fff;" hidden="{{selectInd === 1}}">
-      <view class="activity-ranking-title">
-        <text>排名</text>
-        <text class="midTitle">昵称</text>
-        <text>人气值</text>
-      </view>
-      <view class="scroll-view" style="{{myHotAmountData.activityJoinUser ? 'margin-bottom: 150rpx;' : ''}}">
-        <view class="scroll-view-item" wx:for="{{hotAmountTopData}}" wx:for-index="index" wx:key="*this">
-          <image wx:if="{{sortImg[index]}}" class="ranking-number-img" src="{{sortImg[index]}}"></image>
-          <text wx:else class="ranking-number">{{index + 1}}</text>
-          <view class="ranking-message">
-            <view class="reanking-message-head">
-              <image class="haed-url" bindtap="headTap" src="{{item.user.avatar}}" data-uid="{{item.user.uid}}"></image>
-              <image class="follow-url" src="{{item.isFans ? '' : '../../../static/activity/follow.png'}}" bindtap="{{!item.isFans && 'follow'}}" data-uid="{{item.user.uid}}" data-fans="{{item.isFans}}"></image>
+    <view class="activity-ranking">
+        <view class="activity-ranking-tab">
+            <!-- <image class="tab-bg" src="../../../static/activity/tab-bg.png" mode="scaleToFill"></image> -->
+            <image class="select-bg {{selectInd === 0 ? 'left' : 'right'}}" src="{{selectBg[selectInd]}}"
+                mode="scaleToFill"></image>
+            <text class="left {{selectInd === 0 && 'select'}}" data-index="0" bindtap="tabSelect">人气榜 TOP100</text>
+            <text class="right {{selectInd === 1 && 'select'}}" data-index="1" bindtap="tabSelect">我的参赛作品</text>
+        </view>
+        <view class="activity-ranking-container" style="background: #fff;" hidden="{{selectInd === 1}}">
+            <view class="activity-ranking-title">
+                <text>排名</text>
+                <text class="midTitle">昵称</text>
+                <text>人气值</text>
             </view>
-            <view class="reanking-message-name">
-              <text>{{item.user.wechatName}}</text>
-              <view class="operation">
-                <view class="forward">
-                  <image src="../../../static/activity/forward1.png"></image>
-                  {{item.activityJoinUser.shareAmount}}
-                </view>
-                <view class="like">
-                  <image src="../../../static/activity/like1.png"></image>
-                  {{item.activityJoinUser.likeAmount}}
+            <view class="scroll-view" style="{{myHotAmountData.activityJoinUser ? 'margin-bottom: 150rpx;' : ''}}">
+                <view class="scroll-view-item" wx:for="{{hotAmountTopData}}" wx:for-index="index" wx:key="*this">
+                    <image wx:if="{{sortImg[index]}}" class="ranking-number-img" src="{{sortImg[index]}}"></image>
+                    <text wx:else class="ranking-number">{{index + 1}}</text>
+                    <view class="ranking-message">
+                        <view class="reanking-message-head">
+                            <image class="haed-url" bindtap="headTap" src="{{item.user.avatar}}"
+                                data-uid="{{item.user.uid}}"></image>
+                            <image class="follow-url" src="{{item.isFans ? '' : '../../../static/activity/follow.png'}}"
+                                bindtap="{{!item.isFans && 'follow'}}" data-uid="{{item.user.uid}}"
+                                data-fans="{{item.isFans}}"></image>
+                        </view>
+                        <view class="reanking-message-name">
+                            <text>{{item.user.wechatName}}</text>
+                            <view class="operation">
+                                <view class="forward">
+                                    <image src="../../../static/activity/forward1.png"></image>
+                                    {{item.activityJoinUser.shareAmount}}
+                                </view>
+                                <view class="like">
+                                    <image src="../../../static/activity/like1.png"></image>
+                                    {{item.activityJoinUser.likeAmount}}
+                                </view>
+                                <view class="comment">
+                                    <image src="../../../static/activity/comment1.png"></image>
+                                    {{item.activityJoinUser.commentAmount}}
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                    <view class="popularity">
+                        <!-- <image src="../../../static/activity/popularity1.png"></image> -->
+                        {{item.activityJoinUser.hotAmount}}
+                    </view>
                 </view>
-                <view class="comment">
-                  <image src="../../../static/activity/comment1.png"></image>
-                  {{item.activityJoinUser.commentAmount}}
-                </view>
-              </view>
             </view>
-          </view>
-          <view class="popularity">
-            <!-- <image src="../../../static/activity/popularity1.png"></image> -->
-            {{item.activityJoinUser.hotAmount}}
-          </view>
         </view>
-      </view>
-    </view>
-    <view class="activity-my-ranking" hidden="{{selectInd === 1 || !myHotAmountData.activityJoinUser}}">
-        <text class="ranking-number" style="color: #fff;">{{myHotAmountData.activityJoinUser.order}}</text>
-        <view class="ranking-message">
-          <view class="reanking-message-head">
-            <image class="haed-url" src="{{myHotAmountData.user.avatar}}"></image>
-          </view>
-          <view class="reanking-message-name" style="color: #fff;">
-            <text style="color: #fff;">{{myHotAmountData.user.wechatName}}</text>
-            <view class="operation" style="color: #fff;">
-                <view class="forward">
-                  <image src="../../../static/activity/forward.png"></image>
-                  {{myHotAmountData.activityJoinUser.shareAmount}}
+        <view class="activity-my-ranking" hidden="{{selectInd === 1 || !myHotAmountData.activityJoinUser}}">
+            <text class="ranking-number" style="color: #fff;">{{myHotAmountData.activityJoinUser.order}}</text>
+            <view class="ranking-message">
+                <view class="reanking-message-head">
+                    <image class="haed-url" src="{{myHotAmountData.user.avatar}}"></image>
                 </view>
-                <view class="like">
-                  <image src="../../../static/activity/like.png"></image>
-                  {{myHotAmountData.activityJoinUser.likeAmount}}
-                </view>
-                <view class="comment">
-                  <image src="../../../static/activity/comment.png"></image>
-                  {{myHotAmountData.activityJoinUser.commentAmount}}
+                <view class="reanking-message-name" style="color: #fff;">
+                    <text style="color: #fff;">{{myHotAmountData.user.wechatName}}</text>
+                    <view class="operation" style="color: #fff;">
+                        <view class="forward">
+                            <image src="../../../static/activity/forward.png"></image>
+                            {{myHotAmountData.activityJoinUser.shareAmount}}
+                        </view>
+                        <view class="like">
+                            <image src="../../../static/activity/like.png"></image>
+                            {{myHotAmountData.activityJoinUser.likeAmount}}
+                        </view>
+                        <view class="comment">
+                            <image src="../../../static/activity/comment.png"></image>
+                            {{myHotAmountData.activityJoinUser.commentAmount}}
+                        </view>
+                    </view>
                 </view>
             </view>
-          </view>
+            <view class="popularity" style="color: #fff;">
+                <!-- <image src="../../../static/activity/popularity.png"></image> -->
+                {{myHotAmountData.activityJoinUser.hotAmount}}
+            </view>
         </view>
-        <view class="popularity" style="color: #fff;">
-          <!-- <image src="../../../static/activity/popularity.png"></image> -->
-          {{myHotAmountData.activityJoinUser.hotAmount}}
+        <view class="my-activity-read" hidden="{{selectInd === 0}}">
+            <VideoSwiper wx:if="{{activityMyReadData.length > 0}}" class="video-swiper"
+                video-list="{{activityMyReadData}}" nextMargin="{{nextMargin}}" isSwiper="{{isSwiper}}"
+                noMoreWork="{{noMoreWork}}" ifHeadTap="{{true}}" binddelHideMyWork="delHideMyWork"
+                bindcollectTap="collectTap" bindlikeTap="likeTap" bindopenComment="openComment"
+                bindopenShare="openShare" />
+            <image class="no_works" wx:if="{{activityMyReadData.length === 0}}"
+                src="http://reader-wx.ai160.com/images/reader/activity/no_works.png" />
+        </view>
+        <view class="comment_section" catchtap="commentTap" data-type="blank" wx:if="{{commentShow}}">
+            <Comment data-type="list" commentId="{{commentId}}" commentNum="{{commentNum}}" inputValue="{{inputValue}}"
+                bindsendReply="sendReply" />
         </view>
     </view>
-    <view class="my-activity-read" hidden="{{selectInd === 0}}">
-      <VideoSwiper wx:if="{{activityMyReadData.length > 0}}" class="video-swiper" video-list="{{activityMyReadData}}" nextMargin="{{nextMargin}}" isSwiper="{{isSwiper}}" noMoreWork="{{noMoreWork}}" ifHeadTap="{{true}}" binddelHideMyWork="delHideMyWork" bindcollectTap="collectTap" bindlikeTap="likeTap" bindopenComment="openComment" bindopenShare="openShare"/>
-      <image class="no_works" wx:if="{{activityMyReadData.length === 0}}" src="http://reader-wx.ai160.com/images/reader/activity/no_works.png"/>
-    </view>
-    <view class="comment_section" catchtap="commentTap" data-type="blank" wx:if="{{commentShow}}">
-      <Comment data-type="list" commentId="{{commentId}}" commentNum="{{commentNum}}" inputValue="{{inputValue}}" bindsendReply="sendReply" />
-    </view>
-  </view>
 
 </view>
-<canvas canvas-id="myCanvas" style="width:300px; height: 525px; position: absolute; left: -999rpx; top: -9999rpx;"></canvas>
+<canvas canvas-id="myCanvas"
+    style="width:300px; height: 525px; position: absolute; left: -999rpx; top: -9999rpx;"></canvas>

pages/my/index.wxml

@@ -1,5 +1,4 @@
 <wxs src="../../utils/filter.wxs" module="filters" />
-
 <view class="container">
     <!-- 导航栏 -->
     <view class="top-tab">
@@ -32,13 +31,13 @@
             </view>
             <view class="uRBtm">
                 <view class="count countFirst">
-                    作品<text class="countNum textOver">{{userInfo.readAmount || 0}}</text>
+                    作品<text class="countNum textOver">{{filters.numFilter(userInfo.readAmount)|| 0}}</text>
                 </view>
                 <view class="count">
-                    粉丝<text class="countNum textOver">{{userInfo.fansAmount || 0}}</text>
+                    粉丝<text class="countNum textOver">{{filters.numFilter(userInfo.fansAmount)|| '0'}}</text>
                 </view>
                 <view class="count countEnd">
-                    播放<text class="countNum textOver">{{userInfo.playAmount || 0}}</text>
+                    播放<text class="countNum textOver">{{filters.numFilter(userInfo.playAmount) || 0}}</text>
                 </view>
             </view>
         </view>

pages/userWorks/index.js

@@ -1,6 +1,9 @@
 import {
     getSelfRead
 } from '~/api/user'
+import {
+    setVideoStatus
+} from '~/api/video'
 let videoContext = null
 Page({
 
@@ -35,12 +38,7 @@ Page({
     },
     //获取自己作品列表
     async getSelfRead() {
-        let params = {
-            uid: wx.getStorageSync('uid'),
-            pageNo: 1,
-            pageSize: 99
-        }
-        let list = await getSelfRead(params)
+        let list = await getSelfRead()
         this.setData({
             list
         })
@@ -55,6 +53,7 @@ Page({
             currentId: currentTarget.dataset.id
         })
     },
+    /* 改变视频播放状态 ,暂时先不用*/
     changeVideoState() {
         this.videoContext = wx.createVideoContext('myVideo')
         console.log(this.data.videoState);
@@ -68,6 +67,49 @@ Page({
             videoState: !videoState
         })
     },
+    delete({
+        currentTarget
+    }) {
+        wx.showModal({
+            title: '确认删除吗？',
+            content: '作品将被永久删除，无法找回。',
+            confirmText: '确认',
+            cancelText: '取消',
+            success: async (res) => {
+                if (res.confirm) {
+                    let data = {
+                        id: currentTarget.dataset.id,
+                        status: 'DEL'
+                    }
+                    await setVideoStatus(data)
+                    wx.showToast({
+                        title: '删除成功！',
+                        icon: "none"
+                    })
+                    this.getSelfRead()
+                }
+            }
+        })
+    },
+    // 设置视频公开还是隐私
+    async setVideoPublic({
+        currentTarget
+    }) {
+        let info = currentTarget.dataset.info
+        let data = {
+            id: info.id,
+            status: info.status === 'NORMAL' ? 'DISABLE' : 'NORMAL'
+        }
+        let res = await setVideoStatus(data)
+        this.getSelfRead()
+        if (res.status == 'DISABLE') {
+            wx.showToast({
+                title: '该作品仅自己可见',
+                icon: 'none',
+                duration: 2000
+            })
+        }
+    },
     /**
      * 页面上拉触底事件的处理函数
      */

pages/userWorks/index.less

@@ -1,5 +1,6 @@
 .worksBox {
     .work {
+        margin-bottom: 12rpx;
         background-color: white;
 
         .workHead {
@@ -67,9 +68,25 @@
                 width: 100%;
                 height: 422rpx;
 
-                .cover {
+                .maskBg {
+                    position: absolute;
+                    top: 0px;
+                    left: 0px;
                     width: 100%;
                     height: 100%;
+                    background-color: rgba(0, 0, 0, 0.5);
+                }
+
+                .maskImg {
+                    z-index: 10;
+                    width: 215rpx;
+                    height: 215rpx;
+                    position: absolute;
+                    top: 0px;
+                    right: 0px;
+                    left: 0px;
+                    bottom: 0px;
+                    margin: auto;
                 }
 
                 .play {
@@ -80,6 +97,11 @@
                     height: 90rpx;
                     transform: translate(-50%);
                 }
+
+                .cover {
+                    width: 100%;
+                    height: 100%;
+                }
             }
 
             .video {

pages/userWorks/index.wxml

@@ -1,3 +1,4 @@
+<wxs src="../../utils/filter.wxs" module="filters" />
 <view class="worksBox">
     <!-- 作品列表 -->
     <view class="works">
@@ -6,20 +7,20 @@
                 <view class="wH-left">
                     <image src="{{item.user.avatar}}" class="avatar" mode="" />
                     <view class="wH-left-user">
-                        <view class="nickname textOver">{{item.user.nickName}}</view>
+                        <view class="nickname textOver">{{item.user.wechatName}}</view>
                         <view class="time">发布时间：{{item.userRead.day}}</view>
                     </view>
                 </view>
-                <view class="wH-right">
+                <view class="wH-right" wx:if="{{item.userRead.status!='CHECK'}}">
                     <view class="wH-right-btn">
                         <image class="img" src="/static/index/down.png" mode="" />
                         <view class="text">下载</view>
                     </view>
-                    <view class="wH-right-btn">
-                        <image class="img" style="width:24rpx" src="/static/index/delete.png" mode="" />
+                    <view class="wH-right-btn" bindtap="delete" data-id="{{item.userRead.id}}">
+                        <image class=" img" style="width:24rpx" src="/static/index/delete.png" mode="" />
                         <view class="text">删除</view>
                     </view>
-                    <view class="wH-right-btn">
+                    <view class="wH-right-btn" bindtap="setVideoPublic" data-info="{{item.userRead}}">
                         <image class="img" style="width:30rpx"
                             src="{{item.userRead.status==='NORMAL'? '/static/index/unlock.png': '/static/index/lock.png'}}" />
                         <view class="text">
@@ -29,20 +30,26 @@
                 </view>
             </view>
             <view class="workContent">
-                <view class="videoBox" wx:if="{{item.userRead.id!=currentId}}" catchtap="playVideo"
-                    data-id="{{item.userRead.id}}">
-                    <!-- <image class="video_item_dialog_img" src="/static/index/checking.png"
-                        mode="aspectFit|aspectFill|widthFix" /> -->
+                <!-- 审核中遮罩 -->
+                <view class="videoBox" wx:if="{{item.userRead.status=='CHECK'&&item.userRead.id!=currentId}}">
+                    <view class="maskBg"></view>
+                    <image class="maskImg" src="/static/index/checking.png" />
+                    <image class="cover" src="{{item.userRead.coverImg}}" />
+                </view>
+                <!--未播放-->
+                <view class="videoBox" wx:if="{{item.userRead.status!='CHECK'&&item.userRead.id!=currentId}}"
+                    catchtap="playVideo" data-id="{{item.userRead.id}}">
                     <image class="play" src="/static/image/play-btn.png" />
                     <image class="cover" src="{{item.userRead.coverImg}}" />
                 </view>
-                <video class="video" id="myVideo" wx:else src="{{item.userRead.videoPath}}" autoplay="true"
-                    object-fit="contain" bindtap="changeVideoState">
+                <!-- 播放时渲染的video -->
+                <video class="video" id="myVideo" wx:if="{{item.userRead.id==currentId}}"
+                    src="{{item.userRead.videoPath}}" autoplay="true" object-fit="contain">
                 </video>
             </view>
             <view class="workFooter">
                 <view class="title">{{item.userRead.title}}</view>
-                <view class="mange">
+                <view class="mange" wx:if="{{item.userRead.status!='CHECK'}}">
                     <view class="mangeL">
                         <view class="mangeL-box">
                             <image src="/static/image/no_collect.png" mode="" class="icon" />
@@ -58,11 +65,11 @@
                             <image
                                 src="{{item.userRead.isLike ? '/static/index/heart_colored.png' : '/static/index/heart.png'}}"
                                 mode="" class="icon" />
-                            <view class="icon-name">13313</view>
+                            <view class="icon-name">{{filters.numFilter(item.userRead.likeAmount)}}</view>
                         </view>
                         <view class="mangeL-box">
                             <image src="/static/index/comment.png" mode="" class="icon" />
-                            <view class="icon-name">1233</view>
+                            <view class="icon-name">{{filters.numFilter(item.userRead.commentAmount)}}</view>
                         </view>
                     </view>
                 </view>

pages/userWorks/index.wxss

@@ -1,4 +1,5 @@
 .worksBox .work {
+  margin-bottom: 12rpx;
   background-color: white;
 }
 .worksBox .work .workHead {
@@ -56,9 +57,24 @@
   width: 100%;
   height: 422rpx;
 }
-.worksBox .work .workContent .videoBox .cover {
+.worksBox .work .workContent .videoBox .maskBg {
+  position: absolute;
+  top: 0px;
+  left: 0px;
   width: 100%;
   height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.worksBox .work .workContent .videoBox .maskImg {
+  z-index: 10;
+  width: 215rpx;
+  height: 215rpx;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  left: 0px;
+  bottom: 0px;
+  margin: auto;
 }
 .worksBox .work .workContent .videoBox .play {
   position: absolute;
@@ -68,6 +84,10 @@
   height: 90rpx;
   transform: translate(-50%);
 }
+.worksBox .work .workContent .videoBox .cover {
+  width: 100%;
+  height: 100%;
+}
 .worksBox .work .workContent .video {
   width: 100%;
   height: 422rpx;

utils/filter.wxs

@@ -27,7 +27,15 @@ function gradeFilter(grade) {
     }
     return gradeObj[grade]
 }
+// 数字满万补w
+function numFilter(num) {
+    if (!num || num < 10000) {
+        return num
+    }
+    return Math.floor(num / 100) / 100 + 'w'
+}
 module.exports = {
     formatDate: formatDate,
-    gradeFilter: gradeFilter
+    gradeFilter: gradeFilter,
+    numFilter: numFilter
 }