ts_aimz_uni/pages/login/login.vue

<template>
	<view class="content">
		<image src="/static/images/login_bg.png" class="bg-login" mode="scaleToFill"></image>
		<view class="login-box">
			<view class="rule-box">
				<checkbox-group @change="changeAgree">
					<checkbox class="round yellow" borderColor="#FE9944" activeBorderColor="#FE9944"
						iconColor="#FE9944">
						阅读并同意</checkbox>
				</checkbox-group>
				<text class="link" @click="showServiceDeal">《用户服务协议》</text>
				<text>和</text>
				<text class="link" @click="showPrivacyDeal">《隐私条款》</text>
			</view>
			<button :class="isActive?'btn-login-disable':'btn-login'" open-type="getPhoneNumber"
				@getphonenumber="decryptPhoneNumber" :disabled="isActive">授权登录</button>
		</view>
	</view>
</template>

<script>
	import {
		set
	}
	from '@/common/js/cache/storage.js'
	export default {
		data() {
			return {
				isActive: true
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN || MP-TOUTIAO
			uni.login({
				success: res => {
					console.log('登录成功', res)
					uni.switchTab({
						url: '/pages/index/home'
					})
				},
				fail: err => {
					console.log('登录失败', err)
				}
			})
			// #endif
			// #ifdef H5 || MP-BAIDU

			set('token',
				'WWZRMmsySWJib2hKQUZVVzdYdjFBS3RGRko5UzVVb1dWdm1SZUVxVnUycVhTeDFtN0Q2aHcyTXlwVFRXUTJZM2I5eWRjc2VXK0lLd2d2Z1pCSndydFZQYjZ6ejIyakd6czV4UVF2V3hSRUxsNWZlOStITjhTU1JWdXNWWExIeTloNHNsVkdPMWQ3Q0JGamNhSnpSNXhVVXN5Wnk1NmpnOGNsckxueHNiZFBVdlU3NGpkZDRHMTQrc1pYTGlyZ1c3MnprdFRvTUhWODhJR2M1THhObkN4NGpKZk9sUmVJcTJqYTBZalp0YkNxRU5aNjA3WklLQnRTMVdEdXg0NW1tMEV5V3RSSEEvV0M2ZmFoRWtzRGRoZkd0ZUcyZ2pKRFYwa3YxYThDZm53ZGE5bTBYKzgrVm8yV1h1aTdVU2FQbVAwbFZ6TnhobkxvNGswMWlsMGtiSVNBPT0='
			)
			set('userId', 'c2438eb8-2685-49a9-bf02-5111a5192d96')
			// set('token',
			// 	'NjBIOFRORDcraDc4U1RsUTI4a3B5em50VVVzclp2QjdFWDV2dVJJc0VLL3Fhazd0bjZPaU9Tc3E1cHc2cmYyZTc0Y2FITTdRR0pMTk1xaVRHM0I1d0NiTnJ4b1BVSVNtUFl4SlFtR1g2M0tCQTc2TXM4L3d4ZVhwM09VREN0bDMrTXNoa0trWDR1eG5PdG84OXZ4UVE0dDhRUDdQRk1Qd2N0ZWVLSzJaZzBkZ0RhQS84M3B5WDN1aGlEdWQwR3BIZ24vWDBUWmhrNUZiQkJPUDJKQngyL002Rm5aOG5JZ01HTldoNmJnRGxqOFhjNDhjMmxvVnJDV3JSWlo4dHIydHBRU3FEN3htVjVHZlhueUFjRHlpSVZEd0JJZVJWa3NVMFNlVkNWR2dSZHg4RXFsSkttc05WTDhBN014R3dVRUdIclNZN0UwSm9zdUZ3T052MTRmWmhwRmZhWTJsbURCZ0RlTDFLeHZWWDQ0PQ=='
			// 	)
			// set('userId', '776864b2-f9d5-49eb-9ea9-db6c862ea10b')
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/index/home'
				})
			}, 1000)
			// #endif
		},
		onUnload() {
			console.log('页面卸载');
		},
		methods: {
			//是否勾选服务协议
			changeAgree(e) {
				this.isActive = !this.isActive
			},
			decryptPhoneNumber(e) {
				console.log(e)
			},
			//用户服务协议
			showServiceDeal() {
				uni.navigateTo({
					url: '/pages/common/rule/rule?id=68eee8f5-33d3-4246-aeee-a33956677101',
				})
			},
			//隐私条款
			showPrivacyDeal() {
				uni.navigateTo({
					url: '/pages/common/rule/rule?id=93679af4-e264-4d1c-bd49-538028daa95d'
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.bg-login {
		height: 100vh;
		width: 100vw;
	}

	.login-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 70vw;
		background-color: white;
		border-radius: 15rpx;
		position: absolute;
		bottom: 60rpx;
		left: 50%;
		transform: translate(-50%);
		padding: 40rpx;
		box-shadow: 0rpx 0rpx 10rpx 10rpx rgba(0, 0, 0, 0.03);
	}

	.rule-box {
		display: flex;
		flex-direction: row;
		font-size: 22rpx;
		font-weight: bold;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: nowrap;
	}

	.link {
		color: blue;
	}

	.btn-login-disable {
		width: 60vw;
		margin-top: 40rpx;
		font-size: 24rpx;
		line-height: 20px;
		border-radius: 45px;
		padding: 15rpx;
		background-color: #F0F0F0;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		font-family: PingFangSC-regular;
	}

	.btn-login-disable::before {
		border: none !important;
	}

	.btn-login {
		width: 60vw;
		animation: clickScale 1.2s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
		margin-top: 40rpx;
		font-size: 24rpx;
		line-height: 20px;
		border-radius: 45px;
		padding: 15rpx;
		background-color: #FE9944;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		font-family: PingFangSC-regular;
	}

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

	@keyframes clickScale {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.05);
		}

		100% {
			transform: scale(1);
		}
	}

	button::after {
		border: none;
	}
</style>