crs-double-resistance/src/view/applications/index.vue

<template>
<div>
  <div class="box">
    <div class="toptext">{{$t('application.Reset')}}</div>
     <div class="centerbox">
      <el-input class="cen_email" :placeholder="$t('application.New')" v-model="password" show-password></el-input>
      <el-input class="cen_email" :placeholder="$t('application.Confirm')" v-model="confirmPassword" show-password></el-input>
       <button class="cen_button" v-loading.fullscreen.lock="fullscreenLoading" @click="appli">{{$t('application.Submit')}}</button>
    </div>
  </div>
</div>

</template>
<script>
export default {
  components: {
  },
  name: 'applications',
  data () {
    return {
      code: '',
      email: '',
      password: '',
      confirmPassword: '',
      fullscreenLoading: false
    }
  },
  methods: {
    verification () {
      if (!this.password) {
        this.$message.error(this.$t('register.Password') + this.$t('register.Cannot'))
        return false
      } else if (!this.$util.passwordValid(this.password)) {
        this.$message.error(this.$t('register.kinds'))
        return false
      } else if (this.password !== this.confirmPassword) {
        this.$message.error(this.$t('register.inconsistent'))
        return false
      } else {
        return true
      }
    },
    appli () {
      if (this.verification()) {
        var code = this.$route.query.code.split(' ')
        // console.log(code)
        this.fullscreenLoading = true;
        this.$api.post('auth/resetPassword', {
          code: code[0],
          email: this.$route.query.email,
          password: this.password,
          confirmPassword: this.confirmPassword
        }).then((res) => {
          if (res.code == 0) {
            this.$message({
              message: this.$t('register.successfully'),
              type: 'success'
            })
            this.fullscreenLoading = false;
            setTimeout(()=> {
              this.$util.goRoute({
                name: 'login'
              })
            }, 1000)
          } else if (res.code == 302) {
            this.$message.error(this.$t('register.registered'))
            this.fullscreenLoading = false;
          } else if (res.code == 407) {
            this.$message.error(this.$t('message.submitFailed'))
            this.fullscreenLoading = false;
          } else {
            this.$message.error(res.msg)
            this.fullscreenLoading = false;
          }
        })
      }
    }
  },
  mounted () {
  },
  created () {
  }
}
</script>
<style lang="scss" scoped>
@media screen and (min-width: 751px) and (max-width: 9999px) {
.box{
  overflow: hidden;
}
.toptext{
    margin-top: 3rem;
    font-size: 16px;
    color: #005bab;
    background: #cfe0ef;
    font-weight: 700;
    padding: 2rem 0;
    text-align: center;
}
.centerbox /deep/{
  width: 100%;
  box-shadow: 2px 3px 8px 0px rgba(180, 180, 180, 0.3);
  background: #F9FBFD;
  padding: 50px;
  border: 1px solid #dbdbdb;
  .cen_email{
    width: 40%;
    margin: 0 auto 2rem;
    height: 40px;
    color: #a7a7a7;
    border: 1px solid #ccc;
    display: block;
    // text-indent: 1rem;
    border-radius: 4px;
  }
  .cen_button{
    width: 40%;
    margin: 0 auto;
    height: 40px;
    display: block;
    background: #005bab;
    border: none;
    color: #ffffff;
    border-radius: 4px;
    font-size: 14px;
  }
}
}

@media screen and (min-width: 0px) and (max-width: 750px) {
.box{
  overflow: hidden;
}
.toptext{
  margin-top: 0.1rem;
    height: 0.5rem;
    font-size: 16px;
    color: #005bab;
    background: #cfe0ef;
    line-height: 0.5rem;
    text-indent: 0.1rem;
    font-weight: 700;
}
.centerbox{
  width: 100%;
  box-shadow: 2px 3px 8px 0px rgba(180, 180, 180, 0.3);
  background: #F9FBFD;
  padding: 0.3rem;
  border: 1px solid #dbdbdb;
  .cen_email{
    width: 100%;
    margin: 0 auto 0.2rem;
    height: 40px;
    color: #a7a7a7;
    border: 1px solid #ccc;
    display: block;
    // text-indent: 0.1rem;
    border-radius: 4px;
  }
  .cen_button{
    width: 100%;
    margin: 0 auto;
    height: 40px;
    display: block;
    background: #005bab;
    border: none;
    color: #ffffff;
    border-radius: 4px;
    font-size: 14px;
  }
}


}
</style>