feat: 幕帘-二维码加好友

src/componments/Model/index.jsx

@@ -0,0 +1,28 @@
+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,
+} 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 { useEffect, useState } from "react";
+const Model = () => {
+  const [open, setopen] = useState(false);
+
+  return <View className="Model"></View>;
+};
+
+export default Model;

src/componments/QrCode/index.jsx

@@ -0,0 +1,83 @@
+import { View, Text, Image, Button, Icon, Dialog } from "@tarojs/components";
+import { useLoad } from "@tarojs/taro";
+import Taro from "@tarojs/taro";
+import {
+  AtAvatar,
+  AtTag,
+  AtIcon,
+  AtTabBar,
+  AtButton,
+  AtAccordion,
+  AtList,
+  AtListItem,
+  AtModal,
+  AtModalHeader,
+  AtModalContent,
+  AtModalAction,
+  AtCurtain,
+} 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 QRcodePng from "@/images/index/QRcode.png";
+
+import TabbarCom from "@/componments/TabbarCom";
+import { useEffect, useState } from "react";
+const QrCode = (props) => {
+  console.log("props", props);
+  const [isOpened, setisOpened] = useState(false);
+  useEffect(() => {
+    setisOpened(props.isOpened);
+  }, [props.isOpened]);
+
+  const Qrcode = () => {
+    return (
+      <View className="wechatCode">
+        <View>长按识别二维码</View>
+        <Image
+          style={{ width: "100px", height: "100px" }}
+          showMenuByLongpress={true}
+          src={QRcodePng}
+          // src='cloud://citynew-0givkbre03955d8c.6369-citynew-0givkbre03955d8c-1253655588/images/touxiang/download-1.jpg'
+        ></Image>
+      </View>
+    );
+  };
+  return (
+    <View className="QrCode">
+      {/* <AtModal
+        isOpened={isOpened}
+        title="长按识别二维码"
+        cancelText="取消"
+        confirmText="确认"
+        onClose={() => {
+          setisOpened(false);
+        }}
+        onCancel={() => {
+          setisOpened(false);
+        }}
+        onConfirm={() => {
+          setisOpened(false);
+        }}
+        content={Qrcode}
+      /> */}
+
+      <AtCurtain
+        isOpened={isOpened}
+        closeBtnPosition="top-right"
+        onClose={() => {
+          setisOpened(false);
+          // 设置父组件状态
+          props.setisOpened(false);
+        }}
+      >
+        <Qrcode />
+      </AtCurtain>
+    </View>
+  );
+};
+
+export default QrCode;

src/componments/QrCode/index.scss

@@ -0,0 +1,13 @@
+.QrCode{
+
+    .wechatCode{
+        width: 600px;
+        height: 600px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        // background-color: #fff;
+    }
+
+}

src/pages/index/index.jsx

@@ -9,6 +9,7 @@ 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 { useEffect, useState } from "react";
 // import beijing from "../../images/city/beijing.jpg";
@@ -16,6 +17,7 @@ import { useEffect, useState } from "react";
 export default function Index() {
   // 用户基本信息
   const [userInfo, setuserInfo] = useState({});
+  const [isOpened, setisOpened] = useState(false);
 
   useLoad(() => {
     console.log("Page loaded.");
@@ -46,9 +48,14 @@ export default function Index() {
   }, []);
 
   // 自定义组件
-  const CustomTest = () => {
+  const JoinWechat = () => {
     return (
-      <View className="CustomTest">
+      <View
+        className="CustomTest"
+        onClick={() => {
+          setisOpened(true);
+        }}
+      >
         <View className="CustomHeader">🥂加入微信群-meetup</View>
         {/* <View className="CustomAvatar">
           <AtAvatar
@@ -59,7 +66,7 @@ export default function Index() {
           ></AtAvatar>
         </View> */}
         <View className="CustomAvatar">
-          {[1, 2, 3, 4,5,6,7].map((item, index) => {
+          {[1, 2, 3, 4, 5, 6, 7].map((item, index) => {
             return (
               <AtAvatar
                 className="AtAvatar"
@@ -85,10 +92,10 @@ export default function Index() {
       },
       // 双数插入
       {
-        cityName: "上海",
+        cityName: "加入微信群",
         imagePath: shanghai,
         isCustom: true,
-        customCom: <CustomTest />,
+        customCom: <JoinWechat />,
       },
       {
         cityName: "上海",
@@ -97,10 +104,10 @@ export default function Index() {
         customCom: "test",
       },
       // {
-      //   cityName: "上海",
+      //   cityName: "同城活动",
       //   imagePath: shanghai,
       //   isCustom: true,
-      //   customCom: <CustomTest />,
+      //   customCom: <JoinWechat />,
       // },
       {
         cityName: "广州",
@@ -112,7 +119,7 @@ export default function Index() {
       //   cityName: "上海",
       //   imagePath: shanghai,
       //   isCustom: true,
-      //   customCom: <CustomTest />,
+      //   customCom: <JoinWechat />,
       // },
       {
         cityName: "深圳",
@@ -120,6 +127,12 @@ export default function Index() {
         isCustom: false,
         customCom: "test",
       },
+      // {
+      //   cityName: "腾讯云推广",
+      //   imagePath: shanghai,
+      //   isCustom: true,
+      //   customCom: <JoinWechat />,
+      // },
     ].map((item, index) => {
       return (
         // 设置自动换行
@@ -187,6 +200,7 @@ export default function Index() {
       {/* 底部tabbar */}
 
       <TabbarCom active={0} />
+      <QrCode isOpened={isOpened} setisOpened={setisOpened} />
     </View>
   );
 }

src/pages/my/index.jsx

@@ -32,20 +32,20 @@ const my = () => {
           {/* 头像 */}
           <AtAvatar circle image={touxiang}></AtAvatar>
           <View>
-            <AtTag size="small">昵称</AtTag>
-            <AtTag size="small">女</AtTag>
+            <AtTag size="small">星球新居民</AtTag>
+            {/* <AtTag size="small">女</AtTag> */}
           </View>
         </View>
 
         {/* 列表 */}
         <View className="mylist">
           <AtListItem
-            title="标题文字1"
+            title="我参加的"
             arrow="right"
             thumb="https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png"
           />
           <AtListItem
-            title="标题文字2"
+            title="个人资料"
             // note="描述信息"
             arrow="right"
             thumb="http://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png"

src/pages/my/index.scss

@@ -9,7 +9,8 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      background-color: yellow;
+      background-color: #f4ffb8;
+      border-radius: 20px;
     }
 
     .mylist {