创建首页V2 代码脚手架

js/packages/miniapp/src/pages/header/header.tsx

@@ -81,6 +81,13 @@ const Header = ({injectedComponents = <Block />}) => {
           routePath === routes.INDEX && styles.index
         )}
       >
+         <View>
+            <AtIcon
+              value='menu'
+              color={isHomePage ? '#664445' : '#ffffff'}
+              onClick={() => toggleSidebar(true)}
+            ></AtIcon>
+          </View>
         {isDetailsPage && (
           <View>
             <Image className={styles.logo} mode='heightFix' src={logoURL} />
@@ -97,17 +104,10 @@ const Header = ({injectedComponents = <Block />}) => {
               ></AtIcon>
             </View>
           )}
-          <View>
-            <AtIcon
-              value='menu'
-              color={isHomePage ? '#664445' : '#ffffff'}
-              onClick={() => toggleSidebar(true)}
-            ></AtIcon>
-          </View>
         </View>
       </View>
       <AtDrawer
-        right={true}
+        right={false}
         show={showSidebar}
         onClose={() => toggleSidebar(false)}
         mask

js/packages/miniapp/src/pages/index/index-v2.tsx

@@ -0,0 +1,94 @@
+import React, {useState, useEffect} from 'react';
+import Taro, {
+  getCurrentInstance,
+  useShareAppMessage,
+  useShareTimeline,
+} from '@tarojs/taro';
+import {View, Image, Input} from '@tarojs/components';
+import {AtIcon} from 'taro-ui';
+import Header from '@/pages/header/header';
+import routes from '@/routes';
+import logoURL from '@/assets/logo.png';
+import AddToFavoritePrompt from '@/components/add-to-favorite-prompt/add-to-favorite-prompt';
+import styles from './index.module.scss';
+
+const handleRouterParams = () => {
+  const scannedURL = decodeURIComponent(
+    getCurrentInstance().router?.params.q || ''
+  );
+  if (!scannedURL) return;
+  const splittedURL = scannedURL.split('/');
+  const id = splittedURL.pop();
+  const type = splittedURL.pop();
+  if (type === 'campaign') {
+    switch (id) {
+      case 'lung-nung-dieng': {
+        Taro.reLaunch({
+          url: '/pages/collectionDetail/collectionDetail?id=wordLists/1',
+        });
+        break;
+      }
+      case 'lung-nung-dieng-2': {
+        Taro.reLaunch({
+          url: '/pages/collectionDetail/collectionDetail?id=wordLists/2',
+        });
+        break;
+      }
+      // 福州客第3期
+      case 'foochowka-3': {
+        Taro.reLaunch({
+          url: '/pages/collectionDetail/collectionDetail?id=wordLists/11',
+        });
+        break;
+      }
+    }
+  }
+};
+
+const IndexV2 = () => {
+  const [inputString, setInputString] = useState('');
+
+  const handleConfirm = () => {
+    Taro.redirectTo({
+      url: `${routes.SEARCH}?word=${inputString}`,
+    });
+  };
+
+  useShareTimeline(() => ({
+    title: '榕典 | 福州话电子词典',
+  }));
+  useShareAppMessage(() => ({
+    title: '福州话电子词典',
+  }));
+  useEffect(() => {
+    handleRouterParams();
+  }, []);
+  return (
+    <View className={styles.index}>
+      {/* <Header /> */}
+
+      <View className={styles.banner}>
+        <View />
+        <View className={styles.imageContainer}>
+          <Image src={logoURL} mode='widthFix' />
+        </View>
+        <View className={styles.search}>
+          <View className={styles.inputContainer}>
+            <Input
+              value={inputString}
+              confirmType='search'
+              placeholder='查字、词、读音...'
+              onInput={e => setInputString(e.detail.value)}
+              onConfirm={handleConfirm}
+            />
+            <AtIcon  value='search' onClick={handleConfirm}></AtIcon>
+          </View>
+          <View className={styles.actions}></View>
+        </View>
+      </View>
+      <AddToFavoritePrompt />
+    </View>
+  );
+};
+
+export default IndexV2;

js/packages/miniapp/src/pages/index/index.module.scss

@@ -1,38 +1,51 @@
 .index {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  background-image: url(../../assets/background.png);
   .banner {
     background-color: $color-brownish-100;
-    height: 500px;
+    height: 600px;
     max-height: calc(100vh - $header-height);
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: space-around;
+    justify-content: center;
+    width: 130%;
+    position: absolute;
+    left: -15%; 
+    margin:0 auto;
+    border-radius: 0 0 50% 50%;
     .imageContainer {
       Image {
-        width: 60vw;
+        width: 57vw;
       }
     }
     .search {
-      $search-height: 70px;
+      $search-height: 100px;
       display: flex;
       flex-wrap: wrap;
-      width: 90%;
+      width: 65%;
+      margin-top: 70rpx;;
+
       .inputContainer {
         @include flex-center-center;
         flex: 1;
         height: $search-height;
-        padding: 0 10px;
+        padding-left: 50rpx;
+        padding-right: 50rpx;
+        border-radius: 20rpx;
         background-color: white;
+        box-shadow: -10px 10px 10px -15px #000;
         Input {
           width: 100%;
         }
-      }
-      .confirmBtn {
-        @include flex-center-center;
-        height: $search-height;
-        background-color: $color-brownish-900;
-        width: $search-height;
-        color: white;
+        AtIcon{
+          height: $search-height;
+          background-color: $color-brownish-900;
+          width: $search-height;
+          color: #333333;
+        }
       }
       .actions {
         width: 100%;