React实现影院排片列表

效果图

完整代码

import React, { useState, useEffect } from 'react'
import { useLocation, useNavigate } from 'react-router-dom';
import { NoticeBar, Swiper, Button } from 'antd-mobile'
import { $_celimainfo, $_movieinfo } from "../../apis/movieList"
import { LeftOutline } from 'antd-mobile-icons'
import { IP } from '../../utils/http'

import './CinemaInfo.scss'
// 公告
const demoLongText = '尊敬的观众们，欢迎光临我们的电影院！我们提供了4X影厅、MX4D和DTS: X影厅等特效影厅，让您享受震撼的观影体验。儿童观众请注意，特别为您提供了适合的观影环境。期待您的光临，谢谢！'
export default function CinemaInfo() {

    // 获取navigate中传递的state中的信息
    let { state } = useLocation();
    let navigate = useNavigate()
    const [stater, setStater] = useState([])
    const [cinInfo, setCinInfo] = useState([])
    const [notice, setNotice] = useState([])
    let [liActive, setLiActive] = useState([]) // 存放电影列表
    useEffect(() => {
        if (stater.length === 0) {
            $_celimainfo({ cid: state.cid }).then(res => {
                setStater(res.data.data);
                setCinInfo(res.data.data[0]);
            });
        }
    }, [state.id])

    const items = stater.map((item, index) => (
        <Swiper.Item key={index}>
            <div className='li_list'>
                <img src={IP + item.image} alt="" />
            </div>
        </Swiper.Item>
    ))

    let id = 0
    let obj
    const getInfo = (val) => {
        id = val
        obj = stater.find((item, index) => {
            if (index == id) {
                return item
            }
        })

    }

    // 滑动后执行
    let click = (val) => {
        getInfo(val)
        setCinInfo(obj);
    }
    // 根据影院id + 电影id获取放映厅排片信息
    useEffect(() => {
        $_movieinfo({ cid: state.cid, mid: cinInfo.id }).then(res => {
            setNotice(res.data.data)
            // 默认显示第一个数据
            if (res.data.data) {
                const keys = Object.keys(res.data.data);
                setLiActive(res.data.data[keys[0]]); //默认电影信息
            }

        })
    }, [cinInfo.id])
    const processedData = notice ? Object.keys(notice).map((key, index) => ({
        t1: key,
        t2: index === 0 ? '今天' : index === 1 ? '明天' : index === 2 ? '后天' : '大后天'
    })) : [];
    // 今天明天后天
    let [liId, setLiId] = useState(0) //初始下表为0 激活样式
    let liClick = (v, i) => {
        setLiId(i) //点击变更下标 激活样式
        setLiActive(notice[v.t1]);
    }
    // 购票
    let ticketing = (val) => {
        navigate('/seat', { state: val }) //跳转至选座页面
    }
    return (
        <div className='cinemaInfo'>
            {/* 顶部影院信息 */}
            <div className='info_top'>
                <NoticeBar icon={<LeftOutline color='#000' onClick={() => navigate(-1)} />} content={demoLongText} color='alert' />
                <div className='title_info'>
                    <h1>{state.name}</h1>
                    <p className='t1'>{state.address}</p>
                    <p className='t2'>{state.type}</p>
                </div>
            </div>
            {/* 中间影片信息 */}
            <div className='info_middle'>
                {items && items.length > 0 && <Swiper slideSize={70} trackOffset={32} loop stuckAtBoundary={false} onIndexChange={(index) => click(index)}>{items}</Swiper>}
                <div className='middle_title'>
                    <div className='t1'>
                        <strong>{cinInfo.name}</strong>
                        <p>电影评分<span>{cinInfo.point}</span></p>
                    </div>
                    <p className='t2'>{cinInfo.time}分钟 / {cinInfo.type} / {cinInfo.director}</p>
                </div>
            </div>
            {/* 底部拍片列表 */}
            <div className='info_bottom'>
                <ul className='time_list'>
                    {processedData.map((v, i) => <li key={i} onClick={() => liClick(v, i)} className={liId == i ? 'on' : ''}>
                        <strong>{v.t2}</strong>
                        <span>{v.t1}</span>
                    </li>)}
                </ul>
                <div className='move_list'>
                    <ul className='list_list'>
                        {liActive.map((v, i) => <li key={i}>
                            <div className='list_left'>
                                <div className='left_left'>
                                    <strong>{v.starttime.replace(/:(\d)(?!\d)/, ":0$1")}</strong>
                                    <span>{v.endtime}散场</span>
                                </div>
                                <div className='left_middle'>
                                    <span>{v.name}</span>
                                    <span>{v.type}</span>
                                </div>
                                <div className='left_right'>
                                    <h2>¥ {v.price}</h2>
                                </div>
                            </div>
                            <div className='list_right'>
                                <Button color='primary' shape='rounded' size='small' fill='outline' onClick={() => ticketing(v.id)}>购票</Button>
                            </div>
                        </li>)}
                    </ul>
                </div>
            </div>
        </div >
    )
}