caszl-next/app/components/AnhuiSwiper.tsx

"use client";
import React, { useEffect, useState } from "react";
import { register } from "swiper/element/bundle";
import axios from "axios";
import request from "@/app/lib/request";
import { BaseResponse, PageData } from "@/app/types/base";
import { Album } from "@/app/types/album";

register();

const albums = [
  {
    id: 28,
    cid: 3,
    name: "ah9.jpeg",
    path: "/uploads/image/20231101/99c2f8c3-aba8-4872-a9b9-dfbcf128c062.jpeg",
    uri: "http://localhost:8082/api/uploads/image/20231101/99c2f8c3-aba8-4872-a9b9-dfbcf128c062.jpeg",
    ext: "jpeg",
    size: "40KB",
    createTime: "2023-11-01 10:40:15",
    updateTime: "2023-11-01 10:40:15",
  },
  {
    id: 27,
    cid: 3,
    name: "ah7.jpeg",
    path: "/uploads/image/20231101/aba2a38f-ee62-4730-af7a-5b8933ed7497.jpeg",
    uri: "http://localhost:8082/api/uploads/image/20231101/aba2a38f-ee62-4730-af7a-5b8933ed7497.jpeg",
    ext: "jpeg",
    size: "4KB",
    createTime: "2023-11-01 10:40:15",
    updateTime: "2023-11-01 10:40:15",
  },
  {
    id: 26,
    cid: 3,
    name: "ah8.jpeg",
    path: "/uploads/image/20231101/63523f59-9b59-40d1-a654-c4678f8a1913.jpeg",
    uri: `http://localhost:8082/api/uploads/image/20231101/63523f59-9b59-40d1-a654-c4678f8a1913.jpeg`,
    ext: "jpeg",
    size: "29KB",
    createTime: "2023-11-01 10:40:15",
    updateTime: "2023-11-01 10:40:15",
  },
  {
    id: 25,
    cid: 3,
    name: "ah2.jpeg",
    path: "/uploads/image/20231101/5bedf085-841a-48cc-bca2-9c9b2c751b48.jpeg",
    uri: `http://localhost:8082/api/uploads/image/20231101/5bedf085-841a-48cc-bca2-9c9b2c751b48.jpeg`,
    ext: "jpeg",
    size: "26KB",
    createTime: "2023-11-01 10:40:15",
    updateTime: "2023-11-01 10:40:15",
  },
  {
    id: 24,
    cid: 3,
    name: "ah5.jpeg",
    path: "/uploads/image/20231101/2f19a501-89f7-4f78-9487-096a3799736d.jpeg",
    uri: "http://localhost:8082/api/uploads/image/20231101/2f19a501-89f7-4f78-9487-096a3799736d.jpeg",
    ext: "jpeg",
    size: "22KB",
    createTime: "2023-11-01 10:40:15",
    updateTime: "2023-11-01 10:40:15",
  },
  {
    id: 23,
    cid: 3,
    name: "ah6.jpeg",
    path: "/uploads/image/20231101/70f4bea2-77a4-4595-a3a5-5c60711afae6.jpeg",
    uri: "http://localhost:8082/api/uploads/image/20231101/70f4bea2-77a4-4595-a3a5-5c60711afae6.jpeg",
    ext: "jpeg",
    size: "22KB",
    createTime: "2023-11-01 10:40:15",
    updateTime: "2023-11-01 10:40:15",
  },
  {
    id: 22,
    cid: 3,
    name: "ah3.jpeg",
    path: "/uploads/image/20231101/82309b4a-22e8-4b06-8e9d-d2b114ef3aad.jpeg",
    uri: "http://localhost:8082/api/uploads/image/20231101/82309b4a-22e8-4b06-8e9d-d2b114ef3aad.jpeg",
    ext: "jpeg",
    size: "14KB",
    createTime: "2023-11-01 10:40:15",
    updateTime: "2023-11-01 10:40:15",
  },
  {
    id: 21,
    cid: 3,
    name: "ah1.jpeg",
    path: "/uploads/image/20231101/5e3a02dc-2c7c-4671-9151-79315a53a3d2.jpeg",
    uri: "http://localhost:8082/api/uploads/image/20231101/5e3a02dc-2c7c-4671-9151-79315a53a3d2.jpeg",
    ext: "jpeg",
    size: "9KB",
    createTime: "2023-11-01 10:40:15",
    updateTime: "2023-11-01 10:40:15",
  },
  {
    id: 20,
    cid: 3,
    name: "ah4.jpeg",
    path: "/uploads/image/20231101/106409ac-e454-47f2-a383-8ea572718b3d.jpeg",
    uri: "http://localhost:8082/api/uploads/image/20231101/106409ac-e454-47f2-a383-8ea572718b3d.jpeg",
    ext: "jpeg",
    size: "31KB",
    createTime: "2023-11-01 10:40:15",
    updateTime: "2023-11-01 10:40:15",
  },
];

const AnhuiSwiper = () => {
  // const [albums, setAlbums] = useState<Album[]>([]);
  // useEffect(() => {
  //   request
  //     .get<never, BaseResponse<PageData<Album>>>(`/albums/albumList`, {
  //       // baseURL: `${process.env.NEXT_PUBLIC_ADMIN_BASE_URL}`,
  //       baseURL: `http://localhost:8082/api}`,
  //       params: {
  //         cid: 3,
  //       },
  //     })
  //     .then((res) => {
  //       setAlbums(() => res.data.lists);
  //     });
  // }, []);
  return (
    <div className={"h-[205px] bg-white flex flex-col"}>
      <div
        className={
          "bg-[#1f87e8] text-white h-[30px] pl-[5px] flex items-center"
        }
      >
        安徽风采
      </div>
      <div className={"flex-1 h-0"}>
        {/* @ts-ignore*/}
        <swiper-container
          effect={"coverflow"}
          autoplay
          slides-per-view="3"
          loop
          style={{
            height: "100%",
          }}
        >
          {/* @ts-ignore*/}
          {albums.map((el) => (
            // @ts-ignore
            <swiper-slide
              key={el.id}
              style={{
                display: "flex",
                alignItems: "center",
              }}
            >
              <img
                src={`${process.env.NEXT_PUBLIC_ADMIN_BASE_URL}${el.path}`}
                alt={""}
              />
              {/*@ts-ignore*/}
            </swiper-slide>
          ))}
          {/* @ts-ignore */}
        </swiper-container>
      </div>
    </div>
  );
};

export default AnhuiSwiper;