bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
张成
2025-11-16 00:11:25 +08:00
parent 2ac337a2ad
commit 6f4900eb0b
4 changed files with 151 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/game_pages/search/index.scss
View File

@@ -17,7 +17,7 @@
gap: 10px; gap: 10px;
border-radius: 999px; border-radius: 999px;
border: 0.5px solid rgba(0, 0, 0, 0.06); border: 0.5px solid rgba(0, 0, 0, 0.06);
background: #FFF; // background: #FFF;
box-shadow: 0px 4px 48px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 4px 48px 0px rgba(0, 0, 0, 0.08);
.nut-input { .nut-input {

129
src/game_pages/search/index.tsx
View File

@@ -1,4 +1,4 @@
import { View, Image, Text } from "@tarojs/components"; import { View, Image, Text, ScrollView } from "@tarojs/components";
import { Input } from "@nutui/nutui-react-taro"; import { Input } from "@nutui/nutui-react-taro";
import { useEffect, useMemo, useRef } from "react"; import { useEffect, useMemo, useRef } from "react";
import { useListState } from "@/store/listStore"; import { useListState } from "@/store/listStore";
@@ -125,9 +125,9 @@ const ListSearch = () => {
/> />
<View <View
className="listSearchContainer" className="listSearchContainer"
style={{ paddingTop: `${totalHeight + 10}px` }} style={{ paddingTop: `${totalHeight}px` }}
> >
{/* 搜索 */} {/* 搜索框 - 固定在顶部 */}
<View className="topSearch"> <View className="topSearch">
<Image className="searchIcon" src={img.ICON_LIST_SEARCH_SEARCH} /> <Image className="searchIcon" src={img.ICON_LIST_SEARCH_SEARCH} />
<Input <Input
@@ -154,72 +154,81 @@ const ListSearch = () => {
</Text> </Text>
</View> </View>
</View> </View>
{/* 联想词 */}
{isShowSuggestion && ( {/* 中间内容区域 - 可滚动 */}
<View className="searchSuggestion"> <ScrollView
{(suggestionList || [])?.map((item) => { scrollY
// 替换匹配文本为高亮版本 className="searchContentScroll"
const highlightedText = item.replace(regex, (match) => { enhanced
// 如果匹配不到，则返回原文本 showScrollbar={false}
if (!match) return match; >
return `<Text class="highlight">${match}</Text>`; {/* 联想词 */}
}); {isShowSuggestion && (
return ( <View className="searchSuggestion">
<View {(suggestionList || [])?.map((item) => {
className="searchSuggestionItem" // 替换匹配文本为高亮版本
onClick={() => handleSuggestionSearch(item)} const highlightedText = item.replace(regex, (match) => {
> // 如果匹配不到，则返回原文本
<View className="searchSuggestionItemLeft"> if (!match) return match;
return `<Text class="highlight">${match}</Text>`;
});
return (
<View
className="searchSuggestionItem"
onClick={() => handleSuggestionSearch(item)}
>
<View className="searchSuggestionItemLeft">
<Image
className="icon16"
src={img.ICON_LIST_SEARCH_SEARCH}
/>
<Text
dangerouslySetInnerHTML={{ __html: highlightedText }}
></Text>
</View>
<Image <Image
className="icon16" className="icon16"
src={img.ICON_LIST_SEARCH_SEARCH} src={img.ICON_LIST_SEARCH_SUGGESTION}
/> />
<Text
dangerouslySetInnerHTML={{ __html: highlightedText }}
></Text>
</View> </View>
);
})}
</View>
)}
{/* 历史搜索 */}
{!isShowClearIcon && (
<View className="historySearch">
<View className="historySearchTitleWrapper">
<View className="historySearchTitle">历史搜索</View>
<View className="historySearchClear" onClick={handleClearHistory}>
<Text>清空</Text>
<Image <Image
className="icon16" className="clearIcon icon16"
src={img.ICON_LIST_SEARCH_SUGGESTION} src={img.ICON_LIST_SEARCH_CLEAR_HISTORY}
/> />
</View> </View>
);
})}
</View>
)}
{/* 历史搜索 */}
{!isShowClearIcon && (
<View className="historySearch">
<View className="historySearchTitleWrapper">
<View className="historySearchTitle">历史搜索</View>
<View className="historySearchClear" onClick={handleClearHistory}>
<Text>清空</Text>
<Image
className="clearIcon icon16"
src={img.ICON_LIST_SEARCH_CLEAR_HISTORY}
/>
</View> </View>
</View>
{isShowHistory && ( {isShowHistory && (
<View className="historySearchList"> <View className="historySearchList">
{(searchHistory || [])?.map((item) => { {(searchHistory || [])?.map((item) => {
if (!item?.title) { if (!item?.title) {
return null; return null;
} }
return ( return (
<Text <Text
className="historySearchItem" className="historySearchItem"
onClick={() => handleHistoryClick(item)} onClick={() => handleHistoryClick(item)}
> >
{item?.title} {item?.title}
</Text> </Text>
); );
})} })}
</View> </View>
)} )}
</View> </View>
)} )}
</ScrollView>
</View> </View>
</> </>
); );

26
src/user_pages/queryTransactions/index.scss
View File

@@ -1,4 +1,6 @@
.listSearchContainer { .listSearchContainer {
display: flex;
flex-direction: column;
height: 100vh; height: 100vh;
box-sizing: border-box; box-sizing: border-box;
@@ -59,10 +61,9 @@
} }
.topSearchWrapper { .topSearchWrapper {
position: sticky;
top: -1px;
padding: 5px 15px; padding: 5px 15px;
box-sizing: border-box; box-sizing: border-box;
flex-shrink: 0; // 固定在顶部，不随内容滚动
} }
.topSearch { .topSearch {
@@ -80,6 +81,15 @@
.nut-input { .nut-input {
padding: 0; padding: 0;
height: 100%; height: 100%;
background: transparent !important; // 去掉输入框背景
:global(.nut-input-inner) {
background: transparent !important; // 去掉输入框内部背景
}
:global(.nut-input-placeholder) {
background: transparent !important; // 去掉placeholder背景
}
} }
} }
@@ -247,7 +257,7 @@
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
gap: 4px; gap: 4px;
width: 68px; width: 100px;
margin-right: 4px; margin-right: 4px;
.type_text_tag { .type_text_tag {
@@ -255,7 +265,8 @@
font-weight: normal; font-weight: normal;
color: #ff9500; color: #ff9500;
border-radius: 999px !important; border-radius: 999px !important;
padding: 4px; padding: 4px 8px; // 增加左右内边距以增加宽度
min-width: 80px; // 设置最小宽度
background-color: rgba(#ff9500, 0.1); background-color: rgba(#ff9500, 0.1);
border: solid 1px #ff9500; border: solid 1px #ff9500;
margin-right: 4px; margin-right: 4px;
@@ -297,4 +308,11 @@
padding: 20px 0 40px; padding: 20px 0 40px;
background: #fff; background: #fff;
} }
// 中间内容滚动区域
.transactionContentScroll {
flex: 1;
height: 0; // 配合 flex: 1 使用，确保正确计算高度
overflow-y: auto;
}
} }

109
src/user_pages/queryTransactions/index.tsx
View File

@@ -1,11 +1,11 @@
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef } from "react";
import { View, Image, Text } from "@tarojs/components"; import { View, Image, Text, ScrollView } from "@tarojs/components";
import { Input } from "@nutui/nutui-react-taro"; import { Input } from "@nutui/nutui-react-taro";
import img from "@/config/images"; import img from "@/config/images";
import { withAuth, GeneralNavbar } from "@/components"; import { withAuth, GeneralNavbar } from "@/components";
import "./index.scss"; import "./index.scss";
import httpService from "@/services/httpService"; import httpService from "@/services/httpService";
import Taro, { useReachBottom } from "@tarojs/taro"; import Taro from "@tarojs/taro";
import { useGlobalState } from "@/store/global"; import { useGlobalState } from "@/store/global";
interface Transaction { interface Transaction {
id: number; id: number;
@@ -61,16 +61,6 @@ const QueryTransactions = () => {
// } // }
// }, [ref.current]); // }, [ref.current]);
useReachBottom(() => {
if (load_transactions_params.page >= totalpages) return;
set_load_transactions_params((prev) => {
return {
...prev,
page: prev.page + 1,
};
});
});
useEffect(() => { useEffect(() => {
if (isInitialMount.current) { if (isInitialMount.current) {
isInitialMount.current = false; isInitialMount.current = false;
@@ -274,7 +264,7 @@ const QueryTransactions = () => {
Taro.navigateBack(); Taro.navigateBack();
}} }}
/> />
{/* 搜索 */} {/* 搜索框 - 固定在顶部 */}
<View <View
className="topSearchWrapper" className="topSearchWrapper"
style={{ marginTop: `${totalHeight}px` }} style={{ marginTop: `${totalHeight}px` }}
@@ -318,42 +308,60 @@ const QueryTransactions = () => {
</View> </View>
</View> </View>
</View> </View>
{/* 查找历史 */}
{!isShowClearIcon && searchHistory.length > 0 && ( {/* 中间内容区域 - 可滚动 */}
<View className="historySearch"> <ScrollView
<View className="historySearchTitleWrapper"> scrollY
<View className="historySearchTitle">查找历史</View> className="transactionContentScroll"
<View className="historySearchClear" onClick={handleClearHistory}> enhanced
<Text>清空</Text> showScrollbar={false}
<Image onScrollToLower={() => {
className="clearIcon icon16" if (load_transactions_params.page < totalpages) {
src={img.ICON_LIST_SEARCH_CLEAR_HISTORY} set_load_transactions_params((prev) => {
/> return {
...prev,
page: prev.page + 1,
};
});
}
}}
>
{/* 查找历史 */}
{!isShowClearIcon && searchHistory.length > 0 && (
<View className="historySearch">
<View className="historySearchTitleWrapper">
<View className="historySearchTitle">查找历史</View>
<View className="historySearchClear" onClick={handleClearHistory}>
<Text>清空</Text>
<Image
className="clearIcon icon16"
src={img.ICON_LIST_SEARCH_CLEAR_HISTORY}
/>
</View>
</View> </View>
{searchHistory.length && (
<View className="historySearchList">
{(searchHistory || [])?.map((item) => {
if (!item?.keyword) {
return null;
}
return (
<Text
className="historySearchItem"
onClick={() => handleHistoryClick(item)}
>
{item?.keyword}
</Text>
);
})}
</View>
)}
</View> </View>
)}
{searchHistory.length && ( {/* 交易记录列表 */}
<View className="historySearchList"> <View className="transaction_list">
{(searchHistory || [])?.map((item) => {
if (!item?.keyword) {
return null;
}
return (
<Text
className="historySearchItem"
onClick={() => handleHistoryClick(item)}
>
{item?.keyword}
</Text>
);
})}
</View>
)}
</View>
)}
{/* 交易记录列表 */}
<View className="transaction_list">
{loading_transactions ? ( {loading_transactions ? (
<View className="loading_state"> <View className="loading_state">
<Text className="loading_text">加载中...</Text> <Text className="loading_text">加载中...</Text>
@@ -404,10 +412,11 @@ const QueryTransactions = () => {
<Text className="empty_text">暂无交易记录</Text> <Text className="empty_text">暂无交易记录</Text>
</View> </View>
)} )}
</View> </View>
{transactions.length > 0 && ( {transactions.length > 0 && (
<View className="tips_text">仅支持查找2024年9月1日以后的账单</View> <View className="tips_text">仅支持查找2024年9月1日以后的账单</View>
)} )}
</ScrollView>
</View> </View>
</> </>
); );