Commit fb3a8bb8 authored by linzhiguo's avatar linzhiguo

+ 脚手架

# 选择移动相关
parent 5278c1b4
export class East10{
stars : Array<Star> = [];
pages : Array<Page> = [];
kinds : Array<Kind> = [];
options : Array<Option> = [];
}
export class Star{
id : string;
title : string;
}
export class Page{
id : string;
title : string;
star_id : string;
}
export class Kind{
id : string;
word : string;
audio_url : string;
pic_url : string;
page_id : string;
//star_id : string;
}
export class Option{
word : string;
audio_url : string;
pic_url : string;
kind_id : string;
}
......@@ -6,30 +6,3 @@
height: 100%;
}
.radioPaire {
float: left;
margin: 3px;
border-style: dashed;
border-color: #000;
border-width: 1px;
}
.border {
border-radius: 20px;
border-style: dashed;
padding: 20px;
margin: 20px;
/*width: 500px; */
/*//border-radius: 20px;*/
/*//border-width: 2px;*/
/*//border-color: #000000;*/
}
.border-lite {
border: 2px dashed #ddd;
border-radius: 0.5rem;
padding: 10px;
margin: 10px;
}
<div class="model-content">
<div style="padding: 10px;">
<div style="width: 300px;" align='center'>
<span>图1: </span>
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')">
</app-upload-image-with-preview>
<nz-card nzTitle="分类模板内容编辑" style="margin:5vw;" nzType="inner">
<nz-divider nzText="星" nzOrientation="left"></nz-divider>
<div nz-row>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="add-btn" nzNoColon=true></nz-form-label>
<nz-form-control [nzXs]='24' [nzSm]='12' [nzMd]='12' [nzLg]='6'>
<button nz-button nzType="dashed" class="add-btn" id="add-btn" (click)="addStar()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
</div>
<div nz-row>
<div *ngFor="let data of item.stars;let i = index" style="margin: 2vw;">
<div nz-col [nzXs]='24' [nzSm]='12' [nzMd]='12' [nzLg]='4'>
<nz-card nzTitle="星-{{i + 1}}" [nzExtra]="extraTemplate" style="height: 100px; margin: 1vw;">
</nz-card>
<ng-template #extraTemplate>
<button style="margin: 10px;" nz-button nzType="danger" (click)="delStar(i)">
<span>删除</span>
</button>
</ng-template>
</div>
</div>
</div>
<nz-divider nzText="页" nzOrientation="left"></nz-divider>
<div nz-row>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="add-btn" nzNoColon=true></nz-form-label>
<nz-form-control [nzXs]='24' [nzSm]='12' [nzMd]='12' [nzLg]=''>
<button nz-button nzType="dashed" class="add-btn" id="add-btn" (click)="addPage()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
</div>
<div style="width: 300px; margin-top: 5px;" align='center'>
<span>图2: </span>
<app-upload-image-with-preview
[picUrl]="item.pic_url_2"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url_2')">
</app-upload-image-with-preview>
<div nz-row>
<div *ngFor="let data of item.pages;let i = index" style="margin: 2vw;">
<div nz-col [nzXs]='24' [nzSm]='12' [nzMd]='12' [nzLg]='4'>
<nz-card nzTitle="页-{{i + 1}}" [nzExtra]="extraTemplate" style="height: 200px; margin: 1vw;">
<nz-form-item>
<nz-form-label [nzSpan]="6"></nz-form-label>
<nz-form-control [nzSpan]="12">
<nz-select [(ngModel)]="data.star_id" (ngModelChange)="setStarID($event, data)" style="width:120px" nzAllowClear>
<nz-option *ngFor="let o of item.stars let j = index" [nzValue]="o.id" [nzLabel]="'星-'+(j+1)"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</nz-card>
<ng-template #extraTemplate>
<button style="margin: 10px;" nz-button nzType="danger" (click)="delPage(i)">
<span>删除</span>
</button>
</ng-template>
</div>
</div>
</div>
<div style="width: 300px; margin-top: 15px;">
<span>文本: </span>
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
<nz-divider nzText="分组" nzOrientation="left"></nz-divider>
<div nz-row>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="add-btn" nzNoColon=true>分组</nz-form-label>
<nz-form-control [nzXs]='24' [nzSm]='12' [nzMd]='12' [nzLg]='6'>
<button nz-button nzType="dashed" class="add-btn" id="add-btn" (click)="addKind()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
<nz-form-item>
<nz-form-label> 建议:4个分组以内为最佳效果。图片:最佳尺寸为188*122像素</nz-form-label>
</nz-form-item>
</nz-form-control>
</nz-form-item>
</div>
<div nz-row>
<div *ngFor="let data of item.kinds;let i = index" style="margin: 2vw;">
<div nz-col [nzXs]='24' [nzSm]='12' [nzMd]='12' [nzLg]='6'>
<nz-card nzTitle="分组-{{i + 1}}" [nzExtra]="extraTemplate" style="height: 400px; margin: 1vw;">
<nz-form-item>
<nz-form-label [nzSpan]="6"></nz-form-label>
<nz-form-control [nzSpan]="12">
<nz-select [(ngModel)]="data.page_id" (ngModelChange)="setPageID($event, data)" style="width:120px" nzAllowClear>
<nz-option *ngFor="let o of item.pages let j = index" [nzValue]="o.id" [nzLabel]="'页-'+(j+1)"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="{{i}}.word">文本</nz-form-label>
<nz-form-control [nzSpan]="12">
<input nz-input type="text" id="{{i}}.word" placeholder="请录入内容" [(ngModel)]="data.word" (blur)="save()">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="{{i}}.pic_url">图片</nz-form-label>
<nz-form-control [nzSpan]="12">
<app-upload-image-with-preview style="width: 100%" [picUrl]="data.pic_url"
(imageUploaded)="onImageUploadSuccess($event, data, 'pic_url')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzNoColon=true>声音</nz-form-label>
<nz-form-control [nzSpan]="18">
<app-audio-recorder [audioUrl]="data.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, data, 'audio_url')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
</nz-card>
<ng-template #extraTemplate>
<button style="margin: 10px;" nz-button nzType="danger" (click)="delKind(i)">
<span>删除</span>
</button>
</ng-template>
</div>
<div style="margin-top: 5px">
<span>音频: </span>
<app-audio-recorder
[audioUrl]="item.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder>
</div>
</div>
<nz-divider nzText="选项" nzOrientation="left"></nz-divider>
<div nz-row>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="add-btn" nzNoColon=true>选项</nz-form-label>
<nz-form-control [nzXs]='24' [nzSm]='12' [nzMd]='12' [nzLg]='6'>
<button nz-button nzType="dashed" class="add-btn" id="sheep-add-btn" (click)="addOption()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
<nz-form-item>
<nz-form-label> 图片:最佳尺寸为258*174像素</nz-form-label>
</nz-form-item>
</nz-form-control>
</nz-form-item>
</div>
<div nz-row>
<div *ngFor="let data of item.options;let i = index" style="margin: 1vw;">
<div nz-col [nzXs]='24' [nzSm]='12' [nzMd]='12' [nzLg]='6'>
<nz-card nzTitle="选项-{{i + 1}}" [nzExtra]="extraTemplate" style="height: 400px; margin: 1vw;">
<nz-form-item>
<nz-form-label [nzSpan]="6">分组</nz-form-label>
<nz-form-control [nzSpan]="12">
<nz-select [(ngModel)]="data.kind_id" (ngModelChange)="setKindID($event, data)" style="width:150px" nzAllowClear>
<nz-option *ngFor="let o of item.kinds let j = index" [nzValue]="o.id" [nzLabel]="'分组-'+(j+1) +'('+o.word + ')'"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="{{i}}.word">文本</nz-form-label>
<nz-form-control [nzSpan]="12">
<input nz-input type="text" id="{{i}}.word" placeholder="请录入内容" [(ngModel)]="data.word" (blur)="save()">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="{{i}}.pic_url">图片</nz-form-label>
<nz-form-control [nzSpan]="12">
<app-upload-image-with-preview style="width: 100%" [picUrl]="data.pic_url"
(imageUploaded)="onImageUploadSuccess($event, data, 'pic_url')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzNoColon=true>声音</nz-form-label>
<nz-form-control [nzSpan]="18">
<app-audio-recorder [audioUrl]="data.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, data, 'audio_url')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
</nz-card>
<ng-template #extraTemplate>
<button style="margin: 10px;" nz-button nzType="danger" (click)="delOption(i)">
<span>删除</span>
</button>
</ng-template>
</div>
</div>
</div>
</div>
</div>
</nz-card>
</div>
\ No newline at end of file
import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core';
import { Star, Page, Kind, Option, East10 } from './east10';
import { ThrowStmt } from '@angular/compiler';
import { JsonPipe } from '@angular/common';
......@@ -10,32 +12,20 @@ import { JsonPipe } from '@angular/common';
export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用
saveKey = "test_001";
saveKey = "EAST-10";
// 储存对象
item;
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
}
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
createShell() {
this.item.wordList.push({
word: '',
audio: '',
backWord: '',
backWordAudio: '',
});
this.save();
}
removeShell(idx) {
this.item.wordList.splice(idx, 1);
this.save();
}
ngOnInit() {
this.item = {};
//this.item = new Course();
this.item = new East10();
// 获取存储的数据
(<any>window).courseware.getData((data) => {
......@@ -43,61 +33,57 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
if (data) {
this.item = data;
}
console.log(data);
this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
}, this.saveKey);
console.log(this.item);
}
ngOnChanges() {
}
ngOnDestroy() {
}
init() {
init() {
if(!this.item){
this.item = new East10();
}
}
/**
/**
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
this.item[key] = e.url;
onImageUploadSuccess(e, item, key) {
item[key] = e.url;
this.save();
}
}
/**
* 储存音频数据
* @param e
*/
onAudioUploadSuccess(e, key) {
this.item[key] = e.url;
this.save();
}
/**
* 储存音频数据
* @param e
*/
onAudioUploadSuccess(e, item, key) {
item[key] = 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();
}
/**
* 储存数据
*/
save() {
(<any>window).courseware.setData(this.item, null, this.saveKey);
this.refresh();
console.log('this.item = ' + JSON.stringify(this.item));
}
......@@ -111,4 +97,100 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1);
}
}
\ No newline at end of file
randomChar() {
var x = "0123456789qwertyuioplkjhgfdsazxcvbnm";
var tmp = "";
var timestamp = new Date().getTime();
for (var i = 0; i < 6; i++) {
tmp += x.charAt(Math.ceil(Math.random() * 100000000) % x.length);
}
return timestamp + tmp;
}
addStar(){
let star = new Star();
star.id = this.randomChar();
this.item.stars.push(star);
this.save();
}
delStar(idx){
if (idx !== -1){
this.item.stars.splice(idx, 1);
this.save();
}
}
addPage(){
let page = new Page();
page.id = this.randomChar();
this.item.pages.push(page);
this.save();
}
delPage(idx){
if (idx !== -1){
this.item.pages.splice(idx, 1);
this.save();
}
}
addKind(){
let kind = new Kind();
kind.id = this.randomChar();
this.item.kinds.push(kind);
this.save();
}
delKind(idx){
if (idx !== -1){
this.item.kinds.splice(idx, 1);;
this.save();
}
}
addOption(){
let option = new Option();
this.item.options.push(option);
this.save();
}
delOption(idx){
if (idx !== -1){
this.item.options.splice(idx, 1);
this.save();
}
}
setStarID(e, item){
item.star_id = e;
this.save();
}
setPageID(e, item){
item.page_id = e;
this.save();
}
setKindID(e, item){
item.kind_id = e;
this.save();
}
// getIndexInArray(ar, id){
// for(let i = 0; i < ar.length; i++){
// if (ar[i].id == id){
// return i;
// }
// }
// return -1;
// }
// getStarPage(kind){
// let star_id = -1, page_id = this.getIndexInArray(this.item.pages, kind.page_id);
// if (page_id >= 0)
// star_id = this.getIndexInArray(this.item.stars, this.item.pages[page_id].star_id);
// }
}
This diff is collapsed.
......@@ -61,13 +61,65 @@ cc.Class({
getData((data) => {
console.log('data:', data);
//this.data = data || this.getDefaultData();
this.data = this.getDefaultData();
this.data = JSON.parse(JSON.stringify(this.data))
this.data = data || this.getDefaultData();
//this.data = this.getDefaultData();
//this.data = JSON.parse(JSON.stringify(this.data));
this.preData();
this.preloadItem()
})
},
preData(){
let res = JSON.parse(JSON.stringify(this.data));
let data = [];
for(let i = 0; i < res.stars.length; i++){
data[i] = [];
let pages = this.getArrayByID(res.pages, res.stars[i].id, 'star_id');
for(let j = 0; j < pages.length; j++){
data[i][j] = [];
let kinds = this.getArrayByID(res.kinds, pages[j].id, 'page_id');
for(let k = 0; k < kinds.length; k++){
let _kind = {};
data[i][j][k] = _kind;
_kind.text = kinds[k].word||"";
_kind.pic = kinds[k].pic_url||"";
_kind.audio = kinds[k].audio_url||"";
_kind.options = [];
let options = this.getArrayByID(res.options, kinds[k].id, 'kind_id');
for(let m = 0; m < options.length; m++){
let _option = {};
_kind.options[m] = _option;
_option.text = options[m].word||"";
_option.pic = options[m].pic_url||"";
_option.audio = options[m].audio_url||"";
}
}
}
}
this.data = {};
this.data.stars = data;
console.log(data);
},
getArrayByID(ar, id, t){
let ret = [];
for(let i = 0; i < ar.length; i++){
if (ar[i][t] == id)
ret.push(ar[i]);
}
return ret;
},
getIndexInArray(ar, id){
for(let i = 0; i < ar.length; i++){
if (ar[i].id == id){
return i;
}
}
return -1;
},
getData(func) {
if (window && window.courseware) {
window.courseware.getData(func, 'scene');
......@@ -145,6 +197,9 @@ cc.Class({
this._move_area = cc.find('Canvas/move_area');
this._kind_group = cc.find('Canvas/fg/kind').getComponent(cc.js.getClassByName('KindGroup'));
this._move_area.height = this._frameSize.height - 260;
this._ys = [-this._move_area.height/4, this._move_area.height/4];
// let option_node = cc.find('res/option');
// let option = option_node.getComponent(cc.js.getClassByName('WordOption'));
......@@ -234,6 +289,8 @@ cc.Class({
let ot = node.getComponent(cc.js.getClassByName('WordOption'));
ot.copyValues(selected);
ot.selected(true);
//node.width *= 0.4;
//node.height *= 0.4;
kind.showCorrect(node, ()=>{
if (this.tryFinish())
this.pageFinish();
......@@ -520,14 +577,19 @@ cc.Class({
onode.removeAllChildren();
let ot = cc.find('res/option_item');
let item, op;
let item, op;
this._xs = [0, 0];
for(let i = 0; i < os.length; i++){
item = cc.instantiate(ot);
onode.addChild(item);
op = item.getComponent(cc.js.getClassByName('WordOption'));
op.init(os[i]);
item.x = -(this._frameSize.width/2 + (parseInt(i/3) + 1.5)*item.width);
item.y = -20 + (i%3)*150;
console.log(item._w);
this._xs[i%2] -= (i < 2 ? item._w/2 : item._w);
item.x = this._xs[i%2];
console.log(item.x);
item.y = this._ys[i%2];
}
},
......@@ -587,13 +649,17 @@ cc.Class({
if (!this._moved)
return;
let speed = 2;
let area = this._move_area;
this._xs[0] += speed;
this._xs[1] += speed;
for(let i = 0; i < area.childrenCount; i++){
let item = area.children[i];
item.x ++;
item.x += speed;
if (item.x > this._frameSize.width/2 + item.width*1.5){
item.x *= -1;
if (item.x > this._frameSize.width + item._w*1.2){
this._xs[i%2] -= item._w*1.2;
item.x = Math.min(-item._w/2, this._xs[i%2]);
}
}
},
......
export const defaultData = {
"stars":[{"id":"16239922308635wok5p"},{"id":"1623992233278l9trhw"}],"pages":[{"id":"1623992235665ryt80q","star_id":"16239922308635wok5p"},{"id":"1623992246832rwwxwc","star_id":"16239922308635wok5p"},{"id":"162399224768148xblq","star_id":"1623992233278l9trhw"},{"id":"1624169541137z3l0l8","star_id":"1623992233278l9trhw"}],"kinds":[{"id":"1623981972242lokdmj","word":"aaa","page_id":"1623992235665ryt80q"},{"id":"1623988481981dyiqg7","word":"bbb","page_id":"1623992235665ryt80q"},{"id":"162417027477500qwmy","word":"","page_id":"1623992235665ryt80q"},{"id":"1624170275274l1s0xq","word":"ddd","page_id":"1623992246832rwwxwc"},{"id":"16241702766879192s4","word":"eee","page_id":"1623992246832rwwxwc"},{"id":"1624170277020xpdwcp","word":"","page_id":"1623992246832rwwxwc"},{"id":"1624227738503to7kx2","page_id":"162399224768148xblq","word":"fff"},{"id":"1624227738776v99r1v","page_id":"162399224768148xblq","word":"ggg"},{"id":"1624227740414bof8zt","page_id":"162399224768148xblq","word":""},{"id":"1624227741225xhhzbp","page_id":"1624169541137z3l0l8","word":"kkk"},{"id":"162422774153338vuvx","page_id":"1624169541137z3l0l8","word":"lll"},{"id":"1624227741787cdi54f","page_id":"1624169541137z3l0l8","word":""}],"options":[{"kind_id":"1623981972242lokdmj","word":"a1"},{"kind_id":"1623981972242lokdmj","word":"a2"},{"kind_id":"1623981972242lokdmj","word":"a3"},{"kind_id":"1623988481981dyiqg7","word":"b1"},{"kind_id":"1623988481981dyiqg7","word":"b2"},{"kind_id":"1623988481981dyiqg7","word":"b3"},{"kind_id":"162417027477500qwmy","word":"fff"},{"kind_id":"162417027477500qwmy","word":"rrr"},{"kind_id":"1624170275274l1s0xq","word":"d1"},{"kind_id":"1624170275274l1s0xq","word":"d2"},{"kind_id":"1624170275274l1s0xq","word":"d3"},{"kind_id":"16241702766879192s4","word":"e1"},{"kind_id":"16241702766879192s4","word":"e2"},{"kind_id":"16241702766879192s4","word":"e3"},{"kind_id":"1624170277020xpdwcp","word":"we"},{"kind_id":"1624170277020xpdwcp","word":"eewr"},{"kind_id":"1624227738503to7kx2","word":"f1"},{"kind_id":"1624227738503to7kx2","word":"f2"},{"kind_id":"1624227738503to7kx2","word":"f3"},{"kind_id":"1624227738776v99r1v","word":"g1"},{"kind_id":"1624227738776v99r1v","word":"g2"},{"kind_id":"1624227738776v99r1v","word":"g3"},{"kind_id":"1624227740414bof8zt","word":"3434"},{"kind_id":"1624227740414bof8zt","word":"444"},{"kind_id":"1624227741225xhhzbp","word":"k1"},{"kind_id":"1624227741225xhhzbp","word":"k2"},{"kind_id":"162422774153338vuvx","word":"l1"},{"kind_id":"162422774153338vuvx","word":"l2"},{"kind_id":"1624227741787cdi54f","word":"erg3"},{"kind_id":"1624227741787cdi54f","word":"g34t"}]
}
export const defaultData1= {
stars:[
[
[
......
......@@ -112,6 +112,9 @@ cc.Class({
option.pic.height = item.pic.height;
this.layout.node.addChild(node);
option.adjustPicSize();
option.finished();
node.width/=3;
node.height/=3;
node.opacity = 0;
cc.tween(node)
.to(0.5, {opacity:255})
......
......@@ -49,9 +49,12 @@ cc.Class({
initType(type){
this._type = type;
this.pic_node.active = type == 0;
this.pic.node.active = type == 0;
this.pic_finish.active = false;
this.word_node.active = type == 1;
this.word.node.active = type == 1;
this.word_finish.active = false;
this.node._w = [340, 410][type];
this.resetWH();
},
......@@ -61,10 +64,14 @@ cc.Class({
this.node.height = this.pic_finish.height;
this.pic.node.x = -this.pic_node.x;
this.pic.node.y = -this.pic_node.y;
this.node.width = this.pic_node.width;
this.node.height = this.pic_node.height;
}
else if (this._type == 1){
this.node.width = this.word_finish.width;
this.node.height = this.word_finish.height;
this.node.width = this.word_node.width;
this.node.height = this.word_node.height;
// this.word.node.x = -this.word_node.x;
// this.word.node.y = -this.word_node.y;
}
......@@ -99,6 +106,7 @@ cc.Class({
this.setWord(o.word.string);
this.kind_id = o.kind_id;
this.node._w = o.node._w;
},
adjustPicSize(){
......@@ -106,6 +114,17 @@ cc.Class({
this.pic.node.width = this.pic.width;
this.pic.node.height = this.pic.height;
}
},
finished(){
if (this._type == 0){
this.pic_node.getComponent(cc.Sprite).enabled = false;
this.pic_finish.active = true;
}
else{
this.word_node.getComponent(cc.Sprite).enabled = false;
this.word_finish.active = true;
}
}
......
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