登录页面

src/main/java/com/caimei/www/controller/authorized/AccountController.java

@@ -1,5 +1,6 @@
 package com.caimei.www.controller.authorized;
 
+import com.caimei.www.controller.BaseController;
 import com.caimei.www.service.AccountService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
@@ -12,7 +13,7 @@ import org.springframework.web.bind.annotation.GetMapping;
  * @date : 2020/7/24
  */
 @Controller
-public class AccountController {
+public class AccountController extends BaseController {
 
 	private static final String LOGIN_PATH = "account/login";
 	private static final String SIGN_UP_PATH = "account/sign-up";

src/main/resources/static/css/account/login.css

@@ -4,6 +4,40 @@ li{list-style:none}
  * PC端
  */
 @media screen and (min-width:768px){
+footer .footTop{display:none;}
+.baseHeadCenter .wrap{padding-top:20px}
+.loginWrap{width:950px;height:366px;overflow:hidden;background:#FFF url(/img/base/login.png) no-repeat 30px center;margin:95px auto;box-sizing:border-box;box-shadow:0 10px 20px 0 rgba(255,180,150,0.17);border-radius:2px}
+.loginForm{float:right;width:400px;padding:20px 24px;font-size:14px;position:relative}
+.loginForm h1{color:#22272e;font-size:24px;font-weight:bold;line-height:30px}
+.loginForm h2{color:#22272e;font-size:16px;font-weight:normal;line-height:24px}
+.loginForm form{margin-top:60px}
+.loginForm input{box-sizing:border-box;display:block;width:100%;height:48px;line-height:48px;background-color:#ffffff;border-radius:2px;border:solid 1px #b8bfca;text-indent:1.2em;font-size:14px}
+.loginForm .error input{border-color:#f94b4b}
+.loginForm input:focus{border-color:#ffe6dc;}
+.loginForm label{display:block;height:70px;width:100%;position:relative}
+.loginForm .checked{position:absolute;width:20px;height:20px;top:14px;right:5px;display:none}
+.loginForm .checked:before{width:20px;height:20px;background-position:-138px -296px}
+.loginForm .errTips{display:block;height:20px;line-height:20px;white-space:nowrap;color:red;font-size:12px;visibility:hidden}
+.loginForm .checked.show{display:block}
+.loginForm .errTips.show{visibility:visible}
+.loginForm .errTips:before{width:20px;height:20px;background-position:-172px -296px;vertical-align:top}
+.loginForm .forget{text-align:right;color:#4a4f58;font-size:14px;line-height:14px;margin-top:-10px}
+.loginForm .submit{height:44px;line-height:0;font-size:0;text-align:justify;margin-top:20px}
+.loginForm .submit:after{content:'';display:inline-block;width:100%}
+.loginForm .submit .btn{display:inline-block;box-sizing:border-box;width:192px;height:44px;line-height:44px;background-color:#ffe6dc;border-radius:2px;border:solid 1px #e15616;text-align:center;color:#e15616;font-size:14px;cursor:pointer}
+.loginForm .submit button.btn{background-color:#e15616;color:#FFF}
+.loginForm .submit .btn:hover{opacity:.8}
+.loginForm .codeBtn{position:absolute;right:0;top:0;width:100px;height:100px}
+.loginForm .codeBtn:before{width:100px;height:100px;background-position:-124px -454px}
+.loginForm .qrCodeBox{text-align:center}
+.loginForm .qrCode{width:168px;height:168px;border-radius:2px;border:solid 1px #ffb496;margin:27px auto 0 auto}
+.loginForm .qrInfo{text-align:center;height:44px;line-height:44px;font-size:16px;color:#93979f}
+.loginForm .changeBtn{display:inline-block;height:24px;line-height:24px;color:#e15616;font-size:16px;position:absolute;right:24px;top:20px}
+.loginForm .changeBtn:before{width:24px;height:24px;background-position:-175px -251px;vertical-align:top;margin-right:6px}
+.loginForm .showPwd{position:absolute;right:22px;top:16px;width:22px;height:16px;cursor:pointer}
+.loginForm .showPwd:before{width:22px;height:20px;background-position:-240px -299px}
+.loginForm .showPwd.on:before{width:22px;height:20px;background-position:-205px -299px}
+
 
 
 }
@@ -12,5 +46,29 @@ li{list-style:none}
 * 移动端
 */
 @media screen and (max-width:768px){
+body{background:#FFF}
+footer{display:none}
+header .baseHeadCenter{height:13.4vw;border-bottom:solid 1px #ebecef}
+header .closeLogin{float:right;padding:3.5vw 2.8vw;width:6.4vw;height:6.4vw;text-align:center}
+header .closeLogin:before{content:'\2715';font-size:4.5vw;font-weight:bold}
+.loginForm{padding-top:4vw;text-align:center;background:#FFF url(/img/base/login_m.png) no-repeat center 25vw;background-size:57vw 43.2vw}
+.loginForm h1{color:#22272e;font-size:6.4vw;font-weight:bold;line-height:10vw}
+.loginForm h2{font-size:3.1vw;font-weight:normal;line-height:5.4vw;color:#627386}
+.loginForm form{width:93.4vw;margin:54vw auto 0}
+.loginForm input{box-sizing:border-box;display:block;width:100%;height:11.6vw;line-height:11.6vw;background-color:#ffffff;border-radius:2px;border:solid 1px #b8bfca;text-indent:1.2em;font-size:3.4vw;text-align:left}
+.loginForm .error input{border-color:#f94b4b}
+.loginForm input:focus{border-color:#ffe6dc;}
+.loginForm label{display:block;height:16.4vw;width:100%;position:relative}
+.loginForm .checked{position:absolute;width:4.4vw;height:4.4vw;top:3.6vw;right:3.6vw;display:none}
+.loginForm .checked:before{width:4.4vw;height:4.4vw;background-position:22.5% 32.1%}
+.loginForm .errTips{display:block;height:4.4vw;line-height:4.4vw;white-space:nowrap;color:red;font-size:3vw;text-align:left;visibility:hidden}
+.loginForm .checked.show{display:block}
+.loginForm .errTips.show{visibility:visible}
+.loginForm .errTips:before{width:4.4vw;height:4.4vw;background-position:33% 32.1%;vertical-align:top}
+.loginForm .forget{text-align:right;color:#4a4f58;font-size:3.4vw;line-height:3.4vw;margin-bottom:4.8vw}
+.loginForm .submit .btn{display:inline-block;box-sizing:border-box;width:100%;height:11.2vw;line-height:11.2vw;background-color:#ffe6dc;border-radius:2px;border:solid 1px #e15616;text-align:center;color:#e15616;font-size:3.4vw;margin-bottom:4.8vw}
+.loginForm .submit button.btn{background-color:#e15616;color:#FFF;margin-bottom:4.8vw}
+.loginForm .showPwd{display:none;}
+
 
 }

src/main/resources/static/js/account/login.js

@@ -1,13 +1,129 @@
 var loginPage = new Vue({
     el: "#loginPage",
     data: {
-
+        loginLoading: false,
+        qrCodeLogin: false,
+        loginAccount: '',
+        loginPassword: '',
+        rule:{
+            account: "(^([\\w-\\.]+)@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.)|(([\\w-]+\\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\\]?)$)|(^\\d{6,12}$)",
+            password: "^[^\\u4e00-\\u9fa5]{6,30}$"
+        },
+        userData: {
+            account: '',
+            email: '',
+            phone: '',
+            name: '',
+            userName: '',
+            userId: '',
+            spId: '',
+            clubId: '',
+            shopId: '',
+            identity: '',
+            permission: '',
+            token: ''
+        }
     },
     computed: {
 
     },
     methods: {
-
+        toQrCodeLogin: function(){
+            this.qrCodeLogin = true;
+            $.get(spiServer + '/user/toWechatLogin').done(function(res){
+                var obj = new WxLogin({
+                    self_redirect: true,
+                    id: "qrCodeWrap",
+                    appid: res.data.AppId,
+                    scope: 'snsapi_login',
+                    redirect_uri: res.data.redirect_uri,
+                    state: res.data.state,
+                    style: "black",
+                    href: "https://www-b.caimei365.com/web/login/css/login.css"
+                });
+            }).fail(function(err){
+                console.log(err);
+                alertInfo('网络连接超时，请稍后重试！');
+            });
+        },
+        toNormalLogin: function(){
+            this.qrCodeLogin = false;
+        },
+        showPassword: function(event) {
+            var el = event.currentTarget;
+            var pwdEle = $(el).siblings('input');
+            if(pwdEle.attr('type') === 'password') {
+                $(el).addClass('on');
+                pwdEle.attr('type','text');
+            } else {
+                $(el).removeClass('on');
+                pwdEle.attr('type','password');
+            }
+        },
+        // 失去焦点校验
+        blurHandle: function(event) {
+            var el = event.currentTarget;
+            verifyHandle(el);
+        },
+        // 验证表单
+        verifyForm: function () {
+            var _self = this;
+            $("[needverify]:visible").each(function (index, ele) {
+                if (!$(ele).siblings('.checked').hasClass("show")) {
+                    verifyHandle(ele);
+                }
+            });
+            var len = $('.errTips.show:visible').length;
+            return (len === 0);
+        },
+        // 提交登录
+        loginSubmit: function () {
+            var _self = this;
+            var pass = this.verifyForm();
+            if (this.loginLoading) { return false; }
+            this.$nextTick(function(){
+                if (!pass) { return false; }
+                _self.loginLoading = true;
+                $.post(spiServer + '/user/login',{
+                    mobileOrEmail: _self.loginAccount,
+                    password: _self.loginPassword,
+                    source: 'www'
+                }).done(function(res){
+                    _self.loginLoading = false;
+                    if(res.code === 0){
+                        _self.userData = {
+                            account: res.data.account,
+                            email: res.data.email,
+                            phone: res.data.bindMobile,
+                            name: res.data.name,
+                            userName: res.data.userName,
+                            userId: res.data.userID,
+                            spId: res.data.serviceProviderID,
+                            clubId: res.data.clubID,
+                            shopId: res.data.shopID,
+                            identity: res.data.userIdentity,
+                            permission: res.data.userPermission,
+                            token: res.data.token
+                        };
+                        localStorage.setItem('userInfo',JSON.stringify(_self.userData));
+                        // 登录成功页面跳转
+                        /*var beforePath = localStorage.getItem("loginBeforePath");
+                        if (beforePath) {
+                            window.location.href = beforePath;
+                        }else{
+                            window.location.href = '/index.html';
+                        }*/
+                    } else {
+                        // 登录失败
+                        alertInfo(res.msg);
+                    }
+                }).fail(function(err){
+                    console.log(err);
+                    alertInfo('登录失败，请稍后重试！');
+                    _self.loginLoading = false;
+                });
+            });
+        },
 
     },
     created: function () {
@@ -15,5 +131,8 @@ var loginPage = new Vue({
     },
     mounted: function () {
         var _self = this;
+        $('body').on("focus",'[needverify]:visible',function(){
+            $(this).siblings('.errTips').removeClass("show").siblings('.checked').removeClass("show");
+        })
     }
 });

src/main/resources/static/js/base.js

@@ -185,6 +185,7 @@ $(function(){
     });
 
 
+
 });
 // 公共方法
 function jqClickShow(tab, con){
@@ -354,3 +355,59 @@ function toFloat(num) {
     return Number(num);
   }
 }
+
+/** 表单输入框校验 */
+function verifyHandle(obj){
+    if ($(obj).is(":hidden")) { return false; }
+    var v = $.trim($(obj).val()).replace(/\s+/g,"");
+    var reg = $(obj).attr("rule");
+    var errorTxt = $(obj).siblings('.errTips').attr("tips");
+    if ($.trim(v) === '') {
+        if ($(obj).attr("placeholder").indexOf("请输入")>=0) {
+            errorTxt = $(obj).attr("placeholder").split("请输入")[1]+'不能为空';
+        } else {
+            errorTxt = '不能为空';
+        }
+        setErrorTxt(obj, errorTxt);
+        return false;
+    }else if (typeof reg != "undefined") {
+        reg = new RegExp(reg);
+        if (!reg.test(v)) {
+            setErrorTxt(obj, errorTxt);
+            return false;
+        }
+    }
+    clearErrorTxt(obj);
+}
+function setErrorTxt(obj, txt) {
+    $(obj).parent().addClass("error").find('.checked').removeClass("show");
+    $(obj).siblings('.errTips').text(txt).addClass("show");
+}
+function clearErrorTxt(obj) {
+    $(obj).siblings('.errTips').removeClass("show");
+    $(obj).parent().removeClass("error").find('.checked').addClass("show");
+}
+
+
+
+// 公共信息提示弹框
+function alertInfo(txt) {
+    $.confirm({
+        useBootstrap: false,
+        boxWidth: (isPC?'300px':'70%'),
+        title:'提示',
+        content: txt,
+        closeIcon: true,
+        animation: 'opacity',
+        closeAnimation: 'opacity',
+        animateFromElement: false,
+        buttons: {
+            close: {
+                text: '确定',
+                btnClass: 'btn-confirm'
+            }
+        }
+    });
+}
+
+

src/main/resources/templates/account/login.html

@@ -7,17 +7,67 @@
     <link th:href="@{/css/account/login.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
 <body>
-<!-- 引用头部 -->
-<template th:replace="components/header"></template>
+<!--头部-->
+<header>
+    <div class="baseHeadCenter">
+        <div class="wrap clear">
+            <a href="javascript:void(0);" class="h5Only mClassBtn mIcon" title="分类"></a>
+            <a href="/" class="logo">
+                <img class="pcOnly" src="/img/base/logo.png" alt="采美 生美/医美采购服务平台"/>
+                <img class="h5Only" src="/img/base/logo_m.png" alt="采美 生美/医美采购服务平台"/>
+            </a>
+            <a href="javascript:void(0);" title="关闭" class="h5Only closeLogin"></a>
+        </div>
+    </div>
+    <input type="hidden" th:value="${spiServer}" id="spiServer">
+    <input type="hidden" th:value="${agent}" id="userAgent">
+</header>
 
 <!-- 二级页面 -->
 <div id="loginPage">
-
+    <div class="loginWrap clear">
+        <div class="loginForm">
+            <div class="title">
+                <h1>欢迎登录</h1>
+                <h2>生美 / 医美采购服务平台</h2>
+            </div>
+            <form v-show="!qrCodeLogin">
+                <label class="account">
+                    <input type="text" v-model="loginAccount" placeholder="请输入邮箱或手机号" :rule="rule.account" maxlength="30" @blur="blurHandle($event)" needverify>
+                    <i class="checked icon mIcon"></i>
+                    <span class="errTips icon mIcon" tips="请提供正确的邮箱或手机号码"></span>
+                </label>
+                <label class="password">
+                    <input type="password" v-model="loginPassword" placeholder="请输入密码" :rule="rule.password" maxlength="36" @blur="blurHandle($event)" needverify>
+                    <i class="checked icon mIcon"></i>
+                    <span class="errTips icon mIcon" tips="6-30位数字或字母或字符"></span>
+                    <i class="icon showPwd" @click="showPassword($event)"></i>
+                </label>
+                <div class="forget">
+                    <a href="javascript:void(0);">忘记密码？</a>
+                </div>
+                <div class="submit clear">
+                    <a v-if="isPC" class="btn" href="javascript:void(0);">免费注册</a>
+                    <button class="btn" type="button" @click="loginSubmit()">登录</button>
+                    <a v-if="!isPC" class="btn" href="javascript:void(0);">免费注册</a>
+                </div>
+                <a v-if="isPC" href="javascript:void(0);" class="codeBtn icon" @click="toQrCodeLogin()"></a>
+            </form>
+            <div v-if="isPC" v-show="qrCodeLogin" class="qrCodeBox">
+                <a href="javascript:void(0);" class="changeBtn icon" @click="toNormalLogin()">账号登录</a>
+                <div id="qrCodeWrap">
+                    <div class="qrCode"><img src="" alt=""></div>
+                    <div class="qrInfo">请使用微信扫描二维码登录“采美365网”</div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/footLink"></template>
+<script charset="utf-8" type="text/javascript" src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/account/login.js(v=${version})}"></script>
 </body>
 </html>