82 lines
1.7 KiB
Vue
82 lines
1.7 KiB
Vue
<template>
|
|
<div v-if="isWeChat && !isExcludedPage" class="wechat-overlay">
|
|
<div class="wechat-content">
|
|
<p class="wechat-message">
|
|
点击右上角的<van-icon class="ml-2" name="weapp-nav" /><br />然后点击在浏览器中打开
|
|
</p>
|
|
<img src="@/assets/images/llqdk.jpg" alt="In WeChat" class="wechat-image" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
// 获取当前路由
|
|
const route = useRoute();
|
|
|
|
// 定义一个响应式变量，表示是否在微信环境
|
|
const isWeChat = ref(false);
|
|
|
|
// 计算属性：检查当前页面是否在排除列表中
|
|
const isExcludedPage = computed(() => {
|
|
const excludedRoutes = ['promotionInquire', 'invitationAgentApply'];
|
|
return excludedRoutes.includes(route.name);
|
|
});
|
|
|
|
// 检查是否为微信环境
|
|
const checkIfWeChat = () => {
|
|
const userAgent = navigator.userAgent.toLowerCase();
|
|
isWeChat.value = /micromessenger/.test(userAgent);
|
|
};
|
|
|
|
// 在组件挂载后检查环境
|
|
onMounted(() => {
|
|
checkIfWeChat();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 遮罩层样式 */
|
|
.wechat-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
z-index: 9999;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 遮罩中的内容 */
|
|
.wechat-content {
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* 图片样式 */
|
|
.wechat-image {
|
|
/* position: absolute;
|
|
bottom: 0;
|
|
left: 0; */
|
|
margin-top: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* 提示信息的样式 */
|
|
.wechat-message {
|
|
font-size: 24px;
|
|
}
|
|
|
|
/* 图标样式 */
|
|
.icon-more-vert {
|
|
font-size: 20px;
|
|
margin-left: 5px;
|
|
}
|
|
</style> |