Sfoglia il codice sorgente

开发挑战记录页面

bayi 2 anni fa
parent
commit
6dddcc21a6
6 ha cambiato i file con 194 aggiunte e 17 eliminazioni
  1. 1 1
      app.json
  2. 103 1
      pages/pkPage/index.js
  3. 35 2
      pages/pkPage/index.less
  4. 9 0
      pages/pkPage/index.wxml
  5. 33 0
      pages/pkPage/index.wxss
  6. 13 13
      pages/userWorks/index.js

+ 1 - 1
app.json

@@ -29,7 +29,7 @@
         "navigationBarTitleText": "小学语文朗读配音",
         "navigationBarTextStyle": "black",
         "onReachBottomDistance": 50,
-        "enablePullDownRefresh": true
+        "enablePullDownRefresh": false
     },
     "resolveAlias": {
         "~/*": "/*"

+ 103 - 1
pages/pkPage/index.js

@@ -13,12 +13,14 @@ Page({
      */
     onLoad(options) {
         let videoId = options.videoId
-        console.log(options);
         this.getreadInfo(videoId)
     },
     async getreadInfo(videoId) {
         let videoInfo = await getreadInfo(videoId)
         console.log(videoInfo);
+        wx.setNavigationBarTitle({
+            title: videoInfo.userRead.title
+        })
         this.setData({
             videoInfo
         })
@@ -36,4 +38,104 @@ Page({
     onReachBottom() {
 
     },
+    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)
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                })
+        })
+
+    },
+    onShareAppMessage({
+        from,
+        target
+    }) {
+        if (from == 'button') {
+            let video = this.data.videoInfo
+            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'
+            }
+        }
+    }
 })

+ 35 - 2
pages/pkPage/index.less

@@ -1,3 +1,36 @@
-.pkBox{
-    
+.pkBox {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+
+    .pkRecord {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        .title {
+            position: relative;
+            padding: 0px 60rpx;
+            font-size: 32rpx;
+        }
+
+        .title::before {
+            position: absolute;
+            left: 30rpx;
+            top: 0px;
+            width: 10rpx;
+            height: 100%;
+            background-color: #4CC4FF;
+            content: '';
+            border-radius: 50rpx;
+        }
+
+        .scrollBox {
+            height: 100%;
+            margin-top: 20rpx;
+            border-top-left-radius: 20rpx;
+            border-top-right-radius: 20rpx;
+            background-color: white;
+        }
+    }
 }

+ 9 - 0
pages/pkPage/index.wxml

@@ -1,4 +1,13 @@
 <view class="pkBox">
     <videoPreview videoInfo="{{videoInfo}}" currentId="{{currentId}}" data-id="{{videoInfo.userRead.id}}"
         bind:playVideo="playVideo" bind:openComment="openComment" videoType='pk' />
+    <!-- 挑战记录列表 -->
+    <view class="pkRecord">
+        <view class="title">挑战记录</view>
+        <scroll-view scroll-y="true" class="scrollBox">
+           
+        </scroll-view>
+    </view>
+    <Comment id="comment" />
+    <canvas id='share' type="2d"> </canvas>
 </view>

+ 33 - 0
pages/pkPage/index.wxss

@@ -0,0 +1,33 @@
+.pkBox {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.pkBox .pkRecord {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.pkBox .pkRecord .title {
+  position: relative;
+  padding: 0px 60rpx;
+  font-size: 32rpx;
+}
+.pkBox .pkRecord .title::before {
+  position: absolute;
+  left: 30rpx;
+  top: 0px;
+  width: 10rpx;
+  height: 100%;
+  background-color: #4CC4FF;
+  content: '';
+  border-radius: 50rpx;
+}
+.pkBox .pkRecord .scrollBox {
+  height: 100%;
+  margin-top: 20rpx;
+  border-top-left-radius: 20rpx;
+  border-top-right-radius: 20rpx;
+  background-color: white;
+}

+ 13 - 13
pages/userWorks/index.js

@@ -20,6 +20,19 @@ Page({
             list
         })
     },
+    /* 改变视频播放状态 ,暂时先不用*/
+    changeVideoState() {
+        this.videoContext = wx.createVideoContext('myVideo')
+        let videoState = this.data.videoState
+        if (videoState) {
+            this.videoContext.pause()
+        } else {
+            this.videoContext.play()
+        }
+        this.setData({
+            videoState: !videoState
+        })
+    },
     creatShare(video) {
         return new Promise((resolve, reject) => {
             let context = wx.createSelectorQuery();
@@ -94,19 +107,6 @@ Page({
         })
 
     },
-    /* 改变视频播放状态 ,暂时先不用*/
-    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