Commit 1dccea74 authored by liujiangnan's avatar liujiangnan

feat

parent 69438bc8
...@@ -59,10 +59,10 @@ export class UploadVideoComponent implements OnChanges, OnDestroy { ...@@ -59,10 +59,10 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
this.videoFile = null; this.videoFile = null;
this.uploadUrl = (<any> window).courseware.uploadUrl(); this.uploadUrl = (<any> window).courseware.uploadVideoUrl();
this.uploadData = (<any> window).courseware.uploadData(); this.uploadData = (<any> window).courseware.uploadData();
window['air'].getUploadCallback = (url, data) => { window['air'].getUploadVideoCallback = (url, data) => {
this.uploadUrl = url; this.uploadUrl = url;
this.uploadData = data; this.uploadData = data;
......
<style>
.border-solid {
border: 1px solid #333;
border-radius: 10px;
padding: 20px;
}
.border-dashed {
border: 1px dashed #333;
border-radius: 10px;
padding: 20px;
}
.option-title {
font-size: 36px;
color: #000;
margin-right: 15px;
margin-bottom: 3px;
}
.option-title-line {
font-size: 36px;
color: #ccc;
border-bottom: black 3px solid;
margin-right: 15px;
white-space: pre;
}
.option-content {
border: 1px dashed #333;
border-radius: 1px;
padding: 20px;
margin-right: 10px;
width: 800px;
}
.option-img {
margin-top: 10px;
}
.option-audio {
margin-top: 10px;
}
.option-text {
margin-top: 10px;
}
.option-time {
margin-top: 10px;
}
.word-type-title {
color: #169BD5;
font-size: 18px
}
.word-type-option-title {
color: #333;
font-size: 18px;
}
.word-input-title {
color: #333;
font-size: 20px;
}
.btn-blue {
color: #169BD5;
border-color: #169BD5;
}
.btn-red {
color: #f00;
border-color: #f00;
}
.input-place-red::-webkit-input-placeholder {
color: rgba(255, 0, 0, 0.3);
font-size: 12px;
}
</style>
<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: 1300px;">
<span style="margin-right: 20px;font-size: 18px;font-weight: bold;">提示开关 </span>
<nz-radio-group [ngModel]="item.tipSwitch" (ngModelChange)="customRadioChange($event, item,'tipSwitch')"
style="font-size: 20px;display: flex; align-items: center; justify-content: left; flex-wrap: wrap;">
<label nz-radio nzValue="1"></label>
<label nz-radio nzValue="0"></label>
</nz-radio-group>
<div *ngIf="item.tipSwitch == 1">
<span style="font-size: 20px;">提示动画: </span>
<app-upload-dragon-bone style="width: 100%" (save)="onDragonBoneSave($event,item)"
[skeJsonData]="item.imgAni.ske" [texJsonData]="item.imgAni.tex" [texPngData]="item.imgAni.png">
</app-upload-dragon-bone>
<div>
<span style="font-size: 20px;">提示背景: </span>
<div style="width:300px">
<app-upload-image-with-preview [picUrl]="item.tipBg"
(imageUploaded)="onImageUploadSuccess($event,'tipBg', item)"></app-upload-image-with-preview>
</div>
</div>
<div>
<span style="font-size: 20px;">提示内容: </span>
<input *ngIf="item.tipType == 'scroll'" type="text" nz-input [(ngModel)]="item.title" (blur)="save()">
<div *ngIf="item.tipType == 'page'">
<div *ngFor="let page of item.tipPage; let m = index" style="margin-bottom: 5px; ">
<div style="display: flex;">
<div style="font-size: 20px;line-height:32px">页{{m+1}}</div>
<input style="width:700px;margin-left: 10px;" type="text" nz-input [(ngModel)]="page.title"
(blur)="save()">
<div style="margin-left: 20px;">
<app-audio-recorder [audioUrl]="page.audio"
(audioUploaded)="onAudioUploadSuccess($event, 'audio',page)">
</app-audio-recorder>
</div>
<button class="btn-red" style="width: 100px; height: 32px;margin-left: 20px;" nz-button nzType="default"
nzDanger (click)="removePage(m)">删除</button>
</div>
</div>
<button class="btn-blue" style="width: 150px; height: 32px;" nz-button nzType="default" nzDanger
(click)="addPage()">+增加提示内容</button>
</div>
</div>
</div>
<div>
<span style="font-size: 20px;">游戏背景: </span>
<div style="width:300px">
<app-upload-image-with-preview [picUrl]="item.image"
(imageUploaded)="onImageUploadSuccess($event,'image', item)"></app-upload-image-with-preview>
</div>
</div>
<div style="display: flex; align-items: center; ">
<h2> 题目分值: </h2>
</div>
<input type="text" nz-input [(ngModel)]="item.questionScore" (blur)="save()">
<span style="font-size: 20px;">结束动画: </span>
<app-upload-dragon-bone style="width: 100%" (save)="onDragonBoneSave($event,item)"
[skeJsonData]="item.endImgAni.ske" [texJsonData]="item.endImgAni.tex" [texPngData]="item.endImgAni.png">
</app-upload-dragon-bone>
<span style="font-size: 20px;">结束动画文本: </span>
<input type="text" nz-input [(ngModel)]="item.endImgTitle" (blur)="save()">
<div style="display: flex; align-items: center; ">
<h2> 跳转页面: </h2>
</div>
<input type="text" nz-input [(ngModel)]="item.jumpIdx" (blur)="save()">
</div>
<div style="padding: 20px"> <div style="padding: 20px">
<app-upload-video [videoUrl]="item.video_url" (videoUploaded)="onVideoUploaded($event)"></app-upload-video> <app-upload-video [videoUrl]="item.video_url" (videoUploaded)="onVideoUploaded($event)"></app-upload-video>
</div> </div>
</div> </div>
<nz-modal [(nzVisible)]="isVisible" [nzTitle]="null" [nzContent]="modalContent" [nzFooter]="modalFooter"
(nzOnCancel)="handleCancel()">
<ng-template #modalContent>
<p>{{deleteTitle}}</p>
</ng-template>
<ng-template #modalFooter>
<button nz-button nzType="default" (click)="handleCancel()">取消</button>
<button nz-button nzType="primary" (click)="handleOk()">确定</button>
</ng-template>
</nz-modal>
</div> </div>
\ No newline at end of file
...@@ -13,266 +13,26 @@ let replaceAll = function (str, s1, s2) { ...@@ -13,266 +13,26 @@ let replaceAll = function (str, s1, s2) {
}) })
export class FormComponent extends ComponentBase implements OnInit, OnChanges, OnDestroy { export class FormComponent extends ComponentBase implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = "wood_input"; saveKey = "cartoon_video";
// 1.猫动画可替换。
// 2.文本内容可替换。//字体随内容缩小。
// 3.语音替换。
// 4.背景可替换
// 5.3~10选项内容。
// 6.配置对应的坐标。
customTypeGroupArr = [
// {
// name: '发音动画',
// rect: true,
// animaSmall: true,
// audio: true,
// },
// {
// name: '发音图片',
// pic: true,
// audio: true,
// },
// {
// name: '发音区块',
// rect: true,
// audio: true,
// },
// {
// name: '变化文本',
// action: {
// type: 'text',
// option: [
// ['fontColor', '#000000'],
// ['fontSize', '100'],
// ['opacity', '0', '100']
// ]
// },
// },
// {
// name: '变化图片',
// action: {
// type: 'pic',
// option: [
// // ['scale', '1'],
// ['opacity', '0', '100']
// ]
// },
// },
// {
// name: '变化动画',
// action: {
// type: 'anima',
// option: [
// // ['scale', '1'],
// ['opacity', '0', '100']
// ]
// },
// },
{
name: '选项图片',
drag: true,
pic: true,
// audio: true,
},
// {
// name: '选项文本',
// drag: true,
// audio: true,
// action: {
// type: 'text',
// option: [
// ['fontColor', '#000000'],
// ['fontSize', '100'],
// ]
// },
// },
// {
// name: '拖拽结束区',
// rect: true,
// }
]
item = { item = {
imgAni: {
ske: {},
tex: {},
png: {}
},
tipSwitch: 1,//提示功能开关
tipType: "page",
tipBg: '',
tipPage: [{ title: '', audio: '' }],
title: "",
audio: "",
audioName: "",
image: '',
jumpIdx: '',
endImgAni: {
ske: {},
tex: {},
png: {}
},
endImgTitle: "",
points: "",
tips: '',
questionScore: 0,//分数
questions: [],
questionText: "",
contentMain: "",
contentArr: [],
video_url: "", video_url: "",
}; };
constructor(public nzMessageService: NzMessageService, public appRef: ApplicationRef, public changeDetectorRef: ChangeDetectorRef) { constructor(public nzMessageService: NzMessageService, public appRef: ApplicationRef, public changeDetectorRef: ChangeDetectorRef) {
super(appRef, changeDetectorRef); super(appRef, changeDetectorRef);
} }
isVisible = false;
deleteTitle = "是否删除题目";
deleteCallback = function () { };
openDelete(title, callback) {
this.deleteCallback = callback;
this.deleteTitle = title;
this.isVisible = true;
}
handleCancel() {
this.isVisible = false;
}
handleOk() {
this.deleteCallback && this.deleteCallback();
this.handleCancel();
}
init(): void { init(): void {
if (this.item.questions && this.item.questions.length == 0) {
this.addquestion();
}
}
removeoption(i, j) {
this.openDelete("确定删除选项?", () => {
this.item.questions[i].options.splice(j, 1);
this.save();
})
}
copyoption(i, j) {
let data = this.item.questions[i].options[j];
this.item.questions[i].options.push(JSON.parse(JSON.stringify(data)));
this.save();
}
addoption(i) {
this.item.questions[i].options.push({
type: "img",
image: "",
audio: "",
text: "",
time: "",
right: false
});
this.save();
}
removePage(idx) {
this.item.tipPage.splice(idx, 1);
this.save();
}
addPage() {
this.item.tipPage.push({ title: "", audio: "" })
this.save();
}
removequestion(idx) {
this.openDelete("确定删除题目?", () => {
this.item.questions.splice(idx, 1);
this.save();
})
} }
addquestion() {
this.item.questions.push({
options: [],
type: "img"
});
while (this.item.questions[0].options.length < 3) {
this.addoption(0);
}
this.save();
}
ngChange(i, j) { ngChange(i, j) {
this.save(); this.save();
} }
saveHotZone(group, e) {
console.log('e: ', e);
const { bgItem, hotZoneItemArr } = e;
group.bgItem = bgItem;
group.hotZoneItemArr = hotZoneItemArr;
this.nzMessageService.success('保存成功');
this.save();
}
onVideoUploaded(evt) { onVideoUploaded(evt) {
this.item.video_url = evt.url; this.item.video_url = evt.url;
console.log(evt); console.log(evt);
this.save(); this.save();
} }
changeMain() {
//输出的数据可以识别到\n的换行符
let arr = this.item.contentMain.split(" ");
let oldArr = this.item.contentArr.concat();
let contetArr = arr.map(ar => {
let obj = {
text: replaceAll(`${ar}`, "\n", "<br/>"),
block: false,
check: 1,
}
for (let i = 0; i < oldArr.length; i++) {
if (obj.text == oldArr[i].text) {
obj.block = oldArr[i].block;
obj.check = oldArr[i].check;
oldArr.splice(i, 1);
break;
}
}
return obj;
})
this.item.contentArr = contetArr;
console.log(contetArr)
this.save();
}
onBlock(item, vis) {
item.block = vis;
this.save();
}
customRadioChange(e, item, key) {
item[key] = e;
this.save();
}
onDragonBoneSave(e, item) {
console.log(e);
this.save();
}
} }
\ No newline at end of file
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