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