diff --git a/src/app.config.ts b/src/app.config.ts index ac483e3..c243822 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -56,7 +56,8 @@ export default { "gift/redeem", "gift/detail", "store/verification", - "theme/index" + "theme/index", + "poster/poster", ] }, { diff --git a/src/pages/user/components/UserGrid.tsx b/src/pages/user/components/UserGrid.tsx index 7fc7765..417491c 100644 --- a/src/pages/user/components/UserGrid.tsx +++ b/src/pages/user/components/UserGrid.tsx @@ -1,8 +1,18 @@ import {Grid, ConfigProvider} from '@nutui/nutui-react-taro' import navTo from "@/utils/common"; import Taro from '@tarojs/taro' -import {View} from '@tarojs/components' -import {ShieldCheck, Location, Tips, Ask, Dongdong, People, AfterSaleService, Logout} from '@nutui/icons-react-taro' +import {View, Button} from '@tarojs/components' +import { + ShieldCheck, + Location, + Tips, + Ask, + Dongdong, + People, + AfterSaleService, + Logout, + ShoppingAdd, ShoppingRemove, Service +} from '@nutui/icons-react-taro' import {useUser} from "@/hooks/useUser"; const UserCell = () => { @@ -38,9 +48,31 @@ const UserCell = () => { border: 'none' } as React.CSSProperties} > - navTo('/user/address/index', true)}> + navTo('/user/poster/poster', true)}> + + + + + + {/* 修改联系我们为微信客服 */} + + + + + navTo('/user/address/index', true)}> + + @@ -109,3 +141,4 @@ const UserCell = () => { ) } export default UserCell + diff --git a/src/user/poster/poster.config.ts b/src/user/poster/poster.config.ts new file mode 100644 index 0000000..c61c176 --- /dev/null +++ b/src/user/poster/poster.config.ts @@ -0,0 +1,4 @@ +export default definePageConfig({ + navigationBarTitleText: '企业采购', + navigationBarTextStyle: 'black' +}) diff --git a/src/user/poster/poster.tsx b/src/user/poster/poster.tsx new file mode 100644 index 0000000..a95fee6 --- /dev/null +++ b/src/user/poster/poster.tsx @@ -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(null) + const [isLoading, setIsLoading] = useState(true) + const containerRef = useRef(null) + const imageRef = useRef(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 ( +
+ 加载中... +
+ ) + } + + // 获取第一张图片,如果有 + const firstImage = bannerData?.imageList?.[0]; + + if (!firstImage) { + return ( +
+ 暂无图片数据 +
+ ) + } + + return ( +
+ firstImage.path && navTo(firstImage.path)} + lazyLoad={false} + alt="全屏 banner 图" + onLoad={handleImageLoad} + style={{ + width: '100%', + height: '100%', + // 优先保持比例,只裁剪必要部分 + objectFit: 'cover', + // 默认居中显示,保留图片主体内容 + objectPosition: 'center center' + }} + /> +
+ ) +} + +export default NaturalFullscreenBanner