增加注册模块,增加通用页面

.config.dev.js

 module.exports = {
   domain: 'dev.ezijing.com',
-  url: 'https://login.ezijing.com/api',
+  url: 'https://login2.ezijing.com/api',
   isEnableToIphoneDebugger: false,
   // apiBaseURL: '//demo-login.ezijing.com/',
   webpack: {

src/api/account.js

@@ -8,14 +8,6 @@ export function login(data) {
 export function bindWechat(data) {
   return httpRequest.post('/api/passport/rest/wechat/bind-unionid', data)
 }
-// 重置密码
-export function resetPassword(data) {
-  return httpRequest.post('/api/usercenter/user/update-pwd', data)
-}
-// 发送重置验证码
-export function sendCode(data) {
-  return httpRequest.post('/api/usercenter/user/send-code', data)
-}
 // 登出
 export function logout() {
   return httpRequest.get('/api/passport/rest/logout')
@@ -24,3 +16,16 @@ export function logout() {
 export function getUser() {
   return httpRequest.get('/api/passport/account/get-user-info')
 }
+
+// 注册
+export function register(data) {
+  return httpRequest.post('/api/usercenter/user/register', data)
+}
+// 发送验证码
+export function sendCode(data) {
+  return httpRequest.post('/api/usercenter/user/send-code', data)
+}
+// 重置密码
+export function resetPassword(data) {
+  return httpRequest.post('/api/usercenter/user/update-pwd', data)
+}

src/components/loginAccount.vue

@@ -20,7 +20,7 @@
       <el-button type="primary" class="submit-button" :loading="loading" @click="handleSubmit">登录</el-button>
     </el-form>
     <div class="login-footer">
-      <router-link to="code">手机号登录</router-link>
+      <router-link to="code">验证码登录</router-link>
       <router-link to="../password">忘记密码</router-link>
     </div>
   </div>
@@ -35,7 +35,7 @@ export default {
     return {
       ruleForm: { type: 1, account: '', password: '', RememberMe: false, service: 'https://h5.ezijing.com' },
       rules: {
-        account: [{ required: true, message: '请输入账号名', trigger: 'change' }],
+        account: [{ required: true, message: '请输入账号', trigger: 'change' }],
         password: [{ required: true, message: '请输入密码', trigger: 'change' }]
       },
       loading: false

src/components/loginCode.vue

@@ -2,12 +2,12 @@
   <div>
     <el-form :model="ruleForm" :rules="rules" ref="form" @submit.native.prevent>
       <el-form-item prop="account">
-        <el-input v-model="ruleForm.account" placeholder="手机号" @keyup.enter.native="handleSubmit">
+        <el-input v-model="ruleForm.account" placeholder="邮箱/手机号" @keyup.enter.native="handleSubmit">
           <i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i>
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
-        <el-input v-model="ruleForm.password" placeholder="请输入登录验证码" @keyup.enter.native="handleSubmit">
+        <el-input v-model="ruleForm.password" placeholder="请输入验证码" @keyup.enter.native="handleSubmit">
           <i slot="prefix" class="el-input__icon el-icon-unlock"></i>
           <countdown
             slot="suffix"
@@ -22,7 +22,7 @@
       <el-button type="primary" class="submit-button" @click="handleSubmit">登录</el-button>
     </el-form>
     <div class="login-footer">
-      <router-link to="index">账号登录</router-link>
+      <router-link to="index">密码登录</router-link>
       <router-link to="../password">忘记密码</router-link>
     </div>
   </div>
@@ -39,7 +39,7 @@ export default {
     return {
       ruleForm: { type: 2, account: '', password: '', RememberMe: false, service: 'https://h5.ezijing.com' },
       rules: {
-        account: [{ required: true, message: '请输入手机号', trigger: 'change' }],
+        account: [{ required: true, message: '请输入邮箱/手机号', trigger: 'change' }],
         password: [{ required: true, message: '请输入验证码', trigger: 'change' }]
       },
       loading: false

src/components/password.vue

@@ -53,7 +53,7 @@ export default {
     return {
       ruleForm: { account: '', code: '', password: '', passwordR: '' },
       rules: {
-        account: [{ required: true, message: '请输入账号名', trigger: 'blur' }],
+        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
         code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
         password: [
           { required: true, message: '请输入新密码', trigger: 'blur' },

src/components/register.vue

+<template>
+  <div>
+    <el-form :model="ruleForm" :rules="rules" ref="form" @submit.native.prevent>
+      <el-form-item prop="username" label="昵称">
+        <el-input v-model="ruleForm.username" placeholder="请输入昵称"></el-input>
+      </el-form-item>
+      <el-form-item prop="account" label="账号">
+        <el-input v-model="ruleForm.account" placeholder="邮箱/手机号"></el-input>
+      </el-form-item>
+      <el-form-item prop="code" label="验证码">
+        <el-input v-model="ruleForm.code" placeholder="请输入验证码">
+          <countdown
+            slot="suffix"
+            size="mini"
+            :disabled="disabledSend"
+            @start="sendCodeRequest"
+            ref="countdown"
+          ></countdown>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="password" label="密码">
+        <el-input type="password" v-model="ruleForm.password" placeholder="请输入登录密码"></el-input>
+      </el-form-item>
+      <el-button type="primary" class="submit-button" :loading="loading" @click="handleSubmit">注册</el-button>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/account'
+import countdown from './countdown.vue'
+
+export default {
+  name: 'Register',
+  components: { countdown },
+  data() {
+    return {
+      ruleForm: { username: '', account: '', code: '', password: '' },
+      rules: {
+        username: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
+        account: [{ required: true, message: '请输入邮箱/手机号', trigger: 'blur' }],
+        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
+        password: [
+          { required: true, message: '请输入新密码', trigger: 'blur' },
+          { min: 6, max: 20, message: '长度为6-20个字符', trigger: 'blur' }
+        ]
+      },
+      loading: false
+    }
+  },
+  computed: {
+    disabledSend() {
+      const value = this.ruleForm.account
+      return !(/^1[3-9]\d{9}$/.test(value) || /@/.test(value))
+    }
+  },
+  methods: {
+    // 提交
+    handleSubmit() {
+      this.$refs.form.validate().then(this.handleRequest)
+    },
+    // 接口请求
+    handleRequest() {
+      this.loading = true
+      api.register(this.ruleForm).then(response => {
+        response.code === 0 ? this.handleSuccess(response) : this.$message.error(response.msg)
+        this.loading = false
+      })
+    },
+    // 成功
+    handleSuccess(response) {
+      this.$alert('注册成功', '提示', {
+        type: 'success',
+        confirmButtonText: '去登录',
+        callback: action => {
+          this.$router.push('login')
+        }
+      })
+    },
+    // 验证码
+    sendCodeRequest() {
+      api
+        .sendCode({ account: this.ruleForm.account })
+        .then(response => {
+          console.log(response)
+          if (response.code === 0) {
+            this.$message({ type: 'success', message: '验证码已发送' })
+          } else {
+            // 停止计时
+            this.$refs.countdown.stop()
+            this.$message({ type: 'error', message: response.msg })
+          }
+        })
+        .catch(this.$refs.countdown.stop)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.el-form-item {
+  margin-bottom: 20px;
+}
+.el-form-item__label {
+  line-height: 24px;
+}
+</style>

src/pages/auth/components/layout.vue

+<template>
+  <div class="wrapper">
+    <header class="header">
+      <div class="header-logo">
+        <a href="https://www.ezijing.com">
+          <img src="../assets/logo.png" />
+        </a>
+      </div>
+    </header>
+    <section class="main">
+      <div class="main-box">
+        <router-view></router-view>
+      </div>
+    </section>
+    <footer class="footer"><p class="t1">Copyright © 2020 Zijing Education. All rights reserved.</p></footer>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.wrapper {
+  padding: 60px;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: url('../assets/bg.jpg') no-repeat 50%;
+  background-size: cover;
+  box-sizing: border-box;
+}
+.main {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.main-box {
+  width: 380px;
+  padding: 60px 40px;
+  margin: 0 auto;
+  background-color: #fff;
+  box-shadow: 0 2px 10px #999;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+.footer {
+  padding: 20px 10px;
+  .t1 {
+    text-align: right;
+    color: #d3d3d3;
+  }
+}
+::v-deep .title {
+  font-weight: normal;
+  text-align: center;
+  font-size: 20px;
+  color: #353535;
+  margin-bottom: 23px;
+}
+@media (max-width: 768px) {
+  .wrapper {
+    padding: 20px;
+  }
+}
+</style>

src/pages/auth/login.vue

+<template>
+  <div class="login">
+    <h1 class="title">登录</h1>
+    <div class="login-box">
+      <router-view></router-view>
+    </div>
+    <p class="footer" @click="$router.push('../register')">注册</p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+  margin-top: 40px;
+  clear: both;
+  color: #007bad;
+  line-height: 52px;
+  text-align: center;
+  border-top: 1px solid #c2c8d0;
+  cursor: pointer;
+  margin-left: -40px;
+  margin-right: -40px;
+  margin-bottom: -60px;
+}
+</style>

src/pages/auth/password.vue

+<template>
+  <div class="password">
+    <h1 class="title">忘记密码</h1>
+    <router-view></router-view>
+    <p class="back" @click="$router.push('login')">返回登录</p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.back {
+  margin-top: 10px;
+  color: #007bad;
+  line-height: 52px;
+  cursor: pointer;
+}
+</style>

src/pages/auth/register.vue

+<template>
+  <div class="register">
+    <h1 class="title">注册</h1>
+    <router-view></router-view>
+    <p class="back" @click="$router.push('login')">返回登录</p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.back {
+  margin-top: 10px;
+  color: #007bad;
+  line-height: 52px;
+  cursor: pointer;
+}
+</style>

src/router/routes.js

 const loginAccount = () => import(/* webpackChunkName: "login" */ '@/components/loginAccount.vue')
 const loginCode = () => import(/* webpackChunkName: "login" */ '@/components/loginCode.vue')
 const password = () => import(/* webpackChunkName: "login" */ '@/components/password.vue')
+const register = () => import(/* webpackChunkName: "login" */ '@/components/register.vue')
 
 export default [
-  { path: '*', redirect: '/sofia' },
+  { path: '*', redirect: '/auth' },
+  {
+    path: '/auth',
+    component: () => import(/* webpackChunkName: "auth" */ '../pages/auth/components/layout.vue'),
+    children: [
+      { path: '', redirect: 'login/index' },
+      {
+        path: 'login',
+        component: () => import(/* webpackChunkName: "auth" */ '../pages/auth/login.vue'),
+        children: [
+          { path: '', redirect: 'index' },
+          { path: 'index', component: loginAccount },
+          { path: 'code', component: loginCode }
+        ]
+      },
+      {
+        path: 'password',
+        component: () => import(/* webpackChunkName: "auth" */ '../pages/auth/password.vue'),
+        children: [{ path: '', component: password }]
+      },
+      {
+        path: 'register',
+        component: () => import(/* webpackChunkName: "auth" */ '../pages/auth/register.vue'),
+        children: [{ path: '', component: register }]
+      }
+    ]
+  },
   {
     path: '/sofia',
     component: () => import(/* webpackChunkName: "sofia" */ '../pages/sofia/components/layout.vue'),

src/style.scss

@@ -30,5 +30,5 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 }
 .login-footer a {
   text-decoration: none;
-  color: #fff;
+  color: currentColor;
 }