电影轮播时实现下方影片信息对应

完整代码如下(按需修改):

import React, { useState, useEffect } from "react";
import { LeftOutline } from "antd-mobile-icons";
import { IP } from "../../utils/request";
import { NoticeBar, Swiper } from "antd-mobile";
import { useLocation, useNavigate } from "react-router-dom";
import "./play.scss";
import { $_celimainfo, $_celimamovieinfo } from "../../apis/movie";

export default function Play() {
  const [moviedata, setMovieData] = useState([]);
  const [cinInfo, setCinInfo] = useState({});
  const [project, setProject] = useState({});
  const [sum, setSum] = useState(0);
  const navigate = useNavigate();
  const { state } = useLocation();

  const fetchData = async () => {
    if (moviedata.length === 0) {
      const res = await $_celimainfo({ cid: state.cid });
      setMovieData(res.data.data);
      setCinInfo(res.data.data[0]);
      movieinfo(res.data.data[0].id);
    }
  };

  const movieinfo = async (num) => {
    const res = await $_celimamovieinfo({ cid: state.cid, mid: num });
    setProject(res.data.data);
    console.log(res);
  };

  useEffect(() => {
    fetchData();
  }, [state.cid]);

  const handleBack = () => {
    navigate(-1);
  };

  const handleSwiperChange = (index) => {
    const item = moviedata[index];
    if (item) {
      movieinfo(item.id);
      setCinInfo(item);
    }
  };

  const handleDateClick = (index) => {
    setSum(index);
  };

  // 传参
  const seat = () => {
    navigate("/seat", { state: { project } });
  };
  const demoLongText =
    "尊敬的观众们，欢迎光临我们的电影院！我们提供了4X影厅、MX4D和DTS: X影厅等特效影厅，让您享受震撼的观影体验。儿童观众请注意，特别为您提供了适合的观影环境。期待您的光临，谢谢！";

  return (
    <div className="play">
      <div className="icon" onClick={handleBack}>
        <NoticeBar
          content={demoLongText}
          icon={<LeftOutline fontSize={20} color="#3d3d3d" />}
          color="alert"
        />
      </div>

      <div className="head">
        <h1>{state.name}</h1>
        <p>{state.address}</p>
        <p className="coupon">{state.type}</p>
      </div>

      <div className="main">
        {moviedata && moviedata.length > 0 && (
          <Swiper
            style={{
              "--border-radius": "8px",
            }}
            slideSize={70}
            trackOffset={15}
            onIndexChange={handleSwiperChange}
            loop
            stuckAtBoundary={false}
          >
            {moviedata.map((item, index) => (
              <Swiper.Item key={index}>
                <div className="content">
                  <img src={IP + item.image} alt={item.name} />
                </div>
              </Swiper.Item>
            ))}
          </Swiper>
        )}
        <p className="slice">
          {cinInfo.name} <span className="scor">电影评分 </span>
          <span className="num"> {cinInfo.point}</span>
        </p>
        <p className="time">
          {cinInfo.time}分钟 / {cinInfo.type} / {cinInfo.director}
        </p>
      </div>

      <div className="info">
        <div className="schedule-date">
          {Object.keys(project).length > 0 ? (
            Object.keys(project).map((date, index) => (
              <div
                className="schedule-date-day"
                key={index}
                style={{
                  color: index === sum ? "#ff2f66" : "#333333",
                  fontSize: index === sum ? "20px" : "15px",
                }}
                onClick={() => handleDateClick(index)}
              >
                {index === 0 && <p className="today">今天</p>}
                {index === 1 && <p>明天</p>}
                {index === 2 && <p>后天</p>}
                {index === 3 && <p>外天</p>}
                {index === 4 && <p>大外天</p>}
                {index === 5 && <p>大大外天天</p>}
                {index === 6 && <p>即今天</p>}
                {index === 7 && <p>即明天</p>}
                <p
                  className="time-one"
                  style={{
                    color: index === sum ? "#ff2f66" : "#333333",
                    fontSize: index === sum ? "16px" : "12px",
                  }}
                >
                  {date}
                </p>
              </div>
            ))
          ) : (
            <div>亲,正在加载中,请稍后...</div>
          )}
        </div>

        <div className="schedule-session">
          {project[Object.keys(project)[sum]] &&
            project[Object.keys(project)[sum]].map((item) => (
              <div className="buy" key={item.id}>
                <div className="ome">
                  <p className="ome-time">{item.endtime}</p>
                  <p className="starttime">{item.starttime} 散场</p>
                </div>

                <div className="two">
                  <p>{item.name}</p>
                  <p>{item.type}</p>
                </div>

                <div className="three">
                  <p className="mony">
                    &yen;<span>{item.price.toFixed(2)}</span>
                  </p>
                </div>

                <div className="four">
                  <button className="btn" onClick={() => seat()}>
                    购票
                  </button>
                </div>
              </div>
            ))}
        </div>
      </div>
    </div>
  );
}