找回密码

build/webpack.base.conf.js

@@ -73,7 +73,7 @@ module.exports = {
        }
      },
      {
        test: /\.(woff|svg|woff2|eot|ttf|otf)(\?.*)?$/,
        test: /\.(woff2?|eot|ttf|otf|woff|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,

package.json

@@ -58,7 +58,7 @@
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "stylus-loader": "^2.1.1",
    "stylus-loader": "^2.5.1",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",

src/common/stylus/common.styl

@@ -58,41 +58,6 @@ a
    font-size:13px
    color:$secondaryFont
/*form-css*/
.frmtype
  width:100%
  box-sizing: border-box
  border:none
  border:1px #d2d2d2 solid
  height:46px
  background: #f5f6f8
  padding:4px 10px
  font-size:14px
  outline: none
  &.btnModel
    margin:20px 0 0
    color:#FFFFFF
    border:none
    cursor:pointer
    background:$mainColor
.fontLink
  background:none
  border:none
  color:$mainColor
  font-size:13px
.frmmsg
  position:relative
  padding-left:20px
  line-height:28px
  color: #fd5f39
  &:before
    content: ''
    position: absolute
    left: 0
.frmmsg-warning
  border: 1px solid #fd5f39
/*form-css*/
.el-button--primary
  background-color: $mainColor;

src/common/stylus/index.styl

@@ -1,3 +1,4 @@
@import './base'
@import './common'
@import "./mixin"
/*@import './icon'*/
@import './mixin'

src/components/bench-views/WorkHead.vue

@@ -34,7 +34,7 @@
    data() {
      return {
        animateStatus: false
      }
      };
    },
    methods: {
      overShow() {

src/components/form-views/findPwd.vue

@@ -0,0 +1,133 @@
<template>
  <div class="login">
    <div class="logo-wrapper"></div>
    <div class="form-wrapper">
      <div class="form-contain">
        <p class="form-title">找回密码</p>
        <div class="step-wrapper">
          <el-steps :active="stepVal" finish-status="success" align-center>
            <el-step title="输入邮箱"></el-step>
            <el-step title="接收密码找回邮件"></el-step>
            <el-step title="重置密码"></el-step>
          </el-steps>
        </div>
        <div class="step-contain">
          <el-form v-show="!isStepShow" :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
            <el-form-item prop="mail">
              <el-input v-model="ruleForm.mail" placeholder="请输入邮箱账号"></el-input>
            </el-form-item>
            <el-form-item></el-form-item>
            <el-form-item>
              <el-button type="primary" :disabled="isDisabl" @click="nextStep">下一步</el-button>
              <el-button type="text" @click="goLogin">又想起来了</el-button>
            </el-form-item>
          </el-form>
          <el-form v-show="isStepShow" class="demo-ruleForm">
            <el-form-item>
              <p class="importTip">密码找回邮件已发送至：<br />
                <span class="mainTip" id="emailShow">jdksgjksdgjsdhgs</span>
              </p>
              <p class="smallTip">请您在10分钟内登录您的企业邮箱，接收邮件，<br />点击链接后即可重置密码。</p>
            </el-form-item>
            <el-form-item></el-form-item>
            <el-form-item>
              <el-button type="primary" @click="goToMail">登录邮箱</el-button>
            </el-form-item>
          </el-form>
          <el-form v-show="!isStepShow" :model="ruleForm2" :rules="rules2" ref="ruleForm2" class="demo-ruleForm">
            <el-form-item prop="pass">
              <el-input type="password" v-model="ruleForm2.pass" placeholder="请设置您的新密码" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item prop="checkPass">
              <el-input type="password" v-model="ruleForm2.checkPass" placeholder="请再次输入密码确认" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item></el-form-item>
            <el-form-item>
              <el-button type="primary" :disabled="isDisabl" @click="resetPwd">重置密码</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
     data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请设置您的新密码'));
        } else if (value.length < 6 || value.length > 24) {
         callback(new Error('密码由6-24个字符组成，区分大小写'));
        } else {
          if (this.ruleForm2.checkPass !== '') {
            this.$refs.ruleForm2.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码确认'));
        } else if (value !== this.ruleForm2.pass) {
          callback(new Error('两次输入密码不一致，请重新输入!'));
        } else {
          callback();
        }
      };
      return {
        stepVal: 0,
        isStepShow: true,
        isDisabl: false,
        ruleForm: {
          mail: ''
        },
        rules: {
          mail: [
            { required: true, message: '请输入邮箱账号', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur'] }
          ]
        },
        ruleForm2: {
          pass: '',
          checkPass: ''
        },
        rules2: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      nextStep() {
        return this.stepVal++ > 2;
      },
      resetPwd(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
            this.$router.push({path: '/WorkHome'});
          } else {
            return false;
          }
        });
      },
      goLogin() {
        this.$router.push({path: '/loginPlat'});
      },
      goToMail() {
        this.$router.push({path: '/loginPlat'});
      }
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import './style';
</style>

src/components/form-views/loginPlat.vue

@@ -2,34 +2,59 @@
  <div class="login">
    <div class="logo-wrapper"></div>
    <div class="form-wrapper">
      <form class="form-contain">
      <div class="form-contain">
        <p class="form-title">登录平台工作台</p>
        <ul class="form-ul">
          <li>
            <input type="email" class="frmtype" hidden autocomplete="off"/>
            <input type="email" class="frmtype companyEmail" placeholder="请输入邮箱账号" autocomplete="off"/>
            <div class="frmmsg">333</div>
          </li>
          <li>
            <input type="password" class="frmtype" placeholder="请输入登录密码"/>
            <div class="frmmsg msgLog2"><span></span></div>
          </li>
          <li>
            <button type="button" disabled class="frmtype btnModel" @click="login">登录</button>
            <router-link to="workBench">wwww</router-link>
            <router-link class="fontLink" to="">忘记密码？</router-link>
          </li>
        </ul>
      </form>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item prop="mail">
            <el-input v-model="ruleForm.mail" placeholder="请输入邮箱账号"></el-input>
          </el-form-item>
          <el-form-item prop="pass">
            <el-input type="password" v-model="ruleForm.pass" placeholder="请输入登录密码" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item></el-form-item>
          <el-form-item>
            <el-button type="primary" :disabled="isDisabl" @click="submitForm('ruleForm')">登录</el-button>
            <el-button type="text" @click="goBackPwd">忘记密码？</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
<script type="text/ecmascript-6">
  export default {
     data() {
      return {
        isDisabl: false,
        ruleForm: {
          mail: '',
          pass: ''
        },
        rules: {
          mail: [
            { required: true, message: '请输入邮箱账号', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur'] }
          ],
          pass: [
            { required: true, message: '请输入登录密码', trigger: 'blur' },
            { min: 6, max: 24, message: '密码由6-24个字符组成，区分大小写', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      login() {
          this.$router.push({path:'/WorkHome'});
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$router.push({path: '/WorkHome'});
          } else {
            return false;
          }
        });
      },
      goBackPwd() {
        this.$router.push({path: '/findPwd'});
      }
    }
  };

src/components/form-views/style.styl

@@ -34,8 +34,20 @@
        color:$mainColor
        text-align:center
        margin-bottom:40px
      .form-ul>li
        margin-bottom:12px
        .frmtype
          border-radius()
      
      .el-button--primary
        width:100%
  .step-wrapper
    margin-bottom:30px
  .step-contain
    text-align:center
    .importTip
      font-size: 18px
      margin: 10px 0
    .mainTip
      color:$mainColor
    .smallTip
      color:$secondaryFont
      line-height:16px
      font-size:13px

src/components/main-views/ViewHome.vue

@@ -16,7 +16,7 @@
          将您的需求发布到科袖网，<br>
          我们为您对接专家和各类专业机构。
        </p>
        <button type="button" class="frmtype btnModel">免费发布需求</button>
        <el-button type="primary" style="margin-top:30px">免费发布需求</el-button>
      </div>
    </div>
@@ -254,9 +254,6 @@
          font-size: 14px
          line-height: 22px
          color:$secondaryFont
        .frmtype
          margin-top:28px
          width:60%
      .plat-news
        width:800px
        height:200px

src/components/main-views/ViewPlatTrend.vue

@@ -63,6 +63,8 @@ import baseArticle from '../sub-component/BaseArticle';
			cursor: pointer
			&.active
				color: $mainColor
		.el-tabs__header
			margin: 0 0 4px
		.el-tabs__nav-wrap::after
			content:none
		.el-tabs__content

src/router/router.js

@@ -5,10 +5,18 @@ export const loginRouter = {
    path: '/loginPlat',
    name: 'loginPlat',
    meta: {
        title: 'Login - 登录'
        title: 'Login-登录'
    },
    component: () => import('@/components/form-views/loginPlat.vue')
};
export const pwdRouter = {
    path: '/findPwd',
    name: 'findPwd',
    meta: {
        title: '找回密码'
    },
    component: () => import('@/components/form-views/findPwd.vue')
};
// 作为Main组件的子页面展示
export const otherRouter = {
@@ -73,6 +81,7 @@ export const appRouter = {
// 所有上面定义的路由都要写在下面的routers里
export const routers = [
    loginRouter,
    pwdRouter,
    otherRouter,
    appRouter
];