49 lines
2.4 KiB
Vue
49 lines
2.4 KiB
Vue
<template>
|
|
<view class="portal-header-shell">
|
|
<view class="portal-header">
|
|
<view class="portal-header-row">
|
|
<button v-if="menu" class="portal-header-button" aria-label="打开功能菜单" @tap="openMenu"><uni-icons type="bars" color="#ffffff" size="26" /></button>
|
|
<button v-else class="portal-header-button" aria-label="返回上一页" @tap="goBack"><uni-icons type="back" color="#ffffff" size="26" /></button>
|
|
<text class="portal-title">{{ title }}</text>
|
|
<button v-if="showProfile" class="avatar-button" aria-label="打开个人中心" @tap="goProfile"><uni-icons type="person" color="#ffffff" size="27" /></button>
|
|
<view v-else class="portal-header-spacer" aria-hidden="true"></view>
|
|
</view>
|
|
</view>
|
|
<uni-popup ref="menuPopup" type="bottom" background-color="#ffffff" border-radius="12px 12px 0 0" :is-mask-click="true" @change="handleMenuChange">
|
|
<view class="header-menu-sheet">
|
|
<view class="header-menu-content">
|
|
<PopupHeader title="功能菜单" @close="closeMenu" />
|
|
<button class="header-menu-item" @tap="goHistory"><uni-icons type="list" color="#334155" size="22" /><text>作业记录</text><uni-icons type="right" color="#94a3b8" size="18" /></button>
|
|
<button class="header-menu-item" @tap="goProfile"><uni-icons type="person" color="#334155" size="22" /><text>个人中心</text><uni-icons type="right" color="#94a3b8" size="18" /></button>
|
|
<button class="header-menu-close" @tap="closeMenu">关闭</button>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { navigateBackOr, navigateToUnique } from '@/utils/navigation.js'
|
|
import PopupHeader from '@/components/PopupHeader.vue'
|
|
|
|
export default {
|
|
components: { PopupHeader },
|
|
emits: ['menu-change'],
|
|
props: {
|
|
title: { type: String, required: true },
|
|
user: { type: Object, required: true },
|
|
menu: Boolean,
|
|
showProfile: { type: Boolean, default: true },
|
|
fallbackUrl: { type: String, default: '/pages/home/home' }
|
|
},
|
|
methods: {
|
|
goBack() { navigateBackOr(this.fallbackUrl) },
|
|
goProfile() { this.closeMenu(); navigateToUnique('/pages/profile/profile') },
|
|
goHistory() { this.closeMenu(); navigateToUnique('/pages/history/history') },
|
|
openMenu() { this.$refs.menuPopup.open() },
|
|
closeMenu() { if (this.$refs.menuPopup) this.$refs.menuPopup.close() },
|
|
handleMenuChange(event) { this.$emit('menu-change', Boolean(event.show)) }
|
|
}
|
|
}
|
|
</script>
|