perf: 优化订单记录详情显示

component/accountPages/chargingDetailsPageComponent.tsx

@@ -1,4 +1,4 @@
-import { View, Text, Pressable, Dimensions,Image, StyleSheet } from 'react-native';
+import { View, Text, Pressable, Dimensions,Image, StyleSheet, ScrollView } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { router, useLocalSearchParams } from 'expo-router';
 import { CrossLogoSvg } from '../global/SVG';
@@ -71,8 +71,9 @@ const ChargingDetailsPageComponent = () => {
   }, [list])
     return (
         <SafeAreaView className="flex-1 bg-white" edges={['top']}>
+          <ScrollView>
             <View style={{ minHeight: screenHeight, flex: 1 }}>
-                <View className="mx-[5%]" style={{ marginTop: 25}}>
+                <View className="mx-[3%]" style={{ marginTop: 25}}>
                   <Pressable
                       onPress={() => {
                           if (router.canGoBack()) {
@@ -89,28 +90,35 @@ const ChargingDetailsPageComponent = () => {
                         source={require('../../assets/ccLogo.png')}
                         resizeMode="contain"
                         style={{
-                            width: screenHeight > 750 ? 200 : 110,
-                            height: screenHeight > 750 ? 200 : 110
+                            width: 100,
+                            height: 100
                         }}
                     />
                     <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'>
+                    <View className='w-full flex-row justify-between mt-6'>
                       <Text style={styles.leftLable}>訂單编號: </Text>
-                      <Text style={styles.rightLable}>{list.format_order_id}</Text>
+                      <View style={{ flex: 1, marginLeft: 5 }}>
+                        <Text style={styles.rightLable}>{list.format_order_id}</Text>
+                      </View>
                     </View>
-                    <View className='w-full flex-row justify-between my-3 pr-10'>
+                    <View className='w-full flex-row justify-between my-3'>
                       <Text style={styles.leftLable}>充電時間: </Text>
-                      <Text style={styles.rightLable}>{time}</Text>
+                      <View style={{ flex: 1, marginLeft: 5 }}>
+                        <Text style={styles.rightLable}>{time}</Text>
+                      </View>
+
                     </View>
-                    <View className='w-full flex-row justify-between pr-10 mb-4'>
+                    <View className='w-full flex-row justify-between mb-4'>
                       <Text style={styles.leftLable}>充電站位置:</Text>
-                      <Text style={styles.rightLable}>{params.chargeStationName}</Text>
+                      <View style={{ flex: 1, marginLeft: 5 }}>
+                        <Text style={styles.rightLable}>{params.chargeStationName}</Text>
+                      </View>
                     </View>
                     <View style={styles.viewLine}></View>
                     <ChargingDataComponent list={list} remark={remark} totalPrice={totalPrice}/>
                     <View style={styles.viewLine}></View>
-                    <View className='w-full flex-row justify-between mt-6 pr-10'>
+                    <View className='w-full flex-row justify-between mt-6'>
                       <View>
                         <Text style={styles.leftLable}>實付：</Text>
                         {list.promotion_name ? <Text style={{fontSize: 12, color:'#888888'}}>優惠券支付</Text>: null}
@@ -119,8 +127,8 @@ const ChargingDetailsPageComponent = () => {
                     </View>
                   </View>
                 </View>
-                <View style={{ width: "100%",height: 130 }} />
             </View>
+          </ScrollView>
         </SafeAreaView>
     );
 };
@@ -167,15 +175,15 @@ const ChargingDataComponent: React.FC<ChargingDataComponentProps> = ({
       <View>
         {(remark.RushKwh) ? 
         <View>
-          <View className='w-full flex-row justify-between mt-4 pr-10'>
+          <View className='w-full flex-row justify-between mt-4'>
             <Text style={styles.leftLable}>峰時總電量: </Text>
             <Text style={styles.rightLable}>{remark.RushKwh?.toFixed(1)}</Text>
           </View>
-          <View className='w-full flex-row justify-between my-3 pr-10'>
+          <View className='w-full flex-row justify-between my-3'>
               <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'>
+          <View className='w-full flex-row justify-between mb-3'>
             <Text style={styles.leftLable}>峰時總電費:</Text>
             
             <Text style={styles.rightLable}>${remark.RushCharge?.toFixed(1)}</Text>
@@ -183,16 +191,16 @@ const ChargingDataComponent: React.FC<ChargingDataComponentProps> = ({
         </View>: null }
         {(remark.ElseKwh) ? 
         <View>
-          <View className='w-full flex-row justify-between mt-4 pr-10'>
+          <View className='w-full flex-row justify-between mt-4'>
             <Text style={styles.leftLable}>平時總電量: </Text>
             <Text style={styles.rightLable}>{remark.ElseKwh?.toFixed(1)}</Text>
           </View>
-          <View className='w-full flex-row justify-between my-3 pr-10'>
+          <View className='w-full flex-row justify-between my-3'>
             <Text style={styles.leftLable}>平時電價({elses.from}-{elses.to}):</Text>
 
             <Text style={styles.rightLable}>${elses.price}</Text>
           </View>
-          <View className='w-full flex-row justify-between pr-10 mb-3'>
+          <View className='w-full flex-row justify-between mb-3'>
             <Text style={styles.leftLable}>平時總電費:</Text>
             
             <Text style={styles.rightLable}>${remark.ElseCharge?.toFixed(1)}</Text>
@@ -200,17 +208,16 @@ const ChargingDataComponent: React.FC<ChargingDataComponentProps> = ({
         </View>: null }
         {(remark.OffKwh) ? 
         <View>
-          <View className='w-full flex-row justify-between mt-4 pr-10'>
+          <View className='w-full flex-row justify-between mt-4'>
             <Text style={styles.leftLable}>穀時總電量: </Text>
             <Text style={styles.rightLable}>{remark.OffKwh?.toFixed(1)}</Text>
           </View>
-          <View className='w-full flex-row justify-between my-3 pr-10'>
+          <View className='w-full flex-row justify-between my-3'>
               <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>
-            
+          <View className='w-full flex-row justify-between mb-3'>
+            <Text style={styles.leftLable}>穀時總電費:</Text>    
             <Text style={styles.rightLable}>${remark.OffCharge?.toFixed(1)}</Text>
           </View>
         </View>: null }
@@ -219,15 +226,15 @@ const ChargingDataComponent: React.FC<ChargingDataComponentProps> = ({
   } else {
     return (
       <View>
-        <View className='w-full flex-row justify-between mt-4 pr-10'>
+        <View className='w-full flex-row justify-between mt-4'>
             <Text style={styles.leftLable}>總電量: </Text>
             <Text style={styles.rightLable}>{remark.TotalPower?.toFixed(1)}</Text>
           </View>
-          <View className='w-full flex-row justify-between my-3 pr-10'>
+          <View className='w-full flex-row justify-between my-3'>
               <Text style={styles.leftLable}>電價: </Text>
             <Text style={styles.rightLable}>${list?.connector?.EquipmentID?.StationID?.price}</Text>
           </View>
-          <View className='w-full flex-row justify-between pr-10 mb-3'>
+          <View className='w-full flex-row justify-between mb-3'>
             <Text style={styles.leftLable}>總電費: </Text>
             
             <Text style={styles.rightLable}>${totalPrice}</Text>
@@ -253,7 +260,10 @@ const styles = StyleSheet.create({
     color:'#888888',
   },
   rightLable: {
-    fontSize: 17
+    fontSize: 17,
+    flex: 1,
+    flexWrap: 'wrap',
+    textAlign: 'right',
   },
 })
 export default ChargingDetailsPageComponent;