shop-app/pages/login.vue

<!--
 * @Author: ch
 * @Date: 2022-03-22 15:36:46
 * @LastEditors: ch
 * @LastEditTime: 2022-03-29 14:00:56
 * @Description: file content
-->
<template>
	<view class="container">
		<view class="header">
			<image class="arrow" src="@/static/search/arrow.png" @click="$Router.back()"/>
		</view>
		<view class="logo">马士兵严选</view>
		<u--form class="login">
			<u-form-item>
				<input placeholder="请输入手机号" v-model="phone" class="login--input" border="bottom" />
			</u-form-item>
			<u-form-item class="login--code">
				<input placeholder="验证码" type="number" maxlength="6" class="login--input" v-model="code"  border="bottom" />
				<u-code ref="uCode" @change="codeChange" changeText="X秒后重新获取"
					@start="sendStatus = true" @end="sendStatus = false" seconds="60"></u-code>
				<text class="login--send-btn" :class="sendStatus && 'login--send-btn__disabled'" 
					@click="getCode">{{tips}}</text>
			</u-form-item>
		</u--form>
		<UiButton class="login--btn" type="gradual" @click="login">登录</UiButton>
		<label class="login--agreement">
			<radio class="radio" :checked="checked" @click="checked = !checked" color="#FF875B"/>
			同意<text class="link">《用户协议》</text>和<text class="link">《隐私协议》</text>,首次登陆将自动注册
		</label>
	</view>
</template>
<script>
import { IsPhone } from '@/common/utils';
import { ApiGetCode, ApiPostLogin } from '@/common/api/index';
import UiButton from '../components/UiButton.vue';
export default {
	components: { UiButton },
	data(){
		return { 
			tips : '',
			sendStatus : false,
			checked: false,
			phone : '',
			code : ''
		}
	},
	mounted(){
	},
	methods : {
		codeChange(text) {
			this.tips = text;
		},
		async getCode() {
			if(!this.$refs.uCode.canGetCode){
				return false
			}
			if(!IsPhone(this.phone)){
				uni.$u.toast('请输入正确手机号');
				return false
			}
			uni.showLoading({
				title: '正在获取验证码'
			})
			const {error, resutl} = await ApiGetCode({phone: this.phone});
			uni.hideLoading();
			if(error){
				uni.$u.toast(error.message);
				return false;
			}
			uni.$u.toast('验证码已发送');
			this.$refs.uCode.start();
		
		},
		async login(){
			if(!IsPhone(this.phone)){
				uni.$u.toast('请输入正确手机号');
				return false;
			}
			if(!this.code || this.code.length !== 4){
				uni.$u.toast('请输入正确的验证码');
				return false;
			}
			if(!this.checked){
				uni.$u.toast('请勾选同意《用户协议》和《隐私协议》');
				return false
			}
			const {error, result} = await ApiPostLogin({
				phone : this.phone,
				verificationCode : this.code,
				source : 1
			});
			if(error){
				uni.$u.toast(error.message);
				return false;
			}
			this.$store.commit('SET_TOKEN',result.token);
			const pagesLength = getCurrentPages().length;
			pagesLength > 1 ? this.$Router.back() : this.$Router.replace('/');
		}
	}
}
</script>
<style lang="scss" scoped>
.header{
	height: 88rpx;
	padding-left: 40rpx;
	display: flex;
	align-items: center;
	.arrow{
		width: 14rpx;
		height: 28rpx;
	}
}
.logo{
	font-size: 46rpx;
	text-align: center;
	margin: 25rpx 0 84rpx 0;
}
.login{
	width: 650rpx;
	margin: 0 auto;
	&--input{
		border-bottom: 2rpx solid #eee;
		width: 650rpx;
		height: 100rpx;
		font-size: 32rpx;
	}
	&--code{
		position: relative;
	}
	&--send-btn{
		position: absolute;
		right: 0;
		color: #FF875B;
		&__disabled{
			opacity: .8;
		}
	}
	&--btn{
		width: 650rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		margin: 60rpx 50rpx 40rpx;
	}
	&--agreement{
		width: 650rpx;
		padding: 0 50rpx;
		color: #999;
		font-size: 24rpx;
		.radio{
			transform: scale(60%);
		}
		.link{
			color: #333;
		}
	}
}



</style>