增加证书登录

package.json

@@ -35,6 +35,7 @@
     "@babel/plugin-syntax-jsx": "^7.10.4",
     "@babel/plugin-transform-runtime": "^7.11.5",
     "@babel/preset-env": "^7.11.5",
+    "@babel/runtime-corejs3": "^7.11.2",
     "acorn": "^7.1.1",
     "ali-oss": "^6.11.2",
     "autoprefixer": "^9.8.6",
@@ -68,8 +69,7 @@
     "webpack": "^4.44.2",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0",
-    "webpack-merge": "^4.2.2",
-    "@babel/runtime-corejs3": "^7.11.2"
+    "webpack-merge": "^4.2.2"
   },
   "dependencies": {
     "axios": "^0.20.0",

src/components/loginAccount.vue

@@ -20,7 +20,7 @@
           <i slot="prefix" class="el-input__icon el-icon-lock"></i>
         </el-input>
       </el-form-item>
-      <el-checkbox v-model="ruleForm.RememberMe" style="margin-bottom: 10px">{{ $t('login.rememberMe') }}</el-checkbox>
+      <el-checkbox v-if="hasRemember" v-model="ruleForm.RememberMe" style="margin-bottom: 10px">{{ $t('login.rememberMe') }}</el-checkbox>
       <el-button type="primary" class="submit-button" :loading="loading" @click="handleSubmit">
         {{ $t('login.submitText') }}
       </el-button>
@@ -29,7 +29,7 @@
       <router-link :to="{ path: 'code', query: $route.query }" v-if="hasCodeLogin">{{
         $t('login.codeLogin')
       }}</router-link>
-      <router-link :to="{ path: '../password', query: $route.query }">{{ $t('login.forgetPassword') }}</router-link>
+      <router-link :to="{ path: '../password', query: $route.query }" v-if="hasForgetPassword">{{ $t('login.forgetPassword') }}</router-link>
     </div>
   </div>
 </template>
@@ -41,6 +41,8 @@ export default {
   name: 'LoginAccount',
   props: {
     hasCodeLogin: { type: Boolean, default: true },
+    hasForgetPassword: { type: Boolean, default: true },
+    hasRemember: { type: Boolean, default: true },
     headers: { type: Object, default: () => ({}) }
   },
   data() {

src/pages/certs/components/layout.vue

+<template>
+  <div>
+    <div class="app-header">
+      <img src="https://zws-imgs-pub.ezijing.com/static/public/6e2f93f8d412e69a7aadedb19dd37485.png" alt="" class="logo">
+    </div>
+    <div class="login-box">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WmpLayout',
+  metaInfo() {
+    return {
+      link: [{ rel: 'icon', href: 'https://zws-imgs-pub.ezijing.com/static/build/learn-enterprise/favicon.png' }]
+    }
+  },
+  data() {
+    return {
+      imgUrl: 'pc'
+    }
+  },
+  created() {
+    if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
+      this.imgUrl = 'mobile'
+    } else {
+      this.imgUrl = 'pc'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-header{
+  height: 130px;
+  background: #FFFFFF;
+  box-shadow: 0px 3px 15px 5px rgba(201, 201, 201, 0.5);
+  padding-top: 26px;
+  box-sizing: border-box;
+  .logo{
+    width: 705px;
+    margin: 0 auto;
+    display: block;
+  }
+}
+.login-box{
+  width: 740px;
+  margin: 100px auto;
+  // width: 100%;
+  // height: 411px;
+  background: #FFFFFF;
+  box-shadow: 2px 4px 12px 4px rgba(206, 206, 206, 0.5);
+  box-sizing: border-box;
+  padding: 90px 128px;
+}
+</style>

src/pages/certs/login.vue

+<template>
+  <div>
+    <router-view @success="handleSuccess" :hasForgetPassword="false"></router-view>
+  </div>
+</template>
+
+<script>
+import Cookies from 'js-cookie'
+export default {
+  methods: {
+    handleSuccess(response) {
+      const { url } = webConf.others.wmp
+      window.location.href = url
+    }
+  },
+  created() {
+    if (this.$i18n.locale !== 'en') {
+      Cookies.set('lang', 'en', { expires: 30, domain: '.ezijing.com' })
+      this.$i18n.locale = 'en'
+      this.$router.go(0)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.new-user {
+  font-size: 16px;
+  font-weight: bold;
+  color: rgba(255, 158, 100, 1);
+  text-align: center;
+  padding-top: 30px;
+  text-decoration: underline;
+}
+</style>

src/pages/certs/password.vue

+<template>
+  <div class="password">
+    <el-page-header @back="$router.push('login')" title="返回登录" content="忘记密码"></el-page-header>
+    <div class="password-form">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.password-form {
+  margin-top: 20px;
+}
+</style>

src/pages/certs/register.vue

+<template>
+  <div class="register">
+    <el-page-header @back="$router.push('login')" title="返回登录" content="注册"></el-page-header>
+    <div class="register-form">
+      <el-form :model="ruleForm" :rules="rules" ref="form" @submit.native.prevent>
+        <el-form-item prop="name">
+          <el-input v-model="ruleForm.name" placeholder="姓名"></el-input>
+        </el-form-item>
+        <el-form-item prop="organization">
+          <el-input v-model="ruleForm.organization" placeholder="机构"></el-input>
+        </el-form-item>
+        <el-form-item prop="job">
+          <el-input v-model="ruleForm.job" placeholder="职务"></el-input>
+        </el-form-item>
+        <el-form-item prop="mobile">
+          <el-input v-model="ruleForm.mobile" placeholder="手机"></el-input>
+        </el-form-item>
+        <el-form-item prop="code">
+          <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="email">
+          <el-input v-model="ruleForm.email" placeholder="邮箱"></el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <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>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/account'
+import countdown from '@/components/countdown.vue'
+
+export default {
+  name: 'Register',
+  components: { countdown },
+  data() {
+    return {
+      ruleForm: { name: '', organization: '', job: '', mobile: '', code: '', email: '', password: '' },
+      rules: {
+        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+        organization: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
+        job: [{ required: true, message: '请输入职务', trigger: 'blur' }],
+        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
+        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
+        email: [{ 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.mobile
+      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.mobile, signName: 'wmp', template: 'SMS_200186414' })
+        .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" scoped>
+.register-form {
+  margin-top: 20px;
+}
+</style>

src/router/routes.js

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