Skip to content

Y
ydLife
Commit 9c60dfc1 by Sweet Zhang
Options

银盾学院

parent bb494c59
Showing with 298 additions and 4 deletions
src/app/my/course-detail/course-detail.component.html 0 → 100644
<div class="courseDetailContainer">
<div class="courseInitShow">
<video *ngIf="!pdfPath" #video
[src]="videoSrc"
controls="true"
[poster]="fileUploadItem.displayImage"
width="100%" height="200px" preload="auto" (contextmenu)="menuPrevent()" x5-playsinline="true" playsinline="true" webkit-playsinline="true" disablePictureInPicture>
您的浏览器不支持 video 标签。
</video>
</div>
<div class="courseTitle">
<h4>{{fileUploadItem.itemName}}</h4>
<div>
<span *ngIf="pdfPath">立即阅读</span>
<span>不可下载</span>
</div>
</div>
<div class="courseIntroContent">
<div class="tab">
<span class="actived">介绍</span>
<span>目录</span>
<span>讲师</span>
</div>
<div class="courseSectionTotal">共X节</div>
<div class="courseCatalogue">
<ul>
<li>
<div>
<p>1.</p>
<p>
<span>XXX</span>
<span>00:00/00:00</span>
</p>
</div>
<div>
<p></p>
<p>播放</p>
</div>
</li>
</ul>
</div>
</div>
</div>
\ No newline at end of file
src/app/my/course-detail/course-detail.component.scss 0 → 100644
.courseDetailContainer{
background-color: #FFF;
height: calc(100vh - 70px);
.courseInitShow{
height: 200px;
}
.courseTitle{
padding: 0 13px;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f5f5f5;
h4{
font-size: 20px;
color: #333;
}
}
.courseIntroContent{
.tab{
display: flex;
justify-content: space-between;
padding: 0 15px;
height: 38px;
align-items: center;
border-bottom: 1px solid #f5f5f5;
font-size: 16px;
color: #333;
>span{
cursor: pointer;
&.actived{
position: relative;
color: #5F83FF;
&::after{
position: absolute;
content: '';
left: 0;
bottom: -7px;
width: 100%;
height: 0;
border-bottom: 1px solid #5F83FF;
}
}
}
}
.courseSectionTotal{
height: 30px;
line-height: 30px;
padding-left: 15px;
color: #5F83FF;
font-size: 16px;
}
.courseCatalogue{
padding: 0 15px;
height: 70px;
border-bottom: 1px solid #f5f5f5;
li{
display: flex;
justify-content: space-between;
height: 70px;
align-items: center;
border-bottom: 1px solid #f5f5f5;
> div:first-child{
display: flex;
font-size: 16px;
color: #666;
> p:nth-of-type(2){
display: flex;
flex-direction: column;
margin-left: 2px;
>span:last-child{
color: #999;
}
}
}
}
}
}
}
\ No newline at end of file
src/app/my/course-detail/course-detail.component.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CourseDetailComponent } from './course-detail.component';
describe('CourseDetailComponent', () => {
let component: CourseDetailComponent;
let fixture: ComponentFixture<CourseDetailComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CourseDetailComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CourseDetailComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/my/course-detail/course-detail.component.ts 0 → 100644
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { LifeCommonService } from 'src/app/common/life-common.service';
import { MyService } from '../my.service';
@Component({
selector: 'ydlife-course-detail',
templateUrl: './course-detail.component.html',
styleUrls: ['./course-detail.component.scss']
})
export class CourseDetailComponent implements OnInit {
@ViewChild('video') video: ElementRef;
videoSrc: string;
pdfPath: any;
permissions: any;
lifeCustomerInfo: any;
timer: any;
timer2: any;
videoPlaybacks: Array<any>;
originTime: number = 0;
fileId:string;
deviceType:string;
maxViewTime:number = 0;
status:string;
public fileUploadItem:any;
public customerId:string = localStorage.getItem('lifeCustomerInfo') ? JSON.parse(localStorage.getItem('lifeCustomerInfo')).customerId : null;
constructor(private activatedRoute:ActivatedRoute,private myService:MyService,private lifeCommonService:LifeCommonService) { }
ngOnInit() {
this.fileId = this.activatedRoute.snapshot.params.fileId;
this.status = this.activatedRoute.snapshot.params.status;
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.lifeCustomerInfo = JSON.parse(localStorage.getItem('lifeCustomerInfo'));
if(!this.pdfPath){
this.queryVideoPlayback(1);
}
this.filePathQuery()
}
filePathQuery(){
this.myService.filePath('3','0','23','yd_trainning_file_type',null,this.customerId,this.status,this.fileId).subscribe(res=>{
console.log(res)
if(res['success']){
this.fileUploadItem = res['data']['fileUploadItemList'] ? res['data']['fileUploadItemList'][0] : '';
}
})
}
ngAfterViewInit(): void {
if(!this.pdfPath){
this.video.nativeElement.addEventListener('pause', ()=> { //暂停开始执行的函数
clearInterval(this.timer);
clearInterval(this.timer2);
console.log('暂停播放')
this.saveVideoPlayback();
});
this.video.nativeElement.addEventListener('play', ()=> { //开始执行的函数
this.timer = setInterval(() => {
console.log('开始播放')
this.saveVideoPlayback();
}, 1000 * 20)
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 {
if(!this.pdfPath){
clearInterval(this.timer);
clearInterval(this.timer2);
this.saveVideoPlayback();
}
}
menuPrevent() {
return false;
}
saveVideoPlayback() {
// playbackStatus 视频播放状态(1:未播放完;2:已播放完) 【必填】
const param = {
id: '',
customerId: this.lifeCustomerInfo.customerId,
practitionerId: this.lifeCustomerInfo.practitionerId,
fileId: this.fileId,
totalTime: this.video.nativeElement.duration,
viewTime: this.video.nativeElement.currentTime,
playbackStatus: this.video.nativeElement.currentTime >= this.video.nativeElement.duration ? 2 : 1,
}
this.myService.saveVideoPlayback(param).subscribe(res => {
console.log(res);
})
}
queryVideoPlayback(type) {
const param = {
id: null,
customerId: this.lifeCustomerInfo.customerId,
practitionerId: this.lifeCustomerInfo.practitionerId,
fileId: this.fileId,
}
this.myService.queryVideoPlayback(param).subscribe(res => {
if (res['success']) {
this.videoPlaybacks = res['data']['videoPlaybacks'];
this.maxViewTime = this.videoPlaybacks[0]['maxViewTime'];
if(type===1){
// 设置开始播放时间为上次离开时间
this.originTime = this.video.nativeElement.currentTime = this.videoPlaybacks.length > 0 ? this.videoPlaybacks[0]['viewTime'] : 0;
}else{
// 监测有没有拖动进度条
this.timer2 = setInterval(()=>{
if (this.video.nativeElement.currentTime - this.originTime > 1 && this.video.nativeElement.currentTime > this.maxViewTime) {
this.video.nativeElement.currentTime = this.originTime;
}
this.originTime = this.video.nativeElement.currentTime;
},500)
}
} else {
this.video.nativeElement.currentTime = 0;
}
console.log(res);
})
}
download(path){
window.open(path)
}
}
src/app/my/my-routing.module.ts
......@@ -82,6 +82,7 @@ import { MineComponent } from './mine/mine.component';
import { YdCollegeComponent } from './yd-college/yd-college.component';
import { MyTrainingComponent } from './my-training/my-training.component';
import { TrainingRecordsComponent } from './training-records/training-records.component';
import { CourseDetailComponent } from './course-detail/course-detail.component';
const myRoutes: Routes = [
......@@ -188,6 +189,7 @@ const myRoutes: Routes = [
{ path: 'ydCollege',component:YdCollegeComponent,canActivate:[AuthGuard],data:[{title: '银盾学院'}]},
{ path: 'myTraining',component:MyTrainingComponent,canActivate:[AuthGuard],data:[{title: '我的培训'}]},
{ path: 'trainingRecords/:status',component:TrainingRecordsComponent,canActivate:[AuthGuard],data:[{title: '培训课程'}]},
{ path: 'courseDetail/:status/:fileId',component:CourseDetailComponent,canActivate:[AuthGuard],data:[{title: '课程介绍'}]},
];
......
src/app/my/my.module.ts
......@@ -97,9 +97,10 @@ import { MineComponent } from './mine/mine.component';
import { YdCollegeComponent } from './yd-college/yd-college.component';
import { MyTrainingComponent } from './my-training/my-training.component';
import { TrainingRecordsComponent } from './training-records/training-records.component';
import { CourseDetailComponent } from './course-detail/course-detail.component';
@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],
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],
imports: [
CommonModule,
LifeCommonModule,
......
src/app/my/my.service.ts
......@@ -20,10 +20,10 @@ export class MyService {
}
// 文件下载
filePath(itemType, itemId, fileCategory, code, mdDropOptionCode,customerId=null,learningStatus=null) {
filePath(itemType, itemId, fileCategory, code, mdDropOptionCode,customerId=null,learningStatus=null,fileId=null) {
const url = this.API + '/filePathQuery';
return this.http
.post(url, JSON.stringify({ itemType: itemType, itemId: itemId, fileCategory: fileCategory, code: code, mdDropOptionCode: mdDropOptionCode,customerId:customerId,learningStatus:learningStatus }));
.post(url, JSON.stringify({ itemType: itemType, itemId: itemId, fileCategory: fileCategory, code: code, mdDropOptionCode: mdDropOptionCode,customerId:customerId,learningStatus:learningStatus,fileId:fileId }));
}
// 重要公告
......
src/app/my/training-records/training-records.component.html
<div class="trainingRecordsContainer">
<ul *ngIf="fileUploadItemList">
<li *ngFor="let item of fileUploadItemList">
<li *ngFor="let item of fileUploadItemList" [routerLink]="['/courseDetail',status,item.fileId]">
<div>
<img [src]="item.displayImage" alt="" srcset="" class="img-responsive">
</div>
......
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