feat(violation):重构违章列表页面并新增组件- 移除原有列表展示逻辑,使用Items组件渲染列表项
- 新增FixedButton组件用于底部固定按钮- 实现无限滚动加载功能替换原有分页 - 调整搜索栏样式和位置,优化用户体验- 根据用户角色过滤数据展示内容- 添加车辆图片字段支持 - 注释掉处理状态选择功能,待后续完善
This commit is contained in:
59
src/hjm/violation/Items.tsx
Normal file
59
src/hjm/violation/Items.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import {useEffect} from "react";
|
||||
import {Image, Space,Button} from '@nutui/nutui-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {View} from '@tarojs/components'
|
||||
import {HjmViolation} from "@/api/hjm/hjmViolation/model";
|
||||
import navTo from "@/utils/common";
|
||||
|
||||
interface BestSellersProps {
|
||||
data: HjmViolation[];
|
||||
}
|
||||
|
||||
const BestSellers = (props: BestSellersProps) => {
|
||||
const reload = () => {
|
||||
// 可以在这里添加重新加载逻辑
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
reload()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<View className={'px-2 mb-4'}>
|
||||
<View className={'flex flex-col justify-between items-center rounded-lg px-3'}>
|
||||
{props.data?.map((item, index) => {
|
||||
return (
|
||||
<View key={item.id || index} className={'flex bg-white rounded-lg w-full p-3 mb-3'}
|
||||
onClick={() => Taro.navigateTo({url: `/hjm/violation/detail?id=${item.code}`})}>
|
||||
<View className={'flex flex-col'}>
|
||||
<Image src={item.image && JSON.parse(item.image)[0].url} mode={'scaleToFill'}
|
||||
radius="10%" width="70" height="70" className={'mb-1'}/>
|
||||
{item.userId == Taro.getStorageSync('UserId') && (
|
||||
<Button type={'default'} size="small" onClick={() => navTo(`/hjm/violation/add?id=${item.id}`)}>修改</Button>
|
||||
)}
|
||||
</View>
|
||||
<View className={'mx-3 flex flex-col'}>
|
||||
<Space direction={'vertical'}>
|
||||
<View className={'car-no text-lg font-bold'}>{item.title}</View>
|
||||
<View className={'flex text-xs text-gray-500'}>车辆编号:<span
|
||||
className={'text-gray-700'}>{item.code}</span></View>
|
||||
<View className={'flex text-xs text-gray-500'}>违章描述:<span
|
||||
className={'text-gray-700'}>{item.comments}</span></View>
|
||||
<View className={'flex text-xs text-gray-500'}>创建时间:<span
|
||||
className={'text-gray-700'}>{item.createTime}</span></View>
|
||||
</Space>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
{(!props.data || props.data.length === 0) && (
|
||||
<View className={'flex justify-center items-center py-10'}>
|
||||
<View className={'text-gray-500 text-sm'}>暂无数据</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<View style={{height: '170px'}}></View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
export default BestSellers
|
||||
Reference in New Issue
Block a user