assess-app/pages/login/index.vue

<template>
	<view class="page-box login-box">
		<view class="login-form sys-radius-50">
			<view class="from-title">
				<view class="title-list">
					<view class="title-text  sys-size-28 text-center sys-weight-600" :class="{'default-text':type===1}"
						@click="setType(1)">验证码登录</view>
					<view class="title-text sys-size-28 text-center sys-weight-600" :class="{'default-text':type===2}"
						@click="setType(2)">密码登录</view>
				</view>
				<view class="title-bg sys-background-fff" :class="{'title-bg-two':type===2}">
					<view class="bg-icon sys-background-dominant "></view>
				</view>
			</view>
			<view class="from-box sys-background-fff " :class="{'one-from':type===1,'two-from':type===2}">
				<view class="from-animation animate__animated animate__fadeIn" v-if="type===1">
					<view class="input-item  sys-from-background-color sys-radius-30 "
						:class="{'apply-shake':phoneShake}">
						<en-input type="number" class="login-input" placeholder="请输入手机号" v-model="loginData.phone"
							maxlength="11"></en-input>
					</view>
					<view class="input-item  input-send sys-from-background-color sys-radius-30"
						:class="{'apply-shake':codedShake}">
						<en-input type="number" class="login-input" placeholder="请输入验证码" v-model="loginData.code"
							maxlength="6"></en-input>
						<view class="login-send text-color-dominant sys-size-28 sys-weight-400" @click="getVerifiedCode"
							v-if="timeNum<=0">发送验证码</view>
						<view class="login-send text-color-dominant sys-size-28 sys-weight-400" v-else>{{ timeNum }} s
						</view>
					</view>
				</view>
				<view class="from-animation animate__animated animate__fadeIn" v-else>
					<view class="input-item  sys-from-background-color sys-radius-30 "
						:class="{'apply-shake':phoneShake}">
						<en-input type="number" class="login-input" placeholder="请输入手机号" v-model="loginData.phone"
							maxlength="11"></en-input>
					</view>
					<view class="input-item input-send  sys-from-background-color sys-radius-30"
						:class="{'apply-shake':passwordShake}">
						<en-input type="password" class="login-input" placeholder="请输入密码"
							v-model="loginData.password"></en-input>
						<view class="login-send text-color-dominant sys-size-28 sys-weight-400" @click="goToUrl(2)">
							忘记密码？</view>
					</view>
				</view>
				<agreement v-model="isConsent" ref="agreement"></agreement>

				<view class="input-but sys-background-dominant text-color-fff sys-size-30 sys-radius-100 sys-weight-600"
					:class="{'sys-selected-but':isLogin,'sys-unselected-but':!isLogin}" @click="login">登陆</view>
			</view>
		</view>
		<view class="register-box">
			<view class="register-text sys-weight-400 sys-size-24 text-color-666">还没有账号？</view>
			<view class="register-text text-color-dominant sys-size-24 sys-weight-400" @click="goToUrl(1)">立即注册</view>
		</view>
		<view class="wx-box">
			<view class="wx-title">
				<view class="wx-wire"></view>
				<view class="wx-text sys-size-24 text-color-7c sys-weight-400">第三方登录</view>
				<view class="wx-wire"></view>
			</view>
			<image @click="wxLogin" class="wx-logo"
				src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/login/wx-img.png"
				mode="aspectFill"></image>
		</view>


	</view>
</template>
<script>
	import {
		commonSend
	} from "@/api/common";
	import tools from "@/service/tools";
	import {
		login,
		wxLogin
	} from "@/api/login";
	import EnInput from "@/components/en-from/en-input/index.vue";
	import Agreement from "@/pages/login/model/agreement.vue";

	export default {
		components: {
			Agreement,
			EnInput

		},
		data() {
			return {
				type: 1,
				loginData: {
					phone: '18623152213',
					password: '',
					code: '1234',
				},
				phoneShake: false,
				passwordShake: false,
				codedShake: false,
				consentShake: false,
				isConsent: false,
				isLogin: false,
				timeNum: 0,
				timer: null,
			}
		},
		watch: {
			'loginData': {
				handler() {
					this.verifyData()
				},
				deep: true
			},
			'isConsent': function() {
				this.verifyData()
			}
		},
		mounted() {

		},
		methods: {
			wxLogin() {
				if (!this.isConsent) {
					tools.error('请阅读并同意协议');
					this.$refs.agreement.setConsentShake()
					return;
				}
				if (this.isAjax) {
					return false;
				}
				this.isAjax = true;
				uni.login({
					provider: "weixin",
					success: (loginRes) => {
						wxLogin({
							'code': loginRes.code
						}).then((res) => {
							if (res.code === 403) {
								tools.error('当前用户未注册')
								uni.setStorageSync('openid', res.data.openid)
								setTimeout(() => {
									//跳转至注册页面
									uni.navigateTo({
										url: '/pages/login/register'
									});
								}, 1500)
							} else if (res.code === 1) {
								tools.setLoginData(res.data, true)
							} else {
								tools.error(res.msg)
							}
							this.isAjax = false;
						})
					}
				})


			},
			goToUrl(type) {
				if (type === 1) {
					uni.navigateTo({
						'url': '/pages/login/register'
					})
				} else if (type === 2) {
					uni.navigateTo({
						'url': '/pages/login/forget'
					})
				} else {

				}
			},
			setShake(type) {
				if (type === 1) {
					this.phoneShake = true
				} else if (type === 2) {
					this.passwordShake = true
				} else if (type === 3) {
					this.codedShake = true
				} else if (type === 4) {
					this.$refs.agreement.setConsentShake()
				}
				setTimeout(() => {
					this.phoneShake = false
					this.passwordShake = false
					this.codedShake = false
				}, 500)
			},
			login() {
				if (this.loginData.phone === '') {
					tools.error('请输入手机号码');
					this.setShake(1)
					return;
				}
				if (this.type !== 1) {
					if (this.loginData.password === '') {
						this.setShake(2)
						tools.error('请输入登陆密码');
						return;
					}
				} else {
					if (this.loginData.code === '') {
						this.setShake(3)
						tools.error('请输入验证码');
						return;
					}
				}
				if (!this.isConsent) {
					this.setShake(4)
					tools.error('请阅读并同意协议');
					return;
				}
				login(this.loginData).then((res) => {
					if (res.code === 1) {
						tools.setLoginData(res.data, true)
					} else {
						tools.error(res.msg)
					}
				})
			},
			verifyData() {
				if (this.type === 1) {
					this.isLogin = this.loginData.phone !== '' && this.loginData.code !== '' && this.isConsent
				} else {
					this.isLogin = this.loginData.phone !== '' && this.loginData.password !== '' && this.isConsent
				}
			},
			getVerifiedCode() {
				if (this.timeNum > 0) {
					return;
				}
				if (this.loginData.phone === '') {
					tools.error("请输入手机号码")
					return;
				}
				let regPhone = /^(?:(?:\+|00)86)?1\d{10}$/;
				if (!regPhone.test(this.loginData.phone)) {
					tools.error("手机号码格式错误")
					return;
				}
				commonSend({
					'phone': this.loginData.phone,
					'send_type': 'retrieve'
				}).then((res) => {
					if (res.code === 1) {
						tools.success(res.msg);
						this.timeNum = 60;
						this.timer = setInterval(() => {
							this.timeNum--;
							if (this.timeNum <= 0) {
								clearInterval(this.timer);
							}
						}, 1000);
					} else {
						tools.error(res.msg);
					}
				})
			},
			setIsConsent() {
				this.isConsent = !this.isConsent
			},
			setType(type) {
				if (type !== this.type) {
					this.type = type
				}
			},

		},
	}
</script>
<style lang="scss" scoped>
	@import "/static/css/login.css";

	.page-box {
		position: relative;
		padding-top: 370rpx;

		.login-form {
			margin: 0 30rpx;
			border-radius: 50rpx;
			background-color: rgba(255, 255, 255, 0.5);

			.from-title {
				border-radius: 50rpx 50rpx 0 0;
				height: 110rpx;
				position: relative;

				.title-bg {
					position: absolute;
					border-radius: 50rpx 50rpx 0 0;
					top: 0;
					left: 0;
					height: 110rpx;
					width: 50%;
					transition: .5s ease;
					z-index: 0;

					.bg-icon {
						margin: 86rpx auto 0 auto;
						width: 36rpx;
						height: 6rpx;
						border-radius: 99rpx;
					}
				}

				.title-bg-two {
					left: 50%;
					transition: .5s ease;
				}

				//.title-bg::after {
				//  content: '';
				//  position: absolute;
				//  right: -50rpx;
				//  bottom: 0;
				//  width: 50rpx;
				//  height:50rpx;
				//  background-color: #fff;
				//  border-radius: 50rpx 50rpx  50rpx 0;
				//}
				.title-list {
					display: flex;
					justify-content: space-between;
					z-index: 1;
					position: relative;

					.title-text {
						width: 50%;
						height: 110rpx;
						line-height: 102rpx;
						color: #333333;
					}

					.default-text {
						color: #10B261;
					}

					.title-text:first-child {
						background-image: url("https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/login/right.png");
						background-repeat: no-repeat;
						background-position: right bottom;
					}

					.title-text:last-child {
						background-image: url("https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/login/left.png");
						background-repeat: no-repeat;
						background-position: left bottom;
					}
				}

			}

			.from-box {
				box-shadow: 0rpx 4rpx 36rpx 0rpx rgba(196, 196, 196, 0.25);
				border-radius: 0 0 50rpx 50rpx;
				padding: 50rpx 45rpx;

				.input-item {
					height: 96rpx;
					padding: 28rpx 40rpx;
					box-sizing: border-box;

					.login-input {
						width: 100%;
					}
				}

				.input-item:last-child {
					margin-top: 30rpx;
				}

				.input-send {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.login-input {
						width: calc(100% - 140rpx);
					}

					.login-send {
						width: 140rpx;
						text-align: center;
					}
				}

				.input-but {
					margin-top: 40rpx;
					width: 100%;
					height: 96rpx;
					line-height: 96rpx;
					text-align: center;
				}
			}

			.one-from {
				border-radius: 0 50rpx 50rpx 50rpx;
				transition: 0.85s ease;
			}

			.two-from {
				border-radius: 50rpx 0 50rpx 50rpx;
				transition: 0.85s ease;
			}
		}

		.register-box {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 60rpx;

			.register-text {
				height: 34rpx;
				line-height: 34rpx;
			}

			.register-text:last-child {
				margin-right: 5rpx;
			}
		}

		.wx-box {
			position: absolute;
			bottom: calc(60rpx + env(safe-area-inset-bottom));
			left: 0;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.wx-title {
				display: flex;
				justify-content: center;
				align-items: center;

				.wx-wire {
					background: linear-gradient(90deg, #D9D9D9 0%, rgba(115, 115, 115, 0) 100%);
					width: 174rpx;
					height: 2rpx;
					border-radius: 50%;
				}

				.wx-text {
					margin: 0 15rpx;
					height: 34rpx;
					line-height: 34rpx;
				}
			}

			.wx-logo {
				margin: 25rpx auto 0 auto;
				width: 80rpx;
				height: 80rpx;
			}
		}

	}
</style>