抽查详情优化

weapp/src/packages/maintenanceSpotCheck/spotCheckRoadDetail/index.jsx

@@ -15,6 +15,7 @@ function Index() {
 
   const [keyword, setKeyword] = useState('')
   const [roadDetailList, setRoadDetailList] = useState([])
+  const [isNoData, setIsNoData] = useState(false)
 
   useDidShow(() => {
     getDetail()
@@ -30,21 +31,17 @@ function Index() {
         } else {
           Taro.showToast({ title: '获取详情失败', icon: 'error' })
         }
+        if (res.data?.length) {
+          setIsNoData(false)
+        } else {
+          setIsNoData(true)
+        }
       })
     }
   }
 
-  return (<View className='page'>
-    <AtSearchBar
-      placeholder='道路名称关键字'
-      showActionButton
-      value={keyword}
-      onChange={v => setKeyword(v)}
-      onActionClick={getDetail}
-    />
-    <View className='top flex'>抽查日期：{moment(spotItem.date).format('YYYY-MM-DD')}</View>
-
-    {roadDetailList.length ? roadDetailList.map(item => <View key={item.id} className='card'>
+  const renderList = () => {
+    return roadDetailList.length ? roadDetailList.map(item => <View key={item.id} className='card'>
       <View className='item'>道路类型：{item.road?.level ? (item.road?.level + '道') : '--'}</View>
       <View className='item'>路线名称：{item.road?.routeName || '--'}</View>
       <View className='item at-row'>
@@ -71,7 +68,23 @@ function Index() {
           >调整</AtButton>
         </View>
       </View>
-    </View>) : <Skeleton length={3} />}
+    </View>) : <Skeleton length={3} />
+  }
+
+  const renderNoData = () => {
+    return <View style={{ marginTop: 100 }}><NoData /></View>
+  }
+
+  return (<View className='page'>
+    <AtSearchBar
+      placeholder='道路名称关键字'
+      showActionButton
+      value={keyword}
+      onChange={v => setKeyword(v)}
+      onActionClick={getDetail}
+    />
+    <View className='top flex'>抽查日期：{moment(spotItem.date).format('YYYY-MM-DD')}</View>
+    {isNoData ? renderNoData() : renderList()}
   </View>)
 }