Commit 815c5a5f authored by 范雪寒's avatar 范雪寒

feat: 表单页完成

parent 2a162676
<div class="model-content"> <div class="model-content">
<!-- <div class="border" style=" width: 520px;">
<span style="height: 30px; font-size: 18px;">可选字母(点击下方字母选择):</span>
<br>
<a (click)="addLetter('Q')" style="font-size: 50px; width: 50px;">Q&nbsp;</a>
<a (click)="addLetter('W')" style="font-size: 50px; width: 50px;">W&nbsp;</a>
<a (click)="addLetter('E')" style="font-size: 50px; width: 50px;">E&nbsp;</a>
<a (click)="addLetter('R')" style="font-size: 50px; width: 50px;">R&nbsp;</a>
<a (click)="addLetter('T')" style="font-size: 50px; width: 50px;">T&nbsp;</a>
<a (click)="addLetter('Y')" style="font-size: 50px; width: 50px;">Y&nbsp;</a>
<a (click)="addLetter('U')" style="font-size: 50px; width: 50px;">U&nbsp;</a>
<a (click)="addLetter('I')" style="font-size: 50px; width: 50px;">I&nbsp;</a>
<a (click)="addLetter('O')" style="font-size: 50px; width: 50px;">O&nbsp;</a>
<a (click)="addLetter('P')" style="font-size: 50px; width: 50px;">P&nbsp;</a>
<br>
<a (click)="addLetter('A')" style="font-size: 50px; margin-left: 20px;">A&nbsp;</a>
<a (click)="addLetter('S')" style="font-size: 50px;">S&nbsp;</a>
<a (click)="addLetter('D')" style="font-size: 50px;">D&nbsp;</a>
<a (click)="addLetter('F')" style="font-size: 50px;">F&nbsp;</a>
<a (click)="addLetter('G')" style="font-size: 50px;">G&nbsp;</a>
<a (click)="addLetter('H')" style="font-size: 50px;">H&nbsp;</a>
<a (click)="addLetter('J')" style="font-size: 50px;">J&nbsp;</a>
<a (click)="addLetter('K')" style="font-size: 50px;">K&nbsp;</a>
<a (click)="addLetter('L')" style="font-size: 50px;">L&nbsp;</a>
<br>
<a (click)="addLetter('Z')" style="font-size: 50px; margin-left: 40px;">Z&nbsp;</a>
<a (click)="addLetter('X')" style="font-size: 50px;">X&nbsp;</a>
<a (click)="addLetter('C')" style="font-size: 50px;">C&nbsp;</a>
<a (click)="addLetter('V')" style="font-size: 50px;">V&nbsp;</a>
<a (click)="addLetter('B')" style="font-size: 50px;">B&nbsp;</a>
<a (click)="addLetter('N')" style="font-size: 50px;">N&nbsp;</a>
<a (click)="addLetter('M')" style="font-size: 50px;">M&nbsp;</a>
<br>
</div> -->
<div class="border" style="width: 350px;">
<span style="height: 30px; font-size: 18px;">选择字母(点击下方字母选择):</span>
<br>
<div style="padding: 10px;"> <span *ngIf="item.letter=='A'"><span style="font-size: 50px; color: #ff62ff;">A&nbsp;</span></span>
<span *ngIf="item.letter!='A'"><a (click)="selectLetter('A')" style="font-size: 50px;">A&nbsp;</a></span>
<span *ngIf="item.letter=='B'"><span style="font-size: 50px; color: #ff62ff;">B&nbsp;</span></span>
<span *ngIf="item.letter!='B'"><a (click)="selectLetter('B')" style="font-size: 50px;">B&nbsp;</a></span>
<span *ngIf="item.letter=='C'"><span style="font-size: 50px; color: #ff62ff;">C&nbsp;</span></span>
<span *ngIf="item.letter!='C'"><a (click)="selectLetter('C')" style="font-size: 50px;">C&nbsp;</a></span>
<span *ngIf="item.letter=='D'"><span style="font-size: 50px; color: #ff62ff;">D&nbsp;</span></span>
<span *ngIf="item.letter!='D'"><a (click)="selectLetter('D')" style="font-size: 50px;">D&nbsp;</a></span>
<span *ngIf="item.letter=='E'"><span style="font-size: 50px; color: #ff62ff;">E&nbsp;</span></span>
<span *ngIf="item.letter!='E'"><a (click)="selectLetter('E')" style="font-size: 50px;">E&nbsp;</a></span>
<span *ngIf="item.letter=='F'"><span style="font-size: 50px; color: #ff62ff;">F&nbsp;</span></span>
<span *ngIf="item.letter!='F'"><a (click)="selectLetter('F')" style="font-size: 50px;">F&nbsp;</a></span>
<span *ngIf="item.letter=='G'"><span style="font-size: 50px; color: #ff62ff;">G&nbsp;</span></span>
<span *ngIf="item.letter!='G'"><a (click)="selectLetter('G')" style="font-size: 50px;">G&nbsp;</a></span>
<div style="width: 300px;" align='center'> <br>
<span>图1: </span>
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')">
</app-upload-image-with-preview>
</div>
<div style="width: 300px; margin-top: 5px;" align='center'> <span *ngIf="item.letter=='H'"><span style="font-size: 50px; color: #ff62ff;">H&nbsp;</span></span>
<span>图2: </span> <span *ngIf="item.letter!='H'"><a (click)="selectLetter('H')" style="font-size: 50px;">H&nbsp;</a></span>
<app-upload-image-with-preview <span *ngIf="item.letter=='I'"><span style="font-size: 50px; color: #ff62ff;">I&nbsp;</span></span>
[picUrl]="item.pic_url_2" <span *ngIf="item.letter!='I'"><a (click)="selectLetter('I')" style="font-size: 50px;">I&nbsp;</a></span>
(imageUploaded)="onImageUploadSuccess($event, 'pic_url_2')"> <span *ngIf="item.letter=='J'"><span style="font-size: 50px; color: #ff62ff;">J&nbsp;</span></span>
</app-upload-image-with-preview> <span *ngIf="item.letter!='J'"><a (click)="selectLetter('J')" style="font-size: 50px;">J&nbsp;</a></span>
</div> <span *ngIf="item.letter=='K'"><span style="font-size: 50px; color: #ff62ff;">K&nbsp;</span></span>
<span *ngIf="item.letter!='K'"><a (click)="selectLetter('K')" style="font-size: 50px;">K&nbsp;</a></span>
<span *ngIf="item.letter=='L'"><span style="font-size: 50px; color: #ff62ff;">L&nbsp;</span></span>
<span *ngIf="item.letter!='L'"><a (click)="selectLetter('L')" style="font-size: 50px;">L&nbsp;</a></span>
<span *ngIf="item.letter=='M'"><span style="font-size: 50px; color: #ff62ff;">M&nbsp;</span></span>
<span *ngIf="item.letter!='M'"><a (click)="selectLetter('M')" style="font-size: 50px;">M&nbsp;</a></span>
<span *ngIf="item.letter=='N'"><span style="font-size: 50px; color: #ff62ff;">N&nbsp;</span></span>
<span *ngIf="item.letter!='N'"><a (click)="selectLetter('N')" style="font-size: 50px;">N&nbsp;</a></span>
<div style="width: 300px; margin-top: 15px;"> <br>
<span>文本: </span>
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
</div>
<div style="margin-top: 5px"> <span *ngIf="item.letter=='O'"><span style="font-size: 50px; color: #ff62ff;">O&nbsp;</span></span>
<span>音频: </span> <span *ngIf="item.letter!='O'"><a (click)="selectLetter('O')" style="font-size: 50px;">O&nbsp;</a></span>
<app-audio-recorder <span *ngIf="item.letter=='P'"><span style="font-size: 50px; color: #ff62ff;">P&nbsp;</span></span>
[audioUrl]="item.audio_url" <span *ngIf="item.letter!='P'"><a (click)="selectLetter('P')" style="font-size: 50px;">P&nbsp;</a></span>
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')" <span *ngIf="item.letter=='Q'"><span style="font-size: 50px; color: #ff62ff;">Q&nbsp;</span></span>
></app-audio-recorder> <span *ngIf="item.letter!='Q'"><a (click)="selectLetter('Q')" style="font-size: 50px;">Q&nbsp;</a></span>
</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span *ngIf="item.letter=='R'"><span style="font-size: 50px; color: #ff62ff;">R&nbsp;</span></span>
<span *ngIf="item.letter!='R'"><a (click)="selectLetter('R')" style="font-size: 50px;">R&nbsp;</a></span>
<span *ngIf="item.letter=='S'"><span style="font-size: 50px; color: #ff62ff;">S&nbsp;</span></span>
<span *ngIf="item.letter!='S'"><a (click)="selectLetter('S')" style="font-size: 50px;">S&nbsp;</a></span>
<span *ngIf="item.letter=='T'"><span style="font-size: 50px; color: #ff62ff;">T&nbsp;</span></span>
<span *ngIf="item.letter!='T'"><a (click)="selectLetter('T')" style="font-size: 50px;">T&nbsp;</a></span>
<br>
<span *ngIf="item.letter=='U'"><span style="font-size: 50px; color: #ff62ff;">U&nbsp;</span></span>
<span *ngIf="item.letter!='U'"><a (click)="selectLetter('U')" style="font-size: 50px;">U&nbsp;</a></span>
<span *ngIf="item.letter=='V'"><span style="font-size: 50px; color: #ff62ff;">V&nbsp;</span></span>
<span *ngIf="item.letter!='V'"><a (click)="selectLetter('V')" style="font-size: 50px;">V&nbsp;</a></span>
<span *ngIf="item.letter=='W'"><span style="font-size: 50px; color: #ff62ff;">W&nbsp;</span></span>
<span *ngIf="item.letter!='W'"><a (click)="selectLetter('W')" style="font-size: 50px;">W&nbsp;</a></span>
&nbsp;&nbsp;
<span *ngIf="item.letter=='X'"><span style="font-size: 50px; color: #ff62ff;">X&nbsp;</span></span>
<span *ngIf="item.letter!='X'"><a (click)="selectLetter('X')" style="font-size: 50px;">X&nbsp;</a></span>
<span *ngIf="item.letter=='Y'"><span style="font-size: 50px; color: #ff62ff;">Y&nbsp;</span></span>
<span *ngIf="item.letter!='Y'"><a (click)="selectLetter('Y')" style="font-size: 50px;">Y&nbsp;</a></span>
<span *ngIf="item.letter=='Z'"><span style="font-size: 50px; color: #ff62ff;">Z&nbsp;</span></span>
<span *ngIf="item.letter!='Z'"><a (click)="selectLetter('Z')" style="font-size: 50px;">Z&nbsp;</a></span>
<br>
</div>
<!-- <div class="border" style=" width: 520px; height: 120px;">
<span style="height: 30px; font-size: 18px;">单词音频:</span>
<br>
<app-audio-recorder [audioUrl]=" item.audio" (audioUploaded)="onAudioUploadSuccess($event)">
</app-audio-recorder>
</div>
<div class="border" style="width: 520px;">
<span style="height: 30px; font-size: 18px;">正确字母:</span>
<div>
<div *ngFor="let rightWord of item.rightWordList; let i = index">
<div style="padding: 2px;">
<input style="width: 150px;float: left;" type="text" nz-input [(ngModel)]="rightWord.word" (blur)="save()">
<app-audio-recorder style="float: left;" [audioUrl]="rightWord.audio"
(audioUploaded)="onRightAudioUploadSuccess($event, i)">
</app-audio-recorder>
<button style="float: right; margin-left: 10px; height: 32px; color: red;" nz-button nzType="dashed"
class="add-btn" (click)="removeRightWord(i)">
<i nz-icon nzType="minus-circle" nzTheme="outline"></i>
删除字母
</button>
</div>
<br> <br>
</div>
</div>
<div *ngIf="(item.rightWordList.length +item.wrongWordList.length < 5)">
<button style="margin-left: 2px; margin-top: 2px; height: 32px;" nz-button nzType="dashed" class="add-btn"
(click)="addRightWord()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加<span style="color: #44bb44;">正确</span>的字母
</button>
</div>
</div> </div>
-->
</div> </div>
\ No newline at end of file
...@@ -18,24 +18,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -18,24 +18,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
createShell() {
this.item.wordList.push({
word: '',
audio: '',
backWord: '',
backWordAudio: '',
});
this.save();
}
removeShell(idx) {
this.item.wordList.splice(idx, 1);
this.save();
}
ngOnInit() { ngOnInit() {
this.item = {}; this.item = {
letter: 'A'
};
// 获取存储的数据 // 获取存储的数据
(<any>window).courseware.getData((data) => { (<any>window).courseware.getData((data) => {
...@@ -52,6 +39,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -52,6 +39,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, this.saveKey); }, this.saveKey);
} }
selectLetter(letter) {
this.item.letter = letter;
this.save();
}
ngOnChanges() { ngOnChanges() {
} }
...@@ -77,18 +69,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -77,18 +69,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存音频数据 * 储存音频数据
* @param e * @param e
*/ */
onAudioUploadSuccess(e, key) { onAudioUploadSuccess(e) {
this.item[key] = e.url; this.item.audio = e.url;
this.save();
}
onWordAudioUploadSuccess(e, idx) {
this.item.wordList[idx].audio = e.url;
this.save();
}
onBackWordAudioUploadSuccess(e, idx) {
this.item.wordList[idx].backWordAudio = e.url;
this.save(); this.save();
} }
...@@ -97,7 +79,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -97,7 +79,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
*/ */
save() { save() {
(<any>window).courseware.setData(this.item, null, this.saveKey); (<any>window).courseware.setData(this.item, null, this.saveKey);
this.refresh(); this.refresh();
console.log('this.item = ' + JSON.stringify(this.item)); console.log('this.item = ' + JSON.stringify(this.item));
} }
......
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