gypsy-crm-frontend-vu/pages/login/forget.vue

<script setup>
import { ref, reactive, watch } from "vue";

import { post, get } from "@/utils/request";
import { useRequest } from "@/composables/useRequest";

const SendCodeByPhone = (params) => post("/Common/SendCodeByPhone", params);
const ResetPwd = (params) => post("/Login/ResetPwd", params);

// 响应式表单数据
const form = ref({
  mobile: "",
  code: "",
  password: "",
});
// 校验规则
const rules = {
  mobile: [
    {
      required: true,
      message: "请输入用户名或手机号",
      trigger: ["change", "blur"],
    },
    {
      // 自定义验证函数，见上说明
      validator: (rule, value, callback) => {
        // 上面有说，返回true表示校验通过，返回false表示不通过
        // uni.$u.test.mobile()就是返回true或者false的
        return uni.$u.test.mobile(value);
      },
      message: "手机号码不正确",
      // 触发器可以同时用blur和change
      trigger: ["change", "blur"],
    },
  ],
  code: [
    {
      required: true,
      message: "请输入验证码",
      trigger: ["change", "blur"],
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: ["change", "blur"],
    },
  ],
};

const tips = ref("");
const value = ref("");
const seconds = ref(60);
const uCodeRef = ref(null);

watch(value, (newValue, oldValue) => {
  // console.log('v-model', newValue);
});

const codeChange = (text) => {
  tips.value = text;
};

const getCode = async () => {
  // console.log('uCodeRef.canGetCode: ', uCodeRef.value);
  if (uCodeRef.value.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
      title: "正在获取验证码",
    });
    const data = await SendCodeByPhone({ phone: form.value.mobile });
    console.log("data: ", data);
    if (data) {
      setTimeout(() => {
        uni.hideLoading();
        // 这里此提示会被start()方法中的提示覆盖
        uni.$u.toast("验证码已发送");
        // 通知验证码组件内部开始倒计时
        uCodeRef.value.start();
      }, 2000);
    } else {
      uni.hideLoading();
    }
  } else {
    uni.$u.toast("倒计时结束后再发送");
  }
};

const uFormRef = ref(null);
function submit() {
  uFormRef.value
    .validate()
    .then((valid) => {
      if (valid) {
        // uni.$u.toast('校验通过');
        refresh({
          phone: form.value.mobile,
          code: form.value.code,
          newPassword: form.value.password,
        });
      } else {
        // uni.$u.toast('校验失败');
      }
    })
    .catch(() => {
      // 处理验证错误
      // uni.$u.toast('校验失败');
    });
}

// 使用组合函数
const { data, loading, error, refresh } = useRequest(ResetPwd, {
  initialParams: {
    phone: form.value.mobile,
    code: form.value.code,
    newPassword: form.value.password,
  },
  immediate: false, // 默认立即执行
});
const token = ref("");
watch([loading, error], () => {
  if (!loading.value) {
    // 加载完成
    if (error.value) {
      console.log("请求失败: ", error.value); // 打印错误信息
    } else {
      console.log("请求成功: ", data.value); // 成功时获取数据
      uni.$u.toast("修改成功");
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }
  }
});
const customStyle = {
  height: "84px",
  "border-radius": "8px",
  background: "#f7f8fa",
  padding: "0 20px !important",
  position: "relative",
};
</script>
<template>
  <view>
    <view class="company u-flex u-flex-y-center">
      <image src="/static/images/logo.png" class="company-icon" mode="widthFix"></image>
      <view class="company-head">
        <view class="name">华都渠道管家</view>
        <view class="into">专业的房产销售管理平台</view>
      </view>
    </view>
    <view class="account">
      <view>
        <up-form :model="form" :rules="rules" ref="uFormRef">
          <up-form-item label="" prop="mobile">
            <up-input :customStyle="customStyle" v-model="form.mobile" border="none" placeholder="请输入用户名或手机号" />
          </up-form-item>
          <up-form-item label="" prop="code">
            <up-input :customStyle="customStyle" v-model="form.code" border="none" placeholder="请输入验证码">
              <template #suffix>
                <up-code ref="uCodeRef" @change="codeChange" :seconds="seconds"></up-code>
                <up-text :text="tips" @click="getCode" class="code-text"></up-text>
              </template>
            </up-input>
          </up-form-item>

          <up-form-item label="" prop="password">
            <up-input :customStyle="customStyle" v-model="form.password" type="password" border="none"
              placeholder="新密码" />
          </up-form-item>
        </up-form>
      </view>
    </view>

    <button type="primary" class="regiset-btn" @click="submit">重置密码</button>
    <navigator url="/pages/login/regist" class="account-tip">
      还没有账号？
      <text>立即注册</text>
    </navigator>
  </view>
</template>

<style>
page {
  padding: px2rpx(10) px2rpx(52);
  box-sizing: border-box;
}
</style>
<style lang="scss" scoped>
@import "@/uni.scss";

button {
  background-color: #ea002a;
  font-size: px2rpx(14);
  font-weight: normal;
  height: px2rpx(84);
  line-height: px2rpx(84);
}

.company {
  padding: px2rpx(40) 0;
}

.company-icon {
  width: px2rpx(104);
  height: px2rpx(104);
  margin-right: px2rpx(14);
}

.company-head {
  .name {
    font-size: px2rpx(20);
    font-weight: 500;
    color: #ea002a;
    margin-bottom: px2rpx(2);
  }

  .into {
    font-size: px2rpx(13);
    font-weight: 350;
    color: #222222;
  }
}

.account {
  .input {
    height: px2rpx(84);
    border-radius: px2rpx(8);
    background: #f7f8fa;
    padding: 0 px2rpx(20) !important;
  }
}

.regiset-btn {
  margin: px2rpx(20) 0;
}

.account-tip {
  color: #666666;
  font-size: px2rpx(13);
  text-align: center;

  text {
    color: #ea002a;
  }
}

.code-text {
  padding-right: px2rpx(20);
}

:deep(.u-text__value) {
  color: #ea002a !important;
  font-size: px2rpx(14) !important;
}
</style>