调整盲盒

src/views/BlindBox/index.tsx

@@ -14,6 +14,7 @@ import { checkBuyResult } from 'services/blindBox'
 import useRefresh from 'hooks/useRefresh'
 import useToast from 'hooks/useToast'
 import { UnOpenModel } from 'components/Modal'
+import Empty from 'components/Empty'
 import tokens from 'config/constants/tokens'
 import { ListProp } from 'types/blindBox'
 import Header from './component/Header'
@@ -169,6 +170,11 @@ const AuthorizationBtn = styled(Button)`
     width: 500px;
   }
 `
+const EmptyFlex = styled(Flex)`
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+`
 
 const BlindBox: React.FC = () => {
   const { t } = useTranslation()
@@ -357,17 +363,24 @@ const BlindBox: React.FC = () => {
   return (
     <MainFlex>
       {/* <UnOpenModel /> */}
-      <SwiperDiv
-        color={blindBoxList?.length === 1 ? 'none' : ''}
-        onSlideChange={swiperChange}
-        loop
-        pagination={{ clickable: true }}
-        spaceBetween={16}
-        freeModeMomentumRatio={0.25}
-        freeModeMomentumVelocityRatio={0.5}
-      >
-        {renderContent()}
-      </SwiperDiv>
+      {blindBoxList && blindBoxList.length > 0 && (
+        <SwiperDiv
+          color={blindBoxList?.length === 1 ? 'none' : ''}
+          onSlideChange={swiperChange}
+          loop
+          pagination={{ clickable: true }}
+          spaceBetween={16}
+          freeModeMomentumRatio={0.25}
+          freeModeMomentumVelocityRatio={0.5}
+        >
+          {renderContent()}
+        </SwiperDiv>
+      )}
+      {blindBoxList && blindBoxList.length === 0 && (
+        <EmptyFlex>
+          <Empty />
+        </EmptyFlex>
+      )}
     </MainFlex>
   )
 }