11

src/utils/api.ts

@@ -111,4 +111,5 @@ export const apiService = {
   updateKey: (data: any) => api.put('/appVerify/editKey', data),
   deleteKey: (key: any) => api.delete('/appVerify/del/' + key),
   getExpiredKeys: () => api.get('/appVerify/getExpiredKeyListByOwnerId'),
+  // updateKeyExpiration: (keyId: string, expirationTime: string) => api.put('/appVerify/updateKeyExpiration', { keyId, expirationTime }),
 };

src/views/device/DeviceShare.tsx

@@ -71,9 +71,9 @@ const DeviceShare = () => {
                 <Text style={styles.shareTitle}>共享钥匙（{keyList.length}/3）</Text>
                 <Text style={styles.shareTxt}>临时借用车辆，可以使用基础控车功能</Text>
 
-                {keyList.map((key) => (
+                {keyList.length > 0 && keyList.map((key) => (
                     <TouchableOpacity
-                        key={key.id}
+                        key={key.id || Math.random().toString()} // 确保 key 是唯一的
                         onPress={() => {
                             navigation.navigate('ShareDetailScreen', { keyItem: key });
                         }}

src/views/device/ExpiredKeysScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { ImageBackground, FlatList, StyleSheet, Image } from 'react-native';
+import { ImageBackground, FlatList, StyleSheet } from 'react-native';
 import { TopNavigation, TopNavigationAction, Icon, Card, Layout, Text } from '@ui-kitten/components';
 import { rpx } from '../../utils/rpx';
 import { apiService } from '../../utils/api';
@@ -8,6 +8,10 @@ const BackIcon = (props) => (
   <Icon {...props} name='arrow-back' />
 );
 
+const EmptyIcon = (props) => (
+  <Icon {...props} name='file-text-outline' width={rpx(100)} height={rpx(100)} fill='#C5CEE0'/>
+);
+
 const ExpiredKeysScreen = ({ navigation }) => {
   const [data, setData] = useState([]);
 
@@ -53,12 +57,12 @@ const ExpiredKeysScreen = ({ navigation }) => {
           contentContainerStyle={styles.list}
         />
       ) : (
-        <Layout style={styles.emptyContainer}>
-          {/* <Image
-            source={{ uri: 'https://example.com/empty-image.png' }} // 替换为你的缺省图URL
-            style={styles.emptyImage}
-          /> */}
-          <Text category='h5' style={styles.emptyText}>暂无失效分享</Text>
+        <Layout style={styles.emptyContainer} level='1'>
+          <EmptyIcon />
+          <Text category='h5' style={styles.emptyTitle}>暂无失效分享</Text>
+          <Text category='s1' style={styles.emptyText}>
+            当前没有已失效的分享钥匙记录
+          </Text>
         </Layout>
       )}
     </ImageBackground>
@@ -91,15 +95,17 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    padding: rpx(20),
+    padding: rpx(40),
+    backgroundColor: 'transparent',
   },
-  emptyImage: {
-    width: rpx(200),
-    height: rpx(200),
+  emptyTitle: {
+    marginTop: rpx(40),
     marginBottom: rpx(20),
+    color: '#3D3D3D',
   },
   emptyText: {
-    color: '#808080',
+    color: '#8F9BB3',
+    textAlign: 'center',
   },
 });
 

src/views/device/KeyDetail.tsx

@@ -12,6 +12,7 @@ interface KeyItem {
     sharePhone: string;
     status: string;
     expirationTime: string;
+    createTime: string;
 }
 
 const BackIcon = (props) => (
@@ -56,8 +57,55 @@ const KeyDetail = () => {
 
     const handleTimeSelect = (time: string) => {
         setSelectedTime(time);
-        setShowTimeModal(false);
-        // 这里添加更新有效期的逻辑
+        
+        // 将中文时间选项转换为天数
+        let days = 0;
+        switch (time) {
+            case '1天':
+                days = 1;
+                break;
+            case '7天':
+                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更新过期时间
+        const data = {
+            keyId: keyItem.keyId,
+            expirationTime: formattedDate
+        };
+        apiService.updateKey(data).then(res => {
+            console.log(res,'resresres');
+            if (res.code === 200) {
+                // 更新成功后关闭模态框
+                setShowTimeModal(false);
+                // 可以添加成功提示或刷新页面的逻辑
+            }
+        });
     };
 
     const BackAction = () => (