布局

pages/index/index.js

@@ -1,88 +1,92 @@
 const app = getApp()
 import {
-  getHotrecommendList
+    getHotrecommendList
 } from "~/api/works"
 import reachBottom from '~/mixins/reachBottom'
 import {
-  createStoreBindings
+    createStoreBindings
 } from 'mobx-miniprogram-bindings'
 import {
-  store
+    store
 } from '~/store/index'
 Page({
-  behaviors: [reachBottom],
-  /**
-   * 页面的初始数据
-   */
-  data: {
-    navBarHeight: app.globalData.navBarHeight,
-    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
-    currentType: '1',
-    // 控制一级分类是否固定
-    isFixed: false
-  },
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onShow() {
-    if (typeof this.getTabBar === 'function') {
-      this.getTabBar().setData({
-        selected: 1
-      })
-    }
-    getApp().callBack = (res) => {
-      this.storeBindings = createStoreBindings(this, {
-        store,
-        fields: {
-          userInfo: 'userInfo'
-        },
-      })
-      this.storeBindings.updateStoreBindings()
-      this.loadMore()
-    }
-  },
-  onUnload() {
-    this.storeBindings.destroyStoreBindings()
-  },
-  loadMore() {
-    if (this.data.currentType == '1') {
-      this.getData(getHotrecommendList, {
-        grade: this.data.userInfo.grade
-      })
-    } else if (this.data.currentType == '2') {
-      this.getData(getHotrecommendList, {
-        grade: 'PRESCHOOL'
-      })
-    }
-
-  },
-  /**
-   * 监听页面滚动事件
-   */
-  onPageScroll(e) {
-    if (e.scrollTop >= 103 && !this.data.isFixed) {
-      this.setData({
-        isFixed: true
-      })
-    } else if (e.scrollTop < 103 && this.data.isFixed) {
-      this.setData({
+    behaviors: [reachBottom],
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        navBarHeight: app.globalData.navBarHeight,
+        background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
+        currentType: '1',
+        // 控制一级分类是否固定
         isFixed: false
-      })
-    }
-  },
+    },
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onShow() {
+        if (typeof this.getTabBar === 'function') {
+            this.getTabBar().setData({
+                selected: 1
+            })
+        }
+        this.storeBindings = createStoreBindings(this, {
+            store,
+            fields: {
+                userInfo: 'userInfo'
+            },
+        })
+        this.storeBindings.updateStoreBindings()
+        if (wx.getStorageSync('uid')) {
+            this.loadMore()
+        } else {
+            getApp().callBack = (res) => {
+                this.loadMore()
+            }
+        }
+    },
+    onUnload() {
+        this.storeBindings.destroyStoreBindings()
+    },
+    loadMore() {
+        if (this.data.currentType == '1') {
+            this.getData(getHotrecommendList, {
+                grade: this.data.userInfo.grade
+            })
+        } else if (this.data.currentType == '2') {
+            this.getData(getHotrecommendList, {
+                grade: 'PRESCHOOL'
+            })
+        }
+
+    },
+    /**
+     * 监听页面滚动事件
+     */
+    onPageScroll(e) {
+        if (e.scrollTop >= 103 && !this.data.isFixed) {
+            this.setData({
+                isFixed: true
+            })
+        } else if (e.scrollTop < 103 && this.data.isFixed) {
+            this.setData({
+                isFixed: false
+            })
+        }
+    },
 
-  onReachBottom() {
-    this.loadMore()
-  },
-  selectType({
-    target
-  }) {
-    if (target.dataset.type) {
-      this.setData({
-        currentType: target.dataset.type
-      })
-      this.resetData()
-    }
-  },
+    onReachBottom() {
+        this.loadMore()
+    },
+    selectType({
+        target
+    }) {
+        if (target.dataset.type) {
+            this.setData({
+                currentType: target.dataset.type
+            })
+            this.resetData()
+        }
+    },
 
 })

pages/reading/index.js

@@ -1,66 +1,31 @@
-// pages/reading/index.js
+import {
+    getreadInfo
+} from '~/api/video'
 Page({
-
-  /**
-   * 页面的初始数据
-   */
-  data: {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad(options) {
-    console.log(options);
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload() {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {
-
-  }
+    data: {
+        videoInfo: {}
+    },
+    onLoad(options) {
+        let videoId = options.videoId
+        this.getreadInfo(videoId)
+    },
+    async getreadInfo(videoId) {
+        let videoInfo = await getreadInfo(videoId)
+        console.log(videoInfo);
+        wx.setNavigationBarTitle({
+            title: videoInfo.userRead.title
+        })
+        this.setData({
+            videoInfo
+        })
+    },
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+    onShareAppMessage() {
+
+    }
 })

pages/reading/index.less

@@ -1 +1,62 @@
-/* pages/reading/index.wxss */
+.readingBox {
+    position: relative;
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+
+
+    #myVideo {
+        width: 100%;
+        height: 422rpx;
+    }
+
+    .content {
+        flex: 1;
+        width: 100%;
+    }
+
+    .controller {
+        width: 100%;
+        height: 110rpx;
+        position: absolute;
+        bottom: 0px;
+        left: 0px;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        padding-bottom: env(safe-area-inset-bottom);
+        box-shadow: rgba(14, 30, 37, 0.12) 0px 2rpx 4rpx 0px, rgba(14, 30, 37, 0.32) 0px 2rpx 16rpx 0px;
+        background-color: white;
+        z-index: 10;
+
+        .playImg {
+            position: absolute;
+            top: -62rpx;
+            border-radius: 50%;
+            width: 114rpx;
+            height: 114rpx;
+            box-shadow: #4EC4FF 0px 0rpx 14rpx;
+        }
+
+        .text {
+            position: absolute;
+            top: 60rpx;
+            font-size: 28rpx;
+        }
+    }
+
+    .playImgBg {
+        position: absolute;
+        width: 126rpx;
+        height: 126rpx;
+        z-index: 1;
+        left: -2rpx;
+        right: 0px;
+        margin: auto;
+        bottom: calc(54rpx + env(safe-area-inset-bottom));
+        background-color: white;
+        box-shadow: rgba(14, 30, 37, 0.12) 0px 2rpx 4rpx 0px, rgba(14, 30, 37, 0.32) 0px 2rpx 16rpx 0px;
+        border-radius: 50%;
+    }
+}

pages/reading/index.wxml

@@ -1,2 +1,12 @@
-<!--pages/reading/index.wxml-->
-<text>pages/reading/index.wxml</text>
+<view class="readingBox">
+    <video id="myVideo" src="{{videoInfo.userRead.videoPath}}" controls="{{false}}"
+        show-center-play-btn="{{false}}"></video>
+    <view class="content">
+
+    </view>
+    <view class="controller">
+        <image src="/static/work.png" class="playImg" mode="" />
+        <view class="text">开始挑战</view>
+    </view>
+    <view class="playImgBg"></view>
+</view>

pages/reading/index.wxss

@@ -1 +1,55 @@
-/* pages/reading/index.wxss */
+.readingBox {
+  position: relative;
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+}
+.readingBox #myVideo {
+  width: 100%;
+  height: 422rpx;
+}
+.readingBox .content {
+  flex: 1;
+  width: 100%;
+}
+.readingBox .controller {
+  width: 100%;
+  height: 110rpx;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding-bottom: env(safe-area-inset-bottom);
+  box-shadow: rgba(14, 30, 37, 0.12) 0px 2rpx 4rpx 0px, rgba(14, 30, 37, 0.32) 0px 2rpx 16rpx 0px;
+  background-color: white;
+  z-index: 10;
+}
+.readingBox .controller .playImg {
+  position: absolute;
+  top: -62rpx;
+  border-radius: 50%;
+  width: 114rpx;
+  height: 114rpx;
+  box-shadow: #4EC4FF 0px 0rpx 14rpx;
+}
+.readingBox .controller .text {
+  position: absolute;
+  top: 60rpx;
+  font-size: 28rpx;
+}
+.readingBox .playImgBg {
+  position: absolute;
+  width: 126rpx;
+  height: 126rpx;
+  z-index: 1;
+  left: -2rpx;
+  right: 0px;
+  margin: auto;
+  bottom: calc(54rpx + env(safe-area-inset-bottom));
+  background-color: white;
+  box-shadow: rgba(14, 30, 37, 0.12) 0px 2rpx 4rpx 0px, rgba(14, 30, 37, 0.32) 0px 2rpx 16rpx 0px;
+  border-radius: 50%;
+}