页面构成
This commit is contained in:
Abin
@@ -0,0 +1,162 @@
|
||||
// pages/Videodetails/Videodetails.js
|
||||
const MyApi = require('../../Api/api.js');
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
BaseURL:getApp().globalData.BaseURL,
|
||||
JustChapter:"",
|
||||
zhangjieTitle:"",
|
||||
VideoImageURL:"",
|
||||
VideoTitle:"",
|
||||
VideoDetails:"",
|
||||
RealeaseTime:"",
|
||||
shichangTime:"",
|
||||
playdata:[],
|
||||
VideoPlayerSrc:null,
|
||||
coursedata:null,
|
||||
top:0,
|
||||
HiddenVideoControl:true
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
//只有当登录才有效
|
||||
if (wx.getStorageSync('UserInfoCache').IsLogin) {
|
||||
var receivedIndex = options.index ?? null;
|
||||
|
||||
if (receivedIndex){
|
||||
|
||||
//分享页面跳转至课程页面
|
||||
try {
|
||||
wx.getStorageSync('UserInfoCache').OwnedCourse[receivedIndex];
|
||||
if (wx.getStorageSync('UserInfoCache').OwnedCourse[receivedIndex] === undefined){
|
||||
wx.showToast({
|
||||
title: '不可用！',
|
||||
icon: 'error',
|
||||
mask:true,
|
||||
duration: 3000
|
||||
});
|
||||
setTimeout(function() {
|
||||
wx.switchTab({
|
||||
url: '/pages/kecheng/kecheng',
|
||||
})
|
||||
},3000);
|
||||
}
|
||||
} catch (error) {
|
||||
wx.showToast({
|
||||
title: '不可用！',
|
||||
icon: 'error',
|
||||
mask:true,
|
||||
duration: 3000
|
||||
});
|
||||
setTimeout(function() {
|
||||
wx.switchTab({
|
||||
url: '/pages/kecheng/kecheng',
|
||||
})
|
||||
},3000);
|
||||
}
|
||||
var tempdata=wx.getStorageSync('UserInfoCache').OwnedCourse[receivedIndex];
|
||||
MyApi.ApiGetCourseData(tempdata.OpenID,tempdata.课程id)
|
||||
.then(result => {
|
||||
this.setData({
|
||||
VideoTitle:tempdata.课程,
|
||||
playdata:result.PlayData,
|
||||
VideoDetails:tempdata.课程介绍,
|
||||
VideoImageURL:this.data.BaseURL+"/Course/"+tempdata.课程id+".png",
|
||||
coursedata:tempdata,
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
this.setData({
|
||||
playdata:[],
|
||||
});
|
||||
console.error("请求失败："+err);
|
||||
});
|
||||
} else {
|
||||
wx.switchTab({
|
||||
url: '/pages/kecheng/kecheng',
|
||||
})
|
||||
}
|
||||
|
||||
} else {
|
||||
setTimeout(function() {
|
||||
wx.switchTab({
|
||||
url: '/pages/kecheng/kecheng',
|
||||
})
|
||||
},50);
|
||||
}
|
||||
},
|
||||
OnTapVideoList(e){
|
||||
//只有当登录才有效
|
||||
if (wx.getStorageSync('UserInfoCache').IsLogin) {
|
||||
// 获取当前点击的索引
|
||||
const currentcourseid = e.currentTarget.dataset.courseid;
|
||||
const currentzhangjieid = e.currentTarget.dataset.zhangjieid;
|
||||
const currentplayid = e.currentTarget.dataset.playid;
|
||||
this.setData({
|
||||
VideoPlayerSrc:this.data.BaseURL+"/Course/"+currentcourseid+"/"+currentzhangjieid+"/"+currentplayid+"/"+"playlist.m3u8",
|
||||
HiddenVideoControl:false,
|
||||
top:420
|
||||
});
|
||||
} else {
|
||||
setTimeout(function() {
|
||||
wx.switchTab({
|
||||
url: '/pages/kecheng/kecheng',
|
||||
})
|
||||
},50);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
if (!wx.getStorageSync('UserInfoCache').IsLogin) {
|
||||
setTimeout(function() {
|
||||
wx.switchTab({
|
||||
url: '/pages/kecheng/kecheng',
|
||||
})
|
||||
},50);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
<!--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"> {{VideoTitle}}</text>
|
||||
<text decode class="video_miaoshu"> {{VideoDetails}}</text>
|
||||
<text decode class="video_info"> 已更新{{playdata.length}}期</text>
|
||||
</view>
|
||||
|
||||
<!-- <text decode class="video_list_content">-- 目录 --</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-zhangjieid="{{item['章节id']}}" data-courseid="{{item['课程id']}}">
|
||||
<view class="videoimage">
|
||||
<image class="coverimage" src="{{BaseURL}}/Course/{{item['课程id']}}.png" 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,109 @@
|
||||
.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: 200rpx;
|
||||
}
|
||||
.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%;
|
||||
}
|
||||
Reference in New Issue
Block a user