<!-- 短信验证码登录页 -->
|
<template>
|
<view class="uni-content">
|
<view class="login-logo a">
|
<image :src="logo"></image>
|
</view>
|
<!-- 顶部文字 -->
|
<text class="title">请输入验证码</text>
|
<text class="tip">先输入图形验证码，再获取短信验证码</text>
|
<uni-forms>
|
<uni-id-pages-sms-form focusCaptchaInput v-model="code" type="login-by-sms" ref="smsCode" :phone="phone">
|
</uni-id-pages-sms-form>
|
<button class="uni-btn send-btn" type="primary" @click="submit">登录</button>
|
</uni-forms>
|
<uni-popup-captcha @confirm="submit" v-model="captcha" scene="login-by-sms" ref="popup"></uni-popup-captcha>
|
</view>
|
</template>
|
<script>
|
import mixin from '@/uni_modules/uni-id-pages/common/login-page.mixin.js';
|
export default {
|
mixins: [mixin],
|
data() {
|
return {
|
"code": "",
|
"phone": "",
|
"captcha": "",
|
"logo": "/static/logo.png"
|
}
|
},
|
computed: {
|
tipText() {
|
return '验证码已通过短信发送至' + this.phone;
|
},
|
},
|
onLoad({
|
phoneNumber
|
}) {
|
this.phone = phoneNumber;
|
},
|
onShow() {
|
// #ifdef H5
|
document.onkeydown = event => {
|
var e = event || window.event;
|
if (e && e.keyCode == 13) { //回车键的键值为13
|
this.submit()
|
}
|
};
|
// #endif
|
},
|
methods: {
|
submit() { //完成并提交
|
const uniIdCo = uniCloud.importObject("uni-id-co", {
|
errorOptions: {
|
type: 'toast'
|
}
|
})
|
if (this.code.length != 6) {
|
this.$refs.smsCode.focusSmsCodeInput = true
|
return uni.showToast({
|
title: '验证码不能为空',
|
icon: 'none',
|
duration: 3000
|
});
|
}
|
uniIdCo.loginBySms({
|
"mobile": this.phone,
|
"code": this.code,
|
"captcha": this.captcha
|
}).then(e => {
|
console.log(70,e)
|
var that = this;
|
uni.setStorage({
|
key: 'token',
|
data: e.newToken.token,
|
success: function () {
|
that.loginSuccess(e)
|
}
|
});
|
}).catch(e => {
|
if (e.errCode == 'uni-id-captcha-required') {
|
this.$refs.popup.open()
|
} else {
|
console.log(e.errMsg);
|
}
|
}).finally(e => {
|
this.captcha = ''
|
})
|
}
|
}
|
}
|
</script>
|
<style scoped lang="scss">
|
@import "@/uni_modules/uni-id-pages/common/login-page.scss";
|
|
.tip {
|
margin-top: -15px;
|
margin-bottom: 15px;
|
}
|
|
.popup-captcha {
|
/* #ifndef APP-NVUE */
|
display: flex;
|
/* #endif */
|
padding: 20rpx;
|
background-color: #FFF;
|
border-radius: 2px;
|
flex-direction: column;
|
position: relative;
|
}
|
|
.popup-captcha .title {
|
font-weight: normal;
|
padding: 0;
|
padding-bottom: 15px;
|
color: #666;
|
}
|
|
.popup-captcha .close {
|
position: absolute;
|
bottom: -40px;
|
margin-left: -13px;
|
left: 50%;
|
}
|
|
.popup-captcha .uni-btn {
|
margin: 0;
|
}
|
</style>
|
