SmartParks_uniapp/pages/sys/login/login.vue

<template>
	<view class="login-container">
		<!-- 顶部渐变背景和标题 -->
		<view class="login-header">
			<image class="login-bg-img" src="/static/ic_login_topbg.png" mode="widthFix" />
			<view class="login-title">登录注册</view>
			<view class="login-subtitle">欢迎使用数智南川</view>
		</view>
		<!-- 表单区域 -->
		<view class="login-form">
			<view class="input-row">
				<image class="iconfont" src="/static/ic_login_phone.png" />
				<input class="login-input" type="text" placeholder="输入手机号" v-model="username" />
			</view>
			<view class="input-row">
				<image class="iconfont2" src="/static/ic_login_code.png" />
				<input class="login-input" type="text" placeholder="请输入验证码" v-model="password"/>
				<button class="code-btn">获取校验码</button>
			</view>
			<view class="protocol-row">
				<label class="custom-checkbox-label">
					<input type="checkbox" :checked="checked" @change="handleCheckboxChange"
						class="custom-checkbox-input" />
					<image :src="checked ? '/static/ic_login_agree.png' : '/static/ic_login_dis.png'"
						class="custom-checkbox-img" @click="handleCheckboxChange({ target: { checked: !checked }})" />
				</label>
				<text>同意</text>
				<text class="protocol-link">《用户协议》</text>
				<text>和</text>
				<text class="protocol-link">《隐私政策》</text>
			</view>
			<button class="login-btn" @click="submit">登录</button>
		</view>
	</view>
</template>

<script>
	import base64 from '@/common/base64.js';
	export default {
		data() {
			return {
				phoneNo: '',
				username: 'admin',
				password: 'admin123',
				loginType: 'currentPhone',
				showPassword: false,
				remember: true,
				isValidCodeLogin: false,
				validCode: '',
				imgValidCodeSrc: null,
				list: [{
					name: '用户名'
				}, {
					name: '手机号'
				}],
				current: 0,
				activeColor: '#007aff',
				checked: false
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			async submit() {
				if (this.username.length == 0) {
					this.$u.toast('请输入账号');
					return;
				}
				if (this.password.length == 0) {
					this.$u.toast('请输入密码');
					return;
				}
				let res = await this.$u.api.login({
					"tenantId": "000000", // 把单引号换成双引号
					"username": this.username,
					"password": this.password,
					"grantType": "password",
					"uuid": "7cb3ea4fe2ae4f08bbd561c94ef0191b",
					"clientId": "dab457a1ea14411787c240db05bb0832"
				});
				console.log(res)
				if (res.code == "200") {
					this.$u.toast("登录成功")
					this.$store.commit('$uStore', {
						name: 'vuex_token',
						value: res.data.access_token
					});
					this.getUserInfo()
					// setTimeout(() => {
						// uni.reLaunch({
						// 	url: '/pages/sys/home/home'
						// });
					// }, 500);
				}
			},
			getUserInfo(){
				this.$u.api.getUserInfo({loginCheck: true}).then(res => {
					if (res.code == '200'){
						this.$store.commit('$uStore', {
							name: 'vuex_user',
							value: res.data.user
						});
						uni.reLaunch({
							url: '/pages/sys/home/home'
						});
					}
				});
			},
			handleCheckboxChange(e) {
				this.checked = e.target.checked;
			}
		}
	}
</script>

<style scoped>
	.login-container {
		min-height: 100vh;
		background: #fafbfc;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.login-header {
		width: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 40rpx;
	}

	.login-bg-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 0;
	}

	.login-title,
	.login-subtitle {
		position: relative;
		top: 164rpx;
		z-index: 2;
	}

	.login-title {
		color: #fff;
		font-size: 48rpx;
		font-weight: bold;
		margin-top: 40rpx;
	}

	.login-subtitle {
		color: #fff;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.login-form {
		width: 80%;
		margin-top: 400rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.input-row {
		width: 100%;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eee;
		margin-bottom: 30rpx;
		padding-bottom: 10rpx;
	}

	.iconfont {
		font-size: 32rpx;
		margin-right: 16rpx;
		width: 27rpx;
		height: 43rpx;
	}

	.iconfont2 {
		font-size: 32rpx;
		margin-right: 16rpx;
		width: 31rpx;
		height: 35rpx;
	}

	.login-input {
		flex: 1;
		border: none;
		background: transparent;
		font-size: 28rpx;
		padding: 10rpx 0;
		margin-right: 10rpx;
	}

	.code-btn {
		background: none;
		color: #2e6cf6;
		border: none;
		font-size: 26rpx;
		padding: 0 10rpx;
	}

	.protocol-row {
		width: 100%;
		display: flex;
		align-items: center;
		margin: 20rpx 0 40rpx 0;
		font-size: 24rpx;
	}

	.protocol-checkbox {
		margin-right: 8rpx;
	}

	.protocol-link {
		color: #2e6cf6;
		margin: 0 4rpx;
	}

	.login-btn {
		width: 100%;
		height: 80rpx;
		background: linear-gradient(90deg, #2e6cf6 0%, #4fc3f7 100%);
		color: #fff;
		font-size: 32rpx;
		border: none;
		border-radius: 40rpx;
		margin-top: 268rpx;
	}

	.custom-checkbox-label {
		display: flex;
		align-items: center;
		margin-right: 8rpx;
	}

	.custom-checkbox-input {
		display: none;
	}

	.custom-checkbox-span {
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		border: 2rpx solid #2e6cf6;
		background: #fff;
		display: inline-block;
		position: relative;
		transition: border-color 0.2s;
	}

	.custom-checkbox-span.checked {
		background: #2e6cf6;
		border-color: #2e6cf6;
	}

	.custom-checkbox-span.checked::after {
		content: '';
		position: absolute;
		left: 7rpx;
		top: 7rpx;
		width: 12rpx;
		height: 12rpx;
		background: #fff;
		border-radius: 50%;
	}

	.custom-checkbox-img {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}
</style>