Merge pull request #51 from yigger/dev

feat: 添加账单更新事件监听及显示信息优化

Author: yigger

src/components/Home/IndexPage/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useContext } from 'react'
-import { useDidShow } from '@tarojs/taro'
+import Taro from '@tarojs/taro'
 import { View, Text } from '@tarojs/components'
 import Statements from '@/components/Statements'
 import { Button } from '@/src/components/UiComponents'
@@ -8,24 +8,32 @@ import { HomeStoreContext } from "@/src/stores"
 import { observer } from 'mobx-react'
 import EmptyTips from '@/components/EmptyTips'
 import jz from '@/jz'
-import Taro from '@tarojs/taro';
 
 export const IndexPage = observer(() => {
   const store: HomeStoreContext = useContext(HomeStoreContext)
-  const [shouldFetch, setShouldFetch] = useState<boolean>(true)
   const [activeRange, setActiveRange] = useState('today')
   const ranges = [
     { key: 'today', name: '今日' },
     { key: 'yesterday', name: '昨日' },
     { key: 'week', name: '本周' },
     { key: 'month', name: '本月' }
   ]
+
   useEffect(() => {
-    if (shouldFetch) {
-      store.fetchHomeData()
-      setShouldFetch(false)
+    // 监听账单创建事件
+    jz.event.on('statement:updated', () => {
+      store.fetchHomeData(activeRange)
+    })
+
+    // 组件卸载时移除监听
+    return () => {
+      jz.event.off('statement:updated')
     }
-  }, [shouldFetch])
+  }, [activeRange])
+
+  useEffect(() => {
+    store.fetchHomeData()
+  }, [])
 
   useEffect(() => {
     if (store.indexHeader.message) {
@@ -44,10 +52,6 @@ export const IndexPage = observer(() => {
     }
   }, [store.indexHeader])
 
-  useDidShow(() => {
-    setShouldFetch(true);
-  })
-
   return (
     <View className='jz-pages__index'>
       <Header header={store.indexHeader}></Header>

src/components/Statement/index.jsx

@@ -36,6 +36,25 @@ const getMoodColor = (mood) => {
 }
 
 export default function Statement({ statement, editable = true }) {
+  const getDisplayInfo = () => {
+    const infoParts = []
+    
+    // 添加日期
+    infoParts.push(isTheYear(statement.date) ? statement.timeStr : statement.date)
+    
+    // 添加备注
+    if (statement.remark) {
+      infoParts.push(statement.remark)
+    }
+    
+    // 添加收款人
+    if (statement.payee) {
+      infoParts.push(statement.payee.name)
+    }
+    
+    return infoParts.filter(Boolean).join(' · ')
+  }
+
   return (
     <View className={`statement-component__item ${statement.type}`}>
       <View className='d-flex pb-3 pt-3 flex-between flex-center' onClick={() => { editable && jz.router.navigateTo({ url: `/pages/statement_detail/index?statement_id=${statement.id}` }) }}>
@@ -72,29 +91,16 @@ export default function Statement({ statement, editable = true }) {
             </View>
 
             <View className='d-flex flex-center fs-12 col-text-mute'>
-              <Text>{isTheYear(statement.date) ? statement.timeStr : statement.date}</Text>
-              {
-                statement.payee && (
-                  <Text className='fs-12 col-text-mute text-ellipsis'>·{statement.payee.name}</Text>
-                )
-              }
+              <Text>{getDisplayInfo()}</Text>
               {statement.has_pic && (
                 <Text className='fs-18 ml-1 iconfont jcon-pic1 col-text-mute'></Text>
               )}
-              
-              
-              {/* {statement.location && (
-                <Text className='ml-2'>📍 {statement.location}</Text>
-              )} */}
             </View>
           </View>
         </View>
 
         <View className='d-flex flex-center-center flex-column'>
           <View className={`col-${getColorClass(statement.type)}`}>{statement.money}</View>
-          {statement.tags && statement.tags.length > 0 && (
-            <View className='fs-10 col-text-mute mt-1'>{statement.tags.join(' · ')}</View>
-          )}
         </View>
       </View>
     </View>

src/components/statementForm/baseForm.tsx

@@ -246,6 +246,7 @@ export default function BaseForm({
     const { data } = await jz.api.statements.create(form)
 		Taro.hideLoading()
     if(data.status === 200) {
+      jz.event.emit('statement:updated')
       // 上传图片...
       for (let file of form.upload_files) {
         if (file.file) {

src/pages/statement_detail/index.tsx

@@ -28,7 +28,8 @@ type StatementDetail = {
     id: number;
     name: string
   },
-  can_edit: boolean
+  can_edit: boolean,
+  remark: string;
 }
 
 const initialStatement: StatementDetail = {
@@ -262,6 +263,7 @@ const StatementDetail: React.FC = () => {
         jz.toastError(res.data.msg)
       } else {
         await getStatementDetail()
+        jz.event.emit('statement:updated')
         jz.toastSuccess('修改成功')
       }
     } catch (error) {
@@ -363,6 +365,7 @@ const StatementDetail: React.FC = () => {
               { statement.amount }
             </View>
           </View>
+
           {statement.target_object && (
             <View className='target-object-text'>
               <Text className='label'>{getTargetObjectLabel(statement.type)}：</Text>
@@ -374,31 +377,42 @@ const StatementDetail: React.FC = () => {
             !isEditMode && 
             <View 
               className={`time-text ${isEditMode ? 'clickable' : ''}`}
-              onClick={isEditMode ? () => handleEdit('time') : undefined}
+              onClick={isEditMode ? () => handleEdit('date') : undefined}
             >
-              { statement.time }
+              { statement.date } { statement.time }
             </View>
           }
 
           {
             isEditMode &&
             <Picker
               mode='date'
-              value={statement.time}
+              value={statement.date}
               onChange={async (e) => {
-                const time = new Date(statement.time)
-                const date = new Date(e.detail.value)
-                updateStatement({ date: format(date, 'yyyy-MM-dd'), time: format(time, 'HH:mm:ss') })
+                updateStatement({ date: format(new Date(e.detail.value), 'yyyy-MM-dd'), time: new Date(statement.time) })
               }}
             >
-              <View className='picker'>{statement.time}</View>
-              
+              <View className='picker'>{statement.date}</View>
             </Picker>
           }
         </View>
 
         {/* 详情信息列表 */}
         <View className='detail-content'>
+          {
+            statement.remark && (
+              <View className='detail-item'>
+                <View className='item-label'>
+                  <View className='iconfont jcon-user'></View>
+                  <Text>记账用户</Text>
+                </View>
+                <View className='item-value'>
+                  { statement.remark }
+                </View>
+              </View>
+            )
+          }
+
           <View className='detail-item'>
             <View className='item-label'>
               <View className='iconfont jcon-category'></View>