开发评论组件

api/video.js

@@ -1,12 +1,20 @@
 import {
-    request
+  request
 } from "../utils/request";
 
 module.exports = {
-    //设置视频状态。比如删除。禁用
-    setVideoStatus: data => request('/userRead', 'put', data),
-    // 作品点赞
-    likeVideo: data => request(`/userRead/like/${data}`, 'get'),
-    // 收藏
-    collectVideo: data => request('/favorites', 'post', data)
+  //设置视频状态。比如删除。禁用
+  setVideoStatus: data => request('/userRead', 'put', data),
+  // 作品点赞
+  likeVideo: data => request(`/userRead/like/${data}`, 'get'),
+  // 收藏
+  collectVideo: data => request('/favorites', 'post', data),
+  // 获取评论
+  getComment: data => request('/posts/reply', 'get', data),
+  // 发布评论
+  postReply: data => request('/posts', 'post', data),
+  // 回复评论
+  ReplyComment: data => request('/reply', 'post', data),
+  // 评论点赞
+  likeReply: data => request(`/posts/like/${data}`, 'get'),
 }

app.json

@@ -1,5 +1,6 @@
 {
   "pages": [
+    "pages/userWorks/index",
     "pages/my/index",
     "pages/logs/logs",
     "pages/index/index"

components/comment/index.js

@@ -0,0 +1,129 @@
+import {
+  getComment,
+  postReply,
+  ReplyComment,
+  likeReply
+} from '~/api/video'
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    show: false,
+    commentId: '',
+    totalSize: 0,
+    list: [],
+    detailDesc: '',
+    postId: '',
+    postIndex: '',
+    ifGetFocus: false,
+    replyType: 'works', // 回复类型，works是回复作品，comment是回复评论
+  },
+  methods: {
+    open(columnId) {
+      this.setData({
+        show: true,
+        columnId,
+      })
+      this.getComment()
+    },
+    close() {
+      this.setData({
+        show: false,
+        commentId: '',
+        totalSize: 0,
+        list: [],
+        detailDesc: '',
+        replyType: 'works',
+        postId: null,
+        postIndex: null,
+        ifGetFocus: false,
+      })
+    },
+    async getComment() {
+      let params = {
+        columnId: this.data.columnId,
+        pageNo: 1,
+        pageSize: 10000
+      }
+      let {
+        totalSize,
+        list
+      } = await getComment(params)
+      this.setData({
+        totalSize,
+        list
+      })
+    },
+    bindKeyInput(e) {
+      this.setData({
+        detailDesc: e.detail.value
+      })
+    },
+    // 评论作品
+    async sendReply() {
+      if (!this.data.detailDesc) {
+        return
+      }
+      if (this.data.replyType == 'works') {
+        let data = {
+          columnId: this.data.columnId,
+          detailDesc: this.data.detailDesc,
+        }
+        await postReply(data)
+      } else {
+        let data = {
+          postsId: this.data.postId,
+          content: this.data.detailDesc,
+        }
+        await ReplyComment(data)
+      }
+      this.setData({
+        detailDesc: '',
+        replyType: 'works'
+      })
+      this.getComment()
+    },
+    async ReplyComment({
+      currentTarget
+    }) {
+      let postId = currentTarget.dataset.id
+      let index = currentTarget.dataset.index
+      this.setData({
+        postId: postId,
+        replyType: 'comment',
+        ifGetFocus: true,
+        postIndex: index
+      })
+    },
+    cancelId() {
+      this.setData({
+        replyType: 'works',
+        postId: null,
+        postIndex: null,
+        ifGetFocus: false,
+      })
+    },
+    // 评论点赞
+    async setLike({
+      currentTarget
+    }) {
+      let postId = currentTarget.dataset.id
+      let index = currentTarget.dataset.index
+      let res = await likeReply(postId)
+      const str = `list[${index}].likeCount`;
+      const strImg = `list[${index}].isLike`;
+      this.setData({
+        [str]: res,
+        [strImg]: true
+      })
+    }
+  }
+})

components/comment/index.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "usingComponents": {},
+  "styleIsolation": "apply-shared"
+}

components/comment/index.less

@@ -0,0 +1,157 @@
+.commentBox {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  overflow: hidden;
+
+  .commentBg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .3);
+  }
+
+  .comment {
+    position: absolute;
+    left: 0;
+    bottom: 0px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+    height: 850rpx;
+    background-color: white;
+    border-top-left-radius: 25rpx;
+    border-top-right-radius: 25rpx;
+
+    .header {
+      position: relative;
+      padding: 24rpx;
+
+      .hr {
+        position: absolute;
+        right: 26rpx;
+        top: -4rpx;
+        font-size: 54rpx;
+        color: #333333;
+      }
+    }
+
+    .body {
+      flex: 1;
+      overflow-y: auto;
+
+      .body-box {
+        padding: 0rpx 22rpx;
+
+        .content {
+          padding: 34rpx 0rpx;
+          display: flex;
+          border-bottom: 1px solid #97979783;
+
+          .c-avatar {
+            width: 96rpx;
+            height: 96rpx;
+            border-radius: 50%;
+            margin-right: 20rpx;
+            background: rgb(216, 216, 216);
+          }
+
+          .c-right {
+            flex: 1;
+
+            .nickName {
+              font-size: 30rpx;
+              color: rgba(0, 0, 0, 0.60);
+            }
+
+            .detailDesc {
+              letter-spacing: 2rpx;
+              padding: 24rpx 0rpx;
+              font-size: 30rpx;
+              color: rgba(0, 0, 0, 0.7);
+            }
+
+            .replyList {
+              width: 100%;
+              padding: 14rpx;
+              box-sizing: border-box;
+              background-color: #F7F7F7;
+              margin-bottom: 20rpx;
+
+              .reply {
+                font-size: 28rpx;
+                .replyTitle {
+                  color: rgb(13, 147, 201);
+                }
+                .replyContent {
+                  color: rgba(0, 0, 0, 0.7);
+                }
+              }
+            }
+
+            .record {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              font-size: 26rpx;
+
+              .record-right {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+
+                text {
+                  margin-left: 6rpx;
+                }
+
+                .icon {
+                  width: 30rpx;
+                  height: 28rpx;
+                }
+
+                .iconBox {
+                  display: flex;
+                  align-items: center;
+                  margin-left: 24rpx;
+                }
+              }
+            }
+          }
+        }
+
+        .content:last-child {
+          border: none;
+        }
+      }
+    }
+
+    .footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background-color: #EEEDED;
+      padding: 20rpx 24rpx;
+
+      .input {
+        height: 80rpx;
+        flex: 1;
+        padding-left: 20rpx;
+        border-radius: 10rpx;
+        background-color: white;
+      }
+
+      .submit {
+        margin-left: 40rpx;
+        width: 76rpx;
+        color: #0091FF;
+        font-size: 32rpx;
+      }
+    }
+  }
+}

components/comment/index.wxml

@@ -0,0 +1,48 @@
+<wxs src="../../utils/filter.wxs" module="filters" />
+<view class="commentBox" wx:if="{{show}}">
+  <view class="commentBg" catchtap="close"></view>
+  <view class="comment">
+    <view class="header">
+      <view class="hl">评论 {{totalSize}}</view>
+      <view class="hr" catchtap="close">×</view>
+    </view>
+    <view class="body" bindtap="cancelId">
+      <view class="body-box">
+        <view class="content" wx:for="{{list}}" wx:key="id">
+          <image src="{{item.user.avatar}}" class="c-avatar" />
+          <view class="c-right">
+            <view class="nickName">
+              {{item.user.nickName||item.user.eid}}
+            </view>
+            <view class="detailDesc">{{item.detailDesc}}</view>
+            <view class="replyList" wx:if="{{item.replyVOList.length>0}}">
+              <view class="reply" wx:for="{{item.replyVOList}}" wx:for-item="reply" wx:key='id'>
+                <text class="replyTitle">{{reply.user.nickName||reply.user.eid}}</text>
+                <text class="replyContent">：{{reply.content}}</text>
+              </view>
+            </view>
+            <view class="record">
+              <view class="time">{{filters.formatDate(item.gmtCreated,3)}}</view>
+              <view class="record-right">
+                <view class="iconBox" catchtap="{{item.isLike? null:'setLike'}}" data-index="{{index}}"
+                  data-id="{{item.id}}">
+                  <image class="icon" src="{{item.isLike? '/static/like_reply.png' : '/static/like_reply_grey.png'}}" />
+                  <text>{{item.likeCount}}</text>
+                </view>
+                <view class="iconBox" catchtap="ReplyComment" data-index="{{index}}" data-id="{{item.id}}">
+                  <image class="icon" src="/static/reply_icon.png" />
+                  <text>{{item.replyCount}}</text>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="footer">
+      <input class="input" bindinput="bindKeyInput" value="{{detailDesc}}" placeholder="留下你的赞美"
+        focus="{{ifGetFocus}}"/>
+      <view class="submit" bindtap="sendReply">发送</view>
+    </view>
+  </view>
+</view>

components/comment/index.wxss

@@ -0,0 +1,135 @@
+.commentBox {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  overflow: hidden;
+}
+.commentBox .commentBg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+}
+.commentBox .comment {
+  position: absolute;
+  left: 0;
+  bottom: 0px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 850rpx;
+  background-color: white;
+  border-top-left-radius: 25rpx;
+  border-top-right-radius: 25rpx;
+}
+.commentBox .comment .header {
+  position: relative;
+  padding: 24rpx;
+}
+.commentBox .comment .header .hr {
+  position: absolute;
+  right: 26rpx;
+  top: -4rpx;
+  font-size: 54rpx;
+  color: #333333;
+}
+.commentBox .comment .body {
+  flex: 1;
+  overflow-y: auto;
+}
+.commentBox .comment .body .body-box {
+  padding: 0rpx 22rpx;
+}
+.commentBox .comment .body .body-box .content {
+  padding: 34rpx 0rpx;
+  display: flex;
+  border-bottom: 1px solid #97979783;
+}
+.commentBox .comment .body .body-box .content .c-avatar {
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 50%;
+  margin-right: 20rpx;
+  background: #d8d8d8;
+}
+.commentBox .comment .body .body-box .content .c-right {
+  flex: 1;
+}
+.commentBox .comment .body .body-box .content .c-right .nickName {
+  font-size: 30rpx;
+  color: rgba(0, 0, 0, 0.6);
+}
+.commentBox .comment .body .body-box .content .c-right .detailDesc {
+  letter-spacing: 2rpx;
+  padding: 24rpx 0rpx;
+  font-size: 30rpx;
+  color: rgba(0, 0, 0, 0.7);
+}
+.commentBox .comment .body .body-box .content .c-right .replyList {
+  width: 100%;
+  padding: 14rpx;
+  box-sizing: border-box;
+  background-color: #F7F7F7;
+  margin-bottom: 20rpx;
+}
+.commentBox .comment .body .body-box .content .c-right .replyList .reply {
+  font-size: 28rpx;
+}
+.commentBox .comment .body .body-box .content .c-right .replyList .reply .replyTitle {
+  color: #0d93c9;
+}
+.commentBox .comment .body .body-box .content .c-right .replyList .reply .replyContent {
+  color: rgba(0, 0, 0, 0.7);
+}
+.commentBox .comment .body .body-box .content .c-right .record {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 26rpx;
+}
+.commentBox .comment .body .body-box .content .c-right .record .record-right {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.commentBox .comment .body .body-box .content .c-right .record .record-right text {
+  margin-left: 6rpx;
+}
+.commentBox .comment .body .body-box .content .c-right .record .record-right .icon {
+  width: 30rpx;
+  height: 28rpx;
+}
+.commentBox .comment .body .body-box .content .c-right .record .record-right .iconBox {
+  display: flex;
+  align-items: center;
+  margin-left: 24rpx;
+}
+.commentBox .comment .body .body-box .content:last-child {
+  border: none;
+}
+.commentBox .comment .footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #EEEDED;
+  padding: 20rpx 24rpx;
+}
+.commentBox .comment .footer .input {
+  height: 80rpx;
+  flex: 1;
+  padding-left: 20rpx;
+  border-radius: 10rpx;
+  background-color: white;
+}
+.commentBox .comment .footer .submit {
+  margin-left: 40rpx;
+  width: 76rpx;
+  color: #0091FF;
+  font-size: 32rpx;
+}

components/videoPreview/index.js

@@ -0,0 +1,174 @@
+import {
+    setVideoStatus,
+    likeVideo,
+    collectVideo
+} from '~/api/video'
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        videoInfo: {
+            type: Object,
+            value: {}
+        },
+        index: {
+            type: Number,
+        },
+        currentId: {
+            type: Number,
+        }
+    },
+    data: {
+
+    },
+    methods: {
+        // 播放视频
+        playVideo() {
+            this.triggerEvent('playVideo', this.properties.videoInfo.userRead.id)
+        },
+        // 分享视频
+        shareVideo() {
+            let videoInfo = this.properties.videoInfo
+            console.log(videoInfo);
+        },
+        // 设置视频公开还是隐私
+        async setVideoPublic() {
+            let info = this.properties.videoInfo.userRead
+            let data = {
+                id: info.id,
+                status: info.status === 'NORMAL' ? 'DISABLE' : 'NORMAL'
+            }
+            let res = await setVideoStatus(data)
+            if (res.status == 'DISABLE') {
+                wx.showToast({
+                    title: '该作品仅自己可见',
+                    icon: 'none',
+                    duration: 2000
+                })
+            }
+            let index = this.properties.index
+            let status = `list[${index}].userRead.status`;
+            let val = info.status === 'NORMAL' ? 'DISABLE' : 'NORMAL'
+            let options = {
+                [status]: val
+            }
+            this.triggerEvent('changStatus', options)
+        },
+        // 点赞
+        async likeVideo() {
+            let {
+                id
+            } = this.properties.videoInfo.userRead
+            if (this.properties.videoInfo.isLike) {
+                return
+            }
+            await likeVideo(id)
+            let index = this.properties.index
+            let likeStr = `list[${index}].isLike`;
+            let likeNumStr = `list[${index}].userRead.likeAmount`;
+            let options = {
+                [likeStr]: true,
+                [likeNumStr]: this.properties.videoInfo.userRead.likeAmount + 1
+            }
+            this.triggerEvent('changStatus', options)
+        },
+        // 下载视频
+        download() {
+            wx.showLoading({
+                title: '保存到本地',
+                mask: true
+            })
+            const url = this.properties.videoInfo.userRead.markPath || ''
+            wx.downloadFile({
+                url,
+                success(res) {
+                    if (res.statusCode === 200) {
+                        wx.saveVideoToPhotosAlbum({
+                            filePath: res.tempFilePath,
+                            success(res) {
+                                wx.hideLoading()
+                                wx.showToast({
+                                    title: '成功保存到相册!',
+                                    duration: 3000,
+                                    icon: 'success',
+                                    mask: true
+                                })
+                            },
+                            fail() {
+                                wx.hideLoading()
+                                wx.showToast({
+                                    title: '网络不给力',
+                                    icon: 'error',
+                                    duration: 3000,
+                                    mask: true
+                                })
+                            }
+                        })
+                    }
+                },
+                fail() {
+                    wx.hideLoading()
+                    wx.showToast({
+                        title: '网络不给力',
+                        icon: 'error',
+                        duration: 3000,
+                        mask: true
+                    })
+                }
+            })
+        },
+        //评论
+        openComment() {
+            this.triggerEvent('openComment', this.properties.videoInfo.userRead.id)
+        },
+
+        // 删除
+        delete() {
+            let {
+                id
+            } = this.properties.videoInfo.userRead
+            wx.showModal({
+                title: '确认删除吗？',
+                content: '作品将被永久删除，无法找回。',
+                confirmText: '确认',
+                cancelText: '取消',
+                success: async(res) => {
+                    if (res.confirm) {
+                        let data = {
+                            id,
+                            status: 'DEL'
+                        }
+                        await setVideoStatus(data)
+                        wx.showToast({
+                            title: '删除成功！',
+                            icon: "none"
+                        })
+                        this.triggerEvent('getList')
+                    }
+                }
+            })
+        },
+        // 收藏课程
+        async collect(e) {
+            let {
+                id,
+                type,
+                uid
+            } = this.properties.videoInfo.userRead
+            if (wx.getStorageSync('uid') == uid) {
+                return
+            }
+            await collectVideo({
+                targetCode: id,
+                favoritesType: type
+            })
+            let index = this.properties.index
+            let isFavorites = `list[${index}].isFavorites`;
+            let options = {
+                [isFavorites]: !this.properties.videoInfo.isFavorites
+            }
+            this.triggerEvent('changStatus', options)
+        },
+    }
+})

components/videoPreview/index.json

@@ -0,0 +1,5 @@
+{
+    "component": true,
+    "usingComponents": {},
+    "styleIsolation": "apply-shared"
+}

components/videoPreview/index.less

@@ -0,0 +1,144 @@
+.work {
+    margin-bottom: 20rpx;
+    background-color: white;
+
+    .workHead {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20rpx;
+
+        .wH-left {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .avatar {
+                width: 80rpx;
+                height: 80rpx;
+                border-radius: 50%;
+                overflow: hidden;
+            }
+
+            .wH-left-user {
+                margin-left: 18rpx;
+
+                .nickname {
+                    max-width: 320rpx;
+                    font-size: 30rpx;
+                    font-weight: bold;
+                    color: #000;
+                }
+
+                .time {
+                    margin-top: 4rpx;
+                    font-size: 26rpx;
+                    color: rgba(0, 0, 0, 0.6);
+                }
+            }
+        }
+
+        .wH-right {
+            display: flex;
+            align-items: center;
+
+            .wH-right-btn {
+                text-align: center;
+                margin-right: 30rpx;
+
+                .img {
+                    width: 27rpx;
+                    height: 32rpx;
+                }
+
+                .text {
+                    font-size: 26rpx;
+                    color: rgba(0, 0, 0, 0.74);
+                }
+            }
+        }
+    }
+
+    .workContent {
+        font-size: 0px;
+
+        .videoBox {
+            position: relative;
+            width: 100%;
+            height: 422rpx;
+
+            .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 {
+                position: absolute;
+                left: 50%;
+                top: 40%;
+                width: 90rpx;
+                height: 90rpx;
+                transform: translate(-50%);
+            }
+
+            .cover {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .video {
+            width: 100%;
+            height: 422rpx;
+        }
+
+    }
+
+    .workFooter {
+
+        .mange {
+            margin-top: 15rpx;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 14rpx 20rpx 30rpx;
+
+            .mangeL {
+                display: flex;
+                align-items: center;
+
+                .mangeL-box {
+                    display: flex;
+                    align-items: center;
+                    margin-right: 30rpx;
+
+                    .icon {
+                        width: 44rpx;
+                        height: 44rpx;
+                    }
+
+                    .icon-name {
+                        margin-left: 10rpx;
+                        font-size: 28rpx;
+                    }
+                }
+            }
+        }
+    }
+}

components/videoPreview/index.wxml

@@ -0,0 +1,68 @@
+<wxs src="../../utils/filter.wxs" module="filters" />
+<view class="work">
+    <view class="workHead">
+        <view class="wH-left">
+            <image src="{{videoInfo.user.avatar}}" class="avatar" mode="" />
+            <view class="wH-left-user">
+                <view class="nickname textOver">{{videoInfo.user.nickName}}</view>
+                <view class="time">发布时间：{{videoInfo.userRead.day}}</view>
+            </view>
+        </view>
+        <view class="wH-right" wx:if="{{videoInfo.userRead.status!='CHECK'}}">
+            <view class="wH-right-btn" bindtap="download">
+                <image class="img" src="/static/down.png" mode="" />
+                <view class="text">下载</view>
+            </view>
+            <view class="wH-right-btn" bindtap="delete">
+                <image class=" img" style="width:24rpx" src="/static/delete.png" mode="" />
+                <view class="text">删除</view>
+            </view>
+            <view class="wH-right-btn" bindtap="setVideoPublic">
+                <image class="img" style="width:30rpx" src="{{videoInfo.userRead.status==='NORMAL'? '/static/unlock.png': '/static/lock.png'}}" />
+                <view class="text">
+                    {{videoInfo.userRead.status==='NORMAL'? '公开': '私密'}}
+                </view>
+            </view>
+        </view>
+    </view>
+    <view class="workContent">
+        <!-- 审核中遮罩 -->
+        <view class="videoBox" wx:if="{{videoInfo.userRead.status=='CHECK'&&videoInfo.userRead.id!=currentId}}">
+            <view class="maskBg"></view>
+            <image class="maskImg" src="/static/checking.png" />
+            <image class="cover" src="{{videoInfo.userRead.coverImg}}" />
+        </view>
+        <!--未播放-->
+        <view class="videoBox" wx:if="{{videoInfo.userRead.status!='CHECK'&&videoInfo.userRead.id!=currentId}}" bindtap="playVideo">
+            <image class="play" src="/static/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>
+    </view>
+    <view class="workFooter">
+        <view class="mange" wx:if="{{videoInfo.userRead.status!='CHECK'}}">
+            <view class="mangeL" bindtap="collect">
+                <view class="mangeL-box">
+                    <image src="{{videoInfo.isFavorites ? '/static/star_colored.png' : '/static/star.png'}}" mode="" class="icon" />
+                    <view class="icon-name">{{item.isFavorites}}</view>
+                </view>
+                <button class="resetBtn mangeL-box" open-type="share" data-info='{{videoInfo}}'>
+                    <image src="/static/share.png" mode="" class="icon" />
+                    <view class="icon-name">分享</view>
+                </button>
+            </view>
+            <view class="mangeL">
+                <view class="mangeL-box" bindtap="likeVideo">
+                    <image src="{{videoInfo.isLike ? '/static/heart_colored.png' : '/static/heart.png'}}" mode="" class="icon" />
+                    <view class="icon-name">{{filters.numFilter(videoInfo.userRead.likeAmount)}}</view>
+                </view>
+                <view class="mangeL-box" bindtap="openComment">
+                    <image src="/static/comment.png" mode="" class="icon" />
+                    <view class="icon-name">{{filters.numFilter(videoInfo.userRead.commentAmount)}}</view>
+                </view>
+            </view>
+        </view>
+    </view>
+</view>

components/videoPreview/index.wxss

@@ -0,0 +1,118 @@
+.work {
+  margin-bottom: 20rpx;
+  background-color: white;
+}
+.work .workHead {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20rpx;
+}
+.work .workHead .wH-left {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.work .workHead .wH-left .avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  overflow: hidden;
+}
+.work .workHead .wH-left .wH-left-user {
+  margin-left: 18rpx;
+}
+.work .workHead .wH-left .wH-left-user .nickname {
+  max-width: 320rpx;
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #000;
+}
+.work .workHead .wH-left .wH-left-user .time {
+  margin-top: 4rpx;
+  font-size: 26rpx;
+  color: rgba(0, 0, 0, 0.6);
+}
+.work .workHead .wH-right {
+  display: flex;
+  align-items: center;
+}
+.work .workHead .wH-right .wH-right-btn {
+  text-align: center;
+  margin-right: 30rpx;
+}
+.work .workHead .wH-right .wH-right-btn .img {
+  width: 27rpx;
+  height: 32rpx;
+}
+.work .workHead .wH-right .wH-right-btn .text {
+  font-size: 26rpx;
+  color: rgba(0, 0, 0, 0.74);
+}
+.work .workContent {
+  font-size: 0px;
+}
+.work .workContent .videoBox {
+  position: relative;
+  width: 100%;
+  height: 422rpx;
+}
+.work .workContent .videoBox .maskBg {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.work .workContent .videoBox .maskImg {
+  z-index: 10;
+  width: 215rpx;
+  height: 215rpx;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  left: 0px;
+  bottom: 0px;
+  margin: auto;
+}
+.work .workContent .videoBox .play {
+  position: absolute;
+  left: 50%;
+  top: 40%;
+  width: 90rpx;
+  height: 90rpx;
+  transform: translate(-50%);
+}
+.work .workContent .videoBox .cover {
+  width: 100%;
+  height: 100%;
+}
+.work .workContent .video {
+  width: 100%;
+  height: 422rpx;
+}
+.work .workFooter .mange {
+  margin-top: 15rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14rpx 20rpx 30rpx;
+}
+.work .workFooter .mange .mangeL {
+  display: flex;
+  align-items: center;
+}
+.work .workFooter .mange .mangeL .mangeL-box {
+  display: flex;
+  align-items: center;
+  margin-right: 30rpx;
+}
+.work .workFooter .mange .mangeL .mangeL-box .icon {
+  width: 44rpx;
+  height: 44rpx;
+}
+.work .workFooter .mange .mangeL .mangeL-box .icon-name {
+  margin-left: 10rpx;
+  font-size: 28rpx;
+}

pages/my/index.wxml

@@ -11,7 +11,7 @@
           <view class="gradeText textOver">学号：{{userInfo.user.eid}}</view>
         </view>
         <view class="uRtopRight">
-          <image class="edit" src="/static/image/edit_new.png" mode="" />
+          <image class="edit" src="/static/edit_new.png" mode="" />
           <text>编辑</text>
         </view>
       </view>
@@ -35,24 +35,24 @@
   <!-- 跳转菜单 -->
   <view class="sectionBoxs">
     <view class="sBox" bindtap='jump' data-url="/pages/userWorks/index">
-      <image class="img" src="/static/image/work.png" mode="" />
+      <image class="img" src="/static/work.png" mode="" />
       <text class="title">我的作品</text>
     </view>
     <view class="sBox" bindtap='jump' data-url="/pages/myconcern/myconcern?title=我的关注">
-      <image class="img" src="/static/image/concern.png" mode="" />
+      <image class="img" src="/static/concern.png" mode="" />
       <text class="title">我的关注</text>
     </view>
     <view class="sBox" bindtap='jump' data-url="/pages/mycollection/mycollection?title=我的收藏">
-      <image class="img" src="/static/image/collect.png" mode="" />
+      <image class="img" src="/static/collect.png" mode="" />
       <text class="title">我的收藏</text>
     </view>
     <view class="sBox" bindtap='jump' data-url="/pages/social/insideMessage/insideMessage">
-      <image class="img" src="/static/image/message.png" mode="" />
+      <image class="img" src="/static/message.png" mode="" />
       <text class="title">消息通知</text>
     </view>
     <button class="resetBtn contactBtn" bindtap="goToService" open-type="contact" plain="true">
       <view class="sBox">
-        <image class="img" src="/static/image/contact.png" mode="" />
+        <image class="img" src="/static/contact.png" mode="" />
         <text class="title">联系客服</text>
       </view>
     </button>
@@ -95,7 +95,7 @@
     <view class="title">免费获取</view>
     <view class="task">
       <view class="taskLeft">
-        <image class="img" src="/static/image/task1.png" alt="" mode="" />
+        <image class="img" src="/static/task1.png" alt="" mode="" />
         <view class="taskContent">
           <view class="tcTitle">
             {{tasks[0].title}}
@@ -109,7 +109,7 @@
     </view>
     <view class="task">
       <view class="taskLeft">
-        <image class="img" src="/static/image/task2.png" alt="" mode="" />
+        <image class="img" src="/static/task2.png" alt="" mode="" />
         <view class="taskContent">
           <view class="tcTitle">
             {{tasks[1].title}}
@@ -121,7 +121,7 @@
     </view>
     <view class="task advert">
       <view class="taskLeft">
-        <image class="img" src="/static/image/task3.png" alt="" mode="" />
+        <image class="img" src="/static/task3.png" alt="" mode="" />
         <view class="taskContent">
           <view class="tcTitle">
             {{tasks[2].title}}

pages/userWorks/index.js

@@ -1,175 +1,162 @@
 import {
-    getSelfRead
+  getSelfRead
 } from '~/api/user'
 let videoContext = null
 Page({
 
-    /**
-     * 页面的初始数据
-     */
-    data: {
-        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()
-        console.log(list);
-        this.setData({
-            list
-        })
-    },
-    creatShare(video) {
-        return new Promise((resolve, reject) => {
-            let context = wx.createSelectorQuery();
-            context
-                .select('#share')
-                .fields({
-                    node: true,
-                    size: true
-                }).exec((res) => {
-                    const canvas = res[0].node;
-                    const ctx = canvas.getContext('2d');
-                    const dpr = wx.getSystemInfoSync().pixelRatio;
-                    canvas.width = res[0].width * dpr;
-                    canvas.height = res[0].height * dpr;
-                    ctx.scale(dpr, dpr);
-                    ctx.font = '14px PingFang';
-                    let pic = canvas.createImage();
-                    pic.src = video.userRead.coverImg; //可以是本地，也可以是网络图片
-                    pic.onload = () => {
-                        ctx.drawImage(pic, 0, 0, 375, 211);
-                    }
-                    let peiyin = canvas.createImage();
-                    peiyin.src = '/static/image/peiyin.jpg';
-                    peiyin.onload = () => {
-                        ctx.drawImage(peiyin, 0, 211, 375, 89);
-                        // 收藏，一个一个渲染
-                        let sc = canvas.createImage();
-                        sc.src = '/static/image/no_collect.png'
-                        sc.onload = () => {
-                            ctx.drawImage(sc, 12, 220, 20, 20)
-                            ctx.fillText('收藏', 36, 238)
-                                //分享
-                            let fx = canvas.createImage();
-                            fx.src = '/static/index/share.png'
-                            fx.onload = () => {
-                                ctx.drawImage(fx, 78, 220, 22, 22)
-                                ctx.fillText('分享', 104, 238)
-                                    //点赞
-                                let dz = canvas.createImage();
-                                dz.src = video.isLike ? '/static/index/heart_colored.png' : '/static/index/heart.png'
-                                dz.onload = () => {
-                                    ctx.drawImage(dz, 258, 222, 22, 22)
-                                    ctx.fillText(video.userRead.likeAmount, 284, 238)
-                                        //评论
-                                    let pl = canvas.createImage();
-                                    pl.src = '/static/index/comment.png'
-                                    pl.onload = () => {
-                                        ctx.drawImage(pl, 318, 222, 22, 22)
-                                        ctx.fillText(video.userRead.commentAmount, 340, 238)
-                                        setTimeout(() => {
-                                            wx.canvasToTempFilePath({
-                                                canvas: canvas,
-                                                success(res) {
-                                                    resolve({
-                                                        title: '请欣赏我的课文朗读作品，点赞+评论。',
-                                                        path: `/pages/index/index?readId=${video.userRead.id}&uid=${wx.getStorageSync('uid')}`,
-                                                        imageUrl: res.tempFilePath
-                                                    })
-                                                },
-                                                fail(res) {
-                                                    reject()
-                                                }
-                                            }, this)
-                                        }, 500)
-                                    }
-                                }
-                            }
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    list: null,
+    currentId: '',
+    videoState: true,
+    canvasHidden: false, //设置画板的显示与隐藏
+    shareImgPath: '' //用于储存canvas生成的图片
+  },
+  onLoad(options) {
+    this.getSelfRead()
+  },
+  // 打开评论
+  openComment({
+    target
+  }) {
+    this.selectComponent("#comment").open(target.dataset.id)
+  },
+  //获取自己作品列表
+  async getSelfRead() {
+    let list = await getSelfRead()
+    this.setData({
+      list
+    })
+  },
+  creatShare(video) {
+    return new Promise((resolve, reject) => {
+      let context = wx.createSelectorQuery();
+      context
+        .select('#share')
+        .fields({
+          node: true,
+          size: true
+        }).exec((res) => {
+          const canvas = res[0].node;
+          const ctx = canvas.getContext('2d');
+          const dpr = wx.getSystemInfoSync().pixelRatio;
+          canvas.width = res[0].width * dpr;
+          canvas.height = res[0].height * dpr;
+          ctx.scale(dpr, dpr);
+          ctx.font = '14px PingFang';
+          let pic = canvas.createImage();
+          pic.src = video.userRead.coverImg; //可以是本地，也可以是网络图片
+          pic.onload = () => {
+            ctx.drawImage(pic, 0, 0, 375, 211);
+          }
+          let peiyin = canvas.createImage();
+          peiyin.src = '/static/peiyin.jpg';
+          peiyin.onload = () => {
+            ctx.drawImage(peiyin, 0, 211, 375, 89);
+            // 收藏，一个一个渲染
+            let sc = canvas.createImage();
+            sc.src = '/static/star.png'
+            sc.onload = () => {
+              ctx.drawImage(sc, 12, 220, 20, 20)
+              ctx.fillText('收藏', 36, 238)
+              //分享
+              let fx = canvas.createImage();
+              fx.src = '/static/share.png'
+              fx.onload = () => {
+                ctx.drawImage(fx, 78, 220, 22, 22)
+                ctx.fillText('分享', 104, 238)
+                //点赞
+                let dz = canvas.createImage();
+                dz.src = video.isLike ? '/static/heart_colored.png' : '/static/heart.png'
+                dz.onload = () => {
+                  ctx.drawImage(dz, 258, 222, 22, 22)
+                  ctx.fillText(video.userRead.likeAmount, 284, 238)
+                  //评论
+                  let pl = canvas.createImage();
+                  pl.src = '/static/comment.png'
+                  pl.onload = () => {
+                    ctx.drawImage(pl, 318, 222, 22, 22)
+                    ctx.fillText(video.userRead.commentAmount, 340, 238)
+                    setTimeout(() => {
+                      wx.canvasToTempFilePath({
+                        canvas: canvas,
+                        success(res) {
+                          resolve({
+                            title: '请欣赏我的课文朗读作品，点赞+评论。',
+                            path: `/pages/index/index?readId=${video.userRead.id}&uid=${wx.getStorageSync('uid')}`,
+                            imageUrl: res.tempFilePath
+                          })
+                        },
+                        fail(res) {
+                          reject()
                         }
-                    }
+                      }, this)
+                    }, 500)
+                  }
+                }
+              }
+            }
+          }
 
-                })
         })
+    })
 
-    },
-    // 改变视频状态
-    changStatus({
-        detail
-    }) {
-        this.setData(detail)
-    },
-    // 开始播放
-    playVideo({
-        currentTarget
-    }) {
-        this.setData({
-            videoState: true,
-            currentId: currentTarget.dataset.id
-        })
-    },
-    /* 改变视频播放状态 ,暂时先不用*/
-    changeVideoState() {
-        this.videoContext = wx.createVideoContext('myVideo')
-        let videoState = this.data.videoState
-        if (videoState) {
-            this.videoContext.pause()
-        } else {
-            this.videoContext.play()
-        }
-        this.setData({
-            videoState: !videoState
-        })
-    },
+  },
+  // 改变视频状态
+  changStatus({
+    detail
+  }) {
+    this.setData(detail)
+  },
+  // 开始播放
+  playVideo({
+    currentTarget
+  }) {
+    this.setData({
+      videoState: true,
+      currentId: currentTarget.dataset.id
+    })
+  },
+  /* 改变视频播放状态 ,暂时先不用*/
+  changeVideoState() {
+    this.videoContext = wx.createVideoContext('myVideo')
+    let videoState = this.data.videoState
+    if (videoState) {
+      this.videoContext.pause()
+    } else {
+      this.videoContext.play()
+    }
+    this.setData({
+      videoState: !videoState
+    })
+  },
 
-    onShareAppMessage({
-        from,
-        target
-    }) {
-        if (from == 'button') {
-            let video = target.dataset.info
-            const promise = new Promise(resolve => {
-                this.creatShare(video).then(res => {
-                    resolve(res)
-                })
-            })
-            console.log(video);
-            return {
-                title: '请欣赏我的课文朗读作品，点赞+评论。',
-                path: `/pages/index/index?readId=${video.userRead.id}&uid=${wx.getStorageSync('uid')}`,
-                imageUrl: video.userRead.coverImg,
-                promise
-            }
-        } else {
-            return {
-                title: '课文朗读，从未如此有趣。',
-                path: `/pages/index/index?&uid=${wx.getStorageSync('uid')}`,
-                imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png'
-            }
-        }
+  onShareAppMessage({
+    from,
+    target
+  }) {
+    if (from == 'button') {
+      let video = target.dataset.info
+      const promise = new Promise(resolve => {
+        this.creatShare(video).then(res => {
+          resolve(res)
+        })
+      })
+      console.log(video);
+      return {
+        title: '请欣赏我的课文朗读作品，点赞+评论。',
+        path: `/pages/index/index?readId=${video.userRead.id}&uid=${wx.getStorageSync('uid')}`,
+        imageUrl: video.userRead.coverImg,
+        promise
+      }
+    } else {
+      return {
+        title: '课文朗读，从未如此有趣。',
+        path: `/pages/index/index?&uid=${wx.getStorageSync('uid')}`,
+        imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png'
+      }
     }
+  }
 })

pages/userWorks/index.json

@@ -1,9 +1,9 @@
 {
-  "navigationStyle": "custom",
   "usingComponents": {
     "videoPreview": "/components/videoPreview/index",
     "emptyBg": "/components/empty/index",
-    "Comment": "/components/comment/comment"
+    "Comment": "/components/comment/index"
   },
+  "navigationBarTitleText": "我的作品",
   "enablePullDownRefresh": false
 }

pages/userWorks/index.less

@@ -1,21 +1,3 @@
 .worksBox {
-    .comment_section {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 9999;
-        background: rgba(0, 0, 0, .3);
-        overflow: hidden;
-    }
 
-    .comment_close {
-        position: absolute;
-        bottom: 760rpx;
-        right: 10rpx;
-        font-size: 60rpx;
-        padding: 20rpx;
-        z-index: 999;
-    }
 }

pages/userWorks/index.wxml

@@ -1,15 +1,12 @@
 <view class="worksBox">
-    <!-- 作品列表 -->
-    <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" 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}}">
-        <view class="comment_close" data-type='blank'>
-            ×
-        </view>
-        <Comment commentId="{{commentId}}" bindsendReply="sendReply" />
-    </view>
+  <!-- 作品列表 -->
+  <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" bind:openComment="openComment">
+    </videoPreview>
+  </block>
+  <emptyBg wx:if="{{list.length==0}}" message='您还没有作品哦，赶快去发表吧！'></emptyBg>
+  <Comment id="comment" />
 </view>

pages/userWorks/index.wxss

@@ -1,18 +0,0 @@
-.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;
-}
-.worksBox .comment_close {
-  position: absolute;
-  bottom: 760rpx;
-  right: 10rpx;
-  font-size: 60rpx;
-  padding: 20rpx;
-  z-index: 999;
-}

utils/filter.wxs

@@ -1,41 +1,59 @@
 var formatNumber = function (n) {
-    n = n.toString()
-    return n[1] ? n : '0' + n
+  n = n.toString()
+  return n[1] ? n : '0' + n
 }
 /**
  * 将时间戳(1570550400)格式转为 yyyy-MM-dd格式
  */
-var formatDate = function (datetime) {
-    var time = datetime * 1
-    var date = getDate(time);
-    var year = date.getFullYear();
-    var month = date.getMonth() + 1;
-    var day = date.getDate();
+//时间戳转时间
+function formatDate(time, flag) {
+  var t = getDate(time);
+  var tf = function (i) {
+    return (i < 10 ? '0' : '') + i
+  };
+  var year = t.getFullYear();
+  var month = tf(t.getMonth() + 1);
+  var day = tf(t.getDate());
+  var hour = tf(t.getHours());
+  var minute = tf(t.getMinutes());
+  if (flag == 1) {
+    return month + '月' + day + '日' + ' ' + hour + ':' + minute;
+  } else if (flag == 2) {
+    console.log(year, month, day)
+    return year + '-' + month + '-' + day
+  } else if (flag == 3) {
+    return month + '-' + day + ' ' + hour + ':' + minute;
+  } else if (flag == 4) {
     return year + '年' + month + '月' + day + '日';
+  } else if (flag == 5) {
+    return day.toString().substring(1, 2)
+  } else if (flag == 6) {
+    return month + '.' + day;
+  }
 }
 
 function gradeFilter(grade) {
-    if (!grade) {
-        return '暂无'
-    }
-    var gradeObj = {
-        "PRIMARY_FIRST_GRADE": "一年级",
-        "PRIMARY_SECOND_GRADE": "二年级",
-        "PRIMARY_THREE_GRADE": "三年级",
-        "PRIMARY_SENIOR_GRADE": "四年级",
-        "PRESCHOOL": "学前班",
-    }
-    return gradeObj[grade]
+  if (!grade) {
+    return '暂无'
+  }
+  var gradeObj = {
+    "PRIMARY_FIRST_GRADE": "一年级",
+    "PRIMARY_SECOND_GRADE": "二年级",
+    "PRIMARY_THREE_GRADE": "三年级",
+    "PRIMARY_SENIOR_GRADE": "四年级",
+    "PRESCHOOL": "学前班",
+  }
+  return gradeObj[grade]
 }
 // 数字满万补w
 function numFilter(num) {
-    if (!num || num < 10000) {
-        return num
-    }
-    return Math.floor(num / 100) / 100 + 'w'
+  if (!num || num < 10000) {
+    return num
+  }
+  return Math.floor(num / 100) / 100 + 'w'
 }
 module.exports = {
-    formatDate: formatDate,
-    gradeFilter: gradeFilter,
-    numFilter: numFilter
+  formatDate: formatDate,
+  gradeFilter: gradeFilter,
+  numFilter: numFilter
 }