master/member-miniapp/pages/login/login.vue

<template>
	<view class="page-shell login-page">
		<view class="page-blur"></view>
		<view class="page-blur-secondary"></view>
		<view class="page-blur-tertiary"></view>
		<view class="page-content login-content">
			<view class="login-main">
				<view class="welcome-block">
					<view class="welcome-ornament">
						<text class="ornament-dot"></text>
						<text class="ornament-line"></text>
					</view>
					<view class="welcome-copy">
						<text class="welcome-title">轻启一段更安静的护理时光</text>
						<view class="welcome-subline">
							<text class="subline-stroke"></text>
							<text class="welcome-subtitle">绿纤欢迎你</text>
							<text class="subline-dot"></text>
						</view>
					</view>
				</view>
				<view class="auth-card glass-card">
					<view class="auth-head">
						<text class="auth-kicker">MEMBER ACCESS</text>
						<text class="auth-title">登录绿纤</text>
						<text class="auth-subtitle">在安静有序的界面里，开启你的专属护理旅程。</text>
					</view>
					<view class="field-list">
						<view class="field-stack">
							<view class="field-item">
								<view class="field-icon phone-icon">
									<view class="phone-core"></view>
								</view>
								<input v-model="phone" class="field-input" type="number" maxlength="11"
									placeholder="请输入手机号" placeholder-class="field-placeholder" />
							</view>
						</view>
						<view class="field-stack">
							<view class="field-item code-item">
								<view class="field-main">
									<view class="field-icon code-icon">
										<view class="code-core"></view>
									</view>
									<input v-model="code" class="field-input" type="number" maxlength="6"
										placeholder="请输入短信验证码" placeholder-class="field-placeholder" />
								</view>
								<view class="code-button" :class="{ disabled: countdown > 0 }" @tap="sendCode">
									{{ countdownText }}
								</view>
							</view>
						</view>
					</view>
					<view class="agreement-row" @tap="toggleAgree">
						<view class="agree-box" :class="{ active: agree }">
							<text v-if="agree" class="agree-mark">✓</text>
						</view>
						<text class="agreement-text">我已阅读并同意《用户协议》与《隐私说明》</text>
					</view>
					<view class="primary-button login-button" :class="{ disabled: !canSubmit }" @tap="wechatLogin">
						微信一键登录
					</view>
					<view class="secondary-actions">
						<view class="secondary-ghost" @tap="wechatLogin">
							<view class="wechat-icon">
								<view class="wechat-bubble bubble-main"></view>
								<view class="wechat-bubble bubble-sub"></view>
							</view>
							<text class="secondary-ghost-text">微信登录</text>
						</view>
						<text class="secondary-text" @tap="browseLater">稍后再登录</text>
					</view>
				</view>
			</view>
			<view class="safe-bottom-space"></view>
		</view>
	</view>
</template>
<script>
	import { wechatLogin } from '@/utils/auth'
	import { HOME_PAGE } from '@/utils/config'
	export default {
		data() {
			return {
				phone: '',
				code: '',
				agree: true,
				countdown: 0,
				timer: null,
				logging: false
			}
		},
		computed: {
			canSubmit() {
				return this.agree && !this.logging
			},
			countdownText() {
				return this.countdown > 0 ? `${this.countdown}s` : '获取验证码'
			}
		},
		onUnload() {
			this.clearTimer()
		},
		methods: {
			toggleAgree() {
				this.agree = !this.agree
			},
			// 短信验证码为占位交互，后端登录以微信 code 为准
			sendCode() {
				if (this.countdown > 0) {
					return
				}
				uni.showToast({
					title: '请使用微信一键登录',
					icon: 'none'
				})
			},
			clearTimer() {
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null
				}
			},
			submitLogin() {
				this.doWechatLogin()
			},
			// 尝试获取微信昵称/头像后登录（用户拒绝授权也可继续登录）
			wechatLogin() {
				if (uni.getUserProfile) {
					uni.getUserProfile({
						desc: '用于完善会员资料',
						success: (res) => {
							const info = (res && res.userInfo) || {}
							this.doWechatLogin({ nickName: info.nickName, avatar: info.avatarUrl })
						},
						fail: () => {
							this.doWechatLogin()
						}
					})
					return
				}
				this.doWechatLogin()
			},
			doWechatLogin(profile) {
				if (!this.agree) {
					uni.showToast({ title: '请先同意用户协议', icon: 'none' })
					return
				}
				if (this.logging) return
				this.logging = true
				uni.showLoading({ title: '登录中', mask: true })
				wechatLogin(profile || {})
					.then(() => {
						uni.hideLoading()
						this.enterApp('登录成功')
					})
					.catch(() => {
						uni.hideLoading()
						this.logging = false
						uni.showToast({ title: '登录失败，请重试', icon: 'none' })
					})
			},
			browseLater() {
				uni.reLaunch({
					url: HOME_PAGE
				})
			},
			enterApp(message) {
				this.clearTimer()
				uni.showToast({
					title: message,
					icon: 'none'
				})
				setTimeout(() => {
					uni.reLaunch({
						url: HOME_PAGE
					})
				}, 320)
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import '@/styles/mixins.scss';
	.login-content {
		min-height: calc(100vh - var(--status-bar-height, 0px) - env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: calc(var(--status-bar-height, 0px) + 28rpx);
		padding-bottom: calc(28rpx + env(safe-area-inset-bottom));
	}
	.login-main {
		width: 100%;
		transform: translateY(-52rpx);
		animation: lfRevealUp 860ms cubic-bezier(0.22, 1, 0.36, 1) both;
	}
	.safe-bottom-space {
		display: none;
	}
	.auth-card {
		position: relative;
		overflow: hidden;
		margin-bottom: 28rpx;
		border-color: rgba(210, 191, 156, 0.24);
		box-shadow: 0 30rpx 78rpx rgba(40, 63, 52, 0.12);
		transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 380ms ease;
	}
	.auth-card:active {
		transform: translateY(-4rpx);
		box-shadow: 0 36rpx 88rpx rgba(40, 63, 52, 0.14);
	}
	.welcome-block {
		position: relative;
		min-height: 110rpx;
		margin-bottom: 14rpx;
		animation: lfRevealUp 820ms cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
	}
	.welcome-ornament {
		position: absolute;
		left: 0;
		top: 22rpx;
		width: 28rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 2;
	}
	.ornament-dot {
		width: 8rpx;
		height: 8rpx;
		border-radius: 50%;
		background: rgba(210, 191, 156, 0.92);
		box-shadow: 0 0 0 10rpx rgba(210, 191, 156, 0.08);
		animation: lfPulseSoft 4.6s ease-in-out infinite;
	}
	.ornament-line {
		width: 2rpx;
		height: 52rpx;
		margin-top: 14rpx;
		border-radius: 999rpx;
		background: rgba(182, 142, 154, 0.22);
		animation: lfAtmosphereShift 6.8s ease-in-out infinite alternate;
	}
	.welcome-copy,
	.auth-head,
	.field-list,
	.agreement-row,
	.login-button,
	.secondary-actions {
		position: relative;
		z-index: 2;
	}
	.welcome-copy {
		position: relative;
		z-index: 2;
		padding: 8rpx 0 0 38rpx;
	}
	.welcome-title {
		display: block;
		font-size: 36rpx;
		line-height: 1.34;
		font-weight: 700;
		color: $text-primary;
		letter-spacing: 1rpx;
		text-shadow: 0 10rpx 24rpx rgba(36, 74, 61, 0.05);
		white-space: nowrap;
	}
	.welcome-subline {
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}
	.welcome-subtitle {
		font-size: 24rpx;
		line-height: 1.6;
		color: rgba(95, 109, 101, 0.8);
		letter-spacing: 10rpx;
	}
	.subline-stroke {
		width: 44rpx;
		height: 2rpx;
		margin-right: 16rpx;
		border-radius: 999rpx;
		background: rgba(210, 191, 156, 0.72);
	}
	.subline-dot {
		width: 6rpx;
		height: 6rpx;
		margin-left: 14rpx;
		border-radius: 50%;
		background: rgba(182, 142, 154, 0.48);
	}
	.auth-card {
		padding: 48rpx 36rpx 40rpx;
		background: rgba(253, 255, 252, 0.94);
	}
	.auth-card::before {
		content: '';
		position: absolute;
		right: -80rpx;
		bottom: -70rpx;
		width: 260rpx;
		height: 260rpx;
		border-radius: 50%;
		background: rgba(100, 140, 118, 0.045);
		animation: lfFloatSoft 12s ease-in-out infinite;
	}
	.auth-card::after {
		content: '';
		position: absolute;
		left: 26rpx;
		right: 26rpx;
		top: 18rpx;
		height: 1rpx;
		background: rgba(255, 255, 255, 0.82);
		animation: lfAtmosphereGlow 8.6s ease-in-out infinite alternate;
	}
	.auth-kicker {
		display: inline-block;
		margin-bottom: 16rpx;
		font-size: 20rpx;
		font-weight: 600;
		letter-spacing: 5rpx;
		color: rgba(143, 118, 86, 0.82);
	}
	.auth-title {
		display: block;
		font-size: 40rpx;
		font-weight: 700;
		color: $text-primary;
		letter-spacing: 1.5rpx;
	}
	.auth-subtitle {
		display: block;
		margin-top: 16rpx;
		font-size: 23rpx;
		line-height: 1.8;
		color: rgba(95, 109, 101, 0.78);
		letter-spacing: 1rpx;
	}
	.field-list {
		margin-top: 38rpx;
	}
	.field-stack+.field-stack {
		margin-top: 18rpx;
	}
	.field-item {
		display: flex;
		align-items: center;
		min-height: 108rpx;
		padding: 0 26rpx;
		border-radius: 32rpx;
		background: rgba(255, 255, 255, 0.92);
		border: 1rpx solid rgba(210, 191, 156, 0.2);
		box-shadow: 0 18rpx 40rpx rgba(54, 77, 64, 0.06);
		transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease, border-color 280ms ease;
	}
	.field-item:active {
		transform: translateY(-3rpx);
		border-color: rgba(210, 191, 156, 0.3);
		box-shadow: 0 22rpx 46rpx rgba(54, 77, 64, 0.08);
	}
	.field-main {
		flex: 1;
		display: flex;
		align-items: center;
	}
	.field-icon {
		position: relative;
		width: 62rpx;
		height: 62rpx;
		border-radius: 22rpx;
		margin-right: 20rpx;
		transition: transform 260ms ease;
	}
	.phone-icon {
		background: rgba(100, 140, 118, 0.12);
		box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.4);
	}
	.code-icon {
		background: rgba(210, 191, 156, 0.16);
		box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.4);
	}
	.phone-core {
		position: absolute;
		left: 20rpx;
		top: 12rpx;
		width: 24rpx;
		height: 38rpx;
		border: 3rpx solid $brand-primary-deep;
		border-radius: 10rpx;
		animation: lfPulseSoft 5.2s ease-in-out infinite;
	}
	.phone-core::after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 4rpx;
		width: 8rpx;
		height: 8rpx;
		margin-left: -4rpx;
		border-radius: 50%;
		background: $brand-primary-deep;
	}
	.code-core {
		position: absolute;
		left: 16rpx;
		top: 18rpx;
		width: 32rpx;
		height: 24rpx;
		border-radius: 8rpx;
		border: 3rpx solid #8f7656;
		animation: lfPulseSoft 5.6s ease-in-out infinite 0.4s;
	}
	.field-item:active .field-icon {
		transform: scale(1.06) rotate(-4deg);
	}
	.code-core::before,
	.code-core::after {
		content: '';
		position: absolute;
		top: 50%;
		width: 6rpx;
		height: 6rpx;
		margin-top: -3rpx;
		border-radius: 50%;
		background: #8f7656;
	}
	.code-core::before {
		left: 6rpx;
		box-shadow: 10rpx 0 0 #8f7656, 20rpx 0 0 #8f7656;
	}
	.field-input {
		flex: 1;
		height: 108rpx;
		font-size: 28rpx;
		font-weight: 500;
		letter-spacing: 1rpx;
		color: $text-primary;
	}
	.field-placeholder {
		color: rgba(141, 153, 146, 0.88);
	}
	.code-item {
		justify-content: space-between;
	}
	.code-button {
		min-width: 156rpx;
		height: 70rpx;
		padding: 0 22rpx;
		border-radius: 999rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: 600;
		color: #33594b;
		background: rgba(100, 140, 118, 0.1);
		border: 1rpx solid rgba(210, 191, 156, 0.18);
		box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.4);
		transition: transform 240ms ease, box-shadow 240ms ease, background 240ms ease;
	}
	.code-button:active {
		transform: scale(0.97);
		box-shadow: 0 10rpx 20rpx rgba(54, 77, 64, 0.08);
	}
	.code-button.disabled {
		color: $text-tertiary;
		background: rgba(145, 166, 154, 0.12);
	}
	.agreement-row {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
	}
	.agree-box {
		width: 34rpx;
		height: 34rpx;
		border-radius: 12rpx;
		border: 1rpx solid rgba(210, 191, 156, 0.32);
		background: rgba(210, 191, 156, 0.08);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		transition: transform 220ms ease, background 220ms ease, border-color 220ms ease;
	}
	.agree-box:active {
		transform: scale(0.94);
	}
	.agree-box.active {
		border-color: rgba(100, 140, 118, 0.42);
		background: rgba(100, 140, 118, 0.16);
	}
	.agree-mark {
		font-size: 22rpx;
		color: $brand-primary-deep;
		line-height: 1;
	}
	.agreement-text {
		margin-left: 14rpx;
		font-size: 23rpx;
		line-height: 1.8;
		color: rgba(95, 109, 101, 0.76);
	}
	.login-button {
		width: 100%;
		margin-top: 34rpx;
		height: 96rpx;
		letter-spacing: 6rpx;
		border-color: rgba(210, 191, 156, 0.22);
		box-shadow: 0 28rpx 58rpx rgba(36, 74, 61, 0.18);
		animation: lfRevealUp 820ms cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
	}
	.login-button.disabled {
		opacity: 0.5;
		box-shadow: none;
	}
	.secondary-actions {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 22rpx;
	}
	.secondary-ghost {
		@include secondary-button;
		width: 100%;
		height: 88rpx;
		padding: 0 30rpx;
		border-color: rgba(210, 191, 156, 0.26);
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 16rpx 34rpx rgba(54, 77, 64, 0.06);
		transition: transform 260ms ease, box-shadow 260ms ease;
	}
	.secondary-ghost:active {
		transform: translateY(-3rpx);
		box-shadow: 0 18rpx 36rpx rgba(54, 77, 64, 0.08);
	}
	.secondary-ghost-text {
		margin-left: 14rpx;
		letter-spacing: 3rpx;
	}
	.wechat-icon {
		position: relative;
		width: 44rpx;
		height: 34rpx;
	}
	.wechat-bubble {
		position: absolute;
		border-radius: 50%;
		background: #5b8f74;
		animation: lfPulseSoft 4.8s ease-in-out infinite;
	}
	.wechat-bubble::after {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		border-style: solid;
	}
	.bubble-main {
		left: 0;
		top: 2rpx;
		width: 28rpx;
		height: 24rpx;
	}
	.bubble-main::after {
		left: 6rpx;
		bottom: -5rpx;
		border-width: 6rpx 6rpx 0 2rpx;
		border-color: #5b8f74 transparent transparent transparent;
	}
	.bubble-sub {
		right: 0;
		top: 0;
		width: 24rpx;
		height: 20rpx;
		background: #7ca38f;
		animation-delay: 0.5s;
	}
	.bubble-sub::after {
		right: 4rpx;
		bottom: -5rpx;
		border-width: 6rpx 2rpx 0 6rpx;
		border-color: #7ca38f transparent transparent transparent;
	}
	.secondary-text {
		margin-top: 26rpx;
		font-size: 23rpx;
		color: rgba(95, 109, 101, 0.72);
		letter-spacing: 3rpx;
		transition: transform 220ms ease, opacity 220ms ease;
	}
	.secondary-text:active {
		transform: translateY(-2rpx);
		opacity: 0.7;
	}
	.login-footer {
		padding: 10rpx 10rpx 0 38rpx;
	}
	.footer-text {
		font-size: 21rpx;
		color: rgba(141, 153, 146, 0.82);
		line-height: 1.9;
		letter-spacing: 2rpx;
	}
</style>