我的作品加评论

component/comment/comment.js

@@ -15,7 +15,6 @@ Component({
                 this.getReply(id)
             }
         }
-
     },
 
     /**

component/videoPreview/index.js

@@ -119,7 +119,10 @@ Component({
             })
         },
         //评论
-        openComment() {},
+        openComment() {
+            this.triggerEvent('openComment', this.properties.videoInfo.userRead.id)
+        },
+
         // 删除
         delete() {
             let {
@@ -130,7 +133,7 @@ Component({
                 content: '作品将被永久删除，无法找回。',
                 confirmText: '确认',
                 cancelText: '取消',
-                success: async (res) => {
+                success: async(res) => {
                     if (res.confirm) {
                         let data = {
                             id,

component/videoPreview/index.wxml

@@ -18,8 +18,7 @@
                 <view class="text">删除</view>
             </view>
             <view class="wH-right-btn" bindtap="setVideoPublic">
-                <image class="img" style="width:30rpx"
-                    src="{{videoInfo.userRead.status==='NORMAL'? '/static/index/unlock.png': '/static/index/lock.png'}}" />
+                <image class="img" style="width:30rpx" src="{{videoInfo.userRead.status==='NORMAL'? '/static/index/unlock.png': '/static/index/lock.png'}}" />
                 <view class="text">
                     {{videoInfo.userRead.status==='NORMAL'? '公开': '私密'}}
                 </view>
@@ -34,23 +33,21 @@
             <image class="cover" src="{{videoInfo.userRead.coverImg}}" />
         </view>
         <!--未播放-->
-        <view class="videoBox" wx:if="{{videoInfo.userRead.status!='CHECK'&&videoInfo.userRead.id!=currentId}}"
-            bindtap="playVideo">
+        <view class="videoBox" wx:if="{{videoInfo.userRead.status!='CHECK'&&videoInfo.userRead.id!=currentId}}" bindtap="playVideo">
             <image class="play" src="/static/image/play-btn.png" />
             <image class="cover" src="{{videoInfo.userRead.coverImg}}" />
         </view>
         <!-- 播放时渲染的video -->
-        <video class="video" id="myVideo" wx:if="{{videoInfo.userRead.id==currentId}}"
-            src="{{videoInfo.userRead.videoPath}}" autoplay="true" object-fit="contain">
+        <video class="video" id="myVideo" wx:if="{{videoInfo.userRead.id==currentId}}" src="{{videoInfo.userRead.videoPath}}" autoplay="true" object-fit="contain">
         </video>
     </view>
     <view class="workFooter">
         <view class="title">{{videoInfo.userRead.title}}</view>
-        <view class="mange" wx:if="{{videoInfo.userRead.status!='CHECK'}}">
+        <!-- <view class="mange" wx:if="{{videoInfo.userRead.status!='CHECK'}}"> -->
+        <view class="mange">
             <view class="mangeL" bindtap="collect">
                 <view class="mangeL-box">
-                    <image src="{{videoInfo.isFavorites ? '/static/index/star_colored.png' : '/static/index/star.png'}}"
-                        mode="" class="icon" />
+                    <image src="{{videoInfo.isFavorites ? '/static/index/star_colored.png' : '/static/index/star.png'}}" mode="" class="icon" />
                     <view class="icon-name">{{item.isFavorites}}</view>
                 </view>
                 <button class="resetBtn mangeL-box" open-type="share" data-info='{{videoInfo}}'>
@@ -60,8 +57,7 @@
             </view>
             <view class="mangeL">
                 <view class="mangeL-box" bindtap="likeVideo">
-                    <image src="{{videoInfo.isLike ? '/static/index/heart_colored.png' : '/static/index/heart.png'}}"
-                        mode="" class="icon" />
+                    <image src="{{videoInfo.isLike ? '/static/index/heart_colored.png' : '/static/index/heart.png'}}" mode="" class="icon" />
                     <view class="icon-name">{{filters.numFilter(videoInfo.userRead.likeAmount)}}</view>
                 </view>
                 <view class="mangeL-box" bindtap="openComment">

pages/userWorks/index.js

@@ -11,12 +11,30 @@ Page({
         list: null,
         currentId: '',
         videoState: true,
+        commentShow: false,
         canvasHidden: false, //设置画板的显示与隐藏
         shareImgPath: '' //用于储存canvas生成的图片
     },
     onLoad(options) {
         this.getSelfRead()
     },
+    // 打开评论
+    openComment({
+        target
+    }) {
+        this.setData({
+            commentShow: true,
+            commentId: target.dataset.id,
+        });
+    },
+    // 评论区点击
+    commentTap: function(e) {
+        if (e.target.dataset.type === 'blank') {
+            this.setData({
+                commentShow: false
+            })
+        }
+    },
     //获取自己作品列表
     async getSelfRead() {
         let list = await getSelfRead()

pages/userWorks/index.json

@@ -1,7 +1,8 @@
 {
     "usingComponents": {
         "videoPreview": "/component/videoPreview/index",
-        "emptyBg": "/component/empty/index"
+        "emptyBg": "/component/empty/index",
+        "Comment": "/component/comment/comment"
     },
     "enablePullDownRefresh": false
 }

pages/userWorks/index.less

@@ -1,3 +1,12 @@
 .worksBox {
-
+    .comment_section {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 9999;
+        background: rgba(0, 0, 0, .3);
+        overflow: hidden;
+    }
 }

pages/userWorks/index.wxml

@@ -2,10 +2,11 @@
     <!-- 作品列表 -->
     <canvas id='share' type="2d"> </canvas>
     <block wx:if="{{list.length>0}}">
-        <videoPreview wx:for="{{list}}" wx:key="index" videoInfo="{{item}}" index='{{index}}' currentId="{{currentId}}"
-            data-id="{{item.userRead.id}}" bind:playVideo="playVideo" bind:changStatus="changStatus"
-            bind:getList="getSelfRead">
+        <videoPreview wx:for="{{list}}" wx:key="index" videoInfo="{{item}}" index='{{index}}' currentId="{{currentId}}" data-id="{{item.userRead.id}}" bind:playVideo="playVideo" bind:changStatus="changStatus" bind:getList="getSelfRead" bind:openComment="openComment">
         </videoPreview>
     </block>
     <emptyBg wx:if="{{list.length==0}}" message='您还没有作品哦，赶快去发表吧！'></emptyBg>
+    <view class="comment_section" catchtouchmove="touchMove" catchtap="commentTap" data-type="blank" wx:if="{{commentShow}}">
+        <Comment commentId="{{commentId}}" bindsendReply="sendReply" />
+    </view>
 </view>

pages/userWorks/index.wxss

@@ -0,0 +1,10 @@
+.worksBox .comment_section {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+}