Commit 92fd1434 authored by Li MingZhe's avatar Li MingZhe

feat: 首次提交

parent cb1367da
@import '../style/common_mixin.css';
.model-content {
width: 100%;
height: 100%;
}
.radioPaire {
float: left;
margin: 3px;
border-style: dashed;
border-color: #000;
border-width: 1px;
}
.border {
border-radius: 20px;
border-style: dashed;
padding: 20px;
margin: 20px;
/*width: 500px; */
/*//border-radius: 20px;*/
/*//border-width: 2px;*/
/*//border-color: #000000;*/
}
.border-lite {
border: 2px dashed #ddd;
border-radius: 0.5rem;
padding: 10px;
margin: 10px;
}
<div class="model-content"> <div class="model-content">
<div style="padding: 10px;"> <!-- <div style="margin-top: 1vw; margin-left: 2vw; margin-bottom: 3vw;">
<label nz-checkbox nzValue="autoPlayBgAudio" [(ngModel)]="autoPlayBgAudio"
<div style="width: 300px;" align='center'> (ngModelChange)="clickCheckBox()">默认自动播放音频</label>
<span>图1: </span> </div> -->
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')"> <div *ngFor="let it of picArr; let i = index"
</app-upload-image-with-preview> nz-col nzSpan="8" >
</div>
<div style="width: 300px; margin-top: 5px;" align='center'>
<span>图2: </span> <div class="item-box">
<app-upload-image-with-preview <app-upload-image-with-preview
[picUrl]="item.pic_url_2" style="width: 100%"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url_2')"> [picUrl]="it.pic_url"
</app-upload-image-with-preview> (imageUploaded)="onImageUploadSuccessByItem($event, it)"
</div> ></app-upload-image-with-preview>
<div style="width: 300px; margin-top: 15px;">
<span>文本: </span>
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
</div>
<div style="margin-top: 5px">
<span>音频: </span> <div style="display: flex; justify-items: center; padding-top: 10px">
<app-audio-recorder <app-audio-recorder
[audioUrl]="item.audio_url" [audioUrl]="it.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')" (audioUploaded)="onAudioUploadSuccessByItem($event, it)">
></app-audio-recorder> </app-audio-recorder>
<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">
<i nz-icon type="close"></i>
</button>
</div>
</div> </div>
<!--<h5> id-{{i+1}} </h5>-->
<!--<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">-->
<!--<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">-->
<!--<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">-->
<!--<i nz-icon type="close"></i>-->
<!--</button>-->
<!--</div>-->
<!--<app-upload-image-with-preview-->
<!--style="width: 100%"-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
<!--&gt;</app-upload-image-with-preview>-->
<!--<div style="display: flex; align-items: center; justify-content: center">-->
<!--<span style="width: 80px;">-->
<!--question:-->
<!--</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it['q_audio_url']"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--<div style="display: flex; align-items: center; justify-content: center">-->
<!--<span style="width: 80px;">-->
<!--answer:-->
<!--</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it['a_audio_url']"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--<nz-radio-group [(ngModel)]="it.radioValue" >-->
<!--<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>-->
<!--<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>-->
<!--</nz-radio-group>-->
</div>
<div nz-col nzSpan="8" class="add-btn-box" >
<!--<div style="width: 100%; height: 100%;">-->
<button style=" margin: auto; width: 60%; height: 60%;" nz-button nzType="dashed" class="add-btn"
(click)="addPic()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
Add
</button>
<!--</div>-->
</div> </div>
<!--<div style="padding-bottom: 30px;">-->
<!--<h5> title-sound: </h5>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="item.contentObj.title_audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'title')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--<div style="padding-bottom: 30px;">-->
<!--<h5> bg-sound: </h5>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="item.contentObj.bg_audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'bg')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--<span style="margin-bottom: 20px"> 10 : 23 </span>-->
<!--<div *ngFor="let it of picArr; let i = index">-->
<!--<span> pic-{{i + 1}}: </span>-->
<!--<div style="display: flex; align-items: center; padding-bottom: 20px">-->
<!--<div style="width: 40%; padding-right: 20px">-->
<!--<app-upload-image-with-preview-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
<!--&gt;</app-upload-image-with-preview>-->
<!--</div>-->
<!--<div class="pic-sound-box">-->
<!--<div nz-row style="width: 50%; padding-bottom: 20px;">-->
<!--<div *ngFor="let it2 of it.soundArr; let i2 = index" nz-col nzSpan="8">-->
<!--<label nz-checkbox nzValue="{{'answer_' + (i2 + 1)}}" [(ngModel)]="it2.answer" (ngModelChange)="clickCheckBox()" >{{i2 + 1}}</label>-->
<!--</div>-->
<!--</div>-->
<!--<div *ngFor="let it2 of it.soundArr; let i2 = index" style="display: flex; align-items: center; padding-bottom: 5px">-->
<!--<span style="padding-right: 10px">sound-{{i2 + 1}}:</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it2.audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it2)">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div style="margin: auto; width: 95%;" nz-row nzType="flex" nzJustify="start" nzAlign="middle">-->
<!--<div *ngFor="let it of picArr; let i = index"-->
<!--nz-col nzSpan="8" >-->
<!--<div class="item-box">-->
<!--<h5> id-{{i+1}} </h5>-->
<!--<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">-->
<!--<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">-->
<!--<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">-->
<!--<i nz-icon type="close"></i>-->
<!--</button>-->
<!--</div>-->
<!--<app-upload-image-with-preview-->
<!--style="width: 100%"-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
<!--&gt;</app-upload-image-with-preview>-->
<!--<div style="display: flex; align-items: center; justify-content: center">-->
<!--<span style="width: 80px;">-->
<!--question:-->
<!--</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it['q_audio_url']"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--<div style="display: flex; align-items: center; justify-content: center">-->
<!--<span style="width: 80px;">-->
<!--answer:-->
<!--</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it['a_audio_url']"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--<nz-radio-group [(ngModel)]="it.radioValue" >-->
<!--<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>-->
<!--<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>-->
<!--</nz-radio-group>-->
<!--</div>-->
<!--</div>-->
</div> </div>
@import '../style/common_mixin';
.model-content {
width: 100%;
height: 100%;
.item-box{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 10px;
padding-bottom: 5vw;
padding-top: 5vw;
}
.pic-sound-box {
width: 50%;
display: flex;
//align-items: center;
flex-direction: column
}
.add-btn-box {
display: flex;
align-items: center;
justify-content: center;
//width: 180px;
height: 20vw;
//background: #FFDC00;
padding: 10px;
padding-top: 5vw;
}
}
import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core'; import {
import { JsonPipe } from '@angular/common'; Component,
EventEmitter,
OnDestroy,
OnChanges,
OnInit,
Output,
ApplicationRef,
ChangeDetectorRef
} from '@angular/core';
@Component({ @Component({
selector: 'app-form', selector: 'app-form',
templateUrl: './form.component.html', templateUrl: './form.component.html',
styleUrls: ['./form.component.css'] styleUrls: ['./form.component.scss']
}) })
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 picArr = [];
saveKey = "test_001";
// 储存对象
item;
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) { _item: any;
} KEY = 'hw_007';
createShell() { // @Input()
this.item.wordList.push({ set item(item) {
word: '', this._item = item;
audio: '', }
backWord: '', get item() {
backWordAudio: '', return this._item;
});
this.save();
} }
removeShell(idx) { @Output()
this.item.wordList.splice(idx, 1); update = new EventEmitter();
this.save();
constructor(private appRef: ApplicationRef,
public changeDetectorRef: ChangeDetectorRef) {
} }
ngOnInit() { ngOnInit() {
this.item = {}; this.item = {};
this.item.contentObj = {};
// 获取存储的数据 const getData = (<any>window).courseware.getData;
(<any>window).courseware.getData((data) => { getData((data) => {
if (data) { if (data) {
this.item = data; this.item = data;
} else {
this.item = {};
} }
if (!this.item.contentObj) {
this.item.contentObj = {};
}
console.log('~data:', data);
console.log('~data str:', JSON.stringify(data));
this.init(); this.init();
this.changeDetectorRef.markForCheck(); this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges(); this.changeDetectorRef.detectChanges();
this.refresh();
}, this.saveKey); this.refresh();
}, this.KEY);
} }
ngOnChanges() { ngOnChanges() {
} }
ngOnDestroy() { ngOnDestroy() {
} }
autoPlayBgAudio;
init() { init() {
if (this.item.contentObj.picArr) {
this.picArr = this.item.contentObj.picArr;
} else {
this.picArr = this.getDefaultPicArr();
this.item.contentObj.picArr = this.picArr;
}
this.autoPlayBgAudio = !this.item.contentObj.stopPlayBgAudio;
}
getDefaultPicArr() {
return [];
} }
initData() {
}
/** deleteItem(data) {
* 储存图片数据 const index = this.picArr.indexOf(data);
* @param e if (index !== -1) {
*/ this.picArr.splice(index, 1);
onImageUploadSuccess(e, key) { }
this.item[key] = e.url;
this.save(); this.save();
} }
/** onImageUploadSuccessByItem(e, item, id = null) {
* 储存音频数据 if (id != null) {
* @param e item[id + '_pic_url'] = e.url;
*/ } else {
onAudioUploadSuccess(e, key) { item.pic_url = e.url;
this.item[key] = e.url; }
this.save(); this.save();
} }
onWordAudioUploadSuccess(e, idx) { onAudioUploadSuccessByItem(e, item, id = null) {
this.item.wordList[idx].audio = e.url;
if (id != null) {
item[id + '_audio_url'] = e.url;
} else {
item.audio_url = e.url;
}
this.save(); this.save();
} }
onBackWordAudioUploadSuccess(e, idx) { addPic() {
this.item.wordList[idx].backWordAudio = e.url; this.picArr.push({
pic_url: '',
audio_url: '',
// text: '',
// radioValue: 'A'
});
this.saveItem();
}
radioClick(it, radioValue) {
it.radioValue = radioValue;
this.saveItem();
}
clickCheckBox() {
this.item.contentObj.stopPlayBgAudio = !this.autoPlayBgAudio;
this.saveItem();
}
saveItem() {
this.save(); this.save();
} }
/**
* 储存数据
*/
save() { save() {
(<any>window).courseware.setData(this.item, null, this.saveKey); (<any>window).courseware.setData(this.item, null, this.KEY);
this.refresh(); this.refresh();
console.log('this.item = ' + JSON.stringify(this.item));
} }
/**
* 刷新 渲染页面
*/
refresh() { refresh() {
setTimeout(() => { setTimeout(() => {
this.appRef.tick(); this.appRef.tick();
}, 1); }, 1);
} }
}
}
\ No newline at end of file
This diff is collapsed.
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