自定义title

src/user_pages/setTransactionPassword/index.tsx

@@ -1,40 +1,50 @@
 import React, { useState, useEffect } from "react";
 import Taro, { useRouter } from "@tarojs/taro";
-import { View, Text, Input, Button } from "@tarojs/components";
+import { View, Text, Input, Button, Image } from "@tarojs/components";
 
 import "./index.scss";
 import httpService from "@/services/httpService";
-import { useKeyboardHeight } from '@/store/keyboardStore'
+import { useKeyboardHeight } from "@/store/keyboardStore";
+import img from "@/config/images";
 
 interface FormFields {
-  old_password?: string;
   new_password: string;
   confirm_password: string;
   sms_code?: string;
 }
 
 const SetTransactionPassword: React.FC = () => {
+  // 获取当前页面的配置
+  const currentPage = Taro.getCurrentInstance();
+  const pageConfig = currentPage.page?.config;
+  const pageTitle = pageConfig?.navigationBarTitleText;
   // 使用全局键盘状态
-  const { keyboardHeight, isKeyboardVisible, addListener, initializeKeyboardListener } = useKeyboardHeight()
+  const {
+    keyboardHeight,
+    isKeyboardVisible,
+    addListener,
+    initializeKeyboardListener,
+  } = useKeyboardHeight();
   const [smsCodeSended, setSmsCodeSended] = useState(false);
-  const [smsCodeText, setSmsCodeText] = useState('获取验证码');
+  const [smsCodeText, setSmsCodeText] = useState("获取验证码");
+  const [valid, setValid] = useState(false);
   // 使用全局键盘状态监听
   useEffect(() => {
     // 初始化全局键盘监听器
-    initializeKeyboardListener()
+    initializeKeyboardListener();
 
     // 添加本地监听器
     const removeListener = addListener((height, visible) => {
-      console.log('AiImportPopup 收到键盘变化:', height, visible)
-    })
+      console.log("AiImportPopup 收到键盘变化:", height, visible);
+    });
 
     return () => {
-      removeListener()
-    }
-  }, [initializeKeyboardListener, addListener])
+      removeListener();
+    };
+  }, [initializeKeyboardListener, addListener]);
   const [handleType, setHandleType] = useState("set");
   const router = useRouter();
-  const { type, phone, sms_code } = router.params;
+  const { type } = router.params;
 
   useEffect(() => {
     if (type) {
@@ -43,12 +53,22 @@ const SetTransactionPassword: React.FC = () => {
   }, [type]);
 
   const [formData, setFormData] = useState<FormFields>({
-    old_password: "",
     new_password: "",
     confirm_password: "",
     sms_code: "",
   });
 
+  useEffect(() => {
+    const { new_password, confirm_password, sms_code } = formData;
+    if (handleType === "set") {
+      setValid(
+        !sms_code && new_password.length === 6 && confirm_password.length === 6
+      );
+    } else {
+      setValid(new_password.length === 6 && confirm_password.length === 6);
+    }
+  }, [formData]);
+
   const handleInput = (e: any, field: string) => {
     setFormData({ ...formData, [field]: e.detail.value });
   };
@@ -71,8 +91,8 @@ const SetTransactionPassword: React.FC = () => {
         icon: "success",
       });
       Taro.redirectTo({
-        url: "/user_pages/wallet/index"
-      })
+        url: "/user_pages/wallet/index",
+      });
     } catch (error) {
       Taro.showToast({
         title: "设置交易密码失败",
@@ -98,7 +118,7 @@ const SetTransactionPassword: React.FC = () => {
           time--;
           setSmsCodeText(`${time}秒后重发`);
         } else {
-          setSmsCodeText('获取验证码');
+          setSmsCodeText("获取验证码");
           setSmsCodeSended(false);
           clearInterval(timer);
         }
@@ -115,14 +135,23 @@ const SetTransactionPassword: React.FC = () => {
 
   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="custom-navbar">
+        <View className="detail-navigator">
+          <View
+            className="detail-navigator-back"
+            onClick={() => {
+              Taro.navigateBack();
+            }}
+          >
+            <Image
+              className="detail-navigator-back-icon"
+              src={img.ICON_NAVIGATOR_BACK}
+            />
+            <Text>{pageTitle}</Text>
+          </View>
+        </View>
+      </View>
       <View className="form-item">
         <Text className="form-label">交易密码</Text>
         <Input
@@ -157,11 +186,23 @@ const SetTransactionPassword: React.FC = () => {
               handleInput(e, "sms_code");
             }}
           ></Input>
-          <Button className={`btn ${smsCodeSended ? 'disabled' : ''}`} disabled={smsCodeSended} onClick={getSMSCode}>{smsCodeText}</Button>
+          <Button
+            className={`btn ${smsCodeSended ? "disabled" : ""}`}
+            disabled={smsCodeSended}
+            onClick={getSMSCode}
+          >
+            {smsCodeText}
+          </Button>
         </View>
       )}
       <Text className="tips">* 密码由6位数字组成</Text>
-      <Button className="btn bottom-btn" onClick={handleConfirm} style={{ bottom: isKeyboardVisible ? `${keyboardHeight + 20}px` : undefined }}>
+      <Button
+        className={`btn bottom-btn ${!valid ? "disabled" : ""}`}
+        onClick={handleConfirm}
+        style={{
+          bottom: isKeyboardVisible ? `${keyboardHeight + 20}px` : undefined,
+        }}
+      >
         完成
       </Button>
     </View>