下载记录、钱包账单添加加载更多；监听键盘高度优化样式

2025-10-01 08:10:01 +08:00
parent a06487ecdc
commit 1b05bd1da7
10 changed files with 140 additions and 63 deletions
--- a/src/components/EditModal/EditModal.scss
+++ b/src/components/EditModal/EditModal.scss
@@ -23,6 +23,7 @@
  from {
    transform: translateY(100%);
  }
+
  to {
    transform: translateY(0);
  }
@@ -82,7 +83,7 @@

 // 内容区域
 .modal_content {
-  padding:  16px 20px;
+  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
@@ -90,7 +91,7 @@

  .input_container {
    display: flex;
-    flex-direction: column;
+    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.06);
@@ -102,7 +103,6 @@
    // 名字输入时的容器样式
    &:has(.nickname_input) {
      min-height: 40px;
-      padding: 10px 16px;
    }

    .text_input {
@@ -110,14 +110,12 @@
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 14px;
-      line-height: 1.71em;
      color: #000000;
      border: none;
      background: transparent;
      outline: none;
      resize: none;
-     
-      min-height: 120px;
+      height: 100px;

      &::placeholder {
        color: rgba(60, 60, 67, 0.3);
@@ -125,8 +123,6 @@

      // 名字输入特殊样式
      &.nickname_input {
-        min-height: 80px;
-        min-height: 20px;
        height: 20px;
        line-height: 20px;
        padding: 0;
@@ -163,7 +159,7 @@

 // 底部按钮
 .modal_footer {
-  padding: 8px 10px;
+  padding: 8px 10px 20px;
  display: flex;
  gap: 8px;

--- a/src/components/EditModal/index.tsx
+++ b/src/components/EditModal/index.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { View, Text, Textarea, Input, Picker } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 import './EditModal.scss';
+import { useKeyboardHeight } from '@/store/keyboardStore'

 interface EditModalProps {
  visible: boolean;
@@ -29,6 +30,22 @@ const EditModal: React.FC<EditModalProps> = ({
  const [value, setValue] = useState(initialValue);
  const [isValid, setIsValid] = useState(true);

+  // 使用全局键盘状态
+  const { keyboardHeight, isKeyboardVisible, addListener, initializeKeyboardListener } = useKeyboardHeight()
+  // 使用全局键盘状态监听
+  useEffect(() => {
+    // 初始化全局键盘监听器
+    initializeKeyboardListener()
+
+    // 添加本地监听器
+    const removeListener = addListener((height, visible) => {
+      console.log('AiImportPopup 收到键盘变化:', height, visible)
+    })
+
+    return () => {
+      removeListener()
+    }
+  }, [initializeKeyboardListener, addListener])
  useEffect(() => {
    if (visible) {
      setValue(initialValue);
@@ -68,7 +85,7 @@ const EditModal: React.FC<EditModalProps> = ({

  return (
    <View className="edit_modal_overlay">
-      <View className="edit_modal_container">
+      <View className="edit_modal_container" style={{ paddingBottom: isKeyboardVisible ? (type === 'nickname' ? `${keyboardHeight + 60}px` : `${keyboardHeight }px`) : undefined }}>
        {/* 标题栏 */}
        <View className="modal_header">
          <Text className="modal_title">{title}</Text>
@@ -85,33 +102,34 @@ const EditModal: React.FC<EditModalProps> = ({
          {/* 文本输入区域 */}
          <View className="input_container">

-          {type === 'nickname' ? (
-            <Input
-              className="text_input nickname_input"
-              value={value}
-              type="nickname"
-              placeholder={placeholder}
-              maxlength={maxLength}
-              onInput={handle_input_change}
-              adjustPosition={true}
-              confirmType="done"
-              autoFocus={true}
-            />
-          ) : (
-            <>
-              <Textarea
-                className="text_input"
+            {type === 'nickname' ? (
+              <Input
+                className="text_input nickname_input"
                value={value}
+                type="nickname"
                placeholder={placeholder}
                maxlength={maxLength}
                onInput={handle_input_change}
+                adjustPosition={false}
+                confirmType="done"
                autoFocus={true}
              />
-              <View className="char_count">
-                <Text className="count_text">{value.length}/{maxLength}</Text>
-              </View>
-            </>
-          )}
+            ) : (
+              <>
+                <Textarea
+                  className="text_input"
+                  value={value}
+                  placeholder={placeholder}
+                  maxlength={maxLength}
+                  onInput={handle_input_change}
+                  autoFocus={true}
+                  adjustPosition={false}
+                />
+                <View className="char_count">
+                  <Text className="count_text">{value.length}/{maxLength}</Text>
+                </View>
+              </>
+            )}
          </View>

          {/* 验证提示 */}
--- a/src/components/UserInfo/index.tsx
+++ b/src/components/UserInfo/index.tsx
@@ -315,7 +315,7 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
      {/* 标签和简介 */}
      <View className="tags_bio_section">
        <View className="tags_container">
-          {user_info.gender ? (
+          {user_info.gender && user_info.gender !== "2" ? (
            <View className="tag_item">
              {user_info.gender === "0" && (
                <Image
@@ -330,7 +330,7 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
                />
              )}
            </View>
-          ) : is_current_user ? (
+          ) : is_current_user && user_info.gender !== "2" ? (
            <View className="button_edit" onClick={() => { handle_open_edit_modal('gender') }}>
              <Text>选择性别</Text>
            </View>
--- a/src/user_pages/downloadBillRecords/index.scss
+++ b/src/user_pages/downloadBillRecords/index.scss
@@ -10,6 +10,8 @@


    .records-container {
+        padding-bottom: 50px;
+
        .record-item {
            padding: 16px 0;

@@ -58,7 +60,10 @@
        font-size: 12px;
        text-align: center;
        position: fixed;
-        bottom: 40px;
-        width: calc(100% - 40px);
+        bottom: 0;
+        left: 0;
+        width: 100vw;
+        background-color: #FFFFFF;
+        padding: 20px 0;
    }
 }
--- a/src/user_pages/downloadBillRecords/index.tsx
+++ b/src/user_pages/downloadBillRecords/index.tsx
@@ -3,7 +3,7 @@ import { View, Text } from "@tarojs/components";

 import "./index.scss";
 import httpService from "@/services/httpService";
-import Taro from "@tarojs/taro";
+import Taro, { useReachBottom } from "@tarojs/taro";

 interface BillRecord {
  id: number;
@@ -28,14 +28,22 @@ const DownloadBillRecords: React.FC = () => {
    limit: 20,
  });

+  const [totalPages, setTotalPages] = useState(1);
+
+  useReachBottom(() => {
+    if (params.page < totalPages) {
+      setParams({ ...params, page: params.page + 1 });
+    }
+  });
  useEffect(() => {
    fetchRecords();
-  }, []);
+  }, [params]);

  const fetchRecords = async () => {
    try {
-      const response = await httpService.post<{ rows: BillRecord[] }>('/wallet/download_history', params);
-      setRecords(response.data.rows);
+      const response = await httpService.post<{ rows: BillRecord[], totalPages: number }>('/wallet/download_history', params);
+      setRecords([...records, ...response.data.rows]);
+      setTotalPages(response.data.totalPages);
    } catch (error) {
      console.log(error);
      Taro.showToast({
--- a/src/user_pages/queryTransactions/index.tsx
+++ b/src/user_pages/queryTransactions/index.tsx
@@ -25,7 +25,7 @@ interface History {
 interface TransactionLoadParams {
  page: number;
  limit: number;
-  keyword?: string;
+  keyword: string;
 }

 const QueryTransactions = () => {
@@ -34,18 +34,19 @@ const QueryTransactions = () => {
  const [transactions, setTransactions] = useState<Transaction[]>([]);
  const [searchHistory, setSearchHistory] = useState<History[]>([]);
  const ref = useRef<any>(null);
+  const [keyword, setKeyword] = useState("");
  const [load_transactions_params, set_load_transactions_params] =
    useState<TransactionLoadParams>({
      page: 1,
      limit: 20,
      keyword: "",
    });
-
+  const [totalpages, setTotalpages] = useState(1);
  useEffect(() => {
    getSearchHistory();
-    return () => {
-      handleClear();
-    };
+    // return () => {
+    //   handleClear();
+    // };
  }, []);

  useEffect(() => {
@@ -55,6 +56,7 @@ const QueryTransactions = () => {
  }, [ref.current]);

  useReachBottom(() => {
+    if (load_transactions_params.page >= totalpages) return;
    set_load_transactions_params((prev) => {
      return {
        ...prev,
@@ -93,9 +95,7 @@ const QueryTransactions = () => {
   * @param value
   */
  const handleChange = (value: string) => {
-    set_load_transactions_params((prev) => {
-      return { ...prev, keyword: value };
-    });
+    setKeyword(value);
  };

  /**
@@ -104,7 +104,7 @@ const QueryTransactions = () => {
  const handleClear = () => {
    setTransactions([]);
    set_load_transactions_params((prev) => {
-      return { ...prev, keyword: "" };
+      return { ...prev, page: 1, keyword: "" };
    });
  };

@@ -114,7 +114,7 @@ const QueryTransactions = () => {
   */
  const handleHistoryClick = (item: { id: number; keyword: string }) => {
    set_load_transactions_params((prev) => {
-      return { ...prev, keyword: item?.keyword };
+      return { ...prev, page: 1, keyword: item?.keyword };
    });
  };

@@ -129,16 +129,20 @@ const QueryTransactions = () => {
  /**
   * @description 点击搜索
   */
-  const handleSearch = async (val?: string) => {
+  const handleSearch = async () => {
    // set_loading_transactions(true);
    try {
      const response = await httpService.post("/wallet/transactions", {
-        ...load_transactions_params,
-        keyword: val,
+        ...load_transactions_params
      });
-
-      if (response && response.data && response.data.list) {
+      if (load_transactions_params.keyword !== "") {
+        getSearchHistory();
+      }
+      if (response && response.data && response.data.list.length) {
        setTransactions([...transactions, ...response.data.list]);
+        setTotalpages(response.data.totalPages);
+      } else if (load_transactions_params.page === 1) {
+        setTransactions([]);
      }
    } catch (error) {
      setTransactions([]);
@@ -237,8 +241,8 @@ const QueryTransactions = () => {
            <Image className="searchIcon" src={img.ICON_LIST_SEARCH_SEARCH} />
            <Input
              placeholder="查找"
-              value={load_transactions_params.keyword}
-              defaultValue={load_transactions_params.keyword}
+              value={keyword}
+              defaultValue={keyword}
              onChange={handleChange}
              onClear={handleClear}
              autoFocus
@@ -256,7 +260,11 @@ const QueryTransactions = () => {
              <View className="searchLine" />
              <Text
                className="searchText"
-                onClick={() => handleSearch(load_transactions_params.keyword)}
+                onClick={() => {
+                  set_load_transactions_params((prev) => {
+                    return { ...prev, page: 1, keyword };
+                  });
+                }}
              >
                搜索
              </Text>
@@ -303,7 +311,7 @@ const QueryTransactions = () => {
            <View className="loading_state">
              <Text className="loading_text">加载中...</Text>
            </View>
-          ) : transactions.length > 0 ? (
+          ) : transactions.length > 0 && load_transactions_params.keyword !== "" ? (
            transactions.map((transaction) => {
              const timeInfo = format_time(transaction.create_time);
              return (
--- a/src/user_pages/setTransactionPassword/index.tsx
+++ b/src/user_pages/setTransactionPassword/index.tsx
@@ -4,6 +4,7 @@ import { View, Text, Input, Button } from "@tarojs/components";

 import "./index.scss";
 import httpService from "@/services/httpService";
+import { useKeyboardHeight } from '@/store/keyboardStore'

 interface FormFields {
  old_password?: string;
@@ -13,6 +14,22 @@ interface FormFields {
 }

 const SetTransactionPassword: React.FC = () => {
+  // 使用全局键盘状态
+  const { keyboardHeight, isKeyboardVisible, addListener, initializeKeyboardListener } = useKeyboardHeight()
+  // 使用全局键盘状态监听
+  useEffect(() => {
+    // 初始化全局键盘监听器
+    initializeKeyboardListener()
+
+    // 添加本地监听器
+    const removeListener = addListener((height, visible) => {
+      console.log('AiImportPopup 收到键盘变化:', height, visible)
+    })
+
+    return () => {
+      removeListener()
+    }
+  }, [initializeKeyboardListener, addListener])
  const [handleType, setHandleType] = useState("set");
  const router = useRouter();
  const { type, phone, sms_code } = router.params;
@@ -129,7 +146,7 @@ const SetTransactionPassword: React.FC = () => {
        </View>
      )}
      <Text className="tips">* 密码由6位数字组成</Text>
-      <Button className="btn bottom-btn" onClick={handleConfirm}>
+      <Button className="btn bottom-btn" onClick={handleConfirm} style={{ bottom: isKeyboardVisible ? `${keyboardHeight + 20}px` : undefined }}>
        完成
      </Button>
    </View>
--- a/src/user_pages/validPhone/index.tsx
+++ b/src/user_pages/validPhone/index.tsx
@@ -5,6 +5,7 @@ import { View, Text, Input, Button } from "@tarojs/components";
 import "./index.scss";
 import httpService from "@/services/httpService";
 import { useUserInfo } from "@/store/userStore";
+import { useKeyboardHeight } from '@/store/keyboardStore'

 interface FormFields {
  phone?: string;
@@ -12,6 +13,22 @@ interface FormFields {
 }

 const ValidPhone: React.FC = () => {
+  // 使用全局键盘状态
+  const { keyboardHeight, isKeyboardVisible, addListener, initializeKeyboardListener } = useKeyboardHeight()
+  // 使用全局键盘状态监听
+  useEffect(() => {
+    // 初始化全局键盘监听器
+    initializeKeyboardListener()
+
+    // 添加本地监听器
+    const removeListener = addListener((height, visible) => {
+      console.log('AiImportPopup 收到键盘变化:', height, visible)
+    })
+
+    return () => {
+      removeListener()
+    }
+  }, [initializeKeyboardListener, addListener])
  const userInfo = useUserInfo();
  const [formData, setFormData] = useState<FormFields>({
    phone: userInfo.phone || "",
@@ -69,7 +86,7 @@ const ValidPhone: React.FC = () => {
        <Input placeholder="请输入验证码" type="number" onInput={(e) => { handleInput(e, "sms_code") }}></Input>
        <Button className="btn" onClick={getSMSCode}>获取验证码</Button>
      </View>
-      <Button className="btn bottom-btn" disabled={!formData.sms_code} onClick={handleConfirm}>提交</Button>
+      <Button className="btn bottom-btn" disabled={!formData.sms_code} onClick={handleConfirm} style={{ bottom: isKeyboardVisible ? `${keyboardHeight + 20}px` : undefined }}>提交</Button>
    </View>
  );
 };
--- a/src/user_pages/wallet/index.tsx
+++ b/src/user_pages/wallet/index.tsx
@@ -98,6 +98,7 @@ const transaction_type_options: Option<TransactionSubType>[] = [

 const WalletPage: React.FC = () => {
  useReachBottom(() => {
+    if (load_transactions_params.page >= totalPages) return;
    // 加载更多方法
    set_load_transactions_params((prev) => {
      return {
@@ -144,6 +145,8 @@ const WalletPage: React.FC = () => {
      date: `${year}-${month}`,
    });

+  const [totalPages, setTotalPages] = useState(1);
+
  useEffect(() => {
    load_transactions();
  }, [load_transactions_params]);
@@ -229,6 +232,7 @@ const WalletPage: React.FC = () => {

      if (response && response.data && response.data.list) {
        set_transactions([...transactions, ...response.data.list]);
+        setTotalPages(response.data.totalPages);
        console.log("设置交易记录:", response.data.list);
      } else {
        console.log("响应数据格式异常:", response);
--- a/src/utils/genderUtils.ts
+++ b/src/utils/genderUtils.ts
@@ -16,6 +16,8 @@ export const convert_db_gender_to_display = (db_gender: string): string => {
      return '男';
    case '1':
      return '女';
+    case '2':
+      return '保密';
    default:
      return '未知';
  }
@@ -32,6 +34,8 @@ export const convert_display_gender_to_db = (display_gender: string): string =>
      return '0';
    case '女':
      return '1';
+    case '保密':
+      return '2';
    default:
      return '0'; // 默认返回男性
  }