rest pass

src/pages/website/Settings/ResetForm.tsx

@@ -0,0 +1,112 @@
+import { useAuth } from "@queenjs-modules/auth";
+import { CaptchaInput } from "@queenjs-modules/auth/components/components/captcha";
+import { Button, Form, Input } from "ant-design-vue";
+import { queenApi } from "queenjs";
+import { defineComponent, reactive } from "vue";
+
+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="请输入手机号码"
+            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>
+    );
+  },
+});

src/pages/website/Settings/ResetPassModal.tsx

@@ -0,0 +1,22 @@
+import { useModal } from "queenjs";
+import { defineComponent } from "vue";
+import ResetForm from "./ResetForm";
+import { useAuth } from "@queenjs-modules/auth";
+
+export default defineComponent({
+  setup() {
+    const modal = useModal();
+    const auth = useAuth();
+
+    return () => {
+      return (
+        <ResetForm
+          onSuccess={() => {
+            modal.cancel();
+            auth.actions.logout();
+          }}
+        />
+      );
+    };
+  },
+});

src/pages/website/Settings/index.tsx

@@ -1,5 +1,49 @@
+import { IconLock } from "@queenjs/icons";
+import { Button, Tabs } from "ant-design-vue";
+import { queenApi } from "queenjs";
 import { defineComponent } from "vue";
+import ResetPassModal from "./ResetPassModal";
 
-export default defineComponent(() => {
-  return () => <div>Settings</div>;
+const options = ["账户与安全"];
+
+export default defineComponent({
+  setup() {
+    // const modal = useModal();
+
+    const showModal = () => {
+      queenApi.dialog(<ResetPassModal />, {
+        width: "400px",
+        title: "修改密码",
+      });
+    };
+
+    return () => (
+      <div>
+        <h3 class="text-22px">个人资料</h3>
+        <Tabs>
+          {options.map((d, i) => (
+            <Tabs.TabPane key={i} tab={d} />
+          ))}
+        </Tabs>
+        <div>
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <div class="flex items-center justify-center w-48px h-48px rounded-4px bg-light-50">
+                <IconLock class="text-24px !text-orange" />
+              </div>
+              <div class="ml-10px">
+                <div class="text-14px text-light-50">登录密码</div>
+                <div class="mt-10px text-12px opacity-80">
+                  建议使用6-16个字符，可包括大小写字母和数字
+                </div>
+              </div>
+            </div>
+            <Button type="link" onClick={showModal}>
+              修改密码
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  },
 });

src/pages/website/components/layout/LeftContent.tsx

@@ -3,7 +3,8 @@ import {
   IconCamera,
   IconCube,
   IconDashboard,
-  IconDownload
+  IconDownload,
+  IconSettings,
 } from "@queenjs/icons";
 import { Avatar, Divider } from "ant-design-vue";
 import { defineUI } from "queenjs";
@@ -44,11 +45,11 @@ export default defineUI({
         icon: IconCamera,
         // suffix: "32",
       },
-      // {
-      //   link: "/settings",
-      //   label: "设置",
-      //   icon: IconSettings,
-      // },
+      {
+        link: "/settings",
+        label: "个人资料",
+        icon: IconSettings,
+      },
     ];
     return () => {
       const { userInfo } = props.Controller.state;