diff --git a/src/api/hjm/hjmViolation/model/index.ts b/src/api/hjm/hjmViolation/model/index.ts index d4d3f3c..4f8cbe7 100644 --- a/src/api/hjm/hjmViolation/model/index.ts +++ b/src/api/hjm/hjmViolation/model/index.ts @@ -8,6 +8,8 @@ export interface HjmViolation { id?: number; // 车辆编号 code?: string; + // 车辆图片 + image?: string; // 标题 title?: string; // 文章分类ID diff --git a/src/components/FixedButton.tsx b/src/components/FixedButton.tsx new file mode 100644 index 0000000..f2a1291 --- /dev/null +++ b/src/components/FixedButton.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import {View} from '@tarojs/components'; +import {Button} from '@nutui/nutui-react-taro' + +interface FixedButtonProps { + text?: string; + onClick?: () => void; + icon?: React.ReactNode; + disabled?: boolean; + background?: string; +} + +function FixedButton({text, onClick, icon, disabled, background}: FixedButtonProps) { + return ( + <> + {/* 底部安全区域占位 */} + + + + + + ) +} + +export default FixedButton; diff --git a/src/hjm/violation/Items.tsx b/src/hjm/violation/Items.tsx new file mode 100644 index 0000000..c2d2637 --- /dev/null +++ b/src/hjm/violation/Items.tsx @@ -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 ( + + + {props.data?.map((item, index) => { + return ( + Taro.navigateTo({url: `/hjm/violation/detail?id=${item.code}`})}> + + + {item.userId == Taro.getStorageSync('UserId') && ( + + )} + + + + {item.title} + 车辆编号:{item.code} + 违章描述:{item.comments} + 创建时间:{item.createTime} + + + + ) + })} + {(!props.data || props.data.length === 0) && ( + + 暂无数据 + + )} + + + + ) +} +export default BestSellers diff --git a/src/hjm/violation/add.tsx b/src/hjm/violation/add.tsx index 99ae5ee..c2b78b1 100644 --- a/src/hjm/violation/add.tsx +++ b/src/hjm/violation/add.tsx @@ -274,19 +274,19 @@ function Add() { } style={{padding: '12px 16px'}}> - - - {statusOptions.find(option => option.value === formData.status)?.text || '请选择'} - - - } style={{padding: '12px 16px'}} onClick={() => setIsPickerVisible(true)}> - + {/**/} + {/* */} + {/* {statusOptions.find(option => option.value === formData.status)?.text || '请选择'}*/} + {/* */} + {/* */} + {/*} style={{padding: '12px 16px'}} onClick={() => setIsPickerVisible(true)}>*/} + {/**/} diff --git a/src/hjm/violation/list.tsx b/src/hjm/violation/list.tsx index 81c6ecc..d05d1e2 100644 --- a/src/hjm/violation/list.tsx +++ b/src/hjm/violation/list.tsx @@ -1,407 +1,173 @@ -import React, {useEffect, useState} from "react"; -import { - Loading, - Empty, - Button, - Input, - Tag, - Space, - Pagination -} from '@nutui/nutui-react-taro' -import {useRouter} from '@tarojs/taro' -import {Search, Calendar, Truck, File, AddCircle} from '@nutui/icons-react-taro' -import Taro, {useDidShow} from '@tarojs/taro' +import {useEffect, useState, CSSProperties} from "react"; +import {Search} from '@nutui/icons-react-taro' +import {Button, Input, InfiniteLoading} from '@nutui/nutui-react-taro' import {pageHjmViolation} from "@/api/hjm/hjmViolation"; import {HjmViolation} from "@/api/hjm/hjmViolation/model"; +import Taro from '@tarojs/taro' +import Items from "./Items"; +import {useRouter} from '@tarojs/taro' +import {getUserInfo} from "@/api/layout"; +import navTo from "@/utils/common"; +import FixedButton from "@/components/FixedButton"; +const InfiniteUlStyle: CSSProperties = { + height: '80vh', + width: '100%', + padding: '0', + overflowY: 'auto', + overflowX: 'hidden', +} /** - * 报险记录列表页面 + * 文章终极列表 + * @constructor */ -const List: React.FC = () => { +const ViolationList = () => { const {params} = useRouter(); - const [list, setList] = useState([]) - const [loading, setLoading] = useState(false) const [keywords, setKeywords] = useState('') - const [refreshing, setRefreshing] = useState(false) - const [page, setPage] = useState(1) - const [limit, setLimit] = useState(10) - const [total, setTotal] = useState(0) - const [needRefresh, setNeedRefresh] = useState(true) - const isReloadingRef = React.useRef(false) // 使用useRef防止并发请求 + const [list, setList] = useState([]) + const [page, setPage] = useState(1) + const [hasMore, setHasMore] = useState(true) + const [loading, setLoading] = useState(false) - console.log(refreshing) - // 获取状态显示 - const getStatusDisplay = (status?: number) => { - switch (status) { - case 0: - return {text: '未处理', color: '#faad14', bgColor: '#fffbe6'} - case 1: - return {text: '已处理', color: '#52c41a', bgColor: '#f6ffed'} - case 2: - return {text: '已驳回', color: '#ff4d4f', bgColor: '#fff2f0'} - default: - return {text: '未知', color: '#8c8c8c', bgColor: '#f5f5f5'} - } + const onKeywords = (keywords: string) => { + setKeywords(keywords) } - const reload = async (showLoading = true) => { - // 防止并发请求,使用ref而不state避免重渲染 - if (isReloadingRef.current) { - console.log('[防重复] 正在加载中,跳过本次请求') - return + const loadList = async (isRefresh = false) => { + if (loading) return; + + setLoading(true) + + // 搜索条件 + const where: any = { + keywords: keywords.trim(), + page, + limit: 10, // 直接使用10,不通过state } - isReloadingRef.current = true - console.log('[开始加载] showLoading:', showLoading, 'page:', page, 'limit:', limit) + // 读取用户信息 + const user = await getUserInfo(); - // 不要在这里设置limit,避免触发useEffect - // setLimit(10) // 删除这行! - - try { - if (showLoading) setLoading(true) - setRefreshing(true) - - const where: any = { - keywords: keywords.trim(), - page, - limit: 10, // 直接使用10,不通过state - } - - const roleCode = Taro.getStorageSync('RoleCode'); - if (roleCode == 'kuaidi') { - if (Taro.getStorageSync('OrganizationParentId') == 0) { - // @ts-ignore - where.organizationParentId = Taro.getStorageSync('OrganizationId'); - } else { - // @ts-ignore - where.organizationId = Taro.getStorageSync('OrganizationId'); - } - } - if(params.id){ - where.code = params.id; - } - - const res = await pageHjmViolation(where) - console.log('[请求成功] 获取到', res?.list?.length, '条数据') - - setList(res?.list || []) - setTotal(res?.count || 0) - } catch (error) { - console.error('[请求失败]', error) - Taro.showToast({ - title: '获取报险记录失败', - icon: 'error' - }) - } finally { + // 判断身份 + const roleCode = Taro.getStorageSync('RoleCode'); + if(roleCode == 'kuaidiyuan'){ + // @ts-ignore + where.driverId = user.userId; + } + if(roleCode == 'zhandian'){ + // @ts-ignore + where.organizationId = user.organizationId; + } + if(roleCode == 'kuaidi'){ + // @ts-ignore + where.organizationParentId = user.organizationId; + } + if(roleCode == 'Installer'){ + // @ts-ignore + where.installerId = user.userId; + } + if(roleCode == 'user'){ setLoading(false) - setRefreshing(false) - isReloadingRef.current = false - console.log('[加载结束]') + return false; + } + if(params.id){ + where.code = params.id; + } + + // 获取车辆列表 + try { + const res = await pageHjmViolation(where); + if (res?.list && res?.list.length > 0) { + if (isRefresh) { + setList(res.list); + } else { + setList(prevList => [...prevList, ...res.list]); + } + setHasMore(res.list.length >= 10); // 如果返回的数据少于10条,说明没有更多了 + } else { + if (isRefresh) { + setList([]); + } + setHasMore(false); + } + } catch (error) { + console.error('获取车辆列表失败:', error); + if (isRefresh) { + setList([]); + } + setHasMore(false); + } finally { + setLoading(false); } } - const onSearch = () => { - reload() + const reload = async () => { + setPage(1); + await loadList(true); } - const onKeywordsChange = (value: string) => { - setKeywords(value) + const loadMore = async () => { + if (!hasMore || loading) return; + const nextPage = page + 1; + setPage(nextPage); + await loadList(); } - const onAddInsurance = () => { - Taro.navigateTo({ - url: '/hjm/violation/add' - }) - } - - // 页面显示时触发,包括从其他页面返回 - useDidShow(() => { - console.log('[生命周期] useDidShow 触发, needRefresh:', needRefresh) - if (needRefresh) { - console.log('[生命周期] 执行reload 由于 needRefresh=true') - // 先设置false,再调用reload,防止多次触发 - setNeedRefresh(false) - reload(false) - } - }) - - // 初始化effect - 只执行一次 useEffect(() => { - console.log('[生命周期] 组件初始化') - - // 监听刷新事件 - const handleRefresh = () => { - console.log('[事件] 接收到 violationListRefresh 事件') - setNeedRefresh(true) - } - - Taro.eventCenter.on('violationListRefresh', handleRefresh) - - // 初始加载数据 - console.log('[生命周期] 执行初始加载') reload().then() - - // 清理事件监听器 - return () => { - console.log('[生命周期] 组件卸载,清理事件监听') - Taro.eventCenter.off('violationListRefresh', handleRefresh) - } - }, []) // 空依赖,只执行一次 - - // 分页变化effect - 单独处理 - useEffect(() => { - // 跳过初始值,只在真正变化时才加载 - if (page !== 1) { - console.log('[分页变化] page变为', page, ',执行reload') - reload() - } - }, [page]) - - useEffect(() => { - // limit变化时重置到第一页 - if (limit !== 10) { - console.log('[分页变化] limit变为', limit, ',重置到第一页') - setPage(1) - reload() - } - }, [limit]) - - const onPageChange = (current: number) => { - setPage(current) - } + }, []) return ( <> - {/* 搜索栏 */} -
-
- - - -
-
- - {/* 报险记录列表 */} -
- {loading && list.length === 0 ? ( -
- 加载中... -
- ) : list.length === 0 ? ( - - - ) : ( -
- {list.map((item) => { - const statusDisplay = getStatusDisplay(item.status) - - return ( -
{ - Taro.navigateTo({ - url: `/hjm/violation/detail?id=${item.code}` - }) - }} - > -
-
-
- - - {item.title} - -
- - -
- - - 车辆编号:{item.code} - -
- -
- - - 创建时间:{item.createTime} - -
-
-
- - - {statusDisplay.text} - -
- - {/* 备注信息 */} - {item.comments && ( -
- {item.comments.length > 50 - ? `${item.comments.substring(0, 50)}...` - : item.comments - } -
- )} - {item.userId == Taro.getStorageSync('UserId') && ( -
- - - {/**/} - -
- )} -
- ) - })} -
- )} -
- - { - Taro.getStorageSync('RoleCode') == 'jiaojing' && ( +
+
- + display: 'flex', + alignItems: 'center', + background: '#fff', + padding: '0 10px', + borderRadius: '20px' + }} + > + + +
+ +
+
+
+
+ + + +
+ { + Taro.getStorageSync('RoleCode') == 'jiaojing' && ( + <> + navTo(`/hjm/violation/add`)} /> + ) } - - {/* 分页 */} - {list.length > 0 && ( -
- -
- )} ) } - -export default List +export default ViolationList