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

This commit is contained in:
2025-10-01 08:10:01 +08:00
parent a06487ecdc
commit 1b05bd1da7
10 changed files with 140 additions and 63 deletions

View File

@@ -23,6 +23,7 @@
from { from {
transform: translateY(100%); transform: translateY(100%);
} }
to { to {
transform: translateY(0); transform: translateY(0);
} }
@@ -82,7 +83,7 @@
// 内容区域 // 内容区域
.modal_content { .modal_content {
padding: 16px 20px; padding: 16px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 20px;
@@ -90,7 +91,7 @@
.input_container { .input_container {
display: flex; display: flex;
flex-direction: column; align-items: center;
gap: 8px; gap: 8px;
background: #FFFFFF; background: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.06);
@@ -102,7 +103,6 @@
// 名字输入时的容器样式 // 名字输入时的容器样式
&:has(.nickname_input) { &:has(.nickname_input) {
min-height: 40px; min-height: 40px;
padding: 10px 16px;
} }
.text_input { .text_input {
@@ -110,14 +110,12 @@
font-family: 'PingFang SC'; font-family: 'PingFang SC';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 1.71em;
color: #000000; color: #000000;
border: none; border: none;
background: transparent; background: transparent;
outline: none; outline: none;
resize: none; resize: none;
height: 100px;
min-height: 120px;
&::placeholder { &::placeholder {
color: rgba(60, 60, 67, 0.3); color: rgba(60, 60, 67, 0.3);
@@ -125,8 +123,6 @@
// 名字输入特殊样式 // 名字输入特殊样式
&.nickname_input { &.nickname_input {
min-height: 80px;
min-height: 20px;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
padding: 0; padding: 0;
@@ -163,7 +159,7 @@
// 底部按钮 // 底部按钮
.modal_footer { .modal_footer {
padding: 8px 10px; padding: 8px 10px 20px;
display: flex; display: flex;
gap: 8px; gap: 8px;

View File

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
import { View, Text, Textarea, Input, Picker } from '@tarojs/components'; import { View, Text, Textarea, Input, Picker } from '@tarojs/components';
import Taro from '@tarojs/taro'; import Taro from '@tarojs/taro';
import './EditModal.scss'; import './EditModal.scss';
import { useKeyboardHeight } from '@/store/keyboardStore'
interface EditModalProps { interface EditModalProps {
visible: boolean; visible: boolean;
@@ -29,6 +30,22 @@ const EditModal: React.FC<EditModalProps> = ({
const [value, setValue] = useState(initialValue); const [value, setValue] = useState(initialValue);
const [isValid, setIsValid] = useState(true); 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(() => { useEffect(() => {
if (visible) { if (visible) {
setValue(initialValue); setValue(initialValue);
@@ -68,7 +85,7 @@ const EditModal: React.FC<EditModalProps> = ({
return ( return (
<View className="edit_modal_overlay"> <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"> <View className="modal_header">
<Text className="modal_title">{title}</Text> <Text className="modal_title">{title}</Text>
@@ -85,33 +102,34 @@ const EditModal: React.FC<EditModalProps> = ({
{/* 文本输入区域 */} {/* 文本输入区域 */}
<View className="input_container"> <View className="input_container">
{type === 'nickname' ? ( {type === 'nickname' ? (
<Input <Input
className="text_input 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"
value={value} value={value}
type="nickname"
placeholder={placeholder} placeholder={placeholder}
maxlength={maxLength} maxlength={maxLength}
onInput={handle_input_change} onInput={handle_input_change}
adjustPosition={false}
confirmType="done"
autoFocus={true} 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> </View>
{/* 验证提示 */} {/* 验证提示 */}

View File

@@ -315,7 +315,7 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
{/* 标签和简介 */} {/* 标签和简介 */}
<View className="tags_bio_section"> <View className="tags_bio_section">
<View className="tags_container"> <View className="tags_container">
{user_info.gender ? ( {user_info.gender && user_info.gender !== "2" ? (
<View className="tag_item"> <View className="tag_item">
{user_info.gender === "0" && ( {user_info.gender === "0" && (
<Image <Image
@@ -330,7 +330,7 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
/> />
)} )}
</View> </View>
) : is_current_user ? ( ) : is_current_user && user_info.gender !== "2" ? (
<View className="button_edit" onClick={() => { handle_open_edit_modal('gender') }}> <View className="button_edit" onClick={() => { handle_open_edit_modal('gender') }}>
<Text></Text> <Text></Text>
</View> </View>

View File

@@ -10,6 +10,8 @@
.records-container { .records-container {
padding-bottom: 50px;
.record-item { .record-item {
padding: 16px 0; padding: 16px 0;
@@ -58,7 +60,10 @@
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
position: fixed; position: fixed;
bottom: 40px; bottom: 0;
width: calc(100% - 40px); left: 0;
width: 100vw;
background-color: #FFFFFF;
padding: 20px 0;
} }
} }

View File

@@ -3,7 +3,7 @@ import { View, Text } from "@tarojs/components";
import "./index.scss"; import "./index.scss";
import httpService from "@/services/httpService"; import httpService from "@/services/httpService";
import Taro from "@tarojs/taro"; import Taro, { useReachBottom } from "@tarojs/taro";
interface BillRecord { interface BillRecord {
id: number; id: number;
@@ -28,14 +28,22 @@ const DownloadBillRecords: React.FC = () => {
limit: 20, limit: 20,
}); });
const [totalPages, setTotalPages] = useState(1);
useReachBottom(() => {
if (params.page < totalPages) {
setParams({ ...params, page: params.page + 1 });
}
});
useEffect(() => { useEffect(() => {
fetchRecords(); fetchRecords();
}, []); }, [params]);
const fetchRecords = async () => { const fetchRecords = async () => {
try { try {
const response = await httpService.post<{ rows: BillRecord[] }>('/wallet/download_history', params); const response = await httpService.post<{ rows: BillRecord[], totalPages: number }>('/wallet/download_history', params);
setRecords(response.data.rows); setRecords([...records, ...response.data.rows]);
setTotalPages(response.data.totalPages);
} catch (error) { } catch (error) {
console.log(error); console.log(error);
Taro.showToast({ Taro.showToast({

View File

@@ -25,7 +25,7 @@ interface History {
interface TransactionLoadParams { interface TransactionLoadParams {
page: number; page: number;
limit: number; limit: number;
keyword?: string; keyword: string;
} }
const QueryTransactions = () => { const QueryTransactions = () => {
@@ -34,18 +34,19 @@ const QueryTransactions = () => {
const [transactions, setTransactions] = useState<Transaction[]>([]); const [transactions, setTransactions] = useState<Transaction[]>([]);
const [searchHistory, setSearchHistory] = useState<History[]>([]); const [searchHistory, setSearchHistory] = useState<History[]>([]);
const ref = useRef<any>(null); const ref = useRef<any>(null);
const [keyword, setKeyword] = useState("");
const [load_transactions_params, set_load_transactions_params] = const [load_transactions_params, set_load_transactions_params] =
useState<TransactionLoadParams>({ useState<TransactionLoadParams>({
page: 1, page: 1,
limit: 20, limit: 20,
keyword: "", keyword: "",
}); });
const [totalpages, setTotalpages] = useState(1);
useEffect(() => { useEffect(() => {
getSearchHistory(); getSearchHistory();
return () => { // return () => {
handleClear(); // handleClear();
}; // };
}, []); }, []);
useEffect(() => { useEffect(() => {
@@ -55,6 +56,7 @@ const QueryTransactions = () => {
}, [ref.current]); }, [ref.current]);
useReachBottom(() => { useReachBottom(() => {
if (load_transactions_params.page >= totalpages) return;
set_load_transactions_params((prev) => { set_load_transactions_params((prev) => {
return { return {
...prev, ...prev,
@@ -93,9 +95,7 @@ const QueryTransactions = () => {
* @param value * @param value
*/ */
const handleChange = (value: string) => { const handleChange = (value: string) => {
set_load_transactions_params((prev) => { setKeyword(value);
return { ...prev, keyword: value };
});
}; };
/** /**
@@ -104,7 +104,7 @@ const QueryTransactions = () => {
const handleClear = () => { const handleClear = () => {
setTransactions([]); setTransactions([]);
set_load_transactions_params((prev) => { 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 }) => { const handleHistoryClick = (item: { id: number; keyword: string }) => {
set_load_transactions_params((prev) => { set_load_transactions_params((prev) => {
return { ...prev, keyword: item?.keyword }; return { ...prev, page: 1, keyword: item?.keyword };
}); });
}; };
@@ -129,16 +129,20 @@ const QueryTransactions = () => {
/** /**
* @description 点击搜索 * @description 点击搜索
*/ */
const handleSearch = async (val?: string) => { const handleSearch = async () => {
// set_loading_transactions(true); // set_loading_transactions(true);
try { try {
const response = await httpService.post("/wallet/transactions", { const response = await httpService.post("/wallet/transactions", {
...load_transactions_params, ...load_transactions_params
keyword: val,
}); });
if (load_transactions_params.keyword !== "") {
if (response && response.data && response.data.list) { getSearchHistory();
}
if (response && response.data && response.data.list.length) {
setTransactions([...transactions, ...response.data.list]); setTransactions([...transactions, ...response.data.list]);
setTotalpages(response.data.totalPages);
} else if (load_transactions_params.page === 1) {
setTransactions([]);
} }
} catch (error) { } catch (error) {
setTransactions([]); setTransactions([]);
@@ -237,8 +241,8 @@ const QueryTransactions = () => {
<Image className="searchIcon" src={img.ICON_LIST_SEARCH_SEARCH} /> <Image className="searchIcon" src={img.ICON_LIST_SEARCH_SEARCH} />
<Input <Input
placeholder="查找" placeholder="查找"
value={load_transactions_params.keyword} value={keyword}
defaultValue={load_transactions_params.keyword} defaultValue={keyword}
onChange={handleChange} onChange={handleChange}
onClear={handleClear} onClear={handleClear}
autoFocus autoFocus
@@ -256,7 +260,11 @@ const QueryTransactions = () => {
<View className="searchLine" /> <View className="searchLine" />
<Text <Text
className="searchText" className="searchText"
onClick={() => handleSearch(load_transactions_params.keyword)} onClick={() => {
set_load_transactions_params((prev) => {
return { ...prev, page: 1, keyword };
});
}}
> >
</Text> </Text>
@@ -303,7 +311,7 @@ const QueryTransactions = () => {
<View className="loading_state"> <View className="loading_state">
<Text className="loading_text">...</Text> <Text className="loading_text">...</Text>
</View> </View>
) : transactions.length > 0 ? ( ) : transactions.length > 0 && load_transactions_params.keyword !== "" ? (
transactions.map((transaction) => { transactions.map((transaction) => {
const timeInfo = format_time(transaction.create_time); const timeInfo = format_time(transaction.create_time);
return ( return (

View File

@@ -4,6 +4,7 @@ import { View, Text, Input, Button } from "@tarojs/components";
import "./index.scss"; import "./index.scss";
import httpService from "@/services/httpService"; import httpService from "@/services/httpService";
import { useKeyboardHeight } from '@/store/keyboardStore'
interface FormFields { interface FormFields {
old_password?: string; old_password?: string;
@@ -13,6 +14,22 @@ interface FormFields {
} }
const SetTransactionPassword: React.FC = () => { 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 [handleType, setHandleType] = useState("set");
const router = useRouter(); const router = useRouter();
const { type, phone, sms_code } = router.params; const { type, phone, sms_code } = router.params;
@@ -129,7 +146,7 @@ const SetTransactionPassword: React.FC = () => {
</View> </View>
)} )}
<Text className="tips">* 6</Text> <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> </Button>
</View> </View>

View File

@@ -5,6 +5,7 @@ import { View, Text, Input, Button } from "@tarojs/components";
import "./index.scss"; import "./index.scss";
import httpService from "@/services/httpService"; import httpService from "@/services/httpService";
import { useUserInfo } from "@/store/userStore"; import { useUserInfo } from "@/store/userStore";
import { useKeyboardHeight } from '@/store/keyboardStore'
interface FormFields { interface FormFields {
phone?: string; phone?: string;
@@ -12,6 +13,22 @@ interface FormFields {
} }
const ValidPhone: React.FC = () => { 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 userInfo = useUserInfo();
const [formData, setFormData] = useState<FormFields>({ const [formData, setFormData] = useState<FormFields>({
phone: userInfo.phone || "", phone: userInfo.phone || "",
@@ -69,7 +86,7 @@ const ValidPhone: React.FC = () => {
<Input placeholder="请输入验证码" type="number" onInput={(e) => { handleInput(e, "sms_code") }}></Input> <Input placeholder="请输入验证码" type="number" onInput={(e) => { handleInput(e, "sms_code") }}></Input>
<Button className="btn" onClick={getSMSCode}></Button> <Button className="btn" onClick={getSMSCode}></Button>
</View> </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> </View>
); );
}; };

View File

@@ -98,6 +98,7 @@ const transaction_type_options: Option<TransactionSubType>[] = [
const WalletPage: React.FC = () => { const WalletPage: React.FC = () => {
useReachBottom(() => { useReachBottom(() => {
if (load_transactions_params.page >= totalPages) return;
// 加载更多方法 // 加载更多方法
set_load_transactions_params((prev) => { set_load_transactions_params((prev) => {
return { return {
@@ -144,6 +145,8 @@ const WalletPage: React.FC = () => {
date: `${year}-${month}`, date: `${year}-${month}`,
}); });
const [totalPages, setTotalPages] = useState(1);
useEffect(() => { useEffect(() => {
load_transactions(); load_transactions();
}, [load_transactions_params]); }, [load_transactions_params]);
@@ -229,6 +232,7 @@ const WalletPage: React.FC = () => {
if (response && response.data && response.data.list) { if (response && response.data && response.data.list) {
set_transactions([...transactions, ...response.data.list]); set_transactions([...transactions, ...response.data.list]);
setTotalPages(response.data.totalPages);
console.log("设置交易记录:", response.data.list); console.log("设置交易记录:", response.data.list);
} else { } else {
console.log("响应数据格式异常:", response); console.log("响应数据格式异常:", response);

View File

@@ -16,6 +16,8 @@ export const convert_db_gender_to_display = (db_gender: string): string => {
return '男'; return '男';
case '1': case '1':
return '女'; return '女';
case '2':
return '保密';
default: default:
return '未知'; return '未知';
} }
@@ -32,6 +34,8 @@ export const convert_display_gender_to_db = (display_gender: string): string =>
return '0'; return '0';
case '女': case '女':
return '1'; return '1';
case '保密':
return '2';
default: default:
return '0'; // 默认返回男性 return '0'; // 默认返回男性
} }