设置交易密码页面

src/user_pages/validPhone/index.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '验证手机号',
+})

src/user_pages/validPhone/index.scss

@@ -0,0 +1,49 @@
+.set-transaction-password-page {
+    min-height: 100vh;
+    background-color: #f5f5f5;
+    padding: 20px;
+
+    .form-item {
+        height: 50px;
+        display: flex;
+        gap: 10px;
+        align-items: center;
+        border-bottom: 1px solid #0000000D;
+        font-size: 14px;
+
+        .form-label {
+            width: 56px;
+            text-align: right;
+        }
+    }
+
+    .btn {
+        height: 24px;
+        border: 1px solid rgba(0, 0, 0, 0.06);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        background: #000;
+        box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.1);
+        backdrop-filter: blur(16px);
+        font-feature-settings: "liga" off, "clig" off;
+        font-family: "PingFang SC";
+        font-size: 9.6px;
+        font-style: normal;
+        line-height: normal;
+        border-radius: 8px;
+        margin-right: 0;
+    }
+
+    .bottom-btn {
+        position: fixed;
+        bottom: 40px;
+        height: 54px;
+        width: calc(100vw - 40px);
+        margin: 0 auto;
+        border-radius: 16px;
+        font-size: 16px;
+        font-weight: 600;
+    }
+}

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;