Commit fb4ecea5 authored by 邵世尧's avatar 邵世尧

提交

parent 7b9a904b
...@@ -128,5 +128,8 @@ ...@@ -128,5 +128,8 @@
} }
} }
}, },
"defaultProject": "ng-template-generator" "defaultProject": "ng-template-generator",
"cli": {
"analytics": "0ed1797c-900d-4932-8f62-22d25633dc0e"
}
} }
\ No newline at end of file
...@@ -6,3 +6,30 @@ ...@@ -6,3 +6,30 @@
height: 100%; height: 100%;
} }
.item-box{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 10px;
padding-bottom: 2vw;
padding-top: 3vw;
}
.border {
border-radius: 20px;
border-style: dashed;
width: 500px;
text-align: center;
}
.pic-sound-box {
width: 50%;
display: flex;
flex-direction: column
}
\ No newline at end of file
<div class="model-content"> <div class="model-content">
<div style="position: absolute;left: 100px;top:20px;width: 500px;">
<nz-radio-group [(ngModel)]="side">
<label nz-radio nzValue="A"(click)="sideB()">默认背面</label>
<label nz-radio nzValue="B"(click)="sideA()">默认正面</label>
</nz-radio-group>
<div *ngFor="let it of picArr; let i = index" class="card-item" style="padding: 0.5vw;">
<div class="border">
<h3 style="width: 100%; line-height: 40px; text-align: center;"> 卡片-{{i+1}}</h3>
<div style="display: flex; align-items: center; width: 100%;">
<!--上传-->
<div class="item-box" style="width: 100%">
<div style="display: flex; align-items: center">
<span style="padding-right: 10px"> 类型:</span>
<nz-radio-group [(ngModel)]="it.optionTypeA" (ngModelChange)="save()">
<label nz-radio nzValue="A">文本</label>
<label nz-radio nzValue="B">图片</label>
</nz-radio-group>
</div>
<div style="position: absolute; left: 200px; top: 100px; width: 800px;"> <div *ngIf="it.optionTypeA == 'A'" style="width: 60%">
<input style="width: 80%; margin-bottom: 0.5vw" type="text" nz-input placeholder="" [(ngModel)]="it.title" (blur)="saveItem()">
</div>
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> <div *ngIf="it.optionTypeA == 'B'" style="width: 90%; margin: auto">
<div style="width: 100%;">
<app-upload-image-with-preview <app-upload-image-with-preview
[picUrl]="item.pic_url" [picUrl]="it.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')" (imageUploaded)="onImageUploadSuccessByItem($event, it)"
></app-upload-image-with-preview> ></app-upload-image-with-preview>
</div>
</div>
<app-audio-recorder <app-audio-recorder
[audioUrl]="item.audio_url" style="margin-top: 0.5vw"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')" [audioUrl]="it.audio_url"
></app-audio-recorder> (audioUploaded)="onAudioUploadSuccessByItem($event, it)">
<app-custom-hot-zone></app-custom-hot-zone> </app-audio-recorder>
<app-upload-video></app-upload-video>
<app-lesson-title-config></app-lesson-title-config>
</div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
...@@ -9,13 +9,29 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -9,13 +9,29 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
}) })
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 picArr = [];
saveKey = "test_0011"; _item: any;
// 储存对象 saveKey = 'ssy003';
item; radioValue;
side
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) { // @Input()
set item(item) {
this._item = item;
// this.init();
}
get item() {
return this._item;
}
@Output()
update = new EventEmitter();
constructor(private appRef: ApplicationRef) {
} }
...@@ -23,25 +39,37 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -23,25 +39,37 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
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);
this.init(); this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh(); this.refresh();
}, this.saveKey);
} // this.initDefaultData();
}, this.saveKey);
this.initData();
}
ngOnChanges() { ngOnChanges() {
} }
ngOnDestroy() { ngOnDestroy() {
...@@ -49,48 +77,116 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -49,48 +77,116 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() { init() {
if (this.item.contentObj.picArr) {
this.picArr = this.item.contentObj.picArr;
} else {
this.picArr = this.getDefaultPicArr();
this.item.contentObj.picArr = this.picArr;
} }
console.log('item:' , this.item);
// this.picArr = this.getDefaultPicArr();
// this.item.contentObj.picArr = this.picArr;
// console.log('this.item:;', this.picArr);
/** }
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
this.item[key] = e.url; cardItemData(){
return {
title: "",
pic_url: "",
audio_url: ""
};
}
sideA(){
this.item.sideA=1;
this.item.sideB=0;
this.save();
console.log('radiovalue:' , this.radioValue);
console.log('item:' , this.item);
}
sideB(){
this.item.sideB=1;
this.item.sideA=0;
this.save(); this.save();
console.log('item:' , this.item);
} }
/** getDefaultPicArr() {
* 储存音频数据 let arr = [];
* @param e return arr;
*/ }
onAudioUploadSuccess(e, key) {
initData() {
this.picArr=[];
this.item.contentObj.picArr = this.picArr;
for(let i=1;i<=6;i++){
let item = this.cardItemData();
this.picArr.push(item);
}
this.saveItem();
console.log('init~data:', this.picArr);
this.item[key] = e.url;
}
onImageUploadSuccessByItem(e, item) {
item.pic_url = e.url;
this.save(); this.save();
} }
onAudioUploadSuccessByItem(e, item) {
item.audio_url = e.url;
this.save();
}
/**
* 储存数据 radioClick(it, radioValue) {
*/ it.radioValue = radioValue;
this.saveItem();
}
clickCheckBox() {
console.log(' in clickCheckBox');
this.saveItem();
}
saveItem() {
console.log(' in saveItem');
// this.update.emit(this.item);
this.save();
}
save() { save() {
(<any> window).courseware.setData(this.item, null, this.saveKey); (<any> window).courseware.setData(this.item, null, this.saveKey);
console.log('side'+this.item);
this.refresh(); this.refresh();
} }
/**
* 刷新 渲染页面
*/
refresh() { refresh() {
setTimeout(() => { setTimeout(() => {
this.appRef.tick(); this.appRef.tick();
}, 1); }, 1);
console.log("===========================================================================================");
} }
} }
......
<div class="game-container" #wrap> <div class="game-container" #wrap>
<canvas id="canvas" #canvas></canvas> <canvas id="canvas" #canvas></canvas>
</div> </div>
This diff is collapsed.
const res = [ const res = [
// ['bg', "assets/play/bg.jpg"], ['BG', "assets/play/bg.jpg"],
['btn_left', "assets/play/btn_left.png"], ['star', "assets/play/star.png"],
['btn_right', "assets/play/btn_right.png"], ['petal_1', "assets/play/star.png"],
// ['text_bg', "assets/play/text_bg.png"], ['petal_2', "assets/play/star.png"],
['petal_3', "assets/play/star.png"],
['petal_4', "assets/play/star.png"],
['ss', "assets/play/ss.png"],
['stn', "assets/play/stn.png"],
['retn', "assets/play/retn.png"],
['t1', "assets/play/t1.png"],
['t2', "assets/play/t2.png"],
['t3', "assets/play/t3.png"],
['t4', "assets/play/t4.png"],
['t5', "assets/play/t5.png"],
['t6', "assets/play/t6.png"],
['touzi0',"assets/play/1.png"],
['touzi1',"assets/play/2.png"],
['touzi2',"assets/play/3.png"],
['touzi3',"assets/play/4.png"],
['touzi4',"assets/play/5.png"],
['touzi5',"assets/play/6.png"],
['front',"assets/play/front.png"],
['back0',"assets/play/back0.png"],
['back1',"assets/play/back1.png"],
['back2',"assets/play/back2.png"],
]; ];
const resAudio = [ const resAudio = [
['click', "assets/play/music/click.mp3"], ['start', "assets/play/music/start.mp3"],
['card', "assets/play/music/card.mp3"],
['touzi', "assets/play/music/touzi.mp3"],
]; ];
......
src/assets/play/bg.jpg

25.8 KB | W: | H:

src/assets/play/bg.jpg

396 KB | W: | H:

src/assets/play/bg.jpg
src/assets/play/bg.jpg
src/assets/play/bg.jpg
src/assets/play/bg.jpg
  • 2-up
  • Swipe
  • Onion skin
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