forked from gxwebsoft/mp-10550
修改完成,剩余团购
This commit is contained in:
@@ -56,7 +56,8 @@ export default {
|
||||
"gift/redeem",
|
||||
"gift/detail",
|
||||
"store/verification",
|
||||
"theme/index"
|
||||
"theme/index",
|
||||
"poster/poster",
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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
Normal file
4
src/user/poster/poster.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '企业采购',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
115
src/user/poster/poster.tsx
Normal file
115
src/user/poster/poster.tsx
Normal file
@@ -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
|
||||
Reference in New Issue
Block a user