自定义标题

2025-10-17 11:53:29 +08:00
parent ac2c9571e7
commit 8f688378e1
5 changed files with 546 additions and 422 deletions
--- a/src/user_pages/myself/index.tsx
+++ b/src/user_pages/myself/index.tsx
@@ -174,7 +174,7 @@ const MyselfPage: React.FC = () => {
    Taro.navigateTo({
      url: "/publish_pages/publishBall/index",
    });
-  }
+  };

  // 处理球局订单
  const handle_game_orders = () => {
@@ -243,7 +243,8 @@ const MyselfPage: React.FC = () => {
              <Text className="tab_text">我主办的</Text>
            </View>
            <View
-              className={`tab_item ${active_tab === "participated" ? "active" : ""
+              className={`tab_item ${
+                active_tab === "participated" ? "active" : ""
              }`}
              onClick={() => setActiveTab("participated")}
            >
--- a/src/user_pages/setTransactionPassword/index.tsx
+++ b/src/user_pages/setTransactionPassword/index.tsx
@@ -74,6 +74,7 @@ const SetTransactionPassword: React.FC = () => {
  };

  const handleConfirm = async () => {
+    if (!valid) return;
    const { new_password, confirm_password } = formData;
    if (new_password !== confirm_password) {
      Taro.showToast({
--- a/src/user_pages/withdrawal/index.config.ts
+++ b/src/user_pages/withdrawal/index.config.ts
@@ -1,3 +1,9 @@
 export default definePageConfig({
-  navigationBarTitleText: '钱包',
-})
+  navigationBarTitleText: "钱包",
+  navigationBarBackgroundColor: "#ffffff",
+  navigationBarTextStyle: "black",
+  backgroundColor: "#f5f5f5",
+  enablePullDownRefresh: false,
+  disableScroll: false,
+  navigationStyle: "custom",
+});
--- a/src/user_pages/withdrawal/index.scss
+++ b/src/user_pages/withdrawal/index.scss
@@ -3,9 +3,52 @@
  font-family: PingFang SC;
  font-weight: 400;
  font-style: Regular;
-    color: #3C3C4399;
+  color: #3c3c4399;
  font-size: 12px;
  overflow: hidden;
+  .custom-navbar {
+    height: 56px;
+    /* 通常与原生导航栏高度一致 */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // background-color: #fff;
+    color: #000;
+    padding-top: 44px;
+    /* 适配状态栏 */
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background-color: #f5f5f5;
+  }
+
+  .detail-navigator {
+    height: 30px;
+    width: fit-content;
+    border-radius: 15px;
+    position: absolute;
+    left: 12px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+
+    .detail-navigator-back {
+      height: 32px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-family: PingFang SC;
+      font-weight: 600;
+      font-style: Semibold;
+      font-size: 20px;
+      letter-spacing: 0.38px;
+
+      & > .detail-navigator-back-icon {
+        width: 32px;
+        height: 32px;
+      }
+    }
+  }

  .withdrawal-container {
    margin: 20px 5px 0;
@@ -15,8 +58,8 @@
    padding-bottom: 24px;
    padding-left: 20px;
    gap: 16px;
-        border: 0.5px solid #EBEBEB;
-        box-shadow: 0px 4px 36px 0px #0000000D;
+    border: 0.5px solid #ebebeb;
+    box-shadow: 0px 4px 36px 0px #0000000d;

    .title-text {
      color: #000;
@@ -29,7 +72,7 @@
      align-items: flex-end;
      overflow: hidden;
      gap: 8px;
-            border-bottom: 0.5px solid var(--Fills-Tertiary, #7878801F);
+      border-bottom: 0.5px solid var(--Fills-Tertiary, #7878801f);
      margin: 12px 0;
      padding-bottom: 12px;

@@ -74,7 +117,7 @@
    }

    .tips-text {
-            color: #F3334A;
+      color: #f3334a;
    }

    .btn-container {
@@ -82,7 +125,7 @@
      justify-content: space-between;

      .btn {
-                color: #007AFF;
+        color: #007aff;
      }
    }
  }
@@ -129,7 +172,7 @@
        width: 32px;
        height: 32px;
        border-radius: 4px;
-                background-color: #7878801F;
+        background-color: #7878801f;
        display: flex;
        justify-content: center;
        align-items: center;
--- a/src/user_pages/withdrawal/index.tsx
+++ b/src/user_pages/withdrawal/index.tsx
@@ -1,11 +1,12 @@
 import React, { useState, useEffect, useRef } from "react";
-import { View, Text, Input, Button } from "@tarojs/components";
+import { View, Text, Input, Button, Image } from "@tarojs/components";
 import Taro, { useDidShow } from "@tarojs/taro";

 import httpService from "@/services/httpService";
 import "./index.scss";
 import { CommonPopup } from "@/components";
-import { useKeyboardHeight } from '@/store/keyboardStore'
+import { useKeyboardHeight } from "@/store/keyboardStore";
+import img from "@/config/images";

 interface WalletInfo {
  balance: string;
@@ -16,23 +17,32 @@ interface WalletInfo {
 }

 const Withdrawal: React.FC = () => {
+  // 获取当前页面的配置
+  const currentPage = Taro.getCurrentInstance();
+  const pageConfig = currentPage.page?.config;
+  const pageTitle = pageConfig?.navigationBarTitleText;
  const inputRef = useRef(null);
  // 使用全局键盘状态
-    const { keyboardHeight, isKeyboardVisible, addListener, initializeKeyboardListener } = useKeyboardHeight()
+  const {
+    keyboardHeight,
+    isKeyboardVisible,
+    addListener,
+    initializeKeyboardListener,
+  } = useKeyboardHeight();
  // 使用全局键盘状态监听
  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 [showTips, setShowTips] = useState(false);
  const [tipsText, setTipsText] = useState<string>("");
  const [inputValue, setInputValue] = useState<string>("0.00");
@@ -132,7 +142,9 @@ const Withdrawal: React.FC = () => {
    try {
      const response = await httpService.post("/wallet/error_codes");
      if (response.code === 0) {
-                const { withdraw_errors: { WEIXIN_ERRORS } } = response.data;
+        const {
+          withdraw_errors: { WEIXIN_ERRORS },
+        } = response.data;
        const mapErrorCodes = {};
        for (const key in WEIXIN_ERRORS) {
          const { code } = WEIXIN_ERRORS[key];
@@ -143,18 +155,22 @@ const Withdrawal: React.FC = () => {
    } catch (error: any) {
      console.error("获取提现错误码失败:", error);
    }
-    }
+  };
  const handleWithdraw = async () => {
    set_show_withdraw_popup(true);
  };
  const submit_withdraw = async (payment_password: string) => {
    try {
      // 先调用后端接口获取提现参数
-            const response = await httpService.post("/wallet/withdraw", {
+      const response = await httpService.post(
+        "/wallet/withdraw",
+        {
          amount: parseFloat(inputValue),
          transfer_remark: "用户申请提现",
          payment_password,
-            }, { showToast: false });
+        },
+        { showToast: false }
+      );
      const { data } = response;
      // 根据后端返回的数据结构解析参数
      const { mch_id, app_id, package_info, open_id } = data;
@@ -201,7 +217,7 @@ const Withdrawal: React.FC = () => {
            set_show_withdraw_popup(true);
          } else if (res.cancel) {
            Taro.navigateTo({
-                            url: "/user_pages/validPhone/index"
+              url: "/user_pages/validPhone/index",
            });
          }
        });
@@ -223,10 +239,11 @@ const Withdrawal: React.FC = () => {
        });
      }
    }
-    }
+  };
  const handlePasswordInput = (e: any) => {
    const value = e.detail.value;
-        const [one = "", two = "", three = "", four = "", five = "", six = ""] = value.split("");
+    const [one = "", two = "", three = "", four = "", five = "", six = ""] =
+      value.split("");
    setPassword([one, two, three, four, five, six]);
    if (value.length === 6) {
      const timer = setTimeout(() => {
@@ -234,50 +251,85 @@ const Withdrawal: React.FC = () => {
        clearTimeout(timer);
      }, 100);
    }
-    }
+  };
  const handlePopupClick = (e) => {
-        e.preventDefault()
-        e.stopPropagation()
-        e.nativeEvent.stopImmediatePropagation()
+    e.preventDefault();
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
    inputRef.current!.focus();
  };
  return (
    <View className="withdrawal-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="withdrawal-container">
        <Text className="title-text">提现金额</Text>
        <View className="input-container">
          <Text className="symbol">¥</Text>
-                    <Input type="digit" placeholder="0.00" cursorColor="#000" value={inputValue} onInput={handleInput} />
-                    {
-                        !showTips && (Number(inputValue) !== 0) && (
-                            <Button className="btn" onClick={handleWithdraw}>提现</Button>
-                        )
-                    }
+          <Input
+            type="digit"
+            placeholder="0.00"
+            cursorColor="#000"
+            value={inputValue}
+            onInput={handleInput}
+          />
+          {!showTips && Number(inputValue) !== 0 && (
+            <Button className="btn" onClick={handleWithdraw}>
+              提现
+            </Button>
+          )}
        </View>
        <View className="btn-container">
          <View>
            <Text>{`我的余额：¥${walletInfo.balance}`}</Text>
            {/* <Text>（可提现余额：¥5000.00）</Text> */}
          </View>
-                    <Text className="btn" onClick={withdrawAll}>全部提现</Text>
+          <Text className="btn" onClick={withdrawAll}>
+            全部提现
+          </Text>
        </View>
-                {
-                    showTips && (
-                        <View className="tips-text">{tipsText}</View>
-                    )
-                }
+        {showTips && <View className="tips-text">{tipsText}</View>}
      </View>
      <View className="tips-container">
        <View className="title-text">提现须知</View>
        <View className="tips-text">
-                    <Text>1. 本钱包余额由平台统一管理，提现服务由 微信支付（财付通） 提供。</Text>
-                    <Text>2. 提现仅支持提现至本人实名认证的微信支付账户，请确保账户信息真实有效。</Text>
-                    <Text>3. 每次提现金额不得超过钱包余额，且需满足提现金额最低限制（如有）。</Text>
-                    <Text>4. 正常情况下提现 实时到账，如遇网络、系统或银行通道原因，可能会有延迟。</Text>
-                    <Text>5. 提现过程中平台不收取任何手续费，如微信支付有特殊规则，按其实际规定执行。</Text>
-                    <Text>6. 若发现异常交易、涉嫌违规或存在风险，平台有权暂停或拒绝提现操作。</Text>
+          <Text>
+            1. 本钱包余额由平台统一管理，提现服务由 微信支付（财付通） 提供。
+          </Text>
+          <Text>
+            2.
+            提现仅支持提现至本人实名认证的微信支付账户，请确保账户信息真实有效。
+          </Text>
+          <Text>
+            3. 每次提现金额不得超过钱包余额，且需满足提现金额最低限制（如有）。
+          </Text>
+          <Text>
+            4. 正常情况下提现
+            实时到账，如遇网络、系统或银行通道原因，可能会有延迟。
+          </Text>
+          <Text>
+            5.
+            提现过程中平台不收取任何手续费，如微信支付有特殊规则，按其实际规定执行。
+          </Text>
+          <Text>
+            6. 若发现异常交易、涉嫌违规或存在风险，平台有权暂停或拒绝提现操作。
+          </Text>
          <Text>7. 实际到账结果以 微信支付通知 为准。</Text>
-
        </View>
      </View>
      <View className="tips-container">
@@ -285,7 +337,9 @@ const Withdrawal: React.FC = () => {
        <View className="tips-text">
          <Text>1. 本平台不向用户收取提现手续费，提现服务免费。</Text>
          <Text>2. 若因银行或微信支付方收取相关费用，与本平台无关。</Text>
-                    <Text>3. 因网络、系统或第三方原因造成的延迟、失败，本平台不承担责任。</Text>
+          <Text>
+            3. 因网络、系统或第三方原因造成的延迟、失败，本平台不承担责任。
+          </Text>
          <Text>4. 用户在使用提现服务前，应充分了解并同意上述规则。</Text>
        </View>
      </View>
@@ -298,20 +352,39 @@ const Withdrawal: React.FC = () => {
        title="提现"
        className="withdraw_popup"
        hideFooter={true}
-                style={{ bottom: isKeyboardVisible ? `${keyboardHeight}px` : undefined }}
+        style={{
+          bottom: isKeyboardVisible ? `${keyboardHeight}px` : undefined,
+        }}
+      >
+        <View
+          className="popup_content"
+          onTouchForceChange={handlePopupClick}
+          onTouchStart={handlePopupClick}
+          onTouchMove={handlePopupClick}
+          onTouchEnd={handlePopupClick}
        >
-                <View className="popup_content" onTouchForceChange={handlePopupClick} onTouchStart={handlePopupClick} onTouchMove={handlePopupClick} onTouchEnd={handlePopupClick}>
          <View className="popup_text">{`¥${inputValue}`}</View>
          <View className="password_container">
-                        {
-                            password.map((item, index) => (
+            {password.map((item, index) => (
              <View key={index} className="password_item">
                <Text className="password_text">{item}</Text>
              </View>
-                            ))
-                        }
+            ))}
          </View>
-                    <Input holdKeyboard={true} ref={inputRef} focus={isFocus} type="number" adjustPosition={false} style={{ width: "0", height: "0", opacity: "0" }} value={password.filter(item => item !== "").join("")} maxlength={6} onInput={handlePasswordInput} onBlur={() => { set_show_withdraw_popup(false) }} />
+          <Input
+            holdKeyboard={true}
+            ref={inputRef}
+            focus={isFocus}
+            type="number"
+            adjustPosition={false}
+            style={{ width: "0", height: "0", opacity: "0" }}
+            value={password.filter((item) => item !== "").join("")}
+            maxlength={6}
+            onInput={handlePasswordInput}
+            onBlur={() => {
+              set_show_withdraw_popup(false);
+            }}
+          />
        </View>
      </CommonPopup>
    </View>