7.25

src/layout/index.vue

@@ -55,8 +55,9 @@
               </div>
             </router-link>
           </el-menu-item>
-          <el-menu-item v-else>
-            <router-link to="/login/index">登录/注册</router-link>
+          <el-menu-item v-else> 
+    
+             <router-link to="/login/index">登录/注册</router-link>
           </el-menu-item>
         </el-menu>
       </div>
@@ -126,11 +127,6 @@ export default {
     let Reg = ''
     let reg1 = /^\/index([\/][\D]+)?$/ //首页正则
     let reg2 = /^\/login\/index$/ //登录页正则
-    // console.log(path)
-    // Reg = reg1
-    // console.log(Reg.test(path))
-    // Reg = reg2
-    // console.log(Reg.test(path))
       if(localStorage.getItem("num")==1){
 
        document.getElementById('theme').href="/static/white.css"
@@ -210,7 +206,6 @@ export default {
     //  主题替换
   clicksel(index){
       if(index==0){
-        console.log(111)
         this.num=0;
       localStorage.setItem("num",this.num);
         document.getElementById('theme').href="/static/black.css"
@@ -223,6 +218,28 @@ export default {
 
       }
     },
+    login(){
+        //进入工作台
+    
+      let loginStatus = this.$store.getters.loginStatus
+      if (loginStatus) {
+        this.$message.success('恭喜你，成功进入工作台！')
+        this.$router.push('/MPM/MPM')
+      } else {
+        this.$confirm('你还未登录，请登录后再操作, 是否登录?', '提示', {
+          confirmButtonText: '登录',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+          .then(() => {
+            this.$router.replace('/login/index')
+          })
+          .catch(() => {
+            this.$message.info('已取消！')
+          })
+      }
+
+    },
   }
 }
 </script>

src/permission.js

@@ -8,8 +8,7 @@ import { Caegw_LogUrl } from '@/settings' // 引入settings.js
 
 NProgress.configure({ showSpinner: false }) // NProgress配置
 
-const whiteList = ['/fail404', '/home','/sso','/home/myproject','/home/openproject','/index']// 免登录的白名单
-
+const whiteList = ['/fail404', '/home','/sso','/home/myproject','/home/openproject','/index','/login/index']// 免登录的白名单
 // 前置路由守卫
 router.beforeEach(async (to, from, next) => {
   NProgress.start() // 开启进度条
@@ -57,4 +56,4 @@ router.beforeEach(async (to, from, next) => {
 // 后置路由守卫
 router.afterEach(() => {
   NProgress.done() // 关闭进度条
-})
+})

src/router/index.js

@@ -68,10 +68,56 @@ export const constantRoutes = [
       }]
     
     },
-  
-
-
+  // 登陆
+  {
+    path: '/login',
+    component: Layout,
+    hidden: true,
+    redirect: 'noRedirect',
+    children: [{
+      path: 'index',
+      name: 'Index',
+      component: () => import('@/views/login/index'),
+      meta: { title: '登录', icon: '' }
+    }]
+  },
 
+  {
+    path: '/forget',
+    component: Layout,
+    hidden: true,
+    redirect: 'noRedirect',
+    children: [{
+      path: 'index',
+      name: 'Index',
+      component: () => import('@/views/forget/index'),
+      meta: { title: '忘记密码', icon: '' }
+    }]
+  },
+  {
+    path: '/register',
+    component: Layout,
+    hidden: true,
+    redirect: 'noRedirect',
+    children: [{
+      path: 'index',
+      name: 'Index',
+      component: () => import('@/views/register/index'),
+      meta: { title: '免费注册', icon: '' }
+    }]
+  },
+  {
+    path: '/protocol',
+    component: Layout,
+    hidden: true,
+    redirect: 'noRedirect',
+    children: [{
+      path: 'index',
+      name: 'Index',
+      component: () => import('@/views/protocol/index'),
+      meta: { title: '注册协议', icon: '' }
+    }]
+  },
 
   {
     path: '/fail404',

src/views/forget/index.vue

@@ -0,0 +1,414 @@
+/*忘记密码*/
+<template>
+  <div class="forget">
+    <div class="container">
+      <div class="content">
+        <div class="steps">
+          <p>
+            <span :class="[active==0?'on':'']">邮箱验证</span>
+            &gt;
+            <span :class="[active==1?'on':'']">设置新密码</span>
+            &gt;
+            <span :class="[active==2?'on':'']">密码设置成功</span>
+          </p>
+        </div>
+        <h3 class="title" v-if="active!=2">找回密码</h3>
+        <el-form
+          v-if="active==0"
+          ref="emailForm"
+          class="forget-form"
+          :model="emailForm"
+          :rules="emailRules"
+          label-position="left"
+        >
+          <el-form-item prop="email">
+            <el-input
+              ref="email"
+              type="text"
+              size="small"
+              name="email"
+              v-model="emailForm.email"
+              placeholder="请输入邮箱地址"
+            >
+              <span slot="prefix" class="solt">邮箱</span>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="code">
+            <el-input
+              ref="code"
+              type="text"
+              size="small"
+              style="width:220px"
+              name="code"
+              v-model="emailForm.code"
+              placeholder="请输入验证码"
+            >
+              <span slot="prefix" class="solt">验证码</span>
+            </el-input>
+            <el-button
+              class="code"
+              type="danger"
+              size="small"
+              :disabled="countDown>0"
+              plain
+              @click.native.prevent="getCode"
+            >{{countDown>0?`${countDown}s`:'获取验证码'}}</el-button>
+          </el-form-item>
+          <el-button type="danger" size="small" class="next-btn" @click.native.prevent="Next">下一步</el-button>
+        </el-form>
+
+        <el-form
+          v-if="active==1"
+          ref="setForm"
+          class="forget-form"
+          :model="setForm"
+          :rules="setRules"
+          label-position="left"
+        >
+          <el-form-item prop="pwd">
+            <el-input
+              ref="pwd"
+              :type="setForm.pwdType"
+              size="small"
+              name="pwd"
+              v-model="setForm.pwd"
+              placeholder="请输设置新密码"
+            >
+              <span slot="prefix" class="solt">新密码</span>
+              <svg-icon
+                slot="suffix"
+                :icon-class="setForm.pwdType === 'password' ? 'eye' : 'eye-open'"
+                @click="showPwd"
+              />
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="spwd">
+            <el-input
+              ref="spwd"
+              :type="setForm.spwdType"
+              size="small"
+              name="spwd"
+              v-model="setForm.spwd"
+              placeholder="请确认新密码"
+            >
+              <span slot="prefix" class="solt">确认密码</span>
+              <svg-icon
+                slot="suffix"
+                :icon-class="setForm.spwdType === 'password' ? 'eye' : 'eye-open'"
+                @click="showSpwd"
+              />
+            </el-input>
+          </el-form-item>
+          <el-button type="danger" size="small" class="next-btn" @click.native.prevent="Next">下一步</el-button>
+        </el-form>
+
+        <div class="link" v-if="active!=2">
+          已找回密码？
+          <router-link class="link-item" to="/login/index">立即登录</router-link>
+        </div>
+
+        <div v-if="active==2" class="success">
+          <i class="el-icon-circle-check" />
+          <p>恭喜您，成功找回密码！</p>
+          <router-link to="/login/index">返回登录页面</router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { validEmail, validCode, validPwd } from '@/utils/validate'
+import { request, enPassword } from '@/utils/request'
+export default {
+  name: 'Forget',
+  data() {
+    const validateEmail = (rule, value, callback) => {
+      if (value) {
+        if (!validEmail(value)) {
+          callback(new Error('请输入正确的邮箱'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('请输入邮箱'))
+      }
+    }
+    const validateCode = (rule, value, callback) => {
+      if (value) {
+        if (!validCode(value)) {
+          callback(new Error('验证码为6位数字'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('请输入验证码'))
+      }
+    }
+    const validatePwd = (rule, value, callback) => {
+      if (value) {
+        if (!validPwd(value)) {
+          callback(new Error('6~8位,字母开头，只能包含字母、数字和下划线'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('请输入密码'))
+      }
+    }
+    const validateSpwd = (rule, value, callback) => {
+      if (value) {
+        if (value != this.setForm.pwd) {
+          callback(new Error('两次密码不一致'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('请再次输入密码'))
+      }
+    }
+    return {
+      active: 0, //当前步骤
+      countDown: '00', // 倒计时
+      emailForm: {
+        email: '',
+        code: ''
+      },
+      emailRules: {
+        email: [{ required: true, trigger: 'blur', validator: validateEmail }],
+        code: [{ required: true, trigger: 'blur', validator: validateCode }]
+      },
+      setForm: {
+        name: '',
+        pwd: '',
+        spwd: '',
+        pwdType: 'password',
+        spwdType: 'password'
+      },
+      setRules: {
+        name: [{ required: true, message: '请设置用户名', trigger: 'blur' }],
+        pwd: [
+          // { required: true, trigger: 'blur', validator: validatePwd }
+          { required: true, message: '请输入密码', trigger: 'blur' },
+          { min: 6, max: 8, message: '密码长度为6到8位', trigger: 'blur' }
+        ],
+        spwd: [{ required: true, trigger: 'blur', validator: validateSpwd }]
+      }
+    }
+  },
+  computed: {},
+  methods: {
+    // 切换显示密码
+    showPwd() {
+      this.setForm.pwdType =
+        this.setForm.pwdType === 'password' ? '' : 'password'
+      this.$nextTick(() => {
+        this.$refs.pwd.focus()
+      })
+    },
+    // 切换显示二次密码
+    showSpwd() {
+      this.setForm.spwdType =
+        this.setForm.spwdType === 'password' ? '' : 'password'
+      this.$nextTick(() => {
+        this.$refs.spwd.focus()
+      })
+    },
+    // 倒计时
+    theLast() {
+      this.countDown = 60
+      let timer = setInterval(() => {
+        if (this.countDown > 0) {
+          this.countDown--
+          this.countDown < 10 && (this.countDown = '0' + this.countDown)
+        } else {
+          clearInterval(timer)
+        }
+      }, 1000)
+    },
+    //获取验证码
+    getCode() {
+      if (this.countDown > 0) return this.$message.error('请不要频繁点击!')
+      if (!this.emailForm.email) return this.$message.error('请输入邮箱地址!')
+      let params = {
+        transCode: 'A00001',
+        mail: this.emailForm.email,
+        queryNo: '',
+        type: '0'
+      }
+      request(params)
+        .then(res => {
+          this.$message.success(
+            '验证码已发送至邮箱：' + this.emailForm.email + ',请注意查收！'
+          )
+          this.theLast()
+        })
+        .catch(err => {
+          this.$message.error(err.returnMsg)
+        })
+    },
+    // 下一步
+    Next() {
+      if (this.active == 0) {
+        this.$refs.emailForm.validate(valid => {
+          if (valid) {
+            let params = {
+              transCode: 'UT0003',
+              mail: this.emailForm.email,
+              verificationCode: this.emailForm.code
+            }
+            request(params)
+              .then(res => {
+                this.$message.success('邮箱验证通过！')
+                this.active = 1
+              })
+              .catch(err => {})
+          } else {
+            return false
+          }
+        })
+      } else if (this.active == 1) {
+        this.$refs.setForm.validate(valid => {
+          if (valid) {
+            let params = {
+              transCode: 'A00003',
+              userName: '',
+              password: enPassword(this.setForm.pwd),
+              mail: this.emailForm.email
+            }
+            request(params)
+              .then(res => {
+                this.$message({
+                  message: '恭喜您，成功找回密码！',
+                  type: 'success'
+                })
+                this.active = 2
+              })
+              .catch(err => {})
+          } else {
+            return false
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+.forget {
+  padding: 50px 0;
+  @include w_h(100%, calc(100vh - 80px));
+  background: $color_f5;
+  .container {
+    @include w_h(100%, 100%);
+    .content {
+      margin: 0 auto;
+      @include w_h(430px, 100%);
+      background: $color_f;
+      box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.04);
+      .steps {
+        @include w_h(100%, 34px);
+        font-size: 12px;
+        line-height: 34px;
+        text-align: center;
+        color: #78a4db;
+        background: #004498;
+        .on {
+          color: $color_f;
+        }
+      }
+      .title {
+        margin: 30px auto;
+        font-size: 20px;
+        text-align: center;
+        color: $color_3;
+      }
+      .forget-form {
+        padding: 0 50px 30px;
+        @include w_h(100%);
+        background: $color_f;
+        .solt {
+          padding: 0 6px;
+          font-size: 12px;
+          color: $color_6;
+        }
+        .code {
+          @include position(absolute, 4px, auto, auto, 0);
+          @include w_h(100px);
+          font-size: 12px;
+          vertical-align: middle;
+          cursor: pointer;
+          user-select: none;
+        }
+        .agree {
+          text-align: left;
+          font-size: 12px;
+          a {
+            color: #409eff;
+          }
+        }
+        .next-btn {
+          margin: 30px auto 10px;
+          @include w_h();
+        }
+      }
+      .link {
+        font-size: 12px;
+        text-align: center;
+        color: $color_9;
+        .link-item {
+          color: $color_on;
+        }
+      }
+      .success {
+        font-size: 14px;
+        text-align: center;
+        i {
+          margin-top: 50px;
+          font-size: 60px;
+          color: #41b300;
+        }
+        p {
+          margin: 20px auto;
+          font-size: 20px;
+          font-weight: 700;
+          color: $color_3;
+        }
+        a {
+          font-size: 14px;
+          color: $color_9;
+        }
+        a:hover {
+          color: #409eff;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+@import '@/styles/variables.scss';
+@supports (-webkit-mask: none) and (not (cater-color: $color_9)) {
+  .forget-form .el-input input {
+    font-size: 12px;
+    color: $color_9;
+  }
+}
+.forget-form {
+  .el-input {
+    &__inner:focus {
+      border-color: $color_9;
+    }
+    &--prefix .el-input__inner {
+      color: $color_6;
+      padding-left: 65px;
+    }
+  }
+}
+</style>>
+
+

src/views/login/index.vue

@@ -189,11 +189,12 @@ export default {
 @import '@/styles/variables.scss';
 @import '@/styles/mixin.scss';
 .login {
-  padding: 50px 0;
+  // padding: 50px 0;
   @include w_h(100%, calc(100vh - 80px));
   .container {
     @include w_h(100%, 100%);
-    background: $color_b url('../../assets/img/login.png') no-repeat center;
+    // background: $color_b url('../../assets/img/login.png') no-repeat center;
+     background: $color_b url('../../assets/img/20200328092528yop576.jpg') no-repeat center;
     background-size: cover;
     .content {
       padding: 0 $pad;

src/views/protocol/index.vue

@@ -0,0 +1,88 @@
+/*协议*/
+<template>
+  <div class="protocol">
+    <div class="container">
+      <div class="content">
+        <h3 class="title">{{title}}</h3>
+        <p v-for="list in content" :key="list">{{list}}</p>
+        <div class="btn">
+          <el-button
+            type="danger"
+            size="small"
+            class="agree-btn"
+            @click.native.prevent="Agree"
+          >我已阅读并同意</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { request } from '@/utils/request'
+export default {
+  name: 'Protocol',
+  data() {
+    return {
+      title: '注册协议',
+      content: []
+    }
+  },
+  created() {
+    let params = {
+      transCode: 'C00020',
+      type: 'P001'
+    }
+    request(params)
+      .then(res => {
+        this.content = res.content.split('\n')
+      })
+      .catch(err => {})
+  },
+  methods: {
+    //阅读并同意
+    Agree() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+.protocol {
+  padding: 50px 0;
+  @include w_h(100%, 100%);
+  background: $color_f5;
+  .container {
+    @include w_h(100%, 100%);
+    .content {
+      padding: 0 $pad;
+      @include w_h(100%, 100%);
+      overflow-y: scroll;
+      .title {
+        margin-bottom: 20px;
+        font-size: 16px;
+        text-align: center;
+        color: $color_6;
+      }
+      p {
+        margin-bottom: 10px;
+        font-size: 14px;
+        color: $color_9;
+        text-align: justify;
+        word-wrap: break-word;
+        text-indent: 28px;
+      }
+      .btn {
+        @include w_h();
+        @include flex(center);
+        .agree-btn {
+          margin: 20px auto;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/register/index.vue

@@ -0,0 +1,442 @@
+/*注册*/
+<template>
+  <div class="register">
+    <div class="container">
+      <div class="content">
+        <div class="steps">
+          <p>
+            <span :class="[active==0?'on':'']">邮箱验证</span>
+            &gt;
+            <span :class="[active==1?'on':'']">设置密码</span>
+            &gt;
+            <span :class="[active==2?'on':'']">注册成功</span>
+          </p>
+        </div>
+        <h3 class="title" v-if="active!=2">免费注册</h3>
+        <el-form
+          v-if="active==0"
+          ref="emailForm"
+          class="register-form"
+          :model="emailForm"
+          :rules="emailRules"
+          label-position="left"
+        >
+          <el-form-item prop="email">
+            <el-input
+              ref="email"
+              type="text"
+              size="small"
+              name="email"
+              v-model="emailForm.email"
+              placeholder="请输入邮箱地址"
+            >
+              <span slot="prefix" class="solt">邮箱</span>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="code">
+            <el-input
+              ref="code"
+              type="text"
+              size="small"
+              style="width:220px"
+              name="code"
+              v-model="emailForm.code"
+              placeholder="请输入验证码"
+            >
+              <span slot="prefix" class="solt">验证码</span>
+            </el-input>
+            <el-button
+              class="code"
+              type="danger"
+              size="small"
+              :disabled="countDown>0"
+              plain
+              @click.native.prevent="getCode"
+            >{{countDown>0?`${countDown}s`:'获取验证码'}}</el-button>
+          </el-form-item>
+          <div class="agree">
+            <el-checkbox v-model="emailForm.checked"></el-checkbox>
+            <span>点击“下一步”按钮将视为您已阅读并同意</span>
+            <router-link to="/protocol/index">《注册协议》</router-link>
+          </div>
+          <el-button type="danger" size="small" class="next-btn" @click.native.prevent="Next">下一步</el-button>
+        </el-form>
+
+        <el-form
+          v-if="active==1"
+          ref="setForm"
+          class="register-form"
+          :model="setForm"
+          :rules="setRules"
+          label-position="left"
+        >
+          <el-form-item prop="name">
+            <el-input
+              ref="name"
+              type="text"
+              size="small"
+              name="name"
+              v-model="setForm.name"
+              placeholder="请设置用户名"
+            >
+              <span slot="prefix" class="solt">用户名</span>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item prop="pwd">
+            <el-input
+              ref="pwd"
+              :type="setForm.pwdType"
+              size="small"
+              name="pwd"
+              minlength="6"
+              maxlength="8"
+              v-model="setForm.pwd"
+              placeholder="请输入密码"
+            >
+              <span slot="prefix" class="solt">密码</span>
+              <svg-icon
+                slot="suffix"
+                :icon-class="setForm.pwdType === 'password' ? 'eye' : 'eye-open'"
+                @click="showPwd"
+              />
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="spwd">
+            <el-input
+              ref="spwd"
+              :type="setForm.spwdType"
+              size="small"
+              name="spwd"
+              minlength="6"
+              maxlength="8"
+              v-model="setForm.spwd"
+              placeholder="请确认密码"
+            >
+              <span slot="prefix" class="solt">确认密码</span>
+              <svg-icon
+                slot="suffix"
+                :icon-class="setForm.spwdType === 'password' ? 'eye' : 'eye-open'"
+                @click="showSpwd"
+              />
+            </el-input>
+          </el-form-item>
+          <el-button type="danger" size="small" class="next-btn" @click.native.prevent="Next">下一步</el-button>
+        </el-form>
+
+        <div class="link" v-if="active!=2">
+          已有账号？
+          <router-link class="link-item" to="/login/index">立即登录</router-link>
+        </div>
+
+        <div v-if="active==2" class="success">
+          <i class="el-icon-circle-check" />
+          <p>恭喜您，注册成功！</p>
+          <router-link to="/login/index">返回登录页面</router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { validEmail, validCode, validPwd } from '@/utils/validate'
+import { request, enPassword } from '@/utils/request'
+export default {
+  name: 'Register',
+  data() {
+    const validateEmail = (rule, value, callback) => {
+      if (value) {
+        if (!validEmail(value)) {
+          callback(new Error('请输入正确的邮箱'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('请输入邮箱'))
+      }
+    }
+    const validateCode = (rule, value, callback) => {
+      if (value) {
+        if (!validCode(value)) {
+          callback(new Error('验证码为6位数字'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('请输入验证码'))
+      }
+    }
+    const validatePwd = (rule, value, callback) => {
+      if (value) {
+        if (!validPwd(value)) {
+          callback(new Error('6~8位,字母开头，只能包含字母、数字和下划线'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('请输入密码'))
+      }
+    }
+    const validateSpwd = (rule, value, callback) => {
+      if (value) {
+        if (value != this.setForm.pwd) {
+          callback(new Error('两次密码不一致'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('请再次输入密码'))
+      }
+    }
+    return {
+      active: 0, //当前步骤
+      countDown: '00', // 倒计时
+      emailForm: {
+        email: '',
+        code: '',
+        checked: true
+      },
+      emailRules: {
+        email: [{ required: true, trigger: 'blur', validator: validateEmail }],
+        code: [{ required: true, trigger: 'blur', validator: validateCode }]
+      },
+      setForm: {
+        name: '',
+        pwd: '',
+        spwd: '',
+        pwdType: 'password',
+        spwdType: 'password'
+      },
+      setRules: {
+        name: [{ required: true, message: '请设置用户名', trigger: 'blur' }],
+        pwd: [
+          // { required: true, trigger: 'blur', validator: validatePwd }
+          { required: true, message: '请输入密码', trigger: 'blur' },
+          { min: 6, max: 8, message: '密码长度为6到8位', trigger: 'blur' }
+        ],
+        spwd: [{ required: true, trigger: 'blur', validator: validateSpwd }]
+      }
+    }
+  },
+  computed: {},
+  methods: {
+    // 切换显示密码
+    showPwd() {
+      this.setForm.pwdType =
+        this.setForm.pwdType === 'password' ? '' : 'password'
+      this.$nextTick(() => {
+        this.$refs.pwd.focus()
+      })
+    },
+    // 切换显示二次密码
+    showSpwd() {
+      this.setForm.spwdType =
+        this.setForm.spwdType === 'password' ? '' : 'password'
+      this.$nextTick(() => {
+        this.$refs.spwd.focus()
+      })
+    },
+    // 倒计时
+    theLast() {
+      this.countDown = 60
+      let timer = setInterval(() => {
+        if (this.countDown > 0) {
+          this.countDown--
+          this.countDown < 10 && (this.countDown = '0' + this.countDown)
+        } else {
+          clearInterval(timer)
+        }
+      }, 1000)
+    },
+    //获取验证码
+    getCode() {
+      if (this.countDown > 0) return this.$message.error('请不要频繁点击!')
+      if (!this.emailForm.email) return this.$message.error('请输入邮箱地址!')
+      let params = {
+        transCode: 'A00001',
+        mail: this.emailForm.email,
+        queryNo: '',
+        type: '0'
+      }
+      request(params)
+        .then(res => {
+          this.$message.success(
+            '验证码已发送至邮箱：' + this.emailForm.email + ',请注意查收！'
+          )
+          this.theLast()
+        })
+        .catch(err => {})
+    },
+    // 下一步
+    Next() {
+      if (this.active == 0) {
+        this.$refs.emailForm.validate(valid => {
+          if (valid) {
+            if (this.emailForm.checked) {
+              let params = {
+                transCode: 'UT0003',
+                mail: this.emailForm.email,
+                verificationCode: this.emailForm.code
+              }
+              request(params)
+                .then(res => {
+                  this.$message.success('邮箱验证通过！')
+                  this.active = 1
+                })
+                .catch(err => {})
+            } else {
+              this.$alert('请仔细阅读《注册协议》，并同意！', '提示', {
+                confirmButtonText: '确定',
+                callback: action => {}
+              })
+            }
+          } else {
+            return false
+          }
+        })
+      } else if (this.active == 1) {
+        this.$refs.setForm.validate(valid => {
+          if (valid) {
+            let params = {
+              transCode: 'A00003',
+              userName: this.setForm.name,
+              password: enPassword(this.setForm.pwd),
+              mail: this.emailForm.email
+            }
+            request(params)
+              .then(res => {
+                this.$message({
+                  message: '恭喜您，注册成功！',
+                  type: 'success'
+                })
+                this.active = 2
+              })
+              .catch(err => {})
+          } else {
+            return false
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+.register {
+  padding: 50px 0;
+  @include w_h(100%, 100%);
+  background: $color_f5;
+  .container {
+    @include w_h(100%, 100%);
+    .content {
+      margin: 0 auto;
+      @include w_h(430px, 100%);
+      background: $color_f;
+      box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.04);
+      .steps {
+        @include w_h(100%, 34px);
+        font-size: 12px;
+        line-height: 34px;
+        text-align: center;
+        color: #78a4db;
+        background: #004498;
+        .on {
+          color: $color_f;
+        }
+      }
+      .title {
+        margin: 30px auto;
+        font-size: 20px;
+        text-align: center;
+        color: $color_3;
+      }
+      .register-form {
+        padding: 0 50px 30px;
+        @include w_h(100%);
+        background: $color_f;
+        .solt {
+          padding: 0 6px;
+          font-size: 12px;
+          color: $color_6;
+        }
+        .code {
+          @include position(absolute, 4px, auto, auto, 0);
+          @include w_h(100px);
+          font-size: 12px;
+          vertical-align: middle;
+          cursor: pointer;
+          user-select: none;
+        }
+        .agree {
+          text-align: left;
+          font-size: 12px;
+          a {
+            color: #409eff;
+          }
+        }
+        .next-btn {
+          margin: 30px auto 10px;
+          @include w_h();
+        }
+      }
+      .link {
+        font-size: 12px;
+        text-align: center;
+        color: $color_9;
+        .link-item {
+          color: $color_on;
+        }
+      }
+      .success {
+        font-size: 14px;
+        text-align: center;
+        i {
+          margin-top: 50px;
+          font-size: 60px;
+          color: #41b300;
+        }
+        p {
+          margin: 20px auto;
+          font-size: 20px;
+          font-weight: 700;
+          color: $color_3;
+        }
+        a {
+          font-size: 14px;
+          color: $color_9;
+        }
+        a:hover {
+          color: #409eff;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+@import '@/styles/variables.scss';
+@supports (-webkit-mask: none) and (not (cater-color: $color_9)) {
+  .register-form .el-input input {
+    font-size: 12px;
+    color: $color_9;
+  }
+}
+.register-form {
+  .el-input {
+    &__inner:focus {
+      border-color: $color_9;
+    }
+    &--prefix .el-input__inner {
+      color: $color_6;
+      padding-left: 65px;
+    }
+  }
+}
+</style>>
+
+