下载账单、城市和职业选择器
This commit is contained in:
@@ -7,6 +7,7 @@ import "./index.scss";
|
||||
import { DialogCalendarCard } from "@/components/index";
|
||||
// import { CalendarUI } from "@/components";
|
||||
import { CommonPopup } from "@/components";
|
||||
import httpService from "@/services/httpService";
|
||||
|
||||
export enum TransactionSubType {
|
||||
All = "",
|
||||
@@ -25,15 +26,13 @@ interface Option<T> {
|
||||
value: T;
|
||||
}
|
||||
interface TransactionLoadParams {
|
||||
page: number;
|
||||
limit: number;
|
||||
type: TransactionType;
|
||||
transaction_sub_type: TransactionSubType;
|
||||
keyword?: string;
|
||||
date?: string;
|
||||
date_range?: string[];
|
||||
}
|
||||
const DownloadBill: React.FC = () => {
|
||||
const [dateRange, setDateRange] = useState({ start: "", end: "" });
|
||||
const [transactionSubType, setTransactionSubType] =
|
||||
useState<TransactionSubType>(TransactionSubType.All);
|
||||
const [dateType, setDateType] = useState("week");
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [show_download_popup, set_show_download_popup] = useState(false);
|
||||
@@ -77,10 +76,12 @@ const DownloadBill: React.FC = () => {
|
||||
}
|
||||
switch (range) {
|
||||
case "week":
|
||||
setCurrentTimeValue(new Date());
|
||||
setDateType("week");
|
||||
culculateDateRange("week");
|
||||
break;
|
||||
case "month":
|
||||
setCurrentTimeValue(new Date());
|
||||
setDateType("month");
|
||||
culculateDateRange("month");
|
||||
break;
|
||||
@@ -103,7 +104,8 @@ const DownloadBill: 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(() => {
|
||||
@@ -132,7 +134,7 @@ const DownloadBill: React.FC = () => {
|
||||
// }
|
||||
// }, 100);
|
||||
}
|
||||
}
|
||||
};
|
||||
const transaction_type_options: Option<TransactionSubType>[] = [
|
||||
{
|
||||
label: "全部",
|
||||
@@ -157,13 +159,30 @@ const DownloadBill: React.FC = () => {
|
||||
];
|
||||
const [load_transactions_params, set_load_transactions_params] =
|
||||
useState<TransactionLoadParams>({
|
||||
page: 1,
|
||||
limit: 20,
|
||||
type: TransactionType.All,
|
||||
transaction_sub_type: TransactionSubType.All,
|
||||
keyword: "",
|
||||
date: "",
|
||||
date_range: [],
|
||||
});
|
||||
|
||||
const handleClose = () => {
|
||||
setTransactionSubType(load_transactions_params.transaction_sub_type);
|
||||
setShowFilterPopup(false);
|
||||
};
|
||||
const handleTypeConfirm = () => {
|
||||
set_load_transactions_params((prev) => {
|
||||
return { ...prev, transaction_sub_type: transactionSubType };
|
||||
});
|
||||
setShowFilterPopup(false);
|
||||
};
|
||||
const handleDownloadBill = async () => {
|
||||
try {
|
||||
const { transaction_sub_type } = load_transactions_params;
|
||||
const { start, end } = dateRange;
|
||||
const date_range = [start, end];
|
||||
await httpService.post("/wallet/download_bill", {transaction_sub_type, date_range});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<View className="download_bill_page">
|
||||
<View className="hint_content">
|
||||
@@ -177,10 +196,22 @@ const DownloadBill: React.FC = () => {
|
||||
<Text>小程序消息</Text>
|
||||
</View>
|
||||
</View> */}
|
||||
<View className="form_item" onClick={() => { setShowFilterPopup(true) }}>
|
||||
<View
|
||||
className="form_item"
|
||||
onClick={() => {
|
||||
setShowFilterPopup(true);
|
||||
}}
|
||||
>
|
||||
<Text className="title_text">交易类型</Text>
|
||||
<View className="value_content arrow">
|
||||
<Text>全部</Text>
|
||||
<Text>
|
||||
{
|
||||
transaction_type_options.find(
|
||||
(item) =>
|
||||
item.value === load_transactions_params.transaction_sub_type
|
||||
)?.label
|
||||
}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className="form_item">
|
||||
@@ -195,8 +226,9 @@ const DownloadBill: React.FC = () => {
|
||||
近一周
|
||||
</View>
|
||||
<View
|
||||
className={`option_button ${dateType === "month" ? "active" : ""
|
||||
}`}
|
||||
className={`option_button ${
|
||||
dateType === "month" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
selectDateRange("month");
|
||||
}}
|
||||
@@ -204,8 +236,9 @@ const DownloadBill: React.FC = () => {
|
||||
近一月
|
||||
</View>
|
||||
<View
|
||||
className={`option_button ${dateType === "custom" ? "active" : ""
|
||||
}`}
|
||||
className={`option_button ${
|
||||
dateType === "custom" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
selectDateRange("custom");
|
||||
}}
|
||||
@@ -219,16 +252,23 @@ const DownloadBill: React.FC = () => {
|
||||
<Text>{dateRange.start}</Text> 至 <Text>{dateRange.end}</Text>
|
||||
</View>
|
||||
)}
|
||||
{
|
||||
dateType === "custom" && (
|
||||
<View className="form_item" onClick={() => { setVisible(true); }}>
|
||||
<Text className="title_text">时间范围</Text>
|
||||
<View className="value_content arrow">
|
||||
<Text>{dateRange.start && dateRange.end ? `${dateRange.start} 至 ${dateRange.end}` : "请选择账单时间"}</Text>
|
||||
</View>
|
||||
{dateType === "custom" && (
|
||||
<View
|
||||
className="form_item"
|
||||
onClick={() => {
|
||||
setVisible(true);
|
||||
}}
|
||||
>
|
||||
<Text className="title_text">时间范围</Text>
|
||||
<View className="value_content arrow">
|
||||
<Text>
|
||||
{dateRange.start && dateRange.end
|
||||
? `${dateRange.start} 至 ${dateRange.end}`
|
||||
: "请选择账单时间"}
|
||||
</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<View className="button_container">
|
||||
<Text
|
||||
@@ -239,7 +279,9 @@ const DownloadBill: React.FC = () => {
|
||||
>
|
||||
下载记录
|
||||
</Text>
|
||||
<Button className="download_button">下载</Button>
|
||||
<Button className="download_button" onClick={handleDownloadBill}>
|
||||
下载
|
||||
</Button>
|
||||
</View>
|
||||
{visible && (
|
||||
<DialogCalendarCard
|
||||
@@ -264,23 +306,28 @@ const DownloadBill: React.FC = () => {
|
||||
<View className="popup_text">{`文件大小：7KB`}</View>
|
||||
<View className="popup_text">{`请输入交易密码`}</View>
|
||||
<View className="password_container">
|
||||
{
|
||||
password.map((item, index) => (
|
||||
<View key={index} className="password_item">
|
||||
<Text className="password_text">{item}</Text>
|
||||
</View>
|
||||
))
|
||||
}
|
||||
{password.map((item, index) => (
|
||||
<View key={index} className="password_item">
|
||||
<Text className="password_text">{item}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
<Input focus={isFocus} type="number" style={{ width: "0", height: "0", opacity: "0" }} value={password.filter(item => item !== "").join("")} maxlength={6} onInput={handlePasswordInput} />
|
||||
<Input
|
||||
focus={isFocus}
|
||||
type="number"
|
||||
style={{ width: "0", height: "0", opacity: "0" }}
|
||||
value={password.filter((item) => item !== "").join("")}
|
||||
maxlength={6}
|
||||
onInput={handlePasswordInput}
|
||||
/>
|
||||
</View>
|
||||
</CommonPopup>
|
||||
|
||||
{/* 筛选账单弹窗 */}
|
||||
<CommonPopup
|
||||
visible={showFilterPopup}
|
||||
onClose={() => setShowFilterPopup(false)}
|
||||
onConfirm={() => { }}
|
||||
onClose={handleClose}
|
||||
onConfirm={handleTypeConfirm}
|
||||
title="选择筛选项"
|
||||
className="filter_popup"
|
||||
>
|
||||
@@ -293,17 +340,13 @@ const DownloadBill: React.FC = () => {
|
||||
(option: Option<TransactionSubType>) => (
|
||||
<View
|
||||
className={
|
||||
load_transactions_params.transaction_sub_type ===
|
||||
option.value
|
||||
transactionSubType === option.value
|
||||
? "option_item active"
|
||||
: "option_item"
|
||||
}
|
||||
key={option.value}
|
||||
onClick={() => {
|
||||
set_load_transactions_params({
|
||||
...load_transactions_params,
|
||||
transaction_sub_type: option.value,
|
||||
});
|
||||
setTransactionSubType(option.value);
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
|
||||
Reference in New Issue
Block a user