下载账单页面
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
3
src/user_pages/downloadBillRecords/index.config.ts
Normal file
3
src/user_pages/downloadBillRecords/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '下载记录',
|
||||
})
|
||||
0
src/user_pages/downloadBillRecords/index.scss
Normal file
0
src/user_pages/downloadBillRecords/index.scss
Normal file
10
src/user_pages/downloadBillRecords/index.tsx
Normal file
10
src/user_pages/downloadBillRecords/index.tsx
Normal file
@@ -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;
|
||||
@@ -1,3 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '查找交易',
|
||||
})
|
||||
navigationBarTitleText: '下载记录',
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user