feat: 首页-自定义组件=>子组件拆分

src/pages/index/componments/JoinWechat/index.jsx

@@ -0,0 +1,70 @@
+import { View, Text, Image, Button, Icon } from "@tarojs/components";
+import { useLoad } from "@tarojs/taro";
+import Taro from "@tarojs/taro";
+import {
+  AtAvatar,
+  AtTag,
+  AtIcon,
+  AtTabBar,
+  AtButton,
+  AtAccordion,
+  AtList,
+  AtListItem,
+  AtMessage
+} from "taro-ui";
+import "./index.scss";
+import beijing from "@/images/city/beijing.jpg";
+import guangzhou from "@/images/city/guangzhou.jpg";
+import shanghai from "@/images/city/shanghai.jpg";
+import shenzhen from "@/images/city/shenzhen.jpg";
+import touxiang from "@/images/index/touxiang.jpg";
+import TabbarCom from "@/componments/TabbarCom";
+import QrCode from "@/componments/QrCode";
+
+import a1 from "@/images/meetup/a1.jpg";
+import a2 from "@/images/meetup/a2.jpg";
+import a3 from "@/images/meetup/a3.jpg";
+import a4 from "@/images/meetup/a4.png";
+import a5 from "@/images/meetup/a5.jpg";
+import a6 from "@/images/meetup/a6.jpg";
+
+import { useEffect, useState } from "react";
+const JoinWechat = () => {
+  const [open, setopen] = useState(false);
+  const [isOpened, setisOpened] = useState(false);
+
+  return (
+    <View
+      className="JoinWechat"
+      onClick={() => {
+        setisOpened(true);
+      }}
+    >
+      <View className="CustomHeader">🥂加入微信群-meetup</View>
+      <View className="CustomAvatar">
+        {[
+          { imagePath: a1 },
+          { imagePath: a2 },
+          { imagePath: a3 },
+          { imagePath: a4 },
+          { imagePath: a5 },
+          { imagePath: a6 },
+        ].map((item, index) => {
+          return (
+            <AtAvatar
+              className="AtAvatar"
+              circle
+              image={item.imagePath}
+              size="small"
+            ></AtAvatar>
+          );
+        })}
+      </View>
+      {/* <View>查看更多</View> */}
+      <QrCode isOpened={isOpened} setisOpened={setisOpened} />
+      <AtMessage />
+    </View>
+  );
+};
+
+export default JoinWechat;

src/pages/index/componments/JoinWechat/index.scss

@@ -0,0 +1,37 @@
+.JoinWechat {
+    padding: 10px;
+    font-size: 25px;
+    width: 320px;
+    height: 230px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    // justify-content: center;
+    // background-color: #ffe7ba;
+    border-radius: 20px;
+    border: solid 1px #8c8c8c;
+    .CustomHeader {
+      width: 100%;
+      height: 60px;
+      // background-color: yellow;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+    }
+    .CustomAvatar {
+      width: 100%;
+      // height: 60px;
+      // background-color: green;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      flex-wrap: wrap;
+      .AtAvatar {
+        width: 70px;
+        height: 70px;
+        margin-right: 5px;
+        margin-top: 5px;
+      }
+    }
+  }

src/pages/index/componments/Nomadbook/index.scss

@@ -22,8 +22,8 @@
     // background-color: aquamarine;
     padding: 10px;
     .bookItem {
-      width: 80px;
-      height: 80px;
+      width: 95px;
+      height: 95px;
       // background-color: yellow;
       margin-top: 10px;
       // margin-right: 10px;

src/pages/index/index.jsx

@@ -26,6 +26,8 @@ import a6 from "@/images/meetup/a6.jpg";
 import TabbarCom from "@/componments/TabbarCom";
 import QrCode from "@/componments/QrCode";
 import Nomadbook from "@/pages/index/componments/Nomadbook";
+import JoinWechat from "@/pages/index/componments/JoinWechat";
+
 
 
 import { useEffect, useState } from "react";
@@ -87,44 +89,7 @@ export default function Index() {
     // });
   }, []);
 
-  // 自定义组件
-  const JoinWechat = () => {
-    return (
-      <View
-        className="CustomTest"
-        onClick={() => {
-          setisOpened(true);
-        }}
-      >
-        <View className="CustomHeader">🥂加入微信群-meetup</View>
-        <View className="CustomAvatar">
-          {[
-            { imagePath: a1 },
-            { imagePath: a2 },
-            { imagePath: a3 },
-            { imagePath: a4 },
-            { imagePath: a5 },
-            { imagePath: a6 },
-          ].map((item, index) => {
-            return (
-              <AtAvatar
-                className="AtAvatar"
-                circle
-                image={item.imagePath}
-                size="small"
-              ></AtAvatar>
-            );
-          })}
-        </View>
-        {/* <View>查看更多</View> */}
-      </View>
-    );
-  };
 
-  // 图书
-  // const Nomadbook = () => {
-  //   return <View className="Nomadbook" onClick={() => {}}>Nomadbook</View>;
-  // };
 
   const HomeCardItem = () => {
     return [

src/pages/index/index.scss

@@ -26,43 +26,6 @@
       flex-direction: row;
       flex-wrap: wrap;
 
-      .CustomTest {
-        padding: 10px;
-        font-size: 25px;
-        width: 320px;
-        height: 230px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        // justify-content: center;
-        // background-color: #ffe7ba;
-        border-radius: 20px;
-        border: solid 1px #8c8c8c;
-        .CustomHeader {
-          width: 100%;
-          height: 60px;
-          // background-color: yellow;
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          justify-content: center;
-        }
-        .CustomAvatar {
-          width: 100%;
-          // height: 60px;
-          // background-color: green;
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          flex-wrap: wrap;
-          .AtAvatar {
-            width: 70px;
-            height: 70px;
-            margin-right: 5px;
-            margin-top: 5px;
-          }
-        }
-      }
    
       .Nomadbook {
         padding: 10px;