钥匙分享

src/views/Home/NormaIndex.tsx

@@ -134,6 +134,7 @@ const NormaIndex: React.FC = () => {
         
         const response = await apiService.getDeviceList();
        
+        
         if (response?.code == 200 && response.data) {
             const defaultDev = response.data.find((device: DeviceType) => device.isDefault == 1);
             if (defaultDev) {
@@ -148,7 +149,7 @@ const NormaIndex: React.FC = () => {
         try {
 
             const response = await apiService.getDeviceList();
-
+            console.log(response,'response');
             if (response?.code === 200 && response.data) {
                 const defaultDev = response.data.find((device: DeviceType) => device.isDefault == 1);
                 if (defaultDev) {

src/views/device/KeyDetail.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { StyleSheet, View, Image, TouchableOpacity, Modal } from 'react-native';
 import { Layout, Text, Avatar, Button, TopNavigation, TopNavigationAction, Icon, Card } from '@ui-kitten/components';
 import { rpx } from '../../utils/rpx';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import { apiService } from '../../utils/api';
+import Toast from 'react-native-toast-message';
 
 interface KeyItem {
     keyId: string;
@@ -16,136 +17,173 @@ interface KeyItem {
 }
 
 const BackIcon = (props) => (
-    <Icon
+    <Icon {...props} name='arrow-back' />
-        {...props}
-        name='arrow-back'
-    />
 );
 
 const KeyDetail = () => {
     const navigation = useNavigation();
     const route = useRoute();
-    const keyItem = route.params?.keyItem as KeyItem;
+    const keyId = route.params?.keyItem.keyId;
-    const [visible, setVisible] = React.useState(false);
+    const [keyItem, setKeyItem] = useState<KeyItem | null>(null);
-    const [showTimeModal, setShowTimeModal] = React.useState(false);
+    const [visible, setVisible] = useState(false);
-    const [selectedTime, setSelectedTime] = React.useState('');
+    const [showTimeModal, setShowTimeModal] = useState(false);
+    const [selectedTime, setSelectedTime] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
     const timeOptions = ['1天', '7天', '30天', '永久'];
 
-    const showDeleteModal = () => {
+    // 获取钥匙详情
-        setVisible(true);
+    const fetchKeyInfo = async () => {
-    };
+        try {
-
+            setIsLoading(true);
-    const hideDeleteModal = () => {
+            const response = await apiService.getKeyInfo(keyId);
-        setVisible(false);
+            if (response.code === 200 && response.data) {
-
+                setKeyItem(response.data);
-    };
+            } else {
-
+                Toast.show({
-    const handleDelete = () => {
+                    type: 'error',
-        // 这里添加删除逻辑
+                    text1: '获取钥匙信息失败',
-        hideDeleteModal();
-        apiService.deleteKey(keyItem.keyId).then(res => {
-            console.log(res,'resresres');
-            if (res.code == 200) {
-                navigation.goBack();
-            }
                 });
+            }
+        } catch (error) {
+            console.error('获取钥匙信息错误:', error);
+            Toast.show({
+                type: 'error',
+                text1: '获取钥匙信息失败',
+            });
+        } finally {
+            setIsLoading(false);
+        }
     };
 
-    const navigateBack = () => {
+    // 组件挂载和 keyId 变化时获取数据
+    useEffect(() => {
+        if (keyId) {
+            fetchKeyInfo();
+        }
+    }, [keyId]);
+
+    const showDeleteModal = () => setVisible(true);
+    const hideDeleteModal = () => setVisible(false);
+
+    const handleDelete = async () => {
+        try {
+            setIsLoading(true);
+            const res = await apiService.deleteKey(keyId);
+            if (res.code === 200) {
+                Toast.show({
+                    type: 'success',
+                    text1: '删除成功',
+                });
                 navigation.goBack();
+            } else {
+                Toast.show({
+                    type: 'error',
+                    text1: res.msg || '删除失败',
+                });
+            }
+        } catch (error) {
+            console.error('删除钥匙错误:', error);
+            Toast.show({
+                type: 'error',
+                text1: '删除失败',
+            });
+        } finally {
+            setIsLoading(false);
+            hideDeleteModal();
+        }
     };
 
-    const handleTimeSelect = (time: string) => {
+    const handleTimeSelect = async (time: string) => {
         setSelectedTime(time);
         
-        // 将中文时间选项转换为天数
+        if (!keyItem) return;
+
         let days = 0;
         switch (time) {
-            case '1天':
+            case '1天': days = 1; break;
-                days = 1;
+            case '7天': days = 7; break;
-                break;
+            case '30天': days = 30; break;
-            case '7天':
+            case '永久': days = 36500; break;
-                days = 7;
-                break;
-            case '30天':
-                days = 30;
-                break;
-            case '永久':
-                // 设置为100年
-                days = 36500;
-                break;
         }
     
-        // 基于创建时间计算新的过期时间
         const baseDate = new Date(keyItem.createTime);
         const newExpirationDate = new Date(baseDate.getTime() + days * 24 * 60 * 60 * 1000);
         
-        // 设置时间为23:59:59
         newExpirationDate.setHours(23);
         newExpirationDate.setMinutes(59);
         newExpirationDate.setSeconds(59);
     
-        // 格式化日期为 YYYY-MM-DD HH:mm:ss
         const formattedDate = newExpirationDate.getFullYear() + '-' +
             String(newExpirationDate.getMonth() + 1).padStart(2, '0') + '-' +
             String(newExpirationDate.getDate()).padStart(2, '0') + ' ' +
             String(newExpirationDate.getHours()).padStart(2, '0') + ':' +
             String(newExpirationDate.getMinutes()).padStart(2, '0') + ':' +
             String(newExpirationDate.getSeconds()).padStart(2, '0');
-        console.log(formattedDate,'formattedDate');
+
-        // 调用API更新过期时间
+        try {
-        const data = {
+            setIsLoading(true);
-            keyId: keyItem.keyId,
+            const res = await apiService.updateKey({
+                keyId: keyId,
                 expirationTime: formattedDate
-        };
-        apiService.updateKey(data).then(res => {
-            console.log(res,'resresres');
-            if (res.code === 200) {
-                // 更新成功后关闭模态框
-                setShowTimeModal(false);
-                // 可以添加成功提示或刷新页面的逻辑
-            }
             });
+
+            if (res.code === 200) {
+                Toast.show({
+                    type: 'success',
+                    text1: '更新成功',
+                });
+                // 更新成功后重新获取钥匙信息
+                await fetchKeyInfo();
+            } else {
+                Toast.show({
+                    type: 'error',
+                    text1: res.msg || '更新失败',
+                });
+            }
+        } catch (error) {
+            console.error('更新钥匙有效期错误:', error);
+            Toast.show({
+                type: 'error',
+                text1: '更新失败',
+            });
+        } finally {
+            setIsLoading(false);
+            setShowTimeModal(false);
+        }
     };
 
+    const navigateBack = () => navigation.goBack();
     const BackAction = () => (
-        <TopNavigationAction
+        <TopNavigationAction icon={BackIcon} onPress={navigateBack} />
-            icon={BackIcon}
-            onPress={navigateBack}
-        />
     );
+
     const calculateRemainingTime = (expirationTime: string): string => {
         const now = new Date();
         const expiration = new Date(expirationTime);
         const diffTime = expiration.getTime() - now.getTime();
 
-        // 如果已过期
+        if (diffTime <= 0) return '已过期';
-        if (diffTime <= 0) {
-            return '已过期';
-        }
 
-        // 计算剩余天数、小时、分钟
         const days = Math.floor(diffTime / (1000 * 60 * 60 * 24));
         const hours = Math.floor((diffTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
         const minutes = Math.floor((diffTime % (1000 * 60 * 60)) / (1000 * 60));
 
-        if (days > 0) {
+        if (days > 0) return `${days}天${hours}小时`;
-            return `${days}天${hours}小时`;
+        if (hours > 0) return `${hours}小时${minutes}分钟`;
-        } else if (hours > 0) {
-            return `${hours}小时${minutes}分钟`;
-        } else {
         return `${minutes}分钟`;
-        }
     };
+
     const RightIcon = (props: any) => (
         <Image
             source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uGq4yJlU1ZZRkwiJ8Y74' }}
             style={styles.arrowIcon}
         />
     );
+
     const toQrCode = () => {
-        navigation.navigate('ShareQrcode', { QrId: keyItem.keyId });
+        navigation.navigate('ShareQrcode', { QrId: keyId });
     };
+
     return (
         <Layout style={styles.container}>
             <TopNavigation