55 lines
3.2 KiB
Vue
55 lines
3.2 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="user.warehouse ? `当前作业仓库 ${user.warehouse}，点击切换` : '选择作业仓库'" @tap="openMenu"><uni-icons type="location" 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" />
|
|
<view v-if="warehouseLoading" class="header-menu-state">正在加载仓库…</view>
|
|
<view v-else-if="warehouseError" class="header-menu-state header-menu-error">{{ warehouseError }}</view>
|
|
<view v-else-if="!warehouses.length" class="header-menu-state">暂无可用国内仓</view>
|
|
<block v-else><button v-for="warehouse in warehouses" :key="warehouse.id" class="header-menu-item warehouse-menu-item" :class="{ selected: String(warehouse.id) === String(selectedWarehouseId || '') }" @tap="chooseWarehouse(warehouse)"><uni-icons type="location-filled" :color="String(warehouse.id) === String(selectedWarehouseId || '') ? '#155eef' : '#64748b'" size="21" /><view><text>{{ warehouse.warehouseName }}</text><text class="warehouse-menu-code">{{ warehouse.warehouseCode }}</text></view><uni-icons :type="String(warehouse.id) === String(selectedWarehouseId || '') ? 'checkmarkempty' : 'right'" color="#155eef" size="18" /></button></block>
|
|
<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', 'warehouse-select'],
|
|
props: {
|
|
title: { type: String, required: true },
|
|
user: { type: Object, required: true },
|
|
menu: Boolean,
|
|
warehouses: { type: Array, default: () => [] },
|
|
selectedWarehouseId: { type: [String, Number], default: '' },
|
|
warehouseLoading: Boolean,
|
|
warehouseError: { type: String, default: '' },
|
|
showProfile: { type: Boolean, default: true },
|
|
fallbackUrl: { type: String, default: '/pages/home/home' }
|
|
},
|
|
methods: {
|
|
goBack() { navigateBackOr(this.fallbackUrl) },
|
|
goProfile() { this.closeMenu(); navigateToUnique('/pages/profile/profile') },
|
|
chooseWarehouse(warehouse) { this.$emit('warehouse-select', warehouse); this.closeMenu() },
|
|
openMenu() { this.$refs.menuPopup.open() },
|
|
closeMenu() { if (this.$refs.menuPopup) this.$refs.menuPopup.close() },
|
|
handleMenuChange(event) { this.$emit('menu-change', Boolean(event.show)) }
|
|
}
|
|
}
|
|
</script>
|