dtx_store/pages/auth/auth.vue

<template>
	<view class="auth">
		<image class="auth-back" src="/static/login/auth_bg.png" mode="aspectFill"></image>
		<view class="auth-center">
			<view class="auth-title">
				<view>共力生态</view>
				<view>即可开始共力人生</view>
			</view>
			<view class="auth-input">
				<input v-model="phone" type="number" maxlength="11" placeholder="输入手机号码">
			</view>
			<view class="auth-input auth-code">
				<input v-model="code" type="number" maxlength="4" placeholder="输入验证码">
				<button :disabled="getSms" size="mini" @click="getPhoneCode()">{{sendCode}}</button>
			</view>
			<view class="auth-button">
				<button @click="login('code')">登录</button>
			</view>
			<view class="auth-agreement">
				登录即表示同意<navigator hover-class="none">用户协议</navigator>和<navigator hover-class="none">隐私政策</navigator>
			</view>
			<!-- <view class="auth-other">
				<button @click="login('mnemonic')">使用助记词登录</button>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		smsAuth,
		getSms
	} from '@/apis/interfaces/auth.js'
	export default {
		data() {
			return {
				phone	: '18245180131',
				code	: '',
				getSms	: false,
				sendCode: '获取验证码'
			};
		},
		mounted() {
			this.$store.commit('setToken', '')
		},
		methods: {
			// 获取验证码
			getPhoneCode() {
				let outTime;
				let smsTime = 60;
				getSms({
					mobileNo: this.phone,
				}).then(res => {
					uni.showToast({
						title: res,
						icon: "none",
					});
					this.getSms   = true;
					this.sendCode = smsTime + 's后重新获取';
					outTime = setInterval(() => {
						if (smsTime <= 1) {
							this.getSms   = false;
							this.sendCode = '重新获取';
							clearInterval(outTime);
							return
						}
						this.sendCode = smsTime + 's后重新获取';
						smsTime -= 1;
					}, 1000);
				}).catch((err) => {
					uni.showToast({
						title: err.message,
						icon: "none",
					});
				});
			},
			// 登录
			login(type) {
				if (type === 'code') {
					uni.showLoading({
						title: '登录中'
					})
					smsAuth({
						mobileNo: this.phone,
						code	: this.code,
					}).then((res) => {
						this.$store.commit('setToken', res.token_type + ' ' + res.access_token);
						this.$store.commit('setIsNew', res.is_new ? 0 : 1)
						if(res.is_new){
							this.$Router.replace({name: 'AuthRole'})
							return
						}
						this.$Router.pushTab({name: 'Life'})
						uni.hideLoading()
					}).catch((err) => {
						uni.showToast({
							title: err.message,
							icon: "none",
						});
					});
					return
				}
				if (type === 'mnemonic') {
					uni.showToast({
						title: '助记词登录暂未开放，敬请期待~',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.auth {
		height: 100vh;

		.auth-back {
			width: 100vw;
			height: 100vh;
		}

		.auth-center {
			position: absolute;
			top: 0;
			left: 0;
			height: 100vh;
			width: 100vw;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			background: linear-gradient(to bottom, rgba(0, 0, 0, .0), rgba(0, 0, 0, .5));
			padding: 100rpx 50rpx;
			box-sizing: border-box;

			.auth-title {
				font-size: 50rpx;
				font-weight: bold;
				line-height: 70rpx;
				color: white;
			}

			.auth-input {
				background: white;
				height: 100rpx;
				border-radius: 50rpx;
				margin-top: 40rpx;
				overflow: hidden;

				input {
					height: 100rpx;
					font-size: 32rpx;
					padding: 0 50rpx;
					flex: 1;
				}

				&.auth-code {
					display: flex;
					flex-direction: row;

					button[size="mini"] {
						width: 280rpx;
						padding: 0;
						line-height: 100rpx;
						font-size: 32rpx;
						border-radius: 0;
						color: #fdbc01;
						background: white;
						&[disabled]{
							color: gray;
						}
						&::after {
							display: none;
						}
					}
				}
			}

			.auth-button {
				margin-top: 70rpx;

				button {
					background: #fdbc01;
					color: white;
					border-radius: 50rpx;
					height: 100rpx;
					line-height: 100rpx;
					padding: 0;
					font-weight: bold;
					font-size: 34rpx;

					&::after {
						display: none;
					}
				}
			}

			.auth-agreement {
				text-align: center;
				color: white;
				font-size: 28rpx;
				padding: 30rpx 0 100rpx 0;

				navigator {
					display: inline-block;
					padding: 0 10rpx;
					color: #fdbc01;
				}
			}

			.auth-other {
				padding: 0 10vw;

				button {
					height: 100rpx;
					line-height: 98rpx;
					border-radius: 50rpx;
					border: solid 1px white;
					color: white;
					background: transparent;
					font-size: 34rpx;
					box-sizing: border-box;
				}
			}
		}
	}
</style>