添加无洗浴预约记录时的占位图

src/pages/Shower/ShowerAppointment.scss

@@ -63,6 +63,21 @@
     flex: 1;
     overflow-y: scroll;
     padding: 10px 40px 20px;
+    .ShowerAppointment-EmptyBox {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      font-size: 28px;
+      color: #fff;
+    }
+    .ShowerAppointment-EmptyIcon {
+      width: 292px;
+      height: 248px;
+      margin-bottom: 72px;
+    }
   }
   .ShowerAppointment-Footer {
     display: flex;

src/pages/Shower/ShowerAppointment.tsx

 import './ShowerAppointment.scss';
-import { View, Input, Text, ScrollView } from '@tarojs/components';
+import { View, Input, Text, ScrollView, Image } from '@tarojs/components';
 import Taro, { useState, useEffect } from '@tarojs/taro';
 import AppointermentCard from './components/AppointermentCard/AppointermentCard';
 import useInputValue from '@/hooks/useInputValue';
@@ -19,6 +19,7 @@ import useCheckAppointable from './hooks/useCheckAppointable';
 import { ShowerState } from '@/store/rootReducers/shower';
 import AppBackButton from '@/components/AppBackButton/AppBackButton';
 import WaitPayOrderComponent from '@/components/WaitPayOrder/WaitPayOrder';
+import EmptyIcon from '../../images/shower/empty_yuyue@2x.png';
 
 function ShowerAppointment() {
   const userInfo = useSelector(
@@ -259,9 +260,16 @@ function ShowerAppointment() {
           scrollWithAnimation
           lowerThreshold={50}
           onScrollToLower={fetchMoreRecordList}>
-          {records.map(item => (
+          {records.length ? (
+            records.map(item => (
               <AppointermentCard key={item.deviceCode} data={item} />
-          ))}
+            ))
+          ) : (
+            <View className='ShowerAppointment-EmptyBox'>
+              <Image className='ShowerAppointment-EmptyIcon' src={EmptyIcon} />
+              暂无预约记录~
+            </View>
+          )}
         </ScrollView>
       )}