taro/src/components/view/Timeline.tsx

import { View, Text, Icon, ScrollView } from '@tarojs/components'
import './Timeline.scss'
import { TimelineType } from '@/utils/types'
import { IconRadio, IconRadioCheck, IconRadioCross } from '../basic/Icons'


export default function Component(props: { items: any[], title?: string, type?: TimelineType, showLastLine?: boolean }) {
    return <View className="timeline" catchMove>
        <View>
            {
                props.title && <Text className='timeline_title'>{props.title}</Text>
            }
            {
                props.items.map((item, index) => (
                    <View className='timelineItem'>
                        <View className='timelineContentView' style={{ background: global.isDebug ? 'red' : 'transparent' }}>
                            {
                                item.status == 'padding' && <IconRadio width={16} color={item.color} />
                            }
                            {
                                item.status == 'done' && <IconRadioCheck width={16} color={item.color} />
                            }
                            {
                                item.status == 'un_done' && <IconRadioCross width={16} color={item.color} />
                            }
                            <View className='timelineContentDetail'>
                                <View className="timeline-time" style={{ color: item.color ? item.color : '#fff' }}>{item.title}</View>
                                <View style={{ flex: 1 }} />
                            </View>
                        </View>
                        <View className="timeline-detail">{item.content}
                            {
                                item.date && <View className="timeline-date">{item.date}</View>
                            }
                        </View>
                        <View className={index !== props.items.length - 1 ? 'timeline_line1 line1_bottom_space' : 'timeline_line1 line1_bottom_zero'} />
                        {
                            index !== props.items.length - 1 &&
                            <View className='timeline-line-bg' style={{ width: 16, background: global.isDebug ? 'red' : 'transparent' }}>
                                <View className='timeline-line1'
                                    style={{ background: (props.items[index + 1].status == 'done' && item.status == 'done') ? 'linear-gradient(to top, ' + props.items[index + 1].color + ', ' + item.color + ')' : '#ffffff66' }}
                                />
                            </View>
                        }
                        {
                            index == props.items.length - 1 && props.showLastLine &&
                            <View className='timeline-line-bg' style={{ width: 16, background: global.isDebug ? 'red' : 'transparent' }}>
                                <View className='timeline-line1'
                                    style={{ background: item.color }}
                                />
                            </View>
                        }

                        {/* {index !== props.items.length - 1 && 
                        <View className='timeline-line'
                            style={{ background: (props.items[index + 1].status == 'done' && item.status == 'done') ? 'linear-gradient(to top, ' + props.items[index + 1].color + ', ' + item.color + ')' : '#ffffff66' }}
                        />}
                    {
                        index == props.items.length - 1 && props.showLastLine &&
                        <View className='timeline-line'
                            style={{ background: item.color }}
                        />
                    } */}

                    </View>
                ))
            }
        </View>

    </View>
}