| Xia Kaixiang | 72373d8 | 2019-04-18 13:52:36 +0800 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <html xmlns:th="http://www.thymeleaf.org"> |
| 3 | |
| 4 | <head> |
| 5 | <title>用户登录</title> |
| 6 | <link rel="stylesheet" type="text/css" th:href="@{/static/libs/layui/css/layui.css}" /> |
| 7 | <link rel="stylesheet" type="text/css" th:href="@{/static/payapi/css/login.css}" /> |
| 8 | </head> |
| 9 | |
| 10 | <body> |
| 11 | <div class="login-wrapper"> |
| 12 | |
| 13 | <div class="login-header"> |
| 14 | <img th:src="@{/static/payapi/images/logo.png}"> logo |
| 15 | </div> |
| 16 | |
| 17 | <div class=" login-body"> |
| 18 | <div class="layui-card"> |
| 19 | <div class="layui-card-header"> |
| 20 | <i class="layui-icon layui-icon-engine"></i> 用户登录 |
| 21 | </div> |
| 22 | <div class="layui-card-body layui-form layui-form-pane"> |
| 23 | <div class="layui-form-item"> |
| 24 | <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label> |
| 25 | <div class="layui-input-block"> |
| 26 | <input name="username" type="text" lay-verify="required" placeholder="账号" |
| 27 | class="layui-input"> |
| 28 | </div> |
| 29 | </div> |
| 30 | <div class="layui-form-item"> |
| 31 | <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label> |
| 32 | <div class="layui-input-block"> |
| 33 | <input name="password" type="password" lay-verify="required" placeholder="密码" |
| 34 | class="layui-input"> |
| 35 | </div> |
| 36 | </div> |
| 37 | <div class="layui-form-item"> |
| 38 | <label class="layui-form-label"><i class="layui-icon layui-icon-vercode"></i></label> |
| 39 | <div class="layui-input-block"> |
| 40 | <div class="layui-row inline-block"> |
| 41 | <div class="layui-col-xs7"> |
| 42 | <input name="imageCode" type="text" placeholder="验证码" |
| 43 | class="layui-input"> |
| 44 | </div> |
| 45 | <div class="layui-col-xs5" style="padding-left: 10px;"> |
| Xia Kaixiang | 48b7bd0 | 2019-04-22 09:50:40 +0800 | [diff] [blame] | 46 | <img width="100px" height="35px" class="login-captcha" th:src="@{/code/image}"> |
| Xia Kaixiang | 72373d8 | 2019-04-18 13:52:36 +0800 | [diff] [blame] | 47 | </div> |
| 48 | </div> |
| 49 | </div> |
| 50 | </div> |
| 51 | <div class="layui-form-item"> |
| 52 | <!--<a href="javascript:;" class="layui-link">帐号注册</a>--> |
| 53 | <a href="javascript:;" class="layui-link pull-right">忘记密码？</a> |
| 54 | </div> |
| 55 | <div class="layui-form-item"> |
| 56 | <button lay-filter="login-submit" class="layui-btn layui-btn-fluid" lay-submit>登 录</button> |
| 57 | </div> |
| 58 | <!--<div class="layui-form-item login-other">--> |
| 59 | <!--<label>第三方登录</label>--> |
| 60 | <!--<a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>--> |
| 61 | <!--<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>--> |
| 62 | <!--<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>--> |
| 63 | <!--</div>--> |
| 64 | </div> |
| 65 | </div> |
| 66 | </div> |
| 67 | |
| 68 | <div class="login-footer"> |
| 69 | <p>© 2019 <a href="javascript:;" target="_blank">上海树维信息科技有限公司 版权所有</a></p> |
| 70 | <!--<p>--> |
| 71 | <!--<span><a href="javascript:;" target="_blank">前往github</a></span>--> |
| 72 | <!--<span><a href="https://gitee.com/andyzy/zy-admin.git" target="_blank">前往gitee</a></span>--> |
| 73 | <!--<span><a href="javascript:;" target="_blank">文档说明</a></span>--> |
| 74 | <!--</p>--> |
| 75 | </div> |
| 76 | </div> |
| 77 | |
| 78 | <script type="text/javascript" th:src="@{/static/libs/layui/layui.js}" ></script> |
| 79 | <script> |
| 80 | layui.config({ |
| 81 | base: 'payapi/module/' |
| 82 | }).use(['form'], function () { |
| 83 | var $ = layui.jquery; |
| 84 | var form = layui.form; |
| 85 | // 表单提交 |
| 86 | form.on('submit(login-submit)', function (obj) { |
| 87 | var field = obj.field; |
| 88 | layer.load(2); |
| 89 | $.ajax({ |
| 90 | url: '/login/form', |
| 91 | data: field, |
| 92 | type: 'POST', |
| 93 | success: function (data) { |
| 94 | if (200 == data.code) { |
| 95 | layer.msg('登录成功', {icon: 1, time: 1500}, function () { |
| 96 | location.replace('./'); |
| 97 | }); |
| 98 | } else { |
| 99 | layer.closeAll('loading'); |
| 100 | layer.msg(data.msg, {icon: 5}); |
| 101 | $('.login-captcha').trigger('click'); |
| 102 | } |
| 103 | }, |
| 104 | error: function (xhr) { |
| 105 | console.log('error'); |
| 106 | console.log(xhr); |
| 107 | layer.closeAll('loading'); |
| 108 | layer.msg('登录失败，请按f12查看console错误信息', {icon: 5}); |
| 109 | } |
| 110 | }); |
| 111 | }); |
| 112 | |
| 113 | // 图形验证码 |
| 114 | $('.login-captcha').click(function () { |
| 115 | this.src = this.src + '?t=' + (new Date).getTime(); |
| 116 | }); |
| 117 | }); |
| 118 | </script> |
| 119 | </body> |
| 120 | </html> |