四端上传

2026-09-29 15:25:40 +08:00
1 parent 25bbb5f9c8
commit c6e2cb4d5b
@@ -0,0 +1,56 @@
+// pages/IndexFreeCourseDetails/IndexFreeCourseDetails.js
+const api = require('../../utils/api');
+const format = require('../../utils/format');
+
+Page({
+  data: {
+    VideoTitle: '',
+    playdata: [],
+    VideoPlayerSrc: '',
+    HiddenVideoControl: true,
+    top: 0,
+  },
+
+  onLoad(options) {
+    const seriesNo = options.seriesNo;
+    if (!seriesNo) {
+      wx.switchTab({ url: '/pages/index/index' });
+      return;
+    }
+
+    api
+      .getFreeLessons(Number(seriesNo))
+      .then((list) => {
+        const rows = (list || []).map((item) => ({
+          coverUrl: item.coverUrl,
+          videoTitle: item.videoTitle,
+          intro: item.intro,
+          publishedAt: format.toDateString(item.publishedAt),
+          duration: item.duration,
+          videoUrl: item.videoUrl,
+        }));
+        this.setData({
+          playdata: rows,
+          VideoTitle: rows.length ? rows[0].videoTitle || '' : '',
+        });
+      })
+      .catch((err) => {
+        console.error('[IndexFreeCourseDetails] 加载失败', err);
+        this.setData({ playdata: [] });
+      });
+  },
+
+  onTapLesson(e) {
+    const item = this.data.playdata[e.currentTarget.dataset.index];
+    if (!item || !item.videoUrl) {
+      wx.showToast({ title: '该课时暂无视频', icon: 'none' });
+      return;
+    }
+    this.setData({ VideoPlayerSrc: item.videoUrl, HiddenVideoControl: false, top: 420 });
+  },
+
+  onShareAppMessage() {
+    return { title: '叶雷讲数学', path: '/pages/index/index' };
+  },
+});
+
@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}
@@ -0,0 +1,23 @@
+<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>
+
+  <view class="videolistcontainer" bind:tap="onTapLesson"
+    wx:for="{{playdata}}" wx:for-item="item" wx:for-index="index" wx:key="index" data-index="{{index}}">
+    <view class="videoimage">
+      <image class="coverimage" src="{{item.coverUrl}}" mode="aspectFill" />
+    </view>
+    <view class="videoinfo">
+      <text class="videotitle">{{item.videoTitle}}</text>
+      <text class="videodetails">{{item.intro}}</text>
+      <view class="videoinfo2">
+        <text class="videodata">{{item.publishedAt}}</text>
+        <text class="videotime">{{item.duration}}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%;
+}