账单详情页面
This commit is contained in:
@@ -1,3 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '下载记录',
|
||||
navigationBarTitleText: '查找交易',
|
||||
})
|
||||
|
||||
@@ -0,0 +1,197 @@
|
||||
.listSearchContainer {
|
||||
padding: 0 15px;
|
||||
padding-top: 16px;
|
||||
|
||||
.icon16 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.topSearch {
|
||||
padding: 10px 16px 5px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
box-sizing: border-box;
|
||||
gap: 10px;
|
||||
border-radius: 44px;
|
||||
border: 0.5px solid rgba(0, 0, 0, 0.06);
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 48px 0 rgba(0, 0, 0, 0.08);
|
||||
|
||||
.nut-input {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.searchRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.searchLine {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
border-radius: 20px;
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.searchText {
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.searchIcon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.historySearchTitleWrapper {
|
||||
display: flex;
|
||||
padding: 12px 15px;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
align-self: stretch;
|
||||
|
||||
.historySearchTitle,
|
||||
.historySearchClear {
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.historySearchClear {
|
||||
color: #9a9a9a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.historySearchList {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
.historySearchItem {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
display: flex;
|
||||
height: 28px;
|
||||
padding: 4px 12px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
border-radius: 999px;
|
||||
border: 0.5px solid rgba(0, 0, 0, 0.06);
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
|
||||
.searchSuggestion {
|
||||
padding: 6px 0;
|
||||
|
||||
.searchSuggestionItem {
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.searchSuggestionItemLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: rgba(60, 60, 67, 0.6);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.transaction_list {
|
||||
.loading_state,
|
||||
.empty_state {
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
|
||||
.loading_text,
|
||||
.empty_text {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.transaction_item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 20px;
|
||||
|
||||
.transaction_left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
flex: 1;
|
||||
|
||||
.transaction_title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.transaction_time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
gap: 4px;
|
||||
|
||||
.transaction_date,
|
||||
.transaction_clock {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
color: rgba(60, 60, 67, 0.6);
|
||||
line-height: 1.2;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.transaction_right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
width: 68px;
|
||||
|
||||
.transaction_amount {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
line-height: 1.5;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.balance_info {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
color: rgba(60, 60, 67, 0.6);
|
||||
line-height: 1.2;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,348 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { View } from "@tarojs/components";
|
||||
import { useState } from "react";
|
||||
import { View, Image, Text } from "@tarojs/components";
|
||||
import { Input } from "@nutui/nutui-react-taro";
|
||||
import { useEffect, useRef } from "react";
|
||||
import img from "@/config/images";
|
||||
import { withAuth } from "@/components";
|
||||
import "./index.scss";
|
||||
import httpService from "@/services/httpService";
|
||||
import Taro from "@tarojs/taro";
|
||||
interface Transaction {
|
||||
id: number;
|
||||
user_id: number;
|
||||
transaction_type: string;
|
||||
freeze_action: string | null;
|
||||
amount: string;
|
||||
description: string;
|
||||
create_time: string;
|
||||
last_modify_time: string;
|
||||
related_id: number;
|
||||
}
|
||||
|
||||
// 钱包信息类型
|
||||
interface WalletInfo {
|
||||
balance: number;
|
||||
frozen_balance?: number;
|
||||
total_balance?: number;
|
||||
total_income?: number;
|
||||
total_withdraw?: number;
|
||||
}
|
||||
|
||||
interface History {
|
||||
id: number;
|
||||
keyword: string;
|
||||
}
|
||||
interface TransactionLoadParams {
|
||||
page: number;
|
||||
limit: number;
|
||||
keyword?: string;
|
||||
}
|
||||
|
||||
const QueryTransactions = () => {
|
||||
const [loading_transactions, set_loading_transactions] = useState(false);
|
||||
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
||||
const [searchHistory, setSearchHistory] = useState<History[]>([]);
|
||||
const ref = useRef<any>(null);
|
||||
const [load_transactions_params, set_load_transactions_params] =
|
||||
useState<TransactionLoadParams>({
|
||||
page: 1,
|
||||
limit: 20,
|
||||
keyword: "",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
getSearchHistory();
|
||||
return () => {
|
||||
handleClear();
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (ref?.current) {
|
||||
ref.current.focus();
|
||||
}
|
||||
}, [ref.current]);
|
||||
|
||||
// 是否显示清空图标
|
||||
const isShowClearIcon =
|
||||
load_transactions_params.keyword &&
|
||||
load_transactions_params.keyword?.length > 0;
|
||||
|
||||
const getSearchHistory = async () => {
|
||||
try {
|
||||
const response = await httpService.post("/wallet/search_history", {
|
||||
limit: 10,
|
||||
});
|
||||
if (response && response.data) {
|
||||
setSearchHistory(response.data);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
/**
|
||||
* @description 输入
|
||||
* @param value
|
||||
*/
|
||||
const handleChange = (value: string) => {
|
||||
set_load_transactions_params((prev) => {
|
||||
return { ...prev, keyword: value };
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @description 点击清空输入内容
|
||||
*/
|
||||
const handleClear = () => {
|
||||
setTransactions([]);
|
||||
set_load_transactions_params((prev) => {
|
||||
return { ...prev, keyword: "" };
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @description 点击历史搜索
|
||||
* @param value
|
||||
*/
|
||||
const handleHistoryClick = (item: { id: number; keyword: string }) => {
|
||||
set_load_transactions_params((prev) => {
|
||||
handleSearch(item?.keyword);
|
||||
return { ...prev, keyword: item?.keyword };
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @description 清空历史搜索
|
||||
*/
|
||||
const handleClearHistory = async () => {
|
||||
await httpService.post("/wallet/clear_search_history");
|
||||
setSearchHistory([]);
|
||||
};
|
||||
|
||||
/**
|
||||
* @description 点击搜索
|
||||
*/
|
||||
const handleSearch = async (val?: string) => {
|
||||
if (!val) {
|
||||
return;
|
||||
}
|
||||
set_loading_transactions(true);
|
||||
try {
|
||||
const response = await httpService.post("/wallet/transactions", {
|
||||
...load_transactions_params,
|
||||
keyword: val,
|
||||
});
|
||||
console.log("交易记录响应:", response);
|
||||
|
||||
if (response && response.data && response.data.list) {
|
||||
setTransactions(response.data.list);
|
||||
} else {
|
||||
setTransactions([]);
|
||||
}
|
||||
} catch (error) {
|
||||
setTransactions([]);
|
||||
let errorMessage = "加载交易记录失败";
|
||||
if (
|
||||
error &&
|
||||
error.response &&
|
||||
error.response.data &&
|
||||
error.response.data.message
|
||||
) {
|
||||
errorMessage = error.response.data.message;
|
||||
} else if (error && error.data && error.data.message) {
|
||||
errorMessage = error.data.message;
|
||||
}
|
||||
|
||||
Taro.showToast({
|
||||
title: errorMessage,
|
||||
icon: "error",
|
||||
duration: 2000,
|
||||
});
|
||||
} finally {
|
||||
set_loading_transactions(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 格式化金额显示
|
||||
const format_amount = (amount: number | string) => {
|
||||
const numAmount = typeof amount === "string" ? parseFloat(amount) : amount;
|
||||
return numAmount.toFixed(2);
|
||||
};
|
||||
|
||||
// 钱包信息状态
|
||||
const [wallet_info, set_wallet_info] = useState<WalletInfo>({
|
||||
balance: 0,
|
||||
});
|
||||
|
||||
// 格式化时间显示
|
||||
const format_time = (time: string) => {
|
||||
const date = new Date(time);
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
const hours = String(date.getHours()).padStart(2, "0");
|
||||
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||||
const seconds = String(date.getSeconds()).padStart(2, "0");
|
||||
|
||||
return {
|
||||
date: `2025-${month}-${day}`,
|
||||
time: `${hours}:${minutes}:${seconds}`,
|
||||
};
|
||||
};
|
||||
|
||||
// 获取交易类型文字
|
||||
const get_transaction_type_text = (transaction: Transaction) => {
|
||||
// 如果有描述信息，优先使用描述
|
||||
if (transaction.description) {
|
||||
return transaction.description;
|
||||
}
|
||||
|
||||
const typeMap: { [key: string]: string } = {
|
||||
income: "收入",
|
||||
expense: "支出",
|
||||
freeze: "冻结",
|
||||
unfreeze: "解冻",
|
||||
};
|
||||
|
||||
let typeText =
|
||||
typeMap[transaction.transaction_type] || transaction.transaction_type;
|
||||
|
||||
// 如果有冻结操作，添加到类型文字中
|
||||
if (transaction.freeze_action) {
|
||||
const freezeMap: { [key: string]: string } = {
|
||||
freeze: "冻结",
|
||||
unfreeze: "解冻",
|
||||
};
|
||||
typeText += `(${freezeMap[transaction.freeze_action]})`;
|
||||
}
|
||||
|
||||
return typeText;
|
||||
};
|
||||
|
||||
const navigateToDetail = (id: number) => {
|
||||
Taro.navigateTo({
|
||||
url: `/user_pages/billDetail/index?id=${id}`,
|
||||
});
|
||||
};
|
||||
|
||||
// 获取金额显示（带符号）
|
||||
const get_amount_display = (transaction: Transaction) => {
|
||||
const isPositive = transaction.transaction_type === "income";
|
||||
const prefix = isPositive ? "+" : "-";
|
||||
return `${prefix}${format_amount(transaction.amount)}`;
|
||||
};
|
||||
|
||||
const QueryTransactions: React.FC = () => {
|
||||
return (
|
||||
<View>查询交易</View>
|
||||
<>
|
||||
<View className="listSearchContainer">
|
||||
{/* 搜索 */}
|
||||
<View className="topSearch">
|
||||
<Image className="searchIcon" src={img.ICON_LIST_SEARCH_SEARCH} />
|
||||
<Input
|
||||
placeholder="查找"
|
||||
value={load_transactions_params.keyword}
|
||||
defaultValue={load_transactions_params.keyword}
|
||||
onChange={handleChange}
|
||||
onClear={handleClear}
|
||||
autoFocus
|
||||
clearable={false}
|
||||
ref={ref}
|
||||
/>
|
||||
<View className="searchRight">
|
||||
{isShowClearIcon && (
|
||||
<Image
|
||||
className="clearIcon icon16"
|
||||
src={img.ICON_LIST_SEARCH_CLEAR}
|
||||
onClick={handleClear}
|
||||
/>
|
||||
)}
|
||||
<View className="searchLine" />
|
||||
<Text
|
||||
className="searchText"
|
||||
onClick={() => handleSearch(load_transactions_params.keyword)}
|
||||
>
|
||||
搜索
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
{/* 查找历史 */}
|
||||
{!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>
|
||||
|
||||
{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 className="transaction_list">
|
||||
{loading_transactions ? (
|
||||
<View className="loading_state">
|
||||
<Text className="loading_text">加载中...</Text>
|
||||
</View>
|
||||
) : transactions.length > 0 ? (
|
||||
transactions.map((transaction) => {
|
||||
const timeInfo = format_time(transaction.create_time);
|
||||
return (
|
||||
<View
|
||||
key={transaction.id}
|
||||
className="transaction_item"
|
||||
onClick={() => {
|
||||
navigateToDetail(transaction.id);
|
||||
}}
|
||||
>
|
||||
<View className="transaction_left">
|
||||
<Text className="transaction_title">
|
||||
{get_transaction_type_text(transaction)}
|
||||
</Text>
|
||||
<View className="transaction_time">
|
||||
<Text className="transaction_date">{timeInfo.date}</Text>
|
||||
<Text className="transaction_clock">{timeInfo.time}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className="transaction_right">
|
||||
<Text className="transaction_amount">
|
||||
{get_amount_display(transaction)}
|
||||
</Text>
|
||||
<Text className="balance_info">
|
||||
余额 ¥{format_amount(wallet_info.balance)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<View className="empty_state">
|
||||
<Text className="empty_text">暂无交易记录</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default QueryTransactions;
|
||||
export default withAuth(QueryTransactions);
|
||||
|
||||
Reference in New Issue
Block a user