设置交易密码页面

2025-09-27 00:22:04 +08:00
parent ca0013b37c
commit a1be43e02b
9 changed files with 361 additions and 27 deletions
--- a/src/user_pages/setTransactionPassword/index.tsx
+++ b/src/user_pages/setTransactionPassword/index.tsx
@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from "react";
+import Taro, { useRouter } from '@tarojs/taro';
+import { View, Text, Input, Button } from "@tarojs/components";
+
+import "./index.scss";
+import httpService from "@/services/httpService";
+
+interface FormFields {
+    old_password?: string;
+    new_password: string;
+    confirm_password: string;
+    sms_code?: string;
+}
+
+const SetTransactionPassword: React.FC = () => {
+    const [handleType, setHandleType] = useState("set");
+    const router = useRouter();
+    const { type } = router.params;
+
+    useEffect(() => {
+        if (type) {
+            setHandleType(type);
+        }
+    }, [type]);
+
+    const [formData, setFormData] = useState<FormFields>({
+        old_password: "",
+        new_password: "",
+        confirm_password: "",
+        sms_code: "",
+    });
+
+    const handleInput = (e: any, field: string) => {
+        setFormData({ ...formData, [field]: e.detail.value });
+    };
+
+    const handleConfirm = async () => {
+        const { new_password, confirm_password } = formData;
+        if (new_password !== confirm_password) {
+            Taro.showToast({
+                title: "两次密码输入不一致",
+                icon: "none",
+            });
+            return;
+        }
+        if (handleType === "set") {
+            const { sms_code } = formData;
+            try {
+                await httpService.post("/wallet/set_payment_password", { password: new_password, sms_code });
+                Taro.showToast({
+                    title: "设置交易密码成功",
+                    icon: "success",
+                });
+                Taro.navigateBack();
+            } catch (error) {
+                Taro.showToast({
+                    title: "设置交易密码失败",
+                    icon: "none",
+                });
+                return;
+            }
+        } else if (handleType === "reset") {
+            const { old_password } = formData;
+            try {
+                await httpService.post("/wallet/change_payment_password", { old_password, new_password });
+                Taro.showToast({
+                    title: "修改交易密码成功",
+                    icon: "success",
+                });
+                Taro.navigateBack();
+            } catch (error) {
+                Taro.showToast({
+                    title: "修改交易密码失败",
+                    icon: "none",
+                });
+                return;
+            }
+        }
+    };
+
+    return (
+        <View className="set-transaction-password-page">
+            {
+                handleType === "reset" && (
+                    <View className="form-item">
+                        <Text className="form-label">旧密码</Text>
+                        <Input placeholder="请输入旧密码" password type="number" maxlength={6} onInput={(e) => { handleInput(e, "old_password") }}></Input>
+                    </View>
+                )
+            }
+            <View className="form-item">
+                <Text className="form-label">交易密码</Text>
+                <Input placeholder="请输入交易密码" password type="number" maxlength={6} onInput={(e) => { handleInput(e, "new_password") }}></Input>
+            </View>
+            <View className="form-item">
+                <Text className="form-label">重复密码</Text>
+                <Input placeholder="请再次输入交易密码" password type="number" maxlength={6} onInput={(e) => { handleInput(e, "confirm_password") }}></Input>
+            </View>
+            {
+                handleType === "set" && (
+                    <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>
+                )
+            }
+            <Text className="tips">* 密码由6位数字组成</Text>
+            <Button className="btn bottom-btn" onClick={handleConfirm}>完成</Button>
+        </View>
+    );
+};
+
+export default SetTransactionPassword;