165 lines
3.2 KiB
Vue
165 lines
3.2 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 状态栏占位区域（仅在APP中显示） -->
|
||
<div v-if="isInAppEnvironment" style="height: 30px"></div>
|
||
|
||
<!-- header内容 -->
|
||
<div
|
||
style="
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px 16px;
|
||
height: 60px;
|
||
"
|
||
>
|
||
<!-- 返回键 -->
|
||
<div style="width: 10%; display: flex; align-items: center">
|
||
<button v-if="showBack" class="back-btn" @click="handleBack">
|
||
<img :src="backImg" alt="" style="width: 100%; aspect-ratio: 1/1; display: block" />
|
||
</button>
|
||
</div>
|
||
<h1
|
||
style="
|
||
font-size: 1.2em;
|
||
font-weight: 600;
|
||
margin: 0;
|
||
text-align: center;
|
||
flex: 1;
|
||
letter-spacing: 0.3px;
|
||
"
|
||
:style="{ color }"
|
||
>
|
||
{{ title }}
|
||
</h1>
|
||
<button class="help-btn" style="width: 10%" @click="$emit('help')">
|
||
<img
|
||
v-if="showHelp"
|
||
src="../assets/icon/helpWhite.png"
|
||
alt=""
|
||
style="width: 100%; display: block"
|
||
/>
|
||
</button>
|
||
<slot name="extraFunction"></slot>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { useRouter, useRoute } from 'vue-router'
|
||
import { computed, ref, onMounted } from 'vue'
|
||
import { closePage, isInApp } from '../utils/appBridge.js'
|
||
|
||
// 定义props
|
||
const props = defineProps({
|
||
title: {
|
||
type: String,
|
||
required: true,
|
||
},
|
||
showBack: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
showHelp: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
isHomePage: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
|
||
color: {
|
||
type: String,
|
||
default: '#fff',
|
||
},
|
||
|
||
backImg: {
|
||
type: String,
|
||
default: '/src/assets/icon/arrowBack.png',
|
||
},
|
||
})
|
||
|
||
// 定义emits
|
||
defineEmits(['help'])
|
||
|
||
const router = useRouter()
|
||
const route = useRoute()
|
||
|
||
// 检测是否在APP环境中
|
||
const isInAppEnvironment = ref(false)
|
||
|
||
// 定义首页路由列表
|
||
const homeRoutes = ['/host-center', '/agency-center', '/coin-seller', '/']
|
||
|
||
// 计算是否为首页
|
||
const isCurrentlyHomePage = computed(() => {
|
||
// 1. 首先检查 props
|
||
const propsHomePage = props.isHomePage === true || props.isHomePage === 'true'
|
||
|
||
// 2. 然后检查路由
|
||
const routeHomePage = homeRoutes.includes(route.path)
|
||
|
||
// 3. 两者任一为true即为首页
|
||
return propsHomePage || routeHomePage
|
||
})
|
||
|
||
const handleBack = () => {
|
||
if (isCurrentlyHomePage.value && isInApp()) {
|
||
// 首页且在APP中：关闭页面
|
||
console.log('home back')
|
||
closePage()
|
||
} else {
|
||
// 非首页或浏览器环境：正常返回
|
||
router.go(-1)
|
||
}
|
||
}
|
||
|
||
// 组件挂载时检测环境
|
||
onMounted(() => {
|
||
isInAppEnvironment.value = isInApp()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
* {
|
||
font-family: 'SF Pro Text';
|
||
}
|
||
|
||
.back-btn,
|
||
.help-btn {
|
||
border: none;
|
||
background: transparent;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.back-btn:active,
|
||
.help-btn:active {
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
@media screen and (max-width: 360px) {
|
||
* {
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 360px) {
|
||
* {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 768px) {
|
||
* {
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1024px) {
|
||
* {
|
||
font-size: 32px;
|
||
}
|
||
}
|
||
</style>
|