feat: 活动详情

2022-11-21 14:27:26 +08:00
parent bd3d5652e9
commit 34548946db
8 changed files with 82 additions and 60 deletions
--- a/src/pages/activityList/components/details/index.tsx
+++ b/src/pages/activityList/components/details/index.tsx
@@ -1,14 +1,16 @@
 import { Button, Cell } from "@antmjs/vantui";
 import { RichText, View } from "@tarojs/components";
-import Taro from "@tarojs/taro";
+import Taro, { getCurrentInstance } from "@tarojs/taro";
 import react, { useEffect, useState } from "react";
-import { getTable } from "../../../../utils/index";
+import { getTable, getTableid } from "../../../../utils/index";
 import "./index.scss";
 import { Image } from "@antmjs/vantui";

 const details = () => {
  const [dataSource, setdataSource] = useState<any>([]);
  const [bottomheight, setbottomheight] = useState(0);
+  let $instance: any = getCurrentInstance();
+  const { id } = $instance?.router?.params??{};  //活动id

  useEffect(() => {
    // 设置标题
@@ -24,15 +26,15 @@ const details = () => {
    setbottomheight(newBottom);

    let objParams = {
-      tableName: "cityNew",
-      id: "80516fb66370bcf300b8f43c5f4dd52b",
+      tableName: "details",
+      id: id,
      okFun: (res) => {
        console.log("res", res);
        setdataSource(res?.data ?? []);
      },
    };
-    // getTable(objParams)
-    getTable(objParams);
+    getTableid(objParams)  //指定活动详情id
+    // getTable(objParams);
  }, []);

  // console.log('SafeAreaResult',Taro.getSystemInfoSync())
@@ -65,7 +67,7 @@ const details = () => {
        </View>

        {/* 头像列表 */}
-        <View  className="imagesArr">
+        <View className="imagesArr">
          {[1, 2, 3, 4].map((item: any) => {
            return (
              <Image
@@ -73,13 +75,11 @@ const details = () => {
                width="30px"
                height="30px"
                src="https://img.yzcdn.cn/vant/cat.jpeg"
-                style={{marginRight:'5px'}}
+                style={{ marginRight: "5px" }}
              />
            );
          })}
        </View>
-
-        
      </View>
      {/* 富文本 */}
      <View onClick={() => {}} className="RichText">
--- a/src/pages/components/ActiveCard/index.tsx
+++ b/src/pages/components/ActiveCard/index.tsx
@@ -1,46 +1,59 @@
 import { Button, Tabbar, TabbarItem } from "@antmjs/vantui";
 import { View, Text } from "@tarojs/components";
 import Taro from "@tarojs/taro";
-import react from "react";
+import react, { useState } from "react";
 import { Image } from "@antmjs/vantui";
 import "./index.scss";
 import { Tag } from "@antmjs/vantui";

-const ActiveCard = () => {
+const ActiveCard = (props: any) => {
+  const [dataSource, setdataSource] = useState<any>({}); //活动详情
+  const { title, address, date, tagName, tagCode, Status, images, isDelete } =
+    props?.dataSource;
+
  return (
    <View className="activeCard">
      <View className="left">
-       {false && <View className="leftTag">
-          <Tag round={true} type="success">
-            标签
-          </Tag>
-        </View>}
+        {false && (
+          <View className="leftTag">
+            <Tag round={true} type="success">
+              标签
+            </Tag>
+          </View>
+        )}

        <View className="leftImage">
          <Image
            width="100%"
            height="100px"
            fit="cover"
-            src="cloud://cloud1-5g5xrgza12a0dd6d.636c-cloud1-5g5xrgza12a0dd6d-1253665791/images/v4-460px-Climb-a-Mountain-Step-9.jpg"
+            // src="cloud://cloud1-5g5xrgza12a0dd6d.636c-cloud1-5g5xrgza12a0dd6d-1253665791/images/v4-460px-Climb-a-Mountain-Step-9.jpg"
+            src={images?.[0]}
          />
        </View>
      </View>
      <View className="middle">
        <View className="title">
          <Tag round={true} type="warning" style={{ marginRight: "5px" }}>
-            标签
+            {/* 标签 */}
+            {tagName}
          </Tag>
-          <Text>这是标题这是标题这是标题这是标题这是标题</Text>
+
+          {/* 标题 */}
+          <Text>{title}</Text>
        </View>
        <View className="down">
          <View className="date">
-            <View className="21">莲花山公园</View>
-            <View className="11">2022年11月17日</View>
+            {/* 地址 */}
+            <View className="21">{address}</View>
+            {/* 日期 */}
+            <View className="11">{date}</View>
          </View>

          <View className="btn">
+            {/* 活动状态 0 待开放 1开放中 2已取消 3进行中 4已结束 5已关闭 */}
            <Button plain hairline type="primary">
-              立即报名
+              {Status === "0" ? "立即报名" : "取消"}
            </Button>
          </View>
        </View>
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -35,6 +35,8 @@ const Home = () => {

  const [SearchValue, setSearchValue] = useState("");

+  const [details,setdetails]=useState<any>([])  //活动详情
+
  const onChange = (e) => {};
  const images = [
    "cloud://cloud1-5g5xrgza12a0dd6d.636c-cloud1-5g5xrgza12a0dd6d-1253665791/download.jpg",
@@ -55,15 +57,18 @@ const Home = () => {
      withShareTicket: true,
      success() {},
    });
-    // let objParams = {
-    //   tableName: "test",
-    //   id: "80516fb66370bcf300b8f43c5f4dd52b",
-    //   okFun: (res) => {
-    //     console.log("res", res);
-    //   },
-    // };

-    // getTableid(objParams);
+
+    let objParams = {
+      tableName: "details",
+      // id: "80516fb66370bcf300b8f43c5f4dd52b",
+      okFun: (res) => {
+        console.log("details--", res);
+        setdetails(res?.data??[])
+      },
+    };
+
+    getTable(objParams);
  }, []);

  const uploadTaro = (tempFilePaths: any) => {
@@ -300,26 +305,18 @@ const Home = () => {
      </View> */}

      {/* 截取数组2个活动 */}
-      {[1, 2, 3, 4].splice(0, 2).map((item: any) => {
+      {details.splice(0, 2).map((item: any,index:any) => {
        return (
          <View
            onClick={() => {
              console.log("Card");
              Taro.navigateTo({
-                url: "/pages/activityList/components/details/index",
+                url: `/pages/activityList/components/details/index?id=${item?._id}`,
              });
            }}
          >
            {/* 活动卡片 */}
-            <ActiveCard />
-
-            {/* <Card
-              num=""
-              price=""
-              desc="报名中"
-              title="周末爬山"
-              thumb="cloud://cloud1-5g5xrgza12a0dd6d.636c-cloud1-5g5xrgza12a0dd6d-1253665791/images.jpg"
-            /> */}
+            <ActiveCard dataSource={item} />
          </View>
        );
      })}
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,4 +1,6 @@
 import Taro from "@tarojs/taro";
+import { getCurrentInstance } from "@tarojs/taro";
+

 // 数据库环境
 // const db: any = Taro.cloud.database({
@@ -13,6 +15,10 @@ interface Typeint {
  okFun: any;
 }

+const  params=()=>{
+  let $instance: any = getCurrentInstance();
+  return $instance.router.params;
+}
 // 添加数据
 export const addTable: any = ({ env,tableName, objData, okFun }: Typeint) => {
  // 数据库环境
@@ -30,7 +36,7 @@ export const addTable: any = ({ env,tableName, objData, okFun }: Typeint) => {
  });
 };

-// 获取指定集合数据
+// 获取指定集合数据表
 export const getTable: any = ({ env,tableName, okFun }: Typeint) => {
    // 数据库环境
    const db: any = Taro.cloud.database({
@@ -45,6 +51,24 @@ export const getTable: any = ({ env,tableName, okFun }: Typeint) => {
    });
  };

+  // 获取指定id数据数据
+export const getTableid: any = ({ env,tableName, id, okFun }: Typeint) => {
+  // 数据库环境
+  const db: any = Taro.cloud.database({
+    env: env,
+  });
+
+  let nowtable: any = db?.collection(tableName);
+  nowtable?.doc(id).get({
+    success: (res: any) => {
+      okFun(res);
+    },
+  });
+};
+
+
+
+
  // 更新数据
 export const updateTableid: any = ({ env,tableName,objData, id, okFun }: Typeint) => {
    // 数据库环境
@@ -77,17 +101,3 @@ export const deleteTableid: any = ({ env,tableName, id, okFun }: Typeint) => {

  

-// 获取指定id数据数据
-export const getTableid: any = ({ env,tableName, id, okFun }: Typeint) => {
-  // 数据库环境
-  const db: any = Taro.cloud.database({
-    env: env,
-  });
-
-  let nowtable: any = db?.collection(tableName);
-  nowtable?.doc(id).get({
-    success: (res: any) => {
-      okFun(res);
-    },
-  });
-};