Commit 8a178f58 authored by Tt's avatar Tt

表单修改完成

parent 603f975c
...@@ -25,163 +25,20 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -25,163 +25,20 @@ export default class SceneComponent extends MyCocosSceneComponent {
// TODO 加载完成后的逻辑写在这里, 下面的代码仅供参考 // TODO 加载完成后的逻辑写在这里, 下面的代码仅供参考
this.initData(); this.initData();
this.initView(); this.initView();
this.initListener(); this.initEvent();
} }
_cantouch = null;
initData() { initData() {
// 所有全局变量 默认都是null
this._cantouch = true;
}
initView() {
this.initBg();
this.initPic();
this.initBtn();
this.initIcon();
}
initBg() {
const bgNode = cc.find('Canvas/bg');
bgNode.scale = this._mapScaleMax;
}
pic1 = null;
pic2 = null;
initPic() {
const canvas = cc.find('Canvas');
const maxW = canvas.width * 0.7;
this.getSprNodeByUrl(this.data.pic_url, (sprNode) => {
const picNode1 = sprNode;
picNode1.scale = maxW / picNode1.width;
picNode1.baseX = picNode1.x;
canvas.addChild(picNode1);
this.pic1 = picNode1;
const labelNode = new cc.Node();
labelNode.color = cc.Color.YELLOW;
const label = labelNode.addComponent(cc.Label);
label.string = this.data.text;
label.fontSize = 60;
label.lineHeight = 60;
label.font = cc.find('Canvas/res/font/BRLNSDB').getComponent('cc.Label').font;
picNode1.addChild(labelNode);
});
this.getSprNodeByUrl(this.data.pic_url_2, (sprNode) => {
const picNode2 = sprNode;
picNode2.scale = maxW / picNode2.width;
canvas.addChild(picNode2);
picNode2.x = canvas.width;
picNode2.baseX = picNode2.x;
this.pic2 = picNode2;
const labelNode = new cc.Node();
const label = labelNode.addComponent(cc.RichText);
const size = 60
label.font = cc.find('Canvas/res/font/BRLNSDB').getComponent(cc.Label).font;
label.string = `<outline color=#751e00 width=4><size=${size}><color=#ffffff>${this.data.text}</color></size></outline>`
label.lineHeight = size;
picNode2.addChild(labelNode);
});
}
initIcon() {
const iconNode = this.getSprNode('icon');
iconNode.zIndex = 5;
iconNode.anchorX = 1;
iconNode.anchorY = 1;
iconNode.parent = cc.find('Canvas');
iconNode.x = iconNode.parent.width / 2 - 10;
iconNode.y = iconNode.parent.height / 2 - 10;
iconNode.on(cc.Node.EventType.TOUCH_START, () => {
this.playAudioByUrl(this.data.audio_url);
})
}
curPage = null;
initBtn() {
this.curPage = 0;
const bottomPart = cc.find('Canvas/bottomPart');
bottomPart.zIndex = 5; // 提高层级
bottomPart.x = bottomPart.parent.width / 2;
bottomPart.y = -bottomPart.parent.height / 2;
const leftBtnNode = bottomPart.getChildByName('btn_left');
//节点中添加了button组件 则可以添加click事件监听
leftBtnNode.on('click', () => {
if (!this._cantouch) {
return;
}
if (this.curPage == 0) {
return;
}
this.curPage = 0
this.leftMove();
this.playLocalAudio('btn');
})
const rightBtnNode = bottomPart.getChildByName('btn_right');
//节点中添加了button组件 则可以添加click事件监听
rightBtnNode.on('click', () => {
if (!this._cantouch) {
return;
}
if (this.curPage == 1) {
return;
}
this.curPage = 1
this.rightMove();
// 游戏结束时需要调用这个方法通知系统作业完成
onHomeworkFinish();
this.playLocalAudio('btn');
})
} }
initView() {
leftMove() {
this._cantouch = false;
const len = this.pic1.parent.width;
cc.tween(this.pic1)
.to(1, { x: this.pic1.baseX }, { easing: 'cubicInOut' })
.start();
cc.tween(this.pic2)
.to(1, { x: this.pic2.baseX }, { easing: 'cubicInOut' })
.call(() => {
this._cantouch = true;
})
.start();
} }
initEvent() {
rightMove() {
this._cantouch = false;
const len = this.pic1.parent.width;
cc.tween(this.pic1)
.to(1, { x: this.pic1.baseX - len }, { easing: 'cubicInOut' })
.start();
cc.tween(this.pic2)
.to(1, { x: this.pic2.baseX - len }, { easing: 'cubicInOut' })
.call(() => {
this._cantouch = true;
})
.start();
} }
// update (dt) {},
initListener() {
}
playLocalAudio(audioName) { playLocalAudio(audioName) {
const audio = cc.find(`Canvas/res/audio/${audioName}`).getComponent(cc.AudioSource); const audio = cc.find(`Canvas/res/audio/${audioName}`).getComponent(cc.AudioSource);
......
export const defaultData = { export const defaultData = {
"pic_url": "http://staging-teach.cdn.ireadabc.com/ed94332a503c31e0908bd4c6923a2665.png", "aniEnter": {
"pic_url_2": "http://staging-teach.cdn.ireadabc.com/5fb60317ade0195d35ad8034d5370a7f.png", "skeJsonData": {}, "texJsonData": {}, "texPngData": {}, "audioUrl": "http://staging-teach.cdn.ireadabc.com/7fe846cbce9c853eb000e567eee5e4f6.mp3", "time": "2"
"text": "This is a test label.", },
"audio_url": "http://staging-teach.cdn.ireadabc.com/f47f1d7b5c160fe1c59500d180346240.mp3" "item": {
"questionList": [
{
"audio": "", "image": "", "optionList": [{ "type": "text", "text": "a", "image": "", "optionAudio": "http://staging-teach.cdn.ireadabc.com/116fb7accb5428361836fbc46287f769.mp3" }, { "type": "text", "text": "b", "image": "", "optionAudio": "http://staging-teach.cdn.ireadabc.com/526624b47ba5e46f698add9e152a4b4e.mp3" }, { "type": "text", "text": "", "image": "", "optionAudio": "http://staging-teach.cdn.ireadabc.com/fe2520ea0b12ad8c482595f6dddf8019.mp3" }]
},
{
"audio": "", "image": "http://staging-teach.cdn.ireadabc.com/a5b6943a004bc48b07220f832853bd46.png", "optionList": [{ "type": "picText", "text": "as", "image": "http://staging-teach.cdn.ireadabc.com/418486dc95e98b7d3f88f652c4716bbc.png", "optionAudio": "http://staging-teach.cdn.ireadabc.com/116fb7accb5428361836fbc46287f769.mp3" }, { "type": "picText", "text": "bs", "image": "http://staging-teach.cdn.ireadabc.com/476305ab6763e6821b34f66f1b6a59ed.png", "optionAudio": "http://staging-teach.cdn.ireadabc.com/f7fb9f71ab7d460ac2f78c85efba7610.mp3" }, { "type": "picText", "text": "cd", "image": "http://staging-teach.cdn.ireadabc.com/cda87159d3d022b6469b186e325c2bb6.png", "optionAudio": "" }, { "type": "picText", "text": "dd", "image": "http://staging-teach.cdn.ireadabc.com/bb4244d166b6d077617ff089f7fd46c4.png", "optionAudio": "" }, { "type": "picText", "text": "ed", "image": "http://staging-teach.cdn.ireadabc.com/be64edcdfed05f4a61690207570f39d7.png", "optionAudio": "http://staging-teach.cdn.ireadabc.com/9df3f14bc88bcffc49b6717c40428ed8.mp3" }]
}
]
}
} }
\ No newline at end of file
...@@ -61,6 +61,8 @@ registerLocaleData(zh); ...@@ -61,6 +61,8 @@ registerLocaleData(zh);
}) })
export class AppModule { export class AppModule {
constructor(library: FaIconLibrary) { constructor(library: FaIconLibrary) {
library.addIconPacks(fas, far); let fs: any = fas;
let fa: any = far;
library.addIconPacks(fs, fa);
} }
} }
<div class="model-content"> <div class="model-content">
<div class="card-config">
<div>
入场动画配置
<div
style="width: 700px;height: 300px; margin:10px 0; min-width: 300px;margin-top: 20px;border: 2px dashed;padding: 20px 10px 5px 10px;">
骨骼动画
<app-upload-dragon-bone [skeJsonData]=aniEnter.skeJsonData [texJsonData]=aniEnter.texJsonData
[texPngData]=aniEnter.texPngData (save)="saveAniEnter($event)">
</app-upload-dragon-bone>
音频配置
<app-audio-recorder [audioUrl]="aniEnter.audioUrl" [withRmBtn]="aniEnter.audioUrl!=''"
(audioUploaded)="onAudioUploadAniEnter($event)">
</app-audio-recorder>
时间配置
<input type="text" nz-input [(ngModel)]="aniEnter.time" (ngModelChange)="this.onTxtChangeAniEnter()">
</div>
</div>
<!-- <div class="card-config">
<div class="card-item clearfix" style="padding: 0.5vw; width: 600px; "> <div class="card-item clearfix" style="padding: 0.5vw; width: 600px; ">
<div class="card-item-content border"> <div class="card-item-content border">
<span style="margin-left: 5%;height: 30px; font-size: 18px;">标题音频:</span> <span style="margin-left: 5%;height: 30px; font-size: 18px;">标题音频:</span>
...@@ -15,21 +37,28 @@ ...@@ -15,21 +37,28 @@
<br> <br>
</div> </div>
</div> </div>
</div> </div> -->
<div class="card-config"> <div class="card-config">
<div *ngFor="let question of item.questionList; let i = index" class="card-item clearfix" <div *ngFor="let question of item.questionList; let i = index" class="card-item clearfix"
style="padding: 0.5vw; width: 100%; "> style="padding: 0.5vw; width: 100%; ">
<div class="card-item-content border"> <div class="card-item-content border">
<span style="height: 30px; font-size: 18px;">完整单词:</span> <div>
<span style="height: 30px; font-size: 18px;">{{getQuestionText(question)}}</span> <span style="height: 30px; font-size: 18px;">完整单词:</span>
<br> <span style="height: 30px; font-size: 18px;">{{getQuestionText(question)}}</span>
<span style="height: 30px; font-size: 18px;">单词音频:</span> </div>
<br> <div>
<app-audio-recorder [audioUrl]="question.audio" (audioUploaded)="onAudioUploadSuccess($event, i)"> <button style="margin-top: 5px;border-width: 1px;border-style: dotted; padding: 5px 20px;color: #f00;"
</app-audio-recorder> nz-button nzType="dashed" class="add-btn" (click)="removeQuestion(i)">
<br> 删除题目
<span style="height: 30px; font-size: 18px;">拼图图片:</span> </button>
</div>
<div>
<div style="height: 30px; font-size: 18px;">单词音频:</div>
<app-audio-recorder [audioUrl]="question.audio" (audioUploaded)="onAudioUploadSuccess($event, i)">
</app-audio-recorder>
</div>
<span style="height: 30px; font-size: 18px;">拼图图片(可忽略):</span>
<br> <br>
<div style="width: 300px;"> <div style="width: 300px;">
<app-upload-image-with-preview [picUrl]="question.image" <app-upload-image-with-preview [picUrl]="question.image"
...@@ -40,15 +69,32 @@ ...@@ -40,15 +69,32 @@
<div *ngFor="let option of question.optionList; let j = index" class="section-content;text-align:center" <div *ngFor="let option of question.optionList; let j = index" class="section-content;text-align:center"
style="padding: 0.5vw; display: inline-block"> style="padding: 0.5vw; display: inline-block">
<div style="margin-top: 20px; float: left; border-width: 1px; border-style: dotted; <div style="margin-top: 20px; float: left; border-width: 1px; border-style: dotted;
padding: 20px; margin-right: 0px; width: 220px; height: 215px;"> padding: 20px; margin-right: 0px; width: 420px; height: 385px;">
<span style="height: 30px; font-size: 18px;">选项文本:</span> <h2> 选项类型: </h2>
<input style="width: 150px; " type="text" maxlength="" nz-input [(ngModel)]="option.text" (blur)="save()"> <nz-radio-group [(ngModel)]="option.type" style="margin-left: 20px; margin-top: -11px"
<br> (ngModelChange)="save()">
<span style="height: 30px; font-size: 18px;">选项音频:</span> <label nz-radio nzValue="text">文本</label>
<label nz-radio nzValue="pic">图片</label>
<label nz-radio nzValue="picText">图片加文本</label>
</nz-radio-group>
<div *ngIf="option.type !='pic'">
<div style="height: 30px; font-size: 18px;">选项文本:</div>
<input style="width: 150px; " type="text" maxlength="" nz-input [(ngModel)]="option.text" (blur)="save()">
</div>
<div *ngIf="option.type != 'text'">
<div style="height: 30px; font-size: 18px;">选项图片:</div>
<div style="width: 100px;">
<app-upload-image-with-preview [picUrl]="option.image"
(imageUploaded)="onOptionImageUploadSuccessByItem($event, option)">
</app-upload-image-with-preview>
</div>
</div>
<div style="margin-top:10px;height: 30px; font-size: 18px;">选项音频:</div>
<app-audio-recorder [audioUrl]="option.optionAudio" (audioUploaded)="onOptionUploadSuccess($event, i, j)"> <app-audio-recorder [audioUrl]="option.optionAudio" (audioUploaded)="onOptionUploadSuccess($event, i, j)">
</app-audio-recorder> </app-audio-recorder>
<div *ngIf="(question.optionList.length > 3)"> <div *ngIf="(question.optionList.length > 2)">
<button style="margin-top: 20px; width: 100%; height: 32px; color: red;" nz-button nzType="dashed" <button style="margin-top: 20px; width: 100%; height: 32px; color: red;" nz-button nzType="dashed"
class="add-btn" (click)="removeOption(i, j)"> class="add-btn" (click)="removeOption(i, j)">
删除选项 删除选项
...@@ -64,11 +110,18 @@ ...@@ -64,11 +110,18 @@
增加选项 增加选项
</button> </button>
</div> </div>
<br>
</div> </div>
</div> </div>
</div> </div>
<div>
<button style="margin-top: 20px; float: left; border-width: 1px;
border-style: dotted; padding: 20px; margin-right: 20px;
width: 220px; height: 215px;" nz-button nzType="dashed" class="add-btn" (click)="addQuestion()">
增加题目
</button>
</div>
</div> </div>
\ No newline at end of file
...@@ -13,6 +13,13 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -13,6 +13,13 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
saveKey = "DataKey_Cocos_ET20"; saveKey = "DataKey_Cocos_ET20";
// 储存对象 // 储存对象
item; item;
aniEnter: any = {
skeJsonData: {},
texJsonData: {},
texPngData: {},
audioUrl: null,
time: 1,
}
copyQuestionData; copyQuestionData;
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) { constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
...@@ -25,7 +32,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -25,7 +32,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
"audio": "", "audio": "",
"image": "", "image": "",
"optionList": [{ "optionList": [{
"type": 0,
"text": "", "text": "",
"image": "",
"optionAudio": "" "optionAudio": ""
}] }]
} }
...@@ -46,7 +55,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -46,7 +55,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
addOption(questionIdx) { addOption(questionIdx) {
this.item.questionList[questionIdx].optionList.push({ this.item.questionList[questionIdx].optionList.push({
"type": 0,
"text": "", "text": "",
"image": "",
"optionAudio": "" "optionAudio": ""
}); });
this.save(); this.save();
...@@ -67,13 +78,13 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -67,13 +78,13 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnInit() { ngOnInit() {
this.item = { this.item = {
questionAudio: "",
questionText: "",
questionList: [{ questionList: [{
"audio": "", "audio": "",
"image": "", "image": "",
"optionList": [{ "optionList": [{
"type": 0,
"text": "", "text": "",
"image": "",
"optionAudio": "" "optionAudio": ""
}] }]
}] }]
...@@ -82,8 +93,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -82,8 +93,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 获取存储的数据 // 获取存储的数据
(<any>window).courseware.getData((data) => { (<any>window).courseware.getData((data) => {
console.log("data", data);
if (data) { if (data) {
this.item = data; if (data.aniEnter) {
this.aniEnter = data.aniEnter;
}
if (data.item) {
this.item = data.item;
}
} }
this.init(); this.init();
...@@ -113,8 +130,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -113,8 +130,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
onQuestionAudioUploadSuccess(e) { onQuestionAudioUploadSuccess(e) {
this.item.questionAudio = e.url; // this.item.questionAudio = e.url;
this.save(); // this.save();
// questionText // questionText
} }
onImageUploadSuccessByItem(e, questionIdx) { onImageUploadSuccessByItem(e, questionIdx) {
...@@ -123,6 +140,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -123,6 +140,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this, this.refresh() this, this.refresh()
this.save(); this.save();
} }
onOptionImageUploadSuccessByItem(e, option) {
option.image = e.url;
this.save();
}
radioClick(questionIdx, optionIdx) { radioClick(questionIdx, optionIdx) {
this.item.questionList[questionIdx].rightOptionIdx = optionIdx; this.item.questionList[questionIdx].rightOptionIdx = optionIdx;
this.changeDetectorRef.markForCheck(); this.changeDetectorRef.markForCheck();
...@@ -143,11 +164,27 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -143,11 +164,27 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.save(); this.save();
} }
saveAniEnter(e) {
console.log(e);
this.save();
}
onAudioUploadAniEnter(e) {
this.aniEnter.audioUrl = e.url
this.save();
}
onTxtChangeAniEnter() {
this.save()
}
/** /**
* 储存数据 * 储存数据
*/ */
save() { save() {
(<any>window).courseware.setData(this.item, null, this.saveKey); let obj: any = {
aniEnter: this.aniEnter,
item: this.item
};
(<any>window).courseware.setData(obj, 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