2026-09-10 10:57:40 +08:00
|
|
|
<template>
|
|
|
|
|
<view class="header-wrap">
|
2026-09-15 16:16:55 +08:00
|
|
|
<view class="status-bar" :style="statusStyle(0)"></view>
|
2026-09-10 10:57:40 +08:00
|
|
|
<view class="app-header">
|
2026-09-18 12:59:43 +08:00
|
|
|
<view class="header-side" @click="handleBack"><AppIcon v-if="back" name="chevron-right" :size="48" class="back-icon" /></view>
|
2026-09-10 10:57:40 +08:00
|
|
|
<text class="header-title">{{ title }}</text>
|
|
|
|
|
<view class="header-side header-right"><slot></slot></view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="uts">
|
2026-09-15 16:16:55 +08:00
|
|
|
import { usePageLayout } from '@/services/layout.uts'
|
|
|
|
|
const { statusStyle } = usePageLayout()
|
2026-09-10 10:57:40 +08:00
|
|
|
import AppIcon from '@/components/AppIcon.uvue'
|
2026-09-18 12:59:43 +08:00
|
|
|
const props = defineProps({ title: { type: String, default: '' }, back: { type: Boolean, default: true }, customBack: { type: Boolean, default: false } })
|
|
|
|
|
const emit = defineEmits(['back'])
|
2026-09-10 10:57:40 +08:00
|
|
|
const handleBack = () => {
|
|
|
|
|
if (!props.back) return
|
2026-09-18 12:59:43 +08:00
|
|
|
if (props.customBack) { emit('back'); return }
|
2026-09-10 10:57:40 +08:00
|
|
|
const pages = getCurrentPages()
|
|
|
|
|
if (pages.length > 1) uni.navigateBack({ delta: 1 })
|
|
|
|
|
else uni.reLaunch({ url: '/pages/home/home' })
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.header-wrap { background-color: #ffffff; }
|
2026-09-15 16:16:55 +08:00
|
|
|
.status-bar { }
|
2026-09-10 10:57:40 +08:00
|
|
|
.app-header { height: 96rpx; padding: 0 24rpx; flex-direction: row; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #edf1f7; }
|
2026-09-18 12:59:43 +08:00
|
|
|
.header-side { width: 88rpx; height: 96rpx; align-items: flex-start; justify-content: center; flex-shrink: 0; }
|
2026-09-10 10:57:40 +08:00
|
|
|
.header-right { align-items: flex-end; }
|
2026-09-11 18:06:08 +08:00
|
|
|
.back-icon { transform: rotate(180deg); margin-top: 0; }
|
2026-09-10 10:57:40 +08:00
|
|
|
.header-title { font-size: 34rpx; font-weight: 700; color: #111d35; }
|
|
|
|
|
</style>
|
