登录页面图片验证处理
This commit is contained in:
@@ -11,10 +11,10 @@
|
||||
</view>
|
||||
<view class="auth-input auth-code">
|
||||
<input v-model="code" type="number" maxlength="4" placeholder="输入验证码">
|
||||
<button :disabled="getSms" size="mini" @click="getPhoneCode()">{{sendCode}}</button>
|
||||
<button :disabled="getSms" size="mini" @click="getCaptcha">{{sendCode}}</button>
|
||||
</view>
|
||||
<view class="auth-input" v-if="isShowParent">
|
||||
<input v-model="parentId" placeholder="输入邀请码,选填">
|
||||
<input v-model="parentId" placeholder="输入邀请码">
|
||||
</view>
|
||||
<view class="auth-button">
|
||||
<button @click="login('code')">登录</button>
|
||||
@@ -24,9 +24,18 @@
|
||||
hover-class="none" url="/pages/vip/agreement?id=4">隐私政策</navigator>
|
||||
</view>
|
||||
<view class="auth-other" v-if="isKeyAuth">
|
||||
|
||||
<button @click="login('Akey')">使用本机号码一键登录</button>
|
||||
</view>
|
||||
</view>
|
||||
<u-popup :show="showCaptchaCode" :round='10' mode='center' @close='close' @open="open">
|
||||
<view class="showImgCode">
|
||||
<view class="title"> 图片验证码 </view>
|
||||
<image class="cover" @click="getCaptcha()" :src="captchaImg" mode="widthFix" />
|
||||
<input class="input" v-model="captchaCode" maxlength="6" placeholder="验证码" />
|
||||
<view class="btn" @click="sureImgCode"> 确认验证码 </view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -34,7 +43,8 @@
|
||||
import {
|
||||
smsAuth,
|
||||
getInvitationSms,
|
||||
keyAuth
|
||||
keyAuth,
|
||||
captcha,
|
||||
} from '@/apis/interfaces/auth.js'
|
||||
export default {
|
||||
data() {
|
||||
@@ -46,7 +56,11 @@
|
||||
sendCode: '获取验证码',
|
||||
isShowParent: false,
|
||||
isKeyAuth: false,
|
||||
shareId: ''
|
||||
shareId: '',
|
||||
captchaImg: '',
|
||||
captchaKey: '',
|
||||
captchaCode: '',
|
||||
showCaptchaCode: false, // 是否显示图片验证弹窗
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
@@ -57,7 +71,6 @@
|
||||
this.parentId = args.split('invitation')[1]
|
||||
}
|
||||
}, 100);
|
||||
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
@@ -74,8 +87,65 @@
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
|
||||
},
|
||||
close() {
|
||||
this.showCaptchaCode = false
|
||||
},
|
||||
|
||||
// 弹窗确认验证码
|
||||
sureImgCode() {
|
||||
if (this.captchaCode != '' && this.captchaCode.length == 4) {
|
||||
this.showCaptchaCode = false;
|
||||
this.getPhoneCode();
|
||||
return;
|
||||
}
|
||||
uni.showToast({
|
||||
title: '请核对图片验证码',
|
||||
icon: 'none',
|
||||
mask: true,
|
||||
duration: 2000
|
||||
})
|
||||
},
|
||||
|
||||
// 获取图片验证码
|
||||
getCaptcha() {
|
||||
if (this.phone.length != 11) {
|
||||
uni.showToast({
|
||||
title: '请核对手机号码',
|
||||
icon: 'none',
|
||||
mask: true,
|
||||
duration: 2000,
|
||||
})
|
||||
return;
|
||||
}
|
||||
this.showCaptchaCode = true;
|
||||
captcha().then(res => {
|
||||
this.captchaKey = res.key;
|
||||
this.captchaImg = res.img;
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: 'none',
|
||||
mask: true,
|
||||
duration: 2000,
|
||||
})
|
||||
})
|
||||
},
|
||||
// 获取验证码
|
||||
|
||||
getPhoneCode() {
|
||||
if (this.phone.length != 11) {
|
||||
uni.showToast({
|
||||
title: '请核对手机号码',
|
||||
icon: 'none',
|
||||
mask: true,
|
||||
duration: 2000,
|
||||
})
|
||||
return;
|
||||
}
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
@@ -84,6 +154,8 @@
|
||||
let smsTime = 60;
|
||||
getInvitationSms({
|
||||
mobileNo: this.phone,
|
||||
captcha_key: this.captchaKey,
|
||||
captcha: this.captchaCode,
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: res.message,
|
||||
@@ -92,6 +164,8 @@
|
||||
this.isShowParent = res.is_show_parent
|
||||
this.getSms = true;
|
||||
this.sendCode = smsTime + 's后重新获取';
|
||||
this.captchaKey = ''
|
||||
this.captchaCode = ''
|
||||
outTime = setInterval(() => {
|
||||
if (smsTime <= 1) {
|
||||
this.getSms = false;
|
||||
@@ -103,6 +177,9 @@
|
||||
smsTime -= 1;
|
||||
}, 1000);
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
this.captchaCode = ''
|
||||
this.captchaKey = ''
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none",
|
||||
@@ -115,20 +192,23 @@
|
||||
uni.showLoading({
|
||||
title: '登录中'
|
||||
})
|
||||
smsAuth({
|
||||
let data = {
|
||||
mobileNo: this.phone,
|
||||
code: this.code,
|
||||
parent_id: this.parentId
|
||||
}).then((res) => {
|
||||
}
|
||||
console.log(data);
|
||||
smsAuth(data).then((res) => {
|
||||
this.setAuthToken(res.token_type + ' ' + res.access_token, res.is_new)
|
||||
uni.hideLoading()
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none",
|
||||
});
|
||||
});
|
||||
return
|
||||
return;
|
||||
}
|
||||
if (type === 'Akey') {
|
||||
this.onKeyLogin()
|
||||
@@ -199,8 +279,8 @@
|
||||
uni.setStorageSync('isnew', 1)
|
||||
if (this.shareId != '' && this.shareId != undefined) {
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
plus.runtime.arguments = null;
|
||||
uni.hideLoading()
|
||||
plus.runtime.arguments = null;
|
||||
plus.runtime.arguments = '';
|
||||
uni.reLaunch({
|
||||
url: '/pages/group-book/success/success?access=1&id=' + this.shareId
|
||||
@@ -245,6 +325,28 @@
|
||||
color: white;
|
||||
}
|
||||
|
||||
.auth-img-code {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-radius: 50rpx;
|
||||
margin-top: 40rpx;
|
||||
background: white;
|
||||
height: 100rpx;
|
||||
|
||||
input {
|
||||
height: 100rpx;
|
||||
font-size: 32rpx;
|
||||
padding: 0 50rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 180rpx;
|
||||
margin-right: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-input {
|
||||
background: white;
|
||||
height: 100rpx;
|
||||
@@ -330,5 +432,43 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.showImgCode {
|
||||
width: 600rpx;
|
||||
padding: 50rpx 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 100%;
|
||||
padding: 50rpx 0;
|
||||
height: 150rpx;
|
||||
}
|
||||
|
||||
.input {
|
||||
border-radius: 6rpx;
|
||||
border: solid 1rpx #cacaca;
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: #34ce98;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
border-radius: 10rpx;
|
||||
margin-top: 30rpx;
|
||||
text-align: center;
|
||||
padding: 30rpx 0;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user