iot_ar_react/src/components/Popup/Popup.js

import React from "react";
import desc from "./desc.png";
import closeButton from "./close.png";
import "./Popup.scss";
import navpng from "./nav.png";
import arpng from "./ar.png";
import couponTop from "./couponTop.png";
import toDetail from "./toDetail.png";
const Popup = ({
  showPopup,
  defaultPopup,
  floors,
  closePopup,
  shop,
  showDetail,
  setEnd,
  handleAR,
  onClickCoupon,
}) => (
  <div className={["popup-wrapper", showPopup ? "" : "noshow"].join(" ")}>
    {floors}
    {defaultPopup}
    {showPopup && (
      <div className="popup">
        {shop.hasCoupon && (
          <img
            className="couponTop"
            src={couponTop}
            onClick={(shop) => onClickCoupon(shop)}
          ></img>
        )}
        <img
          alt="关闭"
          className="close-icon"
          src={closeButton}
          onClick={() => closePopup()}
        ></img>
        <div className="r1">
          {shop.logoPath && (
            <div
              className="avatar"
              style={{
                backgroundImage: `url(${shop.logoPath})`,
              }}
            ></div>
          )}
          <div style={{ flex: 1 }}>
            <div className="popupname">{shop.name}</div>
            <div className="popupdesc">
              <span className={`popupformat ${shop.webUrl ? "hasDetail" : ""}`}>
                {shop.shopFormat ? shop.shopFormat : " "}
              </span>
              <span style={{ display: "flex" }}>
                {shop.floorName}
                {shop.webUrl && (
                  <img
                    className="toDetail"
                    src={toDetail}
                    onClick={() => {
                      if (window.my) {
                        window.my.navigateTo({
                          url: `../detail/detail?url=${encodeURIComponent(
                            shop.webUrl
                          )}`,
                        });
                      } else
                        window.wx.miniProgram.navigateTo({
                          url: `/pages/detail/index?url=${encodeURIComponent(
                            shop.webUrl
                          )}`,
                        });
                    }}
                  />
                )}
              </span>
            </div>
          </div>
        </div>

        <div className="tabs">
          <div className="tab" onClick={() => setEnd()}>
            <img src={navpng} /> 导航动画
          </div>
          <div className="tab" onClick={() => handleAR(shop)}>
            <img src={arpng} /> AR实时导航
          </div>
        </div>
      </div>
    )}
  </div>
);
export default Popup;