Index.js:
javascript
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 (
<div className="m-welcome-wrap-box">
<div className={`m-welcome-wrap-box-inner`}>
<div className="m-welcome-wrap">
{typeof routerSearchObj.type === 'undefined' ||
routerSearchObj.type === '0' ? (
<div className="m-welcome-header">
<div className="m-welcome-header-title">学习</div>
<div className="m-welcome-header-info"></div>
<div className="m-welcome-header-right">
{userInfo.avatarCdn ? (
<img
src={userInfo.avatarCdn}
className="m-welcome-avatar"
onClick={() => handleJumpPage('/ai/index/home/chatList')}
alt="头像"
></img>
) : (
<>
<Button
type="link"
className="m-welcome-btn-text"
onClick={() => handleJumpPage('/ai/login')}
>
登录
</Button>
<Button
type="link"
className="m-welcome-btn-text"
onClick={() => handleJumpPage('/ai/register')}
>
注册
</Button>
</>
)}
</div>
</div>
) : (
<SinglePageHeader
// goBackPath="/ai/index/home/chatList"
title={'首页&AI绘画'}
></SinglePageHeader>
)}
<Swiper
slidesPerView={1.1}
spaceBetween={10}
centeredSlides={true}
pagination={{
clickable: true,
}}
modules={[Pagination]}
initialSlide={1}
className="mySwiper"
>
{Array.isArray(config.carousel) && config.carousel.length > 0 ? (
config.carousel.map((item) => (
<SwiperSlide
key={item.id}
className={`m-welcome-carousel-item ${
typeof routerSearchObj.type === 'undefined' ||
routerSearchObj.type === '0'
? 'withBorder'
: ''
}`}
>
<div className="m-welcome-carousel-item-info">
<div
className="m-welcome-carouse-item-tag"
onClick={() => handleTagClick(item)}
>
{item.tag}
</div>
<div className="m-welcome-carouse-item-title">
{item.title}
</div>
<div className="m-welcome-carouse-item-sub-title">
{item.subTitle}
</div>
</div>
<div className="m-welcome-carousel-item-img-wrap">
<div
className="m-welcome-carousel-item-img"
style={{ backgroundImage: `url(${item.imgUrl})` }}
></div>
</div>
</SwiperSlide>
))
) : (
<SwiperSlide>
<Skeleton
avatar
paragraph={{
rows: 7,
}}
active
className="m-h5-lesson-play-skeleton"
/>
</SwiperSlide>
)}
</Swiper>
{/* models */}
<div className="m-welcome-card-wrap">
<div className="m-welcome-card-header-wrap">
<div className="m-welcome-card-title-wrap">
<div className="m-welcome-card-title">绘图大模型</div>
<div
className="m-welcome-card-more"
onClick={() => handleJumpPage('/welcome/home/modelList')}
>
查看全部
</div>
</div>
<div className="m-welcome-card-sub-title">向左滑动 查看更多</div>
</div>
<Swiper
slidesPerView={1.1}
spaceBetween={10}
centeredSlides={true}
pagination={false}
modules={[Pagination]}
className="mySwiper"
>
{Array.isArray(models) && models.length > 0 ? (
models.map((item) => (
<SwiperSlide
key={item.first.id}
className={`m-welcome-card-item`}
>
<div className={`m-welcome-card-item-row`}>
<LazyLoad className="m-welcome-card-item-img-wrap">
<img
src={item.first.avatar}
className="m-welcome-card-item-img"
alt="头像"
></img>
</LazyLoad>
<div className="m-welcome-card-item-info-wrap withBorder">
<div className="m-welcome-card-item-info">
<div
className="m-welcome-card-item-title m-ellipsis"
title={item.first.name}
>
{item.first.name}
</div>
<div className="m-welcome-card-item-sub-title">
{item.first.id}
</div>
</div>
<div
className="m-welcome-card-item-btn"
onClick={() => handleModelClick(item.first)}
>
画同款
</div>
</div>
</div>
{item.second ? (
<div className={`m-welcome-card-item-row`}>
<LazyLoad className="m-welcome-card-item-img-wrap">
<img
src={item.second.avatar}
className="m-welcome-card-item-img"
alt="头像"
></img>
</LazyLoad>
<div className="m-welcome-card-item-info-wrap withBorder">
<div className="m-welcome-card-item-info">
<div
className="m-welcome-card-item-title m-ellipsis"
title={item.second.name}
>
{item.second.name}
</div>
<div className="m-welcome-card-item-sub-title">
{item.second.id}
</div>
</div>
<div
className="m-welcome-card-item-btn"
onClick={() => handleModelClick(item.second)}
>
画同款
</div>
</div>
</div>
) : null}
{item.third ? (
<div className={`m-welcome-card-item-row`}>
<LazyLoad className="m-welcome-card-item-img-wrap">
<img
src={item.third.avatar}
className="m-welcome-card-item-img"
alt="头像"
></img>
</LazyLoad>
<div className="m-welcome-card-item-info-wrap">
<div className="m-welcome-card-item-info">
<div
className="m-welcome-card-item-title m-ellipsis"
title={item.third.name}
>
{item.third.name}
</div>
<div className="m-welcome-card-item-sub-title">
{item.third.id}
</div>
</div>
<div
className="m-welcome-card-item-btn"
onClick={() => handleModelClick(item.third)}
>
画同款
</div>
</div>
</div>
) : null}
</SwiperSlide>
))
) : (
<SwiperSlide>
<Skeleton
avatar
paragraph={{
rows: 7,
}}
active
className="m-h5-lesson-play-skeleton"
/>
</SwiperSlide>
)}
</Swiper>
</div>
<div className="m-welcome-card-wrap">
<div className="m-welcome-card-header-wrap">
<div className="m-welcome-card-title-wrap">
<div className="m-welcome-card-title">AI绘画作品展示</div>
<div
className="m-welcome-card-more"
onClick={() => handleJumpPage('/welcome/home/imgList')}
>
查看全部
</div>
</div>
<div className="m-welcome-card-sub-title">向左滑动 查看更多</div>
</div>
<Swiper
slidesPerView={1.1}
spaceBetween={10}
centeredSlides={true}
pagination={false}
modules={[Pagination]}
className="mySwiper"
>
{Array.isArray(imgList) && imgList.length > 0 ? (
imgList.map((item) => (
<SwiperSlide
key={item.first.imgUid}
className={`m-welcome-card-item`}
>
<div className='m-welcome-img-row-wrap'>
<div className={`m-welcome-img-row`}>
<LazyLoad className="m-welcome-img-lazy-load first">
<div className="m-welcome-img-warp">
<img
src={item.first.imgUrlCdn}
className="m-welcome-img"
alt="图片"
onClick={() =>
handleImgDrawSameStyleClick(item.first)
}
></img>
</div>
</LazyLoad>
<LazyLoad className="m-welcome-img-lazy-load">
<div className="m-welcome-img-warp">
<img
src={item.second.imgUrlCdn}
className="m-welcome-img"
alt="图片"
onClick={() =>
handleImgDrawSameStyleClick(item.second)
}
></img>
</div>
</LazyLoad>
</div>
{/* <div className={`m-welcome-img-row`}>
<LazyLoad className="m-welcome-img-lazy-load">
<div className="m-welcome-img-warp">
<img
src={item.third.imgUrlCdn}
className="m-welcome-img"
alt="图片"
onClick={() =>
handleImgDrawSameStyleClick(item.third)
}
></img>
</div>
</LazyLoad>
<LazyLoad className="m-welcome-img-lazy-load">
<div className="m-welcome-img-warp">
<img
src={item.fourth.imgUrlCdn}
className="m-welcome-img"
alt="图片"
onClick={() =>
handleImgDrawSameStyleClick(item.fourth)
}
></img>
</div>
</LazyLoad>
</div> */}
</div>
</SwiperSlide>
))
) : (
<SwiperSlide>
<Skeleton
avatar
paragraph={{
rows: 7,
}}
active
className="m-h5-lesson-play-skeleton"
/>
</SwiperSlide>
)}
</Swiper>
</div>
</div>
</div>
</div>
)
}
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:
javascript
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:
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;}
效果图:
参考链接: