pc_shop_site/pages/setNewPassword.vue

<template>
  <div class="com-main com-width-1400 com-margin-auto">
    <!-- <div class="img-logo">
      <img src="@/assets/img/logo.png" alt="" />
    </div> -->
    <div class="resetPassword">
      <div>
        <p class="title">Set New Password</p>
        <p class="tip">Fill in your new password</p>
        <div class="userInfo">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            class="demo-ruleForm">
            <!-- <el-form-item prop="email">
              <label for="">User Name</label>
              <el-input v-model="ruleForm.email"></el-input>
            </el-form-item> -->
            <el-form-item prop="password">
              <label for="">Password</label>
              <el-input
                v-model="ruleForm.password"
                :type="flag ? 'text' : 'password'">
                <i
                  v-if="!flag"
                  slot="suffix"
                  class="el-input__icon iconfont"
                  style="font-size: 22px"
                  @click="showPassword"
                  >&#xebcc;</i
                >
                <i
                  v-else
                  slot="suffix"
                  class="el-input__icon iconfont"
                  style="font-size: 22px"
                  @click="showPassword"
                  >&#xebcd;</i
                >
              </el-input>
            </el-form-item>
            <el-form-item prop="confirm_password">
              <label for=""> Comfirm Password</label>
              <el-input
                v-model="ruleForm.confirm_password"
                :type="confirm_flag ? 'text' : 'password'">
                <i
                  v-if="!confirm_flag"
                  slot="suffix"
                  class="el-input__icon iconfont"
                  style="font-size: 22px"
                  @click="showPassword"
                  >&#xebcc;</i
                >
                <i
                  v-else
                  slot="suffix"
                  class="el-input__icon iconfont"
                  style="font-size: 22px"
                  @click="showPassword"
                  >&#xebcd;</i
                >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="submitBtn">
          <el-button @click="submit('ruleForm')">SUBMIT</el-button>
        </div>
      </div>
    </div>
    <dialog-XX-success
      :visible.sync="xxContentVisible"
      :content="xxContent"
      @notify-parent="handleNotification"></dialog-XX-success>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import dialogXXSuccess from '@/components/DIalogXXSuccess.vue'
import AES from '~/plugins/AES.js'
export default {
  components: { 'dialog-XX-success': dialogXXSuccess },
  middleware: "checkTimestamp",
  data() {
    return {
      xxContentVisible: false,
      xxContent: 'success',
      flag: false,
      confirm_flag: false,
      email: '',
      ruleForm: {
        password: '',
        confirm_password: '',
      },
      rules: {
        // email: [{ required: true, message: "请输入", trigger: "blur" }],
        password: [
          {
            required: true,
            message: 'Please enter your password',
            trigger: 'blur',
          },
          {
            min: 6,
            max: 16,
            message: 'Password length only allows 6-16 bits',
            trigger: 'blur',
          },
        ],
        confirm_password: [
          {
            required: true,
            message: 'Please confirm your password',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {
    const str = AES.decrypt(this.$route.query.email)
    const parts = str.split("&t=")
    this.email = parts[0]
  },
  methods: {
    handleNotification() {
      this.$router.push('/')
      this.$store.dispatch('logout')
      this.openDialog()
    },
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.ruleForm.password !== this.ruleForm.confirm_password) {
            this.$message({
              message: 'The second password is inconsistent',
              type: 'error',
            })
          } else {
            this.$axios
              .post('/au/reset', {
                // email: this.ruleForm.email,
                email: this.email,
                password: this.ruleForm.password,
                confirm_password: this.ruleForm.confirm_password,
              })
              .then(res => {
                this.xxContentVisible = true
                this.xxContent = "Password Reset Successful"
              })
              .catch(() => {
                // this.$message.error(error.response.data.msg)
              })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    ...mapMutations(['openDialog']),
    showPassword() {
      this.flag = !this.flag
      this.confirm_flag = !this.confirm_flag
    },
  },
}
</script>

<style lang="scss" scoped>
.com-main {
  margin: 40px auto;
  // .img-logo {
  //   width: 100%;
  //   text-align: center;
  // }
  .resetPassword {
    width: 520px;
    height: 480px;
    background: #f5f5f5;
    margin: 0 auto;
    padding: 30px 60px 60px 60px;
    box-sizing: border-box;
    .title {
      color: #1abfe3;
      font-size: 20px;
      line-height: 24px;
      padding: 10px 15px;
      border-bottom: 1px solid #dadada;
    }
    .tip {
      font-size: 14px;
      color: #858e99;
      margin: 20px 0px;
    }
    .userInfo {
      color: #858e99;
      font-size: 14px;
      label {
        display: block;
      }
    }
    .submitBtn {
      margin-top: 25px;
      text-align: center;
      .el-button {
        width: 120px;
        background: #e90000;
        color: #fff;
      }
    }
  }
}
:deep(.el-form-item) {
  margin-bottom: 5px;
}
</style>