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">《用户服务协议》</text>
				<text>和</text>
				<text class="link">《隐私条款》</text>
			</view>
			<button :class="isActive?'btn-login-disable':'btn-login'" open-type="getPhoneNumber"
				@getphonenumber="decryptPhoneNumber" :disabled="isActive">授权登录</button>
		</view>
	</view>
</template>

<script>
	import {
		isReactive
	} from 'vue';
	import {
		set
	}
	from '../../static/utils/cache/storage.js'
	export default {
		data() {
			return {
				isActive: true
			}
		},
		onLoad() {
			set('token',
				'NjBIOFRORDcraDc4U1RsUTI4a3B5em50VVVzclp2QjdFWDV2dVJJc0VLL3Fhazd0bjZPaU9Tc3E1cHc2cmYyZTc0Y2FITTdRR0pMTk1xaVRHM0I1d0NiTnJ4b1BVSVNtUFl4SlFtR1g2M0tCQTc2TXM4L3d4ZVhwM09VREN0bDMrTXNoa0trWDR1eG5PdG84OXZ4UVE0dDhRUDdQRk1Qd2N0ZWVLSzJaZzBjcC82NXdueGQvUkZNSm1vZ2doQmFncnRQN0pFQ240enZHaEdFcGpVTDZqY3VpdHRUZERUS2Y5RG5BdXZmeE1kNVVyM29icTZTV054RzNYdURDa2lvR3dIbi9nNmJLOHduNUl4Snp3Qm1qTDRkYXFXZ2plaGNQRmw3ZXBZTlgxV3cwZkVuaGxHZlhRb0ZZMlEveEJhQS9zeWE5NnpxRlUxTmJWYkRmMitvMTZXRnExVytHNEhEb1JPZkE4TG5UVzc0PQ=='
				)
			setTimeout(() => {
				console.log('调用');
				uni.switchTab({
					url: '/pages/index/home',
					success() {
						console.log('成功');
					},
					fail(err) {
						console.log('失败', err);
					}
				})
			}, 2000)
		},
		methods: {
			//是否勾选服务协议
			changeAgree(e) {
				this.isActive = !this.isActive
			},
			decryptPhoneNumber(e) {
				console.log(e)
			}
		}
	}
</script>

<style>
	.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>