antissoft / lvqianmeiye_ERP

<template>
	<view class="lp-page">

		<!-- 顶部装饰圆 -->
		<view class="lp-deco lp-deco--1"></view>
		<view class="lp-deco lp-deco--2"></view>
		<view class="lp-deco lp-deco--3"></view>

		<!-- 主卡片 -->
		<view class="lp-card">

			<!-- Logo + 品牌名 -->
			<view class="lp-brand">
				<view class="lp-logo-wrap">
					<image src="../../static/login/logo.jpg" class="lp-logo" mode="widthFix"></image>
				</view>
				<text class="lp-brand-name">绿纤协同平台</text>
				<text class="lp-brand-sub">专业美业管理系统</text>
			</view>

			<!-- 表单 -->
			<view class="lp-form">

				<!-- 用户名 -->
				<view class="lp-field" :class="{ 'is-focus': focusUser }">
					<view class="lp-field-icon">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
							<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							<circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
						</svg>
					</view>
					<input
						class="lp-input"
						type="text"
						v-model="formData.username"
						placeholder="请输入用户名"
						placeholder-class="lp-placeholder"
						@focus="focusUser = true"
						@blur="focusUser = false"
					/>
				</view>

				<!-- 密码 -->
				<view class="lp-field" :class="{ 'is-focus': focusPwd }">
					<view class="lp-field-icon">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
							<rect x="3" y="11" width="18" height="11" rx="2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							<path d="M7 11V7a5 5 0 0 1 10 0v4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
					</view>
					<input
						class="lp-input"
						:type="showPassword ? 'text' : 'password'"
						v-model="formData.password"
						placeholder="请输入密码"
						placeholder-class="lp-placeholder"
						@focus="focusPwd = true"
						@blur="focusPwd = false"
					/>
					<view class="lp-field-suffix" @tap="togglePassword">
						<u-icon :name="showPassword ? 'eye-off' : 'eye'" size="19" color="#43a047"></u-icon>
					</view>
				</view>

			</view>

			<!-- 账号密码登录按钮 -->
			<view
				class="lp-btn lp-btn--primary"
				:class="{ 'is-loading': loading }"
				@tap="handleLogin"
			>
				<text>{{ loading ? '登录中...' : '登 录' }}</text>
			</view>

			<!-- 分隔线（仅微信小程序显示） -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="lp-divider">
				<view class="lp-divider-line"></view>
				<text class="lp-divider-text">其他登录方式</text>
				<view class="lp-divider-line"></view>
			</view>

			<!-- 微信登录按钮 -->
			<view
				class="lp-btn lp-btn--wechat"
				:class="{ 'is-loading': wechatLoading }"
				@tap="handleWechatLogin"
			>
				<!-- 微信官方 SVG 图标 -->
				<view class="lp-wechat-ico">
					<svg width="22" height="22" viewBox="0 0 24 24" fill="#ffffff">
						<path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-3.898-6.348-7.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-7.062-6.122zm-3.453 3.31c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z"/>
					</svg>
				</view>
				<text>{{ wechatLoading ? '微信登录中...' : '微信一键登录' }}</text>
			</view>
			<!-- #endif -->

		</view>

		<!-- 隐私政策 -->
		<view class="lp-privacy">
			<u-checkbox-group @change="checkboxGroupChange" shape="circle">
				<u-checkbox active-color="#43a047" v-model="checked" name="tongyi" :label-disabled="true"></u-checkbox>
			</u-checkbox-group>
			<text class="lp-privacy-txt">我已阅读并同意</text>
			<text class="lp-privacy-link" @click="goyinsi">《隐私政策》</text>
		</view>

	</view>
</template>

<script>
import md5 from '@/service/md5.js'
export default {
	data() {
		return {
			checked: null,
			showTong: false,
			loading: false,
			wechatLoading: false,
			showPassword: false,
			focusUser: false,
			focusPwd: false,
			formData: {
				username: '',
				password: ''
			}
		}
	},
	onLoad() {},
	methods: {
		goyinsi() {
			uni.navigateTo({
				url: '/pages/web/web?url=' + encodeURIComponent('https://erp.lvqianmeiye.com/ysxy.html')
			})
		},
		checkboxGroupChange(val) {
			this.showTong = val[0]
		},
		togglePassword() {
			this.showPassword = !this.showPassword
		},
		validateForm() {
			if (this.showTong != 'tongyi') {
				uni.showToast({ title: '请阅读并同意隐私政策', icon: 'none' })
				return false
			}
			if (!this.formData.username.trim()) {
				uni.showToast({ title: '请输入用户名', icon: 'none' })
				return false
			}
			if (!this.formData.password.trim()) {
				uni.showToast({ title: '请输入密码', icon: 'none' })
				return false
			}
			return true
		},
		validateAgreement() {
			if (this.showTong != 'tongyi') {
				uni.showToast({ title: '请阅读并同意隐私政策', icon: 'none' })
				return false
			}
			return true
		},
		async getuser() {
			await this.API.getCurrentUser().then(res => {
				if (res.code === 200) {
					uni.setStorageSync('userInfo', res.data.userInfo)
				}
			})
		},
		async handleLogin() {
			if (this.loading) return
			if (!this.validateForm()) return
			this.loading = true
			try {
				const password = md5.hex_md5(this.formData.password)
				const res = await this.API.AppLogin({
					account: this.formData.username,
					password: password
				})
				if (res.code === 200 || res.success) {
					const { token } = res.data
					uni.setStorageSync('token', token)
					await this.getuser()
					await this.tryBindWechat()
					uni.showToast({ title: '登录成功', icon: 'success' })
					setTimeout(() => {
						uni.reLaunch({ url: '/pages/home/home' })
					}, 1500)
				} else {
					uni.showToast({ title: res.msg || '登录失败，请重试', icon: 'none' })
				}
			} catch (error) {
				uni.showToast({ title: '网络错误，请稍后重试', icon: 'none' })
			} finally {
				this.loading = false
			}
		},
		async handleWechatLogin() {
			if (this.wechatLoading) return
			if (!this.validateAgreement()) return
			this.wechatLoading = true
			try {
				const code = await this.getWechatCode()
				const res = await this.API.WechatLogin({ code })
				if (res.code === 200 || res.success) {
					const { token } = res.data
					uni.setStorageSync('token', token)
					await this.getuser()
					uni.showToast({ title: '登录成功', icon: 'success' })
					setTimeout(() => {
						uni.reLaunch({ url: '/pages/home/home' })
					}, 1500)
				} else {
					uni.showToast({ title: res.msg || '微信登录失败，请先使用账号密码登录', icon: 'none' })
				}
			} catch (error) {
				uni.showToast({ title: '微信登录失败，请稍后重试', icon: 'none' })
			} finally {
				this.wechatLoading = false
			}
		},
		getWechatCode() {
			return new Promise((resolve, reject) => {
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: (res) => {
						if (res.code) {
							resolve(res.code)
							return
						}
						reject(new Error('未获取到微信授权码'))
					},
					fail: (error) => {
						reject(error)
					}
				})
				// #endif
				// #ifndef MP-WEIXIN
				reject(new Error('当前环境不支持微信登录'))
				// #endif
			})
		},
		async tryBindWechat() {
			// #ifdef MP-WEIXIN
			try {
				const code = await this.getWechatCode()
				await this.API.BindWechat({ code })
			} catch (error) {
				console.error('自动绑定微信失败:', error)
			}
			// #endif
		}
	}
}
</script>

<style scoped lang="scss">
/* ── 页面底层 ── */
.lp-page {
	position: relative;
	min-height: 100vh;
	width: 100%;
	background: linear-gradient(160deg, #c8e6c9 0%, #b2dfdb 45%, #a5d6a7 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 60rpx 0 40rpx;
	box-sizing: border-box;
}

/* 背景装饰圆 */
.lp-deco {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.lp-deco--1 {
	width: 500rpx;
	height: 500rpx;
	background: radial-gradient(circle, rgba(67, 160, 71, 0.18) 0%, transparent 70%);
	top: -120rpx;
	right: -100rpx;
}
.lp-deco--2 {
	width: 360rpx;
	height: 360rpx;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, transparent 70%);
	bottom: 100rpx;
	left: -80rpx;
}
.lp-deco--3 {
	width: 200rpx;
	height: 200rpx;
	background: radial-gradient(circle, rgba(102, 187, 106, 0.15) 0%, transparent 70%);
	top: 40%;
	right: 20rpx;
}

/* ── 主卡片 ── */
.lp-card {
	position: relative;
	z-index: 2;
	width: 86%;
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(24px) saturate(180%);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	border-radius: 32rpx;
	box-shadow:
		0 20rpx 60rpx rgba(0, 0, 0, 0.1),
		0 4rpx 16rpx rgba(0, 0, 0, 0.06),
		inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
	padding: 48rpx 40rpx 44rpx;
	box-sizing: border-box;
}

/* ── 品牌区 ── */
.lp-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 44rpx;
}

.lp-logo-wrap {
	width: 120rpx;
	height: 120rpx;
	border-radius: 28rpx;
	overflow: hidden;
	box-shadow:
		0 8rpx 24rpx rgba(67, 160, 71, 0.25),
		0 2rpx 8rpx rgba(0, 0, 0, 0.08);
	margin-bottom: 20rpx;
}

.lp-logo {
	width: 100%;
}

.lp-brand-name {
	font-size: 36rpx;
	font-weight: 800;
	color: #1b5e20;
	letter-spacing: 3rpx;
	margin-bottom: 6rpx;
}

.lp-brand-sub {
	font-size: 22rpx;
	color: #66bb6a;
	letter-spacing: 1rpx;
}

/* ── 表单 ── */
.lp-form {
	margin-bottom: 36rpx;
}

.lp-field {
	display: flex;
	align-items: center;
	height: 96rpx;
	background: rgba(232, 245, 233, 0.5);
	border-radius: 20rpx;
	border: 2rpx solid rgba(67, 160, 71, 0.15);
	padding: 0 24rpx;
	margin-bottom: 20rpx;
	transition: border-color 0.2s ease, background 0.2s ease;
	box-sizing: border-box;

	&.is-focus {
		border-color: #43a047;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 0 0 6rpx rgba(67, 160, 71, 0.08);
	}
}

.lp-field-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36rpx;
	height: 36rpx;
	margin-right: 16rpx;
	color: #43a047;
}

.lp-input {
	flex: 1;
	min-width: 0;
	height: 100%;
	font-size: 28rpx;
	color: #1f2937;
	background: transparent;
	border: none;
}

.lp-placeholder {
	color: #9ca3af;
	font-size: 28rpx;
}

.lp-field-suffix {
	flex-shrink: 0;
	padding: 10rpx 0 10rpx 16rpx;
	display: flex;
	align-items: center;
}

/* ── 按钮 ── */
.lp-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 92rpx;
	border-radius: 20rpx;
	font-size: 30rpx;
	font-weight: 600;
	letter-spacing: 2rpx;
	transition: opacity 0.15s ease;
	box-sizing: border-box;

	&:active {
		opacity: 0.75;
	}

	&.is-loading {
		opacity: 0.6;
		pointer-events: none;
	}
}

.lp-btn--primary {
	background: linear-gradient(135deg, #43a047 0%, #66bb6a 100%);
	color: #ffffff;
	box-shadow:
		0 8rpx 24rpx rgba(67, 160, 71, 0.38),
		0 2rpx 8rpx rgba(67, 160, 71, 0.2);
}

/* ── 分隔线 ── */
.lp-divider {
	display: flex;
	align-items: center;
	margin: 32rpx 0 28rpx;
	gap: 16rpx;
}

.lp-divider-line {
	flex: 1;
	height: 1rpx;
	background: rgba(0, 0, 0, 0.08);
}

.lp-divider-text {
	font-size: 22rpx;
	color: #9ca3af;
	flex-shrink: 0;
	white-space: nowrap;
}

/* ── 微信登录按钮 ── */
.lp-btn--wechat {
	background: #07c160;
	color: #ffffff;
	gap: 14rpx;
	box-shadow:
		0 8rpx 24rpx rgba(7, 193, 96, 0.32),
		0 2rpx 8rpx rgba(7, 193, 96, 0.18);
}

.lp-wechat-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* ── 隐私政策 ── */
.lp-privacy {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 36rpx;
	gap: 6rpx;
}

.lp-privacy-txt {
	font-size: 22rpx;
	color: rgba(255, 255, 255, 0.85);
}

.lp-privacy-link {
	font-size: 22rpx;
	color: #1b5e20;
	font-weight: 600;
	text-decoration: underline;
}
</style>