<template>
|
<view class="content">
|
<view class="h4">欢迎使用</view>
|
|
<view>
|
<view class="form-row" >
|
<view class="form-prefix-text">+86</view> <input border="none" type="text" v-model="phone" @input="formatPhone" placeholder="请输入您的手机号"
|
maxlength="13">
|
|
</input>
|
</view>
|
<view class="form-row" style="justify-content: space-between" >
|
<input maxlength="6" border="none" type="number" v-model="captcha" placeholder="请输入您的验证码"></input>
|
<view class="code" @click="getCode">{{ isCounting ? countText : '获取验证码' }}</view>
|
</view>
|
|
|
<view style="display: flex;flex-direction: row">
|
<uv-checkbox-group
|
v-model="protocolChecked">
|
<uv-checkbox size="14" :name="1">
|
<view style="display: flex;flex-direction: row;font-size: 24rpx">
|
我已阅读并同意<text class="protocol" @click="toProtocol(true)">《用户注册协议》</text>与<text @click="toProtocol(false)" class="protocol" >《用户隐私政策》</text>
|
</view>
|
</uv-checkbox>
|
</uv-checkbox-group>
|
|
</view>
|
<view class="form-action">
|
<button
|
@click="handleLogin"
|
type="primary"
|
class="login-button"
|
:class="valid ? 'valid' : null"
|
hover-class="login-button-hover"
|
:loading="loging"
|
:disabled="loging"
|
>
|
{{ loging ? '登录中' : '登录' }}
|
</button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script >
|
|
import {getVerifyCode, login} from '@/api/modules/user'
|
export default {
|
name: "index",
|
data() {
|
return {
|
phone: '',
|
captcha: '',
|
loging:false,
|
valid: false,
|
protocolChecked: [0],
|
isCounting: false,
|
countText: '',
|
customerZcyId: ''
|
}
|
},
|
created() {
|
|
uni.removeStorageSync('token');
|
uni.removeStorageSync('userId');
|
uni.removeStorageSync('userName');
|
uni.removeStorageSync('idCard');
|
uni.removeStorageSync('type');
|
uni.removeStorageSync('customerZcyId');
|
uni.removeStorageSync('customerId');
|
uni.removeStorageSync('customerBankcardId');
|
uni.removeStorageSync('isOcr');
|
},
|
methods:{
|
startSoterAuthenticationFingerPrint() {
|
uni.startSoterAuthentication({
|
requestAuthModes: ['fingerPrint'],
|
challenge: '686868',
|
authContent: '指纹解锁',
|
success() {
|
const platform = uni.getSystemInfoSync().platform
|
login({
|
phone:uni.getStorageSync('phone'),
|
verificationCode: '686868',
|
device: platform === 'android' ? 1 : platform === 'ios' ? 2 : 0,
|
loginSource: 0,
|
source: 1,
|
}).then(res => {
|
if (res.phone) {
|
this.LoginSuccess(res)
|
|
} else {
|
uni.showToast({
|
title: res.msg || '登录失败',
|
icon: 'none'
|
});
|
}
|
}).finally(() => {
|
this.loging = false
|
});
|
},
|
fail(err) {
|
console.log(err);
|
},
|
complete(res) {
|
console.log(res);
|
}
|
})
|
},
|
validate(silence) {
|
if(!this.protocolChecked[0]){
|
uni.showToast({
|
title: '请勾选注册协议和隐私政策',
|
icon: 'none',
|
})
|
return false
|
}
|
if (!this.phone || !this.phone.trim()) {
|
!silence &&
|
uni.showToast({
|
title: '请输入手机号',
|
icon: 'none',
|
})
|
return false
|
}
|
|
if (!silence) {
|
if (this.phone) {
|
this.phone = this.phone.replace(/\s/g, '')
|
}
|
|
if (this.phone.length < 11) {
|
if (this.phone.length > 3 && this.phone.length < 8) {
|
this.phone = this.phone.replace(/^(\d{3})/g, '$1 ')
|
} else if (this.phone.length >= 8) {
|
this.phone = this.phone.replace(/^(\d{3})(\d{4})/g, '$1 $2 ')
|
}
|
uni.showToast({
|
title: '手机号格式不对',
|
icon: 'none',
|
})
|
return false
|
}
|
}
|
|
if (
|
!this.captcha ||
|
!this.captcha.trim() ||
|
this.captcha.trim().length < 6
|
) {
|
!silence &&
|
uni.showToast({
|
title: '请输入6位验证码',
|
icon: 'none',
|
})
|
return false
|
}
|
|
return true
|
},
|
formatPhone(e) {
|
// 获取输入值并去除非数字字符
|
let inputVal = e.detail.value.replace(/\D/g, '');
|
// 截取前11位数字
|
let numbers = inputVal.substring(0, 11);
|
let formatted = '';
|
|
// 根据长度添加空格
|
if (numbers.length > 3) {
|
formatted += numbers.substr(0, 3) + ' ';
|
if (numbers.length > 7) {
|
formatted += numbers.substr(3, 4) + ' ' + numbers.substr(7, 4);
|
} else {
|
formatted += numbers.substr(3);
|
}
|
} else {
|
formatted = numbers;
|
}
|
|
// 更新绑定数据
|
this.phone = formatted;
|
},
|
getCode() {
|
if (!this.phone || this.phone.replace(/\s/g, '').length !== 11) {
|
uni.showToast({
|
title: 'dec机号',
|
icon: 'none'
|
});
|
return;
|
}
|
|
getVerifyCode({phone: this.phone.replace(/\s/g, '')}).then(res=>{
|
|
uni.showToast({
|
title: '验证码已发送',
|
icon: 'success'
|
});
|
|
// 设置倒计时功能
|
let count = 60;
|
const timer = setInterval(() => {
|
count--;
|
if (count <= 0) {
|
clearInterval(timer);
|
this.$set(this, 'isCounting', false);
|
} else {
|
this.$set(this, 'isCounting', true);
|
this.$set(this, 'countText', `${count}秒后重新获取`);
|
}
|
}, 1000);
|
|
})
|
},
|
handleLogin(){
|
if (this.phone) {
|
this.phone = this.phone.replace(/\s/g, '')
|
}
|
if (this.loging) {
|
return
|
}
|
if (this.validate()) {
|
this.loging = true
|
const platform = uni.getSystemInfoSync().platform
|
login({
|
phone: this.phone,
|
verificationCode: this.captcha,
|
device: platform === 'android' ? 1 : platform === 'ios' ? 2 : 0,
|
loginSource: 0,
|
source: 1,
|
}).then(res => {
|
if (res.phone) {
|
this.LoginSuccess(res)
|
|
} else {
|
uni.showToast({
|
title: res.msg || '登录失败',
|
icon: 'none'
|
});
|
}
|
}).finally(() => {
|
this.loging = false
|
});
|
}
|
},
|
LoginSuccess(res){
|
uni.showToast({
|
title: '登录成功',
|
icon: 'success'
|
});
|
uni.setStorageSync('token', res.token);
|
uni.setStorageSync('phone', res.phone);
|
uni.setStorageSync('userId', res.userId);
|
uni.setStorageSync('userName', res.userName);
|
uni.setStorageSync('idCard', res.idCard);
|
uni.setStorageSync('type', res.type);
|
uni.setStorageSync('customerZcyId', res.customerId || res.customerZcyId);
|
uni.setStorageSync('customerBankcardId', res.customerBankcardId);
|
uni.setStorageSync('isOcr', res.isOcr);
|
if(res.isOcr==1){
|
uni.reLaunch({
|
url: '/pages/loan/index'
|
});
|
} else {
|
uni.reLaunch({
|
url: '/pages/index/index'
|
});
|
}
|
|
},
|
|
toProtocol(flg){
|
if(flg){
|
let title = '用户注册协议';
|
let code = this.$Protocol.user;
|
uni.navigateTo({
|
url: `/pages/protocol/index?code=${code}&title=${title}`
|
});
|
return;
|
}
|
|
let title = '用户隐私政策';
|
let code =this.$Protocol.privacy;
|
uni.navigateTo({
|
url: `/pages/protocol/index?code=${code}&title=${title}`
|
});
|
|
|
}
|
|
},
|
watch:{
|
phone(val){
|
if(val.length >= 11 && this.captcha.length == 6){
|
this.valid = true
|
}else{
|
this.valid = false
|
}
|
},
|
captcha(val){
|
if(this.phone.length >= 11 && val.length == 6){
|
this.valid = true
|
}else{
|
this.valid = false
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.content {
|
|
min-height: 100vh;
|
background-color: #fff;
|
background-image: url(#{$iconHttps}/static/img/login/51dai/login-bg-1.png),
|
url(#{$iconHttps}/static/img/login/51dai/login-bg-2.png);
|
background-size: 100% auto;
|
background-position: top, bottom;
|
background-repeat: no-repeat;
|
padding: 30rpx;
|
.h4{
|
font-size: 28px;
|
font-weight: 600;
|
color: #252938;
|
line-height: 40px;
|
text-align: center;
|
padding-top: 200rpx;
|
margin-bottom: 40rpx;
|
}
|
.form-row{
|
background: #fff;
|
border: 2rpx solid #e7e9ed;
|
display: flex;flex-direction: row;border-radius: 50rpx;
|
padding: 26rpx 48rpx;
|
margin-bottom: 32rpx;
|
.form-prefix-text {
|
color: #252938;
|
font-size: 30rpx;
|
font-weight: bold;
|
padding-right: 36rpx;
|
border-right: 1rpx solid #e7e9ed;
|
margin-right: 36rpx;
|
}
|
.code{
|
color: #207ef5;
|
}
|
}
|
}
|
.login-button {
|
background-color: #ffffff;
|
height: 100rpx;
|
border-radius: 50px;
|
font-size: 34rpx;
|
font-weight: 500;
|
color: #ffffff;
|
line-height: 1;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
opacity: 0.5;
|
}
|
.login-button,
|
.login-button-hover {
|
background-image: url(#{$iconHttps}/static/img/login/newlogin/mligin.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
background-position: center;
|
}
|
|
.valid.login-button {
|
background-image: url(#{$iconHttps}/static/img/login/newlogin/ylogin.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
background-position: center;
|
}
|
.valid{
|
opacity: 1;
|
}
|
|
.valid.login-button-hover {
|
background: #3792fe;
|
}
|
.form-action{
|
margin-top: 116rpx;
|
}
|
.protocol{
|
font-size: 24rpx;color: #207ef5;
|
}
|
</style>
|
