perf: 充电订单详情显示的字段问题

component/accountPages/chargingDetailsPageComponent.tsx

@@ -16,14 +16,32 @@ const ChargingDetailsPageComponent = () => {
     const fetchData = async () => {
       const res = await chargeStationService.fetchChargingDetails(params.id.toString())
       if (res) {
-        // If res is an array, take the first item; otherwise, set as is
-        setList(Array.isArray(res) ? res[0] : {} as ChargingDetails);
-        setRemark(JSON.parse(res[0]?.remark || '{}') as Remark)
+        const firstItem = Array.isArray(res) && res.length > 0 ? res[0] : null;
+        // 设置充电详情
+        setList(firstItem || ({} as ChargingDetails));
+
+        // 安全地解析 remark 字段
+        let parsedRemark: Remark = {} as Remark;
+        if (firstItem?.remark) {
+          try {
+            parsedRemark = JSON.parse(firstItem.remark) as Remark;
+          } catch (e) {
+            console.warn('Failed to parse remark:', e);
+            parsedRemark = {} as Remark;
+          }
+        }
+        setRemark(parsedRemark);
+
         // 解析并格式化日期
-        const startTime = parseISO(res[0].actual_start_time);
-        const endTime = parseISO(res[0].actual_end_time);
-        // 格式化为指定格式
-        const formattedDate = `${format(startTime, 'yyyy/MM/dd HH:mm:ss')}-${format(endTime, 'HH:mm:ss')}`;
+        const startTime = res[0].actual_start_time? parseISO(res[0].actual_start_time): null
+        const endTime = res[0].actual_end_time?parseISO(res[0].actual_end_time): null
+        let formattedDate = '';
+        if (startTime && endTime) {
+          // 格式化为指定格式
+          formattedDate = `${format(startTime, 'yyyy/MM/dd HH:mm:ss')}-${format(endTime, 'HH:mm:ss')}`;
+        } else {
+          formattedDate = 'Invalid Time';
+        }
         setTime(formattedDate)
       }
     };
@@ -38,14 +56,19 @@ const ChargingDetailsPageComponent = () => {
       return '0'
     } else {
       if (list.total_fee && list.withdraw_fee) {
-        let  actual_fee = list.total_fee - list.withdraw_fee
+        let actual_fee = list.total_fee - list.withdraw_fee
         const value = actual_fee <= 0? '0': actual_fee % 1 === 0? `${actual_fee}`: `${actual_fee.toFixed(1)}`
         return value
       }
       return '0';
     }
-
   }, [list]);
+  const couponPrice = useMemo(() => {
+    if (list.promotion_name) {
+      let actual_fee = (list.total_fee - list.withdraw_fee) > 0 ? (list.total_fee - list.withdraw_fee) : 0;
+      return actual_fee.toFixed(1)
+    }
+  }, [list])
     return (
         <SafeAreaView className="flex-1 bg-white" edges={['top']}>
             <View style={{ minHeight: screenHeight, flex: 1 }}>
@@ -62,7 +85,6 @@ const ChargingDetailsPageComponent = () => {
                     <CrossLogoSvg />
                   </Pressable>
                   <View className="items-center px-3">
-                    {/* <View className="flex-3 items-center  justify-end" style={{}}> */}
                     <Image
                         source={require('../../assets/ccLogo.png')}
                         resizeMode="contain"
@@ -71,7 +93,7 @@ const ChargingDetailsPageComponent = () => {
                             height: screenHeight > 750 ? 200 : 110
                         }}
                     />
-                    <Text style={styles.totalPrice}>{totalPrice}</Text>
+                    <Text style={styles.totalPrice}>{list.promotion_name? couponPrice:totalPrice}</Text>
                     <View style={styles.viewLine}></View>
                     <View className='w-full flex-row justify-between mt-6 pr-10'>
                       <Text style={styles.leftLable}>訂單编號: </Text>
@@ -93,7 +115,7 @@ const ChargingDetailsPageComponent = () => {
                         <Text style={styles.leftLable}>實付：</Text>
                         {list.promotion_name ? <Text style={{fontSize: 12, color:'#888888'}}>優惠券支付</Text>: null}
                       </View>
-                      <Text style={styles.rightLable}>${totalPrice}</Text>
+                      <Text style={styles.rightLable}>${list.promotion_name? couponPrice:totalPrice}</Text>
                     </View>
                   </View>
                 </View>
@@ -112,26 +134,28 @@ const ChargingDataComponent: React.FC<ChargingDataComponentProps> = ({
     totalPrice,
     remark
 }) => {
-  const [price, setPrice] = useState<number>(0);
-   const hasFetchedPrice = useRef(false); // 添加 ref 跟踪是否已获取过价格
+  const hasFetchedPrice = useRef(false); // 添加 ref 跟踪是否已获取过价格
+  const [rush, setRush] = useState<Special>({} as Special)
+  const [elses, setElses ] = useState<Special>({} as Special)
+  const [off, setOff] = useState<Special>({} as Special)
   useEffect(() => {
     if (!list.promotion_name && !hasFetchedPrice.current && list.actual_start_time) {
       chargeStationService.fetchElectricityPrice(list.pricemodel_id || 'a').then(res => {
         hasFetchedPrice.current = true; // 标记为已调用
         const date = new Date(list.actual_start_time);
         const str = (date.toLocaleString('en-US', { weekday: 'short' })).toLowerCase();
-        if (res && res.length > 0) { 
+        if (res && res.length > 0) {
           if (remark.RushKwh) {
             const obj = (res[1][str as keyof ElectricityPrice]) as Special
-            setPrice(obj.price)
+            setRush(obj)
           }
           if (remark.ElseKwh) {
             const obj = (res[2][str as keyof ElectricityPrice]) as Special
-            setPrice(obj.price)
+            setElses(obj)
           }
           if (remark.OffKwh) {
             const obj = (res[0][str as keyof ElectricityPrice]) as Special
-            setPrice(obj.price)
+            setOff(obj)
           }
         }
       })
@@ -148,13 +172,13 @@ const ChargingDataComponent: React.FC<ChargingDataComponentProps> = ({
             <Text style={styles.rightLable}>{remark.RushKwh?.toFixed(1)}</Text>
           </View>
           <View className='w-full flex-row justify-between my-3 pr-10'>
-              <Text style={styles.leftLable}>峰時電價(09:00-20:59): </Text>
-            <Text style={styles.rightLable}>${price}</Text>
+              <Text style={styles.leftLable}>峰時電價({rush.from}-{rush.to}):</Text>
+            <Text style={styles.rightLable}>${rush.price}</Text>
           </View>
           <View className='w-full flex-row justify-between pr-10 mb-3'>
             <Text style={styles.leftLable}>峰時總電費:</Text>
             
-            <Text style={styles.rightLable}>${totalPrice}</Text>
+            <Text style={styles.rightLable}>${remark.RushCharge?.toFixed(1)}</Text>
           </View>
         </View>: null }
         {(remark.ElseKwh) ? 
@@ -164,14 +188,14 @@ const ChargingDataComponent: React.FC<ChargingDataComponentProps> = ({
             <Text style={styles.rightLable}>{remark.ElseKwh?.toFixed(1)}</Text>
           </View>
           <View className='w-full flex-row justify-between my-3 pr-10'>
-            <Text style={styles.leftLable}>平時電價(09:00-20:59): </Text>
+            <Text style={styles.leftLable}>平時電價({elses.from}-{elses.to}):</Text>
 
-            <Text style={styles.rightLable}>${price}</Text>
+            <Text style={styles.rightLable}>${elses.price}</Text>
           </View>
           <View className='w-full flex-row justify-between pr-10 mb-3'>
             <Text style={styles.leftLable}>平時總電費:</Text>
             
-            <Text style={styles.rightLable}>${totalPrice}</Text>
+            <Text style={styles.rightLable}>${remark.ElseCharge?.toFixed(1)}</Text>
           </View>
         </View>: null }
         {(remark.OffKwh) ? 
@@ -181,13 +205,13 @@ const ChargingDataComponent: React.FC<ChargingDataComponentProps> = ({
             <Text style={styles.rightLable}>{remark.OffKwh?.toFixed(1)}</Text>
           </View>
           <View className='w-full flex-row justify-between my-3 pr-10'>
-              <Text style={styles.leftLable}>穀時電價(09:00-20:59): </Text>
-            <Text style={styles.rightLable}>${price}</Text>
+              <Text style={styles.leftLable}>穀時電價({off.from}-{off.to}): </Text>
+            <Text style={styles.rightLable}>${off.price}</Text>
           </View>
           <View className='w-full flex-row justify-between pr-10 mb-3'>
             <Text style={styles.leftLable}>穀時總電費:</Text>
             
-            <Text style={styles.rightLable}>${totalPrice}</Text>
+            <Text style={styles.rightLable}>${remark.OffCharge?.toFixed(1)}</Text>
           </View>
         </View>: null }
       </View>