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 { ...@@ -204,5 +204,13 @@ export default {
// 邀请列表查询 // 邀请列表查询
queryInviteList(params){ queryInviteList(params){
return request(`${cffpURL}/partner/queryInviteList`, "POST", 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> <template>
<view class="container"> <view class="container">
<view class="classInfo"> <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>
<!-- 订单支付明细 --> <!-- 订单支付明细 -->
<view class="payInfoBox"> <view class="payInfoBox">
......
pages/courseDetail/courseDetail.vue
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<view class="courseProBox"> <view class="courseProBox">
<!-- tab区域 --> <!-- tab区域 -->
<view class="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===2}" @click="switchTab(2)">相关课程</text>
<text :class="{'actived': tabType===3}" @click="switchTab(3)">讲师</text> <text :class="{'actived': tabType===3}" @click="switchTab(3)">讲师</text>
</view> </view>
...@@ -36,17 +36,18 @@ ...@@ -36,17 +36,18 @@
<view class="relationCourseListsContent" v-show="tabType===2"> <view class="relationCourseListsContent" v-show="tabType===2">
<view class="totalCourseCount"> <view class="totalCourseCount">
<text v-if="requiredCount">{{requiredCount}}节必修</text> <text v-if="requiredCount">{{requiredCount}}节必修</text>
<text v-if="nonRequiredCount">{{nonRequiredCount}}节必修</text> <text v-if="nonRequiredCount"> + {{nonRequiredCount}}节必修</text>
</view> </view>
<view class="courseItemContent" v-for="(item,index) in relatedCoursesLists" :key="item.fileId"> <view class="courseItemContent" v-for="(item,index) in relatedCoursesLists" :key="item.fileId">
<view class="courseInfoContent"> <view class="courseInfoContent">
<h4>{{index + 1}}.{{item.fileTitle}}<text class="courseType">{{item.fileType=='1' ? '必修' : '选修'}}</text></h4> <h4>{{index + 1}}.{{item.fileTitle}}<text class="courseType">{{item.fileType=='1' ? '必修' : '选修'}}</text></h4>
<view class="timeContent"> <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> </view>
<view class="statusBtnContent"> <view class="statusBtnContent" @click="play(item)">
<text>{{courseInfo.status === 1 ? '' : '播放'}}</text> <i class="iconfont icon-24gf-playCircle" :style="{'opacity':courseInfo.status == 1 ? '0.5' : '1'}"></i>
<text>{{courseInfo.status == 1 ? '不可播放' : '播放'}}</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -54,7 +55,7 @@ ...@@ -54,7 +55,7 @@
<view class="lecturerContent" v-if="tabType===3"> <view class="lecturerContent" v-if="tabType===3">
<view class="lecturerIntro"> <view class="lecturerIntro">
<view class="lecturerUrl"> <view class="lecturerUrl">
<image :src="lecturerInfo.lecturerUrl"></image> <image :src="lecturerInfo.lecturerUrl" mode="widthFix"></image>
</view> </view>
<view> <view>
<p><text class="lecturerName">{{lecturerInfo.lecturerName}}</text></p> <p><text class="lecturerName">{{lecturerInfo.lecturerName}}</text></p>
...@@ -69,7 +70,7 @@ ...@@ -69,7 +70,7 @@
<view v-html="lecturerInfo?.lecturerIntroduce" class="lecturerText richTextContent"></view> <view v-html="lecturerInfo?.lecturerIntroduce" class="lecturerText richTextContent"></view>
</view> </view>
<!-- 购买按钮 --> <!-- 购买按钮 -->
<view class="buyBox" @click="saveOrder()"> <view class="buyBox" @click="saveOrder()" v-if="courseInfo.status == 1">
<text>购买</text> <text>购买</text>
</view> </view>
</view> </view>
...@@ -96,7 +97,8 @@ ...@@ -96,7 +97,8 @@
shareReadId:'', shareReadId:'',
dataSource:'1', dataSource:'1',
requiredCount:0, requiredCount:0,
nonRequiredCount:0 nonRequiredCount:0,
videoPlaybackInfo:{},
}; };
}, },
methods:{ methods:{
...@@ -154,7 +156,7 @@ ...@@ -154,7 +156,7 @@
}, },
// 课程详情页面 // 课程详情页面
courseDetail(){ 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); console.log('课程详情',res);
if(res['success']){ if(res['success']){
this.courseInfo = res['data']['data']; this.courseInfo = res['data']['data'];
...@@ -165,7 +167,7 @@ ...@@ -165,7 +167,7 @@
}, },
// 相关课程查询 // 相关课程查询
relatedCoursesList(){ relatedCoursesList(){
api.relatedCoursesList({fileId:this.fileId}).then(res=>{ api.relatedCoursesList({fileId:this.fileId,packFileId:this.courseInfo.packFileId}).then(res=>{
console.log('相关课程详情',res); console.log('相关课程详情',res);
if(res['success']){ if(res['success']){
this.relatedCoursesLists = res['data']['data']['relatedCourseList']; this.relatedCoursesLists = res['data']['data']['relatedCourseList'];
...@@ -178,12 +180,58 @@ ...@@ -178,12 +180,58 @@
// 秒转时分秒格式 // 秒转时分秒格式
secondsTransferPipe(value){ secondsTransferPipe(value){
return dataHandling.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(){ mounted(){
this.switchTab(1) this.switchTab(1);
this.findVideoPlayback()
}, },
onLoad(option){ onLoad(option){
this.fileId = option.fileId; this.fileId = option.fileId;
...@@ -244,6 +292,17 @@ ...@@ -244,6 +292,17 @@
.tabContent{ .tabContent{
padding-bottom: 200rpx; padding-bottom: 200rpx;
background-color: #fff; background-color: #fff;
.statusBtnContent{
display: flex;
flex-direction: column;
align-items: center;
color: #999;
font-size: 20rpx;
.iconfont{
font-size: 60rpx;
color: #5359CD;
}
}
.lecturerContent{ .lecturerContent{
.lecturerIntro{ .lecturerIntro{
display: flex; display: flex;
......
pages/orderDetail/orderDetail.vue
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
</view> </view>
</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 class="dropBtn" @click="dropClasses()">退课</view>
</view> </view>
</view> </view>
...@@ -45,7 +45,8 @@ ...@@ -45,7 +45,8 @@
{id:12,name:'课程状态',value:'/',type:'string',alias:'courseStatusName',pageArea:2}, {id:12,name:'课程状态',value:'/',type:'string',alias:'courseStatusName',pageArea:2},
{id:13,name:'观看截至',value:'/',type:'string',alias:'effectiveEndDate',pageArea:2} {id:13,name:'观看截至',value:'/',type:'string',alias:'effectiveEndDate',pageArea:2}
], ],
type:'' type:'',
orderDetail:{}
}; };
}, },
methods:{ methods:{
...@@ -56,7 +57,7 @@ ...@@ -56,7 +57,7 @@
} }
api.userCourseInfo(param).then(res=>{ api.userCourseInfo(param).then(res=>{
if(res['success']){ if(res['success']){
const data = res['data']['orderDetail']; const data = this.orderDetail = res['data']['orderDetail'];
this.fileId = data.fileId; this.fileId = data.fileId;
Object.keys(data).map((key,item)=>{ Object.keys(data).map((key,item)=>{
this.orderInfoList.forEach(val=>{ this.orderInfoList.forEach(val=>{
...@@ -65,7 +66,6 @@ ...@@ -65,7 +66,6 @@
} }
}) })
}) })
} }
}) })
}, },
......
static/font/demo_index.html
...@@ -55,6 +55,12 @@ ...@@ -55,6 +55,12 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <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> <span class="icon iconfont">&#xe60a;</span>
<div class="name">勾</div> <div class="name">勾</div>
<div class="code-name">&amp;#xe60a;</div> <div class="code-name">&amp;#xe60a;</div>
...@@ -288,9 +294,9 @@ ...@@ -288,9 +294,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1668588671294') format('woff2'), src: url('iconfont.woff2?t=1669109385781') format('woff2'),
url('iconfont.woff?t=1668588671294') format('woff'), url('iconfont.woff?t=1669109385781') format('woff'),
url('iconfont.ttf?t=1668588671294') format('truetype'); url('iconfont.ttf?t=1669109385781') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
...@@ -317,6 +323,15 @@ ...@@ -317,6 +323,15 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <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> <span class="icon iconfont icon-gou"></span>
<div class="name"> <div class="name">
勾 勾
...@@ -669,6 +684,14 @@ ...@@ -669,6 +684,14 @@
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <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> <use xlink:href="#icon-gou"></use>
</svg> </svg>
<div class="name">勾</div> <div class="name">勾</div>
......
static/font/iconfont.css
@font-face { @font-face {
font-family: "iconfont"; /* Project id 3749283 */ font-family: "iconfont"; /* Project id 3749283 */
src: url('iconfont.woff2?t=1668588671294') format('woff2'), src: url('iconfont.woff2?t=1669109385781') format('woff2'),
url('iconfont.woff?t=1668588671294') format('woff'), url('iconfont.woff?t=1669109385781') format('woff'),
url('iconfont.ttf?t=1668588671294') format('truetype'); url('iconfont.ttf?t=1669109385781') format('truetype');
} }
.iconfont { .iconfont {
...@@ -13,6 +13,10 @@ ...@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-24gf-playCircle:before {
content: "\ea82";
}
.icon-gou:before { .icon-gou:before {
content: "\e60a"; content: "\e60a";
} }
......
static/font/iconfont.json
...@@ -6,6 +6,13 @@ ...@@ -6,6 +6,13 @@
"description": "", "description": "",
"glyphs": [ "glyphs": [
{ {
"icon_id": "7594157",
"name": "24gf-playCircle",
"font_class": "24gf-playCircle",
"unicode": "ea82",
"unicode_decimal": 60034
},
{
"icon_id": "1249047", "icon_id": "1249047",
"name": "勾", "name": "勾",
"font_class": "gou", "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