resetPassword.vue 2.31 KB
<template>
  <div class="login_container">
    <img src="@/assets/icon/bg_login_2.png" />
    <div class="login_box">
      <NafmHeader navClass="nafmii-head-bg1" />
    </div>
    <div class="login_content">
      <div class="login_form_box">
        <div class="login_form">
          <van-field v-model.trim="password" clearable type="password" maxlength="16" :left-icon="passwordIcon" placeholder="请输入6-16位密码" />
          <van-field v-model.trim="aginPassword" clearable type="password" maxlength="16" :left-icon="passwordIcon" placeholder="再次输入6-16位密码" />
          <div class="login_btn" :class="{loginActive:isBothValue}" @click="handleReset">重 置</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { removeLocalStorage } from '@/utils/LocalStorage'
export default {
  name: 'Login',
  components: {},
  data() {
    return {
      password: "",
      aginPassword: "",
      passwordIcon: require('@/assets/icon/password.png'),
    }
  },
  computed: {
    isBothValue() {
      if (this.password && this.aginPassword) {
        return true
      } else {
        return false
      }
    },
  },
  methods: {
    // 登录操作
    handleReset() {
      if (!this.password) {
        Toast('请输入密码')
        return
      }
      if (!this.aginPassword) {
        Toast('请再次输入密码')
        return
      }
      if (this.password != this.aginPassword) {
        Toast('两次输入的密码不一致')
        return
      }

      /**
       * 1.当source:phomeEmail 
       *    如果是通过 手机号码和邮箱找回 来进行重置密码的话 那么清除用户信息 跳转到登录页面
       * 2.当source:login      
       *    如果是在我的--设置--重置密码 来进行重置密码的话 那么清除用户信息 跳转到我到为登录状态
       */

      const { source } = this.$route.query;

      // 清空用户信息 
      removeLocalStorage('user')
      Toast(this.$t('toast.resetSuccess'))

      if (source == 'mine') {
        this.$router.push({
          path: '/user/center'
        })
      } else {
        this.$router.push({
          path: '/user/login/username'
        })
      }


      // todo 请求接口
      console.log(1)
    },
  }
}
</script>
<style lang="less" scoped>
@import "./less/login.less";
</style>