saas_manager/pages/login/forget.vue

<template>
  <view class="fotgerpage">
    <view class="fotgerpage-title">找回密码</view>
    <view>
      <view class="login_box">
        <u-form :model="form" ref="uForm" labelWidth="160">
          <u-form-item prop="tel" ref="tel" label="手机号"
            ><u-input
              v-model="form.tel"
              type="number"
              maxlength="11"
              border="bottom"
              placeholder-style="color:#999999"
              placeholder="请输入手机号"
          /></u-form-item>
          <u-form-item prop="code" label="验证码">
            <u--input
              v-model="form.code"
              type="number"
              border="bottom"
              placeholder-style="color:#999999"
              placeholder="请输入验证码"
            >
              <template slot="suffix">
                <u-code
                  ref="uCode"
                  @change="codeChange"
                  seconds="60"
                  changeText="X秒重新获取"
                ></u-code>
                <u-button size="mini" @click="getCode">{{ codeTips }}</u-button>
              </template>
            </u--input>
          </u-form-item>
          <u-form-item prop="pwd" label="新密码"
            ><u-input
              class="password"
              border="bottom"
              placeholder-style="color:#999999"
              v-model="form.pwd"
              type="password"
              placeholder="请输入新密码"
          /></u-form-item>
          <u-form-item prop="pwdAgain" label="确认密码"
            ><u-input
              class="password"
              border="bottom"
              placeholder-style="color:#999999"
              v-model="form.pwdAgain"
              type="password"
              placeholder="再次输入新密码"
          /></u-form-item>
        </u-form>
      </view>

      <u-button
        :disabled="isUse"
        class="c_btn"
        text="确定"
        @click="submit"
      ></u-button>
    </view>
  </view>
</template>

<script>
import { forgetSms, forgetUser } from "@/utils/login";
export default {
  data() {
    return {
      code: "",
      form: {
        code: "",
        tel: "18378140619",
        pwd: "123456Aa..",
        pwdAgain: "123456Aa..",
      },
      rules: {
        tel: [
          {
            required: true,
            message: "请输入手机号",
            trigger: ["change"],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: "手机号码格式不正确",
            trigger: ["change"],
          },
        ],
        pwd: [
          {
            validator: (rule, value, callback) => {
              if (!value) return callback("请输入密码");
              const reg =
                /^(?!.*\s)(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[\W_]).{8,16}$/;
              if (!reg.test(value)) {
                callback("密码由8-16位、大小写字母、符号组成");
              }
              return callback();
            },
            trigger: ["change"],
          },
        ],
        pwdAgain: [
          {
            validator: (rule, value, callback) => {
              if (!value) return callback("请输入密码");
              const reg =
                /^(?!.*\s)(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[\W_]).{8,16}$/;
              if (!reg.test(value)) {
                callback("密码由8-16位、大小写字母、符号组成");
              }
              if (value != this.form.pwd) return callback("两次密码不一致");
              return callback();
            },
            trigger: ["change"],
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: ["change"],
          },
        ],
      },
      codeTips: "",
      read: "",
      isUse: false,
    };
  },
  methods: {
    submit() {
      this.$refs.uForm.validate().then((res) => {
        this.isUse = true;
        let datas = {
          tel: this.form.tel,
          code: this.form.code,
          pwd: this.form.pwd,
        };
        forgetUser(datas)
          .then((res) => {
            uni.showModal({
              title: "提示",
              content: "修改成功",
              showCancel: false,
              success: function (resst) {
                uni.navigateBack();
              },
            });
          })
          .finally(() => {
            this.isUse = false;
          });
      });
    },
    codeChange(text) {
      this.codeTips = text;
    },
    // 获取验证码
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        this.$refs.uForm.validateField("tel", (res) => {
          if (res.length) {
            return;
          }
          let datas = { tel: this.form.tel };
          forgetSms(datas).then(
            (res) => {
              this.$u.toast("验证码已发送");
              this.$refs.uCode.start();
            },
            (err) => {
              console.log(err);
            }
          );
        });
      }
    },
  },
  onLoad(option) {},
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>

<style scoped lang="scss">
.fotgerpage {
  padding: 0 48rpx;
  .fotgerpage-title {
    font-weight: bold;
    color: #222222;
    font-size: 48rpx;
    margin: 96rpx 0;
  }
}

/deep/page {
  background-color: #ffffff;
  height: 100%;
  width: 100%;
}
.login_box {
  margin-bottom: 100rpx;
}
</style>