kaiPingWeb/code/src/pages/B1CardM/index.tsx

import React, { useEffect, useMemo, useState } from "react";
import styles from "./index.module.scss";
import { baseUrl } from "@/index";
import { useSelector } from "react-redux";
import { RootState } from "@/store";
import classNames from "classnames";
import btnImg from "@/assets/img/tab2/btn_m.png";
import { SwapRightOutlined } from "@ant-design/icons";

import Swiper from "./swiperCard/swiper-bundle.min.js";
import "./swiperCard/swiper-bundle.min.css";

type Props = {
  closeFu: () => void;
  clickCardFu: (id: number) => void;
};

function B1CardM({ closeFu, clickCardFu }: Props) {
  const data = useSelector(
    (state: RootState) => state.A0Layout.dataAll.village
  );

  // 改变的 轮播图 索引 用来 显示顶部 名字
  const [ind, setInd] = useState(0);

  useEffect(() => {
    let num = 0;

    const temp = window.location.hash;
    if (temp.includes("#/village?id=")) {
      const url = temp.split("?id=")[1];
      num = Number(url) - 1;
    }

    new Swiper(".mySwiper", {
      effect: "cards",
      grabCursor: true,
      // 初始高亮
      initialSlide: num,
      // loop:true
      on: {
        slideChange: function (swiper: any) {
          setInd(swiper.activeIndex);
        },
      },
    });
  }, []);

  // 当前选中的卡片信息
  const acItem = useMemo(() => {
    let info = { id: 0, name: "" };

    const infoRes = data.find((v, i) => i === ind);

    if (infoRes) info = { id: infoRes.id, name: infoRes.name };

    return info;
  }, [data, ind]);

  return (
    <div className={styles.B1CardM}>
      {/* 右上角的按钮 */}
      <div className="B1Cback" onClick={closeFu}>
        <img src={`${baseUrl}/A1Home/mobile/icon_cancel.png`} alt="" />
      </div>

      {/* 顶部的村落名字 */}
      <div className="B1Cname">{acItem.name}</div>

      {/* 卡片sw */}
      <div className="swiper mySwiper">
        <div className="swiper-wrapper">
          {data.map((v, i) => (
            <div
              className="swiper-slide"
              key={v.id}
              onClick={() => clickCardFu(v.id)}
            >
              <img src={`${baseUrl}/B1Village/mobile/${v.id}.jpg`} alt="" />
              <p
                dangerouslySetInnerHTML={{
                  __html:
                    v.infoTxt.length >= 80
                      ? v.infoTxt.substring(0, 80) + "..."
                      : v.infoTxt,
                }}
              ></p>
              {/* 背景图 */}
              <div
                className={classNames("slideBac")}
                style={{
                  backgroundImage: `url(${baseUrl}/B1Village/mobile/${
                    ind === i ? "bacAc" : "bac"
                  }.png)`,
                }}
              ></div>
            </div>
          ))}
        </div>
      </div>

      {/* 底部的按钮 */}
      <div
        className="B1Cbtn"
        onClick={() => {
          if (acItem.id) clickCardFu(acItem.id);
        }}
      >
        <img src={btnImg} alt="" />
        <div>
          点击查看
          <p>
            <SwapRightOutlined />
          </p>
        </div>
      </div>
    </div>
  );
}

const MemoB1CardM = React.memo(B1CardM);

export default MemoB1CardM;