Commit b9610f59 authored by liujiangnan's avatar liujiangnan

feat: 摩天轮

parent fe52a38a
{
"ver": "2.0.1",
"uuid": "506e7563-c5f2-4dc5-b6da-5539d306cc5a",
"downloadMode": 0,
"duration": 19.435102,
"subMetas": {}
}
\ No newline at end of file
This diff is collapsed.
import { asyncDelay, onHomeworkFinish } from "../script/util"; import { asyncCallNetworkApiGet, asyncCallNetworkApiPost, asyncDelay, buttonOnClick, onHomeworkFinish } from "../script/util";
import { MyCocosSceneComponent } from "../script/MyCocosSceneComponent"; import { MyCocosSceneComponent } from "../script/MyCocosSceneComponent";
const { ccclass, property } = cc._decorator; const { ccclass, property } = cc._decorator;
...@@ -6,190 +6,113 @@ const { ccclass, property } = cc._decorator; ...@@ -6,190 +6,113 @@ const { ccclass, property } = cc._decorator;
@ccclass @ccclass
export default class SceneComponent extends MyCocosSceneComponent { export default class SceneComponent extends MyCocosSceneComponent {
addPreloadImage() { @property(cc.AudioClip)
// TODO 根据自己的配置预加载图片资源 bgMusic1: cc.AudioClip = null;
this._imageResList.push({ url: this.data.pic_url });
this._imageResList.push({ url: this.data.pic_url_2 });
}
addPreloadAudio() {
// TODO 根据自己的配置预加载音频资源
this._audioResList.push({ url: this.data.audio_url });
}
addPreloadAnima() {
}
async onLoadEnd() {
// TODO 加载完成后的逻辑写在这里, 下面的代码仅供参考
this.initData();
this.initView();
this.initListener();
}
_cantouch = null;
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; addPreloadImage() {
pic2 = null; // this._imageResList.push({ url: this.data.pic_url });
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);
});
async getKidInfo() {
const kidDataStr = await asyncCallNetworkApiGet('/api/oxford/v1/kid/info', {
token: cc.sys.localStorage.getItem('token')
});
if(kidDataStr){
return JSON.parse(kidDataStr).data;
} }
return null;
}
initIcon() { async onLoadEnd() {
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');
})
}
leftMove() { const middleLayer = cc.find('middleLayer');
this._cantouch = false; if (!middleLayer) {
const len = this.pic1.parent.width; cc.sys.localStorage.setItem('token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NCwicGhvbmUiOiIxNTUwMDAwMDAwMSIsInNpZ24iOiI0OTliYjg5Yy1lYjI5LTQ2M2EtYjk5ZS0zNDg2NDUwMGEyOTkiLCJpYXQiOjE2NTQ2NzY4MzMsImV4cCI6MTY1NzI2ODgzM30.MacCd_XUhvpNrMukYu8YNRVSbc-hju_WBN_FeiRACuc');
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();
} }
rightMove() { const kidDataStr = await asyncCallNetworkApiGet('/api/oxford/v1/kid/info', {
this._cantouch = false; token: cc.sys.localStorage.getItem('token')
const len = this.pic1.parent.width; });
cc.tween(this.pic1) const kidData = JSON.parse(kidDataStr);
.to(1, { x: this.pic1.baseX - len }, { easing: 'cubicInOut' }) if(!kidData.data || !kidData.data.id) {
.start(); middleLayer.getComponent('middleLayer').showTips("用户登录失效,请重新登录");
middleLayer.getComponent('middleLayer').loadOnlineBundle("NJ_login");
cc.tween(this.pic2) return;
.to(1, { x: this.pic2.baseX - len }, { easing: 'cubicInOut' })
.call(() => {
this._cantouch = true;
})
.start();
} }
// update (dt) {},
const btnReturn = cc.find('Canvas/bg/btn_return');
initListener() { buttonOnClick(btnReturn, () => {
const middleLayer = cc.find('middleLayer');
} if (middleLayer) {
middleLayer.getComponent('middleLayer').loadOnlineBundle('NJ_YouLeChang');
playLocalAudio(audioName) { }
const audio = cc.find(`Canvas/res/audio/${audioName}`).getComponent(cc.AudioSource); });
return new Promise((resolve, reject) => { const pid = middleLayer.getComponent('middleLayer').getData('NJ_MoTianLun');
const id = cc.audioEngine.playEffect(audio.clip, false);
cc.audioEngine.setFinishCallback(id, () => { const classDataStr = await asyncCallNetworkApiGet('/api/syllabus/v1/list', {
resolve(id); pid: pid
}); });
}) const classData = JSON.parse(classDataStr);
}
const ballData = classData.rows.map((row, idx) => {
let locked = true;
if (idx == 0) {
locked = false;
} else if (kidData.data.unlock_syllabuses?.includes(row.id)) {
locked = false;
}
return { id: row.id, locked: locked };
});
console.log(ballData);
ballData.forEach((data, idx) => {
if (idx >= 5) {
console.warn('idx >= 5');
return;
}
const star = cc.find(`Canvas/bg/star_${idx}`);
const lock = cc.find(`Canvas/bg/star_${idx}/lock`);
if (data.locked) {
lock.active = true;
} else {
lock.active = false;
}
buttonOnClick(star, async () => {
const kidInfo = await this.getKidInfo();
const activeLevels = kidInfo?kidInfo.active_levels:[];
const activeItem = activeLevels.find(item => item.syllabus_id == data.id);
if (middleLayer && !activeItem ) {
// 弹出激活码
middleLayer.getComponent('middleLayer').showActiveWindow();
return;
}
if (!data.locked) {
console.log('jump to id: ' + data.id);
if (middleLayer) {
const middleLayerComponent = middleLayer.getComponent('middleLayer');
middleLayerComponent.setData('NJ_MonkyTree', data.id);
middleLayerComponent.setData('nextLevelId', ballData[idx+1]?ballData[idx+1].id: null);
middleLayerComponent.loadOnlineBundle('NJ_MonkyTree');
}
}
if(idx === 0){
await asyncCallNetworkApiPost('/api/oxford/v1/kid/unlock', {
kidid: kidData.data.id,
syllabusid: data.id,
token: cc.sys.localStorage.getItem('token')
})
}
});
});
// 播放背景音乐
cc.audioEngine.stopMusic();
cc.audioEngine.playMusic(this.bgMusic1, true);
}
protected update(dt: number): void {
}
} }
...@@ -87,7 +87,7 @@ export class MyCocosSceneComponent extends cc.Component { ...@@ -87,7 +87,7 @@ export class MyCocosSceneComponent extends cc.Component {
preload() { preload() {
const preloadArr = this._imageResList.concat(this._audioResList).concat(this._animaResList); const preloadArr = this._imageResList.concat(this._audioResList).concat(this._animaResList);
cc.assetManager.loadAny(preloadArr, null, null, async (err, data) => { cc.assetManager.loadAny(preloadArr, null, null, (err, data) => {
if (window && window["air"]) { if (window && window["air"]) {
// window["air"].onCourseInScreen = (next) => { // window["air"].onCourseInScreen = (next) => {
...@@ -95,10 +95,10 @@ export class MyCocosSceneComponent extends cc.Component { ...@@ -95,10 +95,10 @@ export class MyCocosSceneComponent extends cc.Component {
// this.onLoadEnd(); // this.onLoadEnd();
// next(); // next();
// }; // };
await this.onLoadEnd(); this.onLoadEnd();
window["air"].hideAirClassLoading(); window["air"].hideAirClassLoading();
} else { } else {
await this.onLoadEnd(); this.onLoadEnd();
} }
cc.debug.setDisplayStats(false); cc.debug.setDisplayStats(false);
......
This diff is collapsed.
{ {
"ver": "2.3.5", "ver": "2.3.5",
"uuid": "e1b4d971-9876-4832-803a-5a321964a78b", "uuid": "ea7f1352-5056-4c66-9763-01750781905d",
"type": "sprite", "type": "sprite",
"wrapMode": "clamp", "wrapMode": "clamp",
"filterMode": "bilinear", "filterMode": "bilinear",
...@@ -8,13 +8,13 @@ ...@@ -8,13 +8,13 @@
"genMipmaps": false, "genMipmaps": false,
"packable": true, "packable": true,
"width": 1280, "width": 1280,
"height": 720, "height": 960,
"platformSettings": {}, "platformSettings": {},
"subMetas": { "subMetas": {
"bg": { "bg_bg": {
"ver": "1.0.4", "ver": "1.0.4",
"uuid": "8288e3d4-4c75-4b27-8f01-f7014417f4dd", "uuid": "34d0e0eb-5fdd-4ec6-a38e-833ca204aaef",
"rawTextureUuid": "e1b4d971-9876-4832-803a-5a321964a78b", "rawTextureUuid": "ea7f1352-5056-4c66-9763-01750781905d",
"trimType": "auto", "trimType": "auto",
"trimThreshold": 1, "trimThreshold": 1,
"rotated": false, "rotated": false,
...@@ -23,9 +23,9 @@ ...@@ -23,9 +23,9 @@
"trimX": 0, "trimX": 0,
"trimY": 0, "trimY": 0,
"width": 1280, "width": 1280,
"height": 720, "height": 960,
"rawWidth": 1280, "rawWidth": 1280,
"rawHeight": 720, "rawHeight": 960,
"borderTop": 0, "borderTop": 0,
"borderBottom": 0, "borderBottom": 0,
"borderLeft": 0, "borderLeft": 0,
......
{
"ver": "2.3.5",
"uuid": "d547fb2a-502c-4659-9c32-272efe63a9a3",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 520,
"height": 605,
"platformSettings": {},
"subMetas": {
"bg_circle": {
"ver": "1.0.4",
"uuid": "9401e103-c390-4991-8d20-4833f8ed9c59",
"rawTextureUuid": "d547fb2a-502c-4659-9c32-272efe63a9a3",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 520,
"height": 605,
"rawWidth": 520,
"rawHeight": 605,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "a964a522-ae2c-4566-9702-3b69db33beab",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1280,
"height": 118,
"platformSettings": {},
"subMetas": {
"bg_front": {
"ver": "1.0.4",
"uuid": "1ce93889-5eca-48a3-9d2d-a7357462f2e4",
"rawTextureUuid": "a964a522-ae2c-4566-9702-3b69db33beab",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1280,
"height": 118,
"rawWidth": 1280,
"rawHeight": 118,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "82621940-7477-4cce-b8f0-e891af95e876",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 247,
"height": 305,
"platformSettings": {},
"subMetas": {
"bg_monkey": {
"ver": "1.0.4",
"uuid": "aa3f9a84-e468-441d-9c72-38614db03366",
"rawTextureUuid": "82621940-7477-4cce-b8f0-e891af95e876",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 247,
"height": 305,
"rawWidth": 247,
"rawHeight": 305,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "dd21a927-6904-46cb-b079-c1c7ab725bb3",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 2897,
"height": 1169,
"platformSettings": {},
"subMetas": {
"bg_star": {
"ver": "1.0.4",
"uuid": "d3d55efc-279b-4a67-a67a-c07ab31f9365",
"rawTextureUuid": "dd21a927-6904-46cb-b079-c1c7ab725bb3",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 2897,
"height": 1169,
"rawWidth": 2897,
"rawHeight": 1169,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "6613a2c8-a4f4-49b3-8ef6-5aa0905d7a4f",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 107,
"height": 112,
"platformSettings": {},
"subMetas": {
"btn_return": {
"ver": "1.0.4",
"uuid": "6b31b583-a216-46fb-9248-aaa67c5ccd4c",
"rawTextureUuid": "6613a2c8-a4f4-49b3-8ef6-5aa0905d7a4f",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 107,
"height": 112,
"rawWidth": 107,
"rawHeight": 112,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{ {
"ver": "2.3.5", "ver": "2.3.5",
"uuid": "9a79969a-0506-48d4-bc98-3c05d109b027", "uuid": "4ff2c83f-2f27-4b8e-9c31-3760df223922",
"type": "sprite", "type": "sprite",
"wrapMode": "clamp", "wrapMode": "clamp",
"filterMode": "bilinear", "filterMode": "bilinear",
"premultiplyAlpha": false, "premultiplyAlpha": false,
"genMipmaps": false, "genMipmaps": false,
"packable": true, "packable": true,
"width": 61, "width": 94,
"height": 67, "height": 59,
"platformSettings": {}, "platformSettings": {},
"subMetas": { "subMetas": {
"btn_left": { "hat": {
"ver": "1.0.4", "ver": "1.0.4",
"uuid": "ce19457d-e8f3-4c38-ae3e-d4b99208ddb5", "uuid": "1f3a2d68-7094-4c5b-8bc0-7301181b95fb",
"rawTextureUuid": "9a79969a-0506-48d4-bc98-3c05d109b027", "rawTextureUuid": "4ff2c83f-2f27-4b8e-9c31-3760df223922",
"trimType": "auto", "trimType": "auto",
"trimThreshold": 1, "trimThreshold": 1,
"rotated": false, "rotated": false,
...@@ -22,10 +22,10 @@ ...@@ -22,10 +22,10 @@
"offsetY": 0, "offsetY": 0,
"trimX": 0, "trimX": 0,
"trimY": 0, "trimY": 0,
"width": 61, "width": 94,
"height": 67, "height": 59,
"rawWidth": 61, "rawWidth": 94,
"rawHeight": 67, "rawHeight": 59,
"borderTop": 0, "borderTop": 0,
"borderBottom": 0, "borderBottom": 0,
"borderLeft": 0, "borderLeft": 0,
......
{ {
"ver": "2.3.5", "ver": "2.3.5",
"uuid": "efa5fa09-a4dd-4bfc-ab7e-17c19f85408f", "uuid": "e1ee1572-75f1-4613-9abd-b79f705ebfdb",
"type": "sprite", "type": "sprite",
"wrapMode": "clamp", "wrapMode": "clamp",
"filterMode": "bilinear", "filterMode": "bilinear",
"premultiplyAlpha": false, "premultiplyAlpha": false,
"genMipmaps": false, "genMipmaps": false,
"packable": true, "packable": true,
"width": 366, "width": 276,
"height": 336, "height": 272,
"platformSettings": {}, "platformSettings": {},
"subMetas": { "subMetas": {
"1orange": { "icon_1": {
"ver": "1.0.4", "ver": "1.0.4",
"uuid": "43d1e79d-6de8-4dcb-b8ce-d767df7913aa", "uuid": "2f4aefee-4b8c-487d-ba83-7112e5574b70",
"rawTextureUuid": "efa5fa09-a4dd-4bfc-ab7e-17c19f85408f", "rawTextureUuid": "e1ee1572-75f1-4613-9abd-b79f705ebfdb",
"trimType": "auto", "trimType": "auto",
"trimThreshold": 1, "trimThreshold": 1,
"rotated": false, "rotated": false,
...@@ -22,10 +22,10 @@ ...@@ -22,10 +22,10 @@
"offsetY": -0.5, "offsetY": -0.5,
"trimX": 0, "trimX": 0,
"trimY": 1, "trimY": 1,
"width": 366, "width": 229,
"height": 335, "height": 211,
"rawWidth": 366, "rawWidth": 229,
"rawHeight": 336, "rawHeight": 212,
"borderTop": 0, "borderTop": 0,
"borderBottom": 0, "borderBottom": 0,
"borderLeft": 0, "borderLeft": 0,
......
{
"ver": "2.3.5",
"uuid": "6f0c15cc-d063-4310-9882-2f399a04fab0",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 229,
"height": 212,
"platformSettings": {},
"subMetas": {
"icon_2": {
"ver": "1.0.4",
"uuid": "c668eaaa-659f-4f28-93ef-bf5ec3535ca0",
"rawTextureUuid": "6f0c15cc-d063-4310-9882-2f399a04fab0",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 229,
"height": 212,
"rawWidth": 229,
"rawHeight": 212,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{ {
"ver": "2.3.5", "ver": "2.3.5",
"uuid": "d582359e-924e-4ee9-9964-1fc4bb417e71", "uuid": "5f061153-40fc-4e60-9e32-4cbab447b961",
"type": "sprite", "type": "sprite",
"wrapMode": "clamp", "wrapMode": "clamp",
"filterMode": "bilinear", "filterMode": "bilinear",
"premultiplyAlpha": false, "premultiplyAlpha": false,
"genMipmaps": false, "genMipmaps": false,
"packable": true, "packable": true,
"width": 61, "width": 229,
"height": 67, "height": 212,
"platformSettings": {}, "platformSettings": {},
"subMetas": { "subMetas": {
"btn_right": { "icon_3": {
"ver": "1.0.4", "ver": "1.0.4",
"uuid": "e5a2dbaa-a677-4a32-90d7-a1b057d7fb59", "uuid": "d13f534c-675c-4258-9a70-ea823eae3a47",
"rawTextureUuid": "d582359e-924e-4ee9-9964-1fc4bb417e71", "rawTextureUuid": "5f061153-40fc-4e60-9e32-4cbab447b961",
"trimType": "auto", "trimType": "auto",
"trimThreshold": 1, "trimThreshold": 1,
"rotated": false, "rotated": false,
"offsetX": -0.5, "offsetX": -0.5,
"offsetY": 0.5, "offsetY": 0,
"trimX": 0, "trimX": 0,
"trimY": 0, "trimY": 0,
"width": 60, "width": 228,
"height": 66, "height": 212,
"rawWidth": 61, "rawWidth": 229,
"rawHeight": 67, "rawHeight": 212,
"borderTop": 0, "borderTop": 0,
"borderBottom": 0, "borderBottom": 0,
"borderLeft": 0, "borderLeft": 0,
......
{ {
"ver": "2.3.5", "ver": "2.3.5",
"uuid": "18d07592-51a9-421e-8972-0f67b68d29e1", "uuid": "0a846826-14ff-41be-be9a-d575c6a9de18",
"type": "sprite", "type": "sprite",
"wrapMode": "clamp", "wrapMode": "clamp",
"filterMode": "bilinear", "filterMode": "bilinear",
"premultiplyAlpha": false, "premultiplyAlpha": false,
"genMipmaps": false, "genMipmaps": false,
"packable": true, "packable": true,
"width": 144, "width": 229,
"height": 144, "height": 212,
"platformSettings": {}, "platformSettings": {},
"subMetas": { "subMetas": {
"icon": { "icon_4": {
"ver": "1.0.4", "ver": "1.0.4",
"uuid": "6fbc30a8-3c49-44ae-8ba4-7f56f385b78a", "uuid": "668079dc-3431-4ed0-97c9-b11444067666",
"rawTextureUuid": "18d07592-51a9-421e-8972-0f67b68d29e1", "rawTextureUuid": "0a846826-14ff-41be-be9a-d575c6a9de18",
"trimType": "auto", "trimType": "auto",
"trimThreshold": 1, "trimThreshold": 1,
"rotated": false, "rotated": false,
"offsetX": 0, "offsetX": 0,
"offsetY": -0.5, "offsetY": -0.5,
"trimX": 3, "trimX": 0,
"trimY": 2, "trimY": 1,
"width": 138, "width": 229,
"height": 141, "height": 211,
"rawWidth": 144, "rawWidth": 229,
"rawHeight": 144, "rawHeight": 212,
"borderTop": 0, "borderTop": 0,
"borderBottom": 0, "borderBottom": 0,
"borderLeft": 0, "borderLeft": 0,
......
{
"ver": "2.3.5",
"uuid": "f6be5ec3-b926-477c-820a-2533beac7542",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 229,
"height": 212,
"platformSettings": {},
"subMetas": {
"icon_5": {
"ver": "1.0.4",
"uuid": "833bbb65-340e-49f3-8bee-860e4231c384",
"rawTextureUuid": "f6be5ec3-b926-477c-820a-2533beac7542",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": -0.5,
"trimX": 0,
"trimY": 1,
"width": 229,
"height": 211,
"rawWidth": 229,
"rawHeight": 212,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "12a00e22-4193-41a4-82fa-7404ec652e4a",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 96,
"height": 131,
"platformSettings": {},
"subMetas": {
"icon_key": {
"ver": "1.0.4",
"uuid": "6cbed5af-b7c2-4b90-a39b-83d601c08a04",
"rawTextureUuid": "12a00e22-4193-41a4-82fa-7404ec652e4a",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 96,
"height": 131,
"rawWidth": 96,
"rawHeight": 131,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
...@@ -128,8 +128,5 @@ ...@@ -128,8 +128,5 @@
} }
} }
}, },
"defaultProject": "ng-template-generator", "defaultProject": "ng-template-generator"
"cli": { }
"analytics": "5f501d82-8f25-4817-a608-9ac70d1f1f70"
}
}
\ No newline at end of file
This diff is collapsed.
...@@ -55,4 +55,4 @@ ...@@ -55,4 +55,4 @@
"tslint": "~5.18.0", "tslint": "~5.18.0",
"typescript": "~3.7.5" "typescript": "~3.7.5"
} }
} }
\ No newline at end of file
...@@ -45,19 +45,17 @@ ...@@ -45,19 +45,17 @@
<fa-icon icon="cog"></fa-icon> <fa-icon icon="cog"></fa-icon>
</div> </div>
</ng-template> </ng-template>
</div> </div>
<div class="p-progress ml-2" (click)="onBtnPlay()" *ngIf="audioUrl || audioBlob" <div class="p-progress ml-2" (click)="onBtnPlay()" *ngIf="audioUrl || audioBlob">
style="background-color: #70B603; width: 35px; height: 35px; border-radius: 35px; margin-left: 10px;margin-top:-1px"> <nz-progress [nzPercent]="percent" [nzWidth]="30" [nzFormat]="progressText"
<nz-progress [nzPercent]="percent" [nzWidth]="35" [nzFormat]="progressText" nzType="circle"></nz-progress>
nzType="circle"> <div class="p-btn-play" [style.left]="isPlaying?'8px':''">
</nz-progress>
<div class="p-btn-play"
style="color: white;margin-left: 2px;margin-top: 1px;"
[style.left]="isPlaying?'8px':''">
<fa-icon [icon]="playIcon"></fa-icon> <fa-icon [icon]="playIcon"></fa-icon>
</div> </div>
</div> </div>
<div class="audio-name">{{_audioName}}</div>
</div> </div>
...@@ -90,26 +90,17 @@ ...@@ -90,26 +90,17 @@
} }
.p-progress { .p-progress {
margin-top: 3.5px; margin-top: 2px;
position: relative; position: relative;
background-color: #27b43f;
border-radius: 15px;
line-height: 26px; line-height: 26px;
.p-btn-play { .p-btn-play {
position: absolute; position: absolute;
left: 11px; left: 10px;
top: 3px; top: 3px;
color: #ffffff; color: #555;
} }
} }
.audio-name{
margin-top: 3.5px;
position: relative;
margin-left: 7px;;
line-height: 26px;
}
:host ::ng-deep nz-upload { :host ::ng-deep nz-upload {
line-height: 33px; line-height: 33px;
} }
......
...@@ -31,21 +31,12 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -31,21 +31,12 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
@Input() @Input()
audioItem: any = null; audioItem: any = null;
@Input()
_audioName: any = null;
@Input() @Input()
set audioUrl(url) { set audioUrl(url) {
this._audioUrl = url; this._audioUrl = url;
if (url) { if (url) {
this.httpHeadCall(this._audioUrl, flag => { this.audio.src = this._audioUrl;
if (flag) { this.audio.load();
this.audio.src = this._audioUrl;
} else {
this.audio.src = this._audioUrl.replace("_l.", ".");
}
this.audio.load();
});
} }
this.init(); this.init();
} }
...@@ -57,7 +48,6 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -57,7 +48,6 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
@Output() audioUploaded = new EventEmitter(); @Output() audioUploaded = new EventEmitter();
@Output() audioUploadFailure = new EventEmitter(); @Output() audioUploadFailure = new EventEmitter();
@Output() audioRemoved = new EventEmitter(); @Output() audioRemoved = new EventEmitter();
@Output() audioName = new EventEmitter();
percent = 0; percent = 0;
progress = 0; progress = 0;
recorder: any; recorder: any;
...@@ -74,41 +64,6 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -74,41 +64,6 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
}; };
} }
httpHeadCall(requsetUrl: string, callback) {
let xhr = new XMLHttpRequest();
console.log("Status: Send Post Request to " + requsetUrl);
try {
xhr.onreadystatechange = () => {
try {
console.log('xhr.readyState: ', xhr.readyState);
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 400)) {
callback(true);
} else {
callback(false);
}
}
} catch (e) {
console.log(e)
}
};
xhr.open("HEAD", requsetUrl, true);
xhr.send();
xhr.timeout = 15000;
xhr.onerror = (e) => {
console.log("汪汪汪 posterror", e);
callback(false);
};
xhr.ontimeout = (e) => {
console.log("汪汪汪 ontimeout", e);
callback(false);
};
} catch (e) {
console.log("Send Get Request error: ", e)
}
}
init() { init() {
this.playIcon = 'play'; this.playIcon = 'play';
this.isPlaying = false; this.isPlaying = false;
...@@ -213,12 +168,8 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -213,12 +168,8 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
break; break;
case 'success': case 'success':
this.isUploading = false; this.isUploading = false;
let url = info.file.response.url;
url = url.substring(0, url.lastIndexOf(".")) + "_l.mp3";
info.file.response.url = url;
this.uploadSuccess(info.file.response); this.uploadSuccess(info.file.response);
this.audioUploaded.emit(info.file.response); this.audioUploaded.emit(info.file.response);
this.audioName.emit(info.file.name);
break; break;
case 'progress': case 'progress':
this.progress = parseInt(info.event.percent, 10); this.progress = parseInt(info.event.percent, 10);
......
...@@ -80,62 +80,43 @@ export class UploadVideoComponent implements OnChanges, OnDestroy { ...@@ -80,62 +80,43 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
URL.revokeObjectURL(this.videoUrl); URL.revokeObjectURL(this.videoUrl);
} }
httpHeadCall(requsetUrl: string, callback) {
let xhr = new XMLHttpRequest();
console.log("Status: Send Post Request to " + requsetUrl);
try {
xhr.onreadystatechange = () => {
try {
console.log('xhr.readyState: ', xhr.readyState);
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 400)) {
callback(true);
} else {
callback(false);
}
}
} catch (e) {
console.log(e)
}
};
xhr.open("HEAD", requsetUrl, true);
xhr.send();
xhr.timeout = 15000;
xhr.onerror = (e) => {
callback(false);
};
xhr.ontimeout = (e) => {
callback(false);
};
} catch (e) {
console.log("Send Get Request error: ", e)
}
}
safeVideoUrl(url) { safeVideoUrl(url) {
const _url = url.replace("_l.", "."); console.log(url);
return this.sanitization.bypassSecurityTrustResourceUrl(_url); // `${url}`; return this.sanitization.bypassSecurityTrustResourceUrl(url); // `${url}`;
} }
videoLoadedMetaData() { videoLoadedMetaData() {
} }
handleChange(info: UploadChangeParam): void { handleChange(info: UploadChangeParam/* { type: string, file: UploadFile, event: any }*/): void {
console.log('info:' , info);
switch (info.type) { switch (info.type) {
case 'start': case 'start':
// this.beforeUpload(info.file);
if (!this.checkSelectFile(info.file)) { if (!this.checkSelectFile(info.file)) {
return; return;
} }
this.uploading = true; this.uploading = true;
this.progress = 0; this.progress = 0;
break; break;
case 'success': case 'success':
let url = info.file.response.url;
url = url.substring(0, url.lastIndexOf(".")) + "_l.mp4";
info.file.response.url = url;
this.uploadSuccess(info.file); this.uploadSuccess(info.file);
// this.beforeUpload(info.file);
// this.uploadSuccess(info.file);
break; break;
case 'progress': case 'progress':
this.progress = info.event.percent; this.progress = info.event.percent;
...@@ -144,6 +125,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy { ...@@ -144,6 +125,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
} }
} }
checkSelectFile(file) { checkSelectFile(file) {
if (!file.lastModified) { if (!file.lastModified) {
return false; return false;
......
import { ApplicationRef, ChangeDetectorRef, ElementRef, ViewChild } from "@angular/core";
export class ComponentBase {
// 储存数据用
saveKey = "";
// 储存对象
item: any = {};
ngOnChanges() { }
ngOnDestroy() { }
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) { }
ngOnInit() {
// 获取存储的数据
(<any>window).courseware.getData((data) => {
if (data) {
this.item = data;
this.itemStr = JSON.stringify(this.item, null, 4).trim();
}
this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
}, this.saveKey);
}
@ViewChild("itemTextarea", { static: true }) itemTextarea: ElementRef;
copyData() {
this.itemTextarea.nativeElement.select();
document.execCommand("copy");
}
/**
* 储存图片数据
* @param e
*/
onAssetUploadSuccess(e: any, ...key: Array<string>) {
let item = this.item;
for (let i = 0; i < key.length; i++) {
if (i + 1 == key.length) {
item[key[i]] = e.url;
this.save();
return;
}
item = item[key[i]];
}
}
save() {
(<any>window).courseware.setData(this.item, null, this.saveKey);
this.itemStr = JSON.stringify(this.item, null, 4).trim();
this.refresh();
console.log('this.item = ' + JSON.stringify(this.item));
}
itemStr = "";
load() {
this.itemStr = this.itemTextarea.nativeElement.value;
if (this.isJSON(this.itemStr)) {
this.item = JSON.parse(this.itemStr);
this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
}
}
isJSON(str) {
if (typeof str == 'string') {
try {
var obj = JSON.parse(str);
if (typeof obj == 'object' && obj) {
return true;
}
return false;
} catch (e) {
return false;
}
}
return false;
}
/**
* 刷新 渲染页面
*/
refresh() {
setTimeout(() => {
this.appRef.tick();
}, 1);
}
init() { }
}
...@@ -33,30 +33,3 @@ ...@@ -33,30 +33,3 @@
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
} }
.button-right {
border-style: dotted;
border-color: rgb(42, 142, 72);
width: 100px;
height: 50px;
color: rgb(42, 142, 72);
background-color: white;
}
.button-wrong {
border-style: dotted;
border-color: rgb(180, 0, 0);
width: 100px;
height: 50px;
color: rgb(180, 0, 0);
background-color: white;
}
.button-disable {
border-style: dotted;
border-color: black;
width: 100px;
height: 50px;
color: black;
background-color: white;
}
\ No newline at end of file
<div class="model-content"> <div class="model-content">
<div style="padding: 10px;"> <div style="padding: 10px;">
<div class="border" style="width: 1000px;">
<textarea style="width: 955px; height: 300px;" (blur)="load()" #itemTextarea>{{itemStr}}</textarea> <div style="width: 300px;" align='center'>
<button (click)="copyData();">Copy</button> <span>图1: </span>
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')">
</app-upload-image-with-preview>
</div> </div>
<div class="border" style="width: 1000px;"> <div style="width: 300px; margin-top: 5px;" align='center'>
<span style="font-size: 20px;">标题: </span> <span>图2: </span>
<input type="text" nz-input [(ngModel)]="item.title" (blur)="save()"> <app-upload-image-with-preview
<span style="font-size: 20px;">题目说明: </span> [picUrl]="item.pic_url_2"
<input type="text" nz-input [(ngModel)]="item.questionText" (blur)="save()"> (imageUploaded)="onImageUploadSuccess($event, 'pic_url_2')">
<span style="font-size: 20px;">题目说明音频: </span> </app-upload-image-with-preview>
<app-audio-recorder
[audioUrl]="item.questionTextAudio"
(audioUploaded)="onAssetUploadSuccess($event, 'questionTextAudio')"
[_audioName]="item.audioFileName"
(audioName)="saveAudioFileName($event)"
></app-audio-recorder>
</div> </div>
<div class="border" style="width: 1000px;"> <div style="width: 300px; margin-top: 15px;">
<div *ngFor="let question of item.questions; let i = index"> <span>文本: </span>
<div class="border" style="width: 950px;"> <input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
<span style="font-size: 20px;">选项类型: </span> </div>
<div *ngIf="question.type=='img'">
<button class="button-right">图片</button>
&nbsp;
<button class="button-disable" (click)="question.type='txt'; save();">文字</button>
</div>
<div *ngIf="question.type=='txt'">
<button class="button-disable" (click)="question.type='img'; save();">图片</button>
&nbsp;
<button class="button-right">文字</button>
</div>
<div *ngIf="question.type=='img'"> <div style="margin-top: 5px">
图片: <span>音频: </span>
<div style="width: 300px;"> <app-audio-recorder
<app-upload-image-with-preview [picUrl]="question.image" [audioUrl]="item.audio_url"
(imageUploaded)="onAssetUploadSuccess($event, 'questions', i, 'image')"> (audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
</app-upload-image-with-preview> ></app-audio-recorder>
</div>
</div>
<span>音频: </span>
<app-audio-recorder [audioUrl]="question.audio"
(audioUploaded)="onAssetUploadSuccess($event, 'questions', i, 'audio')">
</app-audio-recorder>
<div *ngIf="question.type=='txt'">
<span>文本: </span>
<input type="text" nz-input [(ngModel)]="question.text" (blur)="save()">
</div>
<br>
<button style="width: 900px; height: 30px; color: red;" (click)="removeQuestion(i)">删除题目</button>
</div>
</div>
<div class="border" style="width: 950px;">
<button style="width: 900px; height: 100px;" (click)="addQuestion()">增加题目</button>
</div>
</div> </div>
</div> </div>
</div>
\ No newline at end of file </div>
import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core'; import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core';
import { JsonPipe } from '@angular/common'; import { JsonPipe } from '@angular/common';
import { ComponentBase } from './ComponentBase';
@Component({ @Component({
...@@ -8,36 +7,108 @@ import { ComponentBase } from './ComponentBase'; ...@@ -8,36 +7,108 @@ import { ComponentBase } from './ComponentBase';
templateUrl: './form.component.html', templateUrl: './form.component.html',
styleUrls: ['./form.component.css'] styleUrls: ['./form.component.css']
}) })
export class FormComponent extends ComponentBase implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = "card_machine"; saveKey = "test_001";
// 储存对象 // 储存对象
item: any = { item;
title: '',
questionText: '', constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
questionTextAudio: '',
audioFileName: '', }
questions: [],
}; createShell() {
this.item.wordList.push({
addQuestion() { word: '',
this.item.questions.push({
type: 'img',
audio: '', audio: '',
text: '', backWord: '',
image: '' backWordAudio: '',
}); });
this.save(); this.save();
} }
removeQuestion(idx) { removeShell(idx) {
this.item.questions.splice(idx, 1); this.item.wordList.splice(idx, 1);
this.save(); this.save();
} }
saveAudioFileName(name) { ngOnInit() {
this.item.audioFileName=name;
this.item = {};
// 获取存储的数据
(<any>window).courseware.getData((data) => {
if (data) {
this.item = data;
}
this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
}, this.saveKey);
}
ngOnChanges() {
}
ngOnDestroy() {
}
init() {
}
/**
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
this.item[key] = e.url;
this.save();
}
/**
* 储存音频数据
* @param e
*/
onAudioUploadSuccess(e, key) {
this.item[key] = e.url;
this.save(); 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));
}
/**
* 刷新 渲染页面
*/
refresh() {
setTimeout(() => {
this.appRef.tick();
}, 1);
}
} }
\ 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