抽查详情渲染优化

weapp/src/packages/maintenanceSpotCheck/components/skeleton/index.jsx

@@ -0,0 +1,35 @@
+/*
+* 骨架屏
+*/
+import React from 'react'
+import { View } from '@tarojs/components'
+import './index.scss'
+
+export default function Skeleton(props) {
+  const { length } = props
+
+  const render = () => {
+    let node = []
+    for (let i = 0; i < length; i++) {
+      node.push(
+        <View className='skeleton'>
+          <View className='ul'>
+            <View className='li' />
+            <View className='li' />
+            <View className='li' />
+            <View className='li' />
+            <View className='li' />
+            <View className='li' />
+          </View>
+        </View>
+      )
+    }
+    return node
+  }
+
+  return (
+    <View>
+      {render()}
+    </View>
+  )
+}

weapp/src/packages/maintenanceSpotCheck/components/skeleton/index.scss

@@ -0,0 +1,43 @@
+.screen-root {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 20vh;
+}
+
+.ul {
+  background-color: #fff;
+  margin: 0 auto;
+  padding: 20px;
+  width: 90vw;
+}
+
+.li {
+  background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+  width: 100%;
+  height: 0.9rem;
+  list-style: none;
+  background-size: 400% 100%;
+  margin-top: 0.9rem;
+  background-position: 100% 50%;
+  animation: skeleton-loading 1.4s ease infinite;
+}
+
+.li:first-child {
+  width: 38%;
+}
+
+.li:last-child {
+  width: 61%;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0 50%;
+  }
+}

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

@@ -3,6 +3,7 @@ import Taro, { useRouter, useDidShow } from '@tarojs/taro'
 import { View } from '@tarojs/components'
 import { AtButton, AtSearchBar } from 'taro-ui'
 import { NoData } from '@/components/index'
+import Skeleton from '../components/skeleton'
 import moment from 'moment'
 import request from '@/services/request'
 import { getRoadSpotDetail } from '@/services/api'
@@ -70,7 +71,7 @@ function Index() {
           >调整</AtButton>
         </View>
       </View>
-    </View>) : <View style={{ paddingTop: 100 }}><NoData /></View>}
+    </View>) : <Skeleton length={3} />}
   </View>)
 }