开发新的视频播放组件及我的作品页面

pages/reading/reading.js

@@ -516,7 +516,7 @@ Page({
         } else {
             const recordSource = this.data.recordSource
             wx.uploadFile({
-                url: 'https://reader-api.efunbox.cn/file/upload',
+                url: 'https://reader-api.ai160.com//file/upload',
                 filePath: recordSource,
                 name: '朗读录音',
                 header: {
@@ -589,8 +589,8 @@ Page({
         })
         const recordSource = this.data.recordSource;
         wx.uploadFile({
-            // url: 'https://reader-api.efunbox.cn/file/upload',
-            url: 'https://reader-api.efunbox.cn//file/upload',
+            // url: 'https://reader-api.ai160.com//file/upload',
+            url: 'https://reader-api.ai160.com///file/upload',
             filePath: recordSource,
             name: '朗读录音',
             header: {

pages/user/myEdit/myEdit.js

@@ -79,7 +79,7 @@ Page({
         // tempFilePath可以作为img标签的src属性显示图片
         const localImage = res.tempFilePaths[0];
         wx.uploadFile({
-          url: 'https://reader-api.efunbox.cn/file/upload',
+          url: 'https://reader-api.ai160.com//file/upload',
           filePath: localImage,
           name: '头像',
           header: {

pages/userWorks/index.js

@@ -1,13 +1,16 @@
 import {
     getSelfRead
 } from '~/api/user'
+let videoContext = null
 Page({
 
     /**
      * 页面的初始数据
      */
     data: {
-        list: []
+        list: [],
+        currentVideo: '',
+        videoState: true
     },
 
     /**
@@ -30,6 +33,7 @@ Page({
     onShow() {
 
     },
+    //获取自己作品列表
     async getSelfRead() {
         let params = {
             uid: wx.getStorageSync('uid'),
@@ -42,6 +46,28 @@ Page({
         })
         console.log(list[0]);
     },
+    // 开始播放
+    playVideo({
+        currentTarget
+    }) {
+        this.setData({
+            videoState: true,
+            currentId: currentTarget.dataset.id
+        })
+    },
+    changeVideoState() {
+        this.videoContext = wx.createVideoContext('myVideo')
+        console.log(this.data.videoState);
+        let videoState = this.data.videoState
+        if (videoState) {
+            this.videoContext.pause()
+        } else {
+            this.videoContext.play()
+        }
+        this.setData({
+            videoState: !videoState
+        })
+    },
     /**
      * 页面上拉触底事件的处理函数
      */

pages/userWorks/index.less

@@ -6,7 +6,7 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            padding: 16rpx 20rpx;
+            padding: 20rpx;
 
             .wH-left {
                 display: flex;
@@ -60,10 +60,70 @@
         }
 
         .workContent {
+            font-size: 0px;
+
+            .videoBox {
+                position: relative;
+                width: 100%;
+                height: 422rpx;
+
+                .cover {
+                    width: 100%;
+                    height: 100%;
+                }
+
+                .play {
+                    position: absolute;
+                    left: 50%;
+                    top: 40%;
+                    width: 90rpx;
+                    height: 90rpx;
+                    transform: translate(-50%);
+                }
+            }
+
             .video {
                 width: 100%;
                 height: 422rpx;
             }
+
+        }
+
+        .workFooter {
+            .title {
+                padding: 14rpx 20rpx;
+                font-size: 32rpx;
+                font-weight: bold;
+            }
+
+            .mange {
+                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 {
+                            font-weight: bold;
+                            margin-left: 10rpx;
+                            font-size: 28rpx;
+                        }
+                    }
+                }
+            }
         }
     }
 }

pages/userWorks/index.wxml

@@ -29,12 +29,43 @@
                 </view>
             </view>
             <view class="workContent">
-                <!-- <view>
-                    <image class="video_item_dialog_img" src="../../static/index/checking.png"
-                        mode="aspectFit|aspectFill|widthFix" />
-                </view> -->
-                <!--  <video class="video" src="{{item.userRead.videoPath}}" autoplay="{{false}}" object-fit="contain">
-                </video> -->
+                <view class="videoBox" wx:if="{{item.userRead.id!=currentId}}" catchtap="playVideo"
+                    data-id="{{item.userRead.id}}">
+                    <!-- <image class="video_item_dialog_img" src="/static/index/checking.png"
+                        mode="aspectFit|aspectFill|widthFix" /> -->
+                    <image class="play" src="/static/image/play-btn.png" />
+                    <image class="cover" src="{{item.userRead.coverImg}}" />
+                </view>
+                <video class="video" id="myVideo" wx:else src="{{item.userRead.videoPath}}" autoplay="true"
+                    object-fit="contain" bindtap="changeVideoState">
+                </video>
+            </view>
+            <view class="workFooter">
+                <view class="title">{{item.userRead.title}}</view>
+                <view class="mange">
+                    <view class="mangeL">
+                        <view class="mangeL-box">
+                            <image src="/static/image/no_collect.png" mode="" class="icon" />
+                            <view class="icon-name">收藏</view>
+                        </view>
+                        <view class="mangeL-box">
+                            <image src="/static/index/share.png" mode="" class="icon" />
+                            <view class="icon-name">分享</view>
+                        </view>
+                    </view>
+                    <view class="mangeL">
+                        <view class="mangeL-box">
+                            <image
+                                src="{{item.userRead.isLike ? '/static/index/heart_colored.png' : '/static/index/heart.png'}}"
+                                mode="" class="icon" />
+                            <view class="icon-name">13313</view>
+                        </view>
+                        <view class="mangeL-box">
+                            <image src="/static/index/comment.png" mode="" class="icon" />
+                            <view class="icon-name">1233</view>
+                        </view>
+                    </view>
+                </view>
             </view>
         </view>
     </view>

pages/userWorks/index.wxss

@@ -5,7 +5,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 16rpx 20rpx;
+  padding: 20rpx;
 }
 .worksBox .work .workHead .wH-left {
   display: flex;
@@ -48,7 +48,56 @@
   font-size: 26rpx;
   color: rgba(0, 0, 0, 0.74);
 }
+.worksBox .work .workContent {
+  font-size: 0px;
+}
+.worksBox .work .workContent .videoBox {
+  position: relative;
+  width: 100%;
+  height: 422rpx;
+}
+.worksBox .work .workContent .videoBox .cover {
+  width: 100%;
+  height: 100%;
+}
+.worksBox .work .workContent .videoBox .play {
+  position: absolute;
+  left: 50%;
+  top: 40%;
+  width: 90rpx;
+  height: 90rpx;
+  transform: translate(-50%);
+}
 .worksBox .work .workContent .video {
   width: 100%;
   height: 422rpx;
 }
+.worksBox .work .workFooter .title {
+  padding: 14rpx 20rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+.worksBox .work .workFooter .mange {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14rpx 20rpx 30rpx;
+}
+.worksBox .work .workFooter .mange .mangeL {
+  display: flex;
+  align-items: center;
+}
+.worksBox .work .workFooter .mange .mangeL .mangeL-box {
+  display: flex;
+  align-items: center;
+  margin-right: 30rpx;
+}
+.worksBox .work .workFooter .mange .mangeL .mangeL-box .icon {
+  width: 44rpx;
+  height: 44rpx;
+}
+.worksBox .work .workFooter .mange .mangeL .mangeL-box .icon-name {
+  font-weight: bold;
+  margin-left: 10rpx;
+  font-size: 28rpx;
+}

utils/const.js

@@ -5,6 +5,6 @@ module.exports = {
   productApi:  'https://reader-test.efunbox.cn/readerProduct/',
   // baseApi: 'https://reader.lingjiao.cn/readerBase/'
   // baseApi: 'https://readertest.lingjiao.cn:442/readerBase/'
-  baseApi: 'https://reader-api.efunbox.cn/'
-  // baseApi: 'https://reader-api.efunbox.cn/'
+  baseApi: 'https://reader-api.ai160.com//'
+  // baseApi: 'https://reader-api.ai160.com//'
 }

utils/request.js

@@ -1,5 +1,4 @@
-// let baseUrl = 'https://reader-api.efunbox.cn/wx'
-let baseUrl = 'https://reader-api.efunbox.cn/wx'
+let baseUrl = 'https://reader-api.ai160.com//wx'
 
 
 function request(url, method, data, abort = false) {