{extend name="mobile@public/common"/}
{block name="head"}
<style>
  body {
    background-color: #fff;
  }

  .aui-bar-nav a {
    color: #fff;
  }

  .login-third {
    margin-top: 3rem;
  }

  .login-img {
    margin-top: 1em;
    height: 5em;
    -moz-border-radius: 5em;
    /*-webkit-border-radius: 5em;
    border-radius: 5em;*/
  }

  .aui-list-item-label-icon {
    padding-right: 0.1rem;
    max-width: 100%;
  }

  .aui-list .aui-list-item-label-icon {
    width: auto;
    padding-right: 0rem;
  }

  img {
    display: inline;
  }

  .aui-list .aui-list-item {
    padding-left: 0;
  }
</style>
{/block}
{block name="header"}
<header class="aui-bar aui-bar-nav" id="aui-header">
  <a class="aui-btn aui-pull-left" href="javascript:history.go(-1);">
    <span class="aui-iconfont aui-icon-left"></span>
  </a>
  <div class="aui-title">登录</div>
  <a class="aui-pull-right">
    <span class="aui-iconfont aui-icon-question"></span>
  </a>
</header>
{/block}
{block name="body"}
<section class="aui-content aui-margin-t-15 " style="text-align: center; margin-bottom: 2rem;">
  <img class="login-img" src="__IMG__/ren.png" style="display:initial;">
</section>
<section class="aui-content aui-margin-t-15 login-box">
  <ul class="aui-list aui-form-list">
    <li class="aui-list-item" style="border-top:0 solid #eee;">
      <div class="aui-list-item-inner">
        <div class="aui-list-item-label" style="width:5rem;font-weight:800;">&emsp;账&emsp;号：</div>
        <div class="aui-list-item-input" style="width:10rem;">
          <input type="number" v-model="mobile" placeholder="输入注册手机号">
        </div>
        <div class="aui-list-item-label-icon" style="width:5rem;">
        </div>
      </div>
    </li>
    <li class="aui-list-item">
      <div class="aui-list-item-inner">
        <div class="aui-list-item-label" style="width:5rem;font-weight:800;">&emsp;密&emsp;码：</div>
        <div class="aui-list-item-input" style="width:10rem;">
          <input type="password" v-model="password" placeholder="账户密码">
        </div>

        <a class="aui-list-item-label-icon" style="width:5rem;font-size:0.6rem"
           href="{:url('mobile/Foreign/forget')}">
          忘记密码?
        </a>
      </div>
    </li>
  </ul>
</section>
<section class="aui-content-padded aui-margin-t-15">
  <div class="aui-btn aui-btn-block aui-btn-info aui-btn-sm">登录</div>
</section>

<div class="aui-font-size-16" style="margin-top: 1.2rem;">
  <div class="aui-info-item" style="text-align:center;display: block;">还没有账号，
    <a style="display: -webkit-inline-box;font-weight:800;" href="{:url('mobile/Foreign/register')}">免费注册</a>
  </div>
</div>
<section class="aui-content-padded login-third">
  <p class="aui-font-size-12 aui-text-center aui-margin-b-15">第三方登录</p>
  <div class="aui-grid" style="background: none;">
    <div class="aui-row">
      <a class="aui-col-xs-4 aui-invisible" style="text-align: right;padding-right:0.6rem;">
        <img src="__IMG__/share/iconfont-qq.png" style="padding: 0.1rem;" width="50">
      </a>
      <a class="aui-col-xs-4" style="text-align: center;" href="{:url('mobile/Foreign/wxLogin')}">
        <img src="__IMG__/share/iconfont-weixin.png" width="50">
      </a>
      <a class="aui-col-xs-4  aui-invisible" style="text-align: left;">
        <img src="__IMG__/share/iconfont-weibo.png" style="padding: 0.1rem;margin-left:0.5rem" width="50">
      </a>
    </div>
  </div>
</section>

{/block}
{block name="script"}

<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>

<script type="text/javascript">

  window.callback = function (res) {
    console.log(res)
    if (res.ret === 0) {
      login(res);
    }
  }
  var register_dom = new Vue({
    el: '.login-box',
    data: {
      password: "123123",
      mobile: '16637210086',
    },
    methods: {},
    //更新
    updated: function () {
      console.log();
    }
  });

  // 密码框更改
  function changePwd() {
    if ('password' == $api.attr($api.dom("#password"), 'type')) {
      $api.attr($api.dom("#password"), 'type', 'text');
    } else {
      $api.attr($api.dom("#password"), 'type', 'password');
    }
  }

  function login() {
    if (!register_dom.mobile) {
      toast.fail({
        title: '请填写手机号',
        duration: 2000
      });
      return;
    }
    res['account'] = register_dom.mobile;
    res['password'] = register_dom.password;
    toast.loading({
      title: "登录请求中",
      duration: 2000
    }, function (ret) {
      console.log(ret);
    });
    $.ajax({
      type: 'post',
      url: "{:url('ucenter/Foreign/login',['module'=>'mobile'])}",
      data: res,
      dataType: 'json',
      timeout: 3000,
      success: function (data) {
        toast.hide();
        if (0 == data.code) {
          location.href = "{:url('mobile/User/index')}";
        } else {
          toast.fail({
            title: data.message,
            duration: 2000
          });
        }
      },
      error: function (xhr, type) {
        toast.fail({
          title: type,
          duration: 2000
        });
        toast.hide();
      }
    })
  };


</script>

{/block}
{block name="footer"}
{/block}