fix: 详情页白屏bug

.gitignore

@@ -0,0 +1,7 @@
+dist/
+deploy_versions/
+.temp/
+.rn_temp/
+node_modules/
+.DS_Store
+.swc

config/index.js

@@ -1,74 +1,95 @@
 const config = {
-  projectName: 'cityh5',
+  projectName: "cityh5",
-  date: '2023-12-2',
+  date: "2023-12-2",
   designWidth: 750,
   deviceRatio: {
     640: 2.34 / 2,
     750: 1,
-    828: 1.81 / 2
+    828: 1.81 / 2,
   },
-  sourceRoot: 'src',
+  sourceRoot: "src",
-  outputRoot: 'dist',
+  outputRoot: "dist",
   plugins: [],
-  defineConstants: {
+  defineConstants: {},
-  },
   copy: {
-    patterns: [
+    patterns: [],
-    ],
+    options: {},
-    options: {
-    }
   },
-  framework: 'react',
+  framework: "react",
-  compiler: 'webpack5',
+  compiler: "webpack5",
   cache: {
-    enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
+    enable: false, // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
   },
   mini: {
     postcss: {
       pxtransform: {
         enable: true,
-        config: {
+        config: {},
-
-        }
       },
       url: {
         enable: true,
         config: {
-          limit: 1024 // 设定转换尺寸上限
+          limit: 1024, // 设定转换尺寸上限
-        }
+        },
       },
       cssModules: {
         enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
         config: {
-          namingPattern: 'module', // 转换模式，取值为 global/module
+          namingPattern: "module", // 转换模式，取值为 global/module
-          generateScopedName: '[name]__[local]___[hash:base64:5]'
+          generateScopedName: "[name]__[local]___[hash:base64:5]",
+        },
+      },
+    },
+  },
+  h5: {
+    esnextModules: ["taro-ui"],
+    publicPath: "/",
+    staticDirectory: "static",
+    postcss: {
+      autoprefixer: {
+        enable: true,
+        config: {},
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: "module", // 转换模式，取值为 global/module
+          generateScopedName: "[name]__[local]___[hash:base64:5]",
+        },
+      },
+    },
+    // customRoutes: {
+    //   // "页面路径": "自定义路由"
+    //   "/pages/index/index": "/index",
+    //   // '/pages/detail/index': ['/detail'], // 可以通过数组为页面配置多个自定义路由
+    //   "pages/my/index": "/my",
+    //   "pages/meetup/index": "/meetup",
+    //   "pages/meetup/Detail/index": "/detail",
+    // },
+    router: {
+      // basename: '/myapp',
+      mode: "hash", // 或者是 'browser'
+    },
+    // defineConstants: {
+    //   HOST: '"/api"'
+    // },
+    devServer: {
+      proxy: {
+        '/api/': {
+          target: JSON.parse('"http://localhost:8055"'), //本地调试端口
+          pathRewrite: {
+            '^/api/': '/'
+          },
+          changeOrigin: true
         }
       }
     }
   },
-  h5: {
+};
-    publicPath: '/',
-    staticDirectory: 'static',
-    postcss: {
-      autoprefixer: {
-        enable: true,
-        config: {
-        }
-      },
-      cssModules: {
-        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
-        config: {
-          namingPattern: 'module', // 转换模式，取值为 global/module
-          generateScopedName: '[name]__[local]___[hash:base64:5]'
-        }
-      }
-    }
-  }
-}
 
 module.exports = function (merge) {
-  if (process.env.NODE_ENV === 'development') {
+  if (process.env.NODE_ENV === "development") {
-    return merge({}, config, require('./dev'))
+    return merge({}, config, require("./dev"));
   }
-  return merge({}, config, require('./prod'))
+  return merge({}, config, require("./prod"));
-}
+};

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "cityh5",
+  "name": "",
   "version": "1.0.0",
   "private": true,
   "description": "city",
@@ -32,42 +32,43 @@
     "@babel/runtime": "^7.7.7",
     "@tarojs/components": "3.6.20",
     "@tarojs/helper": "3.6.20",
-    "@tarojs/plugin-platform-weapp": "3.6.20",
+    "@tarojs/plugin-framework-react": "3.6.20",
     "@tarojs/plugin-platform-alipay": "3.6.20",
-    "@tarojs/plugin-platform-tt": "3.6.20",
+    "@tarojs/plugin-platform-h5": "3.6.20",
-    "@tarojs/plugin-platform-swan": "3.6.20",
     "@tarojs/plugin-platform-jd": "3.6.20",
     "@tarojs/plugin-platform-qq": "3.6.20",
-    "@tarojs/plugin-platform-h5": "3.6.20",
+    "@tarojs/plugin-platform-swan": "3.6.20",
+    "@tarojs/plugin-platform-tt": "3.6.20",
+    "@tarojs/plugin-platform-weapp": "3.6.20",
+    "@tarojs/react": "3.6.20",
     "@tarojs/runtime": "3.6.20",
     "@tarojs/shared": "3.6.20",
     "@tarojs/taro": "3.6.20",
-    "@tarojs/plugin-framework-react": "3.6.20",
-    "@tarojs/react": "3.6.20",
-    "react-dom": "^18.0.0",
     "react": "^18.0.0",
-    "sr-sdk-h5": "^1.3.1"
+    "react-dom": "^18.0.0",
+    "sr-sdk-h5": "^1.3.1",
+    "taro-ui": "^3.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
     "@tarojs/cli": "3.6.20",
-    "@types/webpack-env": "^1.13.6",
-    "postcss": "^8.4.18",
-    "@types/react": "^18.0.0",
-    "webpack": "^5.78.0",
     "@tarojs/taro-loader": "3.6.20",
     "@tarojs/webpack5-runner": "3.6.20",
+    "@types/node": "^18.15.11",
+    "@types/react": "^18.0.0",
+    "@types/webpack-env": "^1.13.6",
     "babel-preset-taro": "3.6.20",
+    "eslint": "^8.12.0",
     "eslint-config-taro": "3.6.20",
-    "eslint": "^8.12.0","eslint": "^8.12.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
-    "react-refresh": "^0.11.0",
-    "eslint-plugin-react": "^7.8.2",
     "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-react": "^7.8.2",
     "eslint-plugin-react-hooks": "^1.6.1",
+    "postcss": "^8.4.18",
+    "react-refresh": "^0.11.0",
     "stylelint": "9.3.0",
-    "typescript": "^4.1.0",
     "ts-node": "^10.9.1",
-    "@types/node": "^18.15.11"
+    "typescript": "^4.1.0",
+    "webpack": "^5.78.0"
   }
 }

src/app.config.js

@@ -1,6 +1,10 @@
 export default {
   pages: [
-    'pages/index/index'
+    'pages/index/index',
+    'pages/my/index',
+    'pages/meetup/index',
+    'pages/meetup/Detail/index',
+
   ],
   window: {
     backgroundTextStyle: 'light',

src/app.js

@@ -2,6 +2,7 @@ import { Component } from 'react'
 import SDK from 'sr-sdk-h5'
 
 import './app.scss'
+import 'taro-ui/dist/style/index.scss' // 全局引入一次即可
 
 /**
    * 有数埋点SDK 默认配置

src/index.html

@@ -8,7 +8,7 @@
   <meta name="format-detection" content="telephone=no,address=no">
   <meta name="apple-mobile-web-app-status-bar-style" content="white">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
-  <title>cityh5</title>
+  <title>异度星球</title>
   <script><%= htmlWebpackPlugin.options.script %></script>
 </head>
 <body>

src/pages/index/index.config.js

@@ -1,3 +1,3 @@
 export default {
-  navigationBarTitleText: '首页'
+  navigationBarTitleText: '异度星球'
 }

src/pages/index/index.jsx

@@ -1,21 +1,278 @@
-import { Component } from 'react'
+import { Component } from "react";
-import { View, Text } from '@tarojs/components'
+import Taro from "@tarojs/taro";
-import './index.scss'
+import { View, Text, Image, Button } from "@tarojs/components";
+import "./index.scss";
+import { AtTabBar } from "taro-ui";
+import React, { useCallback, useEffect, useState } from "react";
+import { AtGrid } from "taro-ui";
+import { Swiper, SwiperItem } from "@tarojs/components";
+import { AtCard } from "taro-ui";
+import { AtImagePicker } from "taro-ui";
+import { AtButton } from "taro-ui";
+import { AtSearchBar } from "taro-ui";
+import { Picker } from "@tarojs/components";
+import { AtList, AtListItem } from "taro-ui";
+import { AtNavBar } from "taro-ui";
+import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui";
+import { AtToast } from "taro-ui";
+import { AtIcon } from "taro-ui";
 
-export default class Index extends Component {
+// export default class Index extends Component {
-  componentDidMount () { }
+const Index = () => {
+  const [current, setcurrent] = useState(0);
+  const [openId, setopenId] = useState(null);
 
-  componentWillUnmount () { }
+  const [isOpened, setisOpened] = useState(false);
+  const [joinMeetup, setjoinMeetup] = useState(false);
 
-  componentDidShow () { }
+  // 获取openid
+  const getWxid = () => {
+    // let newparams = Taro.getCurrentInstance().router.params;
+    // let urlopenid = newparams.openid;
 
-  componentDidHide () { }
+    // hash模式
+    // http://192.168.31.245:10086/?openid=o7LFAwR32hWGq9XOpd7ZxK1wZxq8#/pages/index/index
+    let hashopenid = null;
+    if (window.location.href.includes("openid")) {
+      // window.alert(window.location.href);
 
-  render () {
+      hashopenid = window.location.href
-    return (
+        .split("#")[0]
-      <View className='index'>
+        .split("?")[1]
-        <Text>Hello world!</Text>
+        .split("=")[1];
+    } else {
+      hashopenid = window.localStorage.getItem("openid");
+    }
+
+    // window.alert(hashopenid)
+    let newOpenid = window.localStorage.getItem("openid");
+    
+    // window.alert(newOpenid)
+
+    if (
+      (!!newOpenid && newOpenid != "undefined" &&newOpenid != "null") ||
+      (!!hashopenid && hashopenid != "undefined"&&hashopenid != "null")
+    ) {
+      // window.alert('存在')
+      // window.alert(hashopenid);
+      // window.alert(newOpenid);
+
+      window.localStorage.setItem("openid", hashopenid);
+      setopenId(hashopenid)
+    } else {
+      // window.alert('不存在')
+      let nowUrl = window.location.href;
+
+      // window.alert(nowUrl)
+      let payUrl = `https://payjs.cn/api/openid?mchid=1561724891&callback_url=${nowUrl}`;
+      window.location.href = payUrl;
+    }
+  };
+
+  useEffect(() => {
+    getWxid();
+    let newjoinMeetup = window.localStorage.getItem("joinMeetup");
+    setjoinMeetup(newjoinMeetup);
+  }, []);
+
+  const handleClick = (value) => {
+    console.log("value", value);
+    setcurrent(value);
+    if (value == 2) {
+      // 跳转到目的页面，在当前页面打开
+      Taro.navigateTo({
+        url: "/pages/my/index",
+      });
+    } else if (value == 0) {
+      Taro.navigateTo({
+        url: "/pages/index/index",
+      });
+    } else {
+      Taro.navigateTo({
+        url: "/pages/meetup/index",
+      });
+    }
+    //
+  };
+
+  const goBack = () => {
+    // window.history.back();
+    Taro.navigateBack({
+      // delta: 2
+    });
+  };
+  return (
+    <View className="index">
+      <AtToast isOpened={isOpened} text="活动暂未开始" icon="blocked"></AtToast>
+      {/* <Text>Hello world!</Text> */}
+      {/* <AtNavBar
+        // onClickRgIconSt={handleClick}
+        // onClickRgIconNd={handleClick}
+        // onClickLeftIcon={goBack}
+        // leftIconType="chevron-left"
+        color="#000"
+        title="异度星球"
+        // leftText='返回'
+        // rightFirstIconType='bullet-list'
+        // rightSecondIconType='user'
+      /> */}
+
+      <View>
+        <AtSearchBar
+          showActionButton
+          value={""}
+          onChange={() => {}}
+          onActionClick={() => {}}
+        />
       </View>
-    )
+      <View className="indexSwiper">
-  }
+        {" "}
-}
+        <Swiper
+          indicatorColor="#999"
+          indicatorActiveColor="#333"
+          // vertical
+          circular
+          indicatorDots
+          autoplay
+        >
+          <SwiperItem>
+            <View className="demo-text">
+              {" "}
+              <Image
+                // style="width: 300px;height: 100px;background: #fff;"
+                src={
+                  "http://cdn.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30775083495267465.jpg"
+                }
+              />
+            </View>
+          </SwiperItem>
+          <SwiperItem>
+            <View className="demo-text">
+              {" "}
+              <Image
+                // style="width: 300px;height: 100px;background: #fff;"
+                src={
+                  "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
+                }
+              />
+            </View>
+          </SwiperItem>
+          <SwiperItem>
+            <View className="demo-text">
+              {" "}
+              <Image
+                // style="width: 300px;height: 100px;background: #fff;"
+                src={
+                  "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
+                }
+              />
+            </View>
+          </SwiperItem>
+        </Swiper>
+      </View>
+
+      <AtGrid
+        data={[
+          {
+            image:
+              "https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png",
+            value: "签到",
+          },
+          {
+            image:
+              "https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png",
+            value: "活动",
+          },
+          {
+            image:
+              "https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png",
+            value: "视频",
+          },
+        ]}
+        onClick={(item, index) => {
+          console.log("item", item);
+          console.log("index", index);
+          if (index == 0) {
+            setisOpened(true);
+            setTimeout(() => {
+              setisOpened(false);
+            }, 3500);
+          }
+          if (index == 1) {
+            Taro.navigateTo({
+              url: "/pages/meetup/index",
+            });
+          }
+          if (index == 2) {
+            setisOpened(true);
+            setTimeout(() => {
+              setisOpened(false);
+            }, 3500);
+          }
+        }}
+      />
+
+      <AtCard
+        onClick={() => {
+          // Taro.navigateTo({
+          //   url: "/pages/meetup/Detail/index?id=20231206",
+          // });
+        }}
+        note=""
+        extra=""
+        title="[副业交流] 沙龙茶话会"
+        thumb="http://www.logoquan.com/upload/list/20180421/logoquan15259400209.PNG"
+      >
+        <View className="meetupCard">
+          {" "}
+          <View className="left">
+            {" "}
+            <Image
+              style="width: 150px;height: 100px;background: #fff;"
+              src={
+                "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
+              }
+            />
+          </View>
+          <View className="right">
+            <View className="up">
+              <span style={{ color: "green" }}>[报名中]</span> 4/10
+            </View>
+            <View className="middle">2023/12/06 星期三</View>
+            <View className="down">
+              <AtButton
+                type="primary"
+                size="small"
+                className="submitBtn"
+                disabled={joinMeetup}
+                onClick={() => {
+                  // window.alert(window.location.href)
+                  // return false
+                  Taro.navigateTo({
+                    url: "/pages/meetup/Detail/index?id=20231206",
+                  });
+                }}
+              >
+                {!!joinMeetup ? "已报名" : "立即报名"}
+              </AtButton>
+            </View>
+          </View>
+        </View>
+      </AtCard>
+
+      <View className="indexTablebar">
+        <AtTabBar
+          tabList={[
+            { title: "首页", text: "" },
+            { title: "活动" },
+            { title: "我的" },
+          ]}
+          onClick={(value) => handleClick(value)}
+          current={current}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default Index;

src/pages/index/index.scss

@@ -0,0 +1,59 @@
+.index {
+  display: flex;
+  flex-direction: column;
+  // align-items: center;
+  justify-content: center;
+  .indexSwiper {
+    // margin-top: 20px;
+    padding: 20px;
+
+    .demo-text {
+      // display: flex;
+      // flex-direction: column;
+      // align-items: center;
+      // justify-content: center;
+      // background-color: yellow;
+      height: 300px;
+      width: 100%;
+      // padding: 20px;
+      // Image{
+      //     width: 90%;
+      // }
+    }
+  }
+
+  .meetupCard {
+    display: flex;
+    flex-direction: row;
+    .right {
+      // background-color: yellow;
+      width: 100%;
+      margin-left: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .down {
+        width: 200px;
+        // background-color: aqua;
+        position: relative;
+        bottom: 10px;
+        right: -120px;
+        // display: flex;
+        // flex-direction: column-reverse;
+        // justify-content:flex-end
+        // position: relative;
+        .submitBtn {
+          // width: 200px;
+          // position: absolute;
+          // right: 0px;
+        }
+      }
+    }
+  }
+
+  .indexTablebar {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+  }
+}

src/pages/meetup/Detail/index.jsx

@@ -0,0 +1,177 @@
+import { Component } from "react";
+import { View, Text, Image } from "@tarojs/components";
+import "./index.scss";
+import { AtTabBar } from "taro-ui";
+import React, { useCallback, useEffect, useState } from "react";
+import { AtGrid } from "taro-ui";
+import { Swiper, SwiperItem } from "@tarojs/components";
+import { AtCard } from "taro-ui";
+import { AtImagePicker } from "taro-ui";
+import Taro from "@tarojs/taro";
+import { AtAvatar } from "taro-ui";
+import { AtButton } from "taro-ui";
+// import Taro from "@tarojs/taro";
+
+import { AtList, AtListItem } from "taro-ui";
+
+// export default class Index extends Component {
+const Detail = () => {
+  const [current, setcurrent] = useState(2);
+  const [id, setid] = useState(null);
+  const [openid, setopenid] = useState(null);
+  const [joinMeetup, setjoinMeetup] = useState(false);
+
+  useEffect(() => {
+    let newparams = Taro.getCurrentInstance().router.params;
+    let newId = newparams.id;
+    if (newId) {
+      setid(newId);
+    }
+    let newjoinMeetup=window.localStorage.getItem('joinMeetup')
+    setjoinMeetup(newjoinMeetup)
+  }, []);
+
+  // const handleClick = (value) => {
+  //   console.log("value", value);
+  //   setcurrent(value);
+  //   if (value == 2) {
+  //     // 跳转到目的页面，在当前页面打开
+  //     Taro.navigateTo({
+  //       url: "/pages/my/index",
+  //     });
+  //   } else if (value == 0) {
+  //     Taro.navigateTo({
+  //       url: "/pages/index/index",
+  //     });
+  //   } else {
+  //     Taro.navigateTo({
+  //       url: "/pages/meetup/index",
+  //     });
+  //   }
+  // };
+
+  const onBridgeReady = () => {
+    WeixinJSBridge.call("hideOptionMenu");
+  };
+
+  useEffect(() => {
+    let $instance = Taro.getCurrentInstance();
+    // console.log("11");
+    console.log($instance.router.params);
+    // if (typeof WeixinJSBridge == "undefined") {
+    //   if (document.addEventListener) {
+    //     document.addEventListener("WeixinJSBridgeReady", onBridgeReady, false);
+    //   } else if (document.attachEvent) {
+    //     document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
+    //     document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
+    //   }
+    // }
+  }, []);
+
+  const joinmeet = () => {
+    // console.log("111");
+    Taro.request({
+      method:'POST',
+      url: "/api/payh5", //仅为示例，并非真实的接口地址
+      // url: "https://pay.hackrobot.cn/api/payh5", //仅为示例，并非真实的接口地址
+
+      data: {
+        callback_url:window.location.href,
+        openid:window.localStorage.getItem('openid')
+      },
+      header: {
+        "content-type": "application/json", // 默认值
+      },
+      success: function (res) {
+        console.log(res.data);
+        // window.alert(res.data.jsapi);
+        WeixinJSBridge.invoke(
+          "getBrandWCPayRequest",
+          {
+            // 以下6个支付参数通过payjs的jsapi接口获取
+            // appId: "wxc5205a653b0259bf",
+            // timeStamp: "1701401644",
+            // nonceStr: "KhOYB0wFV6j9qyQK",
+            // package: "prepay_id=wx01113404850024729b35f4d69b73500000",
+            // signType: "MD5",
+            // paySign: "2A823C8D47CCF871C6C65A56DC228CF8",
+            ...res?.data?.jsapi??{},
+          },
+          function (res) {
+            if (res.err_msg == "get_brand_wcpay_request:ok") {
+              setjoinMeetup(true)
+              window.localStorage.setItem('joinMeetup',true)
+              WeixinJSBridge.call("closeWindow");
+            }
+          }
+        );
+      },
+    });
+  };
+  return (
+    <View className="Detail">
+      {/* <Text>Hello world!</Text> */}
+      {/* <AtAvatar image='https://cdn.huodongxing.com/logo/202312/8732019012100/promoteMini.png'></AtAvatar> */}
+      <View>
+        <Image
+          style="width:100%;height: 200px;background: #fff;"
+          src={
+            "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
+          }
+        />
+      </View>
+      <AtList>
+        <AtListItem title="[副业交流] 沙龙茶话会" onClick={() => {}} />
+        <AtListItem title="日期" extraText="2023/12/06" arrow="" />
+        <AtListItem title="报名人数" extraText="4/10" arrow="" />
+        <AtListItem
+          title="地点"
+          note="广东省深圳市福田区石厦地铁站C口"
+          extraText=""
+        />
+        {/* <AtListItem title='禁用状态' disabled extraText='详细信息' /> */}
+      </AtList>
+
+      {/* <AtList>
+        <AtListItem
+          title="联系我们"
+          note=""
+          arrow="right"
+          iconInfo={{ size: 25, color: "#78A4FA", value: "calendar" }}
+        />
+        <AtListItem
+          title="版本日志"
+          note=""
+          extraText=""
+          arrow="right"
+          iconInfo={{ size: 25, color: "#FF4949", value: "bookmark" }}
+        />
+      </AtList> */}
+
+      <View>
+        <AtButton
+          className="bottomBtn"
+          type="primary"
+          onClick={() => joinmeet()}
+          disabled={joinMeetup}
+        >
+          {!!joinMeetup?'已报名':'立即报名'}
+        </AtButton>
+      </View>
+
+      {/* <View className="indexTablebar">
+        <AtTabBar
+          tabList={[
+            { title: "首页", text: "" },
+            { title: "活动" },
+            { title: "我的" },
+          ]}
+          onClick={(value) => handleClick(value)}
+          current={current}
+        />
+      </View> */}
+    </View>
+  );
+};
+
+export default Detail;

src/pages/meetup/Detail/index.scss

@@ -0,0 +1,11 @@
+.Detail{
+
+
+
+    .bottomBtn{
+        display: flex;
+        position: fixed;
+        bottom: 0px;
+        width: 100%;
+    }
+}

src/pages/meetup/index.jsx

@@ -0,0 +1,155 @@
+import { Component } from "react";
+import { View, Text, Image } from "@tarojs/components";
+import "./index.scss";
+import { AtTabBar } from "taro-ui";
+import React, { useCallback, useEffect, useState } from "react";
+import { AtGrid } from "taro-ui";
+import { Swiper, SwiperItem } from "@tarojs/components";
+import { AtCard } from "taro-ui";
+import { AtImagePicker } from "taro-ui";
+import Taro from "@tarojs/taro";
+import { AtButton } from "taro-ui";
+
+import { Picker } from "@tarojs/components";
+import { AtList, AtListItem } from "taro-ui";
+import { AtNavBar } from "taro-ui";
+
+// export default class Index extends Component {
+const Meetup = () => {
+  const [current, setcurrent] = useState(1);
+  const [joinMeetup, setjoinMeetup] = useState(false);
+
+  const [pickData, setpickData] = useState({
+    selector: ["美国", "中国", "巴西", "日本"],
+    selectorChecked: "美国",
+    timeSel: "12:01",
+    dateSel: "2018-04-22",
+  });
+  const handleClick = (value) => {
+    console.log("value", value);
+    setcurrent(value);
+    if (value == 2) {
+      // 跳转到目的页面，在当前页面打开
+      Taro.navigateTo({
+        url: "/pages/my/index",
+      });
+    } else if (value == 0) {
+      Taro.navigateTo({
+        url: "/pages/index/index",
+      });
+    } else {
+      Taro.navigateTo({
+        url: "/pages/meetup/index",
+      });
+    }
+  };
+  const goBack = () => {
+    // window.history.back();
+    Taro.navigateBack({
+      // delta: 2
+    });
+  };
+
+  useEffect(() => {
+    let newjoinMeetup = window.localStorage.getItem("joinMeetup");
+    setjoinMeetup(newjoinMeetup);
+
+    // window.localStorage.removeItem("joinMeetup");
+    // setjoinMeetup(false)
+  }, []);
+
+  return (
+    <View className="my">
+      {/* <AtNavBar
+        // onClickRgIconSt={handleClick}
+        // onClickRgIconNd={handleClick}
+        // onClickLeftIcon={goBack}
+        // leftIconType="chevron-left"
+        color="#000"
+        title="活动列表"
+        // leftText='返回'
+        // rightFirstIconType='bullet-list'
+        // rightSecondIconType='user'
+      /> */}
+      {/* <Text>Hello world!</Text> */}
+
+      {/* <View className="page-section">
+        <View>
+          <Picker mode="selector" range={pickData.selector} onChange={() => {}}>
+            <AtList>
+              <AtListItem
+                title="国家地区"
+                extraText={pickData.selectorChecked}
+              />
+            </AtList>
+          </Picker>
+        </View>
+        <View>
+          <Picker mode="selector" range={pickData.selector} onChange={() => {}}>
+            <AtList>
+              <AtListItem
+                title="国家地区"
+                extraText={pickData.selectorChecked}
+              />
+            </AtList>
+          </Picker>
+        </View>
+      </View> */}
+
+      <AtCard
+        note=""
+        extra=""
+        title="[副业交流] 沙龙茶话会"
+        thumb="http://www.logoquan.com/upload/list/20180421/logoquan15259400209.PNG"
+      >
+        <View className="meetupCard">
+          {" "}
+          <View className="left">
+            {" "}
+            <Image
+              style="width: 150px;height: 100px;background: #fff;"
+              src={
+                "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
+              }
+            />
+          </View>
+          <View className="right">
+            <View className="up">
+              <span style={{ color: "green" }}>[已报名]</span> 4/10
+            </View>
+            <View className="middle">2023/12/06 星期三</View>
+            <View className="down">
+              <AtButton
+                type="primary"
+                size="small"
+                className="submitBtn"
+                disabled={joinMeetup}
+                onClick={() => {
+                  Taro.navigateTo({
+                    url: "/pages/meetup/Detail/index",
+                  });
+                }}
+              >
+                {!!joinMeetup ? "已报名" : "立即报名"}
+              </AtButton>
+            </View>
+          </View>
+        </View>
+      </AtCard>
+
+      <View className="indexTablebar">
+        <AtTabBar
+          tabList={[
+            { title: "首页", text: "" },
+            { title: "活动" },
+            { title: "我的" },
+          ]}
+          onClick={(value) => handleClick(value)}
+          current={current}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default Meetup;

src/pages/meetup/index.scss

@@ -0,0 +1,42 @@
+.my{
+margin-top: 20px;
+
+  .page-section{
+    display: flex;
+    flex-direction: row;
+  }
+
+  .meetupCard {
+    display: flex;
+    flex-direction: row;
+    .right {
+      // background-color: yellow;
+      width: 100%;
+      margin-left: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .down {
+        width: 200px;
+        // background-color: aqua;
+        position: relative;
+        bottom: 10px;
+        right: -120px;
+        // display: flex;
+        // flex-direction: column-reverse;
+        // justify-content:flex-end
+        // position: relative;
+        .submitBtn {
+          // width: 200px;
+          // position: absolute;
+          // right: 0px;
+        }
+      }
+    }
+  }
+    .indexTablebar {
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+      }
+}

src/pages/my/index.jsx

@@ -0,0 +1,92 @@
+import { Component } from "react";
+import { View, Text, Image } from "@tarojs/components";
+import "./index.scss";
+import { AtTabBar } from "taro-ui";
+import React, { useCallback, useEffect, useState } from "react";
+import { AtGrid } from "taro-ui";
+import { Swiper, SwiperItem } from "@tarojs/components";
+import { AtCard } from "taro-ui";
+import { AtImagePicker } from "taro-ui";
+import Taro from "@tarojs/taro";
+import { AtAvatar } from "taro-ui";
+import { AtTag } from "taro-ui";
+import { AtList, AtListItem } from "taro-ui";
+import avatar from "../../images/avatar.jpg";
+
+// export default class Index extends Component {
+const My = () => {
+  const [current, setcurrent] = useState(2);
+  const [wxid, setwxid] = useState(null);
+
+  useEffect(()=>{
+    getWxid()
+  },[])
+
+  const getWxid = () => {
+    let newWxid = window.localStorage.getItem("wxid");
+    if (!!newWxid) {
+      setwxid(newWxid);
+    }
+  };
+
+  const handleClick = (value) => {
+    console.log("value", value);
+    setcurrent(value);
+    if (value == 2) {
+      // 跳转到目的页面，在当前页面打开
+      Taro.navigateTo({
+        url: "/pages/my/index",
+      });
+    } else if (value == 0) {
+      Taro.navigateTo({
+        url: "/pages/index/index",
+      });
+    } else {
+      Taro.navigateTo({
+        url: "/pages/meetup/index",
+      });
+    }
+  };
+  return (
+    <View className="my">
+      {/* <Text>Hello world!</Text> */}
+
+      <View className="myAtAvatar">
+        <AtAvatar className="AtAvatar" image={avatar}></AtAvatar>
+        <AtTag type="primary" circle>
+          新注册用户
+        </AtTag>
+      </View>
+
+      <AtList>
+        <AtListItem
+          title="联系我们"
+          note=""
+          arrow="right"
+          iconInfo={{ size: 25, color: "#78A4FA", value: "calendar" }}
+        />
+        <AtListItem
+          title="版本日志"
+          note=""
+          extraText=""
+          arrow="right"
+          iconInfo={{ size: 25, color: "#FF4949", value: "bookmark" }}
+        />
+      </AtList>
+
+      <View className="indexTablebar">
+        <AtTabBar
+          tabList={[
+            { title: "首页", text: "" },
+            { title: "活动" },
+            { title: "我的" },
+          ]}
+          onClick={(value) => handleClick(value)}
+          current={current}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default My;

src/pages/my/index.scss

@@ -0,0 +1,23 @@
+.my{
+
+.myAtAvatar{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 300px;
+  // background-color: #f4ffb8;
+  // padding-left: 20px;
+  // padding-right: 20px;
+  .AtAvatar{
+    margin-bottom: 10px;
+  }
+}
+
+    .indexTablebar {
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+      }
+}

yarn.lock

@@ -3826,7 +3826,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5:
+classnames@^2.2.5, classnames@^2.2.6:
   version "2.3.2"
   resolved "https://registry.npmmirror.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
   integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
@@ -4446,6 +4446,11 @@ data-urls@^4.0.0:
     whatwg-mimetype "^3.0.0"
     whatwg-url "^12.0.0"
 
+dayjs@^1.7.7:
+  version "1.11.10"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
+  integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -8100,7 +8105,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.npmmirror.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
-"lodash@4.6.1 || ^4.16.1", lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4:
+"lodash@4.6.1 || ^4.16.1", lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4:
   version "4.17.21"
   resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -9967,7 +9972,7 @@ promise-polyfill@^7.1.0:
   resolved "https://registry.npmmirror.com/promise-polyfill/-/promise-polyfill-7.1.2.tgz#ab05301d8c28536301622d69227632269a70ca3b"
   integrity sha512-FuEc12/eKqqoRYIGBrUptCBRhobL19PS2U31vMNTfyck1FxPyMfgsXyW4Mav85y/ZN1hop3hOwRlUDok23oYfQ==
 
-prop-types@^15.8.1:
+prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmmirror.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -10149,6 +10154,21 @@ react-is@^17.0.1:
   resolved "https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-native-animatable@1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.3.3.tgz#a13a4af8258e3bb14d0a9d839917e9bb9274ec8a"
+  integrity sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w==
+  dependencies:
+    prop-types "^15.7.2"
+
+react-native-modal@^13.0.0:
+  version "13.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-modal/-/react-native-modal-13.0.1.tgz#691f1e646abb96fa82c1788bf18a16d585da37cd"
+  integrity sha512-UB+mjmUtf+miaG/sDhOikRfBOv0gJdBU2ZE1HtFWp6UixW9jCk/bhGdHUgmZljbPpp0RaO/6YiMmQSSK3kkMaw==
+  dependencies:
+    prop-types "^15.6.2"
+    react-native-animatable "1.3.3"
+
 react-reconciler@0.27.0:
   version "0.27.0"
   resolved "https://registry.npmmirror.com/react-reconciler/-/react-reconciler-0.27.0.tgz#360124fdf2d76447c7491ee5f0e04503ed9acf5b"
@@ -11673,6 +11693,17 @@ tar-stream@^1.5.2:
     to-buffer "^1.1.1"
     xtend "^4.0.0"
 
+taro-ui@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/taro-ui/-/taro-ui-3.2.0.tgz#daa861d91694544ec8d30ee2e4d9e412832cb239"
+  integrity sha512-C3A2DaWQ7yCgQQEEEVbGQLByc4Op86py/AgIk0HLDUvp5rzLkpPSyMZWY7TvYroyyyy+ARt6BmDcLinT80xUUw==
+  dependencies:
+    classnames "^2.2.6"
+    dayjs "^1.7.7"
+    lodash "^4.17.10"
+    prop-types "^15.7.2"
+    react-native-modal "^13.0.0"
+
 terser-webpack-plugin@^5.1.3, terser-webpack-plugin@^5.3.7:
   version "5.3.9"
   resolved "https://registry.npmmirror.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz#832536999c51b46d468067f9e37662a3b96adfe1"