| | |
|---|
| | | <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 @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>
|
|---|
| | | <script> |
|---|
| | | import {isPhone} from '../../static/validator.js'; |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return {
|
|---|
| | | reqCode: false,
|
|---|
| | | timer: null,
|
|---|
| | | countdown: 60,
|
|---|
| | | codeMsg: '获取验证码',
|
|---|
| | | return { |
|---|
| | | reqCode: false, |
|---|
| | | timer: null, |
|---|
| | | countdown: 60, |
|---|
| | | codeMsg: '获取验证码', |
|---|
| | | clientid: '', |
|---|
| | | loginInfo:{
|
|---|
| | | phone:'',
|
|---|
| | | code: ''
|
|---|
| | | 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:'登录失败,请稍后重试'
|
|---|
| | | })
|
|---|
| | | })
|
|---|
| | | }
|
|---|
| | | 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;
|
|---|
| | | }
|
|---|
| | | 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> |
|---|
