首页 > 其他 > 详细

案例 通过用户名和邮箱重置密码

时间:2019-11-15 11:44:01      阅读:26      评论:0      收藏:0      [点我收藏+]

标签:put   cli   NPU   reset   export   rim   

 

 

通过用户名和邮箱重置密码

技术分享图片

 

 

<template>
  <el-container>
    <el-main>
      <div style="margin:0px auto;">
        <el-col :span="6">
          <img class="logo_img" src="@/assets/images/beijing_logo.png" style="margin-top:-15px;margin-left:90px">
        </el-col>
        <el-col :span="3">
          <span class="span" style="margin-left: 30px;">重置密码</span>
        </el-col>
      </div>
      <div class="main" style="width:100%;height:500px">
        <div class="lanse" style="background:#3F72C8;width:100%;height:396px;margin-top:50px;margin-left:-20px;position:absolute;">
          <div class="baise" style="background:white;width:1128px;height:316px;position: relative;  left:50%; top:50%;transform: translate(-50%, -50%)">
            <div id="ul" style="text-align:center; position: relative; top: 10%;">
              <el-steps :active="active" align-center>
                <el-step title="确认账号" />
                <el-step title="验证邮箱" />
                <el-step title="重置密码" />
                <el-step title="重置成功" />
              </el-steps>
            </div>
            <!--步骤1-->
            <el-form v-show="emailNumberStep1" ref="emailNumberForm1" :model="emailNumberForm1" label-width="80px">
              <el-form-item>
                <span style="width: 250px; margin-left: 340px;">用户名:</span>
                <el-input v-model="emailNumberForm1.accounts" style="width: 250px; margin-top: 90px;" />
              </el-form-item>
              <el-form-item>
                <span style="width: 250px; margin-left: 340px; ">邮箱号:</span>
                <el-input v-model="emailNumberForm1.email" style="width: 250px; margin-top: 8px;" />
              </el-form-item>
            </el-form>
            <!--步骤2-->
            <el-form v-show="emailNumberStep2" ref="emailNumberForm2" :inline="true" :model="emailNumberForm2" label-width="80px" style="margin-left: 300px;margin-top: 50px">
              <el-form-item label="邮箱:">
                <span>{{ emailNumberForm2.email }}</span>
              </el-form-item><br>
              <el-form-item label="验证码:">
                <el-input v-model="emailNumberForm2.vertifyCode" placeholder="请输入验证码" style="width: 200px;padding-right: 5%" />
                <!--设置隐藏属性,:hidden,点击获取验证码后按钮禁用,倒计时展示:倒计时结束后隐藏,按钮可用-->
                <el-button type="primary" plain :disabled="isDisabled" @click="getVertifyCode">
                  <span ref="getVertifyCode" :hidden="isSpanHidden">({{ count }})s后重新获取</span>
                  <span :hidden="isButtonHidden">获取验证码</span>
                </el-button><br>
                <span :hidden="isSpanHidden">验证码短信已发出,({{ count }})s内有效,请及时查收</span>
              </el-form-item>
            </el-form>
            <!--步骤3-->
            <el-form v-show="emailNumberStep3" ref="emailNumberForm3" :inline="true" :model="emailNumberForm3" :rules="emailNumberForm3Rules" label-width="80px" style="margin-left: 320px;margin-top: 50px">
              <el-form-item prop="newPass" label="新密码">
                <el-input v-model="emailNumberForm3.newPass" type="text" placeholder="新密码(5-12大小写字母、数字)" style="width: 310px" />
              </el-form-item><br>
              <el-form-item prop="checkPass" label="确认密码">
                <el-input v-model="emailNumberForm3.checkPass" placeholder="确认密码(5-12大小写字母、数字)" style="width: 310px" show-password />
              </el-form-item>
            </el-form>
            <!--步骤4-->
            <el-container v-show="emailNumberStep4">
              <div class="steps-button">
                <i class="el-icon-success" style="margin-left: 430px;width: 20px;margin-top: 50px; margin-bottom: 50px" />
                <span>恭喜您,密码重置成功!</span>
              </div>
            </el-container>
            <div style="margin-left:460px;">
              <el-button type="primary" style="margin-left:30px;width:100px;" :disabled="isClickButton" @click="nextPage(‘emailNumberForm3‘)">{{ active == 4?‘返回首页‘:‘下一步‘ }}</el-button>
              <!--isClickButton-->
            </div>
          </div>
          <div>
            <div class="otherProduces">
              <ul>
                <li v-for="i in produces" :key="i" :label="i" @click="introduce">{{ i }}<hr class="iProduces"></li>
              </ul>
            </div>
            <div class="otherLinks">
              <ul>
                <li>友情链接:</li>
                <li v-for="i in links" :key="i" :label="i" @click="link">{{ i }}</li>
              </ul>
            </div>
            <img class="policeLogo" src="@/icons/login/police.png">
          </div>
        </div>
      </div>
      <hr style="height:2px;border:none;border-top:2px dotted #999999; margin-top: 60px; width: 100%">
      <el-footer style="text-align: center">
        <span class="footer">北京电力交易中心信息发布网站 国网安备1514A91lF号 ICP国网安备1514A91lF号 <br> Copyright @2010-2016 Stats Grid Corporation of China (SGCC).国家电网公司 版权所有</span><br>
      </el-footer>
    </el-main>
  </el-container>
</template>
<script>
import PxSysUserApi from ../../../../api/pxf-common-authority/PxSysUserApi.js
import SmUtils from ../../../../utils/SmUtils
export default {
  data() {
    const validatePass1 = (rule, value, callback) => {
      console.log(value)
      if (value === ‘‘) {
        callback(new Error(请输入密码))
        // this.isClickButton = true
      } else {
        var reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[[email protected]#$%^&*()_+`\-={}:";‘<>?,.\/]).{5,12}$/
        var flag = reg.test(value)
        if (!flag) {
          callback(new Error(请输入5-12位以上字母,数字,特殊字符组合密码))
          // this.isClickButton = true
        }
        callback()
        this.isClickButton = false
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === ‘‘) {
        callback(new Error(请再次输入密码))
        // this.isClickButton = true
      } else if (value !== this.emailNumberForm3.newPass) {
        callback(new Error(两次输入密码不一致!))
        // this.isClickButton = true
      } else {
        callback()
        this.isClickButton = false
      }
    }
    return {
      emailNumberStep1: true,
      emailNumberStep2: false,
      emailNumberStep3: false,
      emailNumberStep4: false,
      checked: false,
      active: 0,
      produces: [关于我们, 联系我们, 公式注册],
      links: [国家发改委, 国资委, 国家资源局, 电力企业委员会, 国家电网公司],
      isDisabled: false,
      isSpanHidden: true,
      isButtonHidden: false,
      isClickButton: false,
      timer: null,
      count: ‘‘,
      emailNumberForm3Rules: {
        newPass: [
          { required: true, validator: validatePass1, trigger: blur }
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: blur }
        ]
      },
      emailNumberForm1: {
        accounts: ‘‘,
        email: ‘‘
      },
      emailNumberForm2: {
        username: ‘‘,
        email: ‘‘,
        vertifyCode: ‘‘
      },
      emailNumberForm3: {
        newPass: ‘‘,
        checkPass: ‘‘
      }
    }
  },
  methods: {
    nextPage(formName) {
      if (this.active === 0) {
        const objUser = {
          loginName: this.emailNumberForm1.accounts,
          email: this.emailNumberForm1.email
        }
        PxSysUserApi.queryEmail(objUser).then(res => {
          console.log(queryEmail, res)
          this.emailNumberForm2.username = this.emailNumberForm1.accounts
          this.emailNumberForm2.email = this.emailNumberForm1.email
          if (res.status === 0) {
            this.emailNumberStep1 = false
            this.emailNumberStep2 = true
            this.emailNumberStep3 = false
            this.emailNumberStep4 = false
            this.active++
          }
        }).catch(err => {
          console.error(err)
        })
      } else if (this.active === 1) {
        this.active++
        this.emailNumberStep1 = false
        this.emailNumberStep2 = false
        this.emailNumberStep3 = true
        this.emailNumberStep4 = false
      } else if (this.active === 2) {
        PxSysUserApi.getPublicKey().then(res => {
          console.log(getPublicKey, res)
          if (res.status === 0) {
            const obj = {
              publicKey: res.data,
              loginName: this.emailNumberForm1.accounts,
              newAuthKey: SmUtils.encryptSm2(this.emailNumberForm3.newPass, res.data)
            }
            PxSysUserApi.updatePsd(obj).then(res => {
              console.log(updatePsd, res)
              if (res.status === 0) {
                this.$message({
                  message: 更新成功,
                  type: success
                })
                this.active++
                this.emailNumberStep1 = false
                this.emailNumberStep2 = false
                this.emailNumberStep3 = false
                this.emailNumberStep4 = true
              }
            }).catch(err => {
              console.error(err)
            })
          }
        })
      } else if (this.active === 3) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.emailNumberStep1 = false
            this.emailNumberStep2 = false
            this.emailNumberStep3 = false
            this.emailNumberStep4 = true
            this.active++
          }
        })
      } else if (this.active === 4) {
        this.emailNumberStep1 = false
        this.emailNumberStep2 = false
        this.emailNumberStep3 = false
        this.emailNumberStep4 = false
        this.$router.push({
          path: /marketService/Login,
          query: {
            membersId: 1
          }
        })
      }
    },
    // 点击获取验证码倒计时
    getVertifyCode() {
      this.isDisabled = true
      this.isButtonHidden = true
      this.isSpanHidden = false
      this.count = 60
      this.timer = setInterval(() => {
        this.isSpanHidden = false
        this.count--
        if (this.count <= 0) {
          this.isSpanHidden = true
          this.isButtonHidden = false
          this.isDisabled = false
          clearInterval(this.timer)
          this.timer = null
        }
      }, 1000)
    },
    introduce() {

    },
    link() {

    }
  }
}

</script>

<style scoped>
  .span {
    color: #5096C7;
    font-size: 14px;
    font-family: ‘宋体 Regular‘, ‘宋体‘;
    display: block;
    margin-top:7px;
    margin-left:15px
  }
  .otherProduces{
    float: left;
    height: 27px;
    margin-left: 35%;
    margin-top: 90px;
  }
  .otherProduces>ul>li{
    float: left;
    list-style: none;
    width: 30%;
    margin-right: 3%;
    margin-top: 10px;
    height: 27px;
    font-family: ‘黑体 Regular‘, ‘黑体‘;
    font-size: 13px;
    color: #5E5E5E;
    cursor: pointer;
  }
  .iProduces{
    float: left;
    margin-left: 75px;
    margin-top: -15px;
    width: 1px;
    height: 16px;
    border: 1px;
    border-left: 1px solid #797979;
  }
  .otherLinks{
    float: left;
    height: 27px;
    margin-left: 30%;
  }
  .otherLinks>ul{
    width: 200%;
  }
  .otherLinks>ul>li{
    float: left;
    list-style: none;
    width: 14%;
    margin-right: -3%;
    margin-top: 21px;
    height: 27px;
    font-family: ‘黑体 Regular‘, ‘黑体‘;
    font-size: 11px;
    color: #868686;
    cursor: pointer;
  }
  .otherLinks>ul>li:nth-child(4){
    margin-left: -3%;
  }
  .otherLinks>ul>li:last-child{
    margin-left: 3%;
  }
  .policeLogo{
    width: 145px;
    height: 101px;
    float: left;
    margin-left: 72%;
    margin-top: -54px;
  }
  .footer {
    margin-top: 20px;
    display: block;
    font-size: 12px;
    color: silver
  }
</style>

 

 

 

import request from ‘@/utils/request‘

/**
 * Api
 * @author 李松涛
 */
export default class PxSysUserApi {
  /**
   * userId查询PxSysWhiteList
   * @param userId
   */
  static queryByUserId(userId) {
    return request({
      url: ‘/px-common-authority/pxSysWhiteList/queryByUserId‘,
      method: ‘post‘,
      params: { ‘userId‘: userId }
    })
  }
  /**
   * 保存更新
   * @param data
   */
  static saveWhiteList(data) {
    return request({
      url: ‘/px-common-authority/pxSysWhiteList/save‘,
      method: ‘post‘,
      data: data
    })
  }
  /**
   * 获取公钥
   */
  static getPublicKey() {
    return request({
      url: ‘/px-common-authority/user/getPublicKey‘,
      method: ‘post‘
    })
  }
  /**
   * 批量插入
   * @param queryParam
   */
  static saveUserRole(queryParam) {
    return request({
      url: ‘/px-common-authority/pxSysUserRole/insertList‘,
      method: ‘post‘,
      data: queryParam
    })
  }
  /**
   * 密码重置
   * @param data
   */
  static resetPwd(data) {
    return request({
      url: ‘/px-common-authority/pxSysUser/resetAuthKey‘,
      method: ‘post‘,
      data: data
    })
  }
  /**
   * 修改user信息Type
   * @param data
   */
  static updateAuthKey(data) {
    return request({
      url: ‘/px-common-authority/pxSysUser/modifyAuthKey‘,
      method: ‘post‘,
      data: data
    })
  }
  /**
   * 修改user信息Type
   * @param data
   */
  static updateEmailOrPhone(data) {
    return request({
      url: ‘/px-common-authority/pxSysUser/modifyEmailPhone‘,
      method: ‘post‘,
      data: data
    })
  }
  /**
   * 保存更新
   * @param id
   */
  static queryById(id) {
    return request({
      url: ‘/px-common-authority/pxSysUser/queryById‘,
      method: ‘post‘,
      params: { ‘id‘: id }
    })
  }

  /**
   * 保存更新
   * @param data
   */
  static save(data) {
    return request({
      url: ‘/px-common-authority/pxSysUser/save‘,
      method: ‘post‘,
      data: data
    })
  }

  /**
   * 分页查询
   * @param queryParam
   */
  static queryPage(queryParam) {
    return request({
      url: ‘/px-common-authority/pxSysUser/queryPage‘,
      method: ‘post‘,
      data: queryParam
    })
  }

  /**
   * 根据ID删除
   * @param id
   */
  static deleteById(id) {
    return request({
      url: ‘/px-common-authority/pxSysUser/deleteById‘,
      method: ‘post‘,
      params: { ‘id‘: id }
    })
  }

  /**
   * 批量删除
   * @param data
   */
  static deleteList(data) {
    return request({
      url: ‘/px-common-authority/pxSysUser/deleteList‘,
      method: ‘post‘,
      data: data
    })
  }

  /**
   * 查询用户名是否存在
   * @param data
   */
  static queryUsername(data) {
    return request({
      url: ‘/px-common-authority/pxSysUser/checkLoginNameMobile‘,
      method: ‘post‘,
      data: data
    })
  }

  /**
   * 更改密码
   * @param data
   */
  static updatePsd(data) {
    return request({
      url: ‘/px-common-authority/pxSysUser/modifyAuthKeyByEmailMobile‘,
      method: ‘post‘,
      data: data
    })
  }

  /**
   * 校验用户名和邮箱
   * @param data
   */
  static queryEmail(data) {
    return request({
      url: ‘/px-common-authority/pxSysUser/checkLoginNameEmail‘,
      method: ‘post‘,
      data: data
    })
  }
}

 

 

 

案例 通过用户名和邮箱重置密码

标签:put   cli   NPU   reset   export   rim   

原文:https://www.cnblogs.com/javascript9527/p/11864886.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号