本項目基于騰訊外包架構（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' => '登入成功'];
}
完工！