本项目基于腾讯外包框架（wei框架）
地址：https://github.com/twinh/wei/tree/master/docs/zh-CN#wei
HTML页面：
【基于bootstrap前端框架】
头部：
<ul id="js-reset-tabs" class="nav tab-underline border-bottom">
<li class="active border-primary"><a class="text-active-primary" href="#tab-mobile" data-toggle="tab">账号登录</a></li>
<li class="border-primary"><a class="text-active-primary" href="#tab-email" data-toggle="tab">手机登录</a></li>
</ul>
下方两个div模块：
<div class="tab-content">
<div class="tab-pane fade in active" id="tab-user">
<form class="form" method="post" id="reset-password-form-by-user" action="<?= $url('users/login') ?>">
<div class="form-group">
<label for="email">
帐号
</label>
<input name="username" type="text" value="<?= $e->attr($req['username']) ?>" class="form-control"
placeholder="用户名/邮箱" required/>
</div>
<div class="form-group">
<label for="password">
密码
</label>
<input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"
data-rule-required="true">
</div>
<?php if (wei()->setting('user.enableLoginCaptcha')) : ?>
<div class="form-group">
<label for="captcha">
验证码
</label>
<div class="input-group">
<input type="text" class="form-control" id="captcha" name="captcha" placeholder="请输入验证码"
data-rule-required="true">
<span class="input-group-addon p-a-0">
<img class="js-captcha" src="<?= $url('captcha') ?>">
</span>
</div>
</div>
<?php endif ?>
<div class="form-group">
<div class="error-message text-danger text-center">
<?= $e($req['message']) ?>
</div>
</div>
<div class="form-group">
<div class="text-primary">
<a href="<?= $url('registration/forget') ?>">忘记密码</a>
<a style="float:right;" href="<?= $url('registration/editInsurance') ?>">食品安全责任险</a>
</div>
</div>
<div class="clearfix form-group m-t-md" style="margin-top: 1%!important;">
<button type="submit" class="btn btn-primary btn-block">账号登录</button>
<div id="phone-prompt" align="center" class="phone-prompt" style="color: red;width:100%;font-size:1em!important;" > 为了您更好的使用体验，请在电脑端登录:su1010.cn</div>
<?php if ($setting('admin.enableRegister')) : ?>
<div class="m-t text-center" style="margin-top: 1% !important;">
没有账号，点击<a href="<?= $url('registration/register') ?>">注册</a>
</div>
<?php endif ?>
</div>
</form>
</div>
<div class="tab-pane fade in" id="tab-mobile">
<form class="form" method="post" id="reset-password-form-by-mobile">
<div class="form-group">
<label for="mobile" class="control-label">
手机号码
<span class="text-warning">*</span>
</label>
<div class="col-control">
<input type="tel" class="js-mobile form-control" id="mobile" name="mobile" placeholder="请输入注册手机号码">
</div>
</div>
<div class="form-group" id="get-verify-code-group">
<label for="verify-code" class="control-label">
验证码
<span class="text-warning">*</span>
</label>
<div class="col-control">
<div class="input-group">
<input type="tel" class="form-control" id="verify-code" name="verifyCode" placeholder="请输入验证码">
<span class="input-group-btn border-left">
<button type="button" class="js-verify-code-send text-primary btn btn-default form-link"
id="get-verify-code">获取验证码
</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="text-primary">
<a href="<?= $url('registration/forget') ?>">忘记密码</a>
<a style="float:right;" href="<?= $url('registration/editInsurance') ?>">食品安全责任险</a>
</div>
</div>
<div class="clearfix form-group m-t-md" style="margin-top: 1%!important;">
<button type="submit" class="btn btn-primary btn-block">手机登录</button>
<div id="phone-prompt" align="center" class="phone-prompt" style="color: red;width:100%;font-size:1em!important;" > 为了您更好的使用体验，请在电脑端登录:su1010.cn</div>
<?php if ($setting('admin.enableRegister')) : ?>
<div class="m-t text-center" style="margin-top: 1% !important;">
没有账号，点击<a href="<?= $url('registration/register') ?>">注册</a>
</div>
<?php endif ?>
</div>
</form>
</div>
</div>
看到的效果：（可以直接复制粘贴滴）
1.
2.
这是HTML写出来的效果了，但是！！！
肯定没有那么简单的，如果要有这两个效果，得引入bootstrap文件了！
关于bootstrap的学习：李炎恢：http://study.163.com/course/courseLearn.htm?courseId=947005#/learn/video?lessonId=1122161&courseId=947005
引入：
bootstrap.min.css
jasny-bootstrap.min.css
bootstrap.min.js
jasny-bootstrap.min.js
jquery.min.js
js部分：
以我的实际项目出发：
关键引入： ‘plugins/verify-code/js/verify-code’ 【短信接口】
提交账号登录部分（不做详解）
var $form = $('#reset-password-form-by-user');
$form.ajaxForm({
dataType: 'json',
beforeSubmit: function (arr, $form) {
return $form.valid();
},
success: function (ret) {
if (ret.code === ) {
window.location = ($.req('next') === '' ? $.url('admin') : $.req('next'));
} else {
$('.error-message').html(ret.message);
if (typeof $captcha != 'undefined') {
$captcha.attr('src', src + '?t=' + new Date());
}
}
}
}).validate();
$form.find('input').keyup(function (e) {
if (e.which === ENTER_KEY) {
return;
}
$('.error-message').html('');
});
<?php if (wei()->setting('user.enableLoginCaptcha')) : ?>
var $captcha = $('.js-captcha');
$captcha.click(changeCaptcha);
var src = $captcha.attr('src');
function changeCaptcha() {
$captcha.attr('src', src + '?t=' + new Date());
}
<?php endif ?>
手机登录js部分：
直接绑定放松验证码部分，进行调用模块：
$('.js-verify-code-send').verifyCode({
url: '<?= $url->query('users/send-verify-code') ?>'
});
users下的send-verify-code模块：
/**
* 获取验证码
*/
public function sendVerifyCodeAction($req)
{
if (!$req['mobile']) {
return $this->err('请输入手机号码');
}
if(!wei()->isMobileCn($req['mobile'])){
return $this->err('请输入合法的手机号码');
}
//数据库去查找这个手机号码是否存在，进行判断，值不值得去发送验证码这一环节
$user = wei()->user()->find(['mobile' => $req['mobile']]);
if (!$user) {
return $this->err('该手机号码尚未注册，请重新输入');
}
//调用短信插件verifyCode中的send方法
$ret = wei()->verifyCode->send($req['mobile']);
//返回出相应的数据
return $this->ret($ret);
}
关于整个verifyCode模块的模板：
百度云盘中显示：
完整的模板（login->users->curuser->index）
http://pan.baidu.com/s/1kUO39I3
进行判断登录页面：
public function loginByMobile(User $user)
{
$this->loadRecordData($user);
$this->session['mobile'] = $user->toArray($this->sessionFields);
$this->session['user'] = $user->toArray($this->sessionFields);
wei()->event->trigger('userLogin', [$user]);
return ['code' => , 'message' => '登录成功'];
}
完工！