<style>

  .PerSon_Edit {
    text-align: right;
    width: 100%;
    color: #BBBBBB;
    font-size: 12px;
    padding: 30px;
  }

  .PerSon_Edit span {
    cursor: pointer;
  }

  .PerSon_Edit i {
    font-size: 12px;
  }

  .Person_Header {
    width: 120px;
    height: 120px;
    margin: 30px auto;
    border: 1px solid #F4F4F4;
    padding: 3px;
    border-radius: 50%;
  }

  .Person_Header img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .Person_ComCenter {
    width: 100%;
    font-size: 14px;
    color: #333333;
    text-align: center;
  }

  .Person_MenuList {
    margin-top: 45px;
  }

  .Person_MenuList li {
    list-style-type: none;
    width: 100%;
    height: 54px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #F3F3F3;
  }

  .Person_MenuList li .Person_Pname {
    display: flex;
    align-items: center;
    width: 26%;
    height: 100%;
    font-size: 12px;
    color: #999999;
  }

  .Person_Jobs {
    display: inline-block;
    padding: 5px 8px;
    background-color: #007EFF;
    color: #fff;
    font-size: 12px;
    border-radius: 8px;
    margin-left: 10px;
  }

  .Person_Company {
    color: #333333;
    font-size: 14px;
    display: inline-block;
  }

  .Person_Wrong {
    color: #999999;
    font-size: 12px;
    text-align: right;
  }

  .Person_CenterList {
    display: inline-block;
    width: 72%;
    font-size: 14px;
  }

  .Per_Jiantou i {
    font-size: 12px;
    color: #999999;
  }

  .Person_menuCked li:hover {
    cursor: pointer;
    background-color: #F1F8FF;
  }

  .P_cked {
    background-color: #F1F8FF;
  }

  .Shouji_Top {
    width: 100%;
    height: 54px;
    line-height: 54px;
    padding: 0 30px;
    margin-bottom: 20px;
    font-size: 20px;
    color: #333333;
    font-weight: bold;
  }

  .Shouji_Conteng {
    max-width: 800px;
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    margin: 70px auto;
  }

  .phone_commonBotm {
    width: 400px;
    position: relative;
  }

  .phone_commonBotm .input {
    width: 400px;
    height: 44px;
    outline: none;
    padding-left: 17px;
    border: none;
    border: 1px solid #DCDFE6;
  }

  .phone_commonBotm .input::-webkit-input-placeholder {
    color: #D3D6DC;
  }

  .phone_commonBotm .validatCode {
    position: absolute;
    right: 10px;
    top: 16px;
    height: 12px;
    line-height: 12px;
    padding-left: 10px;
    color: #007EFF;
    font-size: 12px;
    letter-spacing: 2px;
    border-left: 1px solid #DCDFE6;
  }

  .phone_bangding {
    color: #333333;
    margin: 0 0 29px 100px;
    font-size: 16px;
  }

  .phone_bangding span {
    margin-left: 21px;
  }

  .Shouji_Conteng .el-input .el-input__inner {
    height: 44px;
  }

  .PI_qiehuan {
    font-size: 14px;
    color: #333333;
  }

  .PI_comMoshi {
    color: #999999
  }

  .PI_QiehuanImg {
    width: 370px;
    height: 174px;
    margin-top: 18px;
    cursor: pointer;
    margin-left: 20px;
    border: 4px solid #fff;
  }

  .ckedQieImg {
    border: 4px solid #007EFF;
  }

  .PI_QiehuanImg img {
    width: 100%;
    height: 100%;
  }

  .Account_NumList {
    margin-top: 68px;
    min-height: 80px;
    margin: 0 30px;
    border-bottom: 1px dashed #BBBBBB;
  }

  .Account_NumList table {
    padding: 30px 0 30px 160px;
    font-size: 16px;
  }

  .Account_NumList table td {
    height: 30px;
  }

  .AC_bankName {
    color: #333333;
    font-weight: bold;
    margin-right: 11px;
  }

  .AC_jeibang {
    width: 80px;
    text-align: right;
    color: #999999;
    font-size: 12px;
  }

  .bank_Count {
    position: absolute;
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: #007EFF;
    color: #fff;
    border-radius: 50%;
    right: 25px;
    line-height: 14px;
    text-align: center;
    top: 20px;
  }

  .bind_Imidetly {
    color: rgb(0, 126, 255);
    cursor: pointer;
    display: inline-block;
    width: 70%;
    font-size: 14px;
  }

  .addAccountTitle {
    margin: 0 0 20px 97px;
    font-size: 14px;
  }

  #demo #button {
    position: absolute;
    right: 10px;
    width: 80px;
    height: 40px;
    border: none;
    cursor: pointer;
    color: #fff;
    border-radius: 5px;
    background: #E95252;
  }

  #demo .show {
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    border: 1px solid #d5d5d5;
  }

  #demo .picture {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  #demo .container {
    z-index: 9999999;
    position: fixed;
    padding-top: 60px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
  }

  #demo #image {
    max-width: 100%;
  }

  .cropper-view-box,
  .cropper-face {
    border-radius: 50%;
  }

  .cropper-container {
    font-size: 0;
    line-height: 0;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    direction: ltr;
    -ms-touch-action: none;
    touch-action: none
  }

  .cropper-container img {
    display: block;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100%;
    height: 100%;
    image-orientation: 0deg
  }

  .cropper-wrap-box,
  .cropper-canvas,
  .cropper-drag-box,
  .cropper-crop-box,
  .cropper-modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .cropper-wrap-box {
    overflow: hidden;
  }

  .cropper-drag-box {
    opacity: 0;
  }

  .cropper-modal {
    opacity: .5;
  }

  .cropper-view-box {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    outline: 1px solid #e95252;
    outline-color: #e95252;
  }

  .cropper-dashed {
    position: absolute;
    display: block;
    opacity: .5;
    border: 0 dashed #e95252
  }

  .cropper-dashed.dashed-h {
    top: 33.33333%;
    left: 0;
    width: 100%;
    height: 33.33333%;
    border-top-width: 1px;
    border-bottom-width: 1px
  }

  .cropper-dashed.dashed-v {
    top: 0;
    left: 33.33333%;
    width: 33.33333%;
    height: 100%;
    border-right-width: 1px;
    border-left-width: 1px
  }

  .cropper-center {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    opacity: .75
  }

  .cropper-center:before,
  .cropper-center:after {
    position: absolute;
    display: block;
    content: ' ';
  }

  .cropper-center:before {
    top: 0;
    left: -3px;
    width: 7px;
    height: 1px
  }

  .cropper-center:after {
    top: -3px;
    left: 0;
    width: 1px;
    height: 7px
  }

  .cropper-face,
  .cropper-line,
  .cropper-point {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: .1;
  }

  .cropper-face {
    top: 0;
    left: 0;
  }


  .cropper-line.line-e {
    top: 0;
    right: -3px;
    width: 5px;
    cursor: e-resize
  }

  .cropper-line.line-n {
    top: -3px;
    left: 0;
    height: 5px;
    cursor: n-resize
  }

  .cropper-line.line-w {
    top: 0;
    left: -3px;
    width: 5px;
    cursor: w-resize
  }

  .cropper-line.line-s {
    bottom: -3px;
    left: 0;
    height: 5px;
    cursor: s-resize
  }

  .cropper-point {
    width: 5px;
    height: 5px;
    opacity: .75;
  }

  .cropper-point.point-e {
    top: 50%;
    right: -3px;
    margin-top: -3px;
    cursor: e-resize
  }

  .cropper-point.point-n {
    top: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: n-resize
  }

  .cropper-point.point-w {
    top: 50%;
    left: -3px;
    margin-top: -3px;
    cursor: w-resize
  }

  .cropper-point.point-s {
    bottom: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: s-resize
  }

  .cropper-point.point-ne {
    top: -3px;
    right: -3px;
    cursor: ne-resize
  }

  .cropper-point.point-nw {
    top: -3px;
    left: -3px;
    cursor: nw-resize
  }

  .cropper-point.point-sw {
    bottom: -3px;
    left: -3px;
    cursor: sw-resize
  }

  .cropper-point.point-se {
    right: -3px;
    bottom: -3px;
    width: 20px;
    height: 20px;
    cursor: se-resize;
    opacity: 1
  }

  @media (min-width: 768px) {

    .cropper-point.point-se {
      width: 15px;
      height: 15px
    }
  }

  @media (min-width: 992px) {
    .cropper-point.point-se {
      width: 10px;
      height: 10px
    }
  }

  @media (min-width: 1200px) {
    .cropper-point.point-se {
      width: 5px;
      height: 5px;
      opacity: .75
    }
  }

  .cropper-point.point-se:before {
    position: absolute;
    right: -50%;
    bottom: -50%;
    display: block;
    width: 200%;
    height: 200%;
    content: ' ';
    opacity: 0;
  }

  .cropper-invisible {
    opacity: 0;
  }

  .cropper-hide {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
  }

  .cropper-hidden {
    display: none !important;
  }

  .cropper-move {
    cursor: move;
  }

  .cropper-crop {
    cursor: crosshair;
  }

  .cropper-disabled .cropper-drag-box,
  .cropper-disabled .cropper-face,
  .cropper-disabled .cropper-line,
  .cropper-disabled .cropper-point {
    cursor: not-allowed;
  }

  .a-upload {
    padding: 4px 10px;
    height: 20px;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    color: #888;
    background: #fff;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1
  }

  .a-upload input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
  }

  .cancel_Btnn {
    background-color: #fff !important;
    border: 1px solid #e95252 !important;
    color: #e95252 !important;
  }

</style>

<template>
  <div>
      <!-- 修改密码 -->
      <div class="Per_Shouji">
        <div class="Shouji_Conteng">
        <div class="Shouji_Top">修改密码</div>
          <el-form :model="passWordMsg" ref="passWordMsg" label-position="right" :rules="rules2" label-width="100px">
            <el-form-item v-if="sureOldPwd" label="旧密码" prop="OldPwd" style="margin-bottom:30px;">
              <el-input type="password" class="w400" v-model="passWordMsg.OldPwd" maxlength="15">
                <i slot="suffix" title="显示密码" @click="changePassOld('show')" style="cursor:pointer;"
                  class="el-input__icon iconfont icon-yincang"></i>
              </el-input>
            </el-form-item>
            <el-form-item v-else label="旧密码" prop="OldPwd" style="margin-bottom:30px;">
              <el-input type="text" class="w400" v-model="passWordMsg.OldPwd" maxlength="15">
                <i slot="suffix" title="隐藏密码" @click="changePassOld('hide')" style="cursor:pointer;"
                  class="el-input__icon iconfont icon-xianshi"></i>
              </el-input>
            </el-form-item>
            <el-form-item v-if="visible" label="新密码" style="margin-bottom:30px;" prop="Pwd">
              <el-input type="password" class="w400" v-model="passWordMsg.Pwd" maxlength="15" placeholder="密码格式：大写字母+小写字母+数字或?!&$%#_,6位以上">
                <i slot="suffix" title="显示密码" @click="changePass('show')" style="cursor:pointer;"
                  class="el-input__icon iconfont icon-yincang"></i>
              </el-input>
            </el-form-item>
            <el-form-item v-else label="新密码" style="margin-bottom:30px;" prop="Pwd">
              <el-input type="text" class="w400" v-model="passWordMsg.Pwd" maxlength="15" placeholder="密码格式：大写字母+小写字母+数字或?!&$%#_,6位以上">
                <i slot="suffix" title="隐藏密码" @click="changePass('hide')" style="cursor:pointer;"
                  class="el-input__icon iconfont icon-xianshi"></i>
              </el-input>
            </el-form-item>
            <el-form-item v-if="SureVisible" label="确认密码" style="margin-bottom:30px;" prop="surePassword">
              <el-input type="password" class="w400" v-model="passWordMsg.surePassword" maxlength="15"
                placeholder="密码格式：大写字母+小写字母+数字或?!&$%#_,6位以上">
                <i slot="suffix" title="显示密码" @click="changePass2('show')" style="cursor:pointer;"
                  class="el-input__icon iconfont icon-yincang"></i>
              </el-input>
            </el-form-item>
            <el-form-item v-else label="确认密码" style="margin-bottom:30px;" prop="surePassword">
              <el-input type="text" class="w400" v-model="passWordMsg.surePassword" maxlength="15" placeholder="密码格式：大写字母+小写字母+数字或?!&$%#_,6位以上">
                <i slot="suffix" title="隐藏密码" @click="changePass2('hide')" style="cursor:pointer;"
                  class="el-input__icon iconfont icon-xianshi"></i>
              </el-input>
            </el-form-item>
          </el-form>
          <el-button type="primary" style="margin:30px 0 0 100px; width:120px" @click="submitForm2('passWordMsg')">确定</el-button>
        </div>
      </div>
  </div>
</template>
<script>
  import Cropper from "cropperjs"
  export default {
    data() {
      return {
        rules2: {
          OldPwd: [{
            required: true,
            message: '请输入旧密码',
            trigger: 'blur'
          }],
          Pwd: [{
            required: true,
            message: '请输入新密码',
            trigger: 'blur'
          }],
          surePassword: [{
            required: true,
            message: '请输入确认密码',
            trigger: 'blur'
          }]
        },
        //修改密码
        passWordMsg: {
          OldPwd: '',
          Pwd: '',
          surePassword: ''
        },
        sureOldPwd: true,
        visible: true,
        SureVisible: true,
        //切换方式
        radio: '1',
      };
    },
    methods: {
      //修改密码
      submitForm2(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.changePwd();
          }
        });
      },
      //修改密码方法
      changePwd() {
        if (this.passWordMsg.Pwd != this.passWordMsg.surePassword) {
          this.Error('新密码和确认密码不一致');
          return;
        }
        this.apipost('admin_get_MySelfResetPwd', this.passWordMsg, res => {
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
            this.passWordMsg.OldPwd = '';
            this.passWordMsg.Pwd = '';
            this.passWordMsg.surePassword = '';
            // //修改成功后退出登录
            setTimeout(() => {
              this.$store.dispatch("logout")
              localStorage.removeItem("userInfo");
              localStorage.removeItem("previousPathInfo");
              location.href = '/'
            }, 1000);
          } else {
            this.Error(res.data.message);
          }
        }, err => {})
      },
      changePassOld(value) {
        this.sureOldPwd = !(value === 'show');
      },
      changePass(value) {
        this.visible = !(value === 'show');
      }, //判断渲染，true:暗文显示，false:明文显示
      changePass2(value) {
        this.SureVisible = !(value === 'show');
      },
    },
    mounted() {
      this.u = this.getLocalStorage();
      this.openMode = localStorage.openMode;
      this.radio = localStorage.openMode;
      //初始化这个裁剪框
      var self = this;
      var image = document.getElementById('image');
      this.cropper = new Cropper(image, {
        aspectRatio: 1,
        viewMode: 1,
        background: false,
        zoomable: false,
        ready: function () {
          self.croppable = true;
        }
      });
    }
  };

</script>