Skip to content

R
RB-studyChina-20250617
Project 'wanghongyuan/fundebug-webpack' was moved to 'wildfirecode13/fundebug-webpack'. Please update any links and bookmarks that may still have the old path.
Commit 9a3be8c6 authored by 徐士卿's avatar 徐士卿
Browse files
Options

tanchuang

parent fee7592e
Hide whitespace changes
Inline Side-by-side
Showing with 534 additions and 0 deletions
src/components/LoginPop/LoginPop.jsx 0 → 100644
View file @ 9a3be8c6
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 @ 9a3be8c6
@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/settlechance/settlechance.jsx 0 → 100644
View file @ 9a3be8c6
'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 @ 9a3be8c6
@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 @ 9a3be8c6
'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 @ 9a3be8c6
@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");
}
}
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