Compare commits
10 Commits
0a10afcea2
...
14c0f29361
| Author | SHA1 | Date |
|---|---|---|
pcn_
|
14c0f29361 | 2 weeks ago |
|
pcn_
|
d988caa5ed | 2 weeks ago |
|
pcn_
|
7431ce39a5 | 2 weeks ago |
|
pcn_
|
8539f04e07 | 2 weeks ago |
|
pcn_
|
d46533ac52 | 2 weeks ago |
|
pcn_
|
dd1559ba56 | 2 weeks ago |
|
pcn_
|
27ddb85aed | 2 weeks ago |
|
pcn_
|
7985f0a1a4 | 2 weeks ago |
|
pcn_
|
020315838b | 2 weeks ago |
|
pcn_
|
d762fa56d4 | 2 weeks ago |
20 changed files with 732 additions and 141 deletions
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
@ -0,0 +1,25 @@ |
|||
import {Image, Cell} from '@nutui/nutui-react-taro' |
|||
import Taro from '@tarojs/taro' |
|||
|
|||
const ArticleList = (props: any) => { |
|||
|
|||
return ( |
|||
<> |
|||
<div className={'px-3'}> |
|||
{props.data.map((item, index) => { |
|||
return ( |
|||
<Cell |
|||
title={item.title} |
|||
extra={ |
|||
<Image src={item.image} mode={'aspectFit'} lazyLoad={false} width={100} height="100"/> |
|||
} |
|||
key={index} |
|||
onClick={() => Taro.navigateTo({url: '/cms/detail/index?id=' + item.articleId})} |
|||
/> |
|||
) |
|||
})} |
|||
</div> |
|||
</> |
|||
) |
|||
} |
|||
export default ArticleList |
|||
@ -0,0 +1,59 @@ |
|||
import {useEffect, useState} from "react"; |
|||
import {Tabs, Loading} from '@nutui/nutui-react-taro' |
|||
import {pageCmsArticle} from "@/api/cms/cmsArticle"; |
|||
import {CmsArticle} from "@/api/cms/cmsArticle/model"; |
|||
import ArticleList from "./ArticleList"; |
|||
|
|||
const ArticleTabs = (props: any) => { |
|||
const [loading, setLoading] = useState<boolean>(true) |
|||
const [tab1value, setTab1value] = useState<string | number>('0') |
|||
const [list, setList] = useState<CmsArticle[]>([]) |
|||
|
|||
const reload = async (value) => { |
|||
const {data} = props |
|||
pageCmsArticle({ |
|||
categoryId: data[value].navigationId, |
|||
page: 1, |
|||
status: 0, |
|||
limit: 10 |
|||
}).then((res) => { |
|||
res && setList(res?.list || []) |
|||
}) |
|||
.catch(err => { |
|||
console.log(err) |
|||
}) |
|||
.finally(() => { |
|||
setTab1value(value) |
|||
setLoading(false) |
|||
}) |
|||
} |
|||
|
|||
useEffect(() => { |
|||
reload(0).then() |
|||
}, []); |
|||
|
|||
if (loading) { |
|||
return ( |
|||
<Loading className={'px-2'}>加载中</Loading> |
|||
) |
|||
} |
|||
|
|||
return ( |
|||
<> |
|||
<Tabs |
|||
value={tab1value} |
|||
onChange={(value) => { |
|||
reload(value).then() |
|||
}} |
|||
> |
|||
{props.data?.map((item, index) => { |
|||
return ( |
|||
<Tabs.TabPane title={item.categoryName} key={index}/> |
|||
) |
|||
})} |
|||
</Tabs> |
|||
<ArticleList data={list}/> |
|||
</> |
|||
) |
|||
} |
|||
export default ArticleTabs |
|||
@ -0,0 +1,31 @@ |
|||
import { useEffect, useState } from 'react' |
|||
import { Swiper } from '@nutui/nutui-react-taro' |
|||
import {CmsAd} from "@/api/cms/cmsAd/model"; |
|||
import {Image} from '@nutui/nutui-react-taro' |
|||
import {getCmsAd} from "@/api/cms/cmsAd"; |
|||
|
|||
const MyPage = () => { |
|||
const [item, setItem] = useState<CmsAd>() |
|||
const reload = () => { |
|||
getCmsAd(439).then(data => { |
|||
setItem(data) |
|||
}) |
|||
} |
|||
|
|||
useEffect(() => { |
|||
reload() |
|||
}, []) |
|||
|
|||
return ( |
|||
<> |
|||
<Swiper defaultValue={0} height={item?.height} indicator style={{ height: item?.height + 'px', display: 'none' }}> |
|||
{item?.imageList?.map((item) => ( |
|||
<Swiper.Item key={item}> |
|||
<Image width="100%" height="100%" src={item.url} mode={'scaleToFill'} lazyLoad={false} style={{ height: item.height + 'px' }} /> |
|||
</Swiper.Item> |
|||
))} |
|||
</Swiper> |
|||
</> |
|||
) |
|||
} |
|||
export default MyPage |
|||
@ -0,0 +1,4 @@ |
|||
export default definePageConfig({ |
|||
navigationBarTitleText: '文章列表', |
|||
navigationBarTextStyle: 'black' |
|||
}) |
|||
@ -0,0 +1,71 @@ |
|||
import Taro from '@tarojs/taro' |
|||
import {useShareAppMessage} from "@tarojs/taro" |
|||
import {Loading} from '@nutui/nutui-react-taro' |
|||
import {useEffect, useState} from "react" |
|||
import {useRouter} from '@tarojs/taro' |
|||
import {getCmsNavigation, listCmsNavigation} from "@/api/cms/cmsNavigation"; |
|||
import {CmsNavigation} from "@/api/cms/cmsNavigation/model"; |
|||
import {pageCmsArticle} from "@/api/cms/cmsArticle"; |
|||
import {CmsArticle} from "@/api/cms/cmsArticle/model"; |
|||
import ArticleList from './components/ArticleList' |
|||
import ArticleTabs from "./components/ArticleTabs"; |
|||
import './index.scss' |
|||
|
|||
function Category() { |
|||
const {params} = useRouter(); |
|||
const [categoryId, setCategoryId] = useState<number>(0) |
|||
const [category, setCategory] = useState<CmsNavigation[]>([]) |
|||
const [loading, setLoading] = useState<boolean>(true) |
|||
const [nav, setNav] = useState<CmsNavigation>() |
|||
const [list, setList] = useState<CmsArticle[]>([]) |
|||
|
|||
const reload = async () => { |
|||
// 1.加载远程数据
|
|||
const id = Number(params.id || 4328) |
|||
const nav = await getCmsNavigation(id) |
|||
const categoryList = await listCmsNavigation({parentId: id}) |
|||
const shopGoods = await pageCmsArticle({categoryId: id}) |
|||
|
|||
// 2.赋值
|
|||
setCategoryId(id) |
|||
setNav(nav) |
|||
setList(shopGoods?.list || []) |
|||
setCategory(categoryList) |
|||
Taro.setNavigationBarTitle({ |
|||
title: `${nav?.categoryName}` |
|||
}) |
|||
}; |
|||
|
|||
useEffect(() => { |
|||
reload().then(() => { |
|||
setLoading(false) |
|||
}) |
|||
}, []); |
|||
|
|||
useShareAppMessage(() => { |
|||
return { |
|||
title: `${nav?.categoryName}_时里院子市集`, |
|||
path: `/shop/category/index?id=${categoryId}`, |
|||
success: function () { |
|||
console.log('分享成功'); |
|||
}, |
|||
fail: function () { |
|||
console.log('分享失败'); |
|||
} |
|||
}; |
|||
}); |
|||
|
|||
if (loading) { |
|||
return ( |
|||
<Loading className={'px-2'}>加载中</Loading> |
|||
) |
|||
} |
|||
|
|||
if(category.length > 0){ |
|||
return <ArticleTabs data={category}/> |
|||
} |
|||
|
|||
return <ArticleList data={list}/> |
|||
} |
|||
|
|||
export default Category |
|||
@ -0,0 +1,3 @@ |
|||
export default definePageConfig({ |
|||
navigationBarTitleText: '文章详情' |
|||
}) |
|||
@ -0,0 +1,53 @@ |
|||
import Taro from '@tarojs/taro' |
|||
import {useEffect, useState} from 'react' |
|||
import {useRouter} from '@tarojs/taro' |
|||
import {Loading} from '@nutui/nutui-react-taro' |
|||
import {View, RichText} from '@tarojs/components' |
|||
import {wxParse} from "@/utils/common"; |
|||
import {getCmsArticle} from "@/api/cms/cmsArticle"; |
|||
import {CmsArticle} from "@/api/cms/cmsArticle/model" |
|||
import Line from "@/components/Gap"; |
|||
import './index.scss' |
|||
|
|||
function Detail() { |
|||
const {params} = useRouter(); |
|||
const [loading, setLoading] = useState<boolean>(true) |
|||
// 文章详情
|
|||
const [item, setItem] = useState<CmsArticle>() |
|||
const reload = async () => { |
|||
const item = await getCmsArticle(Number(params.id)) |
|||
|
|||
if (item) { |
|||
item.content = wxParse(item.content) |
|||
setItem(item) |
|||
Taro.setNavigationBarTitle({ |
|||
title: `${item?.categoryName}` |
|||
}) |
|||
} |
|||
} |
|||
|
|||
useEffect(() => { |
|||
reload().then(() => { |
|||
setLoading(false) |
|||
}); |
|||
}, []); |
|||
|
|||
if (loading) { |
|||
return ( |
|||
<Loading className={'px-2'}>加载中</Loading> |
|||
) |
|||
} |
|||
|
|||
return ( |
|||
<div className={'bg-white'}> |
|||
<div className={'p-4 font-bold text-lg'}>{item?.title}</div> |
|||
<div className={'text-gray-400 text-sm px-4 '}>{item?.createTime}</div> |
|||
<View className={'content p-4'}> |
|||
<RichText nodes={item?.content}/> |
|||
</View> |
|||
<Line height={44}/> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default Detail |
|||
@ -1,32 +1,125 @@ |
|||
import { useEffect, useState } from 'react' |
|||
import { Swiper } from '@nutui/nutui-react-taro' |
|||
import {useEffect, useState} from 'react' |
|||
import {Swiper} from '@nutui/nutui-react-taro' |
|||
import {CmsAd} from "@/api/cms/cmsAd/model"; |
|||
import {Image} from '@nutui/nutui-react-taro' |
|||
import {getCmsAd} from "@/api/cms/cmsAd"; |
|||
import navTo from "@/utils/common"; |
|||
|
|||
|
|||
const MyPage = () => { |
|||
const [item, setItem] = useState<CmsAd>() |
|||
const reload = () => { |
|||
const [carouselData, setCarouselData] = useState<CmsAd>() |
|||
const [hotToday, setHotToday] = useState<CmsAd>() |
|||
const [groupBuy, setGroupBuy] = useState<CmsAd>() |
|||
|
|||
// 加载数据
|
|||
const loadData = () => { |
|||
// 轮播图
|
|||
getCmsAd(439).then(data => { |
|||
setItem(data) |
|||
setCarouselData(data) |
|||
}) |
|||
// 今日热卖素材（上层图片）
|
|||
getCmsAd(444).then(data => { |
|||
setHotToday(data) |
|||
}) |
|||
// 社区拼团素材（下层图片）
|
|||
getCmsAd(445).then(data => { |
|||
setGroupBuy(data) |
|||
}) |
|||
} |
|||
|
|||
useEffect(() => { |
|||
reload() |
|||
loadData() |
|||
}, []) |
|||
|
|||
// 轮播图高度，默认200px
|
|||
const carouselHeight = carouselData?.height || 200; |
|||
|
|||
return ( |
|||
<> |
|||
<Swiper defaultValue={0} height={item?.height} indicator style={{ height: item?.height + 'px' }}> |
|||
{item?.imageList?.map((item) => ( |
|||
<Swiper.Item key={item}> |
|||
<Image width="100%" height="100%" src={item.url} mode={'scaleToFill'} onClick={() => navTo(`${item.path}`)} lazyLoad={false} style={{ height: item.height + 'px' }} /> |
|||
</Swiper.Item> |
|||
))} |
|||
</Swiper> |
|||
</> |
|||
<div className="flex flex-row w-full gap-2 p-2 box-sizing-border" style={{height: `${carouselHeight}px`}}> |
|||
{/* 左侧轮播图区域 */} |
|||
<div className="flex-1" style={{height: '100%'}}> |
|||
<Swiper |
|||
defaultValue={0} |
|||
height={carouselHeight} |
|||
indicator |
|||
style={{height: `${carouselHeight}px`}} |
|||
> |
|||
{carouselData?.imageList?.map((img, index) => ( |
|||
<Swiper.Item key={index}> |
|||
<Image |
|||
width="100%" |
|||
height="100%" |
|||
src={img.url} |
|||
mode={'scaleToFill'} |
|||
onClick={() => navTo(`${img.path}`)} |
|||
lazyLoad={false} |
|||
style={{height: `${carouselHeight}px`, borderRadius: '4px'}} |
|||
alt={`轮播图${index + 1}`} |
|||
/> |
|||
</Swiper.Item> |
|||
))} |
|||
</Swiper> |
|||
</div> |
|||
|
|||
{/* 右侧上下图片区域 - 从API获取数据 */} |
|||
<div className="flex-1 flex flex-col gap-2" style={{height: '100%'}}> |
|||
{/* 上层图片 - 使用今日热卖素材 */} |
|||
<div style={{height: '50%'}}> |
|||
{hotToday?.imageList?.length ? ( |
|||
<Image |
|||
width="100%" |
|||
height="100%" |
|||
src={hotToday.imageList[0].url} |
|||
mode={'scaleToFill'} |
|||
onClick={() => navTo("/cms/category/index?id=4424" || '')} |
|||
lazyLoad={false} |
|||
style={{borderRadius: '4px'}} |
|||
alt="今日热卖" |
|||
/> |
|||
) : ( |
|||
<div style={{ |
|||
height: '100%', |
|||
backgroundColor: '#f5f5f5', |
|||
borderRadius: '4px', |
|||
display: 'flex', |
|||
alignItems: 'center', |
|||
justifyContent: 'center' |
|||
}}> |
|||
<span style={{color: '#999', fontSize: '12px'}}>加载中...</span> |
|||
</div> |
|||
)} |
|||
</div> |
|||
|
|||
{/* 下层图片 - 使用社区拼团素材 */} |
|||
<div style={{height: '50%'}}> |
|||
{groupBuy?.imageList?.length ? ( |
|||
<Image |
|||
width="100%" |
|||
height="100%" |
|||
src={groupBuy.imageList[0].url} |
|||
mode={'scaleToFill'} |
|||
onClick={() => navTo(groupBuy.imageList[0].path || '')} |
|||
lazyLoad={false} |
|||
style={{borderRadius: '4px'}} |
|||
alt="社区拼团" |
|||
/> |
|||
) : ( |
|||
<div style={{ |
|||
height: '100%', |
|||
backgroundColor: '#f5f5f5', |
|||
borderRadius: '4px', |
|||
display: 'flex', |
|||
alignItems: 'center', |
|||
justifyContent: 'center' |
|||
}}> |
|||
<span style={{color: '#999', fontSize: '12px'}}>加载中...</span> |
|||
</div> |
|||
)} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default MyPage |
|||
|
|||
|
|||
@ -1,4 +1,9 @@ |
|||
.header-bg{ |
|||
background: url('https://oss.wsdns.cn/20250621/edb5d4da976b4d97ba185cb7077d2858.jpg') no-repeat top center; |
|||
//background: url('https://oss.wsdns.cn/20250621/edb5d4da976b4d97ba185cb7077d2858.jpg') no-repeat top center; |
|||
background: linear-gradient(to bottom, #03605c, #18ae4f); |
|||
background-size: 100%; |
|||
} |
|||
|
|||
.my-bg{ |
|||
background: url('https://oss.wsdns.cn/20250913/5ae575a50dbb4ccaab086c3679c5e2c3.png') no-repeat top center; |
|||
} |
|||
|
|||
@ -0,0 +1,4 @@ |
|||
export default definePageConfig({ |
|||
navigationBarTitleText: '企业采购', |
|||
navigationBarTextStyle: 'black' |
|||
}) |
|||
@ -0,0 +1,115 @@ |
|||
import { useEffect, useState, useRef } from 'react' |
|||
import { Image } from '@nutui/nutui-react-taro' |
|||
import { CmsAd } from "@/api/cms/cmsAd/model"; |
|||
import { getCmsAd } from "@/api/cms/cmsAd"; |
|||
import navTo from "@/utils/common"; |
|||
|
|||
const NaturalFullscreenBanner = () => { |
|||
const [bannerData, setBannerData] = useState<CmsAd | null>(null) |
|||
const [isLoading, setIsLoading] = useState(true) |
|||
const containerRef = useRef<HTMLDivElement>(null) |
|||
const imageRef = useRef<HTMLImageElement>(null) |
|||
|
|||
// 加载图片数据
|
|||
const loadBannerData = () => { |
|||
setIsLoading(true) |
|||
getCmsAd(447) |
|||
.then(data => { |
|||
setBannerData(data) |
|||
setIsLoading(false) |
|||
}) |
|||
.catch(error => { |
|||
console.error('图片数据加载失败:', error) |
|||
setIsLoading(false) |
|||
}) |
|||
} |
|||
|
|||
// 处理图片加载完成后调整显示方式
|
|||
const handleImageLoad = () => { |
|||
if (imageRef.current && containerRef.current) { |
|||
// 获取图片原始宽高比
|
|||
const imgRatio = imageRef.current.naturalWidth / imageRef.current.naturalHeight; |
|||
// 获取容器宽高比
|
|||
const containerRatio = containerRef.current.offsetWidth / containerRef.current.offsetHeight; |
|||
|
|||
// 根据比例差异微调显示方式
|
|||
if (imgRatio > containerRatio) { |
|||
// 图片更宽，适当调整以显示更多垂直内容
|
|||
imageRef.current.style.objectPosition = 'center'; |
|||
} else { |
|||
// 图片更高，适当调整以显示更多水平内容
|
|||
imageRef.current.style.objectPosition = 'center'; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 设置全屏尺寸
|
|||
useEffect(() => { |
|||
const setFullscreenSize = () => { |
|||
if (containerRef.current) { |
|||
// 减去可能存在的导航栏高度，使显示更自然
|
|||
const windowHeight = window.innerHeight - 48; // 假设导航栏高度为48px
|
|||
const windowWidth = window.innerWidth; |
|||
|
|||
containerRef.current.style.height = `${windowHeight}px`; |
|||
containerRef.current.style.width = `${windowWidth}px`; |
|||
} |
|||
}; |
|||
|
|||
// 初始化尺寸
|
|||
setFullscreenSize(); |
|||
|
|||
// 监听窗口大小变化
|
|||
const resizeHandler = () => setFullscreenSize(); |
|||
window.addEventListener('resize', resizeHandler); |
|||
return () => window.removeEventListener('resize', resizeHandler); |
|||
}, []); |
|||
|
|||
useEffect(() => { |
|||
loadBannerData() |
|||
}, []) |
|||
|
|||
if (isLoading) { |
|||
return ( |
|||
<div ref={containerRef} className="flex items-center justify-center bg-gray-100"> |
|||
<span className="text-gray-500 text-sm">加载中...</span> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
// 获取第一张图片，如果有
|
|||
const firstImage = bannerData?.imageList?.[0]; |
|||
|
|||
if (!firstImage) { |
|||
return ( |
|||
<div ref={containerRef} className="flex items-center justify-center bg-gray-100"> |
|||
<span className="text-gray-500 text-sm">暂无图片数据</span> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
return ( |
|||
<div ref={containerRef} className="relative overflow-hidden bg-black"> |
|||
<Image |
|||
ref={imageRef} |
|||
className="absolute inset-0" |
|||
src={firstImage.url} |
|||
mode={'scaleToFill'} |
|||
onClick={() => firstImage.path && navTo(firstImage.path)} |
|||
lazyLoad={false} |
|||
alt="全屏 banner 图" |
|||
onLoad={handleImageLoad} |
|||
style={{ |
|||
width: '100%', |
|||
height: '100%', |
|||
// 优先保持比例，只裁剪必要部分
|
|||
objectFit: 'cover', |
|||
// 默认居中显示，保留图片主体内容
|
|||
objectPosition: 'center center' |
|||
}} |
|||
/> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default NaturalFullscreenBanner |
|||
Loading…
Reference in new issue