203 lines
6.4 KiB
TypeScript
203 lines
6.4 KiB
TypeScript
import React from "react";
|
||
import {Image, Space, Tag, Button} from '@nutui/nutui-react-taro'
|
||
import {Truck, User, Shield, Location} from '@nutui/icons-react-taro'
|
||
import Taro from '@tarojs/taro'
|
||
import {HjmCar} from "@/api/hjm/hjmCar/model";
|
||
|
||
interface BestSellersProps {
|
||
data: HjmCar[]
|
||
onRefresh?: () => void
|
||
}
|
||
|
||
/**
|
||
* 车辆列表组件
|
||
*/
|
||
const BestSellers: React.FC<BestSellersProps> = ({data, onRefresh}) => {
|
||
|
||
// 获取保险状态显示
|
||
const getInsuranceStatusDisplay = (status?: number) => {
|
||
switch (status) {
|
||
case 0:
|
||
return {text: '未投保', color: '#ff4d4f', bgColor: '#fff2f0'}
|
||
case 1:
|
||
return {text: '已投保', color: '#52c41a', bgColor: '#f6ffed'}
|
||
case 2:
|
||
return {text: '即将到期', color: '#faad14', bgColor: '#fffbe6'}
|
||
default:
|
||
return {text: '未知', color: '#8c8c8c', bgColor: '#f5f5f5'}
|
||
}
|
||
}
|
||
|
||
// 跳转到车辆详情
|
||
const navigateToDetail = (item: HjmCar) => {
|
||
Taro.navigateTo({
|
||
url: `/hjm/query?id=${item.id}`
|
||
})
|
||
}
|
||
|
||
// 快速报险
|
||
const quickInsurance = (item: HjmCar, event: any) => {
|
||
event.stopPropagation()
|
||
Taro.navigateTo({
|
||
url: `/hjm/bx/bx-add?carId=${item.id}&carCode=${item.code}`
|
||
})
|
||
}
|
||
|
||
if (!data || data.length === 0) {
|
||
return null
|
||
}
|
||
|
||
return (
|
||
<div style={{padding: '0 16px', marginBottom: '16px'}}>
|
||
<div style={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: '12px'
|
||
}}>
|
||
{data.map((item, index) => {
|
||
const insuranceStatus = getInsuranceStatusDisplay(item.insuranceStatus)
|
||
|
||
return (
|
||
<div
|
||
key={index}
|
||
style={{
|
||
backgroundColor: '#fff',
|
||
borderRadius: '12px',
|
||
padding: '16px',
|
||
boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
|
||
border: '1px solid #f0f0f0'
|
||
}}
|
||
onClick={() => navigateToDetail(item)}
|
||
>
|
||
<div style={{display: 'flex', gap: '12px'}}>
|
||
{/* 车辆图片 */}
|
||
<div style={{flexShrink: 0}}>
|
||
<Image
|
||
src={item.image || 'https://via.placeholder.com/80x80?text=车辆'}
|
||
mode="aspectFill"
|
||
radius="8px"
|
||
width="80"
|
||
height="80"
|
||
style={{
|
||
border: '1px solid #f0f0f0'
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
{/* 车辆信息 */}
|
||
<div style={{flex: 1, minWidth: 0}}>
|
||
<Space direction="vertical" size={8}>
|
||
{/* 车辆编号 */}
|
||
<div style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '8px'
|
||
}}>
|
||
<Truck size={16} color="#1890ff"/>
|
||
<span style={{
|
||
fontSize: '16px',
|
||
fontWeight: 'bold',
|
||
color: '#262626'
|
||
}}>
|
||
{item.code || '未知编号'}
|
||
</span>
|
||
</div>
|
||
|
||
{/* 快递公司 */}
|
||
<div style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '8px'
|
||
}}>
|
||
<Location size={14} color="#8c8c8c"/>
|
||
<span style={{fontSize: '13px', color: '#8c8c8c'}}>
|
||
快递公司：
|
||
</span>
|
||
<span style={{fontSize: '13px', color: '#595959'}}>
|
||
{item.parentOrganization || '未知'}
|
||
</span>
|
||
</div>
|
||
|
||
{/* 保险状态 */}
|
||
<div style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '8px'
|
||
}}>
|
||
<Shield size={14} color="#8c8c8c"/>
|
||
<span style={{fontSize: '13px', color: '#8c8c8c'}}>
|
||
保险状态：
|
||
</span>
|
||
<Tag
|
||
color={insuranceStatus.color}
|
||
style={{
|
||
backgroundColor: insuranceStatus.bgColor,
|
||
border: `1px solid ${insuranceStatus.color}`,
|
||
fontSize: '12px'
|
||
}}
|
||
>
|
||
{insuranceStatus.text}
|
||
</Tag>
|
||
</div>
|
||
|
||
{/* 操作员 */}
|
||
<div style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '8px'
|
||
}}>
|
||
<User size={14} color="#8c8c8c"/>
|
||
<span style={{fontSize: '13px', color: '#8c8c8c'}}>
|
||
操作员：
|
||
</span>
|
||
<span style={{fontSize: '13px', color: '#595959'}}>
|
||
{item.driver || '未绑定'}
|
||
</span>
|
||
</div>
|
||
</Space>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 操作按钮 */}
|
||
<div style={{
|
||
marginTop: '12px',
|
||
paddingTop: '12px',
|
||
borderTop: '1px solid #f0f0f0',
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center'
|
||
}}>
|
||
<Button
|
||
type="primary"
|
||
size="small"
|
||
onClick={(e) => quickInsurance(item, e)}
|
||
style={{
|
||
borderRadius: '16px',
|
||
fontSize: '12px'
|
||
}}
|
||
>
|
||
一键报险
|
||
</Button>
|
||
|
||
<Button
|
||
type="default"
|
||
size="small"
|
||
onClick={() => navigateToDetail(item)}
|
||
style={{
|
||
borderRadius: '16px',
|
||
fontSize: '12px'
|
||
}}
|
||
>
|
||
查看详情
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default BestSellers
|