assess-app/pages/login/forget.vue

<template>
  <view class="page-box login-box">
    <view class="login-form sys-radius-50 sys-background-fff">
      <view class="from-box animate__animated animate__fadeIn">

        <view class="input-item  sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':shakeNum===3}" >
          <en-input type="number" class="login-input" placeholder="请输入手机号"  v-model="accountData.phone"  ></en-input>
        </view>
        <view class="input-item  input-send sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':shakeNum===4}">
          <en-input type="number" class="login-input" placeholder="请输入验证码"  v-model="accountData.code" maxlength="6"></en-input>
          <view class="login-send text-color-dominant sys-size-28 sys-weight-400" @click="getVerifiedCode" v-if="timeNum<=0">发送验证码</view>
          <view class="login-send text-color-dominant sys-size-28 sys-weight-400" v-else>{{ timeNum }} s</view>
        </view>
        <view class="input-item  sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':(shakeNum===5 || shakeNum===7)}" >
          <en-input type="password" class="login-input" placeholder="请输入密码"  v-model="accountData.password" ></en-input>
        </view>
        <view class="input-item  sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':(shakeNum===6 || shakeNum===7)}">
          <en-input type="password" class="login-input" placeholder="请再次输入密码"  v-model="accountData.passwordTwo" ></en-input>
        </view>
      </view>
      <agreement v-model="isConsent" ref="agreement"></agreement>

      <view
          class="input-but sys-background-dominant text-color-fff sys-size-30 sys-radius-100 sys-weight-600"
          :class="{'sys-selected-but':isRegister,'sys-unselected-but':!isRegister}"
          @click="retrievePassword"
      >确认</view>


    </view>

    <view class="register-box">
      <view class="register-text sys-weight-400 sys-size-24 text-color-666">已有账号？</view>
      <view class="register-text text-color-dominant sys-size-24 sys-weight-400" @click="goToUrl(1)">去登录</view>
    </view>

  </view>
</template>

<script>
import EnInput from "../../components/en-from/en-input/index.vue";
import tools from "../../service/tools";
import {commonSend} from "../../api/common";
import Agreement from "@/pages/login/model/agreement.vue";
import {register, retrievePassword, wxLogin} from "@/api/login";

export default {
  components: {Agreement, EnInput},
  data() {
    return {
      accountData: {
        'phone': '',
        'password': '',
        'passwordTwo': '',
        'code': '',
      },
      timeNum: 0,
      timer: null,
      isAJAX: false,
      isConsent: false,
      isRegister: false,
      shakeNum: 0,
    };
  },
  watch: {
    'accountData': {
      handler() {
        this.verifyData(false)
      },
      deep: true
    },
  },
  methods: {
    goToUrl(type) {
      uni.reLaunch({
        'url': '/pages/login/index'
      })
    },
    verifyData(type) {
      let isRegister = true;
      if (!this.accountData.phone) {
        isRegister = false
        if (type) {
          this.shakeNum = 3
          tools.error('请输入手机号码');
        }
      } else if (!this.accountData.password) {
        isRegister = false
        if (type) {
          this.shakeNum = 5
          tools.error('请输入密码');
        }
      } else if (!this.accountData.passwordTwo) {
        isRegister = false
        if (type) {
          this.shakeNum = 6
          tools.error('请确认密码');
        }
      } else if (this.accountData.password !== this.accountData.passwordTwo) {
        isRegister = false
        if (type) {
          this.shakeNum = 7
          tools.error('密码输入不一致');
        }
      } else if (!this.accountData.code) {
        isRegister = false
        if (type) {
          this.shakeNum = 4
          tools.error('请输入验证码');
        }
      } else if (!this.isConsent) {
        isRegister = false
        if (type) {
          this.shakeNum = 8
          tools.error('请阅读并同意协议');
          this.$refs.agreement.setConsentShake()
        }
      }
      if (!isRegister) {
        setTimeout(() => {
          if (this.shakeNum > 0) this.shakeNum = 0
        }, 500)
      }
      this.isRegister = isRegister

    },
    retrievePassword() {
      this.verifyData(true)
      if (!this.isRegister) {
        return;
      }
      if (this.isAJAX) {
        return
      }
      this.isAJAX = true
      retrievePassword(this.accountData).then((res) => {
        if (res.code === 1) {
          tools.setLoginData(res.data, false)
          tools.success('修改成功')
          setTimeout(() => {
            this.isAJAX = false;
            uni.reLaunch({
              url: '/pages/login/index'
            });
          }, 1500)
        } else {
          this.isAJAX = false;
          tools.error(res.msg)
        }
      })
    },
    getVerifiedCode() {
      if (this.timeNum > 0) {
        return;
      }
      if (this.accountData.phone === '') {
        tools.error("请输入手机号码")
        return;
      }
      let regPhone = /^(?:(?:\+|00)86)?1\d{10}$/;
      if (!regPhone.test(this.accountData.phone)) {
        tools.error("手机号码格式错误")
        return;
      }
      commonSend({
        'phone': this.accountData.phone,
        'send_type': 'register'
      }).then((res) => {
        if (res.code === 1) {
          tools.success(res.msg);
          this.timeNum = 60;
          this.timer = setInterval(() => {
            this.timeNum--;
            if (this.timeNum <= 0) {
              clearInterval(this.timer);
            }
          }, 1000);
        } else {
          tools.error(res.msg);
        }
      })
    },
  }
}
</script>

<style lang="scss">
@import "/static/css/login.css";

.page-box {
  padding-top: 370rpx;

  .login-form {
    margin: 0 30rpx;
    border-radius: 50rpx;
    padding: 40rpx 45rpx;
    animation-delay: 0.8s;

    .input-item {
      height: 96rpx;
      padding: 28rpx 40rpx;
      box-sizing: border-box;
      margin-top: 30rpx;

      .login-input {
        width: 100%;
      }
    }

    .input-item:first-child {
      margin-top: 0;
    }

    .input-send {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .login-input {
        width: calc(100% - 140rpx);
      }

      .login-send {
        width: 140rpx;
        text-align: center;
      }
    }

    .input-but {
      margin-top: 40rpx;
      width: 100%;
      height: 96rpx;
      line-height: 96rpx;
      text-align: center;
    }
  }

  .register-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60rpx;

    .register-text {
      height: 34rpx;
      line-height: 34rpx;
    }

    .register-text:last-child {
      margin-right: 5rpx;
    }
  }
}


</style>