4dkankan_official/src/page/manage/temp/change.vue

<template>
  <div class="change-layout">
    <div class="change-con">
      <div class="input">
        {{info.userName}}
      </div>
      <div class="input yanzhengma">
        <input autocomplete="off" v-model="code" type="text" placeholder="验证码">
        <div v-if="!jishi" @click="getAuthCode" class="code btn parmary">{{langModify.code}}</div>
        <div v-else class="code btn parmary">{{interTime}}s后重新发送</div>
      </div>
      <div class="input">
        <input autocomplete="off" maxlength="12" v-model="password" type="password" placeholder="新密码">
      </div>
       <div class="input">
        <input autocomplete="off" maxlength="12" v-model="confirmpass" type="password" placeholder="再次输入新密码">
      </div>
      <div @click="submit" class="btn parmary">
        {{langModify.submit}}
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  computed: {
    ...mapState({
      token: state => state.user.token,
      langModify: state => state.language.home.manage.modify,
      info: state => state.user.info
    })
  },
  data () {
    return {
      password: '',
      confirmpass: '',
      phone: '',
      interTime: 60,
      jishi: false,
      code: ''
    }
  },
  methods: {
    async getAuthCode () {
      let {userName, country} = this.info
      let res = await this.$store.dispatch('getAuthCode', {
        phone: userName,
        code: country === '中国' ? 86 : country
      })
      if (res) {
        this.interl && clearInterval(this.interl)
        this.interl = null
        this.jishi = true
        this.interl = setInterval(() => {
          this.interTime--
          if (this.interTime <= 0) {
            this.jishi = false
            this.interTime = 60
            clearInterval(this.interl)
            this.interl = null
          }
        }, 1000)
      }
    },
    async submit () {
      let check = value => {
        for (let i = 0, len = value.length; i < len; i++) {
          if (!value[i].val) {
            return this.$toast.show('warn', value[i].name + '不能为空')
          }
        }
        return true
      }

      if (this.password !== this.confirmpass) {
        return this.$toast.show('warn', '两次密码不一致')
      }

      let checkStr = [
        {
          name: '验证码',
          val: this.code
        },
        {
          name: '新密码',
          val: this.password
        },
        {
          name: '确认密码',
          val: this.confirmpass
        }
      ]
      if (!check(checkStr)) {
        return
      }

      let params = {
        password: this.password,
        phoneNum: this.info.userName,
        confirmPwd: this.confirmpass,
        msgAuthCode: this.code
      }

      let res = await this.$http({
        method: 'post',
        headers: {
          token: this.token
        },
        data: params,
        url: 'user/changePassword'
      })
      let data = res.data
      if (data.code === 0) {
        this.$toast.show('success', '密码修改成功，请重新登录')
        this.$store.commit('logout')
        this.$router.push({name: 'home'})
      } else {
        this.$toast.show('warn', `修改失败，${data.msg}`)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.change-layout{
  $theme-color: #1fe4dc;
  $border-color: #e7e7e7;
  margin-bottom: 300px;
  .input{
    width: 300px;
    margin-bottom: 20px;
  }
  input {
    appearance: none;
    line-height: 36px;
    height: 36px;
    width: 100%;
    border: solid 1px $border-color;
    padding-left: 10px;
    &:focus {
      border: solid 1px $theme-color;
    }
  }
  .btn {
    text-align: center;
    cursor: pointer;
  }
  .parmary {
    background-color: $theme-color;
    height: 36px;
    width: 120px;
    line-height: 36px;
  }
  .change-con{
    padding: 30px 0 30px 40px;
    width: 850px;
    .yanzhengma{
      display: flex;
      align-items: center;
      input{
        width: 180px;
      }
    }
  }
}
</style>