页面构成

2026-01-05 18:07:57 +08:00
parent 66b2e3ddac
commit c2f0c46c4d
40 changed files with 2817 additions and 0 deletions
@@ -0,0 +1,131 @@
+// pages/Videodetails/Videodetails.js
+const MyApi = require('../../Api/api.js');
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    BaseURL:getApp().globalData.BaseURL,
+    JustChapter:"",
+    zhangjieTitle:"",
+    VideoImageURL:"",
+    VideoTitle:"",
+    RealeaseTime:"",
+    shichangTime:"",
+    playdata:[],
+    VideoPlayerSrc:null,
+    coursedata:null,
+    top:0,
+    HiddenVideoControl:true,
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+//只有当登录才有效
+    if (wx.getStorageSync('UserInfoCache').IsLogin) {
+      //获取接收到的视频序号
+    var receivedIndex = options.number ?? null;
+    if (receivedIndex){
+
+      MyApi.ApiGetFreeCourseData(receivedIndex)
+      .then(result => {
+        this.setData({
+          VideoTitle:result.PlayData[0].课程名称,
+          playdata:result.PlayData,
+          VideoImageURL:this.data.BaseURL+"/Course/"+result.课程id+".png",
+          coursedata:result,
+        });
+      })
+      .catch(err => {
+        this.setData({
+          playdata:[],
+        });
+        console.error("请求失败："+err);
+      });
+      } else {
+        wx.switchTab({
+          url: '/pages/index/index',
+        })
+    }
+
+    } else {
+      setTimeout(function() {
+        wx.switchTab({
+          url: '/pages/index/index',
+        })
+       },50);
+    }
+  },
+  OnTapVideoList(e){
+    //只有当登录才有效
+    if (wx.getStorageSync('UserInfoCache').IsLogin) {
+      // 获取当前点击的索引
+
+    const courseindex = e.currentTarget.dataset.courseindex;
+
+
+    this.setData({
+      VideoPlayerSrc:this.data.BaseURL+'/'+this.data.coursedata.PlayData[courseindex].视频m3u8,
+      HiddenVideoControl:false,
+      top:420,
+    });
+  } else {
+    setTimeout(function() {
+      wx.switchTab({
+        url: '/pages/index/index',
+      })
+     },50);
+  }
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+    if (!wx.getStorageSync('UserInfoCache').IsLogin) {
+        setTimeout(function() {
+          wx.switchTab({
+            url: '/pages/index/index',
+          })
+         },50);
+    }
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  }
+})
@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}
@@ -0,0 +1,25 @@
+<!--pages/Videodetails/Videodetails.wxml-->
+<video hidden="{{HiddenVideoControl}}" class="videoplayer" src="{{VideoPlayerSrc}}"/>
+<scroll-view class="scrollarea" scroll-y type="list" style="top:{{top}}rpx;">
+<view class="jieshao" >
+<text decode class="video_biaoti">&nbsp;&nbsp;{{VideoTitle}}</text>
+<text decode class="video_info">&nbsp;&nbsp;已更新{{playdata.length}}期</text>
+</view>
+
+<!-- <text decode class="video_list_content">--&nbsp;&nbsp;目录&nbsp;&nbsp;--</text> -->
+
+    <view class="videolistcontainer" bind:tap="OnTapVideoList" 
+    wx:for="{{playdata}}" wx:for-item="item" wx:for-index="index" wx:key="index" data-playid="{{item['播放id']}}"  data-courseIndex="{{index}}">
+        <view class="videoimage">
+            <image class="coverimage" src="{{BaseURL}}/{{item['封面图片']}}" mode="aspectFill" />
+        </view>
+        <view class="videoinfo">
+            <text class="videotitle">{{item['视频标题']}}</text>
+            <text class="videodetails">{{item['详细介绍']}}</text>
+            <view class="videoinfo2">
+                <text class="videodata">{{item['发布日期']}}</text>
+                <text class="videotime">{{item['时长']}}min</text>
+            </view>
+        </view>
+    </view>
+</scroll-view>
@@ -0,0 +1,111 @@
+.videoplayer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 420rpx;
+  width: 750rpx;
+  z-index: 999;
+}
+.scrollarea {
+  position: relative;
+  top: 420rpx;
+  flex: 1;
+  overflow-y: hidden;
+  
+}
+
+.jieshao {
+margin-bottom: 10rpx;
+/* box-shadow: 0 4rpx 4rpx rgba(150, 150, 150, 0.5); */
+position: relative;
+/* height: 100rpx; */
+display: block;
+}
+.video_biaoti {
+text-align: center;
+  display: block;
+  font-size: 40rpx;
+}
+
+.video_miaoshu {
+text-align: center;
+  display: block;
+  font-size: 30rpx;
+}
+.video_info {
+  position: absolute;
+  bottom: 10rpx;
+  display: block;
+  font-size: 24rpx;
+  right: 30rpx;
+}
+.video_list_content {
+margin: 10rpx 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+
+.videolistcontainer {
+border-radius: 20rpx;
+margin: 10rpx 10rpx;
+box-shadow: 0 0 4rpx rgba(0, 0, 0, 0.5);
+  width: 730rpx;
+  height: 200rpx;
+  position: relative;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  text-align: left;
+  overflow: hidden;
+}
+
+
+
+.videoimage {
+  width: 320rpx;
+  height: 180rpx;
+  border-radius: 10rpx;
+  margin-left: 10rpx;
+  overflow: hidden;
+  box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.5);
+}
+
+.videoinfo{
+  position: relative;
+  width: 390rpx;
+  height: 180rpx;
+  border-radius: 10rpx;
+  margin-left: 20rpx;
+  overflow: hidden;
+}
+.videotitle {
+  text-align: left;
+  font-size: 30rpx;
+}
+.videodetails {
+  display: block;
+  margin: 10rpx 0rpx;
+  font-size: 25rpx;
+  line-height: 30rpx;
+}
+
+.videoinfo2 {
+  position:absolute;
+  bottom: 0;
+  display: flex;
+  justify-content:left;
+}
+.videodata {
+  font-size: 20rpx;
+}
+
+.videotime {
+  font-size: 20rpx;
+  margin-left: 40rpx;
+}
+.coverimage {
+  width: 100%;
+  height: 100%;
+}