barter-app/pages/login/login.vue

<template>
	<view class="content">
		<view class="title">易品新境</view>
		<view class="inputs phone">
			<label class="label">+86</label>
			<input type="number" placeholder="输入您的手机号码" v-model="phone"/>
		</view>
		<view class="inputs sms">
			<input type="number" placeholder="输入短信验证码" v-model="code"/>
			<button
				class="sms-btn"
				type="default"
				size="mini"
				:disabled="phone == '' || getSms"
				@click="getPhoneCode"
			>{{getSms ? '重新发送' + smsTime + 's': '发送验证码'}}</button>
		</view>
		<button class="btn" type="default" :disabled="phone == '' || code == ''" @click="login">登录</button>
		<!-- 快捷登录 -->
		<view class="quick">
			<view class="quick-title">快捷登录</view>
			<view class="quick-box">
				<image class="quick-icon" src="@/static/icons/wechat.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 用户登录注册协议 -->
		<view class="agreement">未注册的手机号验证后将自动创建账号，登录即表示同意接收<navigator url="">用户隐私规格</navigator>和<navigator url="">用户服务协议</navigator></view>
	</view>
</template>

<script>
	import { getSms, smsAuth } from '@/apis/interfaces/auth'
	export default {
		data() {
			return {
				phone	: "18245180131",
				code	: "",
				smsTime : 60,
				getSms	: false
			}
		},
		methods: {
			// 用户登录
			login(){
				smsAuth({
					mobileNo: this.phone,
					code	: this.code
				}).then(res => {
					this.$store.commit('setToken', res.token_type + '' + res.access_token)
					if(!res.is_company){
						this.$Router.replace({name: "Registered"})
						return
					}
				}).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;
		.inputs{
			background: $border-color-lg;
			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: 80rpx;
					line-height: 80rpx;
					position: absolute;
					top: 0;
					right: 0;
					padding: 0;
					margin: 0;
					border-radius: 0;
					border-left: solid 1rpx $border-color;
					color: $text-price;
					font-size: $title-size-lg;
					&::after{
						border: none;
					}
					&[disabled]{
						color: rgba($color: $text-price, $alpha: .6);
						background: $border-color-lg;
					}
				}
			}
		}
		.title{
			text-align: center;
			font-size: $title-size + 6;
			font-weight: bold;
			color: $text-color;
			margin-bottom: 100rpx;
		}
		.btn{
			background: $text-price;
			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: $text-price, $alpha: .6);
			}
		}
		.quick{
			padding-top: $padding * 3;
			text-align: center;
			.quick-title{
				text-align: center;
				color: $text-gray;
				font-size: $title-size-sm;
				padding-bottom: $padding;
			}
			.quick-box{
				display: flex;
				justify-content: center;
				.quick-icon{
					width: 78rpx;
				}
			}
		}
		.agreement{
			padding-top: $padding * 4;
			font-size: $title-size-sm;
			color: $text-gray;
			navigator{
				color: $text-price;
				display: inline-block;
				padding: 0 10rpx;
			}
		}
	}
</style>