活动详情页

2023-12-02 22:02:08 +08:00
parent c7f25cb21a
commit 6226b591ff
9 changed files with 263 additions and 58 deletions
--- a/src/app.config.js
+++ b/src/app.config.js
@@ -3,6 +3,8 @@ export default {
    'pages/index/index',
    'pages/my/index',
    'pages/meetup/index',
+    'pages/meetup/Detail/index',
+
  ],
  window: {
    backgroundTextStyle: 'light',
--- a/src/pages/index/index.config.js
+++ b/src/pages/index/index.config.js
@@ -1,3 +1,3 @@
 export default {
-  navigationBarTitleText: '首页'
+  navigationBarTitleText: '异度星球'
 }
--- a/src/pages/index/index.jsx
+++ b/src/pages/index/index.jsx
@@ -1,6 +1,6 @@
 import { Component } from "react";
 import Taro from "@tarojs/taro";
-import { View, Text, Image } from "@tarojs/components";
+import { View, Text, Image, Button } from "@tarojs/components";
 import "./index.scss";
 import { AtTabBar } from "taro-ui";
 import React, { useCallback, useEffect, useState } from "react";
@@ -9,41 +9,68 @@ 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 { 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 {
 const Index = () => {
  const [current, setcurrent] = useState(0);
+  const [isOpened, setisOpened] = useState(false);
+
  const handleClick = (value) => {
    console.log("value", value);
    setcurrent(value);
    if (value == 2) {
      // 跳转到目的页面，在当前页面打开
-      Taro.redirectTo({
+      Taro.navigateTo({
        url: "/pages/my/index",
      });
    } else if (value == 0) {
-      Taro.redirectTo({
+      Taro.navigateTo({
        url: "/pages/index/index",
      });
    } else {
-      Taro.redirectTo({
+      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={()=>{}}
-      />
+        <AtSearchBar
+          showActionButton
+          value={""}
+          onChange={() => {}}
+          onActionClick={() => {}}
+        />
      </View>
      <View className="indexSwiper">
        {" "}
@@ -61,7 +88,7 @@ const Index = () => {
              <Image
                // style="width: 300px;height: 100px;background: #fff;"
                src={
-                  "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
+                  "http://cdn.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30775083495267465.jpg"
                }
              />
            </View>
@@ -96,7 +123,7 @@ const Index = () => {
          {
            image:
              "https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png",
-            value: "打卡",
+            value: "签到",
          },
          {
            image:
@@ -109,6 +136,27 @@ const Index = () => {
            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
@@ -129,10 +177,21 @@ const Index = () => {
            />
          </View>
          <View className="right">
-            <View className="up">[副业交流] 沙龙茶话会</View>
+            <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">
+              <AtButton
+                type="primary"
+                size="small"
+                className="submitBtn"
+                onClick={() => {
+                  Taro.navigateTo({
+                    url: "/pages/meetup/Detail/index",
+                  });
+                }}
+              >
                立即报名
              </AtButton>
            </View>
@@ -140,7 +199,7 @@ const Index = () => {
        </View>
      </AtCard>

-      <View className="indexTablebar">
+      {/* <View className="indexTablebar">
        <AtTabBar
          tabList={[
            { title: "首页", text: "" },
@@ -150,7 +209,7 @@ const Index = () => {
          onClick={(value) => handleClick(value)}
          current={current}
        />
-      </View>
+      </View> */}
    </View>
  );
 };
--- a/src/pages/index/index.scss
+++ b/src/pages/index/index.scss
@@ -12,7 +12,7 @@
      // flex-direction: column;
      // align-items: center;
      // justify-content: center;
-      background-color: yellow;
+      // background-color: yellow;
      height: 300px;
      width: 100%;
      // padding: 20px;
--- a/src/pages/meetup/Detail/index.jsx
+++ b/src/pages/meetup/Detail/index.jsx
@@ -0,0 +1,72 @@
+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 { AtList, AtListItem } from "taro-ui";
+
+// export default class Index extends Component {
+const Detail = () => {
+  const [current, setcurrent] = useState(2);
+  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> */}
+      {/* <AtAvatar image='https://cdn.huodongxing.com/logo/202312/8732019012100/promoteMini.png'></AtAvatar> */}
+
+      <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 Detail;
--- a/src/pages/meetup/Detail/index.scss
+++ b/src/pages/meetup/Detail/index.scss
--- a/src/pages/meetup/index.jsx
+++ b/src/pages/meetup/index.jsx
@@ -7,34 +7,86 @@ 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 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 [pickData, setpickData] = useState({
+    selector: ["美国", "中国", "巴西", "日本"],
+    selectorChecked: "美国",
+    timeSel: "12:01",
+    dateSel: "2018-04-22",
+  });
  const handleClick = (value) => {
-    console.log('value',value)
-    setcurrent(value)
+    console.log("value", value);
+    setcurrent(value);
    if (value == 2) {
-        // 跳转到目的页面，在当前页面打开
-        Taro.redirectTo({
-          url: "/pages/my/index",
-        });
-      }else if(value == 0){
-        Taro.redirectTo({
-            url: "/pages/index/index",
-          });
-      }else{
-        Taro.redirectTo({
-          url: "/pages/meetup/index",
-        });
-      }
+      // 跳转到目的页面，在当前页面打开
+      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="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=""
@@ -64,8 +116,7 @@ const Meetup = () => {
        </View>
      </AtCard>

-
-      <View className="indexTablebar">
+      {/* <View className="indexTablebar">
        <AtTabBar
          tabList={[
            { title: "首页", text: "" },
@@ -75,7 +126,7 @@ const Meetup = () => {
          onClick={(value) => handleClick(value)}
          current={current}
        />
-      </View>
+      </View> */}
    </View>
  );
 };
--- a/src/pages/meetup/index.scss
+++ b/src/pages/meetup/index.scss
@@ -1,5 +1,10 @@
 .my{
+margin-top: 20px;

+  .page-section{
+    display: flex;
+    flex-direction: row;
+  }

  .meetupCard {
    display: flex;
--- a/src/pages/my/index.jsx
+++ b/src/pages/my/index.jsx
@@ -7,38 +7,54 @@ 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 Taro from "@tarojs/taro";
+import { AtAvatar } from "taro-ui";

+import { AtList, AtListItem } from "taro-ui";

 // export default class Index extends Component {
 const My = () => {
  const [current, setcurrent] = useState(2);
  const handleClick = (value) => {
-    console.log('value',value)
-    setcurrent(value)
+    console.log("value", value);
+    setcurrent(value);
    if (value == 2) {
-        // 跳转到目的页面，在当前页面打开
-        Taro.redirectTo({
-          url: "/pages/my/index",
-        });
-      }else if(value == 0){
-        Taro.redirectTo({
-            url: "/pages/index/index",
-          });
-      }else{
-        Taro.redirectTo({
-          url: "/pages/meetup/index",
-        });
-      }
+      // 跳转到目的页面，在当前页面打开
+      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> */}
-      <AtAvatar image='https://cdn.huodongxing.com/logo/202312/8732019012100/promoteMini.png'></AtAvatar>
+      {/* <AtAvatar image='https://cdn.huodongxing.com/logo/202312/8732019012100/promoteMini.png'></AtAvatar> */}

+      <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">
+      {/* <View className="indexTablebar">
        <AtTabBar
          tabList={[
            { title: "首页", text: "" },
@@ -48,7 +64,7 @@ const My = () => {
          onClick={(value) => handleClick(value)}
          current={current}
        />
-      </View>
+      </View> */}
    </View>
  );
 };