下载账单页面

src/user_pages/downloadBill/index.tsx

@@ -1,10 +1,144 @@
 import React, { useState, useEffect } from "react";
-import { View } from "@tarojs/components";
+import { View, Text, Button } from "@tarojs/components";
+import Taro, { useDidShow } from "@tarojs/taro";
+
+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) => {
+    setCurrentTimeValue(val);
+  };
   return (
-    <View>下载账单</View>
+    <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;
+export default DownloadBill;