fontend-web/src/views/personal/setPayPassword.vue

<template>
  <div class="setPayPassword">
    <div class="majorBox">
      <div class="majorTitleBox majorBoxStyle">
        <p class="majorTitle">
          {{ $t('personal.security.setMoneyPassword.title') }}
        </p>
      </div>

      <div class="secondaryBox majorBoxStyle majorBoxStyleBc">
        <div class="setBox">
          <span class="setItem"
            >{{ $t('personal.security.setMoneyPassword.phoneNumber') }}：</span
          >
          <span class="secondaryCont">{{ mobilePhone }}</span>
        </div>
      </div>

 <!--     <div class="secondaryBox majorBoxStyle">
        <div class="setBox">
          <span class="setItem"
            >{{ $t('personal.security.setMoneyPassword.code') }}：</span
          >
          <el-input
            v-model="code"
            :placeholder="$t('personal.security.code_p')"
          ></el-input>
          <p v-if="is_again === false" class="getCode" @click="getCode">
            {{ $t('personal.security.getCode') }}
          </p>
          <p v-else class="resendText">
            {{ $t('personal.security.resend') }}（{{ timerNum }}s）
          </p>
        </div>
      </div>-->

      <div class="secondaryBox majorBoxStyle majorBoxStyleBc">
        <div class="setBox">
          <span class="setItem"
            >{{ $t('personal.security.setMoneyPassword.fund') }}：</span
          >
          <el-input
            show-password
            v-model="moneyPassword"
            :placeholder="$t('personal.security.setMoneyPassword.fund_p')"
          ></el-input>
        </div>
      </div>

      <div class="secondaryBox majorBoxStyle">
        <div class="setBox">
          <span class="setItem"
            >{{ $t('personal.security.setMoneyPassword.confirm') }}：</span
          >
          <el-input
            show-password
            v-model="confirmPassword"
            :placeholder="$t('personal.security.setMoneyPassword.confirm_p')"
          ></el-input>
        </div>
      </div>

      <div class="handleBtnBox">
        <el-button class="sureBtn" @click="submit" :loading="loading">
          {{ $t('personal.profile.changePassword.affirmBtn') }}
        </el-button>
        <router-link to="/security">
          <el-button class="cancelBtn">
            {{ $t('personal.profile.changePassword.cancelBtn') }}
          </el-button>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import {getMoneyCode, setMoneyPassword, getPayPassword} from '@/api/user';
import {getKey} from '@/api/eth.js';
const JSEncrypt = require('jsencrypt');
export default {
  data() {
    return {
      mobilePhone: '',
      code: '',
      moneyPassword: '',
      confirmPassword: '',
      is_again: false,
      timerNum: '',
      loading: false,
    };
  },
  created() {
    let userData = JSON.parse(localStorage.getItem('userData'));
    // console.log("设置资金密码页面",userData)
    this.mobilePhone = userData.mobilePhone.replace(
      /^(\d{3})\d{4}(\d+)/,
      '$1****$2'
    );
  },
  methods: {
    submit() {
  /* 去掉验证码   if (this.code === '') {
        this.$message.warning(this.$t('personal.security.code_p'));
      } else */
      if (this.moneyPassword === '') {
        this.$message.warning(
          this.$t('personal.security.setMoneyPassword.fund_p')
        );
      } else if (this.confirmPassword === '') {
        this.$message.warning(
          this.$t('personal.security.setMoneyPassword.confirm_p')
        );
      } else if (this.moneyPassword != this.confirmPassword) {
        this.$message.warning(
          this.$t('personal.security.setMoneyPassword.incorrect')
        );
      } else {
        this.loading = true;
        //密码加密处理
        getKey().then(res => {
          let gongKey = res.data.data;
          let crypt = new JSEncrypt.JSEncrypt({
            default_key_size: 1024,
          });
          crypt.setPublicKey(gongKey);
          let en_password = crypt.encrypt(this.confirmPassword);
          // console.log(en_password)

          setMoneyPassword(en_password, this.code).then(res => {
            // console.log(res)
            if (res.data.code === 200) {
              this.loading = false;
              this.$message.success(
                this.$t('personal.security.setMoneyPassword.successful')
              );

              //更新cookie里面的支付密码
              getPayPassword().then(res => {
                // console.log(res.data.data)
                // Cookie.set('is_pay', res.data.data);
                localStorage.setItem('is_pay', res.data.data);
              });

              this.$router.replace('/security');
            } else {
              this.loading = false;
              this.$message.warning(res.data.msg);
            }
          });
        });
      }
    },
    //获取验证码
    getCode() {
      getMoneyCode().then(res => {
        // console.log(res);
        if (res.data.code === 200) {
          this.timerNum = 60;
          this.is_again = !this.is_again;

          //发送成功就启动倒计时
          let timer = setInterval(() => {
            if (this.timerNum > 0) {
              this.timerNum--;
            } else {
              this.is_again = !this.is_again;
              clearInterval(timer);
            }
          }, 1000);

          this.$message.success(this.$t('personal.security.sendSuccess'));
        } else {
          this.$message.warning(res.data.msg);
        }
      });
    },
  },
};
</script>

<style lang="scss">
.setPayPassword {
  .majorBox {
    height: 430px;
  }
  .setBox {
    color: #d7dbdf;
    display: flex;
    align-items: center;
  }
  .setBoxStyle {
    background-color: #1c3049;
    border-bottom: 1px solid #213854;
  }
  .setTitle {
    font-size: 14px;
    color: #a0a6b5;
  }

  .setItem {
    width: 90px;
    font-size: 14px;
    color: #a0a6b5;
    margin-right: 68px;
  }

  .getCode {
    color: #e8494a;
    margin-left: 30px;
    cursor: pointer;
    font-size: 14px;
  }

  .resendText {
    color: #e8494a;
    margin-left: 30px;
    font-size: 14px;
  }

  .el-input {
    width: 303px;
    height: 49px;
  }

  .handleBtnBox {
    width: 511px;
    margin-top: 50px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
  }

  .cancelBtn {
    border-color: #545663;
    color: #545663;
    background-color: transparent;
  }

  .sureBtn {
    margin-left: 20px;
    background-color: #e8494a;
    color: #fff;
    border-color: #e8494a;
  }

  .el-button {
    width: 110px;
    height: 40px;
    border-radius: 3px;
  }
}
</style>