下载账单页面

src/app.config.ts

@@ -1,6 +1,6 @@
 export default defineAppConfig({
   pages: [
-    
+
     "home_pages/index", //中转页
     "login_pages/index/index",
     "login_pages/verification/index",
@@ -28,6 +28,7 @@ export default defineAppConfig({
         "wallet/index", // 钱包页
         "queryTransactions/index", // 查询交易
         "downloadBill/index", // 下载账单
+        "downloadBillRecords/index", // 下载账单记录
       ],
     },
     // {

src/components/Picker/CalendarDialog/DialogCalendarCard.tsx

@@ -7,7 +7,8 @@ import dayjs from 'dayjs'
 import styles from './index.module.scss'
 export interface DialogCalendarCardProps {
   value?: Date
-  onChange?: (date: Date) => void
+  searchType?: 'single' | 'range' | 'multiple'
+  onChange?: (date: Date | Date[]) => void
   visible: boolean
   onClose: () => void
   title?: React.ReactNode
@@ -15,6 +16,7 @@ export interface DialogCalendarCardProps {
 
 const DialogCalendarCard: React.FC<DialogCalendarCardProps> = ({
   visible,
+  searchType,
   onClose,
   title,
   value,
@@ -60,6 +62,14 @@ const DialogCalendarCard: React.FC<DialogCalendarCardProps> = ({
   }
 
   const handleChange = (d: Date | Date[]) => {
+    if (searchType === 'range') {
+      if (Array.isArray(d)) {
+        if (d.length === 2) {
+          onChange?.(d as Date[])
+          return
+        }
+      }
+    }
     if (Array.isArray(d)) {
       setSelected(d[0])
     } else {
@@ -120,10 +130,11 @@ const DialogCalendarCard: React.FC<DialogCalendarCardProps> = ({
       zIndex={1000}
     >
       {
-        type === 'year' && 
+        type === 'year' &&
         <View className={styles['calendar-container']}>
       <CalendarUI
         ref={calendarRef}
+        type={searchType}
         value={selected}
         onChange={handleChange}
         showQuickActions={false}
@@ -131,16 +142,16 @@ const DialogCalendarCard: React.FC<DialogCalendarCardProps> = ({
       /></View>
       }
     {
-        type === 'month' && <PickerCommon 
+        type === 'month' && <PickerCommon
           ref={pickerRef}
           onChange={handleDateTimePickerChange}
           type="month"
           value={[selected.getFullYear(), selected.getMonth() + 1]}
         />
-        
+
     }
     {
-        type === 'time' && <PickerCommon 
+        type === 'time' && <PickerCommon
         ref={hourMinutePickerRef}
         type="hour"
         value={[selectedHour, selectedMinute]}

src/components/Picker/CalendarUI/CalendarUI.tsx

@@ -75,6 +75,7 @@ const NutUICalendar = React.forwardRef<CalendarUIRef, NutUICalendarProps>(({
   }))
 
   const handleDateChange = (newValue: any) => {
+    console.log('xxxxxxxxxxxxxxxxxxxxxx', newValue)
     setSelectedValue(newValue)
     onChange?.(newValue as any)
   }
@@ -144,20 +145,20 @@ const NutUICalendar = React.forwardRef<CalendarUIRef, NutUICalendarProps>(({
     syncMonthTo(dayList[0])
     onChange?.(dayList)
   }
-  
+
   const handleMonthChange = (value: any) => {
     const [year, month] = value;
     const newDate = new Date(year, month - 1, 1);
     setCurrent(newDate);
     calendarRef.current?.jumpTo(year, month)
   }
-  
+
 
   return (
     <View>
       {/* 快速操作行 */}
       {
-        showQuickActions && 
+        showQuickActions &&
         <View className={styles['quick-actions']}>
         <View className={styles['quick-action']} onClick={selectWeekend}>本周末</View>
         <View className={styles['quick-action']} onClick={selectWeek}>一周内</View>
@@ -187,7 +188,7 @@ const NutUICalendar = React.forwardRef<CalendarUIRef, NutUICalendarProps>(({
             </Text>
           ))}
         </View>
-        
+
         {/* NutUI CalendarCard 组件 */}
         <CalendarCard
           ref={calendarRef}
@@ -198,14 +199,14 @@ const NutUICalendar = React.forwardRef<CalendarUIRef, NutUICalendarProps>(({
           onPageChange={handlePageChange}
         />
       </View>
-      {  visible && <PopupPicker 
+      {  visible && <PopupPicker
-      visible={visible} 
+      visible={visible}
-      setvisible={setvisible} 
+      setvisible={setvisible}
-      value={[current.getFullYear(), current.getMonth() + 1]} 
+      value={[current.getFullYear(), current.getMonth() + 1]}
       type="month"
       onChange={(value) => handleMonthChange(value)}/> }
     </View>
   )
 })
 
-export default NutUICalendar 
+export default NutUICalendar

src/user_pages/downloadBill/index.scss

@@ -0,0 +1,134 @@
+@use "../../scss/common.scss" as *;
+
+// 个人页面样式
+.download_bill_page {
+  min-height: 100vh;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  .hint_content {
+    font-family: PingFang SC;
+    font-weight: 400;
+    font-style: Regular;
+    font-size: 16px;
+    margin: 40px 0;
+    text-align: center;
+    .button_text {
+      color: #007aff;
+    }
+  }
+
+  .form_container {
+    padding: 20px;
+    .form_item {
+      height: 50px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+      color: #000;
+      font-family: PingFang SC;
+      font-weight: 400;
+      font-style: Regular;
+      font-size: 14px;
+      display: flex;
+      gap: 20px;
+      justify-content: space-between;
+      align-items: center;
+
+      .title_text {
+        font-weight: 600;
+        font-style: Semibold;
+        font-size: 14px;
+      }
+
+      .value_content {
+        display: flex;
+        flex: 1;
+        align-items: center;
+
+        &.arrow {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          position: relative;
+          &::before,
+          &::after {
+            content: "";
+            display: block;
+            width: 2px;
+            height: 8px;
+            border-radius: 2px;
+            background: #000;
+            transform: translateY(-3.5px) rotate(-45deg);
+            position: absolute;
+            right: 0;
+          }
+
+          &::after {
+            transform: translateY(3px) rotate(45deg);
+          }
+        }
+
+        .option_button {
+          font-weight: 400;
+          font-style: Regular;
+          font-size: 12px;
+          line-height: 16px;
+          letter-spacing: 0px;
+          background-color: #0000000d;
+          border-radius: 20px;
+          padding: 4px 8px;
+
+          & + .option_button {
+            margin-left: 12px;
+          }
+
+          &.active {
+            background-color: #000;
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    .time_box {
+      line-height: 52px;
+      font-weight: 400;
+      font-style: Regular;
+      font-size: 14px;
+      color: #3c3c4399;
+    }
+  }
+
+  .button_container {
+    position: fixed;
+    bottom: 40px;
+    left: 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .button_text {
+      color: #007aff;
+    }
+    .download_button {
+      width: 345px;
+      height: 54px;
+      width: calc(100vw - 24px);
+      margin-top: 12px;
+      border-radius: 16px;
+      border: 1px solid rgba(0, 0, 0, 0.06);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      background: #000;
+      box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.1);
+      backdrop-filter: blur(16px);
+      font-feature-settings: "liga" off, "clig" off;
+      font-family: "PingFang SC";
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: normal;
+    }
+  }
+}

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;

src/user_pages/downloadBillRecords/index.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '下载记录',
+})

src/user_pages/downloadBillRecords/index.tsx

@@ -0,0 +1,10 @@
+import React, { useState, useEffect } from "react";
+import { View } from "@tarojs/components";
+
+const DownloadBillRecords: React.FC = () => {
+  return (
+    <View>下载记录</View>
+  );
+};
+
+export default DownloadBillRecords;

src/user_pages/queryTransactions/index.config.ts

@@ -1,3 +1,3 @@
 export default definePageConfig({
-  navigationBarTitleText: '查找交易',
+  navigationBarTitleText: '下载记录',
-})
+})