shop-app/pages/login.vue

<!--
 * @Author: ch
 * @Date: 2022-03-22 15:36:46
 * @LastEditors: ch
 * @LastEditTime: 2022-04-24 10:19:42
 * @Description: file content
-->
<template>
	<view class="container">
		<view class="header">
			<image class="arrow" src="@/static/common/back.png" @click="goBack"/>
		</view>
		<view class="logo">马士兵严选</view>
		<u--form class="login">
			<u-form-item>
				<input placeholder="请输入手机号" type="number" 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" size="max" @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 : '',
			loginStatus : false
		}
	},
	mounted(){
		this.$store.state.token && this.goBack();
	},
	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(this.loginStatus){
				return false;
			}
			this.loginStatus = true;
			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,
				clientId : 1,
				systemId : 1
			});
			if(error){
				uni.$u.toast(error.message);
				return false;
			}
			this.$store.commit('SET_TOKEN',result.token);
			this.goBack();
		},
		/**
		 * 登录返回 与 登录后的跳转逻辑
		 * 如果是从首页，或者直接打开的页面，则直接跳转至首页
		 * 否则返回上一个页面
		 */
		goBack(){
			const pages = getCurrentPages();
			const len = pages.length;
			const prevPage = pages[len - 2];
			const tabBar = ['pages/index/index','pages/goods/category'];

			this.loginStatus = false;
			if(len > 1){
				// 不知道为什么有时候页面返回会有问题，初步判断tabBar页面的问题，tabBar来的直接重定向过去，不返回
				if(tabBar.includes(prevPage.route)){
					this.$Router.replaceAll(prevPage.__page__.path);
				}else{
					this.$Router.back();
				}
			}else{
				this.$Router.replaceAll('/');
			}  
		}
	}
}
</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;
	font-weight: bold;
}
.login{
	width: 650rpx;
	margin: 0 auto;
	&--input{
		border-bottom: 2rpx solid $color-grey2;
		width: 650rpx;
		height: 100rpx;
		font-size: $font-size-lg;
	}
	&--code{
		position: relative;
	}
	&--send-btn{
		position: absolute;
		right: 0;
		color: $color-yellow3;
		&__disabled{
			opacity: .8;
		}
	}
	&--btn{
		width: 650rpx;
		font-size: $font-size-lg;
		margin: 60rpx 50rpx 40rpx;
	}
	&--agreement{
		width: 650rpx;
		padding: 0 50rpx;
		text-align: center;
		color: $color-grey4;
		font-size: $font-size-sm;
		line-height: $font-size-sm;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.link{
			color: $color-grey6;
			font-size: $font-size-sm;
			line-height: $font-size-sm;
		}
	}
}
/deep/{
	.input-placeholder{
		color: $color-grey3;
	}
	.uni-radio-input{
		width: 28rpx;
		height: 28rpx;
	}
}
</style>