Browse Source

修改完成,剩余团购

master
pcn_ 2 weeks ago
parent
commit
14c0f29361
  1. 3
      src/app.config.ts
  2. 39
      src/pages/user/components/UserGrid.tsx
  3. 4
      src/user/poster/poster.config.ts
  4. 115
      src/user/poster/poster.tsx

3
src/app.config.ts

@ -56,7 +56,8 @@ export default {
"gift/redeem",
"gift/detail",
"store/verification",
"theme/index"
"theme/index",
"poster/poster",
]
},
{

39
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}
>
<Grid.Item text="收货地址" onClick={() => navTo('/user/address/index', true)}>
<Grid.Item text="企业采购" onClick={() => navTo('/user/poster/poster', true)}>
<View className="text-center">
<View className="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center mx-auto mb-2">
<ShoppingAdd color="#3b82f6" size="20"/>
</View>
</View>
</Grid.Item>
{/* 修改联系我们为微信客服 */}
<Grid.Item text="联系我们">
<Button
open-type="contact"
className="w-full h-full flex flex-col items-center justify-center p-0 bg-transparent"
hover-class="none"
style={{border: 'none'}}
>
<View className="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center mx-auto mb-2">
<Service color="#67C23A" size="20"/>
</View>
</Button>
</Grid.Item>
<Grid.Item text="收货地址" onClick={() => navTo('/user/address/index', true)}>
<View className="text-center">
<View className="w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center mx-auto mb-2">
<Location color="#3b82f6" size="20"/>
</View>
</View>
@ -109,3 +141,4 @@ const UserCell = () => {
)
}
export default UserCell

4
src/user/poster/poster.config.ts

@ -0,0 +1,4 @@
export default definePageConfig({
navigationBarTitleText: '企业采购',
navigationBarTextStyle: 'black'
})

115
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<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…
Cancel
Save