You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-app/pages/login.vue

202 lines
4.7 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!--
* @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>