queenjs-modules-shared/packages/auth/components/components/ResetForm.tsx

import { Button, Form, Input } from "ant-design-vue";
import { queenApi } from "queenjs";
import { defineComponent, reactive } from "vue";
import { useAuth } from "../..";
import { CaptchaInput } from "./captcha";

const layout = {
  wrapperCol: { span: 24 },
};
const tailLayout = {
  wrapperCol: { span: 24 },
};

export default defineComponent({
  emits: ["success"],
  setup(props, { emit }) {
    const auth = useAuth();

    const state = reactive({
      loading: false,
    });

    const formState = reactive({
      phone: "",
      code: "",
      password: "",
      rePwd: "",
    });

    const rules = reactive({
      phone: [{ required: true, message: "手机号不能为空", trigger: "change" }],
      code: [{ required: true, message: "验证码不能为空", trigger: "change" }],
      password: [
        { required: true, message: "密码不能为空", trigger: "change" },
      ],
      rePwd: [{ required: true, message: "请确认密码", trigger: "change" }],
    });

    const { validate, validateInfos } = Form.useForm(formState, rules);

    const submit = async () => {
      try {
        state.loading = true;
        const { rePwd, ...formData } = await validate();
        if (rePwd !== formData.password) {
          queenApi.messageError("输入密码不一致！");
          return;
        }
        await auth.actions.resetPassword(formData);
        emit("success");
      } finally {
        state.loading = false;
      }
    };

    function getCodeByClick() {
      return auth.actions.getSmsCode({
        phone: formState.phone,
        use: "resetPasswd",
      });
    }

    return () => (
      <Form {...layout} name="basic">
        <Form.Item name="phone" {...validateInfos.phone}>
          <Input
            placeholder="请输入手机号码"
            type=""
            v-model={[formState.phone, "value"]}
            maxlength={30}
          />
        </Form.Item>
        <Form.Item name="code" {...validateInfos.code}>
          <CaptchaInput
            disabled={!/^1[3456789]\d{9}$/.test(formState.phone)}
            value={formState.code}
            onChange={(v) => (formState.code = v)}
            onGetCode={getCodeByClick}
          />
        </Form.Item>
        <Form.Item name="password" {...validateInfos.password}>
          <Input
            type="password"
            placeholder="请设置密码"
            v-model={[formState.password, "value"]}
            maxlength={12}
          />
        </Form.Item>
        <Form.Item name="rePwd" {...validateInfos.rePwd}>
          <Input
            type="password"
            placeholder="再次确认密码"
            v-model={[formState.rePwd, "value"]}
            maxlength={12}
          />
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button
            htmlType="submit"
            block
            type="primary"
            size="large"
            shape="round"
            loading={state.loading}
            onClick={submit}
          >
            修改密码
          </Button>
        </Form.Item>
      </Form>
    );
  },
});