Skip to content

Y
ydLife
Commit 99bcaf2d by Sweet Zhang
Options

课程详情页面

parent b65d82a6
Showing with 204 additions and 48 deletions
src/app/my/course-detail/course-detail.component.html
<div class="courseDetailContainer"> <div class="courseDetailContainer">
<div class="courseInitShow"> <div class="courseInitShow">
<video *ngIf="!pdfPath" #video <video *ngIf="!pdfPath" #video
[src]="videoSrc" [src]="fileUploadItem?.filePath"
controls="true" controls="true"
[poster]="fileUploadItem.displayImage" [poster]="fileUploadItem?.fileFirstImg"
width="100%" height="200px" preload="auto" (contextmenu)="menuPrevent()" x5-playsinline="true" playsinline="true" webkit-playsinline="true" disablePictureInPicture> width="100%" height="200px" preload="auto" (contextmenu)="menuPrevent()" x5-playsinline="true" playsinline="true" webkit-playsinline="true" disablePictureInPicture>
您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。
</video> </video>
</div> </div>
<div class="courseTitle"> <div class="courseTitle">
<h4>{{fileUploadItem.itemName}}</h4> <h4>{{fileUploadItem?.itemName}}</h4>
<div> <div>
<span *ngIf="pdfPath">立即阅读</span> <span *ngIf="pdfPath">立即阅读</span>
<span>不可下载</span> <span>不可下载</span>
...@@ -17,27 +18,61 @@ ...@@ -17,27 +18,61 @@
</div> </div>
<div class="courseIntroContent"> <div class="courseIntroContent">
<div class="tab"> <div class="tab">
<span class="actived">介绍</span> <span [ngClass]="{'actived': tabType===1}" (click)="switchTab(1)">介绍</span>
<span>目录</span> <span [ngClass]="{'actived': tabType===2}" (click)="switchTab(2)">目录</span>
<span>讲师</span> <span [ngClass]="{'actived': tabType===3}" (click)="switchTab(3)">讲师</span>
</div> </div>
<div class="courseSectionTotal">共X节</div> <div class="tabContent">
<div class="courseCatalogue"> <div class="introContent" *ngIf="tabType===1">
<ul> <p [innerHTML]="fileUploadItem?.fileIntroduce"></p>
<li> </div>
<div> <div class="catalogueContent" *ngIf="tabType===2">
<p>1.</p> <div class="courseSectionTotal">共{{fileUploadItemList?.length}}节</div>
<p> <div class="courseCatalogue">
<span>XXX</span> <ul>
<span>00:00/00:00</span> <li *ngFor="let fileUploadItem of fileUploadItemList;index as i" (click)="selectVideo(fileUploadItem)">
</p> <div>
<p>{{i + 1}}.</p>
<p>
<span>{{fileUploadItem?.itemName}}</span>
<span>{{fileUploadItem?.maxViewTime | secondsTransfer}}/{{fileUploadItem?.totalTime | secondsTransfer}}</span>
</p>
</div>
<div style="display: flex;flex-direction:column;align-items:center;width:58px;">
<p style="width: 30px;">
<img [src]="'assets/images/icons/' + (fileUploadItem.learningStatus == '3' ? 'disablePlay' : 'play') + '.png'" alt="" srcset="">
</p>
<p>{{fileUploadItem.learningStatus == '3' ? '不可播放' : '播放'}}</p>
</div>
</li>
</ul>
</div>
</div>
<div class="lecturerContent" *ngIf="tabType===3">
<div class="lecturerIntro">
<div class="lecturerUrl">
<img src="{{LecturerInfo?.lecturerUrl}}" alt="" srcset="">
</div> </div>
<div> <div>
<p></p> <p><span class="lecturerName">{{LecturerInfo?.lecturerName}}</span></p>
<p>播放</p> <ng-container *ngIf="LecturerInfo?.lecturerRankNames">
<p *ngFor="let item of LecturerInfo.lecturerRankNames.split(',')" class="lecturerTitle"><span>{{item}}</span></p>
</ng-container>
</div> </div>
</li> </div>
</ul> <h4>
<span>讲师介绍</span>
</h4>
<p [innerHTML]="LecturerInfo?.lecturerIntroduce" style="padding:0 14px 0px 14px;color:#333"></p>
</div>
</div> </div>
</div>
</div>
<!-- 提示弹窗 -->
<Modal [(ngModel)]="this.state.modal1" [transparent]="true" [maskClosable]="true" (onClose)="onClose('modal1')">
<div [ngStyle]="{ height: 100, overflow: 'scroll',color:'#000' }">
请完成上一个课程学习，此课程才能打开哦！
</div> </div>
</div> </Modal>
\ No newline at end of file \ No newline at end of file
src/app/my/course-detail/course-detail.component.scss
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
h4{ h4{
font-size: 20px; font-size: 20px;
color: #333; color: #333;
width: 70%;
} }
} }
.courseIntroContent{ .courseIntroContent{
...@@ -43,17 +44,20 @@ ...@@ -43,17 +44,20 @@
} }
} }
} }
.tabContent{
padding-bottom: 80px;
}
.courseSectionTotal{ .courseSectionTotal{
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
padding-left: 15px; padding-left: 15px;
color: #5F83FF; color: #5F83FF;
font-size: 16px; font-size: 16px;
border-bottom: 1px solid #f5f5f5;
} }
.courseCatalogue{ .courseCatalogue{
padding: 0 15px; padding: 0 15px;
height: 70px; background-color: #fff;
border-bottom: 1px solid #f5f5f5;
li{ li{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -75,6 +79,51 @@ ...@@ -75,6 +79,51 @@
} }
} }
} }
.lecturerContent{
.lecturerIntro{
display: flex;
padding: 19px 25px;
border-bottom: 1px solid #f5f5f5;
.lecturerUrl{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ccc;
overflow: hidden;
margin-right: 20px;
}
.lecturerName{
display: inline-block;
width: 96px;
height: 30px;
background: #5F83FF;
border-radius: 5px 5px 5px 5px;
opacity: 1;
color: #fff;
text-align: center;
line-height: 30px;
font-size: 20px;
}
.lecturerTitle{
font-size: 18px;
color: #5F83FF;
margin-top: 5px;
}
}
h4{
padding-left: 15px;
padding-top: 6px;
padding-bottom: 10px;
span{
border-bottom: 1px solid #333;
font-size: 15px;
}
}
}
.introContent{
padding: 14px;
}
} }
} }
\ No newline at end of file
src/app/my/course-detail/course-detail.component.ts
...@@ -10,9 +10,7 @@ import { MyService } from '../my.service'; ...@@ -10,9 +10,7 @@ import { MyService } from '../my.service';
}) })
export class CourseDetailComponent implements OnInit { export class CourseDetailComponent implements OnInit {
@ViewChild('video') video: ElementRef; @ViewChild('video') video: ElementRef;
videoSrc: string;
pdfPath: any; pdfPath: any;
permissions: any;
lifeCustomerInfo: any; lifeCustomerInfo: any;
timer: any; timer: any;
timer2: any; timer2: any;
...@@ -22,29 +20,75 @@ export class CourseDetailComponent implements OnInit { ...@@ -22,29 +20,75 @@ export class CourseDetailComponent implements OnInit {
deviceType:string; deviceType:string;
maxViewTime:number = 0; maxViewTime:number = 0;
status:string; status:string;
tabType:number = 1;
LecturerInfo:any;
public fileUploadItem:any; public fileUploadItem:any;
public fileUploadItemList:Array<any>;
public customerId:string = localStorage.getItem('lifeCustomerInfo') ? JSON.parse(localStorage.getItem('lifeCustomerInfo')).customerId : null; public customerId:string = localStorage.getItem('lifeCustomerInfo') ? JSON.parse(localStorage.getItem('lifeCustomerInfo')).customerId : null;
state = {
modal1: false,
};
onClose(key) {
this.state[key] = false;
}
constructor(private activatedRoute:ActivatedRoute,private myService:MyService,private lifeCommonService:LifeCommonService) { } constructor(private activatedRoute:ActivatedRoute,private myService:MyService,private lifeCommonService:LifeCommonService) { }
ngOnInit() { ngOnInit() {
this.fileId = this.activatedRoute.snapshot.params.fileId; this.fileId = this.activatedRoute.snapshot.params.fileId;
this.status = this.activatedRoute.snapshot.params.status; this.status = this.activatedRoute.snapshot.params.status;
this.deviceType = this.lifeCommonService.checkDeviceType(); this.deviceType = this.lifeCommonService.checkDeviceType();
this.videoSrc = sessionStorage.getItem('videoPath');
this.permissions = JSON.parse(sessionStorage.getItem('permissions'));
this.pdfPath = this.activatedRoute.snapshot.queryParams['path']; this.pdfPath = this.activatedRoute.snapshot.queryParams['path'];
this.lifeCustomerInfo = JSON.parse(localStorage.getItem('lifeCustomerInfo')); this.lifeCustomerInfo = JSON.parse(localStorage.getItem('lifeCustomerInfo'));
if(!this.pdfPath){ if(!this.pdfPath){
this.queryVideoPlayback(1); this.queryVideoPlayback(1);
} }
this.filePathQuery() this.filePathQuery(this.status,this.fileId)
}
// tab切换
switchTab(type){
this.tabType = type;
if(type===3){
this.lecturerQuery(this.fileUploadItem.fileLecturerId);
}else if(type==2){
this.filePathQuery(this.status,null)
}else{
this.filePathQuery(this.status,this.fileId)
}
} }
filePathQuery(){ filePathQuery(status,fileId){
this.myService.filePath('3','0','23','yd_trainning_file_type',null,this.customerId,this.status,this.fileId).subscribe(res=>{ this.myService.filePath('3','0','23','yd_trainning_file_type',null,this.customerId,status,fileId).subscribe(res=>{
console.log(res)
if(res['success']){ if(res['success']){
this.fileUploadItem = res['data']['fileUploadItemList'] ? res['data']['fileUploadItemList'][0] : ''; if(fileId){
this.fileUploadItem = res['data']['fileUploadItemList'] ? res['data']['fileUploadItemList'][0] : '';
if (this.fileUploadItem.isDownload == '2') {
this.video.nativeElement.setAttribute('controlslist', this.video.nativeElement.getAttribute('controlslist') + ' nodownload')
} else {
this.video.nativeElement.setAttribute('controlslist', this.video.nativeElement.getAttribute('controlslist'))
}
if (this.fileUploadItem.isControlPlayback == '2') {
this.video.nativeElement.setAttribute('controlslist', this.video.nativeElement.getAttribute('controlslist') + ' noplaybackrate')
} else {
this.video.nativeElement.setAttribute('controlslist', this.video.nativeElement.getAttribute('controlslist'))
}
}else{
this.fileUploadItemList = res['data']['fileUploadItemList'];
}
}
})
}
// 查询讲师信息
lecturerQuery(id){
const param = {
id:id
}
this.myService.lecturerQuery(param).subscribe(res=>{
if(res['success']){
this.LecturerInfo = res['data']['lecturerInfos'][0]
} }
}) })
} }
...@@ -65,16 +109,6 @@ export class CourseDetailComponent implements OnInit { ...@@ -65,16 +109,6 @@ export class CourseDetailComponent implements OnInit {
}, 1000 * 20) }, 1000 * 20)
this.queryVideoPlayback(2) this.queryVideoPlayback(2)
}); });
if (this.permissions.isDownload == '2') {
this.video.nativeElement.setAttribute('controlslist', this.video.nativeElement.getAttribute('controlslist') + ' nodownload')
} else {
this.video.nativeElement.setAttribute('controlslist', this.video.nativeElement.getAttribute('controlslist'))
}
if (this.permissions.isControlPlayback == '2') {
this.video.nativeElement.setAttribute('controlslist', this.video.nativeElement.getAttribute('controlslist') + ' noplaybackrate')
} else {
this.video.nativeElement.setAttribute('controlslist', this.video.nativeElement.getAttribute('controlslist'))
}
} }
} }
ngOnDestroy(): void { ngOnDestroy(): void {
...@@ -99,7 +133,7 @@ export class CourseDetailComponent implements OnInit { ...@@ -99,7 +133,7 @@ export class CourseDetailComponent implements OnInit {
playbackStatus: this.video.nativeElement.currentTime >= this.video.nativeElement.duration ? 2 : 1, playbackStatus: this.video.nativeElement.currentTime >= this.video.nativeElement.duration ? 2 : 1,
} }
this.myService.saveVideoPlayback(param).subscribe(res => { this.myService.saveVideoPlayback(param).subscribe(res => {
console.log(res);
}) })
} }
...@@ -113,7 +147,7 @@ export class CourseDetailComponent implements OnInit { ...@@ -113,7 +147,7 @@ export class CourseDetailComponent implements OnInit {
this.myService.queryVideoPlayback(param).subscribe(res => { this.myService.queryVideoPlayback(param).subscribe(res => {
if (res['success']) { if (res['success']) {
this.videoPlaybacks = res['data']['videoPlaybacks']; this.videoPlaybacks = res['data']['videoPlaybacks'];
this.maxViewTime = this.videoPlaybacks[0]['maxViewTime']; this.maxViewTime = this.videoPlaybacks[0] ? this.videoPlaybacks[0]['maxViewTime'] : 0;
if(type===1){ if(type===1){
// 设置开始播放时间为上次离开时间 // 设置开始播放时间为上次离开时间
this.originTime = this.video.nativeElement.currentTime = this.videoPlaybacks.length > 0 ? this.videoPlaybacks[0]['viewTime'] : 0; this.originTime = this.video.nativeElement.currentTime = this.videoPlaybacks.length > 0 ? this.videoPlaybacks[0]['viewTime'] : 0;
...@@ -129,13 +163,20 @@ export class CourseDetailComponent implements OnInit { ...@@ -129,13 +163,20 @@ export class CourseDetailComponent implements OnInit {
} else { } else {
this.video.nativeElement.currentTime = 0; this.video.nativeElement.currentTime = 0;
} }
console.log(res);
}) })
} }
download(path){ download(path){
window.open(path) window.open(path)
} }
selectVideo(val){
if(val.learningStatus == '3'){
this.state.modal1 = true;
}else{
this.filePathQuery(val.learningStatus,val.fileId)
}
}
} }
src/app/my/my.module.ts
...@@ -98,9 +98,10 @@ import { YdCollegeComponent } from './yd-college/yd-college.component'; ...@@ -98,9 +98,10 @@ import { YdCollegeComponent } from './yd-college/yd-college.component';
import { MyTrainingComponent } from './my-training/my-training.component'; import { MyTrainingComponent } from './my-training/my-training.component';
import { TrainingRecordsComponent } from './training-records/training-records.component'; import { TrainingRecordsComponent } from './training-records/training-records.component';
import { CourseDetailComponent } from './course-detail/course-detail.component'; import { CourseDetailComponent } from './course-detail/course-detail.component';
import { SecondsTransferPipe } from '../seconds-transfer.pipe';
@NgModule({ @NgModule({
declarations: [MyCenterHomeComponent, MkMaterialComponent, MkMaterialDetailComponent, FileUploadComponent, ImportantAnnouncementComponent, SalesDetailComponent, AnnouncementDetailComponent, MyBusinessComponent, MyBusinessDetailComponent, PickerComponent, MyToastComponent, SalesRankComponent, TeamRankComponent, RecruitingComponent, RecruitingDetailComponent, ThanksComponent, MySettingComponent, MySettingDetailComponent, MyNewsComponent, MyTargetComponent, TeamPanelComponent, SwitchNumberPipe,SafeResourceUrlPipe, TeamSalesScoreComponent, ScoreDetailsComponent, BusinessCardComponent, OrderDetailComponent, SalaryComponent, TodoListComponent, AddTaskComponent, MedicalServiceComponent, InvitationComponent, RegisterComponent, EmployeeInfoComponent, EmployeeBasicInfoComponent, WorkExperienceComponent, PersonalPhotosComponent, EmployeeIdCardComponent, EmployeeEducationComponent, PersonalStatementComponent, SignatureComponent, EmployeeSubmitComponent, BankCardComponent, MemberDetailComponent, ApprovalListComponent, ApprovalCommentsComponent, ApprovalResultListComponent, MyApplicationComponent, SuggestionComponent, EmployeeSalaryComponent, HistoricalRankComponent, TeamAreaPanelComponent, ArticleComponent, ArticleDetailComponent, ArticleReadComponent,SalaryDetailComponent,SalaryFirstYearComponent,DetailModalComponent, ProductComponent, ProductDataComponent, CommissionComponent, FileListComponent,MyCustomerComponent, CustomerRelationComponent, MyCustomerPolicyComponent, UnderwritingKnowledgeComponent, MyQuestionComponent, AskComponent, MenuItemComponent, MemberListComponent, ENoticeComponent, ENoticeSignComponent, RenewalReminderComponent, RenewalReminderDetailComponent, JointSalesComponent, JointSaleDetailComponent, IntegrationComponent, IntegrationDetailComponent, IntegrationRuleComponent, VideoComponent, QrcodeUploadComponent, NewsDetailComponent, MoreFeaturesComponent, MineComponent, YdCollegeComponent, MyTrainingComponent, TrainingRecordsComponent, CourseDetailComponent], declarations: [MyCenterHomeComponent, MkMaterialComponent, MkMaterialDetailComponent, FileUploadComponent, ImportantAnnouncementComponent, SalesDetailComponent, AnnouncementDetailComponent, MyBusinessComponent, MyBusinessDetailComponent, PickerComponent, MyToastComponent, SalesRankComponent, TeamRankComponent, RecruitingComponent, RecruitingDetailComponent, ThanksComponent, MySettingComponent, MySettingDetailComponent, MyNewsComponent, MyTargetComponent, TeamPanelComponent, SwitchNumberPipe,SafeResourceUrlPipe, TeamSalesScoreComponent, ScoreDetailsComponent, BusinessCardComponent, OrderDetailComponent, SalaryComponent, TodoListComponent, AddTaskComponent, MedicalServiceComponent, InvitationComponent, RegisterComponent, EmployeeInfoComponent, EmployeeBasicInfoComponent, WorkExperienceComponent, PersonalPhotosComponent, EmployeeIdCardComponent, EmployeeEducationComponent, PersonalStatementComponent, SignatureComponent, EmployeeSubmitComponent, BankCardComponent, MemberDetailComponent, ApprovalListComponent, ApprovalCommentsComponent, ApprovalResultListComponent, MyApplicationComponent, SuggestionComponent, EmployeeSalaryComponent, HistoricalRankComponent, TeamAreaPanelComponent, ArticleComponent, ArticleDetailComponent, ArticleReadComponent,SalaryDetailComponent,SalaryFirstYearComponent,DetailModalComponent, ProductComponent, ProductDataComponent, CommissionComponent, FileListComponent,MyCustomerComponent, CustomerRelationComponent, MyCustomerPolicyComponent, UnderwritingKnowledgeComponent, MyQuestionComponent, AskComponent, MenuItemComponent, MemberListComponent, ENoticeComponent, ENoticeSignComponent, RenewalReminderComponent, RenewalReminderDetailComponent, JointSalesComponent, JointSaleDetailComponent, IntegrationComponent, IntegrationDetailComponent, IntegrationRuleComponent, VideoComponent, QrcodeUploadComponent, NewsDetailComponent, MoreFeaturesComponent, MineComponent, YdCollegeComponent, MyTrainingComponent, TrainingRecordsComponent, CourseDetailComponent,SecondsTransferPipe],
imports: [ imports: [
CommonModule, CommonModule,
LifeCommonModule, LifeCommonModule,
......
src/app/my/my.service.ts
...@@ -900,4 +900,10 @@ export class MyService { ...@@ -900,4 +900,10 @@ export class MyService {
const url = this.API + "/videoPlay/queryVideoPlayback"; const url = this.API + "/videoPlay/queryVideoPlayback";
return this.http.post(url,JSON.stringify(params)) return this.http.post(url,JSON.stringify(params))
} }
// 讲师信息查询
lecturerQuery(params){
const url = this.API + "/college/lecturerQuery";
return this.http.post(url,JSON.stringify(params))
}
} }
src/app/seconds-transfer.pipe.spec.ts 0 → 100644
import { SecondsTransferPipe } from './seconds-transfer.pipe';
describe('SecondsTransferPipe', () => {
it('create an instance', () => {
const pipe = new SecondsTransferPipe();
expect(pipe).toBeTruthy();
});
});
src/app/seconds-transfer.pipe.ts 0 → 100644
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'secondsTransfer'
})
export class SecondsTransferPipe implements PipeTransform {
transform(value: any, args?: any): any {
const h = Math.floor(value / 3600) > 0 ? Math.floor(value / 3600) : '00';
const m = Math.floor(value % 3600 / 60) > 0 ? Math.floor(value % 3600 / 60) : '00';
const s = Math.floor(value % 60) > 0 ? Math.floor(value % 60) : '00';
return h + ':' + m + ':' + s;
}
}
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