|
@@ -1,56 +1,57 @@
|
|
|
-import { View, Text, Icon } from '@tarojs/components'
|
|
|
|
|
|
|
+import { View, Text, Icon, ScrollView } from '@tarojs/components'
|
|
|
import './Timeline.scss'
|
|
import './Timeline.scss'
|
|
|
import { TimelineType } from '@/utils/types'
|
|
import { TimelineType } from '@/utils/types'
|
|
|
import { IconRadio, IconRadioCheck, IconRadioCross } from '../basic/Icons'
|
|
import { IconRadio, IconRadioCheck, IconRadioCross } from '../basic/Icons'
|
|
|
|
|
|
|
|
|
|
|
|
|
export default function Component(props: { items: any[], title?: string, type?: TimelineType, showLastLine?: boolean }) {
|
|
export default function Component(props: { items: any[], title?: string, type?: TimelineType, showLastLine?: boolean }) {
|
|
|
- return <View className="timeline">
|
|
|
|
|
- {
|
|
|
|
|
- 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} />
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ 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'} />
|
|
|
{
|
|
{
|
|
|
- item.status == 'un_done' && <IconRadioCross width={16} color={item.color} />
|
|
|
|
|
|
|
+ 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>
|
|
|
}
|
|
}
|
|
|
- <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>
|
|
|
|
|
|
|
+ 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>
|
|
|
}
|
|
}
|
|
|
- </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 &&
|
|
|
|
|
|
|
+ {/* {index !== props.items.length - 1 &&
|
|
|
<View className='timeline-line'
|
|
<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' }}
|
|
style={{ background: (props.items[index + 1].status == 'done' && item.status == 'done') ? 'linear-gradient(to top, ' + props.items[index + 1].color + ', ' + item.color + ')' : '#ffffff66' }}
|
|
|
/>}
|
|
/>}
|
|
@@ -61,9 +62,10 @@ export default function Component(props: { items: any[], title?: string, type?:
|
|
|
/>
|
|
/>
|
|
|
} */}
|
|
} */}
|
|
|
|
|
|
|
|
- </View>
|
|
|
|
|
- ))
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ </View>
|
|
|
|
|
+ ))
|
|
|
|
|
+ }
|
|
|
|
|
+ </View>
|
|
|
|
|
|
|
|
</View>
|
|
</View>
|
|
|
}
|
|
}
|