<template>
|
<view class="content">
|
<form @submit="login">
|
<view class="uni-form-item form-item">
|
<view class="container phone">
|
<text class="area-code">+86</text>
|
<input class="uni-input" v-model="loginInfo.phone" name="phone" placeholder="请输入手机号" placeholder-class="holderClass"/>
|
</view>
|
</view>
|
<view class="uni-form-item form-item">
|
<view class="container code">
|
<input class="uni-input" v-model="loginInfo.code" name="code" placeholder="请输入短信验证码" placeholder-class="holderClass"/>
|
<text class="code-act" @click="getCode">{{codeMsg}}</text>
|
</view>
|
</view>
|
<view class="uni-btn-v">
|
<button class="submit" form-type="submit" type="default" :disabled="!loginInfo.phone||!loginInfo.code">登 录</button>
|
</view>
|
</form>
|
</view>
|
</template>
|
|
<script>
|
import {isPhone} from '../../static/validator.js';
|
export default {
|
data() {
|
return {
|
reqCode: false,
|
timer: null,
|
countdown: 60,
|
codeMsg: '获取验证码',
|
clientid: '',
|
loginInfo:{
|
phone:'',
|
code: ''
|
}
|
}
|
},
|
methods: {
|
getCode(){
|
if(isPhone(this.loginInfo.phone)){
|
|
if(!this.reqCode){
|
this.reqCode = true;
|
// this.timer = setInterval(()=>{
|
// if(this.countdown>0 && this.countdown<=60){
|
// this.countdown--;
|
// this.codeMsg = `${this.countdown}s后可重新获取`;
|
// }else{
|
// clearInterval(this.timer);
|
// this.timer = null;
|
// this.countdown = 60;
|
// this.codeMsg = '获取验证码';
|
// }
|
// },1000);
|
let _this = this;
|
this.$api.syncRequest({
|
url: '/basic/api/code/new?phoneNum='+this.loginInfo.phone,
|
//url: 'http://bsic.asuscomm.com:7006/basic/api/code/new?phoneNum='+this.loginInfo.phone
|
}).then(res=>{
|
|
if(res.data.status==200){
|
if(!_this.timer){
|
if(_this.countdown>0 && _this.countdown<=60){
|
_this.countdown--;
|
_this.codeMsg = `${_this.countdown}s后可重新获取`;
|
}else{
|
clearInterval(_this.timer);
|
_this.timer = null;
|
_this.countdown = 60;
|
_this.codeMsg = '获取验证码';
|
}
|
_this.timer = setInterval(()=>{
|
if(_this.countdown>0 && _this.countdown<=60){
|
_this.countdown--;
|
_this.codeMsg = `${_this.countdown}s后可重新获取`;
|
}else{
|
clearInterval(_this.timer);
|
_this.timer = null;
|
_this.countdown = 60;
|
_this.codeMsg = '获取验证码';
|
_this.reqCode = false;
|
}
|
},1000);
|
}
|
|
}else{
|
uni.showToast({
|
icon: "none",
|
title: res.data.msg
|
});
|
_this.reqCode = false
|
}
|
|
console.log(res)
|
}).catch(e=>{
|
|
uni.showToast({
|
icon:'none',
|
title:res.msg
|
});
|
_this.reqCode = false
|
})
|
}else{
|
return;
|
}
|
}
|
},
|
login(){
|
if(isPhone(this.loginInfo.phone)){
|
if(!this.loginInfo.code.trim()){
|
uni.showToast({
|
icon:'none',
|
title:'请输入正确的验证码'
|
});
|
return;
|
}
|
//#ifdef APP-PLUS
|
// var info = plus.push.getClientInfo();
|
// console.log(JSON.stringify(info));
|
/* 5+ push 消息推送 ps:使用:H5+的方式监听，实现推送*/
|
this.clientid = plus.push.getClientInfo().clientid
|
if (!this.clientid) { //如果获取的cid为空，说明客户端向推送服务器注册还未完成，可以使用setTimeout延时重试。
|
setTimeout(() => {
|
this.clientid = plus.push.getClientInfo().clientid
|
}, 4000)
|
}
|
console.log(this.clientid)
|
plus.push.addEventListener("click", function(msg) {
|
console.log("click:" + JSON.stringify(msg));
|
console.log(msg.payload);
|
console.log(JSON.stringify(msg));
|
//这里可以写跳转业务代码
|
}, false);
|
// 监听在线消息事件
|
plus.push.addEventListener("receive", function(msg) {
|
// plus.ui.alert(2);
|
//这里可以写跳转业务代码
|
console.log("recevice:" + JSON.stringify(msg))
|
}, false);
|
|
//#endif
|
this.$api.syncRequest({
|
url:`/basic/api/user/login?phoneNum=${this.loginInfo.phone}&code=${this.loginInfo.code}&cid=${this.clientid}`
|
}).then(res=>{
|
console.log(res);
|
if(res.data.success){
|
//localStorage.setItem('user',JSON.stringify(res.data.data));
|
uni.setStorageSync('user',JSON.stringify(res.data.data));
|
uni.showToast({
|
title:'登录成功!'
|
});
|
uni.navigateTo({
|
url:'/pages/mine/mine'
|
});
|
}else{
|
uni.showModal({
|
title: res.data.data
|
})
|
}
|
}).catch(err=>{
|
console.log(err)
|
uni.showModal({
|
title:'登录失败,请稍后重试'
|
})
|
})
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
uni-page-wrapper,uni-page-body{
|
height: 100%;
|
}
|
/deep/uni-input{
|
font-size: 18px!important;
|
height: 100rpx;
|
line-height: 100rpx!important;
|
}
|
uni-button[disabled]{
|
opacity: .5;
|
}
|
.content{
|
box-sizing: border-box;
|
height: 100%;
|
background-color: #fbfbfb;
|
padding-top: 20rpx;
|
.form-item{
|
background-color: #fff;
|
padding: 0 30rpx;
|
.container{
|
height: 100rpx;
|
line-height: 100rpx;
|
display: flex;
|
align-items: center;
|
&.phone{
|
border-bottom: 1px solid #ddd;
|
padding-left: 130rpx;
|
background: url(../../static/mine/u57.png) no-repeat 30rpx center;
|
background-size: 80rpx;
|
.area-code{
|
position: relative;
|
padding-left: 20rpx;
|
margin-right: 30rpx;
|
&:before{
|
content: "";
|
position: absolute;
|
width: 1rpx;
|
top: 20rpx;
|
background-color: #ddd;
|
left: 0;
|
height: 60rpx;
|
}
|
}
|
}
|
&.code{
|
padding-left: 37rpx;
|
uni-input{
|
width: 350rpx;
|
}
|
.code-act{
|
height: 60rpx;
|
line-height: 60rpx;
|
width: 280rpx;
|
text-align: center;
|
color: #0bbf71;
|
border-radius: 5px;
|
font-size: 32rpx;
|
box-shadow: 0 0 6px 5px #fafafa;
|
position: relative;
|
&:before{
|
content: "";
|
position: absolute;
|
width: 1rpx;
|
top: 0;
|
background-color: #ddd;
|
left: -30rpx;
|
height: 60rpx;
|
|
}
|
}
|
}
|
.holderClass{
|
color: #ccc;
|
font-size: 16px;
|
}
|
}
|
}
|
.submit{
|
width: 90%;
|
margin-top: 120rpx;
|
background-color: #0bbf71;
|
color: #fff;
|
}
|
}
|
</style>
|
