16 |
17 | {movies.map((tile, index) => (
18 |
19 |
21 | ))}
22 |
23 |
24 | );
25 | };
26 |
27 | export const MovieListSkeleton = () => {
28 | return (
29 | -
39 | {menus.map((menu) => {
40 | const { txt, icon, onClick = noop } = menu;
41 | return (
42 |
30 | {/* 
(e.target.src = DefaultImg)} /> */}
31 | errImg(e, DefaultImg)} />
32 |
33 | );
34 | };
35 | export default RatioImage;
36 |
--------------------------------------------------------------------------------
/src/components/swiper/index.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import RatioImage from '../ratioImage';
3 | import './style.css';
4 | import { swiperStyle, setSwipeType } from '../../types/swiper';
5 | import { noop } from '../../types/constant';
6 | const defaultStyle = { visibility: 'hidden', width: 0, height: 0 };
7 | const styles = [
8 | {
9 | transform: 'translate(-150%, -50%) scale3d(0.8, 0.8, 0.8)',
10 | zIndex: 1,
11 | },
12 | {
13 | transform: 'translate(-100%, -50%) scale3d(0.9, 0.9, 0.9)',
14 | zIndex: 2,
15 | },
16 | {
17 | transform: 'translate(-50%, -50%) scale3d(1, 1, 1)',
18 | zIndex: 3,
19 | },
20 | {
21 | transform: 'translate(0%, -50%) scale3d(0.9, 0.9, 0.9)',
22 | zIndex: 2,
23 | },
24 | {
25 | transform: 'translate(50%, -50%) scale3d(0.8, 0.8, 0.8)',
26 | zIndex: 1,
27 | },
28 | ];
29 |
30 | const calculatingStyle = (index: number, length: number): swiperStyle[] => {
31 | const resStyle: swiperStyle[] = [];
32 | for (let i = 0; i < length; i++) {
33 | const _index = !index
34 | ? i - index
35 | : index > 0
36 | ? i - index >= 0
37 | ? i - index
38 | : i - index + length
39 | : i - index > 4
40 | ? i - index - length
41 | : i - index;
42 | const style = styles[_index] ?? defaultStyle;
43 | resStyle.push(style);
44 | }
45 | // console.log( index,'index' );
46 | // console.log( resStyle,'resStyle' );
47 | return resStyle;
48 | };
49 |
50 | const Swiper = (props: any): any => {
51 | const { imgArr = [], autoPlay = true, onSwiperItemClick = noop } = props;
52 | const [index, setIndex] = useState(0);
53 | const [_styles, setStyle]: [any, any] = useState([]);
54 | let xStart: number;
55 | const startHandle = (e: any): void => {
56 | e.stopPropagation();
57 | xStart = e.touches[0].pageX;
58 | };
59 | const moveHandle = (e: any): void => {
60 | e.stopPropagation();
61 | const touch = e.touches[0];
62 | xStart - touch.pageX <= -50 && swiperFn(index, 'right');
63 | xStart - touch.pageX >= 50 && swiperFn(index, 'left');
64 | };
65 |
66 | const setIndexFn: setSwipeType = (index: number, direction: string): number => {
67 | const _index =
68 | direction === 'left'
69 | ? index - 1 === -imgArr.length
70 | ? 0
71 | : index - 1
72 | : index + 1 === imgArr.length
73 | ? 0
74 | : index + 1;
75 | return _index;
76 | };
77 | const swiperFn: setSwipeType = (index: number, direction: string): void => {
78 | const _index = setIndexFn(index, direction);
79 | setIndex(_index);
80 | setStyle(calculatingStyle(_index, imgArr.length));
81 | };
82 | useEffect(() => {
83 | if (!imgArr.length) return;
84 | const timer = setTimeout(() => swiperFn(index, 'right'), 2000);
85 | return () => clearTimeout(timer);
86 | //eslint-disable-next-line
87 | }, [imgArr, autoPlay, index]);
88 | useEffect(() => {
89 | imgArr.length && setStyle(calculatingStyle(0, imgArr.length));
90 | }, [imgArr]);
91 |
92 | return (
93 | (e.target.src = DefaultImg)} /> */}
31 | errImg(e, DefaultImg)} />
32 |
94 | {imgArr.map((d: any, i: any) => {
95 | return (
96 |
108 | );
109 | };
110 |
111 | export default Swiper;
112 |
--------------------------------------------------------------------------------
/src/components/swiper/style.css:
--------------------------------------------------------------------------------
1 | .ks-swiper {
2 | position: relative;
3 | width: 100%;
4 | padding-bottom: 55%;
5 | }
6 | .ks-swiper-item {
7 | text-align: center;
8 | position: absolute;
9 | width: 35%;
10 | color: #fff;
11 | top: 50%;
12 | left: 50%;
13 | transform: translate(-50%, -50%);
14 | transition: all 0.5s ease;
15 | }
16 |
--------------------------------------------------------------------------------
/src/http/index.ts:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import { ICommonRequestParams, IMovieItem, MovieType } from '../types';
3 |
4 | // axios.defaults.baseURL = 'http://47.94.254.236:55';
5 | // axios.defaults.baseURL = 'https://fengxiaoci.cn';
6 | axios.defaults.baseURL = 'https://api.zackdk.com/movie';
7 | // axios.defaults.baseURL = 'http://127.0.0.1:8360/movie';
8 | axios.defaults.timeout = 20000;
9 |
10 | axios.interceptors.request.use(
11 | function (config) {
12 | return config;
13 | },
14 | function (error) {
15 | return Promise.reject(error);
16 | }
17 | );
18 |
19 | axios.interceptors.response.use(
20 | function (response) {
21 | // console.log(response);
22 | return response.data;
23 | },
24 | function (error) {
25 | // Toast.error(error.message);
26 | return Promise.reject(error);
27 | }
28 | );
29 |
30 | const getIndex = () => axios.get onSwiperItemClick(d, i)}
101 | >
102 | {/* 
*/}
103 |
105 | );
106 | })}
107 |
66 |
72 | );
73 | };
74 |
75 | const splitAdviceMovie = (data: IMovieItem[]) => {
76 | const dy = data.filter((movie) => movie.type_id_1 === 1);
77 | const dsj = data.filter((movie) => movie.type_id_1 === 2);
78 | const zy = data.filter((movie) => movie.type_id === 4);
79 | const dm = data.filter((movie) => movie.type_id === 3);
80 |
81 | const swipers = [dy[0], dsj[0], zy[0], dm[0], dy[1]].filter((i) => i);
82 |
83 | return {
84 | homeItems: [
85 | { title: '热播电影', data: dy },
86 | { title: '电视剧', data: dsj },
87 | { title: '热播综艺', data: zy },
88 | { title: '热播动漫', data: dm },
89 | ],
90 | swipers,
91 | };
92 | };
93 |
94 | const HomeMain = () => {
95 | const { home } = store.useContainer();
96 | const { adviceMovieList: data, isFetching } = home;
97 | const { detail, jumpUtil } = store.useContainer();
98 | const { jumpToDetail } = jumpUtil;
99 | const { homeItems, swipers } = useMemo(() => splitAdviceMovie(data), [data]);
100 |
101 | const onSwiperItemClick = (movie: IMovieItem) => {
102 | detail.setNowMovie(movie);
103 | jumpToDetail(movie);
104 | };
105 |
106 | if (isFetching) {
107 | return -
42 | {history.map((item) => {
43 | const textInfo = (
44 | <>
45 |