2025-01-16 09:38:56 +08:00

92 lines
2.3 KiB
Vue

<template>
<view>
<view v-if="systemInfo" :style="{ marginTop: systemInfo.safeAreaInsets?.top + 'px' }">
<view
v-if="mini"
class="h-12 pt-1 pos-relative flex flex-justify-between flex-items-center text-4 font-bold custom-color-black"
>
<view class="ml-4 line-clamp-1 max-w-60 break-all">
{{ title }}
</view>
<view class="mr-3 border-1 border-solid border-[#ebebeb] w-25 h-7 rounded-4">
<view class="flex flex-items-center flex-justify-around px-2 h-7">
<image class="w-6 h-6" src="/static/images/icon_nav_more.png"></image>
<view class="h-4 w-0.25 bg-[#ebebeb]"></view>
<image class="w-6 h-6" src="/static/images/icon_nav_close.png"></image>
</view>
</view>
</view>
<view
v-else
class="h-12 pt-1 pos-relative flex flex-justify-center flex-items-center text-4 font-bold custom-color-black"
>
<image
v-if="haveBack"
:src="backUrl"
class="pos-absolute left-3 h-5 w-5"
@click="back"
></image>
<view class="flex flex-items-center">
<view class="line-clamp-1 max-w-60 break-all">
{{ title }}
</view>
</view>
<view
v-if="rightButtonText"
class="text-3.5 font-normal pos-absolute right-5"
@click="rightButton"
>
{{ rightButtonText }}
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { useBasicStore } from '@/store'
import GetSystemInfoResult = UniNamespace.GetSystemInfoResult
const $basic = useBasicStore()
const systemInfo = ref<GetSystemInfoResult>(null)
defineProps({
mini: {
type: Boolean,
default: false
},
title: {
type: String,
default: null
},
haveBack: {
type: Boolean,
default: true
},
backUrl: {
type: String,
default: '/static/images/icon_back.png'
},
rightButtonText: {
type: [String, null],
default: null
}
})
const emits = defineEmits(['back', 'rightButton'])
const back = () => {
uni.navigateBack()
emits('back')
}
const rightButton = () => {
emits('rightButton')
}
onMounted(async () => {
systemInfo.value = await $basic.getSystemInfo()
})
</script>