forked from gxwebsoft/mp-10550
79 lines
1.9 KiB
TypeScript
79 lines
1.9 KiB
TypeScript
import { View } from '@tarojs/components'
|
||
import Taro from '@tarojs/taro'
|
||
|
||
interface NavigationBarProps {
|
||
title?: string
|
||
showBack?: boolean
|
||
showMore?: boolean
|
||
onBack?: () => void
|
||
onMore?: () => void
|
||
}
|
||
|
||
function NavigationBar({
|
||
title = '分销中心',
|
||
showBack = true,
|
||
showMore = true,
|
||
onBack,
|
||
onMore
|
||
}: NavigationBarProps) {
|
||
|
||
const handleBack = () => {
|
||
if (onBack) {
|
||
onBack()
|
||
} else {
|
||
Taro.navigateBack()
|
||
}
|
||
}
|
||
|
||
const handleMore = () => {
|
||
if (onMore) {
|
||
onMore()
|
||
} else {
|
||
Taro.showActionSheet({
|
||
itemList: ['分享', '设置', '帮助']
|
||
})
|
||
}
|
||
}
|
||
|
||
return (
|
||
<View className="relative">
|
||
{/* 状态栏占位 */}
|
||
<View style={{ height: Taro.getSystemInfoSync().statusBarHeight + 'px' }} />
|
||
|
||
{/* 导航栏 */}
|
||
<View className="flex items-center justify-between px-4 py-3 relative z-10">
|
||
{/* 左侧返回按钮 */}
|
||
<View className="w-8 h-8 flex items-center justify-center">
|
||
{showBack && (
|
||
<View
|
||
className="w-6 h-6 flex items-center justify-center cursor-pointer"
|
||
onClick={handleBack}
|
||
>
|
||
<View className="text-white text-lg">‹</View>
|
||
</View>
|
||
)}
|
||
</View>
|
||
|
||
{/* 中间标题 */}
|
||
<View className="flex-1 text-center">
|
||
<View className="text-white text-xl font-medium">{title}</View>
|
||
</View>
|
||
|
||
{/* 右侧更多按钮 */}
|
||
<View className="w-8 h-8 flex items-center justify-center">
|
||
{showMore && (
|
||
<View
|
||
className="w-6 h-6 flex items-center justify-center cursor-pointer"
|
||
onClick={handleMore}
|
||
>
|
||
<View className="text-white text-lg">⋯</View>
|
||
</View>
|
||
)}
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
export default NavigationBar
|