39 lines
1.1 KiB
React
39 lines
1.1 KiB
React
|
"use client";
|
||
|
|
|
||
|
|
import React, { useState, useEffect } from "react";
|
||
|
|
import Image from "next/image";
|
||
|
|
import arrow from "@/public/images/arrow.png";
|
||
|
|
|
||
|
|
export default function InOtherApp() {
|
||
|
|
//区分是否在微信/微博/qq/支付宝/钉钉内置浏览器中打开
|
||
|
|
const [isInOtherApp, setIsInOtherApp] = useState(false);
|
||
|
|
useEffect(() => {
|
||
|
|
const userAgent = navigator.userAgent.toLowerCase();
|
||
|
|
let temIsInOtherApp =
|
||
|
|
userAgent.match(/MicroMessenger/i) == "micromessenger" ||
|
||
|
|
userAgent.match(/WeiBo/i) == "weibo" ||
|
||
|
|
(userAgent.indexOf("qq") !== -1 &&
|
||
|
|
userAgent.indexOf("mqqbrowser") === -1) ||
|
||
|
|
/alipay/gi.test(userAgent) ||
|
||
|
|
userAgent.indexOf("dingtalk") !== -1;
|
||
|
|
if (temIsInOtherApp) {
|
||
|
|
setIsInOtherApp(true);
|
||
|
|
}
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
if (!isInOtherApp) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="absolute top-0 left-0 w-full h-full bg-[#000000B2] z-50">
|
||
|
|
<div className="flex justify-end pt-4 pr-4">
|
||
|
|
<Image src={arrow} alt="" />
|
||
|
|
</div>
|
||
|
|
<p className="text-white text-2xl font-medium text-center">
|
||
|
|
请前往浏览器打开
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|