<!--pages/login/login.wxml-->
<import src="../../template/count-down/count-down.wxml"/>
<view class="login-panel">

    <view>
        <view class="title">请输入手机号码</view>
        <input class="input" type="number" value="{{phone}}" placeholder="手机号码" bindinput="updatePhone"/>
    </view>

    <view>
        <view class="title">请填入获取到的验证码</view>
        <view class="code-box">
            <input class="input" type="text" value="{{code}}" placeholder="短信验证码" bindinput="updateCode"/>
            <template is="countDown" data="{{disabled: disabled, plain: plain, text: text}}" />
        </view>
    </view>

    <button class="bind-btn" type="primary" hover-class="none" disabled="{{isNotSubmit}}" bindtap="doLogin">登录</button>

</view>

/* pages/login/login.wxss */
page {
  display: block;
  min-height: 100%;
  background-color: #f5f5f5;
}
.login-panel .title{
    font-size: 24rpx;
    color: #222;
    margin: 30rpx 0 20rpx 20rpx;
}
.login-panel .input{
    border: 1px #ddd solid;
    border-left: 0;
    border-right: 0;
    height: 88rpx;
    background-color: #fff;
    padding-left: 20rpx;
    font-size: 28rpx;
}
.login-panel .code-box{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    height: 88rpx;
    border-bottom: 1px #ddd solid;
}
.login-panel .code-box input{
    border: 0;
    flex: 1;
}
.login-panel .code-box button{
    border: 1px #e61773 solid;
    color: #e61773;
    border-radius: 99px;
    background-color: transparent!important;
    margin: 15rpx 20rpx 15rpx 0;
    font-size: 22rpx;
    height: 58rpx;
    width: 220rpx;
}
.login-panel .code-box button[disabled]{
    color: #ccc;
    border: 1px #ccc solid;
}
.bind-btn{
    margin-top: 50rpx;
}

// pages/login/login.js
var util = require('../../utils/util.js');
var ports = require('../../utils/ports.js');
//引入倒计时组件
var CountDown = require('../../template/count-down/count-down.js');
var appInstance = getApp();
Page({
  data:{
    phone: '',
    code: '',
    isNotSubmit: true
  },
  updatePhone: function(e){
      this.setData({
        phone: e.detail.value
      });
  },
  updateCode: function(e){
      this.setData({
        code: e.detail.value
      });
  },
  checkPhone: function(phone){
      if(!/^1[34578]d{9}$/.test(phone) || phone === ''){
        return false;
      }
      return true;
  },
  checkCode: function(code) {
      if(!/[0-9]{6}$/.test(code)) {
          return false;
      }
      return true;
  },
  _getCode: function(){
      if(!this.checkPhone(this.data.phone)){
        return wx.showToast({
          title: '手机号格式不正确或为空',
          duration: 1000
        });
      }
      var _this = this;     
      util.wxRequest({
          method: 'POST',
          url: ports.sendPhoneMessage,
          header:{'content-type': 'application/x-www-form-urlencoded'},
          data: {
              phone: _this.data.phone
          }
      }).then((res) => {
        if(res.status === 0){
            wx.showToast({
              title: '请查收手机验证码',
              duration: 1000
            });
            _this.setData({
                isNotSubmit: false
            });
            _this.countDown.run(60);
        }else{
            return wx.showToast({
              title: res.msg,
              duration: 1000
            });
        }
      }).catch((err) => {
          return wx.showToast({
            title: err,
            duration: 1000
          });
      });
  },
  doLogin: function() {
      var _this = this;   
      if(!this.checkCode(this.data.code)){
        return wx.showToast({
          title: '验证码错误',
          duration: 1000
        });
      }
      util.wxRequest({
          url: ports.doLogin,
          method: 'POST',
          header:{'content-type': 'application/x-www-form-urlencoded'},
          data: {
              phone: _this.data.phone,
              verifycode: _this.data.code
          }
      }).then(res => {
          if(res.status === 0) {
              return util.updateToken().then((res) => {
                  wx.navigateBack({
                    delta: 1
                  });
              })
          }else {
            return wx.showToast({
              title: res.msg,
              duration: 1000
            });
          }
      }).catch(err => {
          console.log(err)
      })
  },

  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    //初始化倒计时组件
    this.countDown = new CountDown(this);
    this.countDown.setDisabledValue(false);
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})