Skip to content

R
RB_StrongestBrain_250520
Commit 17bb6b95 authored by cc's avatar cc
Browse files
Options

update

parents 14c780cd e430682e
Hide whitespace changes
Inline Side-by-side
Showing with 686 additions and 15 deletions
src/components/CodePop/CodePop.jsx
View file @ 17bb6b95
import React from "react";
import {observer} from "mobx-react";
import "./CodePop.less";
import {Button} from "@src/components/Button";
import modalStore from "@src/store/modal";
import QRCode from "qrcode";
import store from "@src/store";
import {LOG_KEY, pageView, sensorLog} from "@src/utils/sensors";
import store from '../../store/store';
import { Button } from '@grace/ui';
import {_asyncThrottle} from "../../utils/utils";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
import { LOG_KEY, MatterShareOpt, MatterViewDuration, MatterViewOpt, pageView, sensorLog } from "../../utils/sensors.js";
@observer
class CodePop extends React.Component {
......@@ -39,7 +41,7 @@ class CodePop extends React.Component {
/** 关闭 */
clickClose = () => {
modalStore.closePop();
ModalCtrl.closeModal()
sensorLog(LOG_KEY.click, "b14292", "d14293", {
page_name: "换端弹窗",
button_name: "关闭按钮",
......@@ -48,7 +50,7 @@ class CodePop extends React.Component {
render() {
const {codeImg} = this.state;
return <div className="CodePop modal_center md4">
return <div className="CodePop modal_center">
<div className="light"/>
<div className="bg">
<img className="code" src={codeImg}/>
......
src/components/LoginPop/LoginPop.jsx 0 → 100644
View file @ 17bb6b95
import React from "react";
import {observer} from "mobx-react";
import "./LoginPop.less";
import {Button} from "@src/components/Button";
import {Toast} from "@spark/ui";
import API from "@src/api";
import {_asyncThrottle, getUrlParam} from "@src/utils/utils";
import {REG_TEL} from "@src/utils/constants";
import modalStore from "@src/store/modal";
import {LOG_KEY, pageView, sensorLog} from "@src/utils/sensors";
@observer
class LoginPop extends React.Component {
state = {
phone: "",
code: "",
isSend: false,
reSend: false,
cd: 60,
};
componentDidMount() {
pageView("b12830", {
page_name: "手机号登录页",
});
sensorLog(LOG_KEY.exposure, "b12830", "d12832", {
page_name: "手机号登录页",
button_name: "登录按钮",
});
sensorLog(LOG_KEY.exposure, "b12830", "d12831", {
page_name: "手机号登录页",
button_name: "发送验证码按钮",
});
}
startCd = () => {
this.cdInterval = setInterval(() => {
const cd = this.state.cd -= 1;
this.setState({
cd,
});
if (cd <= 0) {
clearInterval(this.cdInterval);
this.setState({
isSend: false,
reSend: true,
});
}
}, 1000);
};
clickSend = _asyncThrottle(async () => {
sensorLog(LOG_KEY.click, "b12830", "d12831", {
page_name: "手机号登录页",
button_name: "发送验证码按钮",
});
const {phone} = this.state;
if (!phone) {
return Toast("请输入手机号");
}
if (!REG_TEL.test(phone)) {
return Toast("请输入正确的手机号～");
}
await this.getCode(phone);
});
closeLogin = _asyncThrottle(async () => {
sensorLog(LOG_KEY.click, "b12830", "d12832", {
page_name: "手机号登录页",
button_name: "登录按钮",
});
const {phone, code} = this.state;
if (!phone) {
return Toast("请输入手机号");
}
if (!REG_TEL.test(phone)) {
return Toast("请输入正确的手机号～");
}
if (!code) { // 未输入验证码
return Toast("请输入验证码");
}
await this.bindPhone();
});
getCode = async (phoneNum) => {
const params = {
appId: getUrlParam("appID"),
mobile: phoneNum,
};
const {success} = await API.getCode(params);
if (success) {
Toast("验证码已发送");
this.setState({
isSend: true,
cd: 60,
});
this.startCd();
}
};
bindPhone = async () => {
const {phone, code} = this.state;
const param = {
mobile: phone,
code: code,
redirectUrl: encodeURIComponent(window.location.href),
};
const {success, data, desc} = await API.bindPhone(param);
if (success) {
if(location.href.indexOf('localhost') > -1){
modalStore.closePop('Login')
}else{
location.replace(data);
}
} else {
Toast(desc);
}
};
// 输入手机号
onPhoneInput = (e) => {
let lastValue = "";
let currentValue = e.target.value;
if (currentValue !== lastValue) {
this.setState({
reSend: false
});
}
this.setState({
phone: e.target.value.replace(/[^\d]/g, ""),
});
};
onCodeInput = (e) => {
this.setState({
code: e.target.value.replace(/[^\d]/g, ""),
});
};
render() {
const {phone, code, isSend, cd, reSend} = this.state;
const loginBtnCls = phone && code ? "LoginBtn md2" : "LoginBtnNoAct md2";
return <div className="LoginPop modal_center">
<div className="light"/>
<div className="bg">
<input
className="input phoneInput"
placeholder="输入手机号"
maxLength="11"
value={phone}
autoComplete="off"
onChange={this.onPhoneInput}
/>
<input
className="input codeInput"
placeholder="输入验证码"
maxLength="8"
value={code}
autoComplete="off"
onChange={this.onCodeInput}
/>
{
isSend ? <div className="sendCode">{cd}s</div>
: <div
className={reSend ? "sendCode md3" : "sendBtn md1"}
onClick={this.clickSend}>
{reSend ? "重新发送" : "发送验证码"}
</div>
}
<Button className={loginBtnCls} onClick={this.closeLogin}/>
</div>
</div>;
}
}
export default LoginPop;
src/components/LoginPop/LoginPop.less 0 → 100644
View file @ 17bb6b95
@import "../../res.less";
.LoginPop {
position: absolute;
left: 0;
top: 0;
width: 750px;
height: 1624px;
.light {
position: absolute;
left: 79px;
top: 275px;
width: 593px;
height: 593px;
// .sparkBg("common/light.png");
}
.bg {
position: absolute;
left: 99px;
top: 363px;
width: 553px;
height: 691px;
.sparkBg("LoginPop/bg.png");
.input {
background-color: #fff2dc;
position: absolute;
left: 65px;
width: 423px;
height: 76px;
border-radius: 24px;
padding: 0 25px;
box-sizing: border-box;
font-size: 30px;
outline: none;
border: none;
border: 2px solid rgb(104, 192, 112);
background-color: rgb(255, 252, 243);
box-shadow: 0px 3px 2px 0px rgba(162, 225, 244, 0.31),inset 0px 1px 3px 0px rgba(253, 220, 218, 0.93);
// border-width: 2px;
// border-color: #e49224;
color: rgb(54, 43, 42);
}
input::placeholder {
color: rgb(168, 196, 180);
}
.phoneInput {
top: 295px;
}
.codeInput {
width: 221px;
top: 402px;
}
.sendBtn {
width: 198px;
height: 73px;
line-height: 73px;
font-size: 26px;
text-decoration: underline;
text-underline-offset: 7px;
color: rgb(9, 3, 4);
text-align: center;
position: absolute;
left: 290px;
top: 405px;
display: flex;
align-items: center;
justify-content: center;
}
.sendCode {
width: 198px;
height: 73px;
line-height: 73px;
font-size: 26px;
text-decoration: underline;
text-underline-offset: 5px;
color: #756b5e;
text-align: center;
position: absolute;
left: 290px;
top: 405px;
display: flex;
align-items: center;
justify-content: center;
}
.LoginBtn {
position: absolute;
left: 129px;
top: 528px;
width: 310px;
height: 95px;
.webpBg("LoginPop/canSubmitBtn.png");
}
.LoginBtnNoAct {
position: absolute;
left: 129px;
top: 528px;
width: 310px;
height: 95px;
.webpBg("LoginPop/cannotSubmit.png");
}
}
}
\ No newline at end of file
src/components/NoPrizeCard/NoPrizeCard.jsx
View file @ 17bb6b95
import React from "react";
import { observer } from "mobx-react";
import "./NoPrizeCard.less";
// import { SvgaPlayer } from "@grace/svgaplayer";
// import { RES_PATH } from "../../../sparkrc";
import { SvgaPlayer } from "@grace/svgaplayer";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
......@@ -71,7 +69,6 @@ class NoPrizeCard extends React.Component {
render() {
const { card } = this.state;
const { data } = this.props;
console.log(data, 123123);
return <div className="NoPrizeCard modal_center">
{
card === true ?
......
src/components/prizepop/prizepop.less
View file @ 17bb6b95
......@@ -5,6 +5,7 @@
left: 0px;
top: 0px;
position: absolute;
.popupCenterShow();
.light {
width: 750px;
height: 1008px;
......
src/components/settlechance/settlechance.jsx 0 → 100644
View file @ 17bb6b95
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './settlechance.less';
@observer
class Settlechance extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="settlechance modal_center">
<span className="dongxiao"></span>
<span className="bg"></span>
<span className="draw"></span>
<span className="know"></span>
<span className="icon"></span>
<span className="title"></span>
<span className="tip1">获得了「银河系脑洞霸主」称号</span>
<span className="tip2">你的脑洞能凭空造出‘榴莲味wiFi’和‘会蹦迪的沙发’,建议去给科幻片当编剧，拯救全人类！</span>
<span className="tip3">恭喜获得抽奖机会+1</span>
<span className="close"></span>
</div>
);
}
}
export default Settlechance;
src/components/settlechance/settlechance.less 0 → 100644
View file @ 17bb6b95
@import "../../res.less";
.settlechance {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.dongxiao {
width: 750px;
height: 1008px;
left: 0px;
top: 213px;
position: absolute;
.sparkBg("settleChance/dongxiao.png");
}
.bg {
width: 606px;
height: 901px;
left: 72px;
top: 380px;
position: absolute;
.sparkBg("settleChance/bg.png");
}
.draw {
width: 169px;
height: 69px;
left: 435px;
top: 1167px;
position: absolute;
.sparkBg("settleChance/draw.png");
}
.know {
width: 263px;
height: 92px;
left: 237px;
top: 915px;
position: absolute;
.sparkBg("settleChance/know.png");
}
.icon {
width: 237px;
height: 251px;
left: 242px;
top: 540px;
position: absolute;
.sparkBg("settleChance/icon.png");
}
.title {
width: 636px;
height: 201px;
left: 32px;
top: 214px;
position: absolute;
.sparkBg("settleChance/title.png");
}
.tip1 {
width: 428px;
height: 30px;
left: 155px;
top: 488px;
position: absolute;
font-size: 30px;
line-height: 30px;
color: rgba(153, 57, 27, 1);
}
.tip2 {
width: 438px;
height: 91px;
left: 159px;
top: 807px;
position: absolute;
font-size: 21px;
color: rgba(169, 90, 62, 1);
}
.tip3 {
width: 276px;
height: 28px;
left: 133px;
top: 1184px;
position: absolute;
font-size: 29px;
line-height: 28px;
color: rgba(157, 66, 37, 1);
}
.close {
width: 64px;
height: 64px;
left: 343px;
top: 1339px;
position: absolute;
.sparkBg("settleChance/close.png");
}
}
src/components/settlenochance/settlenochance.jsx 0 → 100644
View file @ 17bb6b95
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './settlenochance.less';
@observer
class Settlenochance extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="settlenochance modal_center">
<span className="dongxiao"></span>
<span className="bg"></span>
<span className="know"></span>
<span className="icon"></span>
<span className="title"></span>
<span className="tip1">获得了「宇宙菜鸟」称号</span>
<span className="tip2">你的脑洞像刚解冻的冰棍——梆硬且毫无波澜，建议多喝热水重启大脑！</span>
<span className="close"></span>
</div>
);
}
}
export default Settlenochance;
src/components/settlenochance/settlenochance.less 0 → 100644
View file @ 17bb6b95
@import "../../res.less";
.settlenochance {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.dongxiao {
width: 750px;
height: 1008px;
left: 0px;
top: 324px;
position: absolute;
.sparkBg("settleNoChance/dongxiao.png");
}
.bg {
width: 606px;
height: 724px;
left: 72px;
top: 491px;
position: absolute;
.sparkBg("settleNoChance/bg.png");
}
.know {
width: 263px;
height: 92px;
left: 237px;
top: 1026px;
position: absolute;
.sparkBg("settleNoChance/know.png");
}
.icon {
width: 198px;
height: 198px;
left: 271px;
top: 686px;
position: absolute;
.sparkBg("settleNoChance/icon.png");
}
.title {
width: 636px;
height: 201px;
left: 32px;
top: 325px;
position: absolute;
.sparkBg("settleNoChance/title.png");
}
.tip1 {
width: 338px;
height: 29px;
left: 200px;
top: 599px;
position: absolute;
font-size: 30px;
line-height: 29px;
color: rgba(153, 57, 27, 1);
}
.tip2 {
width: 429px;
height: 55px;
left: 156px;
top: 935px;
position: absolute;
font-size: 21px;
color: rgba(169, 90, 62, 1);
}
.close {
width: 64px;
height: 64px;
left: 343px;
top: 1269px;
position: absolute;
.sparkBg("settleNoChance/close.png");
}
}
src/pages/CapsulePage/CapsulePage.jsx
View file @ 17bb6b95
......@@ -15,7 +15,7 @@ import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
import { SvgaPlayer } from "@grace/svgaplayer";
import Homepage from "../HomePage/HomePage.tsx";
import Prizepop from "../../components/prizepop/prizepop.jsx";
import Noprizecard from "../../components/noprizecard/noprizecard.jsx";
import Noprizecard from "../../components/NoPrizeCard/NoPrizeCard.jsx";
import machineSvga from "../../assets/svga/1输出扭蛋机常态.svga";
import normalSvga from "../../assets/svga/2输出待机啊.svga";
......
src/pages/GamePage/Game.ts
View file @ 17bb6b95
......@@ -16,6 +16,7 @@ import { Level10 } from "@/pages/GamePage/Level/Level10.ts";
import { Level13 } from "@/pages/GamePage/Level/Level13.ts";
import { Level14 } from "@/pages/GamePage/Level/Level14.ts";
import { Level18 } from "@/pages/GamePage/Level/Level18.ts";
import { Level20 } from "@/pages/GamePage/Level/Level20.ts";
import { Level21 } from "@/pages/GamePage/Level/Level21.ts";
import { Level22 } from "@/pages/GamePage/Level/Level22.ts";
import { Level23 } from "@/pages/GamePage/Level/Level23.ts";
......@@ -32,10 +33,10 @@ export class Game extends Base {
const qsBg = this.addChild(new Sprite(Assets.get("问题.png")));
qsBg.position.set(49, 316);
// this.level = this.addChild(new Level21());
this.level = this.addChild(new Level20());
globalEvent.on(GameEvent.NextLevel, this.nextLevel, this);
this.nextLevel();
// this.nextLevel();
}
......
src/pages/GamePage/Level/Level20.ts 0 → 100644
View file @ 17bb6b95
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Rectangle, Sprite } from "pixi.js";
import { Ease, Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
export class Level20 extends LevelBase {
level: number = 20;
A: Sprite;
B: Sprite;
C: Sprite;
right: Sprite;
onLoad() {
super.onLoad();
this.addChild(new Sprite(Assets.get(`level${this.level}/box.png`)))
.position.set(95, 959);
this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/A.png`)));
this.A.position.set(84, 743);
this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/B.png`)));
this.B.position.set(351, 664);
this.C = this.addChild(new Sprite(Assets.get(`level${this.level}/C.png`)));
this.C.position.set(536, 839);
this.addChild(this.qs);
const top = this.addChild(new Sprite(Assets.get(`level${this.level}/top.png`)))
top.position.set(95, 970);
top.interactive = false;
top.eventMode = "none";
this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
this.right.position.set(503, 1146);
this.right.alpha = 0;
this.right.interactive = false;
this.right.eventMode = "none";
[this.A, this.B, this.C, this.qs].forEach((item) => {
item.on("pointerdown", this.onAPointerDown, this);
item.on("pointerup", this.onAPointerUp, this);
item.on("globalpointermove", this.onAPointerMove, this);
});
}
target: Sprite = null;
pos: { x: number, y: number } = null;
onAPointerUp(e) {
this.pos = null;
this.target = null;
}
onAPointerDown(e) {
this.target = e.target;
const { x, y } = e.data.global;
this.pos = {
x: x - e.target.x,
y: y - e.target.y
}
}
onAPointerMove(e) {
if (!this.pos) return;
const { x, y } = e.data.global;
const nx = x - this.pos.x;
const ny = y - this.pos.y;
this.target.position.set(nx, ny);
this.check();
}
check() {
const { x: ax, y: ay, width: aw, height: ah } = this.target;
const isIns = new Rectangle(ax, ay, aw, ah)
.intersects(new Rectangle(280, 1000, 260, 180));
if (isIns) {
this.target.eventMode = "none";
this.target.interactive = false;
const pos = new Map([
[this.A, { x: 184, y: 864 }],
[this.B, { x: 285, y: 854 }],
[this.C, { x: 370, y: 905 }],
[this.qs, { x: 255, y: 950, angle: 45 }],
]).get(this.target);
Tween.get(this.target)
.to({ x: pos.x, y: pos.y, angle: pos.angle || 0 }, 666, Ease.quadInOut);
this.target = null;
this.pos = null;
if (
!this.A.interactive
&& !this.B.interactive
&& !this.C.interactive
&& !this.qs.interactive
) {
Tween.get(this.right)
.to({ alpha: 1 }, 666, Ease.quadInOut)
.wait(2000)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
}
}
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.right);
[this.A, this.B].forEach((item) => {
item.off("globalpointermove", this.onAPointerMove, this);
});
}
}
src/pages/GamePage/Level/LevelConfig.ts
View file @ 17bb6b95
......@@ -11,6 +11,7 @@ import { Level10 } from "@/pages/GamePage/Level/Level10.ts";
import { Level13 } from "@/pages/GamePage/Level/Level13.ts";
import { Level14 } from "@/pages/GamePage/Level/Level14.ts";
import { Level18 } from "@/pages/GamePage/Level/Level18.ts";
import { Level20 } from "@/pages/GamePage/Level/Level20.ts";
import { Level21 } from "@/pages/GamePage/Level/Level21.ts";
import { Level22 } from "@/pages/GamePage/Level/Level22.ts";
import { Level23 } from "@/pages/GamePage/Level/Level23.ts";
......@@ -36,8 +37,8 @@ export const LevelArr = [
{ cls: Level14, tip: `别忘了，人是高等动物哦` }, // 17
{ cls: Level18, tip: `移开乌云露出太阳<br/>让冰块融化` },
{ cls: Level14, tip: `将冰箱放大至能够装下长颈鹿` }, // 19
{ cls: Level14, tip: `别忘了把题目也装进箱子里` }, // 20
{ cls: Level21, tip: `移动鸡蛋，碰一碰便知` }, // 21
{ cls: Level20, tip: `别忘了把题目也装进箱子里` },
{ cls: Level21, tip: `移动鸡蛋，碰一碰便知` },
{ cls: Level22, tip: `移开圣诞老人的衣服看看` },
{ cls: Level23, tip: `一样重` },
{ cls: Level23, tip: `将雪球合在一起滚成大雪球` }, // 24
......
src/pages/HomePage/HomePage.tsx
View file @ 17bb6b95
......@@ -20,6 +20,9 @@ import { CHANNEL_PARAMS, extranceName } from '@/utils/constants.js';
import gameStore from "@/store/gameStore.ts";
import GamePage from "@/pages/GamePage/GamePage.tsx";
import CodePop from "../../components/CodePop/CodePop.jsx"
import NoPrizeCard from "../../components/NoPrizeCard/NoPrizeCard.jsx"
@observer
class Homepage extends React.Component {
constructor(props) {
......@@ -109,7 +112,9 @@ class Homepage extends React.Component {
page_name: "活动首页",
button_name: "规则按钮",
});
ModalCtrl.showModal(Rulepop);
// ModalCtrl.showModal(Rulepop);
// todo
ModalCtrl.showModal(NoPrizeCard);
break;
// 6 拜访清单
......
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