From dd1136d1e65a70a49f5521bbc40c389d2b2f76a2 Mon Sep 17 00:00:00 2001 From: Ultrame <1019265060@qq.com> Date: Wed, 24 Sep 2025 17:31:16 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=8B=E8=BD=BD=E8=B4=A6=E5=8D=95=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.config.ts | 3 +- .../CalendarDialog/DialogCalendarCard.tsx | 21 ++- .../Picker/CalendarUI/CalendarUI.tsx | 19 +-- src/user_pages/downloadBill/index.scss | 134 +++++++++++++++++ src/user_pages/downloadBill/index.tsx | 140 +++++++++++++++++- .../downloadBillRecords/index.config.ts | 3 + src/user_pages/downloadBillRecords/index.scss | 0 src/user_pages/downloadBillRecords/index.tsx | 10 ++ .../queryTransactions/index.config.ts | 4 +- 9 files changed, 314 insertions(+), 20 deletions(-) create mode 100644 src/user_pages/downloadBillRecords/index.config.ts create mode 100644 src/user_pages/downloadBillRecords/index.scss create mode 100644 src/user_pages/downloadBillRecords/index.tsx diff --git a/src/app.config.ts b/src/app.config.ts index 0198af7..2bee88b 100644 --- a/src/app.config.ts +++ b/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", // 下载账单记录 ], }, // { diff --git a/src/components/Picker/CalendarDialog/DialogCalendarCard.tsx b/src/components/Picker/CalendarDialog/DialogCalendarCard.tsx index 688b432..665e7be 100644 --- a/src/components/Picker/CalendarDialog/DialogCalendarCard.tsx +++ b/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 = ({ visible, + searchType, onClose, title, value, @@ -60,6 +62,14 @@ const DialogCalendarCard: React.FC = ({ } 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 = ({ zIndex={1000} > { - type === 'year' && + type === 'year' && = ({ /> } { - type === 'month' && - + } { - type === 'time' && (({ })) const handleDateChange = (newValue: any) => { + console.log('xxxxxxxxxxxxxxxxxxxxxx', newValue) setSelectedValue(newValue) onChange?.(newValue as any) } @@ -144,20 +145,20 @@ const NutUICalendar = React.forwardRef(({ 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 ( {/* 快速操作行 */} { - showQuickActions && + showQuickActions && 本周末 一周内 @@ -187,7 +188,7 @@ const NutUICalendar = React.forwardRef(({ ))} - + {/* NutUI CalendarCard 组件 */} (({ onPageChange={handlePageChange} /> - { visible && handleMonthChange(value)}/> } ) }) -export default NutUICalendar \ No newline at end of file +export default NutUICalendar diff --git a/src/user_pages/downloadBill/index.scss b/src/user_pages/downloadBill/index.scss index e69de29..2a10ee3 100644 --- a/src/user_pages/downloadBill/index.scss +++ b/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; + } + } +} diff --git a/src/user_pages/downloadBill/index.tsx b/src/user_pages/downloadBill/index.tsx index 3b3caa0..b39b3fc 100644 --- a/src/user_pages/downloadBill/index.tsx +++ b/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(new Date()); + const handleConfirm = (val) => { + setCurrentTimeValue(val); + }; return ( - 下载账单 + + + 最长可导出三个月的账单 + 示例文件 + + + + 接收方式 + + 小程序消息 + + + + 交易类型 + + 全部 + + + + 账单时间 + + { + selectDateRange("week"); + }} + > + 近一周 + + { + selectDateRange("month"); + }} + > + 近一月 + + { + selectDateRange("custom"); + }} + > + 自定义时间 + + + + {dateRange.start && dateRange.end && ( + + {dateRange.start} 至 {dateRange.end} + + )} + + + + Taro.navigateTo({ url: "/user_pages/downloadBillRecords/index" }) + } + > + 下载记录 + + + + {visible && ( + setVisible(false)} + /> + )} + ); }; -export default DownloadBill; \ No newline at end of file +export default DownloadBill; diff --git a/src/user_pages/downloadBillRecords/index.config.ts b/src/user_pages/downloadBillRecords/index.config.ts new file mode 100644 index 0000000..158e68c --- /dev/null +++ b/src/user_pages/downloadBillRecords/index.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: '下载记录', +}) diff --git a/src/user_pages/downloadBillRecords/index.scss b/src/user_pages/downloadBillRecords/index.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/user_pages/downloadBillRecords/index.tsx b/src/user_pages/downloadBillRecords/index.tsx new file mode 100644 index 0000000..c45a50d --- /dev/null +++ b/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 ( + 下载记录 + ); +}; + +export default DownloadBillRecords; diff --git a/src/user_pages/queryTransactions/index.config.ts b/src/user_pages/queryTransactions/index.config.ts index 9e2c6d5..158e68c 100644 --- a/src/user_pages/queryTransactions/index.config.ts +++ b/src/user_pages/queryTransactions/index.config.ts @@ -1,3 +1,3 @@ export default definePageConfig({ - navigationBarTitleText: '查找交易', -}) \ No newline at end of file + navigationBarTitleText: '下载记录', +})