sykl-sm/pages/login/login.vue

<template>
	<view class="content">
		<view class="login-top">
			<view class="top-logo-content">
				手机号快捷登录
			</view>
            未注册的手机号码将自动注册
		</view>
		<!-- 输入手机号相关 -->
		<view class="inputs phone">
			<label class="label">+86</label>
			<input type="number" placeholder="输入您的手机号码" maxlength="11" v-model="phone" />
		</view>
		<view class="inputs sms">
			<input type="number" placeholder="输入短信验证码" maxlength="4" v-model="code" />
			<button class="sms-btn" type="default" size="mini" :disabled="phone == '' || getSms"
				@click="getPhoneCode">{{getSms ? '重新发送' + smsTime + 's': '发送验证码'}}</button>
		</view>
		<view class="inputs">
			<input placeholder="邀请码 (选填)" maxlength="10" v-model="parentId" />
		</view>
		<button class="btn" type="default" :disabled="phone == '' || code == ''" @click="login">登录</button>
		<view class="beianNo">黑ICP备2021013714号-1</view>
	</view>
</template>

<script>
	import {
		getSms,
		smsAuth
	} from '@/apis/interfaces/auth'
	export default {
		data() {
			return {
				phone	: "",
				code	: "",
				parentId: "",
				smsTime	: 60,
				getSms	: false
			}
		},
        mounted(){
           this.parentId = this.$Route.query.invite || ''
        },
		methods: {
			// 用户登录
			login() {
				smsAuth({
					mobileNo	: this.phone,
					code		: this.code,
					invite	    : this.parentId
				}).then(res => {
					this.$store.commit('setToken', res.token_type + ' ' + res.access_token)
					if(this.$Route.toName){
						this.$Router.back()
					}else{
						this.$Router.replaceAll({name: 'Index'})
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			// 获取验证码
			getPhoneCode() {
				let outTime
				getSms({
					mobileNo: this.phone
				}).then(res => {
					uni.showToast({
						title: res,
						icon: "none"
					})
					this.getSms = true
					outTime = setInterval(() => {
						if (this.smsTime <= 1) {
							this.getSms = false
							this.smsTime = 60
							clearInterval('outTime')
						}
						this.smsTime -= 1
					}, 1000)
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		width: 100vw;
		padding: $padding * 3;
		box-sizing: border-box;
		background: white;

		.login-top {
		  height: 17vh;
		  width: 100%;
		  flex-direction: row;
		  align-items: flex-end;
		  justify-content: center;
		  box-sizing: border-box;
		  position: relative;
          color: #919191;
		  .top-bg {
		    position: absolute;
		    bottom: 30rpx;
		    z-index: 2;
			width: 740rpx;
		  }
		  .top-logo-content {
		    box-sizing: border-box;
		    color: #000;
            font-weight: 600;
		    font-size: $title-size + 8;
            margin-bottom: 10rpx;
		    .top-logo {
		      margin-bottom: 20rpx;
			  width: 146rpx;
			  height: 146rpx;
		    }
		  }
		}
		

		.inputs {
			background:rgba($color: $mian-color, $alpha: 0.05);
			border: solid 1rpx $border-color;
			position: relative;
			margin-top: $margin;
			height: 80rpx;
			line-height: 80rpx;

			input {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 $padding;
				border: none;
				box-sizing: border-box;
				font-size: $title-size-lg;
			}

			&.phone {
				padding-left: 120rpx;

				.label {
					position: absolute;
					left: 0;
					top: 0;
					width: 120rpx;
					text-align: center;
					border-right: solid 1rpx $border-color;
					font-size: $title-size-lg;
				}
			}

			&.sms {
				padding-right: 200rpx;
				.sms-btn[size='mini'] {
					width: 200rpx;
					height: 77rpx;
					line-height: 77rpx;
					position: absolute;
					top: 1rpx;
					right: 1rpx;
					padding: 0;
					margin: 0;
					border-radius: 0;
					border-left: solid 1rpx $border-color;
					color: $mian-color;
					font-size: $title-size-lg;
					&::after {
						border: none;
					}
					&[disabled] {
						color: rgba($color: $mian-color, $alpha: .6);
						background: $border-color-light;
					}
				}
			}
		}

		.title {
			text-align: center;
			font-size: $title-size + 6;
			font-weight: bold;
			color: $text-color;
			margin-bottom: 100rpx;
		}

		.btn {
			background: $mian-color;
			color: white;
			border-radius: 0;
			margin-top: $margin;
			font-size: $title-size;
			line-height: 90rpx;
			height: 90rpx;
			font-weight: bold;

			&::after {
				border: none;
			}

			&[disabled] {
				background: rgba($color: $mian-color, $alpha: .6);
			}
		}
		.beianNo{
			font-size: $title-size-sm;
			color: $text-gray;
			text-align: center;
			padding-top: $padding*2;
		}
	}
</style>