🍻 记账-收尾优化

Author: boh5

day-04/react-bill-test/server/data.json

@@ -132,6 +132,20 @@
       "date": "2023-12-30T14:30:52.959Z",
       "useFor": "food",
       "id": 22
+    },
+    {
+      "type": "pay",
+      "money": -110,
+      "date": "2023-12-23T16:00:00.000Z",
+      "useFor": "food",
+      "id": 23
+    },
+    {
+      "type": "pay",
+      "money": -110,
+      "date": "2023-12-23T16:00:00.000Z",
+      "useFor": "food",
+      "id": 24
     }
   ]
 }

day-04/react-bill-test/src/pages/New/index.js

@@ -7,6 +7,7 @@ import {useNavigate} from 'react-router-dom'
 import {useState} from "react"
 import {useDispatch} from "react-redux"
 import {addBillList} from "@/store/modules/billStore"
+import dayjs from "dayjs"
 
 const New = () => {
   const navigate = useNavigate()
@@ -30,12 +31,18 @@ const New = () => {
     const data = {
       type: billType,
       money: billType === 'pay' ? -money : +money,
-      date: new Date(),
+      date: date,
       useFor: useFor
     }
     dispatch(addBillList(data))
   }
 
+  // 选择的时间
+  const [date, setDate] = useState(new Date())
+
+  // 控制时间打开关闭
+  const [dateVisible, setDateVisible] = useState(false)
+
   return (
     <div className="keepAccounts">
       <NavBar className="nav" onBack={() => navigate(-1)}>
@@ -63,12 +70,20 @@ const New = () => {
         <div className="kaFormWrapper">
           <div className="kaForm">
             <div className="date">
-              <Icon type="calendar" className="icon" />
-              <span className="text">{'今天'}</span>
+              <Icon type="calendar" className="icon"/>
+              <span
+                className="text"
+                onClick={() => setDateVisible(true)}
+              >
+                {dayjs(date).format('YYYY-MM-DD')}
+              </span>
               <DatePicker
                 className="kaDate"
                 title="记账日期"
                 max={new Date()}
+                visible={dateVisible}
+                onClose={() => setDateVisible(false)}
+                onConfirm={(value) => setDate(value)}
               />
             </div>
             <div className="kaInput">
@@ -96,7 +111,7 @@ const New = () => {
                     <div
                       className={classNames(
                         'item',
-                        ''
+                        useFor === item.type ? 'selected' : ''
                       )}
                       key={item.type}
                       onClick={() => setUseFor(item.type)}