BlockChainH5/pages/login/login.vue

<template>
	<view class="content">
		<!-- <view class="title">易品新境</view> -->
		<view class="login-top">
			<view class="top-logo-content">
				<image class="top-logo" fit="contain" src="/static/imgs/top_logo.png" />
				链商星球(中国)
			</view>
			<image class="top-bg" fit="contain" src="/static/imgs/top_bg.png" />
		</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
					}
					this.$Router.back()
				}).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: 36vh;
		  width: 100%;
		  display: flex;
		  flex-direction: row;
		  align-items: flex-end;
		  justify-content: center;
		  box-sizing: border-box;
		  position: relative;
		  padding-bottom: 160rpx;
		
		  .top-bg {
		    position: absolute;
		    bottom: 30rpx;
		    // left: 2rpx;
		    z-index: 2;
			width: 740rpx;
			margin-left: 40rpx;
		  }
		
		  .top-logo-content {
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    justify-content: center;
		    box-sizing: border-box;
		    color: #7f56a4;
		    font-size: 18px;
		
		    .top-logo {
		      margin-bottom: 20rpx;
			  width: 240rpx;
			  height: 240rpx;
		    }
		  }
		}
		

		.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: 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: $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);
			}
		}

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