修复已知问题
This commit is contained in:
202
src/hjm/bx/BestSellers.tsx
Normal file
202
src/hjm/bx/BestSellers.tsx
Normal file
@@ -0,0 +1,202 @@
|
||||
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
|
||||
Reference in New Issue
Block a user