ONE-OS/小程序/LoginPage.jsx

// 【重要】必须使用 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;