细节优化

src/user_pages/downloadBill/index.scss

@@ -14,6 +14,7 @@
     font-size: 16px;
     margin: 40px 0;
     text-align: center;
+
     .button_text {
       color: #007aff;
     }
@@ -21,6 +22,7 @@
 
   .form_container {
     padding: 20px;
+
     .form_item {
       height: 50px;
       border-bottom: 1px solid rgba(0, 0, 0, 0.05);
@@ -50,6 +52,7 @@
           justify-content: space-between;
           align-items: center;
           position: relative;
+
           &::before,
           &::after {
             content: "";
@@ -78,7 +81,7 @@
           border-radius: 20px;
           padding: 4px 8px;
 
-          & + .option_button {
+          &+.option_button {
             margin-left: 12px;
           }
 
@@ -106,9 +109,11 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+
     .button_text {
       color: #007aff;
     }
+
     .download_button {
       width: 345px;
       height: 54px;
@@ -129,9 +134,14 @@
       font-style: normal;
       font-weight: 600;
       line-height: normal;
+
+      &.disabled {
+        color: rgba(255, 255, 255, 0.30);
+      }
     }
   }
 }
+
 // 过滤弹窗
 .filter_popup {
   padding: 20px;
@@ -140,6 +150,7 @@
     .form_section {
       .form_item {
         margin-bottom: 20px;
+
         .form_label {
           display: inline-block;
           font-family: PingFang SC;
@@ -153,11 +164,13 @@
           display: grid;
           grid-template-columns: repeat(3, 1fr);
           gap: 8px;
+
           .option_item {
             background-color: #0000000D;
             text-align: center;
             padding: 8px;
             border-radius: 4px;
+
             &.active {
               background-color: #000000;
               color: #fff;

src/user_pages/downloadBill/index.tsx

@@ -174,9 +174,10 @@ const DownloadBill: React.FC = () => {
     setShowFilterPopup(false);
   };
   const handleDownloadBill = async () => {
+    const { start, end } = dateRange;
+    if (!start || !end) return;
     try {
       const { transaction_sub_type } = load_transactions_params;
-      const { start, end } = dateRange;
       const date_range = [start, end];
       const res = await httpService.post("/wallet/download_bill", { transaction_sub_type, date_range });
       const { fileUrl, fileName } = res.data;
@@ -297,7 +298,7 @@ const DownloadBill: React.FC = () => {
         >
           下载记录
         </Text>
-        <Button className="download_button" onClick={handleDownloadBill}>
+        <Button className={`download_button ${!dateRange.start ? 'disabled' : ''}`} onClick={handleDownloadBill}>
           下载
         </Button>
       </View>