yizhizan-h5/pages/public/forgetPwd.vue

<template>
  <view class="container">
    <navBar title="忘记密码" color="#000" />
    <view class="wrapper">
      <view class="input-content">
        <view
          class="cu-form-group"
          style="border: 2rpx solid whitesmoke; margin-bottom: 20px; border-radius: 30px"
        >
          <view class="title text-black">手机号</view>
          <input
            type="number"
            :value="phone"
            placeholder="请输入手机号"
            maxlength="11"
            data-key="phone"
            @input="inputChange"
          />
        </view>
        <view
          class="cu-form-group"
          style="border: 2rpx solid whitesmoke; margin-bottom: 20px; border-radius: 30px"
        >
          <text class="title text-black">验证码</text>
          <input
            type="number"
            :value="code"
            placeholder="请输入验证码"
            maxlength="6"
            data-key="code"
            @input="inputChange"
            @confirm="toLogin"
          />
          <button class="send-msg" @click="sendMsg" :disabled="sending">
            {{ sendTime }}
          </button>
        </view>
        <view
          class="cu-form-group"
          style="border: 2rpx solid whitesmoke; margin-bottom: 20px; border-radius: 30px"
        >
          <text class="title text-black">设置密码</text>
          <input
            type="password"
            :value="password"
            placeholder="请设置新密码"
            placeholder-class="input-empty"
            maxlength="20"
            minlength="6"
            data-key="password"
            @input="inputChange"
            @confirm="toLogin"
          />
        </view>
      </view>
      <button class="confirm-btn" @click="toLogin">立即找回</button>
    </view>
  </view>
</template>

<script>
import navBar from "@/components/nav-bar/index.vue";
export default {
  data() {
    return {
      code: "",
      phone: "",
      password: "",
      sending: false,
      sendTime: "获取验证码",
      count: 60,
      logining: false,
    };
  },
  components: {
    navBar,
  },
  methods: {
    sendMsg() {
      const { phone } = this;
      if (!phone) {
        this.$queue.showToast("请输入手机号");
      } else if (phone.length !== 11) {
        this.$queue.showToast("请输入正确的手机号");
      } else {
        this.$queue.showLoading("正在发送验证码...");
        this.$Request.getT("/app/Login/sendMsg/" + phone + "/forget").then((res) => {
          if (res.code === 0) {
            this.sending = true;
            this.$queue.showToast("验证码发送成功请注意查收");
            this.countDown();
            uni.hideLoading();
          } else {
            uni.hideLoading();
            uni.showModal({
              showCancel: false,
              title: "短信发送失败",
              content: res.msg ? res.msg : "请一分钟后再获取验证码",
            });
          }
        });
      }
    },
    countDown() {
      const { count } = this;
      if (count === 1) {
        this.count = 60;
        this.sending = false;
        this.sendTime = "获取验证码";
      } else {
        this.count = count - 1;
        this.sending = true;
        this.sendTime = count - 1 + "秒后重新获取";
        setTimeout(this.countDown.bind(this), 1000);
      }
    },
    inputChange(e) {
      const key = e.currentTarget.dataset.key;
      this[key] = e.detail.value;
    },
    navBack() {
      uni.navigateBack();
    },

    navTo(url) {
      uni.navigateTo({
        url,
      });
    },
    toLogin() {
      const { phone, password, code } = this;
      if (!phone) {
        this.$queue.showToast("请输入手机号");
      } else if (!password) {
        this.$queue.showToast("请设置密码");
      } else if (password.length < 6) {
        this.$queue.showToast("密码位数必须大于六位");
      } else {
        this.logining = true;
        this.$queue.showLoading("正在修改密码中...");
        this.$Request
          .post("/app/Login/forgetPwd", {
            pwd: password,
            phone: phone,
            msg: code,
          })
          .then((res) => {
            uni.hideLoading();
            if (res.code === 0) {
              uni.navigateTo({
                url: "/pages/public/loginphone",
              });
            } else {
              uni.showModal({
                showCancel: false,
                title: "密码找回失败",
                content: res.msg,
              });
            }
          });
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background: #ffffff !important;
}

.send-msg {
  border-radius: 30px;
  color: white;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  background: #016bf6;
}

.container {
  padding-top: 32rpx;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
}

.wrapper {
  position: relative;
  z-index: 90;
  background: #ffffff;
  padding-bottom: 20px;
}

.input-content {
  padding: 40rpx;
}

.confirm-btn {
  width: 600rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 60rpx;
  margin-top: 32rpx;
  background: #016bf6;
  color: #fff;
  font-size: 32rpx;

  &:after {
    border-radius: 60px;
  }
}
</style>