feat: 注册，登录，找回密码页面开发

README.md

-# HashFlowWeb
-
-江北新区社会治理
+# 中国物品编码中心官网

src/main.js

@@ -8,6 +8,7 @@ import './plugins/element.js'
 import './plugins/qrcode.js'
 import "./assets/css/main.scss"
 import "./assets/css/layout.scss"
+import "./assets/css/element-variables.scss"
 // 公共样式、布局样式
 
 // 主题色调修改在assets/_style.scss  修改里面的变量即可
@@ -81,12 +82,13 @@ router.beforeEach((to,from,next) => {
                 isAuthed ? next() : next({ path: "/404", replace: true })
             }
         } else {
-            // 进入登录页面
-            if (to.path === "/login") {
             next()
-            } else {
-                next({ path: "/login", replace: true })
-            }
+            // 进入登录页面
+            // if (to.path === "/login") {
+            //     next()
+            // } else {
+            //     next({ path: "/login", replace: true })
+            // }
         }
     }
 })

src/router/index.js

@@ -48,7 +48,17 @@ const routes = [
     {
         path: "/login",
         name: "login",
-        component: () => import("@/views/user/login"),
+        component: () => import("@/views/entry/index"),
+    },
+    {
+        path: "/register",
+        name: "register",
+        component: () => import("@/views/entry/index"),
+    },
+    {
+        path: "/reset-pass",
+        name: "reset-pass",
+        component: () => import("@/views/entry/index"),
     },
 ]
 

src/views/entry/entry-card.vue

+<template>
+  <div class="entry-card">
+    <div class="header">
+      {{ title }}
+    </div>
+    <div class="body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "entry-card",
+  props: {
+    title: String
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.entry-card {
+  display: inline-block;
+  background: #FFFFFF;
+  border-radius: 6px;
+  padding: 40px;
+
+  .header {
+    height: 24px;
+    font-size: 22px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: $theme-color1;
+    line-height: 24px;
+    text-align: center;
+    margin-bottom: 50px;
+  }
+}
+</style>

src/views/entry/index.vue

+<template>
+  <!--注册，登录，找回密码等业务-->
+  <div class="gs-entry">
+    <div class="header">
+
+    </div>
+    <div class="body">
+      <div class="content">
+        <component v-bind:is="component"></component>
+      </div>
+      <div class="bottom">
+        <span>版权所有：中国物品编码中心</span>
+        <span>京ICP备11036137号-10 | 京公网安备11010102001434号</span>
+        <span>地址：北京市东城区安定门外大街138号皇城国际大厦B座3-6层 | 邮编：100011</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Register from "./register.vue";
+import Login from "./login.vue";
+import ResetPass from "./reset-pass.vue"
+
+
+const componentHash = {
+  '/login': 'Login',
+  '/register': 'Register',
+  '/reset-pass': 'ResetPass',
+}
+export default {
+  name: "index",
+  components: {Register, Login, ResetPass},
+  watch: {
+    '$route.path': {
+      handler(newV) {
+        this.component = componentHash[newV] || 'Login'
+      },
+      immediate: true,
+    }
+  },
+  data() {
+    return {
+      component: '',
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.gs-entry {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  background-color: #0D2C6C;
+  align-items: center;
+
+  .header {
+    flex: 0 0 112px;
+    padding-top: 58px;
+  }
+
+  .body {
+    flex: 1;
+    max-width: 1500px;
+    display: flex;
+    flex-direction: column;
+
+    .content {
+      flex: 1;
+      padding-top: 148px;
+      text-align: center;
+    }
+
+    .bottom {
+      flex: 0 0 120px;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      color: white;
+      font-size: 14px;
+      text-align: center;
+
+
+      span {
+        margin: 0 10px;
+      }
+    }
+  }
+}
+
+
+::v-deep .el-tabs {
+
+  .el-tabs__item{
+    color: rgba(0, 0, 0, 0.4);
+    &.is-active,&:hover{
+      color: $theme-color1;
+    }
+  }
+
+  .el-tabs__content{
+    padding-top: 19px;
+  }
+}
+</style>

src/views/entry/login.vue

+<template>
+  <EntryCard title="网站用户登录">
+    <div class="login">
+      <el-tabs v-model="activeName" class="tab-no-bottom">
+        <el-tab-pane label="用户名登录" name="first">
+          <el-form :model="userForm" status-icon>
+            <el-form-item>
+              <el-input v-model="userForm.userName"
+                        placeholder="请输入用户名/条码卡号"></el-input>
+            </el-form-item>
+
+            <el-form-item>
+              <el-input type="password"
+                        v-model="userForm.password"
+                        placeholder="请输入密码"
+                        autocomplete="off"></el-input>
+            </el-form-item>
+
+            <el-form-item>
+              <el-input
+                  v-model="userForm.validateCode"
+                  placeholder="请输入验证码"
+              >
+                <template slot="append"><img src="" alt=""></template>
+              </el-input>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="loginByUser" style="width: 100%">登 录</el-button>
+            </el-form-item>
+
+            <el-form-item class="bottom-btn">
+              <el-button type="text" @click="$router.push({name:'reset-pass'})">忘记密码</el-button>
+              <el-divider direction="vertical"></el-divider>
+              <el-button type="text" @click="$router.push({name:'register'})">注册</el-button>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="手机号登录" name="second">
+          <el-form :model="mobileForm" status-icon>
+            <el-form-item>
+              <el-input v-model="userForm.mobile"
+                        placeholder="请输入手机号"></el-input>
+            </el-form-item>
+
+            <el-form-item>
+              <el-input
+                  v-model="userForm.validateCode"
+                  placeholder="请输入短信验证码"
+              >
+                <template slot="append">
+                  <el-button type="primary" @click="sendValidateCode">发送验证码</el-button>
+                </template>
+              </el-input>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="loginByMobile" style="width: 100%">登 录</el-button>
+            </el-form-item>
+
+            <el-form-item class="bottom-btn">
+              <el-button type="text" @click="$router.push({name:'register'})">注册</el-button>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </EntryCard>
+
+</template>
+
+<script>import EntryCard from './entry-card.vue'
+
+export default {
+  name: "login",
+  components: {EntryCard},
+  data() {
+    return {
+      activeName: 'first',
+      userForm: {
+        userName: '',
+        password: '',
+        validateCode: ''
+      },
+      mobileForm: {
+        mobile: '',
+        validateCode: ''
+      },
+    }
+  },
+  methods: {
+    loginByUser() {
+
+    },
+    loginByMobile() {
+
+    },
+    sendValidateCode() {
+
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.login {
+  width: 360px;
+
+  ::v-deep .el-form {
+
+    .el-input-group__append {
+      border-color: transparent;
+      border: none;
+
+      button.el-button {
+        background-color: $theme-color1;
+        border-color: $theme-color1;
+        color: white;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      .el-button--primary:hover, .el-button--primary:focus {
+        background: #f5825d;
+        border-color: #f5825d;
+      }
+    }
+
+    .bottom-btn .el-form-item__content {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      color: #999999;
+      font-size: 13px;
+
+      .el-button {
+        color: #999999;
+        font-size: 13px;
+
+        &:hover, &:focus {
+          color: #f5825d;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/entry/register.vue

+<template>
+  <EntryCard title="网站用户注册">
+    <div class="register">
+    </div>
+  </EntryCard>
+</template>
+
+<script>
+import EntryCard from './entry-card.vue'
+export default {
+  name: "register",
+  components:{EntryCard}
+}
+</script>
+
+<style lang="scss" scoped>
+  .login{
+
+  }
+</style>

src/views/entry/reset-pass.vue

+<template>
+  <EntryCard title="忘记密码">
+    <div class="reset-pass">
+
+    </div>
+  </EntryCard>
+
+</template>
+
+<script>import EntryCard from './entry-card.vue'
+
+export default {
+  name: "reset-pass",
+  components: {EntryCard}
+}
+</script>
+
+<style scoped>
+
+</style>