重写会员端，初步完善首页

2026-07-15 17:26:07 +08:00
parent cacc8997ec
commit 7e45ecd144
26 changed files with 3405 additions and 199 deletions
@@ -0,0 +1,101 @@
+<template>
+	<view class="login-page" :style="{ paddingTop: statusBarHeight + 'px' }">
+		<view class="brand-area">
+			<view class="logo-icon">
+				<text class="logo-symbol">✦</text>
+			</view>
+			<text class="app-name">Novalon 健身房</text>
+			<text class="app-slogan">专业预约 · 科学训练</text>
+		</view>
+
+		<view class="login-btn-area">
+			<button class="wechat-login-btn" @click="handleLogin">
+				<text class="wechat-symbol">微</text>
+				<text class="btn-text">微信一键登录</text>
+			</button>
+
+			<view class="agreement-row">
+				<view class="checkbox-wrapper" @click="toggleAgree">
+					<view class="checkbox" :class="{ checked: agreed }">
+						<text v-if="agreed" class="check-mark">&#10003;</text>
+					</view>
+				</view>
+				<text class="agreement-text">
+					已阅读并同意
+					<text class="link">《用户协议》</text>
+					和
+					<text class="link">《隐私政策》</text>
+				</text>
+			</view>
+		</view>
+
+		<view class="other-login">
+			<text class="divider-text">其他登录方式</text>
+			<view class="other-icons">
+				<view class="other-item">
+					<view class="other-icon-circle">
+						<text class="other-symbol">&#9743;</text>
+					</view>
+					<text class="other-label">手机号</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="footer-tip">
+			<text>首次登录将自动注册账号</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				statusBarHeight: 0,
+				agreed: false
+			}
+		},
+		onLoad() {
+			const systemInfo = uni.getSystemInfoSync()
+			this.statusBarHeight = systemInfo.statusBarHeight || 20
+		},
+		methods: {
+			toggleAgree() { this.agreed = !this.agreed },
+			handleLogin() { uni.switchTab({ url: '/pages/index/index' }) }
+		}
+	}
+</script>
+
+<style scoped>
+	.login-page { min-height: 100vh; background: #F5F7FA; display: flex; flex-direction: column; align-items: center; padding: 0 32px; overflow-x: hidden; }
+
+	.brand-area { display: flex; flex-direction: column; align-items: center; margin-top: 60px; margin-bottom: 80px; }
+	.logo-icon { width: 80px; height: 80px; background: rgba(0,230,118,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
+	.logo-symbol { font-size: 36px; color: #00C853; }
+	.app-name { font-size: 28px; font-weight: 700; color: #1E1E1E; letter-spacing: 1px; }
+	.app-slogan { font-size: 14px; color: #7A7E84; margin-top: 8px; letter-spacing: 2px; }
+
+	.login-btn-area { width: 100%; display: flex; flex-direction: column; align-items: center; }
+	.wechat-login-btn { width: 100%; height: 52px; background: #00E676; border-radius: 40px; display: flex; align-items: center; justify-content: center; border: none; padding: 0; box-shadow: 0 4px 16px rgba(0,230,118,0.35); }
+	.wechat-login-btn::after { border: none; }
+	.wechat-symbol { font-size: 18px; font-weight: 700; color: #1A1A1A; margin-right: 8px; }
+	.btn-text { font-size: 17px; font-weight: 700; color: #1A1A1A; }
+
+	.agreement-row { display: flex; align-items: center; margin-top: 16px; }
+	.checkbox-wrapper { margin-right: 6px; }
+	.checkbox { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #BDBDBD; display: flex; align-items: center; justify-content: center; }
+	.checkbox.checked { background: #00E676; border-color: #00E676; }
+	.check-mark { font-size: 12px; color: #1A1A1A; font-weight: 700; }
+	.agreement-text { font-size: 12px; color: #7A7E84; }
+	.link { color: #00C853; }
+
+	.other-login { margin-top: 60px; width: 100%; display: flex; flex-direction: column; align-items: center; }
+	.divider-text { font-size: 13px; color: #BDBDBD; margin-bottom: 20px; }
+	.other-icons { display: flex; }
+	.other-item { display: flex; flex-direction: column; align-items: center; }
+	.other-icon-circle { width: 48px; height: 48px; background: #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
+	.other-symbol { font-size: 22px; color: #7A7E84; }
+	.other-label { font-size: 12px; color: #7A7E84; }
+
+	.footer-tip { position: absolute; bottom: 60px; font-size: 12px; color: #BDBDBD; }
+</style>