删除 小程序/LoginPage.jsx
This commit is contained in:
@@ -1,286 +0,0 @@
|
|||||||
// 【重要】必须使用 const Component 作为组件变量名
|
|
||||||
const LoginPage = function (props) {
|
|
||||||
var onLoginSuccess = (props && props.onLoginSuccess) ? props.onLoginSuccess : null;
|
|
||||||
var _React$useState = React.useState("");
|
|
||||||
var account = _React$useState[0];
|
|
||||||
var setAccount = _React$useState[1];
|
|
||||||
|
|
||||||
var _React$useState2 = React.useState("");
|
|
||||||
var password = _React$useState2[0];
|
|
||||||
var setPassword = _React$useState2[1];
|
|
||||||
|
|
||||||
var _React$useState3 = React.useState(false);
|
|
||||||
var agreed = _React$useState3[0];
|
|
||||||
var setAgreed = _React$useState3[1];
|
|
||||||
|
|
||||||
var handleAccountChange = function (e) {
|
|
||||||
setAccount(e.target.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
var handlePasswordChange = function (e) {
|
|
||||||
setPassword(e.target.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
var handleAgreedChange = function (e) {
|
|
||||||
setAgreed(e.target.checked);
|
|
||||||
};
|
|
||||||
|
|
||||||
var handleLogin = function () {
|
|
||||||
if (!agreed) {
|
|
||||||
alert("请先阅读并同意用户服务协议和隐私政策");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (onLoginSuccess) {
|
|
||||||
onLoginSuccess();
|
|
||||||
} else {
|
|
||||||
alert("登录功能演示");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var styles = {
|
|
||||||
page: {
|
|
||||||
minHeight: "100vh",
|
|
||||||
backgroundColor: "#f7f7f7",
|
|
||||||
padding: "40px 24px 24px",
|
|
||||||
boxSizing: "border-box",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
alignItems: "center"
|
|
||||||
},
|
|
||||||
logo: {
|
|
||||||
width: "80px",
|
|
||||||
height: "80px",
|
|
||||||
backgroundColor: "#07c160",
|
|
||||||
borderRadius: "16px",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
marginBottom: "20px",
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: "16px",
|
|
||||||
fontWeight: "bold",
|
|
||||||
textAlign: "center",
|
|
||||||
lineHeight: "1.3"
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
fontSize: "20px",
|
|
||||||
fontWeight: "600",
|
|
||||||
color: "#333",
|
|
||||||
textAlign: "center",
|
|
||||||
marginBottom: "40px",
|
|
||||||
lineHeight: "1.5",
|
|
||||||
maxWidth: "280px"
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
width: "100%",
|
|
||||||
maxWidth: "340px"
|
|
||||||
},
|
|
||||||
inputGroup: {
|
|
||||||
marginBottom: "16px"
|
|
||||||
},
|
|
||||||
input: {
|
|
||||||
width: "100%",
|
|
||||||
height: "48px",
|
|
||||||
padding: "0 16px",
|
|
||||||
fontSize: "16px",
|
|
||||||
border: "1px solid #e5e5e5",
|
|
||||||
borderRadius: "8px",
|
|
||||||
backgroundColor: "#fff",
|
|
||||||
boxSizing: "border-box",
|
|
||||||
outline: "none"
|
|
||||||
},
|
|
||||||
inputFocus: {
|
|
||||||
borderColor: "#07c160"
|
|
||||||
},
|
|
||||||
checkboxRow: {
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
marginBottom: "24px",
|
|
||||||
cursor: "pointer"
|
|
||||||
},
|
|
||||||
checkbox: {
|
|
||||||
width: "18px",
|
|
||||||
height: "18px",
|
|
||||||
marginRight: "8px",
|
|
||||||
accentColor: "#07c160",
|
|
||||||
cursor: "pointer"
|
|
||||||
},
|
|
||||||
agreement: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#666",
|
|
||||||
lineHeight: "1.5"
|
|
||||||
},
|
|
||||||
link: {
|
|
||||||
color: "#07c160",
|
|
||||||
textDecoration: "none"
|
|
||||||
},
|
|
||||||
loginBtn: {
|
|
||||||
width: "100%",
|
|
||||||
height: "48px",
|
|
||||||
backgroundColor: "#07c160",
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: "17px",
|
|
||||||
fontWeight: "500",
|
|
||||||
border: "none",
|
|
||||||
borderRadius: "8px",
|
|
||||||
cursor: "pointer",
|
|
||||||
marginBottom: "32px"
|
|
||||||
},
|
|
||||||
loginBtnDisabled: {
|
|
||||||
width: "100%",
|
|
||||||
height: "48px",
|
|
||||||
backgroundColor: "#b0b0b0",
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: "17px",
|
|
||||||
fontWeight: "500",
|
|
||||||
border: "none",
|
|
||||||
borderRadius: "8px",
|
|
||||||
cursor: "not-allowed",
|
|
||||||
marginBottom: "32px"
|
|
||||||
},
|
|
||||||
divider: {
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
width: "100%",
|
|
||||||
maxWidth: "340px",
|
|
||||||
marginBottom: "24px"
|
|
||||||
},
|
|
||||||
dividerLine: {
|
|
||||||
flex: 1,
|
|
||||||
height: "1px",
|
|
||||||
backgroundColor: "#e5e5e5"
|
|
||||||
},
|
|
||||||
dividerText: {
|
|
||||||
padding: "0 16px",
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#999"
|
|
||||||
},
|
|
||||||
phoneLogin: {
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
alignItems: "center"
|
|
||||||
},
|
|
||||||
iconLabel: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#999",
|
|
||||||
marginTop: "8px"
|
|
||||||
},
|
|
||||||
iconBtn: {
|
|
||||||
width: "48px",
|
|
||||||
height: "48px",
|
|
||||||
borderRadius: "50%",
|
|
||||||
backgroundColor: "#fff",
|
|
||||||
border: "1px solid #e5e5e5",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
cursor: "pointer",
|
|
||||||
fontSize: "24px"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return React.createElement(
|
|
||||||
"div",
|
|
||||||
{ style: styles.page },
|
|
||||||
React.createElement("style", null, "input::placeholder{color:#999;opacity:1;}"),
|
|
||||||
React.createElement(
|
|
||||||
"div",
|
|
||||||
{ style: styles.logo },
|
|
||||||
"羚牛氢能"
|
|
||||||
),
|
|
||||||
React.createElement(
|
|
||||||
"h1",
|
|
||||||
{ style: styles.title },
|
|
||||||
"\u6570\u5B57\u5316\u8D44\u4EA7ONE-OS\u8FD0\u7BA1\u5E73\u53F0"
|
|
||||||
),
|
|
||||||
React.createElement(
|
|
||||||
"div",
|
|
||||||
{ style: styles.form },
|
|
||||||
React.createElement(
|
|
||||||
"div",
|
|
||||||
{ style: styles.inputGroup },
|
|
||||||
React.createElement("input", {
|
|
||||||
style: styles.input,
|
|
||||||
type: "text",
|
|
||||||
placeholder: "请输入账号信息",
|
|
||||||
value: account,
|
|
||||||
onChange: handleAccountChange
|
|
||||||
})
|
|
||||||
),
|
|
||||||
React.createElement(
|
|
||||||
"div",
|
|
||||||
{ style: styles.inputGroup },
|
|
||||||
React.createElement("input", {
|
|
||||||
style: styles.input,
|
|
||||||
type: "password",
|
|
||||||
placeholder: "请输入密码",
|
|
||||||
value: password,
|
|
||||||
onChange: handlePasswordChange
|
|
||||||
})
|
|
||||||
),
|
|
||||||
React.createElement(
|
|
||||||
"label",
|
|
||||||
{ style: styles.checkboxRow },
|
|
||||||
React.createElement("input", {
|
|
||||||
style: styles.checkbox,
|
|
||||||
type: "checkbox",
|
|
||||||
checked: agreed,
|
|
||||||
onChange: handleAgreedChange
|
|
||||||
}),
|
|
||||||
React.createElement(
|
|
||||||
"span",
|
|
||||||
{ style: styles.agreement },
|
|
||||||
"阅读并同意",
|
|
||||||
React.createElement(
|
|
||||||
"a",
|
|
||||||
{ href: "#", style: styles.link },
|
|
||||||
"《用户服务协议》"
|
|
||||||
),
|
|
||||||
"和",
|
|
||||||
React.createElement(
|
|
||||||
"a",
|
|
||||||
{ href: "#", style: styles.link },
|
|
||||||
"《隐私政策》"
|
|
||||||
)
|
|
||||||
)
|
|
||||||
),
|
|
||||||
React.createElement(
|
|
||||||
"button",
|
|
||||||
{
|
|
||||||
style: agreed ? styles.loginBtn : styles.loginBtnDisabled,
|
|
||||||
onClick: handleLogin,
|
|
||||||
disabled: !agreed
|
|
||||||
},
|
|
||||||
"\u767B\u5F55"
|
|
||||||
)
|
|
||||||
),
|
|
||||||
React.createElement(
|
|
||||||
"div",
|
|
||||||
{ style: styles.divider },
|
|
||||||
React.createElement("div", { style: styles.dividerLine }),
|
|
||||||
React.createElement(
|
|
||||||
"span",
|
|
||||||
{ style: styles.dividerText },
|
|
||||||
"\u5176\u4ED6\u767B\u5F55\u65B9\u5F0F"
|
|
||||||
),
|
|
||||||
React.createElement("div", { style: styles.dividerLine })
|
|
||||||
),
|
|
||||||
React.createElement(
|
|
||||||
"div",
|
|
||||||
{ style: styles.phoneLogin },
|
|
||||||
React.createElement(
|
|
||||||
"div",
|
|
||||||
{ style: styles.iconBtn, title: "手机号登录" },
|
|
||||||
"\uD83D\uDCF1"
|
|
||||||
),
|
|
||||||
React.createElement(
|
|
||||||
"span",
|
|
||||||
{ style: styles.iconLabel },
|
|
||||||
"授权登录"
|
|
||||||
)
|
|
||||||
)
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Axhub 要求必须定义 Component 变量
|
|
||||||
var Component = LoginPage;
|
|
||||||
Reference in New Issue
Block a user