<view class="tab">
  <view class="{{tab==1?'tab-on':'tab-out'}}" data-index="1" catchtap="changeTab">账号密码登录</view>
  <view class="{{tab==2?'tab-on':'tab-out'}}" data-index="2" catchtap="changeTab">动态密码登录</view>
</view>
<view class="tab-layer"></view>
<view class="fm phone">
  <text class="label">+86</text>
  <input type="number" maxlength="11" placeholder="请输入11位手机号" bindinput="checkPhone" />
</view>
<view wx:if="{{tab==1}}">
  <view class="fm code">
    <input type="text" password  placeholder="请输入登录密码" bindinput="changepwd" value="{{pwd}}" />  
  </view>
</view>
<view wx:if="{{tab==2}}">
  <view class="fm code">
    <input type="text" maxlength="8" placeholder="请输入手机验证码" bindinput="checkCode" />
    <view class="label">
      <view wx:if="{{btnStatus}}" bindtap="sendCode" class="{{phoneOk?'btn-ok':'btn-dis'}}">发送验证码</view>
      <view wx:if="{{!btnStatus}}" class="btn-dis">
        <text>{{sec}}</text>秒后重新发送</view>
    </view>
  </view>
</view>

<view class="sub {{phoneOk&&codeOk?'sub-ok':'sub-dis'}}" bindtap="login">登 录</view>

page{background-color: #f3f3f3;padding: 55px 0 0;}
.fm{width: 700rpx;display: flex; border: 1rpx solid #ddd;background-color: #fff; margin: 20rpx auto 0;border-radius:3px;height:50px;line-height: 50px;}
.fm input{flex: 1;padding: 0 10px; height: 100%;}

.phone .label{width: 100rpx; border-right: 1rpx solid #eee;text-align: center;}
.code .label{width: 300rpx; border-left: 1rpx solid #eee;text-align: center;}

.btn-ok{background-color:#ff6a00;color: #fff;}
.btn-dis{background-color:#ddd;color: #333;}
.btn-dis text{color:#ff6a00; padding: 0 5rpx; }


.sub{width: 700rpx;height: 50px;line-height: 50px; text-align: center;border-radius:3px; margin:30rpx auto; }
.sub-ok{background-color:#576b95;color: #fff;}
.sub-dis{background-color: #d0d0d0;color: #333;}

.tab{width: 720rpx; position: fixed;z-index: 100; left: 14rpx; top:10rpx;border:1px solid #576b95;height: 40px; line-height:40px;border-radius: 5px;display: flex;font-size: 13pt;}
.tab-layer{width: 750rpx;height: 50px; background: #fff;opacity: 0.9;left: 0;top: 0; position: fixed;z-index: 99; }
.tab .tab-on{background-color: #576b95;text-align: center; color: #fff;flex: 1;}
.tab .tab-out{text-align: center;flex: 1;}

var base = getApp();
Page({
    data: {
        tab: 1,
        btnStatus: true,//倒计时已结束
        sec: 0,
        phone: "",
        phoneOk: false,
        code: "",
        codeOk: false,
        pwd: ""

    },
    key: "",
    onLoad: function () {
        var _this = this;
        // wx.request({
        //     url: base.path.www + 'control/messageCodeNew.ashx?v=' + Math.random(),
        //     success: function (res) {
        //         _this.key = res.data;
        //     },
        // })
    },
    checkPhone: function (e) {
        var v = e.detail.value;
        if (v && v.length == 11) {
            this.setData({
                phone: v,
                phoneOk: true
            });
        } else {
            this.setData({
                phone: "",
                phoneOk: false
            });

        }
    },
    checkCode: function (e) {
        var v = e.detail.value;
        if (v && v.length > 2) {
            this.setData({
                code: v,
                codeOk: true
            });
        } else {
            this.setData({
                code: "",
                codeOk: false
            });
        }
    },
    sendCode: function () {
        var _this = this;
        // if (this.key) {
        if (this.data.phoneOk) {
            this.setData({
                sec: 90,
                btnStatus: false
            });
            var tm = setInterval(function () {
                if (_this.data.sec > 0) {
                    _this.setData({ sec: _this.data.sec - 1 });
                    if (_this.data.sec == 0) {
                        _this.setData({ btnStatus: true });
                        clearInterval(tm);
                    }
                }
            }, 1000);
            base.get({ m: "SendPhoneCode", c: "User", phone: this.data.phone, ImageCode: this.key }, function (res) {
                var data = res.data;
                if (data.Status == "ok") {
                    base.toast({ tilte: "已发送", icon: "success", duration: 2000 });
                }
            })
        }
        //  }
    },
    changeTab: function (e) {
        var d = e.currentTarget.dataset.index;
        this.setData({ tab: d });
    },
    changepwd: function (e) {
        this.setData({
            pwd: e.detail.value
        });
    },
    login: function () {
        //   if (this.key) {
        var flag = true;
        var err = "";
        if (this.data.phoneOk) {
            if (this.data.tab == 1) {
                if (!this.data.pwd) {
                    flag = false;
                    err = "请输入密码！";
                }
            }
            else {
                if (!this.data.code) {
                    flag = false;
                    err = "请输入手机验证码";
                }

            }
            if (flag) {
                base.post({ c: "User", m: "Login", phone: this.data.phone, pwd: this.data.pwd, code: this.data.code, types: this.data.tab }, function (res) {
                    var dt = res.data;
                    if (dt.Status == "ok") {
                        base.user.userid = dt.Tag.Uid;
                        base.user.sessionid = dt.Tag.SessionId;
                        base.user.jzb = dt.Tag.Money;
                        base.user.exp = dt.Tag.Exp;
                        base.user.phone = dt.Tag.Phone;
                        base.user.levels = dt.Tag.Levels;
                        base.user.headimg = dt.Tag.HeadImgPath;
                        var objuser = {};
                        objuser.userid = dt.Tag.Uid;
                        objuser.sessionid = dt.Tag.SessionId;
                        objuser.jzb = dt.Tag.Money;
                        objuser.exp = dt.Tag.Exp;
                        objuser.phone = dt.Tag.Phone;
                        objuser.levels = dt.Tag.Levels;
                        objuser.headimg = dt.Tag.HeadImgPath;
                        base.user.setCache(objuser);
                        wx.switchTab({
                            url: '../user/user'
                        })
                    } else {
                        base.modal({ title: dt.Msg })
                    }
                })
            } else {
                base.modal({ title: err })
            }
        }
    }

});