Commit f0f58ad75f7a7254e73700c773bfd65c0095f16c
1 parent
400b66a0
Exists in
master
app-wx(v0.1.0 build 3)
A 添加注册登录页面的前端逻辑
Showing
15 changed files
with
564 additions
and
41 deletions
Show diff stats
app-wx/config/params.php
app-wx/modules/user/controllers/DefaultController.php
| ... | ... | @@ -3,6 +3,7 @@ |
| 3 | 3 | namespace app\wx\modules\user\controllers; |
| 4 | 4 | |
| 5 | 5 | use common\helpers\ImageManager; |
| 6 | +use common\helpers\ImageUtils; | |
| 6 | 7 | use common\models\EngineerProfile; |
| 7 | 8 | use domain\toutiao\TtDefaultImageRepository; |
| 8 | 9 | use domain\toutiao\TtNewsImageRepository; |
| ... | ... | @@ -24,6 +25,4 @@ class DefaultController extends BaseController |
| 24 | 25 | { |
| 25 | 26 | return $this->render('index'); |
| 26 | 27 | } |
| 27 | - | |
| 28 | - | |
| 29 | 28 | } |
| 30 | 29 | \ No newline at end of file | ... | ... |
| ... | ... | @@ -0,0 +1,176 @@ |
| 1 | +<?php | |
| 2 | + | |
| 3 | +namespace app\wx\modules\user\controllers; | |
| 4 | + | |
| 5 | +use common\helpers\ImageManager; | |
| 6 | +use common\helpers\ImageUtils; | |
| 7 | +use common\helpers\Utils; | |
| 8 | +use common\models\EngineerProfile; | |
| 9 | +use domain\toutiao\TtDefaultImageRepository; | |
| 10 | +use domain\toutiao\TtNewsImageRepository; | |
| 11 | +use domain\toutiao\TtNewsRepository; | |
| 12 | +use domain\toutiao\TtType; | |
| 13 | +use Yii; | |
| 14 | +use stdClass; | |
| 15 | + | |
| 16 | +/** | |
| 17 | + * 注册和登录 控制器 | |
| 18 | + */ | |
| 19 | +class LoginController extends BaseController | |
| 20 | +{ | |
| 21 | + | |
| 22 | + /** | |
| 23 | + * 上传文件 | |
| 24 | + * @return string | |
| 25 | + */ | |
| 26 | + public function actionUploadFile() | |
| 27 | + { | |
| 28 | + $e = new stdClass(); | |
| 29 | + $e->success = false; | |
| 30 | + $e->message = 'ok'; | |
| 31 | + $userId = 0; | |
| 32 | + | |
| 33 | + if (empty($_FILES["file"])) { | |
| 34 | + $e->message = '文件为空'; | |
| 35 | + return $this->renderJson($e); | |
| 36 | + } | |
| 37 | + if (empty($_FILES["file"]['tmp_name'])) { | |
| 38 | + $e->message = '文件为空'; | |
| 39 | + return $this->renderJson($e); | |
| 40 | + } | |
| 41 | + $type = $_FILES["file"]["type"]; | |
| 42 | + $typeArr = explode('/', $type); | |
| 43 | + if ('image' !== $typeArr[0]) { | |
| 44 | + $e->message = '只能上传 png， jpg 等文件'; | |
| 45 | + return $this->renderJson($e); | |
| 46 | + } | |
| 47 | + | |
| 48 | + $dir = Yii::getAlias('@site') . "/tmp"; | |
| 49 | + $fileArr = explode('.', $_FILES["file"]['name']); | |
| 50 | + $tt = time(); | |
| 51 | + $filename = 'auto_'.$tt.md5($_FILES["file"]['name']).'.'.end($fileArr); | |
| 52 | + $minFileName = 'auto_'.$tt.md5($_FILES["file"]['name']).'_min'.'.'.end($fileArr); | |
| 53 | + $saveFilePath = $dir.'/'.$filename; | |
| 54 | + move_uploaded_file($_FILES["file"]['tmp_name'], $saveFilePath); | |
| 55 | + $tmpUrl = $tmpMinFile= $this->site->base_url.'/tmp/'.$filename; | |
| 56 | + $imgSource = $this->_imageCreateFromPath($saveFilePath); | |
| 57 | + if ($imgSource) { | |
| 58 | + ImageUtils::resizeImage($imgSource, 100, 100, $dir.'/'.$minFileName); | |
| 59 | + $tmpMinFile = $this->site->base_url.'/tmp/'.$minFileName; | |
| 60 | + } | |
| 61 | + | |
| 62 | + $e->success = true; | |
| 63 | + $e->tmpFile = $filename; | |
| 64 | + $e->tmpMinUrl = $tmpMinFile; | |
| 65 | + $e->tmpUrl = $tmpUrl; | |
| 66 | + $e->message = 'ok'; | |
| 67 | + | |
| 68 | + return $this->renderJson($e); | |
| 69 | + } | |
| 70 | + | |
| 71 | + /** | |
| 72 | + * @param $imgPath | |
| 73 | + * @return null|resource | |
| 74 | + */ | |
| 75 | + private function _imageCreateFromPath($imgPath) | |
| 76 | + { | |
| 77 | + list($width, $height, $type, $attr) = getimagesize($imgPath); | |
| 78 | + switch ($type) { | |
| 79 | + case 3: // png | |
| 80 | + return imagecreatefrompng($imgPath); | |
| 81 | + case 2: // jpeg | |
| 82 | + return imagecreatefromjpeg($imgPath); | |
| 83 | + default: | |
| 84 | + return null; | |
| 85 | + } | |
| 86 | + } | |
| 87 | + | |
| 88 | + /** | |
| 89 | + * @return string | |
| 90 | + */ | |
| 91 | + public function actionGetCode() | |
| 92 | + { | |
| 93 | + $e = new stdClass(); | |
| 94 | + $e->success = false; | |
| 95 | + $e->message = 'ok'; | |
| 96 | + $e->codeDuration = 70; | |
| 97 | + $action = $this->request->get('action'); | |
| 98 | + if ('login' == $action) { | |
| 99 | + | |
| 100 | + } else { | |
| 101 | + | |
| 102 | + } | |
| 103 | + | |
| 104 | + $e->success = true; | |
| 105 | + return $this->renderJson($e); | |
| 106 | + } | |
| 107 | + | |
| 108 | + /** | |
| 109 | + * 注册界面 | |
| 110 | + * @return string | |
| 111 | + */ | |
| 112 | + public function actionRegister() | |
| 113 | + { | |
| 114 | + $e = new stdClass(); | |
| 115 | + $e->success = false; | |
| 116 | + $e->message = 'ok'; | |
| 117 | + $name = $this->request->post('name'); | |
| 118 | + $mobile = $this->request->post('mobile'); | |
| 119 | + $code = $this->request->post('code'); | |
| 120 | + $img = $this->request->post('img'); | |
| 121 | + if (empty($name)) { | |
| 122 | + $e->message = '车厂名称必填'; | |
| 123 | + return $this->renderJson($e); | |
| 124 | + } | |
| 125 | + | |
| 126 | + if (!Utils::isPhone($mobile)) { | |
| 127 | + $e->message = '手机号码格式不对'; | |
| 128 | + return $this->renderJson($e); | |
| 129 | + } | |
| 130 | + | |
| 131 | + if (empty($code)) { | |
| 132 | + $e->message = '验证码必填'; | |
| 133 | + return $this->renderJson($e); | |
| 134 | + } | |
| 135 | + if (empty($img)) { | |
| 136 | + $e->message = '请上传营业执照'; | |
| 137 | + return $this->renderJson($e); | |
| 138 | + } | |
| 139 | + // 校验验证码 | |
| 140 | + // 检查车厂名称是否注册了 | |
| 141 | + // 检查手机号码是否注册了 | |
| 142 | + echo $name.'_'.$mobile.'_'.$code.'_'.$img; | |
| 143 | + $e->success = true; | |
| 144 | + | |
| 145 | + return $this->renderJson($e); | |
| 146 | + } | |
| 147 | + | |
| 148 | + public function actionLogin2() | |
| 149 | + { | |
| 150 | + $e = new stdClass(); | |
| 151 | + $e->success = false; | |
| 152 | + $e->message = 'ok'; | |
| 153 | + | |
| 154 | + $mobile = $this->request->post('mobile'); | |
| 155 | + $code = $this->request->post('code'); | |
| 156 | + | |
| 157 | + | |
| 158 | + if (!Utils::isPhone($mobile)) { | |
| 159 | + $e->message = '手机号码格式不对'; | |
| 160 | + return $this->renderJson($e); | |
| 161 | + } | |
| 162 | + | |
| 163 | + if (empty($code)) { | |
| 164 | + $e->message = '验证码必填'; | |
| 165 | + return $this->renderJson($e); | |
| 166 | + } | |
| 167 | + | |
| 168 | + // 校验验证码 | |
| 169 | + // 检查车厂名称是否注册了 | |
| 170 | + // 检查手机号码是否注册了 | |
| 171 | + echo $mobile.'_'.$code; | |
| 172 | + $e->success = true; | |
| 173 | + | |
| 174 | + return $this->renderJson($e); | |
| 175 | + } | |
| 176 | +} | |
| 0 | 177 | \ No newline at end of file | ... | ... |
app-wx/modules/user/views/default/index.php
| ... | ... | @@ -22,6 +22,7 @@ function img($file, $path = '/i/') |
| 22 | 22 | |
| 23 | 23 | <?=$this->render('pages/index-template', ['asset' => $asset])?> |
| 24 | 24 | <?=$this->render('pages/register-template', ['asset' => $asset])?> |
| 25 | +<?=$this->render('pages/login-template', ['asset' => $asset])?> | |
| 25 | 26 | |
| 26 | 27 | <script> |
| 27 | 28 | require.config({baseUrl: $site.assets_url + '/js/',urlArgs : "v=" + require.version}); | ... | ... |
app-wx/modules/user/views/default/pages/login-template.php
0 → 100644
| ... | ... | @@ -0,0 +1,73 @@ |
| 1 | +<?php | |
| 2 | + | |
| 3 | +use yii\helpers\Url; | |
| 4 | + | |
| 5 | +$baseUrl = Url::base(true); | |
| 6 | +?> | |
| 7 | +<style> | |
| 8 | + body,div,p,span,input{padding: 0;margin: 0} | |
| 9 | + input{-webkit-appearance: none;} | |
| 10 | + #login{} | |
| 11 | + #login:after{content:'';bottom:0;height:7rem;width: 7rem;display:block;position: absolute; | |
| 12 | + z-index: -1;background-image: url('<?=$baseUrl?>/i/login-corner.png');background-repeat: no-repeat;background-size: 100% auto } | |
| 13 | + #login .head-wrapper{display:block;padding: 0;box-sizing: border-box;} | |
| 14 | + #login .input-box-wrapper{background:#fff;width:100%;border-radius: 0.5rem;padding: 1rem 0 2rem 0;box-shadow: 0 2px 6px rgba(208, 203, 203, 0.3215686274509804)} | |
| 15 | + #login .input-list{padding:1rem 1rem;box-sizing: border-box;background: #fff;} | |
| 16 | + #login .input-row-cls{width:100%;margin:0.65rem 0; } | |
| 17 | + #login .input-row-cls:after{content:''; width:100%;height:1px;background:#DDDDDD;display: block; } | |
| 18 | + #login .input-list .input-div{line-height: 1.25rem;font-size: 1rem;padding-bottom:0.65rem;} | |
| 19 | + #login .input-list .input-cls{width:100%;line-height: inherit;font-size: inherit;border:0;padding:0.3rem;box-sizing: border-box} | |
| 20 | + #login .input-list .validation-code{display:flex;align-items: center} | |
| 21 | + #login .input-list .get-code-cls{width: 10rem;font-size: 1rem;display: flex;align-items: center;justify-content:center;color:#FF8728;padding:0.302rem 0.3rem;box-sizing: border-box;border-left:0;} | |
| 22 | + #login .count-down-cls{font-size:0.7rem;color:#999} | |
| 23 | + #login .login-btn-cls{width:80%;border-radius: 2rem; padding:0.85rem 1rem;text-align:center;box-sizing: border-box;color:#fff;background:#FF8728;margin: 0 auto;font-size:1.13rem;} | |
| 24 | + | |
| 25 | + #login .register-btn-cls{width:80%;padding:0.85rem 1rem;margin: 0 auto;font-size:1.13rem;margin-top: 1rem; box-sizing: border-box;text-align: center;color:#FF8728;border:1px solid #FF8728;border-radius: 2rem;} | |
| 26 | + #login .action-btn-box{padding:1rem;box-sizing:border-box;padding-top:4rem;border-bottom-left-radius: 0.5rem;border-bottom-right-radius: 0.5rem;} | |
| 27 | + #login input::-webkit-input-placeholder{ | |
| 28 | + color:#BCBCBC | |
| 29 | + } | |
| 30 | + #login input::input-placeholder{ | |
| 31 | + color:#BCBCBC | |
| 32 | + } | |
| 33 | + | |
| 34 | +</style> | |
| 35 | +<script id="login-template" type="text/template"> | |
| 36 | + <div class="pages"> | |
| 37 | + <div class="page" id="login" style="background: #fff"> | |
| 38 | + <div class="page-content"> | |
| 39 | + <div class="head-wrapper" style="background-image:url('<?=$baseUrl?>/i/login-bg.png');background-repeat: no-repeat;background-size: 100% auto;"> | |
| 40 | + <img style="width:100%;opacity: 0" src="<?=$baseUrl?>/i/login-bg.png"/> | |
| 41 | + </div> | |
| 42 | + <div style="margin-top:-10rem;padding:0 1rem;box-sizing: border-box"> | |
| 43 | + <div class="input-box-wrapper"> | |
| 44 | + | |
| 45 | + <div style="padding:1rem;box-sizing: border-box;margin-bottom: 3.2rem;"> | |
| 46 | + <h2 style="color:#2E2E2E;margin-bottom: 0.3rem;">登录</h2> | |
| 47 | + <p style="font-size: 0.65rem;color:#2E2E2E">欢迎来到GK车管家，请使用手机号码登录</p> | |
| 48 | + </div> | |
| 49 | + | |
| 50 | + | |
| 51 | + <div class="input-list"> | |
| 52 | + <div class="input-row-cls"><label class="input-label-cls"></label><div class="input-div"><input class="input-cls mobile" type="number" placeholder="输入手机号码" /></div></div> | |
| 53 | + | |
| 54 | + <div class="input-row-cls"> | |
| 55 | + <label class="input-label-cls"></label> | |
| 56 | + <div class="input-div validation-code"> | |
| 57 | + <input class="input-cls code" type="text" placeholder="输入验证码" style="border-right: 0;"/> | |
| 58 | + <div class="get-code-cls">获取验证码</div> | |
| 59 | + </div> | |
| 60 | + </div> | |
| 61 | + </div> | |
| 62 | + | |
| 63 | + <div class="action-btn-box"> | |
| 64 | + <div class="login-btn-cls login-btn">登录</div> | |
| 65 | + <div class="register-btn register-btn-cls">注册</div> | |
| 66 | + </div> | |
| 67 | + </div> | |
| 68 | + </div> | |
| 69 | + | |
| 70 | + </div> | |
| 71 | + </div> | |
| 72 | + </div> | |
| 73 | +</script> | ... | ... |
app-wx/modules/user/views/default/pages/register-template.php
| ... | ... | @@ -8,37 +8,70 @@ $baseUrl = Url::base(true); |
| 8 | 8 | body,div,p,span,input{padding: 0;margin: 0} |
| 9 | 9 | input{-webkit-appearance: none;} |
| 10 | 10 | #register{} |
| 11 | - #register .input-list{padding:1rem;box-sizing: border-box} | |
| 12 | - #register .input-row-cls{width:100%;margin-top:0.7rem;} | |
| 13 | - #register .input-list .input-div{line-height: 1.25rem;font-size: 1rem;} | |
| 14 | - #register .input-list .input-cls{width:100%;line-height: inherit;font-size: inherit;border:1px solid #ccc;padding:0.3rem;box-sizing: border-box} | |
| 11 | + #register .head-wrapper{display:block;padding: 2.5rem 2rem;box-sizing: border-box;padding-bottom: 1.25rem; } | |
| 12 | + #register .input-list{padding:1rem 2rem;box-sizing: border-box} | |
| 13 | + #register .input-row-cls{width:100%;margin:0.65rem 0; } | |
| 14 | + #register .input-row-cls:after{content:''; width:100%;height:1px;background:#DDDDDD;display: block; } | |
| 15 | + #register .input-list .input-div{line-height: 1.25rem;font-size: 1rem;padding-bottom:0.65rem;} | |
| 16 | + #register .input-list .input-cls{width:100%;line-height: inherit;font-size: inherit;border:0;padding:0.3rem;box-sizing: border-box} | |
| 15 | 17 | #register .input-list .validation-code{display:flex;align-items: center} |
| 16 | - #register .input-list .get-code-cls{width: 7rem;font-size: 0.8rem;display: flex;align-items: center;justify-content:center;background:#f25601;color:#fff;padding:0.302rem 0.3rem;box-sizing: border-box;border: 1px solid #f25601; | |
| 17 | - border-left:0;} | |
| 18 | + #register .input-list .get-code-cls{width: 10rem;font-size: 1rem;display: flex;align-items: center;justify-content:center;color:#FF8728;padding:0.302rem 0.3rem;box-sizing: border-box;border-left:0;} | |
| 19 | + #register .upload-box{padding:0 2rem 1rem 2rem;box-sizing: border-box} | |
| 20 | + #register .upload-box .upload-title{line-height: 1.5rem;color:#BCBCBC;margin-bottom: 1rem;} | |
| 21 | + #register .upload-box .upload-item{width:100%;height:0;padding-bottom: 100%;overflow:hidden; | |
| 22 | + background-position: center center; | |
| 23 | + background-repeat: no-repeat; | |
| 24 | + -webkit-background-size:cover; | |
| 25 | + -moz-background-size:cover;background-size:cover;position: relative} | |
| 26 | + #register .upload-box .upload-item{background-image:url('<?=$baseUrl?>/i/upload-convert.png');background-size: 4.7rem auto;background-repeat: no-repeat;background-position: 1px 1px;} | |
| 27 | + #register .upload-box .upload-input-cls{width: 100%;display: block;background: rgba(0,0,0,0);opacity: 0;height: 0;padding-bottom: 100%;} | |
| 28 | + #register .register-btn-cls{width:80%;border-radius: 2rem; padding:0.8rem 1rem;text-align:center;box-sizing: border-box;color:#fff;background:#FF8728;margin: 0 auto;font-size:1.13rem} | |
| 29 | + #register .count-down-cls{font-size:0.7rem;color:#999} | |
| 30 | + #register .login-btn-cls{color:#4C4C4C;font-size:1rem;margin-top: 1rem; text-align: center} | |
| 31 | + #register input::-webkit-input-placeholder{ | |
| 32 | + color:#BCBCBC | |
| 33 | + } | |
| 34 | + #register input::input-placeholder{ | |
| 35 | + color:#BCBCBC | |
| 36 | + } | |
| 18 | 37 | |
| 19 | 38 | </style> |
| 20 | 39 | <script id="register-template" type="text/template"> |
| 21 | 40 | <div class="pages"> |
| 22 | 41 | <div class="page" id="register" style="background: #fff"> |
| 23 | 42 | <div class="page-content"> |
| 43 | + <div class="head-wrapper"> | |
| 44 | + <h2 style="color:#2E2E2E;margin-bottom: 0.3rem;">注册</h2> | |
| 45 | + <p style="font-size: 0.65rem;color:#2E2E2E">欢迎来到GK车管家，请先注册</p> | |
| 46 | + </div> | |
| 24 | 47 | <div class="input-list"> |
| 25 | - <div class="input-row-cls"><label class="input-label-cls">车厂名称</label><div class="input-div"><input class="input-cls" type="text" placeholder="输入车厂名称" /></div></div> | |
| 48 | + <div class="input-row-cls"><label class="input-label-cls"></label> | |
| 49 | + <div class="input-div"><input class="input-cls name" type="text" placeholder="输入车厂名称" /></div></div> | |
| 26 | 50 | |
| 27 | - <div class="input-row-cls"><label class="input-label-cls">手机号码</label><div class="input-div"><input class="input-cls" type="number" placeholder="输入手机号码" /></div></div> | |
| 51 | + <div class="input-row-cls"><label class="input-label-cls"></label><div class="input-div"><input class="input-cls mobile" type="number" placeholder="输入手机号码" /></div></div> | |
| 28 | 52 | |
| 29 | 53 | <div class="input-row-cls"> |
| 30 | - <label class="input-label-cls">验证码</label> | |
| 54 | + <label class="input-label-cls"></label> | |
| 31 | 55 | <div class="input-div validation-code"> |
| 32 | - <input class="input-cls" type="text" placeholder="" style="border-right: 0;"/> | |
| 56 | + <input class="input-cls code" type="text" placeholder="输入验证码" style="border-right: 0;"/> | |
| 33 | 57 | <div class="get-code-cls">获取验证码</div> |
| 34 | 58 | </div> |
| 35 | 59 | </div> |
| 36 | 60 | </div> |
| 37 | - <div style="padding:1rem;box-sizing: border-box"> | |
| 38 | - <div>上传营业执照</div> | |
| 39 | - <div></div> | |
| 61 | + <div class="upload-box"> | |
| 62 | + <div class="upload-title">上传营业执照</div> | |
| 63 | + <div style="display: block;width: 25%;"> | |
| 64 | + <div class="upload-item upload-btn-cls"> | |
| 65 | + <input type="file" id="upload-btn" class="upload-input-cls" name="file" accept="image/*"/> | |
| 66 | + </div> | |
| 67 | + </div> | |
| 68 | + </div> | |
| 69 | + <div style="padding:1rem;box-sizing:border-box;padding-top:3rem;"> | |
| 70 | + <div class="register-btn-cls register-btn">注册</div> | |
| 71 | + | |
| 72 | + <div class="login-btn login-btn-cls">登录</div> | |
| 73 | + | |
| 40 | 74 | </div> |
| 41 | - <div style="padding:1rem;box-sizing:border-box"><div style="width:70%; padding:1rem;text-align:center;box-sizing: border-box;color:#fff;background:#f25601;margin: 0 auto;">注册</div></div> | |
| 42 | 75 | </div> |
| 43 | 76 | </div> |
| 44 | 77 | </div> | ... | ... |
web/assets/d0eeab2b/js/cmpts/uploadjs/uploadjs.js
| 1 | -define([],function(){var e={};return e.uploadFile=function(e){var r={selector:e.selector||"",url:e.url||"",processAppendTo:e.processAppendTo||"",beforeSend:function(e,r){},success:function(r,o){e.success&&e.success(r,o)},complete:function(r,o){e.complete&&e.complete(r,o)},process:function(e){},error:function(r,o){e.error&&e.error(r,o)}};r.beforeSend=function(o,n){if(e.beforeSend)e.beforeSend(o,n);else{var t='<div id="process-bar" style="width:100%;position: absolute;top:0;bottom: 0;z-index: 222;display: flex;justify-content: center;flex-direction: column;"><div style="width: 70%;margin: 0 auto;height:1.5rem;background: #dcdcdc;"><div style="height:1.5rem;width:0%;line-height: 1.5rem;background:#4ae637;text-align:center" id="pro-bar">0%</div></div></div>';if(""!=r.processAppendTo){var s=document.querySelector(r.processAppendTo);if(!s)return"";var c=s.querySelector("#process-bar");s&&c&&s.removeChild(c),s.insertAdjacentHTML("beforeend",t)}}},r.process=function(o){if(e.process)e.process(o);else if(""!=r.processAppendTo){var n=document.querySelector(r.processAppendTo);if(!n)return"";var t=n.querySelector("#pro-bar");if(t){var s=100*o.loaded/o.total,c=Math.floor(s)+"%";t.style.width=c,t.innerHTML=c}}};var o=document.querySelector(r.selector).files[0],n=new FormData,t=new XMLHttpRequest;t.onload=function(e){var o=JSON.parse(this.response);r.success(o,e)},t.onloadend=function(e){if(""!=r.processAppendTo){var o=document.querySelector(r.processAppendTo);if(o){var n=o.querySelector("#process-bar");o&&o.removeChild(n)}}var t=JSON.parse(this.response);r.complete(t,e)},t.onerror=function(e){var o=JSON.parse(this.response);r.error(o,e)},t.ontimeout=function(e){},t.addEventListener("loadstart",function(e){r.beforeSend(e)}),t.open("post",r.url,!0),t.upload.onprogress=function(e){e.lengthComputable&&r.process(e)},n.append("file",o),t.send(n)},e}); | |
| 2 | 1 | \ No newline at end of file |
| 2 | +define([],function(){var e={};return e.uploadFile=function(e){var o={selector:e.selector||"",url:e.url||"",processAppendTo:e.processAppendTo||"",timeout:e.timeout||6e3,beforeSend:function(e,o){},success:function(o,r){e.success&&e.success(o,r)},complete:function(o,r){e.complete&&e.complete(o,r)},process:function(e){},ontimeout:function(e){},error:function(o,r){e.error&&e.error(o,r)}};o.beforeSend=function(r,t){if(e.beforeSend)e.beforeSend(r,t);else{var n='<div id="process-bar" style="width:100%;position: absolute;top:0;bottom: 0;z-index: 222;display: flex;justify-content: center;flex-direction: column;"><div style="width: 70%;margin: 0 auto;height:1.5rem;background: #dcdcdc;"><div style="height:1.5rem;width:0%;line-height: 1.5rem;background:#4ae637;text-align:center" id="pro-bar">0%</div></div></div>';if(""!=o.processAppendTo){var s=document.querySelector(o.processAppendTo);if(!s)return"";var i=s.querySelector("#process-bar");s&&i&&s.removeChild(i),s.insertAdjacentHTML("beforeend",n)}}},o.process=function(r){if(e.process)e.process(r);else if(""!=o.processAppendTo){var t=document.querySelector(o.processAppendTo);if(!t)return"";var n=t.querySelector("#pro-bar");if(n){var s=100*r.loaded/r.total,i=Math.floor(s)+"%";n.style.width=i,n.innerHTML=i}}},o.ontimeout=function(o){e.ontimeout?e.ontimeout(o):console.log("time out")};var r=document.querySelector(o.selector).files[0],t=new FormData,n=new XMLHttpRequest;n.timeout=o.timeout,n.onload=function(e){var r=JSON.parse(this.response);o.success(r,e)},n.onloadend=function(e){if(""!=o.processAppendTo){var r=document.querySelector(o.processAppendTo);if(r){var t=r.querySelector("#process-bar");r&&r.removeChild(t)}}var n=JSON.parse(this.response);o.complete(n,e)},n.onerror=function(e){var r=JSON.parse(this.response);o.error(r,e)},n.ontimeout=function(e){console.log("request timeout"),o.ontimeout(e)},n.addEventListener("loadstart",function(e){o.beforeSend(e)}),n.open("post",o.url,!0),n.upload.onprogress=function(e){e.lengthComputable&&o.process(e)},t.append("file",r),n.send(t)},e}); | |
| 3 | 3 | \ No newline at end of file | ... | ... |
web/dist/js/cmpts/uploadjs/uploadjs.js
| 1 | -define([],function(){var e={};return e.uploadFile=function(e){var r={selector:e.selector||"",url:e.url||"",processAppendTo:e.processAppendTo||"",beforeSend:function(e,r){},success:function(r,o){e.success&&e.success(r,o)},complete:function(r,o){e.complete&&e.complete(r,o)},process:function(e){},error:function(r,o){e.error&&e.error(r,o)}};r.beforeSend=function(o,n){if(e.beforeSend)e.beforeSend(o,n);else{var t='<div id="process-bar" style="width:100%;position: absolute;top:0;bottom: 0;z-index: 222;display: flex;justify-content: center;flex-direction: column;"><div style="width: 70%;margin: 0 auto;height:1.5rem;background: #dcdcdc;"><div style="height:1.5rem;width:0%;line-height: 1.5rem;background:#4ae637;text-align:center" id="pro-bar">0%</div></div></div>';if(""!=r.processAppendTo){var s=document.querySelector(r.processAppendTo);if(!s)return"";var c=s.querySelector("#process-bar");s&&c&&s.removeChild(c),s.insertAdjacentHTML("beforeend",t)}}},r.process=function(o){if(e.process)e.process(o);else if(""!=r.processAppendTo){var n=document.querySelector(r.processAppendTo);if(!n)return"";var t=n.querySelector("#pro-bar");if(t){var s=100*o.loaded/o.total,c=Math.floor(s)+"%";t.style.width=c,t.innerHTML=c}}};var o=document.querySelector(r.selector).files[0],n=new FormData,t=new XMLHttpRequest;t.onload=function(e){var o=JSON.parse(this.response);r.success(o,e)},t.onloadend=function(e){if(""!=r.processAppendTo){var o=document.querySelector(r.processAppendTo);if(o){var n=o.querySelector("#process-bar");o&&o.removeChild(n)}}var t=JSON.parse(this.response);r.complete(t,e)},t.onerror=function(e){var o=JSON.parse(this.response);r.error(o,e)},t.ontimeout=function(e){},t.addEventListener("loadstart",function(e){r.beforeSend(e)}),t.open("post",r.url,!0),t.upload.onprogress=function(e){e.lengthComputable&&r.process(e)},n.append("file",o),t.send(n)},e}); | |
| 2 | 1 | \ No newline at end of file |
| 2 | +define([],function(){var e={};return e.uploadFile=function(e){var o={selector:e.selector||"",url:e.url||"",processAppendTo:e.processAppendTo||"",timeout:e.timeout||6e3,beforeSend:function(e,o){},success:function(o,r){e.success&&e.success(o,r)},complete:function(o,r){e.complete&&e.complete(o,r)},process:function(e){},ontimeout:function(e){},error:function(o,r){e.error&&e.error(o,r)}};o.beforeSend=function(r,t){if(e.beforeSend)e.beforeSend(r,t);else{var n='<div id="process-bar" style="width:100%;position: absolute;top:0;bottom: 0;z-index: 222;display: flex;justify-content: center;flex-direction: column;"><div style="width: 70%;margin: 0 auto;height:1.5rem;background: #dcdcdc;"><div style="height:1.5rem;width:0%;line-height: 1.5rem;background:#4ae637;text-align:center" id="pro-bar">0%</div></div></div>';if(""!=o.processAppendTo){var s=document.querySelector(o.processAppendTo);if(!s)return"";var i=s.querySelector("#process-bar");s&&i&&s.removeChild(i),s.insertAdjacentHTML("beforeend",n)}}},o.process=function(r){if(e.process)e.process(r);else if(""!=o.processAppendTo){var t=document.querySelector(o.processAppendTo);if(!t)return"";var n=t.querySelector("#pro-bar");if(n){var s=100*r.loaded/r.total,i=Math.floor(s)+"%";n.style.width=i,n.innerHTML=i}}},o.ontimeout=function(o){e.ontimeout?e.ontimeout(o):console.log("time out")};var r=document.querySelector(o.selector).files[0],t=new FormData,n=new XMLHttpRequest;n.timeout=o.timeout,n.onload=function(e){var r=JSON.parse(this.response);o.success(r,e)},n.onloadend=function(e){if(""!=o.processAppendTo){var r=document.querySelector(o.processAppendTo);if(r){var t=r.querySelector("#process-bar");r&&r.removeChild(t)}}var n=JSON.parse(this.response);o.complete(n,e)},n.onerror=function(e){var r=JSON.parse(this.response);o.error(r,e)},n.ontimeout=function(e){console.log("request timeout"),o.ontimeout(e)},n.addEventListener("loadstart",function(e){o.beforeSend(e)}),n.open("post",o.url,!0),n.upload.onprogress=function(e){e.lengthComputable&&o.process(e)},t.append("file",r),n.send(t)},e}); | |
| 3 | 3 | \ No newline at end of file | ... | ... |
171 KB
5.65 KB
1.89 KB
web/src/js/user/app.js
| ... | ... | @@ -44,6 +44,11 @@ define( |
| 44 | 44 | _autoLoading(); |
| 45 | 45 | return app.runController('register'); |
| 46 | 46 | }, |
| 47 | + 'login': function () { | |
| 48 | + fromOutside = false; | |
| 49 | + _autoLoading(); | |
| 50 | + return app.runController('login'); | |
| 51 | + }, | |
| 47 | 52 | '*': function(){ |
| 48 | 53 | return app.runController('index'); |
| 49 | 54 | } | ... | ... |
| ... | ... | @@ -0,0 +1,112 @@ |
| 1 | +/** | |
| 2 | + * 登录 | |
| 3 | + */ | |
| 4 | +define( | |
| 5 | + "user/login-controller", | |
| 6 | + [ | |
| 7 | + 'mk7/controller', | |
| 8 | + 'mk7/url', | |
| 9 | + 'mk7/utils', | |
| 10 | + ], | |
| 11 | + | |
| 12 | + function(ctrl, url, utils) { | |
| 13 | + | |
| 14 | + var $$ = Dom7; | |
| 15 | + var t7 = Template7; | |
| 16 | + var ctrl = new ctrl(); | |
| 17 | + var getCodeURL = '/user/login/get-code'; | |
| 18 | + var loginURL = '/user/login/login'; | |
| 19 | + var clickGetCode = true; | |
| 20 | + var loginClick = true; | |
| 21 | + var tt = null | |
| 22 | + ctrl.run = function () { | |
| 23 | + var me = this; | |
| 24 | + me.setPageTitle("登录"); | |
| 25 | + me.codeDuration = 60; | |
| 26 | + me.render(); | |
| 27 | + } | |
| 28 | + ctrl.bindEvents = function () { | |
| 29 | + var me = this; | |
| 30 | + console.log("bindEvents"); | |
| 31 | + me.getCodeEvent(); | |
| 32 | + me.gotoRegisterEvent(); | |
| 33 | + me.loginEvent(); | |
| 34 | + } | |
| 35 | + | |
| 36 | + ctrl.getCodeEvent = function() { | |
| 37 | + var me = this; | |
| 38 | + $$('#login .get-code-cls').click(function() { | |
| 39 | + if (false == clickGetCode) { | |
| 40 | + return false; | |
| 41 | + } | |
| 42 | + clearInterval(tt); | |
| 43 | + clickGetCode = false; | |
| 44 | + var pData = me.csrf({action:'login'}) | |
| 45 | + utils.httpGet(url.to(getCodeURL), pData, function(res) { | |
| 46 | + if (!res.success) { | |
| 47 | + utils.toast({content:res.message,closeDelay:3000}) | |
| 48 | + clickGetCode = true; | |
| 49 | + return false; | |
| 50 | + } | |
| 51 | + var codeDuration = res.codeDuration | |
| 52 | + me.codeDuration = codeDuration; | |
| 53 | + tt = setInterval(function(e) { | |
| 54 | + me.codeDuration--; | |
| 55 | + if (0 == me.codeDuration) { | |
| 56 | + $$('#login .get-code-cls').html('获取验证码'); | |
| 57 | + clearInterval(tt); | |
| 58 | + me.codeDuration = codeDuration; | |
| 59 | + clickGetCode = true; | |
| 60 | + } else { | |
| 61 | + $$('#login .get-code-cls').html('<span class="count-down-cls">' +me.codeDuration+'s后重新获取</span>'); | |
| 62 | + } | |
| 63 | + }, 1000) | |
| 64 | + }) | |
| 65 | + }) | |
| 66 | + } | |
| 67 | + ctrl.loginEvent = function() { | |
| 68 | + var me = this; | |
| 69 | + $$('#login .login-btn').click(function(e) { | |
| 70 | + | |
| 71 | + var mobile = utils.trim($$('#login .mobile').val()); | |
| 72 | + var code = utils.trim($$('#login .code').val()); | |
| 73 | + | |
| 74 | + if ('' == mobile) { | |
| 75 | + utils.toast({content:'手机号码必填'}) | |
| 76 | + return false; | |
| 77 | + } | |
| 78 | + if (!utils.isMobile(mobile)) { | |
| 79 | + utils.toast({content:'手机号码不合格'}) | |
| 80 | + return false; | |
| 81 | + } | |
| 82 | + if ('' == code) { | |
| 83 | + utils.toast({content:'验证码必填'}) | |
| 84 | + return false; | |
| 85 | + } | |
| 86 | + | |
| 87 | + if (false == loginClick) { | |
| 88 | + return false; | |
| 89 | + } | |
| 90 | + loginClick = false; | |
| 91 | + var pData = me.csrf({mobile:mobile,code:code}) | |
| 92 | + utils.httpPost(url.to(loginURL),pData, function(res) { | |
| 93 | + if (!res.success) { | |
| 94 | + utils.toast({content:res.message,closeDelay:3000}) | |
| 95 | + loginClick = true; | |
| 96 | + return false; | |
| 97 | + } else { | |
| 98 | + loginClick = true; | |
| 99 | + window.location.href = url.to('/'); | |
| 100 | + } | |
| 101 | + }) | |
| 102 | + }) | |
| 103 | + } | |
| 104 | + ctrl.gotoRegisterEvent = function() { | |
| 105 | + | |
| 106 | + $$('#login .register-btn').click(function(e) { | |
| 107 | + window.location.href = url.to('user/#register'); | |
| 108 | + }) | |
| 109 | + } | |
| 110 | + return ctrl; | |
| 111 | + } | |
| 112 | +); | ... | ... |
web/src/js/user/register-controller.js
| ... | ... | @@ -7,31 +7,146 @@ define( |
| 7 | 7 | 'mk7/controller', |
| 8 | 8 | 'mk7/url', |
| 9 | 9 | 'mk7/utils', |
| 10 | + 'mk7/uploadjs', | |
| 10 | 11 | ], |
| 11 | 12 | |
| 12 | - function(ctrl, url, utils) { | |
| 13 | + function(ctrl, url, utils, uploadjs) { | |
| 13 | 14 | |
| 14 | 15 | var $$ = Dom7; |
| 15 | 16 | var t7 = Template7; |
| 16 | 17 | var ctrl = new ctrl(); |
| 17 | 18 | |
| 18 | - var pageurl = '/user/maintainer/register'; | |
| 19 | - | |
| 19 | + var registerUrl = '/user/login/register'; | |
| 20 | + var uploadURL = '/user/login/upload-file'; | |
| 21 | + var getCodeURL = '/user/login/get-code'; | |
| 22 | + var loginURL = '/user/login/do-login'; | |
| 23 | + var clickGetCode = true; | |
| 24 | + var registerClick = true; | |
| 25 | + var tt = null | |
| 20 | 26 | ctrl.run = function () { |
| 21 | 27 | var me = this; |
| 22 | 28 | me.setPageTitle("注册"); |
| 23 | - me.hideAllNonBaseMenuItem(window.$site); | |
| 24 | - | |
| 29 | + //me.hideAllNonBaseMenuItem(window.$site); | |
| 30 | + me.codeDuration = 60; | |
| 25 | 31 | me.render(); |
| 26 | - | |
| 27 | - | |
| 28 | 32 | } |
| 29 | 33 | ctrl.bindEvents = function () { |
| 30 | 34 | var me = this; |
| 31 | 35 | console.log("bindEvents"); |
| 36 | + me.uploadEvent(); | |
| 37 | + me.getCodeEvent(); | |
| 38 | + me.registerEvent(); | |
| 39 | + me.gotoLoginEvent(); | |
| 40 | + } | |
| 41 | + ctrl.uploadEvent = function() { | |
| 42 | + $$('#register #upload-btn').change(function() { | |
| 43 | + if ('' == $$(this).val() || null == $$(this).val()) { | |
| 44 | + return ; | |
| 45 | + } | |
| 46 | + var parent = $$(this).parent(); | |
| 47 | + uploadjs.uploadFile({ | |
| 48 | + selector:'#upload-btn', | |
| 49 | + url:url.to(uploadURL), | |
| 50 | + processAppendTo:'#register', | |
| 51 | + success:function(response, e) { | |
| 52 | + try { | |
| 53 | + if(response.success) { | |
| 54 | + var imgUrl = response.tmpUrl; | |
| 55 | + parent.css("background-image", 'url('+response.tmpMinUrl+')'); | |
| 56 | + parent.attr('data', response.tmpFile); | |
| 57 | + parent.attr('data-url', imgUrl); | |
| 58 | + | |
| 59 | + } else { | |
| 60 | + utils.toast({content:response.message, closeDelay:5000}); | |
| 61 | + } | |
| 62 | + } catch(ex) { | |
| 32 | 63 | |
| 64 | + utils.toast({content:'出错', closeDelay:5000}); | |
| 65 | + } | |
| 66 | + } | |
| 67 | + }); | |
| 68 | + }) | |
| 33 | 69 | } |
| 70 | + ctrl.getCodeEvent = function() { | |
| 71 | + var me = this; | |
| 72 | + $$('#register .get-code-cls').click(function() { | |
| 73 | + if (false == clickGetCode) { | |
| 74 | + return false; | |
| 75 | + } | |
| 76 | + clearInterval(tt); | |
| 77 | + clickGetCode = false; | |
| 78 | + var pData = me.csrf({action:'register'}) | |
| 79 | + utils.httpGet(url.to(getCodeURL), pData, function(res) { | |
| 80 | + if (!res.success) { | |
| 81 | + utils.toast({content:res.message,closeDelay:3000}) | |
| 82 | + clickGetCode = true; | |
| 83 | + return false; | |
| 84 | + } | |
| 85 | + var codeDuration = res.codeDuration | |
| 86 | + me.codeDuration = codeDuration; | |
| 87 | + tt = setInterval(function(e) { | |
| 88 | + me.codeDuration--; | |
| 89 | + if (0 == me.codeDuration) { | |
| 90 | + $$('#register .get-code-cls').html('获取验证码'); | |
| 91 | + clearInterval(tt); | |
| 92 | + me.codeDuration = codeDuration; | |
| 93 | + clickGetCode = true; | |
| 94 | + } else { | |
| 95 | + $$('#register .get-code-cls').html('<span class="count-down-cls">' +me.codeDuration+'s后重新获取</span>'); | |
| 96 | + } | |
| 97 | + }, 1000) | |
| 98 | + }) | |
| 99 | + }) | |
| 100 | + } | |
| 101 | + ctrl.registerEvent = function() { | |
| 102 | + var me = this; | |
| 103 | + $$('#register .register-btn').click(function(e) { | |
| 104 | + var name = utils.trim($$('#register .name').val()); | |
| 105 | + var mobile = utils.trim($$('#register .mobile').val()); | |
| 106 | + var code = utils.trim($$('#register .code').val()); | |
| 107 | + if ('' == name) { | |
| 108 | + utils.toast({content:'车厂名称必填'}) | |
| 109 | + return false; | |
| 110 | + } | |
| 111 | + if ('' == mobile) { | |
| 112 | + utils.toast({content:'手机号码必填'}) | |
| 113 | + return false; | |
| 114 | + } | |
| 115 | + if (!utils.isMobile(mobile)) { | |
| 116 | + utils.toast({content:'手机号码不合格'}) | |
| 117 | + return false; | |
| 118 | + } | |
| 119 | + if ('' == code) { | |
| 120 | + utils.toast({content:'验证码必填'}) | |
| 121 | + return false; | |
| 122 | + } | |
| 34 | 123 | |
| 124 | + var imgURL = $$('#register .upload-btn-cls').attr('data'); | |
| 125 | + if (undefined === imgURL || null == imgURL) { | |
| 126 | + utils.toast({content:'请上传营业执照'}) | |
| 127 | + return false; | |
| 128 | + } | |
| 129 | + if (false == registerClick) { | |
| 130 | + return false; | |
| 131 | + } | |
| 132 | + registerClick = false; | |
| 133 | + var pData = me.csrf({name:name, mobile:mobile,code:code,img:imgURL}) | |
| 134 | + utils.httpPost(url.to(registerUrl),pData, function(res) { | |
| 135 | + if (!res.success) { | |
| 136 | + utils.toast({content:res.message,closeDelay:3000}) | |
| 137 | + registerClick = true; | |
| 138 | + return false; | |
| 139 | + } else { | |
| 140 | + window.location.href = url.to('/'); | |
| 141 | + } | |
| 142 | + }) | |
| 143 | + }) | |
| 144 | + } | |
| 145 | + ctrl.gotoLoginEvent = function() { | |
| 146 | + $$('#register .login-btn').click(function(e){ | |
| 147 | + window.location.href = url.to('user/#login'); | |
| 148 | + }) | |
| 149 | + } | |
| 35 | 150 | return ctrl; |
| 36 | 151 | } |
| 37 | 152 | ); | ... | ... |
web/src/vendor/mk7/cmpts/uploadjs/uploadjs.js
| 1 | 1 | define( |
| 2 | - [ | |
| 3 | - | |
| 4 | - ], | |
| 2 | + [], | |
| 5 | 3 | function() { |
| 6 | 4 | var object = {}; |
| 7 | 5 | object.uploadFile = function(options) { |
| ... | ... | @@ -9,10 +7,12 @@ define( |
| 9 | 7 | selector:options.selector || '', |
| 10 | 8 | url:options.url || '', |
| 11 | 9 | processAppendTo: options.processAppendTo || '', |
| 10 | + timeout:options.timeout || 6000, | |
| 12 | 11 | beforeSend:function(res, e){}, |
| 13 | 12 | success:function(res, e){if(options.success){options.success(res, e)}}, |
| 14 | 13 | complete:function(res, e){if(options.complete){options.complete(res, e)}}, |
| 15 | 14 | process:function(res){}, |
| 15 | + ontimeout:function(e){}, | |
| 16 | 16 | error:function(res, e){if(options.error){options.error(res, e)}} |
| 17 | 17 | } |
| 18 | 18 | setting.beforeSend = function(res, e) { |
| ... | ... | @@ -55,10 +55,18 @@ define( |
| 55 | 55 | |
| 56 | 56 | } |
| 57 | 57 | } |
| 58 | + setting.ontimeout = function(res) { | |
| 59 | + if (options.ontimeout) { | |
| 60 | + options.ontimeout(res); | |
| 61 | + } else { | |
| 62 | + console.log('time out') | |
| 63 | + } | |
| 64 | + } | |
| 58 | 65 | |
| 59 | 66 | var fileObject = document.querySelector(setting.selector).files[0]; |
| 60 | 67 | var formData = new FormData(); |
| 61 | 68 | var xhr = new XMLHttpRequest(); |
| 69 | + xhr.timeout = setting.timeout; | |
| 62 | 70 | xhr.onload = function(e) { |
| 63 | 71 | //console.log(this.response); |
| 64 | 72 | |
| ... | ... | @@ -86,7 +94,8 @@ define( |
| 86 | 94 | setting.error(response, e); |
| 87 | 95 | }; |
| 88 | 96 | xhr.ontimeout = function(e) { |
| 89 | - //console.log('request timeout'); | |
| 97 | + console.log('request timeout'); | |
| 98 | + setting.ontimeout(e); | |
| 90 | 99 | }; |
| 91 | 100 | xhr.addEventListener('loadstart', function(e) { |
| 92 | 101 | setting.beforeSend(e); |
| ... | ... | @@ -94,18 +103,18 @@ define( |
| 94 | 103 | |
| 95 | 104 | xhr.open('post', setting.url, true) |
| 96 | 105 | /* |
| 97 | - xhr.onreadystatechange = function () { | |
| 98 | - if(this.readyState == 4) { | |
| 99 | - stateChange(this.response); | |
| 100 | - } else { | |
| 101 | - var completeFun = arguments[3]; | |
| 102 | - if (completeFun) { | |
| 103 | - completeFun(this); | |
| 104 | - } | |
| 106 | + xhr.onreadystatechange = function () { | |
| 107 | + if(this.readyState == 4) { | |
| 108 | + stateChange(this.response); | |
| 109 | + } else { | |
| 110 | + var completeFun = arguments[3]; | |
| 111 | + if (completeFun) { | |
| 112 | + completeFun(this); | |
| 113 | + } | |
| 105 | 114 | |
| 106 | - } | |
| 107 | - } | |
| 108 | - */ | |
| 115 | + } | |
| 116 | + } | |
| 117 | + */ | |
| 109 | 118 | |
| 110 | 119 | xhr.upload.onprogress = function (ex) { |
| 111 | 120 | if (ex.lengthComputable) { | ... | ... |