chore(旧头部组件): 删除无用组件
This commit is contained in:
hzj
parent
8655fb317a
commit
a6a1c5369e
@ -1,261 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="mobile-header" :class="{ 'in-app': isInAppEnvironment }">
|
|
||||||
<!-- 状态栏占位区域（仅在APP中显示） -->
|
|
||||||
<div v-if="isInAppEnvironment" class="status-bar-spacer"></div>
|
|
||||||
|
|
||||||
<!-- header内容 -->
|
|
||||||
<div class="header-content">
|
|
||||||
<button v-if="showBack" class="back-btn" @click="handleBack">
|
|
||||||
<svg class="back-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path
|
|
||||||
d="M15 18L9 12L15 6"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<div v-if="!showBack && showHelp" class="placeholder"></div>
|
|
||||||
<h1 class="title">{{ title }}</h1>
|
|
||||||
<button v-if="showHelp" class="help-btn" @click="$emit('help')">
|
|
||||||
<svg class="help-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
|
|
||||||
<path
|
|
||||||
d="M9.09 9A3 3 0 0 1 12 6a3 3 0 0 1 3 3c0 2-3 3-3 3"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M12 17h.01"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<div v-if="showBack && !showHelp" class="placeholder"></div>
|
|
||||||
|
|
||||||
<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,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
// 定义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>
|
|
||||||
.mobile-header {
|
|
||||||
background: white !important;
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 状态栏占位区域 - 固定30px */
|
|
||||||
.status-bar-spacer {
|
|
||||||
height: 30px;
|
|
||||||
background: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* header内容区域 - 固定60px */
|
|
||||||
.header-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 12px 16px;
|
|
||||||
height: 60px;
|
|
||||||
background: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn,
|
|
||||||
.help-btn {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
border: none;
|
|
||||||
background: #f8f9fa !important;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: #495057 !important;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
border: 1px solid #e9ecef;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn:hover,
|
|
||||||
.help-btn:hover {
|
|
||||||
background: #e9ecef !important;
|
|
||||||
color: #343a40 !important;
|
|
||||||
transform: scale(1.05);
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn:active,
|
|
||||||
.help-btn:active {
|
|
||||||
transform: scale(0.95);
|
|
||||||
background: #dee2e6 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-icon,
|
|
||||||
.help-icon {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
color: inherit;
|
|
||||||
stroke-width: 2.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin: 0;
|
|
||||||
color: #212529 !important;
|
|
||||||
text-align: center;
|
|
||||||
flex: 1;
|
|
||||||
letter-spacing: 0.3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.placeholder {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 强制覆盖任何暗黑模式样式 */
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.mobile-header {
|
|
||||||
background: white !important;
|
|
||||||
border-bottom-color: #f0f0f0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-bar-spacer {
|
|
||||||
background: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-content {
|
|
||||||
background: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn,
|
|
||||||
.help-btn {
|
|
||||||
background: #f8f9fa !important;
|
|
||||||
border-color: #e9ecef !important;
|
|
||||||
color: #495057 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn:hover,
|
|
||||||
.help-btn:hover {
|
|
||||||
background: #e9ecef !important;
|
|
||||||
color: #343a40 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
color: #212529 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 强制针对移动设备的样式 */
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
.mobile-header {
|
|
||||||
background: white !important;
|
|
||||||
color: #212529 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-header * {
|
|
||||||
color: inherit !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
color: #212529 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn,
|
|
||||||
.help-btn {
|
|
||||||
background: #f8f9fa !important;
|
|
||||||
color: #495057 !important;
|
|
||||||
border-color: #e9ecef !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 针对特定手机浏览器的修复 */
|
|
||||||
@supports (-webkit-touch-callout: none) {
|
|
||||||
.mobile-header {
|
|
||||||
background: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
color: #212529 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn,
|
|
||||||
.help-btn {
|
|
||||||
background: #f8f9fa !important;
|
|
||||||
color: #495057 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user