注册PC

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

@@ -16,7 +16,7 @@ import org.springframework.web.bind.annotation.GetMapping;
 public class AccountController extends BaseController {
 
 	private static final String LOGIN_PATH = "account/login";
-	private static final String SIGN_UP_PATH = "account/sign-up";
+	private static final String REGISTER_PATH = "account/register";
 
     private AccountService accountService;
     @Autowired
@@ -35,9 +35,9 @@ public class AccountController extends BaseController {
     /**
      * 注册页
      */
-    @GetMapping("/sign-up.html")
+    @GetMapping("/register.html")
     public String signUp() {
-        return SIGN_UP_PATH;
+        return REGISTER_PATH;
     }
 
 }

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

@@ -1,11 +1,11 @@
 @charset "utf-8";
 li{list-style:none}
+.toLogin{display: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/account/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}
@@ -14,7 +14,7 @@ footer .footTop{display:none;}
 .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 .formLine{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}
@@ -48,9 +48,6 @@ footer .footTop{display: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/account/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}
@@ -58,7 +55,7 @@ header .closeLogin:before{content:'\2715';font-size:4.5vw;font-weight:bold}
 .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 .formLine{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}

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

@@ -0,0 +1,97 @@
+@charset "utf-8";
+li{list-style:none}
+/**
+ * PC端
+ */
+@media screen and (min-width:768px){
+body{background:#FFF;}
+footer .footTop{display:none;}
+.selectAccount{width:1184px;height:558px;margin:0 auto;text-align:center;background:url(/img/account/register.png) no-repeat center center}
+.selectAccount .title{height:42px;font-size:32px;line-height:42px;font-weight:bold;color:#22272e;padding-top:102px}
+.selectAccount .cont{margin-top:44px}
+.selectAccount .cont span{display:inline-block;width:168px;margin:0 55px;line-height:42px;color:#3b77ff;font-size:24px;cursor:pointer}
+.selectAccount .cont img{display:inline-block;width:168px;height:168px;background-color:#c2d8fa;border-radius:84px}
+
+.signAccount{width:498px;margin:0 auto}
+.signAccount .title{height:42px;line-height:42px;font-weight:bold;font-size:32px;color:#22272e;text-align:center;padding:30px}
+.signAccount .advisory{height:38px;position:relative;display:inline-block;margin-bottom:20px;cursor:pointer;}
+.signAccount .advisory>.icon{height:28px;line-height:28px;font-size:16px;color:#1890f9;}
+.signAccount .advisory>.icon:before{width:28px;height:28px;background-position:-42px -140px;vertical-align:top;margin-right:10px}
+.advisoryInfo{display:none;cursor:default;position:absolute;top:40px;left:-32px;box-sizing:border-box;width:386px;padding:32px;background:#fff;box-shadow:0 10px 20px 0 rgba(0,0,0,0.16);z-index:9}
+.advisoryInfo:before{content:'\25B2';position:absolute;top:-30px;left:26px;font-size:50px;-ms-transform:scaleX(2);-webkit-transform:scaleX(2);transform:scaleX(2);text-shadow:2px 0 10px #b8bfca;width:50px;height:30px;overflow:hidden;line-height:50px;text-align:center;color:#FFF}
+.advisoryInfo .info{margin-bottom:15px;color:#1890f9;font-size:14px}
+.advisoryInfo .btn{display:block;width:232px;height:50px;line-height:50px;margin:0 auto;font-size:18px;background-color:#ffe6dc;border-radius:2px;border:solid 1px #e15616;color:#e15616}
+.signAccount .advisory:hover .advisoryInfo{display:block;transition:all .5s}
+
+.formLine{padding-bottom:4px;font-size:14px;position:relative}
+.formLine input,.formLine select{box-sizing:border-box;width:100%;height:36px;line-height:34px;text-indent:1.2em;background-color:#FFF;border:1px solid #b8bfca;border-radius:2px}
+.formLine p{height:32px;line-height:32px}
+.formLine p em{font-style:normal;color:#f94b4b;margin:0 5px}
+.formLine p span{color:#ffb496;}
+.formLine .checked{position:absolute;width:20px;height:20px;top:40px;right:5px;display:none}
+.formLine .checked:before{width:20px;height:20px;background-position:-138px -296px}
+.formLine .errTips{display:block;height:20px;line-height:20px;white-space:nowrap;color:red;font-size:12px;visibility:hidden}
+.formLine .checked.show{display:block}
+.formLine .errTips.show{visibility:visible}
+.formLine .errTips:before{width:20px;height:20px;background-position:-172px -296px;vertical-align:top}
+.formLine .showPwd{position:absolute;right:22px;top:42px;width:22px;height:16px;cursor:pointer}
+.formLine .showPwd:before{width:22px;height:20px;background-position:-240px -299px}
+.formLine .showPwd.on:before{width:22px;height:20px;background-position:-205px -299px}
+.formLine.code input{width:312px}
+.formLine.code .checked{right:auto;left:288px}
+.formLine.code .getCode{position:absolute;right:0;top:32px;box-sizing:border-box;width:168px;height:36px;line-height:34px;text-align:center;background-color:#ffe6dc;border-radius:2px;border:solid 1px #e15616;color:#e15616;font-size:14px}
+.subLine{font-size:14px}
+.subLine input{vertical-align:top;margin-right:10px;cursor:pointer}
+.subLine a{color:#1890f9}
+.subLine a:hover{color:#e15616}
+.subLine .btn{display:block;margin:32px auto;width:232px;height:50px;line-height:50px;background-color:#e15616;border-radius:2px;text-align:center;font-size:18px;color:#FFF}
+.registerShop .tit{color:#22272e;font-size:24px;font-weight:normal;margin:20px 0}
+.supplierConfirm .cont{width:880px;height:550px;box-sizing:border-box;padding:46px;border-radius:4px;color:#333;font-size:16px;box-shadow:0 10px 20px 0 rgba(0,0,0,0.16)}
+.supplierConfirm .cont h3{text-align:center;font-size:20px}
+.supplierConfirm .cont p:first-of-type{color:#E36125;margin-top:30px}
+.supplierConfirm .cont p:nth-of-type(2){color:#666;margin:54px 0 36px 0}
+.supplierConfirm .cont li{line-height:20px;margin-bottom:20px}
+.supplierConfirm .btnLine{margin-top:64px;height:24px;line-height:24px;text-align:center;font-weight:bold;position:relative;color:#000}
+.supplierConfirm .btnLine input{margin-right:10px;vertical-align:text-top;margin-top:3px}
+.supplierConfirm .btnLine button{width:340px;height:50px;background:#E15616;color:#fff;margin-top:20px;cursor:pointer}
+.formLine .address{text-align:justify;line-height:0}
+.formLine .address select{display:inline-block;width:154px}
+.formLine .address textarea{display:inline-block;width:100%;height:114px;box-sizing:border-box;padding:10px 16px;line-height:20px;margin-top:16px}
+.formLine .radio{width:180px;height:36px;margin-right: 10px;line-height:34px;box-sizing:border-box;text-align:center;display:inline-block}
+.formLine .radio input{display:none}
+.formLine .radio i{display:block;font-style:normal;cursor:pointer;width:100%;height:100%;position:relative;overflow:hidden;border-radius:2px;background:#FFF;border:1px solid #627386;color:#627386;font-size:14px}
+.formLine .radio i:before{position:absolute;right:0;bottom:0;display:none;width:20px;height:20px;background-position:-208px -253px}
+.formLine .radio input:checked + i{border-color:#e15616;color:#e15616}
+.formLine .radio input:checked + i:before{display:block}
+.formLine .business{height:auto;position:relative}
+.formLine .business span{display:inline-block;height:34px;line-height:34px;background-color:#ffffff;border-radius:2px;border:solid 1px #b8bfca;margin:0 15px 15px 0;padding:0 45px;font-size:14px;color:#22272e}
+.formLine .business input{width:388px}
+.formLine .business a{position:absolute;right:0;bottom:0;width:92px;height:34px;line-height:34px;font-size:14px;color:#e15616;background-color:#ffe6dc;border-radius:2px;border:solid 1px #e15616;text-align:center}
+
+
+
+
+
+}
+
+/**
+* 移动端
+*/
+@media screen and (max-width:768px){
+body{background:#FFF}
+footer{display:none}
+.selectAccount{width:100%;height:90vh;text-align:center;background:url(/img/account/register.png) no-repeat bottom center;background-size:100% auto;}
+.selectAccount .title{height:6vw;font-size:4.2vw;font-weight:bold;line-height:6vw;color:#22272e;padding-top:36vw}
+.selectAccount .cont{margin-top:10vw;}
+.selectAccount .cont span{display:inline-block;width:24.8vw;margin:0 6.7vw;line-height:4.6vw;color:#3b77ff;font-size:3.4vw;cursor:pointer}
+.selectAccount .cont img{display:inline-block;width:24.8vw;height:24.8vw;background-color:#c2d8fa;border-radius:12.4vw}
+.formLine .checked{position:absolute;width:4.4vw;height:4.4vw;top:3.6vw;right:3.6vw;display:none}
+.formLine .checked:before{width:4.4vw;height:4.4vw;background-position:22.5% 32.1%}
+.formLine .errTips{display:block;height:4.4vw;line-height:4.4vw;white-space:nowrap;color:red;font-size:3vw;text-align:left;visibility:hidden}
+.formLine .checked.show{display:block}
+.formLine .errTips.show{visibility:visible}
+.formLine .errTips:before{width:4.4vw;height:4.4vw;background-position:33% 32.1%;vertical-align:top}
+.formLine .showPwd{display:none;}
+
+
+}

src/main/resources/static/css/account/sign-up.css

@@ -1,72 +0,0 @@
-@charset "utf-8";
-li{list-style:none}
-/**
- * PC端
- */
-@media screen and (min-width:768px){
-body{background:#FFF;}
-footer .footTop{display:none;}
-.baseHeadCenter {border-bottom: solid 1px #ebecef;}
-.baseHeadCenter .wrap{padding-top:20px}
-.baseHeadCenter .toLogin {
-    font-size: 20px;
-    float: right;
-    line-height: 44px;
-}
-.baseHeadCenter .toLogin a{
-   color:#E15616;margin-left:10px;
-}
-.baseHeadCenter .toLogin a:hover{text-decoration: underline;}
-.selectAccount{
-    width:1184px;
-    height:558px;
-    margin:0 auto;
-    text-align: center;
-}
-.selectAccount .title{
-	height: 42px;
-	font-size: 32px;
-	font-weight: normal;
-	line-height: 42px;
-	color: #22272e;
-	margin-top: 102px;
-}
-.selectAccount .cont{
-    margin-top:44px;
-}
-.selectAccount .cont span{
-    display: inline-block;
-    width:168px;
-    margin:0 55px;
-    line-height:42px;
-    color:#3b77ff;
-    font-size: 24px;
-    cursor: pointer;
-}
-.selectAccount .cont span:before{
-    content:'';
-    display: inline-block;
-    width:168px;
-    height:168px;
-    background-color:#c2d8fa;
-    border-radius: 84px;
-}
-
-
-
-
-}
-
-/**
-* 移动端
-*/
-@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}
-
-
-
-}

src/main/resources/static/css/base/base.h5.css

@@ -41,6 +41,10 @@
 .baseHeadCenter .search .keyword{position:absolute;right:0;top:0;border:none;outline:none;width:66.4vw;height:9.6vw;line-height:9.6vw;font-size:3.7vw;color:#4A4F58;text-indent:2.6vw}
 .baseHeadCenter .search .searchBtn{position:absolute;right:1.2vw;top:0}
 .baseHeadCenter .search .searchBtn:before{content:'';display:block;width:9.6vw;height:9.6vw;background-position:33% -1%}
+.baseHeadCenter.account{height:13.4vw;border-bottom:solid 1px #ebecef}
+.baseHeadCenter.account .closeAccount{float:right;padding:3.5vw 2.8vw;width:6.4vw;height:6.4vw;text-align:center}
+.baseHeadCenter.account .closeAccount:before{content:'\2715';font-size:4.5vw;font-weight:bold}
+.baseHeadCenter.account .accountLogin{display:none;}
 /* 分类 */
 .classifyBox{display:none;background:#F7F7F7;overflow:hidden}
 .classifyBox .clsHead{position:relative;background:#FFF}

src/main/resources/static/css/base/base.pc.css

@@ -57,6 +57,12 @@ body{min-width:1184px;}
 .baseHeadCenter .hotKey{color:#FFB496;font-size:12px;line-height:24px}
 .baseHeadCenter .hotKey .word{padding:0 5px;font-style:normal;cursor:pointer;}
 .baseHeadCenter .hotKey .word:hover{color:#E15616}
+.baseHeadCenter.account{border-bottom:1px solid #E15616}
+.baseHeadCenter.account .wrap{padding-top:20px}
+.baseHeadCenter.account .accountLogin{font-size:20px;float:right;line-height:44px}
+.baseHeadCenter.account .accountLogin a{color:#E15616;margin-left:10px}
+.baseHeadCenter.account .accountLogin a:hover{text-decoration:underline}
+
 /* 购物车 */
 .baseHeadCenter .headCart{width:184px;height:44px;float:right;position:relative;}
 .baseHeadCenter .headCart .addBtn{display:inline-block;width:100%;height:44px;line-height:44px;box-sizing:border-box;border:1px solid #FFE6DC;position:relative;color:#333;font-size:14px;text-align:center;white-space:nowrap}

src/main/resources/static/js/account/sign-up.js → src/main/resources/static/js/account/register.js

@@ -1,16 +1,55 @@
-var signPage = new Vue({
-    el: "#signUpPage",
+var registerPage = new Vue({
+    el: "#registerPage",
     data: {
         advisoryStatus: false,
         advisory:{
             name: '',
             phone: ''
+        },
+        clubUser: {
+            name:'',
+            phone:'',
+            code:'',
+            password:'',
+            password2:''
+        },
+        supplierUser: {
+            phone:'',
+            code:'',
+            password:'',
+            password2:'',
+            shopName:'',
+            name:'',
+            email:'',
+            shopAbbr:'',
+            firstShopType:'',
+            businessLicense:'',
+            businessLicenseImage:''
+        },
+        rule:{
+            name: '^[a-zA-Z\\u4e00-\\u9fa5]{2,}$',
+            phone: '^\\d{6,12}$',
+            code: '^\\d{6}$',
+            license: '^[a-zA-Z0-9_]{18}$',
+            email: '^(([^<>()\\[\\]\\\\.,;:\\s@&quot;]+(\\.[^<>()\\[\\]\\\\.,;:\\s@&quot;]+)*)|(&quot;.+&quot;))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$',
+            password: "^[^\\u4e00-\\u9fa5]{8,16}$"
         }
     },
     computed: {
 
     },
     methods: {
+        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;
@@ -27,7 +66,9 @@ var signPage = new Vue({
             var len = $('.errTips.show:visible').length;
             return (len === 0);
         },
-        // 入住咨询提交
+        /**
+         * 机构入驻咨询提交
+         */
         postAdvisory: function(){
             var _self = this;
             $('.advisoryInfo').find("[needverify]:visible").each(function (index, ele) {
@@ -57,6 +98,20 @@ var signPage = new Vue({
                 });
             });
         },
+        /**
+         * 机构注册提交
+         */
+        clubRegister: function(){
+            alertInfo('机构注册');
+            console.log(JSON.stringify(this.clubUser));
+        },
+        /**
+         * 供应商注册提交
+         */
+        supplierRegister: function(){
+            alertInfo('供应商注册');
+            console.log(JSON.stringify(this.supplierUser));
+        }
 
     },
     created: function () {

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

@@ -7,21 +7,8 @@
     <link th:href="@{/css/account/login.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
 <body>
-<!--头部-->
-<header>
-    <div class="baseHeadCenter">
-        <div class="wrap clear">
-            <a href="/index.html" 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>
+<!-- 引用头部 -->
+<template th:replace="components/header-account"></template>
 
 <!-- 二级页面 -->
 <div id="loginPage">
@@ -32,24 +19,24 @@
                 <h2>生美 / 医美采购服务平台</h2>
             </div>
             <form v-show="!qrCodeLogin">
-                <label class="account">
+                <div class="formLine">
                     <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>
+                </div>
+                <div class="formLine">
+                    <input type="password" v-model="loginPassword" placeholder="请输入密码" :rule="rule.password" maxlength="30" @blur="blurHandle($event)" needverify>
                     <i class="checked icon mIcon"></i>
-                    <span class="errTips icon mIcon" tips="6-30位数字或字母或字符"></span>
+                    <span class="errTips icon mIcon" tips="请输入正确的密码"></span>
                     <i class="icon showPwd" @click="showPassword($event)"></i>
-                </label>
+                </div>
                 <div class="forget">
                     <a href="javascript:void(0);">忘记密码？</a>
                 </div>
                 <div class="submit clear">
-                    <a v-if="isPC" class="btn" href="/sign-up.html">免费注册</a>
+                    <a v-if="isPC" class="btn" href="/register.html">免费注册</a>
                     <button class="btn" type="button" @click="loginSubmit()">登录</button>
-                    <a v-if="!isPC" class="btn" href="/sign-up.html">免费注册</a>
+                    <a v-if="!isPC" class="btn" href="/register.html">免费注册</a>
                 </div>
                 <a v-if="isPC" href="javascript:void(0);" class="codeBtn icon" @click="toQrCodeLogin()"></a>
             </form>

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

@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/account/register.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header-account"></template>
+
+<!-- 注册账号 -->
+<div id="registerPage">
+    <div class="selectAccount">
+        <div class="title">请选择注册的账号类型</div>
+        <div class="cont">
+            <span class="a"><img src="/img/account/club.png">机构</span>
+            <span class="b"><img src="/img/account/supplier.png">供应商</span>
+        </div>
+    </div>
+    <div class="signAccount">
+        <div>
+            <div class="title">欢迎机构入驻</div>
+            <div class="advisory">
+                <span class="icon">入住咨询</span>
+                <div class="advisoryInfo">
+                    <div class="info">若暂不方便入驻机构或无法入驻，您可以留下您的姓名和联系方式，采美工作人员会第一时间联系您。</div>
+                    <form>
+                        <div class="formLine">
+                            <p><em>*</em>姓名：</p>
+                            <input type="text" v-model="advisory.name" placeholder="请输入您的姓名" :rule="rule.name" maxlength="50" @blur="blurHandle($event)" needverify>
+                            <i class="checked icon mIcon"></i>
+                            <span class="errTips icon mIcon" tips="请输入正确的联系人姓名"></span>
+                        </div>
+                        <div class="formLine">
+                            <p><em>*</em>手机号：</p>
+                            <input type="text" v-model="advisory.phone" placeholder="请输入您的常用手机号" :rule="rule.phone" maxlength="12" @blur="blurHandle($event)" needverify>
+                            <i class="checked icon mIcon"></i>
+                            <span class="errTips icon mIcon" tips="请输入有效电话号码"></span>
+                        </div>
+                        <button class="btn" type="button" @click="postAdvisory()">提交</button>
+                    </form>
+                </div>
+            </div>
+            <div class="registerClub">
+                <!--机构注册表单-->
+                <form>
+                    <div class="formLine">
+                        <p><em>*</em>联系人：</p>
+                        <input type="text" v-model="clubUser.name" placeholder="请输入联系人姓名" :rule="rule.name" maxlength="50" @blur="blurHandle($event)" needverify>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="请输入正确的联系人姓名"></span>
+                    </div>
+                    <div class="formLine">
+                        <p><em>*</em>手机号（<span>手机号可用作登录账号</span>）：</p>
+                        <input type="text" v-model="clubUser.phone" placeholder="请输入您的常用手机号" :rule="rule.phone" maxlength="12" @blur="blurHandle($event)" needverify>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="请输入有效电话号码"></span>
+                    </div>
+                    <div class="formLine code">
+                        <p><em>*</em>短信验证码：</p>
+                        <input type="text" v-model="clubUser.code" placeholder="请输入短信验证码" :rule="rule.code" maxlength="12" @blur="blurHandle($event)" needverify>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="请输入有效短信验证码"></span>
+                        <a class="getCode" href="javascript:void(0);">获取短信验证码</a>
+                    </div>
+                    <div class="formLine">
+                        <p><em>*</em>登录密码：</p>
+                        <input type="password" v-model="clubUser.password" placeholder="请输入8-16位数字和字母组合" :rule="rule.password" maxlength="16" @blur="blurHandle($event)" needverify>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="8-16位数字或字母或字符"></span>
+                        <i class="icon showPwd" @click="showPassword($event)"></i>
+                    </div>
+                    <div class="formLine">
+                        <p><em>*</em>确认密码：</p>
+                        <input type="password" v-model="clubUser.password2" placeholder="请再次确认密码" :rule="rule.password" maxlength="16" @blur="blurHandle($event)" needverify>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="8-16位数字或字母或字符"></span>
+                        <i class="icon showPwd" @click="showPassword($event)"></i>
+                    </div>
+                    <div class="subLine">
+                        <input type="checkbox">我已阅读并同意<a href="javascript:void(0);">《机构协议》</a><a href="javascript:void(0);">《用户协议》</a>及<a href="javascript:void(0);">《隐私权政策》</a>
+                        <button class="btn" type="button" @click="clubRegister()">注册</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+        <div>
+            <div class="supplierConfirm">
+                <div class="cont">
+                    <h3>供应商注册需知</h3>
+                    <p>采美365网感谢您的关注！</p>
+                    <p>采美365网是美容行业一站式B2B 采购交易服务平台，供应商入驻需平台审核。注册说明如下，请您仔细阅读：</p>
+                    <ul>
+                        <li>1、本网站为正品网站，谢绝非自营/自有品牌（以登记备案为准），代理商应出具授权书等说明文件，杜绝山寨、假冒伪劣等侵权、侵害他人利益的行为。</li>
+                        <li>2、注册需要提供公司名称、营业执照、公司地址、联系人等基本信息。</li>
+                        <li>3、供应商注册审核通过后需缴纳平台信息服务管理费用。</li>
+                    </ul>
+                    <div class="btnLine">
+                        <p><input type="checkbox" checked readonly>已阅读供应商注册需知</p>
+                        <button type="button">同意</button>
+                    </div>
+                </div>
+            </div>
+            <div class="title">欢迎供应商入驻</div>
+            <div class="registerShop">
+                <!--供应商注册表单-->
+                <form>
+
+                    <h6 class="tit">账户信息</h6>
+
+                    <div class="formLine">
+                        <p><em>*</em>手机号（<span>手机号可用作登录账号</span>）：</p>
+                        <input type="text" v-model="supplierUser.phone" placeholder="请输入您的常用手机号" :rule="rule.phone" maxlength="12" @blur="blurHandle($event)" needverify>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="请输入有效电话号码"></span>
+                    </div>
+                    <div class="formLine code">
+                        <p><em>*</em>短信验证码：</p>
+                        <input type="text" v-model="supplierUser.code" placeholder="请输入短信验证码" :rule="rule.code" maxlength="12" @blur="blurHandle($event)" needverify>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="请输入有效短信验证码"></span>
+                        <a class="getCode" href="javascript:void(0);">获取短信验证码</a>
+                    </div>
+                    <div class="formLine">
+                        <p><em>*</em>登录密码：</p>
+                        <input type="password" v-model="supplierUser.password" placeholder="请输入8-16位数字和字母组合" :rule="rule.password" maxlength="16" @blur="blurHandle($event)" needverify>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="8-16位数字或字母或字符"></span>
+                        <i class="icon showPwd" @click="showPassword($event)"></i>
+                    </div>
+                    <div class="formLine">
+                        <p><em>*</em>确认密码：</p>
+                        <input type="password" v-model="supplierUser.password2" placeholder="请再次确认密码" :rule="rule.password" maxlength="16" @blur="blurHandle($event)" needverify>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="8-16位数字或字母或字符"></span>
+                        <i class="icon showPwd" @click="showPassword($event)"></i>
+                    </div>
+
+                    <h6 class="tit">基本信息</h6>
+
+                    <div class="formLine">
+                        <p><em>*</em>公司名称：</p>
+                        <input type="text" v-model="supplierUser.shopName" placeholder="请与营业执照的注册名称保持一致" :rule="rule.name" maxlength="50" @blur="blurHandle($event)" needverify>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="请输入正确的公司名称"></span>
+                    </div>
+                    <div class="formLine">
+                        <p><em>*</em>联系人：</p>
+                        <input type="text" v-model="supplierUser.name" placeholder="请输入联系人姓名" :rule="rule.name" maxlength="50" @blur="blurHandle($event)" needverify>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="请输入正确的联系人姓名"></span>
+                    </div>
+                    <div class="formLine">
+                        <p>邮箱（<span>邮箱可用作登录账号，请使用公司邮箱或法人邮箱</span>）：</p>
+                        <input type="text" v-model="supplierUser.email" placeholder="请输入邮箱地址" maxlength="50">
+                        <span class="errTips"></span>
+                    </div>
+
+                    <h6 class="tit">详细信息</h6>
+
+                    <div class="formLine">
+                        <p>公司简称：</p>
+                        <input type="text" v-model="supplierUser.shopAbbr" placeholder="请输入公司简称" maxlength="50">
+                        <span class="errTips"></span>
+                    </div>
+                    <div class="formLine">
+                        <p><em>*</em>联系地址：</p>
+                        <div class="address">
+                            <select><option value="">请选择</option></select>
+                            <select><option value="">请选择</option></select>
+                            <select><option value="">请选择</option></select>
+                            <textarea placeholder="建议您如实填写详细收货地址，例如：街道名称，门牌号码，楼层和房间号等信息"></textarea>
+                        </div>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="请输入正确的联系地址"></span>
+                    </div>
+                    <div class="formLine">
+                        <p><em>*</em>公司类型：</p>
+                        <label class="radio"><input type="radio" name="firstShopType" value="1" ><i class="icon">医疗</i></label>
+                        <label class="radio"><input type="radio" name="firstShopType" value="2" checked><i class="icon">非医疗</i></label>
+                        <span class="errTips icon mIcon" tips="请选择公司类型"></span>
+                    </div>
+                    <div class="formLine">
+                        <p><em>*</em>营业执照：</p>
+                        <input type="text" v-model="supplierUser.businessLicense" placeholder="请输入统一社会信用代码" :rule="rule.license" maxlength="50" @blur="blurHandle($event)" needverify>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="请输入正确的统一社会信用代码"></span>
+                    </div>
+                    <div class="formLine">
+                        <p><em>*</em>营业执照图片：</p>
+                        <input type="file" v-model="supplierUser.businessLicenseImage">
+                        <span class="errTips icon mIcon"></span>
+                    </div>
+                    <div class="formLine">
+                        <p><em>*</em>主营产品：</p>
+                        <p class="business">
+                            <span>产品</span><span>仪器</span><span>服务</span>
+                            <input type="text" placeholder="请输入其他自定义品项目">
+                            <a href="javascript:;">确认添加</a>
+                        </p>
+                        <span class="errTips icon mIcon" tips="请选择或添加主营产品"></span>
+                    </div>
+                    <div class="subLine">
+                        <input type="checkbox">我已阅读并同意<a href="javascript:void(0);">《供应商协议》</a><a href="javascript:void(0);">《用户协议》</a>及<a href="javascript:void(0);">《隐私权政策》</a>
+                        <button class="btn" type="button" @click="supplierRegister()">同意并提交审核</button>
+                    </div>
+                </form>
+
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/account/register.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/account/sign-up.html

@@ -1,81 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-      xsi:schemaLocation="https://www.thymeleaf.org ">
-<head>
-    <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
-    <template th:replace="components/head-link"></template>
-    <link th:href="@{/css/account/sign-up.css(v=${version})}" rel="stylesheet" type="text/css">
-</head>
-<body>
-<!--头部-->
-<header>
-    <div class="baseHeadCenter">
-        <div class="wrap clear">
-            <a href="/index.html" 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>
-            <p class="toLogin">已有账号？请直接<a href="/login.html">登录</a></p>
-        </div>
-    </div>
-    <input type="hidden" th:value="${spiServer}" id="spiServer">
-    <input type="hidden" th:value="${agent}" id="userAgent">
-</header>
-
-<!-- 注册账号 -->
-<div id="signUpPage">
-    <div class="selectAccount">
-        <div class="title">请选择账户类型</div>
-        <div class="cont">
-            <span class="a">机构</span>
-            <span class="b">供应商</span>
-        </div>
-    </div>
-    <div class="clubUser">
-        <div class="title">欢迎机构入驻</div>
-        <div class="advisory">
-            <span class="icon">入住咨询</span>
-            <div class="advisoryInfo">
-                <div class="info">若暂不方便入驻机构或无法入驻，您可以留下您的姓名和联系方式，采美工作人员会第一时间联系您。</div>
-                <label>
-                    <span><em>*</em>姓名：</span>
-                    <input type="text" v-model="advisory.name" placeholder="请输入您的姓名" rule="^[a-zA-Z]+(\s*[a-zA-Z]+){1,}$" maxlength="50" @blur="blurHandle($event)" needverify>
-                    <i class="checked icon mIcon"></i>
-                    <span class="errTips icon mIcon" tips="请最少以两个英文输入"></span>
-                </label>
-                <label>
-                    <span><em>*</em>姓名：</span>
-                    <input type="text" v-model="advisory.phone" placeholder="请输入您的常用手机号" rule="^\\d{6,12}$" maxlength="12" @blur="blurHandle($event)" needverify>
-                    <i class="checked icon mIcon"></i>
-                    <span class="errTips icon mIcon" tips="请输入有效电话号码"></span>
-                </label>
-                <button class="btn" type="button" @click="postAdvisory()">提交</button>
-            </div>
-        </div>
-
-
-
-
-
-
-
-
-
-
-
-
-
-    </div>
-    <div class="supplierUser">
-
-    </div>
-</div>
-
-<!-- 引入底部 -->
-<template th:replace="components/footer"></template>
-<template th:replace="components/foot-link"></template>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/account/sign-up.js(v=${version})}"></script>
-</body>
-</html>

src/main/resources/templates/components/header-account.html

@@ -0,0 +1,15 @@
+<header id="globalHead" xmlns:th="http://www.w3.org/1999/xhtml">
+    <div class="baseHeadCenter account">
+        <div class="wrap clear">
+            <a href="/index.html" 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 closeAccount"></a>
+            <p class="accountLogin">已有账号？请直接<a href="/login.html">登录</a></p>
+        </div>
+    </div>
+    <input type="hidden" th:value="${spiServer}" id="spiServer">
+    <input type="hidden" th:value="${agent}" id="userAgent">
+</header>

src/main/resources/templates/components/header.html

@@ -28,7 +28,7 @@
                 </div>
             </li>
             <template v-else>
-                <li><a href="/sign-up.html">注册</a></li>
+                <li><a href="/register.html">注册</a></li>
                 <li><a href="/login.html">登录</a></li>
             </template>
         </ul>