stage：入住选择

src/permission.js

@@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/auth-redirect', '/bind', '/register', '/unitRegister']
+const whiteList = ['/login', '/auth-redirect', '/bind', '/register', '/unitRegister', '/identitySelection']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()
@@ -30,11 +30,11 @@ router.beforeEach((to, from, next) => {
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
           })
         }).catch(err => {
-            store.dispatch('LogOut').then(() => {
-              Message.error(err)
-              next({ path: '/' })
-            })
+          store.dispatch('LogOut').then(() => {
+            Message.error(err)
+            next({ path: '/' })
           })
+        })
       } else {
         next()
       }

src/router/index.js

@@ -56,6 +56,11 @@ export const constantRoutes = [
     component: () => import('@/views/unitRegister'),
     hidden: true
   },
+  {
+    path: '/identitySelection',
+    component: () => import('@/views/identitySelection'),
+    hidden: true
+  },
   {
     path: '/404',
     component: () => import('@/views/error/404'),

src/views/identitySelection.vue

+<template>
+    <div class="register">
+        <div class="register-main">
+            <div class="register-title">请选择入驻企业类型</div>
+            <!-- 选择主体部分 -->
+            <div class="subject-selection-main">
+                <div class="recruitUse-enterprise" @click="tolinkUnitRegister(1)">
+                    <div class="recruitUse-div">
+                        <img src="@/assets/images/recruitUse.png" alt="用工企业" class="recruitUse-img">
+                    </div>
+                    <p class="recruitUse-p">用工企业</p>
+                </div>
+                <div class="emd-enterprise" @click="tolinkUnitRegister(2)">
+                    <div class="emd-div">
+                        <img src="@/assets/images/emd.png" alt="代发企业" class="emd-img">
+                    </div>
+                    <p class="emd-p">代发企业</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'identitySelection',
+    data() {
+        return {
+
+        }
+    },
+    created() {
+
+    },
+    methods: {
+        tolinkUnitRegister(val) {
+            this.$router.push({ path: "/unitRegister", query: { registerType: val } })
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.register {
+    height: 100vh;
+    background-image: url("../assets/images/identitySelection-background.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+    overflow: hidden;
+    position: relative;
+
+    .register-main {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 68%;
+        background: linear-gradient(180deg, #CAE4FF 0%, #FFFFFF 36%);
+        box-shadow: 0px 0px 20px 1px rgba(221, 221, 221, 0.88);
+        border-radius: 16px 16px 16px 16px;
+        padding: 64px;
+    }
+
+    .register-title {
+        width: 100%;
+        text-align: center;
+        font-weight: 600;
+        font-size: 32px;
+        color: #333333;
+    }
+
+    .subject-selection-main {
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+        margin-top: 68px;
+        cursor: pointer;
+
+        .recruitUse-enterprise {
+            width: 40%;
+
+
+            .recruitUse-div {
+                padding: 20px;
+                width: 100%;
+                overflow: hidden;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background-color: #f7f9fb;
+                border-radius: 6px;
+                border: 1.5px dashed #ccc;
+
+                .recruitUse-img {
+                    width: calc(100% - 40px);
+
+                }
+            }
+
+            .recruitUse-p {
+                font-weight: 500;
+                font-size: 38px;
+                color: #000000;
+                text-align: center;
+            }
+
+        }
+
+        .recruitUse-enterprise:hover {
+            .recruitUse-p {
+                color: #0092FF;
+            }
+
+            .recruitUse-div {
+                border-radius: 12px;
+                border: 2px solid #1199ff;
+                background-color: #fff;
+            }
+
+            .recruitUse-img {
+                transition: all 0.5s ease;
+                transform: scale(1.15);
+            }
+        }
+
+        .emd-enterprise {
+            width: 40%;
+            cursor: pointer;
+
+            .emd-div {
+                padding: 20px;
+                width: 100%;
+                overflow: hidden;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background-color: #f7f9fb;
+                border-radius: 6px;
+                border: 1.5px dashed #ccc;
+
+                .emd-img {
+                    width: calc(100% - 40px);
+                }
+            }
+
+            .emd-p {
+                font-weight: 500;
+                font-size: 38px;
+                color: #000000;
+                text-align: center;
+            }
+        }
+
+        .emd-enterprise:hover {
+            .emd-p {
+                color: #0092FF;
+            }
+
+            .emd-img {
+                transform: scale(1.15);
+                transition: all 0.5s ease;
+            }
+
+            .emd-div {
+                border-radius: 12px;
+                border: 2px solid #1199ff;
+                background-color: #fff;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file

src/views/login.vue

@@ -41,7 +41,8 @@
           <span v-if="!loading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
-        <router-link class="link-type" :to="'/unitRegister'">立即注册</router-link>
+        <!-- <router-link class="link-type" :to="'/unitRegister'">立即注册</router-link> -->
+        <router-link class="link-type" :to="'/identitySelection'">立即注册</router-link>
       </el-form-item>
     </el-form>
     <div class="SMSVerificationMain" v-else>
@@ -69,7 +70,7 @@
         </div>
         <div class="againVerificationCode">
           <el-button @click="reactText" type="text" :disabled="VerificationCodeTime != 60">{{ VerificationCodeTitle
-            }}</el-button>
+          }}</el-button>
         </div>
       </div>
     </div>

src/views/unitRegister.vue

@@ -41,7 +41,7 @@
             <el-row :gutter="56">
               <el-col :span="11">
                 <el-form-item label="入驻类型" prop="registerType">
-                  <el-select v-model="form.registerType" placeholder="请选择入驻类型">
+                  <el-select v-model="form.registerType" :disabled="true" placeholder="请选择入驻类型">
                     <el-option label="人力资源" :value="1" />
                     <el-option label="代发企业" :value="2" />
                   </el-select>
@@ -109,11 +109,14 @@
             </el-row>
           </div>
           <div class="fixdBottomMain">
-            <el-button :disabled="!reaDagreementValue" type="primary" style="width:50%;font-size:14px;"
+            <router-link class="link-type" :to="'/identitySelection'"><i
+                class="el-icon-back"></i>重新选择入驻企业类型</router-link>
+            <el-button :disabled="!reaDagreementValue" type="primary" class="register-button"
               @click="submitForm">确认注册</el-button>
           </div>
-          <div style="text-align: center;margin-top: 6px;font-size: 14px;">
-            <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
+          <div style="text-align: center;margin-top: 16px;font-size: 14px;">
+            <router-link class="link-type" :to="'/login'">
+              使用已有账户登录</router-link>
           </div>
           <!-- 协议阅读部分 -->
           <div class="reaDagreement"> <el-checkbox @change="reaDagreementValueChange"
@@ -234,7 +237,11 @@ export default {
     };
   },
   created() {
+    if (this.$route.query.registerType) {
+      this.form.registerType = Number(this.$route.query.registerType)
+    }
     this.getCode();
+
   },
   methods: {
     reaDagreementValueChange(e) {
@@ -319,7 +326,7 @@ export default {
 
 .register {
   height: 100vh;
-  background-image: url("../assets/images/login-background.png");
+  background-image: url("../assets/images/identitySelection-background.png");
   background-size: cover;
   background-repeat: no-repeat;
   overflow: hidden;
@@ -411,7 +418,22 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
+  position: relative;
+
+  .register-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 14px;
+    width: 30%;
+  }
+
   //margin-bottom: 50px;
+  .link-type {
+    font-size: 14px !important;
+    margin-right: 50%;
+  }
 }
 
 .reaDagreement {
@@ -423,7 +445,7 @@ export default {
 }
 
 .box-card ::v-deep {
-  width: 60vw;
+  width: 68vw;
   border-radius: 15px;
   background-image: linear-gradient(135deg, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, .7) 80%);