huasheng-erp-order-system-applet/pages/login/components/AccountLogin.vue

<template>
	<view class="account-login-container">
		<view class="content-wrapper">
			<!-- 欢迎语 -->
			<view class="welcome-section">
				<text class="welcome-title">欢迎回来</text>
				<text class="welcome-desc">请输入您的账号密码登录系统</text>
			</view>

			<!-- 表单卡片 -->
			<view class="form-card">
				<view class="input-item">
					<view class="input-icon-box">
						<image class="input-icon" src="https://img.icons8.com/ios-glyphs/40/999999/user--v1.png"
							mode="aspectFit"></image>
					</view>
					<input class="form-input" v-model="account" placeholder="手机号" type="number" maxlength="11" />
				</view>

				<view class="input-divider"></view>

				<view class="input-item">
					<view class="input-icon-box">
						<image class="input-icon" src="https://img.icons8.com/ios-glyphs/40/999999/lock--v1.png"
							mode="aspectFit"></image>
					</view>
					<input class="form-input" v-model="password" placeholder="密码" :password="!showPwd" maxlength="20" />
					<view class="pwd-toggle" @click="showPwd = !showPwd">
						<text class="pwd-toggle-text">{{ showPwd ? '隐藏' : '显示' }}</text>
					</view>
				</view>
			</view>

			<!-- 登录按钮 -->
			<view class="login-btn-wrapper">
				<view class="login-btn-shadow"></view>
				<button class="login-btn" :class="{ 'is-disabled': !canSubmit }" :loading="submitting"
					@click="handleLogin">
					<text v-if="!submitting">登 录</text>
				</button>
			</view>

			<!-- 协议 -->
			<view class="agreement-box" @click="toggleAgreed">
				<view class="agreement-check" :class="{ checked: isAgreed }">
					<text v-if="isAgreed" class="check-mark">✓</text>
				</view>
				<text class="agreement-text">
					已阅读并同意<text class="link" @click.stop="showProtocol('user')">《用户协议》</text>和<text class="link"
						@click.stop="showProtocol('privacy')">《隐私政策》</text>
				</text>
			</view>
		</view>

		<!-- 页脚 -->
		<view class="footer-section">
			<text>ERP Order System</text>
		</view>

		<!-- ========== 弹窗 ========== -->
		<view class="global-mask" v-if="activeModal" @click="closeAllModals"></view>

		<!-- 协议拦截弹窗 -->
		<view class="dialog-overlay" v-if="activeModal === 'confirm'">
			<view class="dialog-card">
				<view class="dialog-icon-wrap">
					<text class="dialog-icon">📋</text>
				</view>
				<text class="dialog-title">服务协议提示</text>
				<text class="dialog-body">请您阅读并同意我们的协议内容，以便为您提供更安全的服务体验。</text>
				<view class="dialog-btns">
					<view class="dialog-btn cancel" @click="activeModal = ''">拒绝</view>
					<view class="dialog-btn confirm" @click="agreeAndClose">同意并继续</view>
				</view>
			</view>
		</view>

		<!-- 协议富文本弹窗 -->
		<view class="dialog-overlay" v-if="activeModal === 'protocol'">
			<view class="dialog-card dialog-protocol">
				<view class="dialog-header">
					<text class="dialog-header-title">{{ currentProtocol.title }}</text>
					<view class="dialog-close" @click="activeModal = ''">
						<text class="dialog-close-text">✕</text>
					</view>
				</view>
				<scroll-view scroll-y class="dialog-scroll">
					<rich-text :nodes="currentProtocol.content"></rich-text>
				</scroll-view>
				<view class="dialog-bottom">
					<button class="dialog-confirm-btn" @click="activeModal = ''">我已了解</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getAgreement } from '@/api/system/agreement.js';
import { login } from '@/api/auth.js';

export default {
	name: 'AccountLogin',
	emits: ['login-success'],
	data() {
		return {
			account: '',
			password: '',
			showPwd: false,
			submitting: false,
			isAgreed: false,
			activeModal: '',
			currentProtocol: { title: '', content: '' },
			protocols: {
				user: { title: '', content: '' },
				privacy: { title: '', content: '' }
			}
		}
	},
	computed: {
		canSubmit() {
			return this.account.trim().length === 11 && this.password.trim().length >= 6;
		}
	},
	methods: {
		toggleAgreed() {
			this.isAgreed = !this.isAgreed;
		},
		async handleLogin() {
			if (!this.canSubmit) return;
			if (!this.isAgreed) {
				this.activeModal = 'confirm';
				return;
			}
			this.submitting = true;
			try {
				const res = await login({
					username: this.account.trim(),
					password: this.password,
					grantType: 'password'
				});
				if (res.data && res.data.access_token) {
					uni.setStorageSync('token', res.data.access_token);
					uni.setStorageSync('isLogin', true);
					uni.showToast({ title: '登录成功', icon: 'success' });
					setTimeout(() => {
						this.$emit('login-success');
					}, 800);
				} else {
					uni.showToast({ title: '登录失败，请检查账号密码', icon: 'none' });
				}
			} catch (e) {
				console.error('登录错误：', e);
				uni.showToast({ title: e?.msg || e || '登录失败', icon: 'none' });
			} finally {
				this.submitting = false;
			}
		},
		agreeAndClose() {
			this.isAgreed = true;
			this.activeModal = '';
		},
		showProtocol(type) {
			this.currentProtocol = this.protocols[type];
			this.activeModal = 'protocol';
		},
		closeAllModals() {
			this.activeModal = '';
		}
	},
	async mounted() {
		try {
			const [userRes, privacyRes] = await Promise.all([
				getAgreement(1),
				getAgreement(2)
			]);
			this.protocols.user = { title: userRes.data.title, content: userRes.data.content };
			this.protocols.privacy = { title: privacyRes.data.title, content: privacyRes.data.content };
		} catch (e) {
			console.error('[协议] 加载失败', e);
		}
	}
}
</script>

<style scoped>
.account-login-container {
	width: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.content-wrapper {
	flex: 1;
	padding: 60rpx 56rpx 0;
	display: flex;
	flex-direction: column;
}

/* ========== 欢迎语 ========== */
.welcome-section {
	margin-bottom: 56rpx;
}

.welcome-title {
	font-size: 52rpx;
	font-weight: 700;
	color: #1a1a1a;
	display: block;
	line-height: 1.3;
}

.welcome-desc {
	font-size: 28rpx;
	color: #999;
	display: block;
	margin-top: 12rpx;
	letter-spacing: 1rpx;
}

/* ========== 表单卡片 ========== */
.form-card {
	background: #fff;
	border-radius: 24rpx;
	box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
	padding: 16rpx 32rpx;
}

.input-item {
	display: flex;
	align-items: center;
	height: 104rpx;
}

.input-icon-box {
	width: 52rpx;
	height: 52rpx;
	border-radius: 16rpx;
	background: #f5f6fa;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.input-icon {
	width: 28rpx;
	height: 28rpx;
}

.form-input {
	flex: 1;
	font-size: 30rpx;
	color: #1a1a1a;
	height: 100%;
}

.input-divider {
	height: 1rpx;
	background: #f0f0f0;
	margin: 0 8rpx;
}

.pwd-toggle {
	flex-shrink: 0;
	padding: 8rpx 0 8rpx 20rpx;
}

.pwd-toggle-text {
	font-size: 24rpx;
	color: #b0b0b0;
}

/* ========== 登录按钮 ========== */
.login-btn-wrapper {
	position: relative;
	margin-top: 48rpx;
}

.login-btn-shadow {
	position: absolute;
	bottom: -6rpx;
	left: 6%;
	width: 88%;
	height: 100rpx;
	border-radius: 50rpx;
	background: rgba(193, 0, 28, 0.18);
	filter: blur(16rpx);
}

.login-btn {
	position: relative;
	width: 100%;
	height: 100rpx;
	background: linear-gradient(135deg, #C1001C, #e0243f);
	border-radius: 50rpx;
	color: #fff;
	font-size: 34rpx;
	font-weight: 600;
	letter-spacing: 16rpx;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	box-shadow: 0 8rpx 24rpx rgba(193, 0, 28, 0.3);
}

.login-btn::after {
	border: none;
}

.login-btn.is-disabled {
	opacity: 0.45;
	box-shadow: none;
}

/* ========== 协议 ========== */
.agreement-box {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 40rpx;
}

.agreement-check {
	width: 34rpx;
	height: 34rpx;
	border-radius: 50%;
	border: 2rpx solid #d0d0d0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12rpx;
	flex-shrink: 0;
	transition: all 0.2s ease;
}

.agreement-check.checked {
	background: #C1001C;
	border-color: #C1001C;
}

.check-mark {
	color: #fff;
	font-size: 20rpx;
	font-weight: bold;
}

.agreement-text {
	font-size: 24rpx;
	color: #b0b0b0;
	line-height: 1.5;
}

.link {
	color: #576b95;
}

/* ========== 页脚 ========== */
.footer-section {
	text-align: center;
	padding: 48rpx 0;
}

.footer-section text {
	font-size: 22rpx;
	color: #d0d0d0;
	letter-spacing: 2rpx;
}

/* ========== 弹窗通用 ========== */
.global-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 998;
}

.dialog-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 60rpx;
}

.dialog-card {
	width: 100%;
	background: #fff;
	border-radius: 28rpx;
	padding: 52rpx 40rpx 36rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.dialog-protocol {
	padding: 0;
	align-items: stretch;
	max-height: 70vh;
}

.dialog-icon-wrap {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background: #fff5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 28rpx;
}

.dialog-icon {
	font-size: 40rpx;
}

.dialog-title {
	font-size: 34rpx;
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: 16rpx;
	text-align: center;
}

.dialog-body {
	font-size: 28rpx;
	color: #888;
	line-height: 1.7;
	text-align: center;
	margin-bottom: 40rpx;
}

.dialog-btns {
	width: 100%;
	display: flex;
	gap: 20rpx;
}

.dialog-btn {
	flex: 1;
	height: 88rpx;
	border-radius: 44rpx;
	font-size: 30rpx;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dialog-btn.cancel {
	background: #f5f5f5;
	color: #999;
}

.dialog-btn.confirm {
	background: #1a1a1a;
	color: #fff;
}

/* ========== 协议内容弹窗 ========== */
.dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 36rpx 40rpx 24rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.dialog-header-title {
	font-size: 34rpx;
	font-weight: 600;
	color: #1a1a1a;
}

.dialog-close {
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
	background: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dialog-close-text {
	font-size: 26rpx;
	color: #999;
}

.dialog-scroll {
	max-height: 50vh;
	padding: 28rpx 40rpx;
	color: #555;
	font-size: 28rpx;
	line-height: 1.8;
}

.dialog-bottom {
	padding: 24rpx 40rpx 36rpx;
}

.dialog-confirm-btn {
	width: 100%;
	height: 88rpx;
	background: #1a1a1a;
	color: #fff;
	border-radius: 44rpx;
	font-size: 30rpx;
	font-weight: 500;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dialog-confirm-btn::after {
	border: none;
}
</style>