From 68bab565343849637bc437132c2a51b3208b3f04 Mon Sep 17 00:00:00 2001
From: wanggeng <450292408@qq.com>
Date: Tue, 27 Jul 2021 23:08:17 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E7=99=BB=E5=BD=95=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E4=B8=BAthymeleaf=E3=80=81vue=E3=80=81layui=E5=85=B1?=
 =?UTF-8?q?=E5=90=8C=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../login/base/consts/IUserCenterConst.java   |   9 +-
 .../route/OAuthRouteController.java           | 107 +----
 .../src/main/resources/templates/login.html   | 435 +++++++-----------
 3 files changed, 187 insertions(+), 364 deletions(-)

diff --git a/login-base/src/main/java/ink/wgink/login/base/consts/IUserCenterConst.java b/login-base/src/main/java/ink/wgink/login/base/consts/IUserCenterConst.java
index 14601df6..da6f6768 100644
--- a/login-base/src/main/java/ink/wgink/login/base/consts/IUserCenterConst.java
+++ b/login-base/src/main/java/ink/wgink/login/base/consts/IUserCenterConst.java
@@ -37,6 +37,10 @@ public interface IUserCenterConst {
      * 系统子标题大小
      */
     String SYSTEM_SUB_TITLE_SIZE = "systemSubTitleSize";
+    /**
+     * 系统简称，菜单上方名称
+     */
+    String SYSTEM_SIMPLE_TITLE = "systemSimpleTitle";
     /**
      * 版权年份
      */
@@ -81,8 +85,5 @@ public interface IUserCenterConst {
      * 菜单模式
      */
     String MENU_MODE = "menuMode";
-    /**
-     * 登录页面
-     */
-    String LOGIN_PAGE = "loginPage";
+
 }
diff --git a/login-base/src/main/java/ink/wgink/login/base/controller/route/OAuthRouteController.java b/login-base/src/main/java/ink/wgink/login/base/controller/route/OAuthRouteController.java
index bcfe1bc6..88cdc254 100644
--- a/login-base/src/main/java/ink/wgink/login/base/controller/route/OAuthRouteController.java
+++ b/login-base/src/main/java/ink/wgink/login/base/controller/route/OAuthRouteController.java
@@ -20,6 +20,7 @@ import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 import javax.servlet.http.HttpSession;
 import java.io.IOException;
+import java.util.HashMap;
 import java.util.Map;
 import java.util.Objects;
 
@@ -48,100 +49,38 @@ public class OAuthRouteController {
     @GetMapping("login")
     public ModelAndView login(HttpServletRequest request) {
         ModelAndView mv = new ModelAndView();
-        mv.addObject(IUserCenterConst.SERVER_URL, serverProperties.getUrl());
-        if (request.getParameter(IUserCenterConst.ERROR) != null) {
-            mv.addObject(IUserCenterConst.ERROR_MESSAGE, request.getSession().getAttribute(IUserCenterConst.ERROR_MESSAGE));
-        }
         Map<String, Object> config = ConfigManager.getInstance().getConfig();
+
+        Map<String, Object> pageParams = new HashMap<>(16);
+        pageParams.put(IUserCenterConst.SERVER_URL, serverProperties.getUrl());
+        pageParams.put(IUserCenterConst.ERROR_MESSAGE, request.getSession().getAttribute(IUserCenterConst.ERROR_MESSAGE));
+        // 服务地址
+        pageParams.put(IUserCenterConst.SERVER_URL, serverProperties.getUrl());
         // 系统LOGO
-        if (!Objects.isNull(config.get(IUserCenterConst.SYSTEM_LOGO)) && !StringUtils.isBlank(config.get(IUserCenterConst.SYSTEM_LOGO).toString())) {
-            mv.addObject(IUserCenterConst.SYSTEM_LOGO, config.get(IUserCenterConst.SYSTEM_LOGO).toString());
-        } else {
-            mv.addObject(IUserCenterConst.SYSTEM_LOGO, "");
-        }
+        pageParams.put(IUserCenterConst.SYSTEM_LOGO, config.get(IUserCenterConst.SYSTEM_LOGO).toString());
         // 背景图片
-        if (!Objects.isNull(config.get(IUserCenterConst.LOGIN_BACKGROUND_IMAGES)) && !StringUtils.isBlank(config.get(IUserCenterConst.LOGIN_BACKGROUND_IMAGES).toString())) {
-            mv.addObject(IUserCenterConst.LOGIN_BACKGROUND_IMAGES, config.get(IUserCenterConst.LOGIN_BACKGROUND_IMAGES).toString());
-        } else {
-            mv.addObject(IUserCenterConst.LOGIN_BACKGROUND_IMAGES, "");
-        }
+        pageParams.put(IUserCenterConst.LOGIN_BACKGROUND_IMAGES, config.get(IUserCenterConst.LOGIN_BACKGROUND_IMAGES).toString());
         // 系统标题
-        if (!Objects.isNull(config.get(IUserCenterConst.SYSTEM_TITLE)) && !StringUtils.isBlank(config.get(IUserCenterConst.SYSTEM_TITLE).toString())) {
-            mv.addObject(IUserCenterConst.SYSTEM_TITLE, config.get(IUserCenterConst.SYSTEM_TITLE).toString());
-        } else {
-            mv.addObject(IUserCenterConst.SYSTEM_TITLE, serverProperties.getSystemTitle());
-        }
-        // 系统标题大小
-        if (!Objects.isNull(config.get(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE)) && Integer.parseInt(config.get(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE).toString()) > 12) {
-            mv.addObject(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE, Integer.parseInt(config.get(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE).toString()));
-        } else {
-            mv.addObject(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE, 26);
-        }
+        pageParams.put(IUserCenterConst.SYSTEM_TITLE, config.get(IUserCenterConst.SYSTEM_TITLE).toString());
+        // 系统标题大小，默认26
+        pageParams.put(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE, Integer.parseInt(config.get(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE).toString()));
         // 系统子标题
-        if (!Objects.isNull(config.get(IUserCenterConst.SYSTEM_SUB_TITLE)) && !StringUtils.isBlank(config.get(IUserCenterConst.SYSTEM_SUB_TITLE).toString())) {
-            mv.addObject(IUserCenterConst.SYSTEM_SUB_TITLE, config.get(IUserCenterConst.SYSTEM_SUB_TITLE).toString());
-        } else {
-            mv.addObject(IUserCenterConst.SYSTEM_SUB_TITLE, serverProperties.getSystemSubTitle());
-        }
-        // 系统子标题大小
-        if (!Objects.isNull(config.get(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE)) && Integer.parseInt(config.get(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE).toString()) > 12) {
-            mv.addObject(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE, Integer.parseInt(config.get(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE).toString()));
-        } else {
-            mv.addObject(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE, 16);
-        }
+        pageParams.put(IUserCenterConst.SYSTEM_SUB_TITLE, config.get(IUserCenterConst.SYSTEM_SUB_TITLE).toString());
+        // 系统子标题大小，默认16
+        pageParams.put(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE, Integer.parseInt(config.get(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE).toString()));
         // 版权年份
-        if (!Objects.isNull(config.get(IUserCenterConst.COPY_RIGHT_YEAR))) {
-            mv.addObject(IUserCenterConst.COPY_RIGHT_YEAR, config.get(IUserCenterConst.COPY_RIGHT_YEAR).toString());
-        } else {
-            mv.addObject(IUserCenterConst.COPY_RIGHT_YEAR, "");
-        }
+        pageParams.put(IUserCenterConst.COPY_RIGHT_YEAR, config.get(IUserCenterConst.COPY_RIGHT_YEAR).toString());
         // 版权所属
-        if (!Objects.isNull(config.get(IUserCenterConst.COPY_LEFT))) {
-            mv.addObject(IUserCenterConst.COPY_LEFT, config.get(IUserCenterConst.COPY_LEFT).toString());
-        } else {
-            mv.addObject(IUserCenterConst.COPY_LEFT, "");
-        }
+        pageParams.put(IUserCenterConst.COPY_LEFT, config.get(IUserCenterConst.COPY_LEFT).toString());
         // 官方链接
-        if (!Objects.isNull(config.get(IUserCenterConst.OFFICIAL_URL))) {
-            mv.addObject(IUserCenterConst.OFFICIAL_URL, config.get(IUserCenterConst.OFFICIAL_URL).toString());
-        } else {
-            mv.addObject(IUserCenterConst.OFFICIAL_URL, "");
-        }
+        pageParams.put(IUserCenterConst.OFFICIAL_URL, config.get(IUserCenterConst.OFFICIAL_URL).toString());
         // 开启验证码
-        if (!Objects.isNull(config.get(ISystemConstant.VERIFICATION_CODE))) {
-            mv.addObject(ISystemConstant.VERIFICATION_CODE, config.get(ISystemConstant.VERIFICATION_CODE).toString());
-        } else {
-            mv.addObject(ISystemConstant.VERIFICATION_CODE, ISystemConstant.IS_FALSE);
-        }
-        // 开启uKey登录
-        if (!Objects.isNull(config.get(IUserCenterConst.UKEY_LOGIN))) {
-            mv.addObject(IUserCenterConst.UKEY_LOGIN, config.get(IUserCenterConst.UKEY_LOGIN).toString());
-        } else {
-            mv.addObject(IUserCenterConst.UKEY_LOGIN, ISystemConstant.IS_FALSE);
-        }
-        // 开启扫码登录
-        if (!Objects.isNull(config.get(IUserCenterConst.SCAN_CODE_LOGIN))) {
-            mv.addObject(IUserCenterConst.SCAN_CODE_LOGIN, config.get(IUserCenterConst.SCAN_CODE_LOGIN).toString());
-            // 钉钉扫码登陆APPID
-//            if (!StringUtils.isBlank(dingDingScanCodeLoginProperties.getAppId())) {
-//                mv.addObject(IUserCenterConst.DING_DING_SCAN_CODE_APP_ID, dingDingScanCodeLoginProperties.getAppId());
-//            } else {
-//                mv.addObject(IUserCenterConst.DING_DING_SCAN_CODE_APP_ID, "");
-//            }
-        } else {
-            mv.addObject(IUserCenterConst.SCAN_CODE_LOGIN, ISystemConstant.IS_FALSE);
-        }
+        pageParams.put(ISystemConstant.VERIFICATION_CODE, config.get(ISystemConstant.VERIFICATION_CODE).toString());
         // 登录框位置
-        if (!Objects.isNull(config.get(IUserCenterConst.LOGIN_BOX_POSITION))) {
-            mv.addObject(IUserCenterConst.LOGIN_BOX_POSITION, config.get(IUserCenterConst.LOGIN_BOX_POSITION).toString());
-        } else {
-            mv.addObject(IUserCenterConst.LOGIN_BOX_POSITION, "default");
-        }
-        if (!Objects.isNull(config.get(IUserCenterConst.LOGIN_PAGE))) {
-            mv.setViewName(config.get(IUserCenterConst.LOGIN_PAGE).toString());
-        } else {
-            mv.setViewName("login");
-        }
+        pageParams.put(IUserCenterConst.LOGIN_BOX_POSITION, config.get(IUserCenterConst.LOGIN_BOX_POSITION).toString());
+        mv.addObject("pageParams", pageParams);
+        mv.addObject("customLoginForm", "<div><form action=\"123\"></form></div>");
+        mv.setViewName("login");
         return mv;
     }
 
diff --git a/login-base/src/main/resources/templates/login.html b/login-base/src/main/resources/templates/login.html
index 2d122686..a032a725 100644
--- a/login-base/src/main/resources/templates/login.html
+++ b/login-base/src/main/resources/templates/login.html
@@ -12,13 +12,13 @@
     <link rel="stylesheet" href="assets/layuiadmin/style/admin.css?v=3" media="all">
     <link rel="stylesheet" href="assets/css/supersized.css?v=3">
     <link rel="stylesheet" href="assets/layuiadmin/style/login.css?v=3" media="all">
-    <style th:if="${loginBoxPosition eq 'center'}">
+    <style th:if="${pageParams.loginBoxPosition eq 'center'}">
         .layadmin-user-login-main {
             left: 50%;
             margin-left: -188px;
         }
     </style>
-    <style th:if="${loginBoxPosition eq 'left'}">
+    <style th:if="${pageParams.loginBoxPosition eq 'left'}">
         @media screen and (max-width: 1920px) {
             .layadmin-user-login-main {
                 right: 68%;
@@ -32,303 +32,186 @@
     </style>
 </head>
 <body>
-<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login">
-    <div id="layadminUserLoginMain" class="layadmin-user-login-main" style="">
-        <div class="layadmin-user-login-box layadmin-user-login-header">
-            <img class="system-logo" th:src="'route/file/download/true/'+ ${systemLogo}" th:if="${systemLogo ne ''}">
-            <div th:class="${(systemLogo ne '') ? 'system-logo-title': ''}">
-                <h2 th:text="${systemTitle}" th:style="'font-size:'+ ${systemTitleSize} +'px'"></h2>
-                <p th:text="${systemSubTitle}" th:style="'font-size:'+ ${systemSubTitleSize} +'px'"></p>
+<div id="app">
+    <div v-cloak>
+        <div id="loginBox" class="layadmin-user-login-main">
+            <div class="layadmin-user-login-box layadmin-user-login-header">
+                <img class="system-logo" :src="'route/file/download/true/'+ pageParams.systemLogo" v-if="pageParams.systemLogo">
+                <div :class="{'system-logo-title': pageParams.systemLogo}">
+                    <h2 :style="{'font-size': (pageParams.systemTitleSize ? pageParams.systemTitleSize : 26) +'px'}">{{pageParams.systemTitle}}</h2>
+                    <p :style="{'font-size': (pageParams.systemSubTitleSize ? pageParams.systemSubTitleSize : 16) +'px'}">{{pageParams.systemSubTitle}}</p>
+                </div>
             </div>
-        </div>
-        <div id="userLoginBox" class="layadmin-user-login-box layadmin-user-login-body layui-form" lay-filter="LAY-form-signin">
-            <form id="LAY-form-signin" action="userlogin" method="post">
-                <input type="hidden" name="loginType" id="LAY-user-login-logintype" value="1">
-                <input type="hidden" name="uKey" id="LAY-user-login-ukey" value="">
-                <div class="layui-form-item">
-                    <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
-                    <input type="text" name="username" id="LAY-user-login-username" lay-verify="required" placeholder="用户名" class="layui-input">
-                </div>
-                <div class="layui-form-item" id="passwordBox">
-                    <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
-                    <input type="password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="密码" class="layui-input">
-                </div>
-                <div class="layui-form-item" id="verificationCodeBox" th:if="${verificationCode eq 'true'}">
-                    <!-- 验证码 -->
-                    <div class="layui-row">
-                        <div class="layui-col-xs7">
-                            <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label>
-                            <input type="text" name="verificationCode" id="LAY-user-login-vercode" lay-verify="required" placeholder="图形验证码" class="layui-input">
-                        </div>
-                        <div class="layui-col-xs5">
-                            <div style="margin-left: 10px;">
-                                <img src="oauth/verification-code/png" class="layadmin-user-login-codeimg" id="LAY-user-get-vercode">
+            <div id="loginFormBox" class="layadmin-user-login-box layadmin-user-login-body layui-form">
+                <form id="loginForm" action="userlogin" method="post" @submit.prevent="submitForm">
+                    <div class="layui-form-item">
+                        <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="username"></label>
+                        <input type="text" v-model="formData.username" id="username" name="username" lay-verify="username" placeholder="用户名" class="layui-input">
+                    </div>
+                    <div class="layui-form-item" id="passwordBox">
+                        <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="password"></label>
+                        <input type="password" v-model="formData.password" id="password" name="password" lay-verify="password" placeholder="密码" class="layui-input">
+                    </div>
+                    <div class="layui-form-item" id="verificationCodeBox" v-if="pageParams.verificationCode == 'true'">
+                        <!-- 验证码 -->
+                        <div class="layui-row">
+                            <div class="layui-col-xs7">
+                                <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="verificationCode"></label>
+                                <input type="text" v-model="formData.verificationCode" id="verificationCode" name="verificationCode" lay-verify="verificationCode" placeholder="图形验证码" class="layui-input">
+                            </div>
+                            <div class="layui-col-xs5">
+                                <div style="margin-left: 10px;">
+                                    <img src="oauth/verification-code/png" class="layadmin-user-login-codeimg" id="LAY-user-get-vercode">
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-                <div class="layui-form-item u-key-box" id="uKeyBox" th:if="${uKeyLogin eq 'true'}">
-                    <!-- ukey登录 -->
-                    <span id="checkUKey">【检测UKey中...】</span>
-                    <span class="get-u-key" id="getUKey">【UKey已插入】</span>
-                </div>
-                <div class="layui-form-item remember-password" id="rememberPassword">
-                    <input type="checkbox" name="remember" lay-filter="LAY-user-login-remember" lay-skin="primary" title="记住密码">
-                    <!--<a href="forget.html" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码？</a>-->
-                </div>
-                <div class="layui-form-item">
-                    <button class="layui-btn layui-btn-fluid" id="LAY-user-login-submit" lay-submit lay-filter="LAY-user-login-submit">登 入</button>
-                </div>
-                <div id="otherLoginBox" class="other-login-box" th:if="${scanCodeLogin ne 'false'}">
-                    <!-- 钉钉扫码 -->
-                    <div th:if="${scanCodeLogin eq 'dingDingScanCode'}">
-                        <img src="assets/images/login/dingding.png" style="width: 16px;">
-                        <a href="javascript:void(0);" id="dingDingScanCodeBtn">钉钉扫码</a>
+                    <div class="layui-form-item remember-password" id="rememberPassword">
+                        <input type="checkbox" v-model="formData.remember" name="remember" lay-skin="primary" title="记住密码" lay-filter="rememberFilter">
                     </div>
-                </div>
-            </form>
-        </div>
-        <div id="dingDingScanCodeBox" class="ding-ding-scan-code-box" th:if="${scanCodeLogin eq 'dingDingScanCode'}">
-            <!-- 钉钉扫码登录 -->
-            <div class="code-box">
-                <div id="dingDingScanCode"></div>
-                <a id="cancelDingDingScanCodeBtn" class="cancel-ding-ding-scan-code-btn" href="javascript:void(0);">取消扫码</a>
+                    <div class="layui-form-item">
+                        <button type="submit" class="layui-btn layui-btn-fluid" lay-submit>登 录</button>
+                    </div>
+                </form>
             </div>
         </div>
-        <input type="hidden" id="errorMessage" th:value="${errorMessage}"/>
-    </div>
-    <div class="layui-trans layadmin-user-login-footer footer-text">
-        <p th:if="${copyRightYear ne ''}"><span th:text="${'© '+ copyRightYear +' '}"></span><a href="javascript:void(0);" th:if="${copyleft ne ''}" th:text="${copyleft}"></a></p>
-        <p th:if="${officialUrl ne ''}">
-            <span><a th:href="@{${officialUrl}}" target="_blank">前往官网</a></span>
-        </p>
+        <div class="layui-trans layadmin-user-login-footer footer-text">
+            <p v-if="pageParams.copyRightYear"><span>{{'© '+ pageParams.copyRightYear +' '}}</span><a href="javascript:void(0);" v-if="pageParams.copyleft">{{pageParams.copyleft}}</a></p>
+            <p v-if="pageParams.officialUrl">
+                <span><a :href="pageParams.officialUrl" target="_blank">前往官网</a></span>
+            </p>
+        </div>
     </div>
 </div>
-<div style="display: none">
-    <object type="application/x-dongle" id="uKey"></object>
-</div>
-<input type="hidden" id="serverUrl" th:value="${serverUrl +'/userlogin/dingding'}">
-<input type="hidden" id="dingDingScanCodeAppId" th:value="${dingDingScanCodeAppId}" th:if="${scanCodeLogin eq 'dingDingScanCode'}">
-<input type="hidden" id="loginBackgroundImages" th:value="${loginBackgroundImages}">
-<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js" th:if="${scanCodeLogin eq 'dingDingScanCode'}"></script>
-<script src="assets/layuiadmin/layui/layui.js"></script>
-<script>
+<script type="text/javascript" src="assets/js/vue.min.js"></script>
+<script type="text/javascript" src="assets/layuiadmin/layui/layui.js"></script>
+<script type="text/javascript" th:inline="javascript">
     layui.config({
         base: 'assets/layuiadmin/'
     }).extend({
         index: 'lib/index'
-    }).use(['index', 'user', 'cookie', 'md5', 'base64', 'supersized', 'common', 'ftukey', 'restajax'], function () {
+    }).use(['index', 'form', 'cookie', 'md5', 'base64', 'supersized', 'common', 'ftukey', 'restajax'], function () {
         var $ = layui.$;
         var form = layui.form;
         var layer = layui.layer;
         var cookie = layui.cookie;
         var md5 = layui.md5;
         var base64 = layui.base64;
-        var common = layui.common;
-        var ftukey = layui.ftukey;
-        var restAjax = layui.restajax;
-        var isCheckLoginType = false;
 
-        var pageData = {
-            remember: false
-        };
-        // 显示错误信息
-        var errorMessage = $('#errorMessage').val();
-        if (errorMessage != '') {
-            layer.msg(errorMessage);
-        }
-        // 初始化背景
-        function initBackground() {
-            var loginBackgroundImages = $('#loginBackgroundImages').val();
-            var photos = [];
-            if(loginBackgroundImages != '') {
-                var loginBackgroundImageArray = loginBackgroundImages.split(',');
-                for(var i = 0, item = loginBackgroundImageArray[i]; item = loginBackgroundImageArray[i++];) {
-                    photos.push({
-                        image: 'route/file/download/true/'+ item
-                    })
+        new Vue({
+            el: '#app',
+            data: {
+                pageParams: [[${pageParams}]],
+                formData: {
+                    verificationCode: '',
+                    username: '',
+                    password: '',
+                    remember: false
                 }
-            } else {
-                for(var i = 1; i <= 9; i++) {
-                    photos.push({
-                        image: 'assets/images/backgrounds/'+ i +'.jpg'
-                    })
-                }
-            }
-            $.supersized({
-                slide_interval     : 4000,    // Length between transitions
-                transition         : 1,    // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
-                transition_speed   : 1000,    // Speed of transition
-                performance        : 1,    // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
-                // Size & Position
-                min_width          : 0,    // Min width allowed (in pixels)
-                min_height         : 0,    // Min height allowed (in pixels)
-                vertical_center    : 1,    // Vertically center background
-                horizontal_center  : 1,    // Horizontally center background
-                fit_always         : 0,    // Image will never exceed browser width or height (Ignores min. dimensions)
-                fit_portrait       : 1,    // Portrait images will not exceed browser height
-                fit_landscape      : 0,    // Landscape images will not exceed browser width
-                // Components
-                slide_links        : 'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
-                slides             : photos
-            });
-        }
-        initBackground();
-
-        // 记住密码
-        form.on('checkbox(LAY-user-login-remember)', function(data){
-            pageData.remember = data.elem.checked;
-        });
-
-        //提交
-        form.on('submit(LAY-user-login-submit)', function (obj) {
-            if(pageData.remember) {
-                cookie.setCookie('rememberMe', base64.encode(obj.field.username +'_$cm$_'+ obj.field.password), 30);
-            } else {
-                cookie.setCookie('rememberMe', '', 0);
-            }
-            $('#LAY-user-login-password').val(md5(md5(md5(obj.field.password))));
-            layer.msg('正在登录，请稍后...', {icon: 16, shade: 0.1, time: 0});
-        });
-
-        $('#dingDingScanCodeBtn').on('click', function() {
-            $('#userLoginBox').hide();
-            var url = encodeURIComponent($('#serverUrl').val());
-            var appId = $('#dingDingScanCodeAppId').val();
-            var obj = DDLogin({
-                id: 'dingDingScanCode',
-                goto: encodeURIComponent('https://oapi.dingtalk.com/connect/qrconnect?appid='+ appId +'&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+ url),
-                style: 'border:none; background-color:#FFFFFF;',
-                width : '100%',
-                height: '320'
-            });
-            $('#dingDingScanCodeBox').show();
-
-            var handleMessage = function (event) {
-                var origin = event.origin;
-                if( origin == "https://login.dingtalk.com" ) {
-                    var loginTmpCode = event.data;
-                    var snsAuthorizeHref = 'https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid='+ appId +'&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+ url +'&loginTmpCode='+ loginTmpCode;
-                    window.location.href = snsAuthorizeHref;
-                }
-            };
-            // 添加监听事件
-            if (typeof window.addEventListener != 'undefined') {
-                window.addEventListener('message', handleMessage, false);
-            } else if (typeof window.attachEvent != 'undefined') {
-                window.attachEvent('onmessage', handleMessage);
-            }
-        });
-
-        $('#cancelDingDingScanCodeBtn').on('click', function() {
-            $('#dingDingScanCodeBox').hide();
-            $('#userLoginBox').show();
-        });
-
-        // 记住我
-        var rememberMe = cookie.getCookie('rememberMe');
-        if(null != rememberMe && '' != rememberMe) {
-            var rememberMes = base64.decode(rememberMe).split('_$cm$_');
-            $('#LAY-user-login-username').val(rememberMes[0]);
-            $('#LAY-user-login-password').val(rememberMes[1])
-            pageData.remember = true;
-            form.val('LAY-form-signin', {
-                remember: true
-            });
-        }
-        // 刷新表单
-        form.render();
-
-        // 初始化表单
-        function initLoginForm(uKeyData) {
-            if(uKeyData.UserLoginName.length == 0) {
-                return;
-            }
-            $('#LAY-user-login-username').val(uKeyData.UserLoginName);
-            var loadLayerIndex;
-            restAjax.get(restAjax.path('api/user/getsignintype/{userUsername}', [uKeyData.UserLoginName]), {}, null, function(code, data) {
-                if(data.data != 1 && data.data != 2 && data.data != 3) {
-                    layer.msg('用户登录类型错误，请使用用户名和密码登录');
-                    return;
-                }
-                $('#LAY-user-login-logintype').val(data.data);
-                if(data.data == 1) {
-                    return;
-                }
-                // 隐藏验证码
-                if($('#verificationCodeBox')) {
-                    $('#verificationCodeBox').hide();
-                }
-                $('#LAY-user-login-vercode').removeAttr('lay-verify');
-                if(data.data === 2) {
-                    return;
-                }
-                $('#LAY-user-login-password').removeAttr('lay-verify');
-                $('#passwordBox').hide();
-                $('#rememberPassword').hide();
-                $('#uKeyBox').css('marginBottom', '20px');
-                if(data.data === 3) {
-                    return;
-                }
-            }, function(code, data) {
-                layer.msg(data.msg);
-            }, function() {
-                loadLayerIndex = layer.msg('查询登录类型，请稍后...', {icon: 16, time: 0, shade: 0.3});
-            }, function() {
-                layer.close(loadLayerIndex);
-            });
-        }
-        // 检查UKey
-        function checkUKey() {
-            var ukeyData = ftukey.ReadUKeyData();
-            if(ukeyData.success && ukeyData.data.length != 0) {
-                if(!isCheckLoginType) {
-                    isCheckLoginType = true;
-                    $('#LAY-form-signin').attr('action', 'userlogin/ukey');
-                    $('#checkUKey').hide();
-                    $('#getUKey').show();
-                    setTimeout(function() {
-                        var data = ftukey.ParseJson(ukeyData.data);
-                        $('#LAY-user-login-ukey').val(ukeyData.hid);
-                        initLoginForm(data);
-                    }, 500);
-                }
-            } else {
-                if(isCheckLoginType) {
-                    isCheckLoginType = false;
-                    $('#LAY-form-signin').attr('action', 'userlogin');
-                    $('#LAY-user-login-vercode').attr('lay-verify', 'required');
-                    $('#LAY-user-login-password').attr('lay-verify', 'required');
-                    if($('#verificationCodeBox')) {
-                        $('#verificationCodeBox').show();
+            },
+            methods: {
+                showErrorMessage: function() {
+                    var self = this;
+                    if(self.pageParams.errorMessage) {
+                        layer.msg(self.pageParams.errorMessage);
                     }
-                    $('#passwordBox').show();
-                    $('#rememberPassword').show();
-                    $('#uKeyBox').css('marginBottom', '0px');
-                    $('#getUKey').hide();
-                    $('#checkUKey').show();
-                }
+                },
+                initBackground: function() {
+                    var self = this;
+                    var loginBackgroundImages = self.pageParams.loginBackgroundImages;
+                    var photos = [];
+                    if(loginBackgroundImages) {
+                        var loginBackgroundImageArray = loginBackgroundImages.split(',');
+                        for(var i = 0, item = loginBackgroundImageArray[i]; item = loginBackgroundImageArray[i++];) {
+                            photos.push({
+                                image: 'route/file/download/true/'+ item
+                            })
+                        }
+                    } else {
+                        for(var i = 1; i <= 9; i++) {
+                            photos.push({
+                                image: 'assets/images/backgrounds/'+ i +'.jpg'
+                            })
+                        }
+                    }
+                    $.supersized({
+                        slide_interval     : 4000,    // Length between transitions
+                        transition         : 1,    // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
+                        transition_speed   : 1000,    // Speed of transition
+                        performance        : 1,    // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
+                        // Size & Position
+                        min_width          : 0,    // Min width allowed (in pixels)
+                        min_height         : 0,    // Min height allowed (in pixels)
+                        vertical_center    : 1,    // Vertically center background
+                        horizontal_center  : 1,    // Horizontally center background
+                        fit_always         : 0,    // Image will never exceed browser width or height (Ignores min. dimensions)
+                        fit_portrait       : 1,    // Portrait images will not exceed browser height
+                        fit_landscape      : 0,    // Landscape images will not exceed browser width
+                        // Components
+                        slide_links        : 'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
+                        slides             : photos
+                    });
+                },
+                // 记住我
+                rememberMe: function() {
+                    var self = this;
+                    var rememberMe = cookie.getCookie('rememberMe');
+                    if(rememberMe) {
+                        var rememberMes = base64.decode(rememberMe).split('_$WG$_');
+                        self.formData.username = rememberMes[0];
+                        self.formData.password = rememberMes[1];
+                        self.formData.remember = true;
+                    }
+                    self.$nextTick(function() {
+                        form.render();
+                    });
+                },
+                // 提交表单
+                submitForm: function() {
+                    var self = this;
+                    if(self.formData.remember) {
+                        cookie.setCookie('rememberMe', base64.encode(self.formData.username +'_$WG$_'+ self.formData.password), 30);
+                    } else {
+                        cookie.setCookie('rememberMe', '', 0);
+                    }
+                    layer.msg('正在登录，请稍后...', {icon: 16, shade: 0.1, time: 0});
+                    self.formData.password = md5(md5(md5(self.formData.password)));
+                    self.$nextTick(function() {
+                        $('#loginForm').submit();
+                    })
+                },
+
+            },
+            mounted: function() {
+                var self = this;
+                self.showErrorMessage();
+                self.initBackground();
+                self.rememberMe();
+                // 复选框勾选事件
+                form.on('checkbox(rememberFilter)', function(data) {
+                    self.formData.remember = data.elem.checked;
+                    console.log(self.formData.remember);
+                });
+                // 保单验证
+                form.verify({
+                    username: function(value, item) {
+                        if(!value){
+                            return '用户名不能为空';
+                        }
+                    },
+                    password: function(value, item) {
+                        if(!value) {
+                            return '密码不能为空';
+                        }
+                    },
+                    verificationCode: function(value, item) {
+                        if(!value) {
+                            return '验证码不能为空';
+                        }
+                    }
+                });
             }
-            setTimeout(function() {
-                checkUKey();
-            }, 1000);
-        }
-        // 初始化UKey监听器
-        function initUKeyListener() {
-            if (common.getBrowserType() != 'IE') {
-                return;
-            }
-            if (common.getIEBrowserVersion() != '11') {
-                return;
-            }
-            $('#uKeyBox').show();
-            setTimeout(function() {
-                checkUKey();
-            }, 1000);
-        }
-        if($('#uKeyBox')) {
-            initUKeyListener();
-        }
+        })
     });
 </script>
 </body>