完成供应商落地页

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

@@ -14,7 +14,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 SUPPLIER_LOGIN_PATH = "account/supplierTologin";
     private static final String REGISTER_SUPPLIER_LOGIN = "supplier_login/index";
     /** 注册 */
 	private static final String REGISTER_PATH = "account/register";
@@ -38,6 +38,14 @@ public class AccountController extends BaseController {
         return LOGIN_PATH;
     }
 
+    /**
+     * supplier登录页
+     */
+    @GetMapping("/supplierlogin.html")
+    public String supplierlogin() {
+        return SUPPLIER_LOGIN_PATH;
+    }
+
     /**
      * 注册选择页
      */

src/main/resources/static/css/supplier-login/login.css

@@ -32,12 +32,14 @@ body{
     text-align: center;
 }
 .username {
-    font-size: 0.8vw;
     color: #FF5B00;
     position: relative;
     cursor: pointer;
     box-sizing: border-box;
-    height: 1.2vw;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 .username::after {
     content: '\276F';
@@ -54,26 +56,24 @@ body{
 .username:hover::after{
     transform: rotate(270deg);
 }
-.a_cm {
-    padding: 10px;
-}
-.login_a:hover {
-    color: white;
+.el-popover {
+    padding: 5px !important;
+    min-width: 90px !important;
 }
-.username .cShow {
-    display: none;
-    position: absolute;
-    right: 0;
-    top: 2.5vh;
+.el-popover .cShow {
+    display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
-    background: white;
+}
+.el-popover__reference{
+    font-size: 0.8vw;
+}
+.a_cm {
     padding: 10px;
-    transition: .3s;
 }
-.username:hover .cShow {
-    display: flex !important;
+.login_a:hover {
+    color: white;
 }
 .slide_icon {
     display: flex;
@@ -445,45 +445,20 @@ body{
     -o-transition: ease-in-out 600ms;
     transition: .5s;
 }
-#zeroPage .server .server_1 .tourist {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
-    font-size: 1.1vw;
-    padding: 2vw 0;
-    box-sizing: border-box;
-    -webkit-transform: rotateY(-180deg);
-    transform: rotateY(-180deg);
-    background: linear-gradient(0deg, #FF5B00, #FF9300);
-    color: #fff;
-}
-#zeroPage .server .server_1 .tourist_bg {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
-    font-size: 1.1vw;
-    padding: 4vw 0;
-    box-sizing: border-box;
-}
-#zeroPage .server .operate{
-    width: 15vw;
-    height: 100%;
-    transition: .5s;
+#zeroPage .server .tourist_bg,
+#zeroPage .server .sale_bg,
+#zeroPage .server .operate_bg {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
     font-size: 1.1vw;
-    padding: 2vw 0;
+    padding: 4.5vw 0;
     box-sizing: border-box;
-    background: linear-gradient(0deg, #FF5B00, #FF9300);
-    -webkit-transform: rotateY(-180deg);
-    transform: rotateY(-180deg);
-    color: #fff;
 }
-#zeroPage .server .sale{
+#zeroPage .server .operate,
+#zeroPage .server .tourist,
+#zeroPage .server .sale {
     width: 15vw;
     height: 100%;
     transition: .5s;
@@ -492,22 +467,13 @@ body{
     justify-content: space-around;
     align-items: center;
     font-size: 1.1vw;
+    padding: 10px;
     box-sizing: border-box;
-    padding: 0 1vw;
     background: linear-gradient(0deg, #FF5B00, #FF9300);
     -webkit-transform: rotateY(-180deg);
     transform: rotateY(-180deg);
     color: #fff;
 }
-#zeroPage .server .sale_bg{
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
-    font-size: 1.1vw;
-    padding: 4vw 0;
-    box-sizing: border-box;
-}
 #zeroPage .server .tourist_logo {
     width: 6vw;
     height: 6vw;
@@ -526,12 +492,6 @@ body{
 #zeroPage .server .tourist_title {
     color: #fff;
 }
-#zeroPage .server .tourist_cont {
-    font-size: 14px;
-    box-sizing: border-box;
-    padding: 0 10px;
-    text-align: center;
-}
 #zeroPage .server .server_1:hover .tourist_bg{
     -webkit-transform: rotateY(180deg) !important;
     transform: rotateY(180deg) !important;
@@ -571,10 +531,9 @@ body{
 #zeroPage .server .operate_bg_title {
     color: black;
 }
-#zeroPage .server .operate_cont {
-    font-size: 14px;
+#zeroPage .server .all_cont {
+    font-size: 0.8vw;
     box-sizing: border-box;
-    padding: 0 10px;
     text-align: center;
 }
 #zeroPage .server .operate_bg {
@@ -604,12 +563,6 @@ body{
 #zeroPage .server .sale_bg_title {
     color: black;
 }
-#zeroPage .server .sale_cont {
-    font-size: 14px;
-    box-sizing: border-box;
-    padding: 0 10px;
-    text-align: center;
-}
 #firstPage {
     background: url("/img/supplier-login/selection/select_bg.png") no-repeat;
     background-size: cover;
@@ -720,6 +673,16 @@ body{
     border-radius: 4px;
     cursor: pointer;
 }
+.select_btn_login {
+    width: 100%;
+    height: 5vh;
+    border: 1px solid #E2E2E2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    background: #cccccc;
+}
 .Title {
     display: flex;
     align-items: center;
@@ -1244,12 +1207,18 @@ body{
     align-items: center;
     box-sizing: border-box;
 }
-#fourPage .el-carousel__item .four_logo {
+#fourPage .el-carousel__item .four_logo_1 {
     width: 50%;
     height: 80%;
-    background: url(/img/supplier-login/SuccessCases/first_logo.png) no-repeat center;
+    background: url(/img/supplier-login/SuccessCases/success_1.jpg) no-repeat center;
     background-size: contain;
 }
+#fourPage .el-carousel__item .four_logo_2 {
+     width: 50%;
+     height: 80%;
+     background: url(/img/supplier-login/SuccessCases/success_2.jpg) no-repeat center;
+     background-size: contain;
+}
 #fourPage .el-carousel__item .logo_text {
     width: 45%;
     height: 80%;

src/main/resources/static/js/supplier-login/login.js

@@ -182,12 +182,14 @@ new Vue({
     },
     computed: {},
     methods: {
+        // 滚动事件
         getPageSnap() {
             const fullPage = this.$refs.fullPage
             if(fullPage) {
                 fullPage.addEventListener('mousewheel', (e) => this.scrollChange(e))
             }
         },
+        // 滚动函数
         scrollChange(e) {
             if (this.showContent) {
                 e = e || window.event
@@ -205,6 +207,7 @@ new Vue({
                 }
             }
         },
+        // 链接动画跳转
         trumpLink() {
             setTimeout(() => {
                 this.activeId = this.activeLinkId
@@ -238,6 +241,7 @@ new Vue({
                 this.activeId = this.activeLinkId
             }, 800)
         },
+        // 移入动画
         mouseTitle(e) {
             const container_title_1 = this.$refs.container_title_1
             const container_title_2 = this.$refs.container_title_2
@@ -265,6 +269,7 @@ new Vue({
             this.isAthor = !this.isAthor
             this.isStore = !this.isStore
         },
+        // 轮播切换
         nextPageCar() {
             this.isActiveNext = true
             this.$refs.carousel.prev()
@@ -273,6 +278,7 @@ new Vue({
             this.isActiveNext = false
             this.$refs.carousel.next()
         },
+        // 播放器
         playerOff() {
             this.$refs.Myplayer.style.display = 'none'
             this.$refs.cm_player.play()
@@ -323,5 +329,20 @@ new Vue({
         goToIndex() {
             window.location.href = '/'
         },
+        // 解决方案会员开通
+        obstacles() {
+            window.location.href = '/supplierlogin.html'
+        },
+        // 解决方案
+        selectionQus() {
+            if (this.userInfo && this.userInfo.userIdentity === 3) {
+                this.$alert('请使用微信或电话联系客服', '解决方案', {
+                    confirmButtonText: '确定',
+                    callback: action => {}
+                });
+            } else {
+                window.location.href = '/supplierlogin.html'
+            }
+        },
     },
 })

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

@@ -62,7 +62,7 @@
                     </div>
                 </div>
                 <div class="forget">
-                    <a v-if="!isPC" class="btn" href="/club/register.html" rel="nofollow" onclick="_czc.push(['_trackEvent','登录页面','注册','点击','','Um_Event_Regirster'])">免费注册</a>
+                    <a class="btn" href="/club/register.html" rel="nofollow" onclick="_czc.push(['_trackEvent','登录页面','注册','点击','','Um_Event_Regirster'])">免费注册</a>
                     <a href="/forget.html" v-if="loginTabs === 1" style="z-index: 99999">忘记密码？</a>
                 </div>
                 <template  v-if="!isPC && isWeChat" >

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

@@ -0,0 +1,138 @@
+<!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/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
+  <link th:href="@{/css/account/login.css(v=${version})}" rel="stylesheet" type="text/css">
+  <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="account/components/header"></template>
+
+<!-- 二级页面 -->
+<div id="loginPage">
+  <div class="loginWrap clear" v-cloak>
+    <div class="login-image">
+      <img src="/img/account/login.png" alt="">
+    </div>
+    <div class="loginForm">
+      <div class="title">
+        <h2>生美 / 医美采购服务平台</h2>
+      </div>
+      <form v-show="!qrCodeLogin">
+        <div class="formLine-tabs">
+          <a class="tabs-item" :class="{ current: loginTabs === 0 }" href="javascript:void(0);" @click="handleTabsClick(0)">验证码登录</a>
+          <a class="tabs-item" :class="{ current: loginTabs === 1 }" href="javascript:void(0);" @click="handleTabsClick(1)">密码登录</a>
+        </div>
+        <div v-show="loginTabs === 0">
+          <div class="formLine" >
+            <input  class="massageBtn"  type="text" @input="handleCodeMobileInput" v-model.trim="codeParams.mobile" placeholder="请输入手机号码" :rule="rule.mobile" maxlength="11" @blur="blurHandle($event)" needverify>
+            <i class="checked icon mIcon"></i>
+            <span class="errTips icon mIcon" tips="请输入正确格式的手机号"></span>
+          </div>
+          <div class="formLine smscode">
+            <input type="text" class="smscode" @input="handleCodeInput" v-model.trim="codeParams.code" autocomplete="off" placeholder="请输入短信验证码" :rule="rule.code"  maxlength="6" @blur="blurHandle($event)" needverify>
+            <i class="checked icon mIcon"></i>
+            <span class="errTips icon mIcon" tips="请输入短信验证码"></span>
+            <a class="code-btn" href="javascript:void(0);" @click="handleCheckMobile" :class="[isMobileDisabled  ? 'disabled' : '']">{{ mobileCodeText }}</a>
+          </div>
+          <div class="submit clear">
+            <button class="btn" type="button" @click="handleCodeLogin" :disabled="isInputsTrue" :class="[isInputsTrue ?'disabled':'']">登录</button>
+          </div>
+        </div>
+        <div v-show="loginTabs === 1">
+          <div class="formLine">
+            <input type="text" v-model.trim="accountParams.mobileOrEmail" placeholder="请输入邮箱或手机号" :rule="rule.account" maxlength="30" @blur="blurHandle($event)" needverify>
+            <i class="checked icon mIcon"></i>
+            <span class="errTips icon mIcon" tips="请提供正确的邮箱或手机号码"></span>
+          </div>
+          <div class="formLine">
+            <input type="password" v-model.trim="accountParams.password" placeholder="请输入密码" :rule="rule.password" maxlength="30" @blur="blurHandle($event)" needverify>
+            <i class="checked icon mIcon"></i>
+            <span class="errTips icon mIcon" tips="请输入正确的密码"></span>
+            <i class="icon showPwd" @click="showPassword($event)"></i>
+          </div>
+          <!-- 滑动验证 -->
+          <div class="verify-wrap" id="verify-wrap"></div>
+          <div class="submit clear">
+            <button class="btn" type="button" @click="handleSubLogin" :disabled="isSlideFinishState" :class="[isSlideFinishState ?'disabled':'']">登录</button>
+          </div>
+        </div>
+        <div class="forget">
+          <a class="btn" href="/supplier/register.html" rel="nofollow" onclick="_czc.push(['_trackEvent','登录页面','注册','点击','','Um_Event_Regirster'])">免费注册</a>
+          <a href="/forget.html" v-if="loginTabs === 1" style="z-index: 99999">忘记密码？</a>
+        </div>
+        <template  v-if="!isPC && isWeChat" >
+          <div class="login-line">
+            <span>第三方登录</span>
+          </div>
+          <div class="submit clear">
+            <a class="weChat" @click="handleWeChatLogin" href="javascript:void(0);">
+              <i class="mIcon"></i>
+            </a>
+          </div>
+        </template>
+        <template  v-if="isPC" >
+          <div class="login-line">
+            <span>第三方登录</span>
+          </div>
+          <div class="from-wechat">
+            <a href="javascript:void(0);" class="codeBtn WEB-icon" @click="toQrCodeLogin"></a>
+          </div>
+        </template>
+      </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 class="bg" v-if="stautsfalse" :style="stautsfalse?'opacity:1':''">
+    <div class="bg-content">
+      <div class="bg-tittle"><p>提示</p><p class="icon mIcon" @click="handleHideBg"></p></div>
+      <div class="text-conten">
+        <p class="status">{{text}}</p>
+        <p class="tip-p">联系电话：0755-22907771</p>
+        <p class="tip-p">地址：深圳市福田区锦峰大厦21B</p>
+        <div  @click="information" v-if="infofalse" >修改申请信息</div>
+      </div>
+    </div>
+  </div>
+  <div class="content-model"  :class="isCodeModel ? 'active' : ''">
+    <div class="model-main">
+      <div class="model-title"><p>获取短信验证码</p><i class="icon mIcon icon-close"  @click="handleCloseCodeModel"></i></div>
+      <div class="model-content">
+        <div class="model-form">
+          <input class="input codeMsgButton" type="text" placeholder="请输入图形验证码" v-model="smsCodeParams.imgCode" maxlength="4" needverify>
+          <div class="image"><img :src="codeImagePath" alt=""></div>
+          <div class="refresh" @click="handleRefreshCodeImage">
+            <i class="icon mIcon"></i>
+            <span>刷新</span>
+          </div>
+          <i class="checked icon mIcon"></i>
+          <span class="errTips icon mIcon" tips="请输入图形验证码"></span>
+        </div>
+        <div class="model-button">
+          <div class="button"  @click="handleMobileCode">获取短信验证码</div>
+        </div>2
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 引入底部 -->
+<template th:replace="article/components/article-footer"></template>
+<template th:replace="components/foot-link"></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="@{/lib/slideVerify.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/account/mixins/loginMixins.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/account/login.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/supplier_login/index.html

@@ -41,16 +41,21 @@
                 <div></div>
             </div>
             <div v-if="userInfo && userInfo.userIdentity === 3" v-cloak class="username">
-                {{userInfo.name}}
-                <div class="cShow" v-if="userInfo && userInfo.userIdentity === 3">
-                    <a class="a_cm" href="/supplier/dashboard.html" rel="nofollow">我的采美</a>
-                    <a class="a_cm" href="javascript:void(0);" @click="pageLinkSupplier()">店铺管理</a>
-                    <a class="a_cm" href="javascript:void(0);" @click="userLogOut()">退出登录</a>
-                </div>
+                <el-popover
+                        placement="bottom"
+                        width="50"
+                        trigger="hover">
+                    <div class="cShow" v-if="userInfo && userInfo.userIdentity === 3">
+                        <a class="a_cm" href="/supplier/dashboard.html" rel="nofollow">我的采美</a>
+                        <a class="a_cm" href="javascript:void(0);" @click="pageLinkSupplier()">店铺管理</a>
+                        <a class="a_cm" href="javascript:void(0);" @click="userLogOut()">退出登录</a>
+                    </div>
+                    <el-button slot="reference" type="text" style="font-size: 0.8vw;">{{userInfo.name}}</el-button>
+                </el-popover>
             </div>
             <div class="login_regist" v-else>
                 <div class="login_btn"><a rel="nofollow" href="/supplier/register.html">注册</a></div>
-                <div class="login_btn" style="background: #FF5B00;"><a class="login_a" style="color:white" href="/login.html" rel="nofollow">登录</a></div>
+                <div class="login_btn" style="background: #FF5B00;"><a class="login_a" style="color:white" href="/supplierlogin.html" rel="nofollow">登录</a></div>
             </div>
         </div>
     </div>
@@ -98,8 +103,8 @@
                         <div class="tourist_logo"></div>
                         <div class="tourist_title">全渠道获客</div>
                         <div class="tourist_li">|</div>
-                        <div class="tourist_cont">· 精准投放推广内容触达B端客户 ·</div>
-                        <div class="tourist_cont" >· 精准识别全渠道匿名用户线索 ·</div>
+                        <div class="all_cont">· 精准投放推广内容触达B端客户 ·</div>
+                        <div class="all_cont" >· 精准识别全渠道匿名用户线索 ·</div>
                     </div>
                 </div>
                 <div class="server_2 animate__animated" :class="activeId === 0 ? 'animate__backInUp' : ''">
@@ -111,9 +116,9 @@
                         <div class="operate_logo"></div>
                         <div class="operate_title">潜客运营</div>
                         <div class="operate_li">|</div>
-                        <div class="operate_cont" >· 潜客筛选 ·</div>
-                        <div class="operate_cont" >· 精细化分层运营 ·</div>
-                        <div class="operate_cont" >· 精准推送内容 ·</div>
+                        <div class="all_cont" >· 潜客筛选 ·</div>
+                        <div class="all_cont" >· 精细化分层运营 ·</div>
+                        <div class="all_cont" >· 精准推送内容 ·</div>
                     </div>
                 </div>
                 <div class="server_3 animate__animated" :class="activeId === 0 ? 'animate__backInUp' : ''">
@@ -125,9 +130,9 @@
                         <div class="sale_logo"></div>
                         <div class="sale_title">销售转化</div>
                         <div class="sale_li">|</div>
-                        <div class="sale_cont" >· 全链条商机管理，用户线索流程清晰，高效流转 ·</div>
-                        <div class="sale_cont" >· 全场景交易平台，线上线下一体化把握每一条商机 ·</div>
-                        <div class="sale_cont" >· 全方位售后服务，延长客户生命周期、提高复购率 ·</div>
+                        <div class="all_cont" >· 全链条商机管理，用户线索流程清晰，高效流转 ·</div>
+                        <div class="all_cont" >· 全场景交易平台，线上线下一体化把握每一条商机 ·</div>
+                        <div class="all_cont" >· 全方位售后服务，延长客户生命周期、提高复购率 ·</div>
                     </div>
                 </div>
             </div>
@@ -153,7 +158,8 @@
                             <div v-cloak style="width: 100%;height: 6vh;">
                                 ￥<span style="font-size: 2vw; font-weight: bold;">26800</span>/年
                             </div>
-                            <div class="select_btn">立即开通</div>
+                            <div v-if="userInfo && userInfo.userIdentity === 3" class="select_btn_login">已登录</div>
+                            <div v-else class="select_btn" @click="obstacles">立即开通</div>
                         </div>
                     </div>
                 </div>
@@ -172,7 +178,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="select_btn">查看解决方案</div>
+                            <div class="select_btn" @click="selectionQus">查看解决方案</div>
                         </div>
                     </div>
                 </div>
@@ -190,7 +196,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="select_btn">查看解决方案</div>
+                            <div class="select_btn" @click="selectionQus">查看解决方案</div>
                         </div>
                     </div>
                 </div>
@@ -320,7 +326,7 @@
                     <div class="nextChange" :class="isActiveNext ? 'isActiveNext' : ''" @click="nextPageCar"><</div>
                     <el-carousel indicator-position="outside" ref="carousel" height="30vw" :interval="4000">
                         <el-carousel-item>
-                            <div class="four_logo animate__animated" :class="activeId === 4 ? 'animate__rotateInUpRight' : ''"></div>
+                            <div class="four_logo_1 animate__animated" :class="activeId === 4 ? 'animate__rotateInUpRight' : ''"></div>
                             <div class="logo_text animate__animated" :class="activeId === 4 ? 'animate__rotateInUpLeft' : ''">
                                 <div class="logo_title">私域流量运营难</div>
                                 <div class="analysis">来自西班牙的明星品牌，在进入中国市场后行了大量的运营资源投放，却依旧
@@ -336,7 +342,7 @@
                             </div>
                         </el-carousel-item>
                         <el-carousel-item>
-                            <div class="four_logo"></div>
+                            <div class="four_logo_2"></div>
                             <div class="logo_text">
                                 <div class="logo_title">营销获客难</div>
                                 <div class="analysis">