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

163 lines
3.7 KiB

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