iot_ar_react/src/pages/Activities/Activities.js

import React, { useEffect, useState } from "react";
import "./Activities.scss";
import back from "./back.svg";
import clock from "./clock.svg";
import detail from "./detail.png";
import { post } from "../../js/helpers/data-helper";

const Activities = ({
  initActivity,
  setInitActivity,
  onGo,
  mall: { activities, pois },
  facilities,
  memberID,
}) => {
  const [activity, setActivity] = useState(null);
  const [receiving, setReceiving] = useState(false);
  const poiMap = pois.reduce((acc, nxt) => ({ ...acc, [nxt.code]: nxt }), {});
  const getFacByAct = (activity) => {
    if (!activity) return null;
    const poiCode = activity.poiList.find((code) => poiMap[code]);
    const poi = poiCode ? poiMap[poiCode] : null;
    if (!poi) return null;
    const actFacs = facilities ? facilities["活动"] : [];
    if (!actFacs) return null;
    const actFac = actFacs.find(({ title }) => title === poi.name);
    return actFac;
  };

  const reject = () => {
    window.weui.toast("该活动即将上线，敬请期待！", {
      className: "toast",
    });
  };
  const receive = async (activity) => {
    setReceiving(true);
    try {
      const { code, msg } = await post("/api/ar/v1/applet/CouponReceive", {
        activityCode: activity.code,
        memberID,
      });
      window.weui.toast(msg, {
        className: "toast",
      });
      if (code !== 200) {
        activity.isAllReceived = true;
      }
    } catch (error) {
      console.warn(error);
    } finally {
      setReceiving(false);
    }
  };
  useEffect(() => {
    if (initActivity) {
      setActivity(initActivity);
      setInitActivity(null);
    }
  }, [initActivity]);

  return (
    <div className="activities">
      <div className="header">活动</div>
      <div className="list-container">
        {activities &&
          activities.map((act) => (
            <div key={act.code} className="card">
              <img className="card-header" src={act.fileUrl}></img>
              <div className="card-content">
                <div className="detail" onClick={() => setActivity(act)}>
                  <img src={detail}></img>查看详情
                </div>
                <div
                  className="btn"
                  onClick={() => {
                    const fac = getFacByAct(act);
                    if (!fac) return reject();
                    return onGo && onGo(fac);
                  }}
                >
                  GO
                </div>
              </div>
            </div>
          ))}
      </div>
      {activity && (
        <div className="activity">
          <img
            className="back"
            onClick={() => setActivity(null)}
            src={back}
          ></img>
          <img className="r1" src={activity.fileUrl}></img>
          <div className="r2">
            <div className="rr1">{activity.name}</div>
            <div className="rr2">
              <img src={clock}></img>
              {activity.beginTime.split(" ")[0]}至
              {activity.endTime.split(" ")[0]}
            </div>
            <div className="r3">
              <div className="title">活动介绍</div>
              {activity.intro}
              <div
                className="r4"
                onClick={() => {
                  const fac = getFacByAct(activity);
                  if (!fac) return reject();
                  return onGo && onGo(fac);
                }}
              >
                开始导航
              </div>
              {activity.defaultAwardTitle && (
                <div className="r5">
                  <div className="t1">{activity.defaultAwardTitle}</div>
                  <div className="meta">活动奖励</div>
                  <div
                    onClick={() =>
                      !activity.isAllReceived && !receiving && receive(activity)
                    }
                    className={`btn ${
                      activity.isAllReceived || receiving ? "disabled" : ""
                    }`}
                  >
                    领取奖励
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};
export default Activities;