BikeApp_demo/src/views/device/DeviceShare.tsx

import React, { useEffect, useState, useCallback } from 'react';
import { View, Text, Image, TouchableOpacity, StyleSheet } from 'react-native';
import { useNavigation, useFocusEffect } from '@react-navigation/native';
import { apiService } from '../../utils/api';
import { rpx } from '../../utils/rpx';

interface KeyItem {
    id: string;
    avatarUrl: string;
    shareUserName: string;
    sharePhone: string;
    status: string;
    expirationTime: string;
}

const DeviceShare = () => {
    const navigation = useNavigation();
    const [keyList, setKeyList] = useState<KeyItem[]>([]);

    const getKeyList = async () => {
        const response = await apiService.getKeyListByOwnerId();
        console.log('response', response);
        if (response.code == 200) {
            setKeyList(response.data);
        }
    };

    const calculateRemainingTime = (expirationTime: string): string => {
        const now = new Date();
        const expiration = new Date(expirationTime);
        const diffTime = expiration.getTime() - now.getTime();

        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) {
            return `${days}天${hours}小时`;
        } else if (hours > 0) {
            return `${hours}小时${minutes}分钟`;
        } else {
            return `${minutes}分钟`;
        }
    };

    const getStatusText = (status: string | number) => {
        console.log('status', status);
        switch (status) {
            case '0':
            case 0:
                return '待领取';
            case '2':
            case 2:
                return '已领取';
            default:
                return '未知状态';
        }
    };

    useFocusEffect(
        useCallback(() => {
            getKeyList();
        }, [])
    );

    return (
        <View style={styles.container}>
            <View style={styles.shareBox}>
                <Text style={styles.shareTitle}>共享钥匙（{keyList.length}/3）</Text>
                <Text style={styles.shareTxt}>临时借用车辆，可以使用基础控车功能</Text>

                {keyList.length > 0 && keyList.map((key) => (
                    <TouchableOpacity
                        key={key.id || Math.random().toString()} // 确保 key 是唯一的
                        onPress={() => {
                            navigation.navigate('ShareDetailScreen', { keyItem: key });
                        }}
                    >
                        <View style={styles.card}>
                            <View style={styles.cardTop}>
                                <Image
                                    source={{ uri: key.avatarUrl || 'https://lxnapi.ccttiot.com/bike/img/static/uVnIDwcwQP7oo12PeYVJ' }}
                                    style={styles.cardTopImg}
                                />
                                <View style={styles.cardTopTxt}>
                                    <Text style={styles.cardTopName}>{key.shareUserName}</Text>
                                    <Text style={styles.cardTopPhone}>{key.sharePhone}</Text>
                                </View>
                                <Text style={[
                                    styles.cardType,
                                    { color: key.status == '0' ? '#FF9900' : '#4297F3' }
                                ]}>
                                    {getStatusText(key.status)}
                                </Text>
                            </View>
                            <View style={styles.cardBottom}>
                                <Text style={styles.lasttime}>
                                    剩余有效期：{calculateRemainingTime(key.expirationTime)}
                                </Text>
                                <Image
                                    source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uGq4yJlU1ZZRkwiJ8Y74' }}
                                    style={styles.lasttimeImg}
                                />
                            </View>
                        </View>
                    </TouchableOpacity>
                ))}

                {keyList.length < 3 && (
                    <TouchableOpacity onPress={() => {
                        navigation.navigate('AddShare' as never);
                    }}>
                        <View style={styles.addBtn}>
                            <Image
                                source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uI4CdJFzS1GkY1AzfFyG' }}
                                style={styles.addBtnImg}
                            />
                            <Text style={styles.addBtnTxt}>添加成员</Text>
                        </View>
                    </TouchableOpacity>
                )}
            </View>
            <TouchableOpacity onPress={() => {
                navigation.navigate('ExpiredKeysScreen' as never);
            }}>
                <View style={styles.shareTip}>
                    <Text style={styles.shareBtnTxt}>查看已失效共享</Text>
                    <Image
                        source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uGq4yJlU1ZZRkwiJ8Y74' }}
                        style={styles.lasttimeImg}
                    />
                </View>
            </TouchableOpacity>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F3FCFF',
        alignItems: 'center',
    },
    addBtnImg: {
        width: rpx(32),
        height: rpx(32),
    },
    shareTip: {
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: rpx(44),
    },
    shareBtnTxt: {
        fontSize: rpx(32),
        color: '#808080',
    },
    addBtn: {
        width: rpx(592),
        height: rpx(108),
        backgroundColor: '#ffffff',
        borderRadius: rpx(16),
        marginTop: rpx(30),
        borderWidth: rpx(2),
        borderColor: '#808080',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
    },
    addBtnTxt: {
        marginLeft: rpx(12),
        fontSize: rpx(36),
        color: '#808080',
    },
    cardBottom: {
        flexDirection: 'row',
        alignItems: 'center',
        display: 'flex',
        flexWrap: 'nowrap',
    },
    lasttime: {
        marginLeft: rpx(124),
        fontSize: rpx(24),
        color: '#4297F3',
    },
    lasttimeImg: {
        marginLeft: 'auto',
        width: rpx(24),
        height: rpx(24),
    },
    cardTop: {
        flexDirection: 'row',
        alignItems: 'center',
        display: 'flex',
        flexWrap: 'nowrap',
    },
    cardType: {
        marginLeft: 'auto',
        alignSelf: 'flex-start',
        fontSize: rpx(32),
        color: '#4297F3',
    },
    cardTopTxt: {
        marginLeft: rpx(28),
    },
    cardTopImg: {
        width: rpx(96),
        height: rpx(96),
        borderRadius: rpx(48),
    },
    cardTopName: {
        fontSize: rpx(44),
        color: '#3D3D3D',
    },
    cardTopPhone: {
        fontSize: rpx(36),
        color: '#808080',
    },
    shareBox: {
        width: rpx(688),
        borderRadius: rpx(30),
        backgroundColor: '#fff',
        padding: rpx(32),
    },
    shareTitle: {
        fontWeight: 'bold',
        fontSize: rpx(44),
        color: '#3D3D3D',
    },
    shareTxt: {
        marginTop: rpx(14),
        fontWeight: '500',
        fontSize: rpx(28),
        color: '#999',
    },
    card: {
        width: rpx(592),
        padding: rpx(32),
        marginTop: rpx(32),
        borderRadius: rpx(16),
        borderWidth: rpx(2),
        borderColor: '#808080',
    },
});

export default DeviceShare;