151 lines
4.5 KiB
TypeScript
151 lines
4.5 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import { View, Text, Button } from "@tarojs/components";
|
|
import Taro, { useDidShow } from "@tarojs/taro";
|
|
import dayjs from 'dayjs'
|
|
|
|
import "./index.scss";
|
|
import { DialogCalendarCard } from "@/components/index";
|
|
// import { CalendarUI } from "@/components";
|
|
|
|
const DownloadBill: React.FC = () => {
|
|
const [dateRange, setDateRange] = useState({ start: "", end: "" });
|
|
const [dateType, setDateType] = useState("week");
|
|
const [visible, setVisible] = useState(false);
|
|
useEffect(() => {
|
|
culculateDateRange(dateType);
|
|
}, []);
|
|
|
|
const culculateDateRange = (dateType: string) => {
|
|
const today = new Date();
|
|
const year = today.getFullYear();
|
|
const month = today.getMonth();
|
|
const day = today.getDate();
|
|
if (dateType === "week") {
|
|
today.setDate(day - 6);
|
|
} else if (dateType === "month") {
|
|
today.setMonth(month - 1);
|
|
today.setDate(day + 1);
|
|
}
|
|
const startYear = today.getFullYear();
|
|
const startMonth = today.getMonth();
|
|
const startDay = today.getDate();
|
|
setDateRange({
|
|
start: `${startYear}-${String(startMonth + 1).padStart(2, "0")}-${String(
|
|
startDay
|
|
).padStart(2, "0")}`,
|
|
end: `${year}-${String(month + 1).padStart(2, "0")}-${String(
|
|
day
|
|
).padStart(2, "0")}`,
|
|
});
|
|
};
|
|
|
|
const selectDateRange = (range: string) => {
|
|
switch (range) {
|
|
case "week":
|
|
setDateType("week");
|
|
culculateDateRange("week");
|
|
break;
|
|
case "month":
|
|
setDateType("month");
|
|
culculateDateRange("month");
|
|
break;
|
|
case "custom":
|
|
setDateType("custom");
|
|
setDateRange({ start: "", end: "" });
|
|
setVisible(true);
|
|
break;
|
|
}
|
|
};
|
|
const [currentTimeValue, setCurrentTimeValue] = useState<Date | Date[]>(new Date());
|
|
const handleConfirm = (val: Date[]) => {
|
|
setCurrentTimeValue(val);
|
|
const [start, end] = val;
|
|
setDateRange({
|
|
start: dayjs(start).format("YYYY-MM-DD"),
|
|
end: dayjs(end).format("YYYY-MM-DD"),
|
|
});
|
|
};
|
|
return (
|
|
<View className="download_bill_page">
|
|
<View className="hint_content">
|
|
<Text>最长可导出三个月的账单 </Text>
|
|
<Text className="button_text">示例文件</Text>
|
|
</View>
|
|
<View className="form_container">
|
|
<View className="form_item">
|
|
<Text className="title_text">接收方式</Text>
|
|
<View className="value_content arrow">
|
|
<Text>小程序消息</Text>
|
|
</View>
|
|
</View>
|
|
<View className="form_item">
|
|
<Text className="title_text">交易类型</Text>
|
|
<View className="value_content arrow">
|
|
<Text>全部</Text>
|
|
</View>
|
|
</View>
|
|
<View className="form_item">
|
|
<Text className="title_text">账单时间</Text>
|
|
<View className="value_content">
|
|
<View
|
|
className={`option_button ${dateType === "week" ? "active" : ""}`}
|
|
onClick={() => {
|
|
selectDateRange("week");
|
|
}}
|
|
>
|
|
近一周
|
|
</View>
|
|
<View
|
|
className={`option_button ${
|
|
dateType === "month" ? "active" : ""
|
|
}`}
|
|
onClick={() => {
|
|
selectDateRange("month");
|
|
}}
|
|
>
|
|
近一月
|
|
</View>
|
|
<View
|
|
className={`option_button ${
|
|
dateType === "custom" ? "active" : ""
|
|
}`}
|
|
onClick={() => {
|
|
selectDateRange("custom");
|
|
}}
|
|
>
|
|
自定义时间
|
|
</View>
|
|
</View>
|
|
</View>
|
|
{dateRange.start && dateRange.end && (
|
|
<View className="time_box">
|
|
<Text>{dateRange.start}</Text> 至 <Text>{dateRange.end}</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
<View className="button_container">
|
|
<Text
|
|
className="button_text"
|
|
onClick={() =>
|
|
Taro.navigateTo({ url: "/user_pages/downloadBillRecords/index" })
|
|
}
|
|
>
|
|
下载记录
|
|
</Text>
|
|
<Button className="download_button">下载</Button>
|
|
</View>
|
|
{visible && (
|
|
<DialogCalendarCard
|
|
visible={visible}
|
|
searchType={"range"}
|
|
value={currentTimeValue}
|
|
onChange={handleConfirm}
|
|
onClose={() => setVisible(false)}
|
|
/>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default DownloadBill;
|