新增wmp登录模块

src/components/loginCode.vue

@@ -34,6 +34,9 @@ import countdown from './countdown.vue'
 
 export default {
   name: 'LoginCode',
+  props: {
+    sendcode: { type: Object, default: () => ({}) }
+  },
   components: { countdown },
   data() {
     return {
@@ -79,8 +82,9 @@ export default {
     },
     // 验证码
     sendCodeRequest() {
+      const params = Object.assign({}, this.sendcode, { account: this.ruleForm.account })
       api
-        .sendCode({ account: this.ruleForm.account })
+        .sendCode(params)
         .then(response => {
           console.log(response)
           if (response.code === 0) {

src/components/password.vue

@@ -39,6 +39,9 @@ import countdown from './countdown.vue'
 
 export default {
   name: 'Password',
+  props: {
+    sendcode: { type: Object, default: () => ({}) }
+  },
   components: { countdown },
   data() {
     const validatePass = (rule, value, callback) => {
@@ -98,8 +101,9 @@ export default {
     },
     // 验证码
     sendCodeRequest() {
+      const params = Object.assign({}, this.sendcode, { account: this.ruleForm.account })
       api
-        .sendCode({ account: this.ruleForm.account })
+        .sendCode(params)
         .then(response => {
           console.log(response)
           if (response.code === 0) {

src/components/register.vue

@@ -32,6 +32,9 @@ import countdown from './countdown.vue'
 
 export default {
   name: 'Register',
+  props: {
+    sendcode: { type: Object, default: () => ({}) }
+  },
   components: { countdown },
   data() {
     return {
@@ -41,7 +44,7 @@ export default {
         account: [{ required: true, message: '请输入邮箱/手机号', trigger: 'blur' }],
         code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
         password: [
-          { required: true, message: '请输入新密码', trigger: 'blur' },
+          { required: true, message: '请输入登录密码', trigger: 'blur' },
           { min: 6, max: 20, message: '长度为6-20个字符', trigger: 'blur' }
         ]
       },
@@ -79,8 +82,9 @@ export default {
     },
     // 验证码
     sendCodeRequest() {
+      const params = Object.assign({}, this.sendcode, { account: this.ruleForm.account })
       api
-        .sendCode({ account: this.ruleForm.account })
+        .sendCode(params)
         .then(response => {
           console.log(response)
           if (response.code === 0) {

src/pages/wmp/components/layout.vue

 <template>
-  <div class="login-page" :style="setHeight">
+  <div class="login-page">
     <div class="login-box">
       <div class="login-mian">
         <div class="left">
@@ -13,7 +13,7 @@
         </div>
       </div>
     </div>
-    <div class="mobile-login" :style="setHeight">
+    <div class="mobile-login">
       <div class="title-box">
         <img src="../assets/mlogin-tit1.png" alt="" class="tit1" />
         <img src="../assets/mlogin-tit2.png" alt="" class="tit2" />
@@ -30,7 +30,6 @@
       <div class="mlogin-modules">
         <router-view></router-view>
       </div>
-      <div class="new-user" @click="$router.push('register')">我是新用户?</div>
     </div>
   </div>
 </template>
@@ -40,8 +39,7 @@ export default {
   name: 'WmpLayout',
   data() {
     return {
-      imgUrl: 'pc',
-      setHeight: 0
+      imgUrl: 'pc'
     }
   },
   created() {
@@ -50,7 +48,6 @@ export default {
     } else {
       this.imgUrl = 'pc'
     }
-    this.setHeight = `height: ${document.documentElement.clientHeight}px`
   }
 }
 </script>
@@ -60,15 +57,11 @@ export default {
   background: #006dbf;
   border: none;
 }
-.login-page {
-  width: 100%;
-  height: 100%;
-}
 .mobile-login {
-  width: 100%;
-  height: 100%;
+  min-height: 100vh;
   background: url('../assets/mlogin-bg.png');
   background-size: 100% 100%;
+  overflow: hidden;
   .title-box {
     padding-top: 13px;
     .tit1 {
@@ -113,8 +106,7 @@ export default {
   }
 }
 .login-box {
-  width: 100%;
-  height: 100%;
+  height: 100vh;
   background: url('../assets/login-bg.png');
   background-size: 100% 100%;
   .login-mian {
@@ -156,26 +148,7 @@ export default {
     }
   }
 }
-.new-user {
-  font-size: 16px;
-  font-weight: bold;
-  color: rgba(255, 158, 100, 1);
-  text-align: center;
-  padding-top: 30px;
-  text-decoration: underline;
-}
-/* normal 登录 */
-.code-login a {
-  float: left;
-  cursor: pointer;
-  color: #186aa9;
-  text-decoration: none;
-}
-.forget-pwd a {
-  float: right;
-  cursor: pointer;
-  color: #186aa9;
-}
+
 @media screen and (max-width: 480px) {
   .login-box {
     display: none;

src/pages/wmp/login.vue

 <template>
-  <router-view @success="handleSuccess"></router-view>
+  <div>
+    <router-view @success="handleSuccess"></router-view>
+    <div class="new-user" @click="$router.push('../register')">我是新用户?</div>
+  </div>
 </template>
 
 <script>
@@ -12,3 +15,14 @@ export default {
   }
 }
 </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/wmp/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

@@ -84,13 +84,19 @@ export default [
         children: [
           { path: '', redirect: 'index' },
           { path: 'index', component: loginAccount },
-          { path: 'code', component: loginCode }
+          { path: 'code', component: loginCode, props: { sendcode: { signName: 'wmp', template: 'SMS_200181319' } } }
         ]
       },
       {
         path: 'password',
         component: () => import(/* webpackChunkName: "wmp" */ '../pages/wmp/password.vue'),
-        children: [{ path: '', component: password }]
+        children: [
+          { path: '', component: password, props: { sendcode: { signName: 'wmp', template: 'SMS_200191908' } } }
+        ]
+      },
+      {
+        path: 'register',
+        component: () => import(/* webpackChunkName: "wmp" */ '../pages/wmp/register.vue')
       }
     ]
   },