Skip to content

C
CFFP-HB
Commit e86ec7b9 by kyle
Options

课程详情

parent af0d263a
Showing with 124 additions and 23 deletions
api/api.ts
......@@ -204,5 +204,13 @@ export default {
// 邀请列表查询
queryInviteList(params){
return request(`${cffpURL}/partner/queryInviteList`, "POST", params)
}
},
// 视频播放轨迹保存
saveVideoPlayback(params){
return request(`${apiURL}/videoPlay/saveVideoPlayback`, "POST", params)
},
// 查询视频播放最新记录
findVideoPlayback(params){
return request(`${apiURL}/videoPlay/findVideoPlayback`, "POST", params)
},
}
pages/applyDropClass/applyDropClass.vue
<template>
<view class="container">
<view class="classInfo">
<course-item :thumbnailPath="courseInfoItem.displayImage" :title="courseInfoItem.fileTitle" :summaryBox="courseInfoItem.fileSynopsis" :dataList="{coursePrice:courseInfoItem.coursePrice,salesNumber:courseInfoItem.salesNumber}" :fileLecturerId="item.fileLecturerId"></course-item>
<course-item :thumbnailPath="courseInfoItem.displayImage" :title="courseInfoItem.fileTitle" :summaryBox="courseInfoItem.fileSynopsis" :dataList="{coursePrice:courseInfoItem.coursePrice,salesNumber:courseInfoItem.salesNumber}" :fileLecturerId="courseInfoItem.fileLecturerId"></course-item>
</view>
<!-- 订单支付明细 -->
<view class="payInfoBox">
......
pages/courseDetail/courseDetail.vue
......@@ -22,7 +22,7 @@
<view class="courseProBox">
<!-- tab区域 -->
<view class="tab">
<text :class="{'actived': tabType===1}" @click="switchTab(1)">介绍</text>
<text :class="{'actived': tabType===1}" @click="switchTab(1)">详情</text>
<text :class="{'actived': tabType===2}" @click="switchTab(2)">相关课程</text>
<text :class="{'actived': tabType===3}" @click="switchTab(3)">讲师</text>
</view>
......@@ -36,17 +36,18 @@
<view class="relationCourseListsContent" v-show="tabType===2">
<view class="totalCourseCount">
<text v-if="requiredCount">{{requiredCount}}节必修</text>
<text v-if="nonRequiredCount">{{nonRequiredCount}}节必修</text>
<text v-if="nonRequiredCount"> + {{nonRequiredCount}}节必修</text>
</view>
<view class="courseItemContent" v-for="(item,index) in relatedCoursesLists" :key="item.fileId">
<view class="courseInfoContent">
<h4>{{index + 1}}.{{item.fileTitle}}<text class="courseType">{{item.fileType=='1' ? '必修' : '选修'}}</text></h4>
<view class="timeContent">
<view class="">00:00/{{secondsTransferPipe(Number(item.courseTotalTime))}}</view>
<view class="">{{secondsTransferPipe(Number(item.maxViewTime))}}/{{secondsTransferPipe(Number(item.courseTotalTime))}}</view>
</view>
</view>
<view class="statusBtnContent">
<text>{{courseInfo.status === 1 ? '' : '播放'}}</text>
<view class="statusBtnContent" @click="play(item)">
<i class="iconfont icon-24gf-playCircle" :style="{'opacity':courseInfo.status == 1 ? '0.5' : '1'}"></i>
<text>{{courseInfo.status == 1 ? '不可播放' : '播放'}}</text>
</view>
</view>
</view>
......@@ -54,7 +55,7 @@
<view class="lecturerContent" v-if="tabType===3">
<view class="lecturerIntro">
<view class="lecturerUrl">
<image :src="lecturerInfo.lecturerUrl"></image>
<image :src="lecturerInfo.lecturerUrl" mode="widthFix"></image>
</view>
<view>
<p><text class="lecturerName">{{lecturerInfo.lecturerName}}</text></p>
......@@ -69,7 +70,7 @@
<view v-html="lecturerInfo?.lecturerIntroduce" class="lecturerText richTextContent"></view>
</view>
<!-- 购买按钮 -->
<view class="buyBox" @click="saveOrder()">
<view class="buyBox" @click="saveOrder()" v-if="courseInfo.status == 1">
<text>购买</text>
</view>
</view>
......@@ -96,7 +97,8 @@
shareReadId:'',
dataSource:'1',
requiredCount:0,
nonRequiredCount:0
nonRequiredCount:0,
videoPlaybackInfo:{},
};
},
methods:{
......@@ -154,7 +156,7 @@
},
// 课程详情页面
courseDetail(){
api.courseDetail({fileId:this.fileId,userId:1}).then(res=>{
api.courseDetail({fileId:this.fileId,userId:1,packFileId:this.courseInfo.packFileId}).then(res=>{
console.log('课程详情',res);
if(res['success']){
this.courseInfo = res['data']['data'];
......@@ -165,7 +167,7 @@
},
// 相关课程查询
relatedCoursesList(){
api.relatedCoursesList({fileId:this.fileId}).then(res=>{
api.relatedCoursesList({fileId:this.fileId,packFileId:this.courseInfo.packFileId}).then(res=>{
console.log('相关课程详情',res);
if(res['success']){
this.relatedCoursesLists = res['data']['data']['relatedCourseList'];
......@@ -178,12 +180,58 @@
// 秒转时分秒格式
secondsTransferPipe(value){
return dataHandling.secondsTransferPipe(value)
},
play(item){
if(this.courseInfo.status == 1){
// 不可播放
uni.showToast({
title: '购买才可观看哦~',
icon:'none',
duration: 2000
});
}else{
this.fileId = item.fileId;
this.courseInfo.packFileId = item.packFileId;
this.courseDetail()
}
},
saveVideoPlayback(){
// 视频播放轨迹保存
const param = {
systemType:1,
userId:this.userId,
fileId:this.fileId,
packFileId:this.courseInfo.packFileId,
totalTime:this.courseInfo.totalTime,
viewTime:this.courseInfo.viewTime,
playbackStatus:this.courseInfo.viewTime >= this.courseInfo.totalTime ? '2' : '1'
}
api.findVideoPlayback(param).then(res=>{
if(res['success']){
this.videoPlaybackInfo = res['data']
}
})
},
findVideoPlayback(){
// 查询视频播放最新记录
const param = {
systemType:1,
userId:this.userId,
fileId:this.fileId,
packFileId:this.courseInfo.packFileId
}
api.findVideoPlayback(param).then(res=>{
if(res['success']){
this.videoPlaybackInfo = res['data']
}
})
}
},
mounted(){
this.switchTab(1)
this.switchTab(1);
this.findVideoPlayback()
},
onLoad(option){
this.fileId = option.fileId;
......@@ -244,6 +292,17 @@
.tabContent{
padding-bottom: 200rpx;
background-color: #fff;
.statusBtnContent{
display: flex;
flex-direction: column;
align-items: center;
color: #999;
font-size: 20rpx;
.iconfont{
font-size: 60rpx;
color: #5359CD;
}
}
.lecturerContent{
.lecturerIntro{
display: flex;
......
pages/orderDetail/orderDetail.vue
......@@ -14,7 +14,7 @@
</view>
</view>
<!-- 退课 -->
<view class="dropClassBox" v-if="type=='drop'">
<view class="dropClassBox" v-if="type=='drop' && orderDetail.operationStatus == '1'">
<view class="dropBtn" @click="dropClasses()">退课</view>
</view>
</view>
......@@ -45,7 +45,8 @@
{id:12,name:'课程状态',value:'/',type:'string',alias:'courseStatusName',pageArea:2},
{id:13,name:'观看截至',value:'/',type:'string',alias:'effectiveEndDate',pageArea:2}
],
type:''
type:'',
orderDetail:{}
};
},
methods:{
......@@ -56,7 +57,7 @@
}
api.userCourseInfo(param).then(res=>{
if(res['success']){
const data = res['data']['orderDetail'];
const data = this.orderDetail = res['data']['orderDetail'];
this.fileId = data.fileId;
Object.keys(data).map((key,item)=>{
this.orderInfoList.forEach(val=>{
......@@ -65,7 +66,6 @@
}
})
})
}
})
},
......
static/font/demo_index.html
......@@ -55,6 +55,12 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xea82;</span>
<div class="name">24gf-playCircle</div>
<div class="code-name">&amp;#xea82;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60a;</span>
<div class="name">勾</div>
<div class="code-name">&amp;#xe60a;</div>
......@@ -288,9 +294,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1668588671294') format('woff2'),
url('iconfont.woff?t=1668588671294') format('woff'),
url('iconfont.ttf?t=1668588671294') format('truetype');
src: url('iconfont.woff2?t=1669109385781') format('woff2'),
url('iconfont.woff?t=1669109385781') format('woff'),
url('iconfont.ttf?t=1669109385781') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
......@@ -317,6 +323,15 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-24gf-playCircle"></span>
<div class="name">
24gf-playCircle
</div>
<div class="code-name">.icon-24gf-playCircle
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gou"></span>
<div class="name">
勾
......@@ -669,6 +684,14 @@
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-24gf-playCircle"></use>
</svg>
<div class="name">24gf-playCircle</div>
<div class="code-name">#icon-24gf-playCircle</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gou"></use>
</svg>
<div class="name">勾</div>
......
static/font/iconfont.css
@font-face {
font-family: "iconfont"; /* Project id 3749283 */
src: url('iconfont.woff2?t=1668588671294') format('woff2'),
url('iconfont.woff?t=1668588671294') format('woff'),
url('iconfont.ttf?t=1668588671294') format('truetype');
src: url('iconfont.woff2?t=1669109385781') format('woff2'),
url('iconfont.woff?t=1669109385781') format('woff'),
url('iconfont.ttf?t=1669109385781') format('truetype');
}
.iconfont {
......@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-24gf-playCircle:before {
content: "\ea82";
}
.icon-gou:before {
content: "\e60a";
}
......
static/font/iconfont.json
......@@ -6,6 +6,13 @@
"description": "",
"glyphs": [
{
"icon_id": "7594157",
"name": "24gf-playCircle",
"font_class": "24gf-playCircle",
"unicode": "ea82",
"unicode_decimal": 60034
},
{
"icon_id": "1249047",
"name": "勾",
"font_class": "gou",
......
static/font/iconfont.ttf
No preview for this file type
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment