设置交易密码页面

src/user_pages/validPhone/index.tsx

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from "react";
+import Taro from '@tarojs/taro';
+import { View, Text, Input, Button } from "@tarojs/components";
+
+import "./index.scss";
+import httpService from "@/services/httpService";
+
+interface FormFields {
+  phone?: string;
+  sms_code?: string;
+}
+
+const ValidPhone: React.FC = () => {
+  const [formData, setFormData] = useState<FormFields>({
+    phone: "",
+    sms_code: "",
+  });
+
+  const handleInput = (e: any, field: string) => {
+    setFormData({ ...formData, [field]: e.detail.value });
+  };
+
+  const handleConfirm = async () => {
+    // TODO: 校验验证码
+    Taro.navigateTo({ url: "/user_pages/setTransactionPassword/index?type=find" });
+  };
+
+  return (
+    <View className="set-transaction-password-page">
+      <View className="form-item">
+        <Text className="form-label">手机号</Text>
+        <Input defaultValue={"15708469466"} type="number" disabled></Input>
+      </View>
+      <View className="form-item">
+        <Text className="form-label">验证码</Text>
+        <Input placeholder="请输入验证码" type="number" onInput={(e) => { handleInput(e, "sms_code") }}></Input>
+        <Button className="btn" >获取验证码</Button>
+      </View>
+      <Button className="btn bottom-btn" onClick={handleConfirm}>提交</Button>
+    </View>
+  );
+};
+
+export default ValidPhone;