自定义title

src/user_pages/validPhone/index.tsx

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from "react";
-import Taro from '@tarojs/taro';
-import { View, Text, Input, Button } from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import { View, Text, Input, Button, Image } from "@tarojs/components";
 
 import "./index.scss";
 import httpService from "@/services/httpService";
 import { useUserInfo } from "@/store/userStore";
-import { useKeyboardHeight } from '@/store/keyboardStore'
+import { useKeyboardHeight } from "@/store/keyboardStore";
+import img from "@/config/images";
 
 interface FormFields {
   phone?: string;
@@ -13,24 +14,33 @@ interface FormFields {
 }
 
 const ValidPhone: 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("获取验证码");
   // 使用全局键盘状态监听
   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 userInfo = useUserInfo();
   const [formData, setFormData] = useState<FormFields>({
     phone: userInfo.phone || "",
@@ -44,14 +54,20 @@ const ValidPhone: React.FC = () => {
   const handleConfirm = async () => {
     const isValid = await validSMSCode();
     if (isValid) {
-      Taro.navigateTo({ url: `/user_pages/setTransactionPassword/index?type=reset&phone=${formData.phone}&sms_code=${formData.sms_code}` });
+      Taro.navigateTo({
+        url: `/user_pages/setTransactionPassword/index?type=reset&phone=${formData.phone}&sms_code=${formData.sms_code}`,
+      });
     }
   };
 
   const validSMSCode = async () => {
     const { phone, sms_code } = formData;
     try {
-      const res = await httpService.post("/wallet/verify_sms_code", { phone, sms_code, type: "reset_password" });
+      const res = await httpService.post("/wallet/verify_sms_code", {
+        phone,
+        sms_code,
+        type: "reset_password",
+      });
       const { verified } = res.data;
       if (verified) {
         return true;
@@ -78,7 +94,7 @@ const ValidPhone: React.FC = () => {
           time--;
           setSmsCodeText(`${time}秒后重发`);
         } else {
-          setSmsCodeText('获取验证码');
+          setSmsCodeText("获取验证码");
           setSmsCodeSended(false);
           clearInterval(timer);
         }
@@ -92,16 +108,56 @@ const ValidPhone: React.FC = () => {
 
   return (
     <View className="set-transaction-password-page">
+      {/* 导航栏 */}
+      <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 defaultValue={formData.phone} 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 ${smsCodeSended ? 'disabled' : ''}`} disabled={smsCodeSended} onClick={getSMSCode}>{smsCodeText}</Button>
+        <Input
+          placeholder="请输入验证码"
+          type="number"
+          onInput={(e) => {
+            handleInput(e, "sms_code");
+          }}
+        ></Input>
+        <Button
+          className={`btn ${smsCodeSended ? "disabled" : ""}`}
+          disabled={smsCodeSended}
+          onClick={getSMSCode}
+        >
+          {smsCodeText}
+        </Button>
       </View>
-      <Button className={`btn bottom-btn ${formData.sms_code === "" ? 'disabled' : ''}`} disabled={formData.sms_code === ""} onClick={handleConfirm} style={{ bottom: isKeyboardVisible ? `${keyboardHeight + 20}px` : undefined }}>提交</Button>
+      <Button
+        className={`btn bottom-btn ${
+          formData.sms_code === "" ? "disabled" : ""
+        }`}
+        disabled={formData.sms_code === ""}
+        onClick={handleConfirm}
+        style={{
+          bottom: isKeyboardVisible ? `${keyboardHeight + 20}px` : undefined,
+        }}
+      >
+        提交
+      </Button>
     </View>
   );
 };