feat: search page init

Away0x · Aug 17, 2020 · d8850fe · d8850fe
1 parent f19b1fc
commit d8850fe
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 1 deletion.
diff --git a/src/pages/Search/index.tsx b/src/pages/Search/index.tsx
@@ -1,17 +1,30 @@
 import React, { useCallback, useState } from 'react';
 import { useHistory } from 'react-router-dom';
+import { forceCheck } from 'react-lazyload';
+import { useRequest } from 'ahooks';
 
 import SearchBox from 'components/SearchBox';
 import AnimatePage from 'components/AnimatePage';
+import Scroll from 'components/Scroll';
+import { Loading } from 'components/Loading';
+import {
+  getHotKeyWordsService,
+  // getSuggestListService,
+  // getResultSongsListService
+} from 'services';
 
-import StyledSearch from './style';
+import StyledSearch, { ShortcutWrapper, HotKey } from './style';
 
 function Search() {
   const history = useHistory();
 
   const [showPage, setShowPage] = useState(true);
   const [query, setQuery] = useState('');
 
+  const { loading, data: hotKeyList } = useRequest(getHotKeyWordsService, {
+    loadingDelay: 300,
+  });
+
   const handleBackButtonClick = useCallback(() => {
     setShowPage(false);
   }, []);
@@ -28,6 +41,32 @@ function Search() {
     <AnimatePage showPage={showPage} onExited={goBack} anim="move">
       <StyledSearch>
         <SearchBox newQuery={query} onSearch={onSearch} onBackButtonClick={handleBackButtonClick} />
+        {/* 热门搜索 */}
+        <ShortcutWrapper show={!query}>
+          <Scroll>
+            <HotKey>
+              <h1>热门搜索</h1>
+              <ul>
+                {hotKeyList &&
+                  hotKeyList.map((item) => {
+                    return (
+                      <li key={item.first} onClick={() => setQuery(item.first)}>
+                        <span>{item.first}</span>
+                      </li>
+                    );
+                  })}
+              </ul>
+            </HotKey>
+          </Scroll>
+        </ShortcutWrapper>
+        {/* 搜索结果 */}
+        <ShortcutWrapper show={!!query}>
+          <Scroll onScroll={forceCheck}>
+            <div></div>
+          </Scroll>
+        </ShortcutWrapper>
+
+        {loading && <Loading full />}
       </StyledSearch>
     </AnimatePage>
   );

diff --git a/src/pages/Search/style.ts b/src/pages/Search/style.ts
@@ -6,4 +6,39 @@ const StyledSearch = styled.div`
   background: ${({ theme }) => theme.backgroundColor};
 `;
 
+interface ShortcutWrapperProps {
+  show?: boolean;
+}
+
+const ShortcutWrapper = styled.div<ShortcutWrapperProps>`
+  position: absolute;
+  top: 40px;
+  bottom: 0;
+  width: 100%;
+  display: ${({ show = false }) => (show ? 'block' : 'none')};
+`;
+
+const HotKey = styled.div`
+  margin: 0 20px 20px 20px;
+
+  h1 {
+    padding-top: 35px;
+    margin-bottom: 20px;
+    font-size: ${({ theme }) => theme.fontSizeM};
+    color: ${({ theme }) => theme.fontColorDescV2};
+  }
+
+  li {
+    display: inline-block;
+    padding: 5px 10px;
+    margin: 0 20px 10px 0;
+    border-radius: 6px;
+    background: ${({ theme }) => theme.backgroundColorHighlight};
+    font-size: ${({ theme }) => theme.fontSizeM};
+    color: ${({ theme }) => theme.fontColorDesc};
+  }
+`;
+
 export default StyledSearch;
+
+export { ShortcutWrapper, HotKey };