miniapp/src/pages/index/activityDetail/index.jsx

import { useState, useEffect } from "react";
import Taro, { useDidShow, useReady } from "@tarojs/taro";
import withLayout from "@/layout";
import {
  Text,
  View,
  Picker,
  Input,
  ScrollView,
  Image,
  RichText,
} from "@tarojs/components";
import "@/assets/css/iconfont.css";
import "./index.scss";
import {
  // addActivityShareNum,
  signupActivity,
  favorActivity,
  cancelFavorActivity,
  queryActivityDetail,
} from "@/services/activity";
import { getImgURL } from "@/utils/image";
import getDateFormat from "@/utils/chatDate";

const activityStatusDict = {
  0: {
    text: "立即参与",
    className: "yellow",
  },
  1: {
    text: "未开始",
    className: "blue",
  },
  2: {
    text: "已结束",
    className: "grey",
  },
  3: {
    text: "已参与",
    className: "yellow",
  },
};

export default withLayout((props) => {
  
  const { id } = props.router.params;
  const [detail, setDetail] = useState({});
  const [canChoose, setCanChoose] = useState("none");

  const [IsPull, setPull] = useState(false);
  const [PullTimer, setPullTimer] = useState(null);

  const PageRefresh = () => {
    // 页面下拉刷新回调
    setPull(true);
  };

  useEffect(() => {
    // 下拉刷新触发
    if (IsPull) {
      clearTimeout(PullTimer);
      setPullTimer(
        setTimeout(() => {
          setPull(false);
        }, 2000)
      );
    }
  }, [IsPull]);

  const getDetail = (params) => {
    Taro.showLoading();

    queryActivityDetail(params).then((res) => {
      console.log(res, "queryActivityDetail");
      setDetail(res);

      Taro.hideLoading();
    });
  };

  useEffect(() => {
    if (id) {
      getDetail(id);
    }
  }, [id]);

  useReady(() => {
    console.log("Taro.showLoading()");
  });

  useDidShow(() => {
    // Taro.getCurrentPages()
    console.log("Taro.showLoading()");

    // console.log(Taro.getCurrentPages(),'Taro.showLoading()')
    // getDetail()
  });

  //收藏
  const handleFavo = () => {
    const { dynamicId, isSaved } = detail;
    if (isSaved) {
      cancelFavorActivity(dynamicId).then((res) => {
        Taro.showToast({
          title: "已取消收藏",
        });
        setDetail({
          ...detail,
          isSaved: 0,
        });
      });
    } else {
      favorActivity(dynamicId).then((res) => {
        Taro.showToast({
          title: "收藏成功",
        });
        setDetail({
          ...detail,
          isSaved: 1,
        });
      });
    }
    // savePoint({
    //   event: 'save',
    //   eventType: 'activity',
    //   targetType: 'dynamic',
    //   propertyName: '活动详情收藏',
    //   data: '{}'
    // }).then(res => {
    //   console.log('活动详情收藏')
    // })
  };

  const handleSignup = () => {
    const {
      detail: { buildingId, dynamicId, isSign },
    } = this.state;
    const {
      userInfo: {
        person: { phone, name, nickname },
      },
    } = this.props;

    if (isSign) {
      Taro.showToast({
        icon: "none",
        title: "你已报名成功",
      });
      return;
    }

    this.setState({
      canChoose: "block",
    });
  };

  return (
    <view className="Page activityDetail flex-v">
      <view className="flex-item">
        <view>
          <ScrollView
            scroll-y
            refresher-enabled
            refresher-triggered={IsPull}
            onrefresherrefresh={PageRefresh}
            refresher-background="#fff"
          >
            <view className="PageContent">
              <view className="Top">
                <Image
                  mode="aspectFill"
                  src={getImgURL(detail.bannerListImg)}
                  className="centerLabel"
                ></Image>
              </view>

              <view className="Info">
                <view>
                  <view className="Title flex-h">
                    <view className="flex-item">
                      <text>{detail.title}</text>
                    </view>
                    <text className="Tips">{detail.enlisted || 0}人已报名</text>
                  </view>
                  <text className="Time">
                    报名截止时间：
                    {getDateFormat(
                      new Date(detail.enlistEnd).valueOf(),
                      true,
                      "yyyy/M/d"
                    )}
                  </text>
                  {/* <text className="Name">“香颂 · 蔚澜半岛”</text> */}
                  <view className="flex-h Address">
                    <text>地址：</text>
                    <view className="flex-item">
                      <text>{detail.address}</text>
                    </view>
                  </view>
                  <view className="flex-h Date">
                    <text>时间：</text>
                    <view className="flex-item">
                      <text>
                        {getDateFormat(
                          new Date(detail.startDate).valueOf(),
                          true,
                          "yyyy/M/d"
                        )}{" "}
                        -{" "}
                        {getDateFormat(
                          new Date(detail.endDate).valueOf(),
                          true,
                          "yyyy/M/d"
                        )}
                      </text>
                    </view>
                  </view>
                  <view className="Btn">
                    <text>分享好友</text>
                  </view>
                </view>
              </view>

              <view className="ActivityIntro">
                <view className="Title">
                  <text>活动介绍</text>
                </view>
                <Image
                  mode="aspectFill"
                  src={getImgURL(detail.imgUrl)}
                  className="img"
                ></Image>
                <RichText nodes={detail.desc} />
                {/* <richText nodes={detail.desc} ></richText> */}
              </view>

              <view className="Bottom">
                <view>
                  <view>
                    <text className="iconfont icon-shengming"></text>
                    <text>免责声明</text>
                  </view>
                  <view>
                    <text>
                      &emsp;&emsp;以上价格仅供参考,具体一房一价的信息以售楼处展示为准。房屋位置交通、医疗、教育、商业等配套信息，来源于第三方不作为要约,仅供参考,双方具体权利义务应以法律规定及买卖合同约定为准。本平台对项目周边文化教育的介绍旨在提供相关信息1
                      意味着信息发布方对就学安排作出承诺。相关教育资首页信息存在调整的可能,应以政府教育主管部门门及办学颁布的政策规定为准。详情请仔细阅读
                    </text>
                    <text className="active">《新联家使用免责条款》</text>
                  </view>
                </view>
              </view>
            </view>
          </ScrollView>
        </view>
      </view>
      <view className="PageBottom flex-h">
        <view className="Share">
          <text className="iconfont icon-fenxiang"></text>
          <text>分享</text>
        </view>
        <view className="Collect" onClick={handleFavo}>
          <text
            className="iconfont icon-shoucang"
            style={detail.isSaved === 1 ? { color: "red" } : undefined}
          ></text>
          <text>收藏</text>
        </view>
        <view className="flex-item"></view>

        <text className="Post" onClick={handleSignup}>
          {activityStatusDict[detail.activityStatus]?.text}
        </text>
      </view>
    </view>
  );
});