登录注册相关页面

src/assets/icons/svg/z_phone.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688794848340" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2352" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z" p-id="2353"></path></svg>
\ No newline at end of file

src/router/routers.js

@@ -7,7 +7,7 @@ Vue.use(Router)
 export const constantRouterMap = [
   { path: '/login',
     meta: { title: '登录', noCache: true },
-    component: (resolve) => require(['@/views/login'], resolve),
+    component: (resolve) => require(['@/views/homepage/login'], resolve),
     hidden: true
   },
   { path: '/backlogin',
@@ -164,6 +164,14 @@ export const constantRouterMap = [
     },
     hidden: true
   },
+  {
+    path: '/console/registerInfo',
+    meta: { title: '用户注册信息', noCache: true },
+    component: (resolve) => {
+      return require(['@/views/homepage/console/registerInfo'], resolve)
+    },
+    hidden: true
+  },
   {
     path: '/console/userInfo',
     meta: { title: '个人中心-用户信息', noCache: true },

src/views/homepage/components/titleMenus.vue

@@ -7,6 +7,12 @@
 </template>
 <script>
 export default {
+  props: {
+    menuIndex: {
+      type: String,
+      default: '0'
+    }
+  },
   data() {
     return {
       menus: [

src/views/homepage/console/registerInfo.vue

+<template>
+  <div class="page-body">
+    <div class="head-box">
+      <div class="head-box-top">
+        <div class="top-call" />
+        <div class="top-call"><img src="@/assets/home_images/gemho_logo_b.png"></div>
+        <div class="top-call"><title-menus ref="titleMenus" menu-index="99" style="padding-top: 15px" /></div>
+        <div class="top-call"><user-login ref="userLogin" /></div>
+        <div class="top-call"><language-setting ref="languageSetting" /></div>
+      </div>
+    </div>
+    <div class="content-box">
+      <div style="width: 88%;padding-left: 9%;padding-top: 130px">
+        <div class="page-title" style="text-align: center">填写注册信息</div>
+        <div class="form-table-box">
+          <el-form ref="formViewRef" :model="formData" :rules="rules" :status-icon="true" label-width="240px">
+            <el-form-item label="企业名称：" class="form-cell" prop="enterpriseName">
+              <div class="cell-box">
+                <el-input v-model="formData.enterpriseName" placeholder="请输入企业名称" class="cell-input" />
+              </div>
+            </el-form-item>
+            <el-form-item label="企业联系人：" class="form-cell" prop="enterpriseContactPerson">
+              <div class="cell-box">
+                <el-input v-model="formData.enterpriseContactPerson" placeholder="请输入联系人" class="cell-input" />
+              </div>
+            </el-form-item>
+            <el-form-item label="企业联系人手机号：" class="form-cell" prop="enterpriseContactPersonPhone">
+              <div class="cell-box">
+                <el-input v-model="formData.enterpriseContactPersonPhone" placeholder="请输入手机号" class="cell-input" />
+              </div>
+            </el-form-item>
+            <el-form-item label="注册地址：" class="form-cell" required>
+              <div class="cell-box">
+                <el-select v-model="formData.registeredAddressProvince" placeholder="省" style="width: 120px" @change="findAreaByCodeAndType(formData.registeredAddressProvince,2, 'cityOpts')">
+                  <el-option v-for="item in provinceOpts" :key="item.id" :label="item.name" :value="item.code" />
+                </el-select>
+                <el-select v-model="formData.registeredAddressCity" placeholder="市" style="width: 160px" @change="findAreaByCodeAndType(formData.registeredAddressCity,3, 'countyOpts')">
+                  <el-option v-for="item in cityOpts" :key="item.id" :label="item.name" :value="item.code" />
+                </el-select>
+                <el-select v-model="formData.registeredAddressArea" placeholder="区/县" style="width: 160px">
+                  <el-option v-for="item in countyOpts" :key="item.id" :label="item.name" :value="item.code" />
+                </el-select>
+              </div>
+              <div class="cell-box">
+                <el-input v-model="formData.registeredAddressStreet" placeholder="详细地址（例如：和平路北大街106号）" class="cell-input" />
+              </div>
+            </el-form-item>
+            <el-form-item label="企业邮箱：" class="form-cell" prop="enterpriseEmail">
+              <div class="cell-box">
+                <el-input v-model="formData.enterpriseEmail" placeholder="请输入邮箱" class="cell-input" />
+              </div>
+            </el-form-item>
+          </el-form>
+          <div style="width: 100%;text-align: center">
+            <el-button type="primary" @click="submitForm()">完成</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <home-footer ref="homeFooter" />
+    <el-backtop />
+  </div>
+</template>
+<script>
+import titleMenus from '../components/titleMenusV2'
+import userLogin from '../components/userLoginV2'
+import languageSetting from '../components/languageSettingV2'
+import homeFooter from '../components/homeFooter'
+import { getToken } from '@/utils/auth'
+import { HttpReq } from '@/api/common'
+
+export default {
+  components: { titleMenus, userLogin, languageSetting, homeFooter },
+  dicts: ['industry_type', 'supplier_rank', 'company_type', 'business_status'],
+  data() {
+    return {
+      uploadHeaders: { 'Authorization': getToken() },
+      imgSrcStart: process.env.VUE_APP_BASE_API,
+      dialogImageUrl: '',
+      dialogImageVisible: false,
+      visible: false,
+      title: '',
+      imgList: [],
+      dialogImgUrl: '',
+      dialogImgVisible: false,
+      provinceOpts: [],
+      cityOpts: [],
+      countyOpts: [],
+      formData: {
+        annualInspectionDate: '', // 审核日期
+        businessLicense: '', // 营业执照的照片名称
+        businessScope: '', // 经营范围
+        businessScopeIntroduction: '', // 业务范围介绍
+        businessStatus: '', // 经营状态
+        enterpriseAddress: '', // 企业地址
+        enterpriseContactPerson: '', // 企业联系人
+        enterpriseContactPersonPhone: '', // 企业联系人手机号
+        enterpriseEmail: '', // 企业邮箱
+        enterpriseIntroduction: '', // 企业介绍
+        enterpriseName: '', // 企业名称
+        enterpriseType: '', // 企业类型
+        establishmentDate: '', // 成立日期
+        industry: '', // 所属行业
+        legalRepresentative: '', // 法定代表人
+        mainProductsIntroduction: '', // 主营产品介绍
+        operatingPeriod: '', // 经营期限
+        registeredAddressArea: '', // 注册地址-区
+        registeredAddressCity: '', // 注册地址-市
+        registeredAddressProvince: '', // 注册地址-省
+        registeredAddressStreet: '', // 注册地址-街道
+        registeredCapital: '', // 注册资本
+        registrationAuthority: '', // 登记机关
+        supplierLevel: '1', // 供应商级别
+        taxpayerIdentificationNumber: '', // 纳税人识别号
+        unifiedSocialCreditCode: '', // 统一社会信用代码
+        sysUserId: null
+      },
+      rules: {
+        enterpriseName: { required: true, message: '请填写企业名称', trigger: 'blur' },
+        enterpriseContactPerson: { required: true, message: '请填写企业联系人', trigger: 'blur' },
+        enterpriseContactPersonPhone: { required: true, message: '请填写企业联系人手机号', trigger: 'blur' },
+        registeredAddressProvince: { required: true, message: '请填写企业地址', trigger: 'blur' },
+        registeredAddressCity: { required: true, message: '请填写企业地址', trigger: 'blur' },
+        registeredAddressStreet: { required: true, message: '请填写企业地址', trigger: 'blur' },
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.loadData()
+    })
+  },
+  methods: {
+    cancelView() {
+      this.$router.go(-1)
+    },
+    submitForm() {
+      this.$refs.formViewRef.validate((valid, obj) => {
+        if (valid) {
+
+        } else {
+          this.$message({
+            message: '表单信息有误，请核对无误后提交！',
+            type: 'error'
+          })
+        }
+      })
+    },
+    handleProgress(file) {
+      if (this.formData.businessLicense.split(';').length >= 2) {
+        this.$message({
+          message: '超出最大上传数量限制',
+          type: 'info'
+        })
+        return false
+      }
+    },
+    handleExceed() {
+      this.$message({
+        message: '超出最大上传数量限制',
+        type: 'info'
+      })
+    },
+    handleRemoveImg(item) {
+      this.imgList.splice(this.imgList.indexOf(item), 1)
+      const arr = this.formData.businessLicense.split(';')
+      arr.splice(arr.indexOf(item), 1)
+      this.formData.businessLicense = arr.join(';')
+    },
+    handleRemove(file, fileList) {
+      if (!file.response) {
+        return
+      }
+      HttpReq.backstageApi.deleteBusinessLicense({
+        businessLicense: file.response.businessLicense
+      }).then((res) => {
+        this.$notify({
+          title: res.msg,
+          type: 'success',
+          duration: 2500
+        })
+        const arr = this.formData.businessLicense.split(';')
+        arr.splice(arr.indexOf(file.response.businessLicense), 1)
+        this.formData.businessLicense = arr.join(';')
+      })
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogImageVisible = true
+    },
+    handleImported(response, file, fileList) {
+      this.$nextTick(() => {
+        const arr = this.formData.businessLicense ? this.formData.businessLicense.split(';') : []
+        arr.push(response.businessLicense)
+        this.formData.businessLicense = arr.join(';')
+        this.$notify({
+          title: '上传成功！',
+          type: 'success',
+          duration: 2500
+        })
+      })
+    },
+    findAreaByCodeAndType(code, type, optsName) {
+      switch (optsName) {
+        case 'provinceOpts':
+        case 'cityOpts':
+          this.formData.registeredAddressCity = null
+          this.formData.registeredAddressArea = null
+          break
+        case 'countyOpts':
+          this.formData.registeredAddressArea = null
+      }
+      this.findAreaQueryOnly(code, type, optsName)
+    },
+    findAreaQueryOnly(code, type, optsName) {
+      HttpReq.backstageApi.findAreaByCodeAndType({
+        code, type
+      }).then((res) => {
+        this[optsName] = res
+      })
+    },
+    loadData() {
+      this.findAreaQueryOnly(0, 1, 'provinceOpts')
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.touch {
+  cursor:pointer;
+}
+.clear {
+  clear: both
+}
+.inline-block {
+  display: inline-block;
+}
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+}
+.showcase {
+  padding: 1px 0;
+  font-size: 20px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+}
+.form-table-box {
+  width: 1080px;
+  margin: 20px auto;
+  padding: 30px;
+  border: 1px solid rgba(0,0,0,0.12);
+  box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.12);
+  border-radius: 10px;
+}
+.head-box {
+  width: 100vw;
+  top: 0;
+  position: fixed;
+  background: none repeat scroll 0 0 white;
+  z-index: 999;
+  box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
+  .head-box-top {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    .top-call {
+      height: 80px;
+      padding-top: 15px;
+    }
+  }
+}
+.content-box {
+  min-height: calc(100vh - 300px);
+  font-family: Source Han Sans CN;
+  user-select: none;
+  .page-title {
+    margin-top: 20px;
+    padding: 0 20px;
+    font-size: 26px;
+    font-weight: bold;
+    color: #333333;
+  }
+}
+.line-btn {
+  display: flex;
+  justify-content: center;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  .btn-o {
+    margin: 0 25px;
+    width: 360px;
+    padding: 6px 10px;
+    background: #F7601A;
+    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+    text-align: center;
+    border: 1px solid transparent;
+    font-size: 22px;
+    color: #FFFFFF;
+    cursor:pointer;
+    user-select: none;
+  }
+  .btn-o:hover {
+    border: 1px solid rgba(30, 144, 255, 0.8);
+    color: #1482f0;
+  }
+  .btn-l {
+    margin: 0 25px;
+    width: 360px;
+    padding: 10px;
+    background: #1961C5;
+    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+    text-align: center;
+    border: 1px solid transparent;
+    font-size: 22px;
+    color: #FFFFFF;
+    cursor:pointer;
+    user-select: none;
+  }
+  .btn-l:hover {
+    border: 1px solid rgba(0,0,0,0.3);
+    color: #F7601A;
+  }
+  .btn-b {
+    margin: 0 10px;
+    width: 168px;
+    padding: 6px;
+    background: #EFF6FF;
+    border: 1px solid transparent;
+    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
+    text-align: center;
+    font-size: 20px;
+    color: #1961C5;
+    cursor:pointer;
+    user-select: none;
+  }
+  .btn-b:hover {
+    border: 1px solid rgba(30, 144, 255, 0.9);
+  }
+  .active {
+    color: #FFFFFF;
+    font-weight: 400;
+    background: #1961C5;
+  }
+}
+.grid-content {
+  border: 1px solid rgba(100, 100, 100, 0.3);
+  padding: 0;
+}
+.grid-label {
+  background: #dedede;
+  padding: 0 10px;
+}
+.editor{
+  text-align:left;
+  width: 680px;
+}
+::v-deep .w-e-text-container {
+  height: 560px !important;
+}
+.cell-box {
+  min-width: 120px;
+  .cell-input {
+    width: 620px;
+  }
+  .cell-select {
+    width: 220px;
+  }
+  .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 28px;
+    line-height: 24px;
+    padding: 0 8px;
+  }
+  .input-new-tag {
+    width: 140px;
+    height: 28px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+  >>>.el-input__inner {
+    border: 1px solid rgba(100, 100, 100, 0.1);
+    border-bottom: 1px solid rgba(100, 100, 100, 0.2);
+    border-radius: 5px;
+  }
+  >>>.el-input.is-disabled .el-input__inner {
+    border-radius: 0;
+    border: 0;
+    border-bottom: 1px solid rgba(100, 100, 100, 0.4);
+    background: white;
+    cursor: text;
+  }
+  >>>.el-input.is-disabled .el-input__icon {
+    cursor: text;
+  }
+  >>>.el-icon-circle-check {
+    color: #13ce66;
+  }
+  //>>>.el-icon-arrow-up:before {
+  //  content: '';
+  //}
+}
+</style>

src/views/homepage/index.vue

@@ -4,7 +4,7 @@
       <div class="head-box-top">
         <div class="top-call" />
         <div class="top-call"><img src="@/assets/home_images/gemho_logo.png" alt="gemho-logo"></div>
-        <div class="top-call"><title-menus ref="titleMenus" /></div>
+        <div class="top-call"><title-menus ref="titleMenus" menu-index="0" /></div>
         <div class="top-call"><user-login ref="userLogin" /></div>
         <div class="top-call"><language-setting ref="languageSetting" /></div>
       </div>
@@ -168,7 +168,6 @@ import languageSetting from './components/languageSetting'
 import searchPanel from './components/searchPanel'
 import homeFooter from './components/homeFooter'
 import inquiryView from './components/inquiryView'
-import NProgress from 'nprogress'
 
 export default {
   components: { floatBtn, titleMenus, userLogin, languageSetting, searchPanel, homeFooter, inquiryView },

src/views/homepage/login.vue

+<template>
+  <div class="page-body">
+    <div class="head-box-login">
+      <div class="head-box-top">
+        <div class="top-call" />
+        <div class="top-call"><img src="@/assets/home_images/gemho_logo.png" alt="gemho-logo"></div>
+        <div class="top-call"><title-menus ref="titleMenus" menu-index="99" /></div>
+        <div class="top-call"><user-login ref="userLogin" /></div>
+        <div class="top-call"><language-setting ref="languageSetting" /></div>
+      </div>
+    </div>
+    <div class="content-box-login">
+      <div class="login-panel" style="width: 64%;text-align: center"><img src="@/assets/home_images/login_title.png"></div>
+      <div class="login-panel" style="width: 36%">
+        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
+          <h3>{{ title }}</h3>
+          <div class="login-remember" style="padding-bottom: 10px">
+            <span v-if="mode===1" class="touch" @click="changeMode(2)"><i class="el-icon-s-unfold el-icon--left" />短信快捷登录</span>
+            <span v-if="mode===2" class="touch" @click="changeMode(1)"><i class="el-icon-s-fold el-icon--left" />使用密码登录</span>
+          </div>
+          <el-form-item prop="username">
+            <el-input v-model="loginForm.username" size="medium" type="text" auto-complete="off" placeholder="请输入11位手机号码">
+              <template slot="prepend">+86</template>
+              <svg-icon slot="prefix" icon-class="z_phone" class="el-input__icon input-icon" />
+            </el-input>
+          </el-form-item>
+          <el-form-item v-show="mode!==2" prop="password">
+            <el-input v-model="loginForm.password" size="medium" type="password" auto-complete="off" placeholder="请输入登录密码" @keyup.enter.native="handleLogin">
+              <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+            </el-input>
+          </el-form-item>
+          <el-form-item v-show="mode===1" prop="code">
+            <el-input v-model="loginForm.code" size="medium" auto-complete="off" placeholder="图像验证码" style="width: 70%" @keyup.enter.native="handleLogin">
+              <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+            </el-input>
+            <div class="login-code">
+              <img :src="codeUrl" @click="getCode">
+            </div>
+          </el-form-item>
+          <el-form-item v-show="mode!==1" prop="sms">
+            <el-input v-model="loginForm.sms" size="medium" auto-complete="off" placeholder="短信验证码" style="width: 70%" @keyup.enter.native="handleLogin">
+              <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+            </el-input>
+            <div class="login-code">
+              <div class="sms-btn touch" @click="getSmsCode">{{ smsBtn }} {{ smsTime?smsTime+'s':'' }}</div>
+            </div>
+          </el-form-item>
+          <el-form-item v-show="mode!==3" style="width:100%;">
+            <div class="login-remember">
+              <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;opacity: 0.8">下次自动登录</el-checkbox>
+            </div>
+            <el-button :loading="loading" size="medium" type="primary" style="width:100%;font-size:17px;padding:13px" @click.native.prevent="handleLogin">
+              <span v-if="!loading">{{ title }}</span>
+              <span v-else>登 录 中...</span>
+            </el-button>
+            <div class="login-remember" style="margin: 10px 0">
+              <span class="underline touch" @click="changeMode(3)">去注册</span>
+            </div>
+          </el-form-item>
+          <el-form-item v-show="mode===3" style="width:100%;">
+            <el-button :loading="loading" size="medium" type="primary" style="width:70%;font-size:17px;padding:13px" @click.native.prevent="handleRegister">
+              <span v-if="!loading">注册</span>
+              <span v-else>登 录 中...</span>
+            </el-button>
+            <div class="login-account">
+              <span class="underline touch" @click="changeMode(1)">使用已有账号登录</span>
+            </div>
+            <div style="padding: 10px 0;">
+              <el-checkbox v-model="loginForm.rememberMe" style="margin:0;opacity:0.8" />
+              <div class="login-agreement"><span class="touch">阅读并接受《中国基建传感器网用户协议》及《中国基建传感器网隐私权保护声明》</span></div>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <home-footer ref="homeFooter" />
+  </div>
+</template>
+
+<script>
+import { encrypt } from '@/utils/rsaEncrypt'
+import Config from '@/settings'
+import { getCodeImg } from '@/api/login'
+import Cookies from 'js-cookie'
+import qs from 'qs'
+import titleMenus from './components/titleMenus'
+import userLogin from './components/userLogin'
+import languageSetting from './components/languageSetting'
+import homeFooter from './components/homeFooter'
+
+export default {
+  components: { titleMenus, userLogin, languageSetting, homeFooter },
+  data() {
+    const validateMobile = (rule, value, callback) => {
+      if (value === 'admin') {
+        return callback()
+      }
+      const newValue = value.replace(/[^0-9]/gi, '')
+      if (value !== newValue) {
+        callback(new Error('请输入正确的手机号'))
+      } else if (newValue.length !== 11) {
+        callback(new Error('请输入正确的手机号'))
+      } else {
+        callback()
+      }
+    }
+    const validatePass = (rule, value, callback) => {
+      if (this.mode !== 2 && !value) {
+        callback(new Error('密码不能为空'))
+      } else {
+        callback()
+      }
+    }
+    const validateCode = (rule, value, callback) => {
+      if (this.mode === 1 && !value) {
+        callback(new Error('图像验证码不能为空'))
+      } else {
+        callback()
+      }
+    }
+    const validateSms = (rule, value, callback) => {
+      if (this.mode !== 1 && !value) {
+        callback(new Error('短信验证码不能为空'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      mode: 1,
+      title: '登录',
+      smsBtn: '短信获取验证码',
+      smsTime: 0,
+      smsTimer: null,
+      codeUrl: '',
+      cookiePass: '',
+      loginForm: {
+        username: '',
+        password: '',
+        rememberMe: false,
+        code: '',
+        sms: '',
+        uuid: ''
+      },
+      loginRules: {
+        username: [{ required: true, trigger: 'blur', message: '手机号不能为空' }, { validator: validateMobile, trigger: 'blur' }],
+        password: [{ validator: validatePass, trigger: 'blur' }],
+        code: [{ validator: validateCode, trigger: 'change' }],
+        sms: [{ validator: validateSms, trigger: 'change' }]
+      },
+      loading: false,
+      redirect: undefined
+    }
+  },
+  watch: {
+    $route: {
+      handler: function(route) {
+        const data = route.query
+        if (data && data.redirect) {
+          this.redirect = data.redirect
+          delete data.redirect
+          if (JSON.stringify(data) !== '{}') {
+            this.redirect = this.redirect + '&' + qs.stringify(data, { indices: false })
+          }
+        }
+      },
+      immediate: true
+    }
+  },
+  created() {
+    // 获取验证码
+    this.getCode()
+    // 获取用户名密码等Cookie
+    this.getCookie()
+    // token 过期提示
+    this.point()
+  },
+  beforeDestroy() {
+    if (this.timer) {
+      clearInterval(this.timer)
+      this.timer = null
+    }
+  },
+  methods: {
+    changeMode(mode) {
+      this.mode = mode
+      if (mode === 1) {
+        this.title = '登录'
+      } else if (mode === 2) {
+        this.title = '快捷登录'
+      } else {
+        this.title = '注册'
+      }
+    },
+    getSmsCode() {
+      if (this.timer && this.smsTime) {
+        return
+      }
+      this.smsBtn = '短信已发送'
+      this.smsTime = 30
+      this.timer = setInterval(() => {
+        this.smsTime--
+        if (this.smsTime === 0) {
+          clearInterval(this.timer)
+          this.timer = null
+          this.smsBtn = '短信获取验证码'
+        }
+      }, 1000)
+    },
+    getCode() {
+      getCodeImg().then(res => {
+        this.codeUrl = res.img
+        this.loginForm.uuid = res.uuid
+      })
+    },
+    getCookie() {
+      const username = Cookies.get('username')
+      let password = Cookies.get('password')
+      const rememberMe = Cookies.get('rememberMe')
+      // 保存cookie里面的加密后的密码
+      this.cookiePass = password === undefined ? '' : password
+      password = password === undefined ? this.loginForm.password : password
+      this.loginForm = {
+        username: username === undefined ? this.loginForm.username : username,
+        password: password,
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
+        code: ''
+      }
+    },
+    handleRegister() {
+      this.$refs.loginForm.validate(valid => {
+        const user = {
+          username: this.loginForm.username,
+          password: this.loginForm.password,
+          rememberMe: this.loginForm.rememberMe,
+          code: this.loginForm.code,
+          sms: this.loginForm.sms,
+          uuid: this.loginForm.uuid
+        }
+        if (user.password !== this.cookiePass) {
+          user.password = encrypt(user.password)
+        }
+        if (valid) {
+          this.loading = true
+          if (user.rememberMe) {
+            Cookies.set('username', user.username, { expires: Config.passCookieExpires })
+            Cookies.set('password', user.password, { expires: Config.passCookieExpires })
+            Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires })
+          } else {
+            Cookies.remove('username')
+            Cookies.remove('password')
+            Cookies.remove('rememberMe')
+          }
+          this.$store.dispatch('Login', user).then(() => {
+            this.loading = false
+            this.$router.push({ path: '/console/registerInfo' })
+          }).catch(() => {
+            this.loading = false
+            this.getCode()
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    handleLogin() {
+      this.$refs.loginForm.validate(valid => {
+        const user = {
+          username: this.loginForm.username,
+          password: this.loginForm.password,
+          rememberMe: this.loginForm.rememberMe,
+          code: this.loginForm.code,
+          sms: this.loginForm.sms,
+          uuid: this.loginForm.uuid
+        }
+        if (user.password !== this.cookiePass) {
+          user.password = encrypt(user.password)
+        }
+        if (valid) {
+          this.loading = true
+          if (user.rememberMe) {
+            Cookies.set('username', user.username, { expires: Config.passCookieExpires })
+            Cookies.set('password', user.password, { expires: Config.passCookieExpires })
+            Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires })
+          } else {
+            Cookies.remove('username')
+            Cookies.remove('password')
+            Cookies.remove('rememberMe')
+          }
+          this.$store.dispatch('Login', user).then(() => {
+            this.loading = false
+            this.$router.push({ path: this.redirect || '/home' })
+          }).catch(() => {
+            this.loading = false
+            this.getCode()
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    point() {
+      const point = Cookies.get('point') !== undefined
+      if (point) {
+        this.$notify({
+          title: '提示',
+          message: '当前登录状态已过期，请重新登录！',
+          type: 'warning',
+          duration: 5000
+        })
+        Cookies.remove('point')
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.touch {
+  cursor:pointer;
+}
+.underline {
+  text-decoration: underline; //下划线
+  text-underline-offset: 5px; //下划线和文字间距
+}
+.head-box-login {
+  width: 100vw;
+  background: #1961C5;
+  position: fixed;
+  .head-box-top {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    padding: 15px 15px 0;
+    .top-call {
+      height: 50px;
+    }
+  }
+  .head-title {
+    width: 100%;
+    margin-top: 92px;
+    text-align: center;
+    user-select: none;
+  }
+}
+.content-box-login {
+  width: 100vw;
+  height: 100vh;
+  display: table;
+  background: #1961C5;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  user-select: none;
+  .login-panel {
+    height: calc(100vh - 165px);
+    display: table-cell;
+    vertical-align: middle;
+  }
+  .login-form {
+    border-radius: 6px;
+    width: 520px;
+    padding: 25px;
+    h3 {
+      margin: 10px 0;
+      color: white;
+    }
+    .login-remember {
+      text-align: right;
+      color: white;
+    }
+    .el-checkbox {
+      .el-checkbox__inner {
+        background-color: transparent;
+        border-color: white;
+      }
+      .el-checkbox__label {
+        padding-top: 2px;
+        color: white;
+      }
+    }
+    .el-input {
+      height: 42px;
+      input {
+        height: 42px;
+      }
+    }
+    .input-icon{
+      height: 42px;width: 16px;margin-left: 2px;
+    }
+  }
+  .login-tip {
+    font-size: 13px;
+    text-align: center;
+    color: #bfbfbf;
+  }
+  .login-account {
+    width: 30%;
+    display: inline-block;
+    padding-top: 16px;
+    text-align: center;
+    float: right;
+    color: white;
+  }
+  .login-agreement {
+    width: 440px;
+    float: right;
+    color: white;
+    span {
+      opacity: 0.8;
+    }
+    span:hover {
+      opacity: 1;
+    }
+  }
+  .login-code {
+    width: 26%;
+    display: inline-block;
+    height: 38px;
+    float: right;
+    img{
+      margin: 2px 0;
+      cursor: pointer;
+      vertical-align:middle
+    }
+    .sms-btn {
+      width: 100%;
+      background-color: #7FBAF5;
+      color: white;
+      text-align: center;
+      padding: 7px;
+    }
+  }
+}
+</style>