洛阳学员端
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.
 
 
 
 
 

236 lines
6.0 KiB

<template>
<view class="main" :style="{ background: `url(${imgUrl}) no-repeat`, backgroundSize: backgroundSize }">
<!-- <view class="u-back-top">
<view class="backBox">
<u-icon name="arrow-left" color="#333" size="28"></u-icon>
</view>
</view> -->
<u-navbar title=" " :bgColor="bgColor" :autoBack="true" ></u-navbar>
<view class="title">短信验证码登录</view>
<view class="form">
<view class="form-item">
<view class="prefix">
<view class="jia">+</view>
<view class="num">86</view>
<view class="" style="margin: 0 32rpx 0 12rpx;">
<u-icon name="arrow-down" color="#333" size="16" ></u-icon>
</view>
</view>
<view class="inputBox my">
<!-- <u--input placeholder="请输入手机号" border="none" clearable type="number" maxlength="11" v-model="FormData.phone" :holdKeyboard="true" :adjustPosition="false"></u--input> -->
<input v-model="FormData.phone" placeholder="请输入手机号" type="number" maxlength="11" >
</view>
</view>
<view class="form-item">
<view class="inputBox my">
<!-- <u--input placeholder="请输入验证码" border="none" clearable style="height: 100%;" :clearable="false" v-model="FormData.code"></u--input> -->
<input type="text" placeholder="请输入验证码" v-model="FormData.code">
</view>
<view class="code" @click.stop='goSms' :class="{active: isPhone&&!codeOn}">{{codeText}}</view>
</view>
<view class="loginBtn" :class="{active: btnHighlight}" @click="submitFn">登 录</view>
<view style="margin-top: 40rpx;">
<privacyRadion :isCheck="isCheck" @changeRadio="changeRadio"></privacyRadion>
</view>
<!-- <button @click="$goPage('/pages/userCenter/login/face')">进入人脸识别</button> -->
</view>
</view>
</template>
<script>
import { getLoginCode, loginSMS } from '@/config/api.js'
import privacyRadion from './comp/privacyRadion.vue'
import { imgUrl } from '@/config/site.config'
export default {
components: {privacyRadion},
data() {
return {
imgUrl: imgUrl+'loginTopBg.png',
backgroundSize: '100% 360rpx',
isCheck:false,
codeText: '获取验证码',
FormData: {},
codeOn: false,
bgColor: 'transparent',
autoBack:'arrow-left',
redirect: ''
}
},
onLoad(options) {
if(options.redirect) this.redirect = options.redirect
this.isCheck = options.isCheck=='true'?true:false
// alert(options.autoBack)
if(options.autoBack) this.autoBack = ''
console.log(this.autoBack)
},
computed: {
isPhone() {
return uni.$u.test.mobile(this.FormData.phone)
},
btnHighlight() {
return this.isPhone&&this.FormData.code*1>999
}
},
methods: {
// 是否选择协议
changeRadio(val) {
uni.hideKeyboard();
this.isCheck = val
},
// 发送短信验证码
goSms() {
uni.hideKeyboard();
const {
FormData
} = this
if (!FormData.phone) return this.$u.toast('请输入手机号');
if (!this.isPhone) return this.$u.toast('手机号格式有误');
if (this.codeOn) return
this.codeOn = true;
getLoginCode({
scene: 1,
mobile: FormData.phone,
}).then(()=>{
var time = 60;
this.codeText = time + "秒后重新发送"
var timer = setInterval(() => {
time--;
this.codeText = time + "秒后重新发送"
if (time == 0) {
clearInterval(timer);
this.codeText = "获取验证码";
this.codeOn = false;
}
}, 1000);
}).catch(()=>{
this.codeOn = false;
})
// 获取验证码
},
async submitFn() {
uni.hideKeyboard();
if(!this.btnHighlight) return
if(!this.isCheck) return this.$u.toast('请勾选产品协议与隐私政策');
let obj = {
mobile: this.FormData.phone,
code: this.FormData.code
}
const res = await loginSMS(obj)
this.$store.commit('update_vuex_loginInfo',res.data)
await this.$store.dispatch('getUserInfo')
if(this.redirect) {
let switchBar = ['/pages/tabbar/index/index', '/pages/tabbar/learnCar/index', '/pages/tabbar/mine/index']
if(switchBar.includes(this.redirect)) {
uni.reLaunch({
url: this.redirect
})
}else {
const pages = getCurrentPages();
if(pages.length<1||this.redirect=='/pages/mineEntry/personaInfo/personaInfo') {
uni.switchTab({
url: '/pages/tabbar/index/index'
})
return
}
console.log('走返回')
uni.navigateBack()
}
}else {
uni.switchTab({
url: '/pages/tabbar/index/index'
})
}
}
}
}
</script>
<style lang="scss" scoped>
.main {
width: 100%;
min-height: 100vh;
// background: url('../../../static/images/userCenter/loginTopBg.png') no-repeat;
// background-size: 100% 360rpx;
.uni-input-placeholder {
color: #BBBBBB !important;
}
.u-back-top {
padding: 32rpx 0 0 0;
.backBox {
padding: 24rpx;
}
}
.title {
font-size: 48rpx;
color: #333;
padding: 202rpx 0 80rpx 0;
text-align: center;
font-weight: 600;
}
.form {
padding: 0 46rpx;
.form-item {
height: 112rpx;
background: #F4F7FF;
border-radius: 16rpx;
width: 100%;
line-height: 112rpx;
display: flex;
margin-bottom: 40rpx;
padding: 0 40rpx;
.prefix {
display: flex;
align-items: center;
font-size: 32rpx;
color: #333;
font-weight: 600;
}
.inputBox {
flex: 1;
padding: 10rpx 0;
input {
display: block;
width: 100%;
height: 100%;
display: block;
// line-height: 112rpx;
font-size: 30rpx;
}
}
.code {
color: #BBBBBB;
margin-left: 30rpx;
font-size: 30rpx;
&.active {
color: $themC
}
}
}
.loginBtn {
width: 100%;
height: 112rpx;
background: rgba(25,137,250,0.3);
border-radius: 16rpx;
text-align: center;
line-height: 112rpx;
font-size: 32rpx;
font-weight: 600;
color: #fff;
margin-top: 100rpx;
&.active {
background: rgba(25,137,250,1);
}
}
}
}
</style>