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

3 years ago
<!--
* @Author: ch
* @Date: 2022-03-22 15:36:46
* @LastEditors: ch
* @LastEditTime: 2022-04-24 10:19:42
3 years ago
* @Description: file content
-->
<template>
<view class="container">
<view class="header">
<image class="arrow" src="@/static/common/back.png" @click="goBack"/>
3 years ago
</view>
<view class="logo">马士兵严选</view>
<u--form class="login">
<u-form-item>
3 years ago
<input placeholder="请输入手机号" type="number" v-model="phone" class="login--input" border="bottom" />
3 years ago
</u-form-item>
<u-form-item class="login--code">
3 years ago
<input placeholder="验证码" type="number" maxlength="6" class="login--input" v-model="code" border="bottom" />
3 years ago
<u-code ref="uCode" @change="codeChange" changeText="X秒后重新获取"
@start="sendStatus = true" @end="sendStatus = false" seconds="60"></u-code>
3 years ago
<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>
3 years ago
<label class="login--agreement">
3 years ago
<radio class="radio" :checked="checked" @click="checked = !checked" color="#FF875B"/>
3 years ago
同意<text class="link">用户协议</text><text class="link">隐私协议</text>首次登录将自动注册
3 years ago
</label>
</view>
</template>
<script>
import { IsPhone } from '@/common/utils';
import { ApiGetCode, ApiPostLogin } from '@/common/api/index';
import UiButton from '../components/UiButton.vue';
3 years ago
export default {
components: { UiButton },
3 years ago
data(){
return {
tips : '',
sendStatus : false,
checked: false,
phone : '',
3 years ago
code : '',
loginStatus : false
3 years ago
}
},
mounted(){
3 years ago
this.$store.state.token && this.goBack();
},
3 years ago
methods : {
codeChange(text) {
this.tips = text;
},
async getCode() {
3 years ago
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();
3 years ago
},
async login(){
3 years ago
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('请勾选同意《用户协议》和《隐私协议》');
3 years ago
return false;
}
3 years ago
const {error, result} = await ApiPostLogin({
phone : this.phone,
verificationCode : this.code,
clientId : 1,
systemId : 1
});
if(error){
uni.$u.toast(error.message);
return false;
}
3 years ago
this.$store.commit('SET_TOKEN',result.token);
3 years ago
this.goBack();
},
3 years ago
/**
* 登录返回 登录后的跳转逻辑
* 如果是从首页或者直接打开的页面则直接跳转至首页
* 否则返回上一个页面
*/
3 years ago
goBack(){
3 years ago
const pages = getCurrentPages();
const len = pages.length;
const prevPage = pages[len - 2];
const tabBar = ['pages/index/index','pages/goods/category'];
3 years ago
this.loginStatus = false;
if(len > 1){
// 不知道为什么有时候页面返回会有问题初步判断tabBar页面的问题tabBar来的直接重定向过去不返回
if(tabBar.includes(prevPage.route)){
this.$Router.replaceAll(prevPage.__page__.path);
}else{
this.$Router.back();
}
3 years ago
}else{
this.$Router.replaceAll('/');
}
3 years ago
}
}
}
</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;
3 years ago
font-weight: bold;
3 years ago
}
.login{
width: 650rpx;
margin: 0 auto;
&--input{
border-bottom: 2rpx solid $color-grey2;
3 years ago
width: 650rpx;
height: 100rpx;
font-size: $font-size-lg;
3 years ago
}
&--code{
position: relative;
}
&--send-btn{
position: absolute;
right: 0;
color: $color-yellow3;
3 years ago
&__disabled{
opacity: .8;
}
}
&--btn{
width: 650rpx;
font-size: $font-size-lg;
3 years ago
margin: 60rpx 50rpx 40rpx;
}
&--agreement{
width: 650rpx;
padding: 0 50rpx;
3 years ago
text-align: center;
color: $color-grey4;
font-size: $font-size-sm;
3 years ago
line-height: $font-size-sm;
display: flex;
align-items: center;
justify-content: center;
3 years ago
.link{
color: $color-grey6;
3 years ago
font-size: $font-size-sm;
line-height: $font-size-sm;
3 years ago
}
}
}
3 years ago
/deep/{
.input-placeholder{
color: $color-grey3;
}
.uni-radio-input{
width: 28rpx;
height: 28rpx;
}
}
3 years ago
</style>