完善各组件

components/activityList/index.json

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

components/empty/index.json

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

components/empty/index.less

@@ -5,7 +5,7 @@
     align-items: center;
 
     .nullImg {
-        margin-top: 250rpx;
+        // margin-top: 250rpx;
         width: 364rpx;
         height: 280rpx;
     }

components/empty/index.wxss

@@ -5,7 +5,6 @@
   align-items: center;
 }
 .empty .nullImg {
-  margin-top: 250rpx;
   width: 364rpx;
   height: 280rpx;
 }

components/worksList/index.js

@@ -55,6 +55,12 @@ Component({
     data: {
         worksListCopy: {}
     },
+    lifetimes: {
+        detached: function () {
+            // 在组件实例被从页面节点树移除时执行
+            this.resetAudio()
+        },
+    },
     methods: {
         setListFans({
             detail

components/worksList/index.json

@@ -1,7 +1,7 @@
 {
-    "component": true,
-    "usingComponents": {
-        "videoPreview": "/components/videoPreview/index",
-        "Comment": "/components/comment/index"
-    }
+  "component": true,
+  "usingComponents": {
+    "videoPreview": "/components/videoPreview/index",
+    "Comment": "/components/comment/index"
+  }
 }

components/worksList/index.less

@@ -4,4 +4,12 @@
   width: 100%;
   height: 1rpx;
   background-color: transparent;
+}
+
+.share {
+  width: 375px;
+  height: 300px;
+  position: absolute;
+  left: -9999rpx;
+  top: -9999rpx;
 }

components/worksList/index.wxml

@@ -7,5 +7,5 @@
     bind:openComment="openComment" bind:setListFans="setListFans" bind:playAudio="playAudio">
   </videoPreview>
   <Comment id="comment" tabBarPadding="{{tabBarPadding}}" bind:addCommentNum="addCommentNum" />
-  <canvas id='share' type=" 2d"> </canvas>
+  <canvas id='share' class="share" type="2d"> </canvas>
 </view>

components/worksList/index.wxss

@@ -5,3 +5,10 @@
   height: 1rpx;
   background-color: transparent;
 }
+.share {
+  width: 375px;
+  height: 300px;
+  position: absolute;
+  left: -9999rpx;
+  top: -9999rpx;
+}

mixins/share.js

@@ -1,103 +1,104 @@
 module.exports = Behavior({
-  data: {},
-  methods: {
-    onShareAppMessage({
-      from,
-      target
-    }) {
-      if (from == 'button') {
-        let video = target.dataset.info
-        console.log(video,'info,,.,.');
-        const promise = new Promise(resolve => {
-          this.creatShare(video).then(res => {
-            resolve(res)
-          })
-        })
-        return {
-          title: '请欣赏我的课文朗读作品，点赞+评论。',
-          path: `/pages/index/index?readId=${video.id}&uid=${wx.getStorageSync('uid')}`,
-          imageUrl: video.coverImg,
-          promise
-        }
-      } else {
-        return {
-          title: '课文朗读，从未如此有趣。',
-          path: `/pages/index/index?uid=${wx.getStorageSync('uid')}`,
-          imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png'
-        }
-      }
-    },
-    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 fx = canvas.createImage();
-              fx.src = '/static/share.png'
-              fx.onload = () => {
-                ctx.drawImage(fx, 12, 220, 20, 20)
-                ctx.fillText('分享', 36, 238)
-                // 收藏，一个一个渲染
-                let sc = canvas.createImage();
-                sc.src = '/static/no_collect.png'
-                sc.onload = () => {
-                  ctx.drawImage(sc, 110, 220, 19, 19)
-                  ctx.fillText('收藏', 134, 238)
-                  //点赞
-                  let dz = canvas.createImage();
-                  dz.src = video.isLike ? '/static/heart_colored.png' : '/static/heart.png'
-                  dz.onload = () => {
-                    ctx.drawImage(dz, 228, 222, 22, 22)
-                    ctx.fillText(video.userRead.likeAmount||0, 254, 238)
-                    // 评论
-                    let pl = canvas.createImage();
-                    pl.src = '/static/comment.png'
-                    pl.onload = () => {
-                      ctx.drawImage(pl, 318, 222, 22, 22)
-                      ctx.fillText(video.userRead.commentAmount||0, 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)
-                    }
-                  }
+    data: {},
+    methods: {
+        onShareAppMessage({
+            from,
+            target
+        }) {
+            if (from == 'button') {
+                let video = target.dataset.info
+                console.log(video, 'info,,.,.');
+                const promise = new Promise(resolve => {
+                    this.creatShare(video).then(res => {
+                        resolve(res)
+                    })
+                })
+                return {
+                    title: '请欣赏我的课文朗读作品，点赞+评论。',
+                    path: `/pages/index/index?readId=${video.id}&uid=${wx.getStorageSync('uid')}`,
+                    imageUrl: video.coverImg,
+                    promise
+                }
+            } else {
+                return {
+                    title: '课文朗读，从未如此有趣。',
+                    path: `/pages/index/index?uid=${wx.getStorageSync('uid')}`,
+                    imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png'
                 }
-              }
             }
-          })
-      })
-    },
-  }
+        },
+        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.userReadExtend.backgroundVirtualImg;
+                        // 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 fx = canvas.createImage();
+                            fx.src = '/static/share.png'
+                            fx.onload = () => {
+                                ctx.drawImage(fx, 12, 220, 20, 20)
+                                ctx.fillText('分享', 36, 238)
+                                // 收藏，一个一个渲染
+                                let sc = canvas.createImage();
+                                sc.src = '/static/no_collect.png'
+                                sc.onload = () => {
+                                    ctx.drawImage(sc, 110, 220, 19, 19)
+                                    ctx.fillText('收藏', 134, 238)
+                                    //点赞
+                                    let dz = canvas.createImage();
+                                    dz.src = video.isLike ? '/static/heart_colored.png' : '/static/heart.png'
+                                    dz.onload = () => {
+                                        ctx.drawImage(dz, 228, 222, 22, 22)
+                                        ctx.fillText(video.userRead.likeAmount || 0, 254, 238)
+                                        // 评论
+                                        let pl = canvas.createImage();
+                                        pl.src = '/static/comment.png'
+                                        pl.onload = () => {
+                                            ctx.drawImage(pl, 318, 222, 22, 22)
+                                            ctx.fillText(video.userRead.commentAmount || 0, 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/collection/index.js

@@ -2,8 +2,9 @@ import {
   getFavoritesList
 } from "~/api/user"
 import reachBottom from '~/mixins/reachBottom'
+import share from '~/mixins/share'
 Page({
-  behaviors: [reachBottom],
+  behaviors: [reachBottom,share],
   data: {},
   onShow() {
     this.resetData()
@@ -14,10 +15,4 @@ Page({
   onReachBottom() {
     this.loadMore()
   },
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {
-
-  }
 })

pages/collection/index.wxml

@@ -1,3 +1,4 @@
 <view class="collection">
-  <worksList id="worksList" videoType='collection' worksList="{{list}}" />
+    <worksList id="worksList" videoType='collection' worksList="{{list}}" autoPlay="{{false}}" />
+    <canvas id='share' type="2d"> </canvas>
 </view>

pages/pkPage/index.js

@@ -7,7 +7,7 @@ import {
     getPkRecord
 } from '~/api/works'
 Page({
-    behaviors: [behavior, share, ],
+    behaviors: [behavior, share],
     data: {
         videoInfo: {},
         videoId: '',

pages/works/index.json

@@ -1,8 +1,9 @@
 {
-  "usingComponents": {
-    "navigationBar": "/components/navigationBar/index",
-    "worksList": "/components/worksList/index",
-    "banner": "/components/banner/index"
-  },
-  "navigationStyle": "custom"
+    "usingComponents": {
+        "navigationBar": "/components/navigationBar/index",
+        "worksList": "/components/worksList/index",
+        "banner": "/components/banner/index",
+        "emptyBg": "/components/empty/index"
+    },
+    "navigationStyle": "custom"
 }

pages/works/index.less

@@ -1,40 +1,44 @@
 .worksBox {
+  min-height: 100vh;
+  .selectType {
+    padding: 30rpx 15rpx 30rpx 26rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    z-index: 20;
 
-    .selectType {
-        padding: 30rpx 15rpx 30rpx 26rpx;
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-        z-index: 20;
-
-        .type {
-            padding: 14rpx 0rpx;
-            width: 200rpx;
-            box-sizing: border-box;
-            text-align: center;
-            border: 1rpx solid #9f9f9fa4;
-            border-radius: 50rpx;
-            color: #1A1A1A;
-            font-size: 24rpx;
-        }
+    .type {
+      padding: 14rpx 0rpx;
+      width: 200rpx;
+      box-sizing: border-box;
+      text-align: center;
+      border: 1rpx solid #9f9f9fa4;
+      border-radius: 50rpx;
+      color: #1A1A1A;
+      font-size: 24rpx;
+    }
 
-        .currentType {
-            border: none;
-            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
-            background-color: white;
-            font-weight: bold;
-        }
+    .currentType {
+      border: none;
+      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+      background-color: white;
+      font-weight: bold;
+    }
 
-        .search {
-            padding: 8rpx 20rpx;
-            text-align: center;
-            border: 1rpx solid #9f9f9fa4;
-            border-radius: 50rpx;
+    .search {
+      padding: 8rpx 20rpx;
+      text-align: center;
+      border: 1rpx solid #9f9f9fa4;
+      border-radius: 50rpx;
 
-            .searchImg {
-                width: 26rpx;
-                height: 26rpx;
-            }
-        }
+      .searchImg {
+        width: 26rpx;
+        height: 26rpx;
+      }
     }
+  }
+
+  .empty {
+    margin-top: 90rpx;
+  }
 }

pages/works/index.wxml

@@ -10,5 +10,6 @@
   <!-- 优秀作品展播及官方推荐列表组件 -->
   <worksList id="worksList" videoType="{{currentType=='1'?'pk':'my'}}" worksList="{{list}}" tabBarPadding='true'
     autoPlay='{{false}}' />
+  <emptyBg wx:if="{{list.length==0}}" message="{{currentType=='1'?'您还没有关注的用户哦':'您还没有作品哦，赶快去发表吧'}}"></emptyBg>
 </view>
-<canvas id='share' type="2d"> </canvas>
+<canvas id='share' type=" 2d"> </canvas>

pages/works/index.wxss

@@ -1,3 +1,6 @@
+.worksBox {
+  min-height: 100vh;
+}
 .worksBox .selectType {
   padding: 30rpx 15rpx 30rpx 26rpx;
   display: flex;
@@ -31,3 +34,6 @@
   width: 26rpx;
   height: 26rpx;
 }
+.worksBox .empty {
+  margin-top: 90rpx;
+}