React 轮播图
Index.js:
import React from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import useList from './useList'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Pagination } from 'swiper/modules'
import { SinglePageHeader } from '../../../../components/light'
import { Button, Skeleton } from 'antd'
import LazyLoad from 'react-lazy-load'
import 'swiper/css'
import 'swiper/css/pagination'
import './index.css'
function Index(props) {
const {
config,
models,
userInfo,
routerSearchObj,
imgList,
handleJumpPage,
handleTagClick,
handleModelClick,
handleImgDrawSameStyleClick,
} = useList(props)
return (
{typeof routerSearchObj.type === 'undefined' ||
routerSearchObj.type === '0' ? (
学习
{userInfo.avatarCdn ? (
handleJumpPage('/ai/index/home/chatList')}
alt="头像"
>
) : (
<>
)}
) : (
{Array.isArray(config.carousel) && config.carousel.length > 0 ? (
config.carousel.map((item) => (
handleTagClick(item)}
>
{item.tag}
{item.title}
{item.subTitle}
))
) : (
)}
{/* models */}
绘图大模型
handleJumpPage('/welcome/home/modelList')}
>
查看全部
向左滑动 查看更多
{Array.isArray(models) && models.length > 0 ? (
models.map((item) => (
{item.first.name}
{item.first.id}
handleModelClick(item.first)}
>
画同款
{item.second ? (
{item.second.name}
{item.second.id}
handleModelClick(item.second)}
>
画同款
) : null}
{item.third ? (
{item.third.name}
{item.third.id}
handleModelClick(item.third)}
>
画同款
) : null}
))
) : (
)}
AI绘画作品展示
handleJumpPage('/welcome/home/imgList')}
>
查看全部
向左滑动 查看更多
{Array.isArray(imgList) && imgList.length > 0 ? (
imgList.map((item) => (
handleImgDrawSameStyleClick(item.first)
}
>
handleImgDrawSameStyleClick(item.second)
}
>
{/*
handleImgDrawSameStyleClick(item.third)
}
>
handleImgDrawSameStyleClick(item.fourth)
}
>
*/}
))
) : (
)}
)
}
const mapStateToProps = (state) => {
return {
collapsed: state.getIn(['light', 'collapsed']),
}
}
const mapDispatchToProps = (dispatch) => {
return {
onSetState(key, value) {
dispatch({ type: 'SET_LIGHT_STATE', key, value })
},
onDispatch(action) {
dispatch(action)
},
}
}
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Index))
useList.js:
import { useState, useEffect } from 'react'
import Api from '../../../../api'
import { getRouterSearchObj } from '../../../../utils/tools'
export default function useList(props) {
const [config, setConfig] = useState({})
const [models, setModels] = useState([])
const [userInfo, setUserInfo] = useState({})
const [imgList, setImgList] = useState([])
//获取路由参数
const routerSearchObj = getRouterSearchObj(props)
const handleGetConfig = () => {
Api.h5.configWelcome().then((res) => {
if (res.code === 200) {
setConfig(res.data.config)
let models = res.data.config.models
if (Array.isArray(models)) {
let tempModels = []
for (let i = 0; i < models.length; i = i + 3) {
tempModels = [
...tempModels,
{ first: models[i], second: models[i + 1], third: models[i + 2] },
]
}
setModels(tempModels)
}
}
})
}
const handleImgSearch = () => {
Api.h5
.sdImgSearch({
pageNum: 1,
pageSize: 40,
})
.then((res) => {
if (res.code === 200) {
let list = res.data.list
if (Array.isArray(list)) {
let tempModels = []
for (let i = 0; i < list.length; i = i + 2) {
tempModels = [
...tempModels,
{
first: list[i],
second: list[i + 1],
// third: list[i + 2],
// fourth: list[i + 3],
},
]
}
setImgList(tempModels)
}
}
})
}
const getUserInfo = () => {
let token = localStorage.getItem('token')
if (token) {
Api.h5.userGetInfo({ isLoading: false }).then((res) => {
if (res.code === 200) {
setUserInfo(res.data)
} else {
}
})
}
}
//跳转
const handleJumpPage = (path) => {
// eslint-disable-next-line
props.history.push(path)
}
const handleTagClick = () => {
if (userInfo.avatarCdn) {
props.history.push('/ai/index/home/chatList')
} else {
props.history.push('/ai/login')
}
}
const handleModelClick = (item) => {
props.history.push(
`/single/home/sdSimple?modelId=${item.id}&name=${item.name}&link=${item.link}`
)
}
const handleImgDrawSameStyleClick = (item) => {
console.log(item)
props.history.push(
`/single/home/sdSimple?modelId=${item.id}&name=${item.name}&link=${item.link}&imgUid=${item.imgUid}`
)
}
useEffect(() => {
handleGetConfig()
getUserInfo()
handleImgSearch()
// eslint-disable-next-line
}, [])
return {
config,
models,
userInfo,
routerSearchObj,
imgList,
handleJumpPage,
handleTagClick,
handleModelClick,
handleImgDrawSameStyleClick,
}
}
index.css:
.m-welcome-wrap-box{display: flex;justify-content: center;background: #ddd;background: #ddd;position: absolute;top: 0;left: 0;right: 0;bottom: 0;overflow: hidden;}
.m-welcome-wrap-box-inner{position: relative; display: flex;flex-direction: column; max-width: 800px;width: 100%;background: #ededed;}
.m-welcome-wrap{position: absolute;top: 0;bottom: 0;left: 0;right: 0; padding: 0 0 100px 0; overflow-y: auto;}
.m-welcome-header{display: flex; padding: 20px calc(4.5%) 0 calc(4.5%);align-items:center;margin: 0 0 5px 0;}
.m-welcome-header-title{font-size: 30px;font-weight: bold;}
.m-welcome-header-info{flex: 1}
.m-welcome-header-right{display: flex;align-items:center;}
.m-welcome-avatar{width: 40px;height: 40px;border-radius: 5px;cursor: pointer;}
.m-welcome-btn-text{margin: 0 5px 0 0;padding: 4px 0;}
.m-welcome-carousel-item{padding: 5px 0 0 0;}
.m-welcome-carousel-item.withBorder{border-top: 1px solid #ddd;}
.m-welcome-carousel-item-info{padding: 5px 0;}
.m-welcome-carouse-item-tag{font-size: 12px;color: #1677ff; height: 16px;line-height: 16px;cursor: pointer;}
.m-welcome-carouse-item-tag:hover{color: #0d6ef7;}
.m-welcome-carouse-item-title{font-size: 24px;color: #000; height: 32px;}
.m-welcome-carouse-item-sub-title{font-size: 22px;color: #999;height: 26px;}
.m-welcome-carousel-item-img-wrap{position: relative; width: 100%;padding: 64% 0 0 0;}
.m-welcome-carousel-item-img{position: absolute;top: 0;bottom: 0;left: 0;right: 0;border-radius: 5px; background-size: 100% 100%;}
.m-welcome-card-header-wrap{border-top: 1px solid #ddd; margin: 20px calc(4.5%) 0 calc(4.5%);}
.m-welcome-card-title-wrap{display: flex;align-items: center;padding: 5px 0 2px;}
.m-welcome-card-title{font-size: 22px;font-weight: bold;flex: 1;}
.m-welcome-card-more{font-size: 14px;color: #1677ff;cursor: pointer;}
.m-welcome-card-more:hover{color: #0d6ef7;}
.m-welcome-card-sub-title{font-size: 16px;color: #999;}
.m-welcome-card-item-row{display: flex;padding: 5px 0;align-items: center;}
.m-welcome-card-item-img-wrap{display: flex; width: 50px;height: 64px;background: #dddddd;}
.m-welcome-card-item-img-wrap::before{content: '';margin: auto;width: 22px;height: 22px;background-image: url(../../../../static/images/loading.png);background-size: 100% 100%; animation: loading 0.5s linear infinite;}
.m-welcome-card-item-img{position: absolute; width: 50px;height: 64px;border-radius: 5px;object-fit: cover;}
.m-welcome-card-item-info-wrap{height: 64px; flex: 1;display: flex;align-items: center; margin: 0 0 0 5px;overflow: hidden;}
.m-welcome-card-item-info-wrap.withBorder{border-bottom: 1px solid #ddd;}
.m-welcome-card-item-info{flex:1;padding: 0 4px 0 0; display:flex;flex-direction: column;justify-content: center;overflow: hidden;}
.m-welcome-card-item-title{font-size: 18px;color: #000;font-weight: bold;margin: 0 0 2px 0;}
.m-welcome-card-item-sub-title{font-size: 14px;color: #999;}
.m-welcome-card-item-btn{padding: 0 20px;background: #ddd;color: #1677ff;font-weight: bold;letter-spacing: 2px;font-size: 16px; border-radius: 15px;text-align: center;height: 30px; line-height: 32px;cursor: pointer;}
.m-welcome-card-item-btn:hover{box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) ;}
.m-welcome-img-row-wrap{padding: 5px 0 0;}
.m-welcome-img-row{display: flex;align-items: center;}
.m-welcome-img-lazy-load{display: flex; position: relative; flex: 1; padding: 75% 0 0;border-radius: 5px; background: #dddddd;}
.m-welcome-img-lazy-load.first{margin: 0 5px 0 0;}
/* .m-welcome-card-item-img-big-wrap::before{content: '';margin: auto;width: 22px;height: 22px;background-image: url(../../../../static/images/loading.png);background-size: 100% 100%; animation: loading 0.5s linear infinite;} */
.m-welcome-img-warp{position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.m-welcome-img{width: 100%;height: 100%;object-fit: cover;border-radius: 5px;}
效果图：
https://swiperjs.com/demos
参考链接：
https://chat.xutongbao.top/