asios/app/weal/components/DollPrizeModal.tsx

import { Images } from '@/constants/images';
import React, { forwardRef, useImperativeHandle, useState } from 'react';
import { Image, Modal, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

export interface DollPrizeModalRef {
    show: (data: any[]) => void;
    close: () => void;
}

export const DollPrizeModal = forwardRef<DollPrizeModalRef>((_, ref) => {
    const [visible, setVisible] = useState(false);
    const [prizeList, setPrizeList] = useState<any[]>([]);

    useImperativeHandle(ref, () => ({
        show: (data) => {
            setPrizeList(data);
            setVisible(true);
        },
        close: () => setVisible(false),
    }));

    if (!visible) return null;

    return (
        <Modal visible={visible} transparent animationType="fade" onRequestClose={() => setVisible(false)}>
            <View style={styles.overlay}>
                <TouchableOpacity style={styles.mask} activeOpacity={1} onPress={() => setVisible(false)} />
                <View style={styles.contentContainer}>
                    <View style={styles.wrapper}>
                        <Image source={{ uri: Images.welfare.toys.rewardBg }} style={styles.ruleBg} resizeMode="stretch" />
                        <View style={styles.prizeContainer}>
                            <ScrollView contentContainerStyle={styles.scrollContent}>
                                {prizeList.map((item, index) => (
                                    <View key={item.spuId || index} style={[styles.prizeItem, (index + 1) % 3 === 0 && styles.noRightMargin]}>
                                        <View style={styles.prizeImgBox}>
                                            <Image source={{ uri: item.cover }} style={styles.prizeImg} resizeMode="contain" />
                                        </View>
                                        <Text style={styles.prizeText} numberOfLines={1}>{item.name}</Text>
                                    </View>
                                ))}
                            </ScrollView>
                        </View>
                    </View>
                    <TouchableOpacity onPress={() => setVisible(false)} style={styles.closeBtn}>
                        <Image source={{ uri: Images.mine.dialogClose }} style={styles.closeIcon} />
                    </TouchableOpacity>
                </View>
            </View>
        </Modal>
    );
});

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.6)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    mask: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
    contentContainer: {
        width: '100%',
        alignItems: 'center',
    },
    wrapper: {
        width: 326, // 652rpx
        height: 452, // 904rpx
        position: 'relative',
        alignItems: 'center',
    },
    ruleBg: {
        width: '100%',
        height: '100%',
        position: 'absolute',
    },
    prizeContainer: {
        position: 'absolute',
        top: 78.5, // 157rpx
        left: 27, // 54rpx
        right: 27, // 54rpx
        height: 357.5, // 715rpx
        width: 272, // 544rpx
    },
    scrollContent: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'flex-start',
    },
    prizeItem: {
        width: 80, // 160rpx
        height: 116.5, // 233rpx
        marginRight: 10, // 20rpx
        marginTop: 11.5, // 23rpx
        alignItems: 'center',
    },
    noRightMargin: {
        marginRight: 0,
    },
    prizeImgBox: {
        width: 80, // 160rpx
        height: 100, // 200rpx
        justifyContent: 'center',
        alignItems: 'center',
    },
    prizeImg: {
        width: '100%',
        height: '100%',
    },
    prizeText: {
        color: '#B58100',
        marginTop: 6,
        textAlign: 'center',
        fontSize: 12,
        width: '100%',
    },
    closeBtn: {
        marginTop: 15,
    },
    closeIcon: {
        width: 30, // 60rpx
        height: 30,
    }
});