接入评论组件

mixins/video.js

@@ -1,172 +1,172 @@
 let innerAudioContext
 import {
-  setDuration
+    setDuration
 } from '~/utils/util'
 module.exports = Behavior({
-  data: {
-    currentId: '',
-    sliderValue: 0,
-    currentTime: '00:00'
-  },
-  properties: {},
-  pageLifetimes: {
-    hide() {
-      this.resetAudio()
-    },
-  },
-  lifetimes: {
-    attached() {
-      this.innerAudioContext = wx.createInnerAudioContext()
-      this.innerAudioContext.onTimeUpdate(res => {
-        this.setData({
-          sliderValue: Math.round(this.innerAudioContext.currentTime / this.innerAudioContext.duration * 100),
-          currentTime: setDuration(this.innerAudioContext.currentTime)
-        })
-      })
-      this.innerAudioContext.onError(res => {
-        console.log(res, 'rrrrrrrrrrrr');
-      })
-      this.innerAudioContext.onEnded(res => {
-        this.resetAudio()
-      })
-    }
-  },
-  methods: {
-    // 开始播放
-    playVideo({
-      currentTarget
-    }) {
-      this.setData({
-        currentId: currentTarget.dataset.id
-      })
-    },
-    // 播放音频
-    playAudio({
-      currentTarget
-    }) {
-      if (this.data.currentId == currentTarget.dataset.id) {
-        this.resetAudio()
-        if (!currentTarget.dataset.isPkPage) {
-          return
-        }
-      }
-      if (this.innerAudioContext) {
-        this.resetAudio()
-      }
-      this.setData({
-        currentId: currentTarget.dataset.id,
-        currentTime: '00:00',
-        sliderValue: 0
-      })
-      this.innerAudioContext.src = currentTarget.dataset.audio
-      setTimeout(() => {
-        this.innerAudioContext.play();
-      }, 200)
-    },
-    // 设置音频播放进度
-    setSeek({
-      detail
-    }) {
-      this.innerAudioContext.pause();
-      this.innerAudioContext.seek(detail)
-      setTimeout(() => {
-        this.innerAudioContext.play()
-      }, 300)
-    },
-    // 重置音频
-    resetAudio() {
-      if (this.innerAudioContext) {
-        this.innerAudioContext.stop();
-      }
-      this.setData({
+    data: {
         currentId: '',
-        sliderValue: 0
-      })
+        sliderValue: 0,
+        currentTime: '00:00'
     },
-    // 打开评论
-    openComment({
-      target
-    }) {
-      this.selectComponent('#comment').open(target.dataset.uid, target.dataset.id)
+    properties: {},
+    pageLifetimes: {
+        hide() {
+            this.resetAudio()
+        },
     },
-    // 打开设置类型的评论组件
-    openTypeComment({
-      target
-    }) {
-      this.selectComponent('#comment').open(wx.getStorageSync('uid'), target.dataset.id, target.dataset.type, target.dataset.onceId)
+    lifetimes: {
+        attached() {
+            this.innerAudioContext = wx.createInnerAudioContext()
+            this.innerAudioContext.onTimeUpdate(res => {
+                this.setData({
+                    sliderValue: Math.round(this.innerAudioContext.currentTime / this.innerAudioContext.duration * 100),
+                    currentTime: setDuration(this.innerAudioContext.currentTime)
+                })
+            })
+            this.innerAudioContext.onError(res => {
+                console.log(res, 'rrrrrrrrrrrr');
+            })
+            this.innerAudioContext.onEnded(res => {
+                this.resetAudio()
+            })
+        }
     },
-    // 分享
-    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/no_collect.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.likes, 284, 238)
-                    //评论
-                    let pl = canvas.createImage();
-                    pl.src = '/static/comment.png'
-                    pl.onload = () => {
-                      ctx.drawImage(pl, 318, 222, 22, 22)
-                      ctx.fillText(video.commentAmount, 340, 238)
-                      setTimeout(() => {
-                        wx.canvasToTempFilePath({
-                          canvas: canvas,
-                          success(res) {
-                            resolve({
-                              title: '我的新作品发布啦，快来捧场点赞！',
-                              path: `/pages/index?readId=${video.id}&uid=${wx.getStorageSync('uid')}`,
-                              imageUrl: res.tempFilePath
-                            })
-                          },
-                          fail(res) {
-                            reject()
-                          }
-                        }, this)
-                      }, 500)
-                    }
-                  }
+    methods: {
+        // 开始播放
+        playVideo({
+            currentTarget
+        }) {
+            this.setData({
+                currentId: currentTarget.dataset.id
+            })
+        },
+        // 播放音频
+        playAudio({
+            currentTarget
+        }) {
+            if (this.data.currentId == currentTarget.dataset.id) {
+                this.resetAudio()
+                if (!currentTarget.dataset.isPkPage) {
+                    return
                 }
-              }
             }
-          })
-      })
-    },
-  }
+            if (this.innerAudioContext) {
+                this.resetAudio()
+            }
+            this.setData({
+                currentId: currentTarget.dataset.id,
+                currentTime: '00:00',
+                sliderValue: 0
+            })
+            this.innerAudioContext.src = currentTarget.dataset.audio
+            setTimeout(() => {
+                this.innerAudioContext.play();
+            }, 200)
+        },
+        // 设置音频播放进度
+        setSeek({
+            detail
+        }) {
+            this.innerAudioContext.pause();
+            this.innerAudioContext.seek(detail)
+            setTimeout(() => {
+                this.innerAudioContext.play()
+            }, 300)
+        },
+        // 重置音频
+        resetAudio() {
+            if (this.innerAudioContext) {
+                this.innerAudioContext.stop();
+            }
+            this.setData({
+                currentId: '',
+                sliderValue: 0
+            })
+        },
+        // 打开评论
+        openComment({
+            target
+        }) {
+            this.selectComponent('#comment').open(target.dataset.uid, target.dataset.id)
+        },
+        // 打开设置类型的评论组件
+        openTypeComment({
+            target
+        }) {
+            this.selectComponent('#comment').open(wx.getStorageSync('uid'), target.dataset.id, target.dataset.type, target.dataset.onceId)
+        },
+        // 分享
+        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/no_collect.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.likes, 284, 238)
+                                        //评论
+                                        let pl = canvas.createImage();
+                                        pl.src = '/static/comment.png'
+                                        pl.onload = () => {
+                                            ctx.drawImage(pl, 318, 222, 22, 22)
+                                            ctx.fillText(video.commentAmount, 340, 238)
+                                            setTimeout(() => {
+                                                wx.canvasToTempFilePath({
+                                                    canvas: canvas,
+                                                    success(res) {
+                                                        resolve({
+                                                            title: '我的新作品发布啦，快来捧场点赞！',
+                                                            path: `/pages/index?readId=${video.id}&uid=${wx.getStorageSync('uid')}`,
+                                                            imageUrl: res.tempFilePath
+                                                        })
+                                                    },
+                                                    fail(res) {
+                                                        reject()
+                                                    }
+                                                }, this)
+                                            }, 500)
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    })
+            })
+        },
+    }
 })

pages/reading/index.js

@@ -826,6 +826,15 @@ Page({
             ['videoInfo.userRead.likeAmount']: this.data.videoInfo.userRead.likeAmount + 1
         })
     },
+    //评论
+    openComment() {
+        this.selectComponent('#comment').open('', this.data.videoInfo.userRead.id)
+    },
+    addCommentNum() {
+        this.setData({
+            ['videoInfo.userRead.commentAmount']: ++this.data.videoInfo.userRead.commentAmount
+        })
+    },
     creatShare() {
         return new Promise((resolve, reject) => {
             let video = this.data.videoInfo

pages/reading/index.json

@@ -2,6 +2,7 @@
     "usingComponents": {
         "uploadFile": "/components/uploadFile/index",
         "buyVip": "./buyVip/index",
+        "Comment": "/components/comment/index",
         "vipModal": "/components/vipModal/index"
     },
     "navigationBarTitleText": ""

pages/reading/index.wxml

@@ -48,9 +48,7 @@
             <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" />
+            <image src="/static/comment.png" class="icon" />
             <view class="icon-name">{{filters.numFilter(videoInfo.userRead.commentAmount)}}</view>
         </view>
         <view class="mangeL-box" bindtap="likeVideo">
@@ -172,4 +170,5 @@
     <canvas id='share' type="2d"> </canvas>
     <vipModal id="vipModal"></vipModal>
     <canvas id='vip' type="2d"> </canvas>
+    <Comment id="comment" bind:addCommentNum="addCommentNum" />
 </view>