Commit a298aee7 authored by Tt's avatar Tt

表单修改完成

parent 85c5f34c
This diff is collapsed.
...@@ -67,12 +67,12 @@ export class ComponentBase { ...@@ -67,12 +67,12 @@ export class ComponentBase {
* 储存音频数据 * 储存音频数据
* @param e * @param e
*/ */
onAudioUploadSuccess(e, key, it = this.item) { onAudioUploadSuccess(e, key, it = this.item) {
let url = e.url; let url = e.url;
let sp = url.split(".mp3"); let sp = url.split(".mp3");
let u = sp[0] + "_l.mp3"; let u = sp[0] + "_l.mp3";
it[key] = u; it[key] = u;
it["audioName"] = e.name || ""; it[key + "Name"] = e.name || "";
this.save(); this.save();
} }
......
...@@ -76,43 +76,12 @@ ...@@ -76,43 +76,12 @@
<div class="model-content"> <div class="model-content">
<div style="padding: 10px;background-color: #fff;"> <div style="padding: 10px;background-color: #fff;">
<div class="border-dashed" style="margin: 20px;width: 1000px;">
<span style="font-size: 20px;">标题: </span>
<input type="text" nz-input [(ngModel)]="item.title" (blur)="save()">
<span style="font-size: 20px;">题目说明: </span>
<input type="text" nz-input [(ngModel)]="item.questionText" (blur)="save()">
<span style="font-size: 20px;">题目说明音频: </span>
<div style="display:flex ;">
<div>
<app-audio-recorder [audioUrl]="item.questionTextAudio"
(audioUploaded)="onAudioUploadSuccess($event, 'questionTextAudio')"></app-audio-recorder>
</div>
<div style="margin: 5px">
<span>{{ item.audioName}}</span>
</div>
</div>
</div>
<div class="border-dashed" style="margin: 20px;width: 1000px;">
<div style="font-size: 20px;">游戏模式: </div>
<nz-radio-group [(ngModel)]="item.onlineFlg" (ngModelChange)="save()">
<label nz-radio [nzValue]="true">
<span [style]="{color:item.onlineFlg==true ? '#169BD5':'#000'}">联机版</span>
</label>
<label nz-radio [nzValue]="false">
<span [style]="{color:item.onlineFlg==false ? '#169BD5':'#000'}">单机版</span>
</label>
</nz-radio-group>
</div>
<div style="margin: 20px;width: 1000px;"> <div style="margin: 20px;width: 1000px;">
<div *ngFor="let question of item.questions; let i = index"> <div *ngFor="let question of item.questions; let i = index">
<div style="display: flex;margin-top: 20px;"> <div style="display: flex;margin-top: 20px;">
<div class="border-solid" style="min-width: 1000px;"> <div class="border-solid" style="min-width: 1000px;">
<div class="word-type-title"> <div class="word-type-title">
题目{{i+1}} {{ question.title }}
</div> </div>
...@@ -120,8 +89,8 @@ ...@@ -120,8 +89,8 @@
<div class="word-type-option-title" style="margin-top:10px;">题目音频:</div> <div class="word-type-option-title" style="margin-top:10px;">题目音频:</div>
<div style="display:flex ;"> <div style="display:flex ;">
<div> <div>
<app-audio-recorder [audioUrl]="question.questionAudio" <app-audio-recorder [audioUrl]="question.audio"
(audioUploaded)="onAudioUploadSuccess($event, 'questionAudio',question)"> (audioUploaded)="onAudioUploadSuccess($event, 'audio',question)">
</app-audio-recorder> </app-audio-recorder>
</div> </div>
<div style="margin: 5px"> <div style="margin: 5px">
...@@ -131,29 +100,27 @@ ...@@ -131,29 +100,27 @@
</div> </div>
<div style="margin-top:20px"> <div style="margin-top:20px">
<div class="word-type-option-title">倒计时: </div> <div class="word-type-option-title">题目文本: </div>
<input type="number" nz-input [(ngModel)]="question.duration" (blur)="save()"> <input type="text" nz-input [(ngModel)]="question.text" (blur)="save()">
</div> </div>
<div class="word-type-option-title" style="margin-top:20px;"> <div class="word-type-option-title" style="margin-top:20px;">
选项内容: 鱼群:
</div> </div>
<div *ngFor="let option of question.options; let j = index"> <div *ngFor="let option of question.options; let j = index">
<div style="display: flex;margin-top:20px"> <div style="display: flex;margin-top:20px">
<div class="option-title"> <div class="option-title">
选项{{j+1}} {{j+1}}
</div> </div>
<div class="option-content" style="padding: 15px 30px;"> <div class="option-content" style="padding: 15px 30px;">
<div style="margin:-15px -30px;width: calc(100%+60px);height: 40px;padding:10px 20px;" [style]="{ <!-- <div style="margin:-15px -30px;width: calc(100%+60px);height: 40px;padding:10px 20px;" [style]="{
backgroundColor: option.right ?'#169BD5':'#eee'}"> backgroundColor: option.right ?'#169BD5':'#eee'}">
<label nz-checkbox [(ngModel)]="option.right" (ngModelChange)="save()" <label nz-checkbox [(ngModel)]="option.right" (ngModelChange)="save()"
[style]="{color: option.right ?'#fff':'#000'}">正确答案</label> [style]="{color: option.right ?'#fff':'#000'}">正确答案</label>
</div> </div>
<div style="margin-top: 20px;"> <div style="margin-top: 20px;">
<div class="word-type-option-title"> <div class="word-type-option-title">
选项类型: 选项类型:
...@@ -168,26 +135,25 @@ ...@@ -168,26 +135,25 @@
</label> </label>
</nz-radio-group> </nz-radio-group>
</div> </div>
</div> </div> -->
<div>
<div style="margin-top: 25px;"> <!-- <div class="option-img">
<div class="option-img">
<div *ngIf="option.type=='img'" style="width: 200px;"> <div *ngIf="option.type=='img'" style="width: 200px;">
<span style="font-size: 20px;">图片:</span> <span style="font-size: 20px;">图片:</span>
<app-upload-image-with-preview [picUrl]="option.image" <app-upload-image-with-preview [picUrl]="option.image"
(imageUploaded)="onImageUploadSuccess($event, 'image',option)"> (imageUploaded)="onImageUploadSuccess($event, 'image',option)">
</app-upload-image-with-preview> </app-upload-image-with-preview>
</div> </div>
</div> </div> -->
<div class="option-text"> <div class="option-text">
<div *ngIf="option.type=='txt'" style="width: 200px"> <div *ngIf="option.type=='txt'" style="width: 200px">
<span style="font-size: 20px;">文本</span> <span style="font-size: 20px;">文本</span>
<input type="text" nz-input [(ngModel)]="option.text" (blur)="save()"> <input type="text" nz-input [(ngModel)]="option.text" (blur)="save()">
</div> </div>
</div> </div>
<div class="option-audio"> <div class="option-audio">
<span style="font-size: 20px;">选项音频:</span> <span style="font-size: 20px;">鱼音频</span>
<div style="display: flex"> <div style="display: flex">
<div> <div>
<app-audio-recorder [audioUrl]="option.audio" <app-audio-recorder [audioUrl]="option.audio"
...@@ -206,27 +172,27 @@ ...@@ -206,27 +172,27 @@
</div> </div>
</div> </div>
<div class="option-btns"> <div class="option-btns">
<button class="btn-red" nz-button nzType="default" nzDanger (click)="removeoption(i,j)">删除选项</button> <button class="btn-red" nz-button nzType="default" nzDanger (click)="removeoption(i,j)">删除</button>
<button class="btn-blue" style="margin-top: 10px;" nz-button nzType="default" nzDanger <button class="btn-blue" style="margin-top: 10px;" nz-button nzType="default" nzDanger
(click)="copyOption(i,j)">复制选项</button> (click)="copyOption(i,j)">复制</button>
</div> </div>
</div> </div>
</div> </div>
<div style="margin-left: 69px;margin-top: 15px;"> <div style="margin-left: 69px;margin-top: 15px;">
<button class="btn-blue" nz-button nzType="default" nzDanger (click)="addoption(i)">+增加选项</button> <button class="btn-blue" nz-button nzType="default" nzDanger (click)="addoption(i)">+增加</button>
</div> </div>
</div> </div>
<div style="margin:0 20px"> <!-- <div style="margin:0 20px">
<button class="btn-red" nz-button nzType="default" nzDanger (click)="removequestion(i)">删除题目</button> <button class="btn-red" nz-button nzType="default" nzDanger (click)="removequestion(i)">删除题目</button>
</div> </div> -->
</div> </div>
</div> </div>
<!--
<button class="btn-blue" style="margin-top:10px;width: 1000px; height: 50px;" nz-button nzType="default" nzDanger <button class="btn-blue" style="margin-top:10px;width: 1000px; height: 50px;" nz-button nzType="default" nzDanger
(click)="addquestion()">+增加题目</button> (click)="addquestion()">+增加题目</button> -->
</div> </div>
......
...@@ -9,15 +9,25 @@ import { MetaFormCreator } from './mataFormCreator'; ...@@ -9,15 +9,25 @@ import { MetaFormCreator } from './mataFormCreator';
}) })
export class FormComponent extends ComponentBase implements OnInit, OnChanges, OnDestroy { export class FormComponent extends ComponentBase implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = "fishing"; saveKey = "ngt07_fish";
item = { item = {
onlineFlg: false, questions: [
title: "钓鱼大作战", {
questionText: "海洋里有很多鱼,每条鱼身上都藏着魔法信息!亲爱的小玩家,请仔细听游戏指令,找到含有正确魔法信息的鱼,快速完成钓鱼。 在本次的游戏中,你将和其他玩家进行PK,游戏结束,钓鱼数量最多的玩家,将获得胜利。最后根据钓鱼的数量,你将获得相应的能量石奖励!开始挑战吧!", title: '左侧船',
questionTextAudio: "http://staging-teach.cdn.ireadabc.com/e422c682ff3304a532937db64573caa4.mp3", text: "",
questions: [], audio: "",
audioName: "" audioName: "",
options: [],
},
{
title: '右侧船',
text: "",
audio: "",
audioName: "",
options: [],
}
],
}; };
isVisible = false; isVisible = false;
...@@ -55,30 +65,16 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O ...@@ -55,30 +65,16 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
addoption(i) { addoption(i) {
this.item.questions[i].options.push({ this.item.questions[i].options.push({
type: "", type: "txt",
image: "", image: "",
audio: "", audio: "",
audioName: "",
text: "", text: "",
right: false right: false
}); });
this.save(); this.save();
} }
removequestion(i) {
this.openDelete("确定删除题目?", () => {
this.item.questions.splice(i, 1);
this.save();
})
}
addquestion() {
this.item.questions.push({
questionAudio: "",
duration: 120,
options: []
});
this.save();
}
ngChange(i, j) { ngChange(i, j) {
this.save(); this.save();
......
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