300 lines
12 KiB
TypeScript
300 lines
12 KiB
TypeScript
import { ArrowUp, ChevronDown, ChevronUp } from "lucide-react"
|
|
import { useState } from "react"
|
|
import { cn } from "@/lib/utils"
|
|
import gzh from "../assets/gzh.webp"
|
|
import phoneImg from "../assets/phone.webp"
|
|
import qqImg from "../assets/qq.webp"
|
|
import topImg from "../assets/top.webp"
|
|
import wxImg from "../assets/wx.webp"
|
|
|
|
export default function Common() {
|
|
const [activePopup, setActivePopup] = useState<"gzh" | "tel" | null>(null)
|
|
const [isExpanded, setIsExpanded] = useState(false)
|
|
|
|
// QQ点击跳转
|
|
const handleQQClick = () => {
|
|
window.location.href =
|
|
"https://admin.qidian.qq.com/template/blue/mp/menu/qr-code-jump.html?linkType=0&env=ol&kfuin=2852138148&fid=299&key=f377ec024ca45115a03a7632c7bda230&cate=1&source=&isLBS=&isCustomEntry=&type=16&ftype=1&_type=wpa&qidian=true"
|
|
}
|
|
|
|
// 微信点击跳转
|
|
const handleWxClick = () => {
|
|
window.open("https://work.weixin.qq.com/kfid/kfc458bc58e79e5093f", "_blank")
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{/* ========== 桌面端 ========== */}
|
|
<div className="hidden md:flex fixed right-4 bottom-20 z-50 flex-col w-18 overflow-visible rounded-xl shadow-lg bg-linear-to-b from-blue-700 to-cyan-300">
|
|
<div
|
|
onClick={handleQQClick}
|
|
onKeyDown={e => {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
handleQQClick()
|
|
}
|
|
}}
|
|
role="button"
|
|
tabIndex={0}
|
|
className="flex flex-col items-center justify-center py-2 text-white border-b border-white/15 hover:bg-white/10 transition-colors cursor-pointer"
|
|
>
|
|
<img src={qqImg} alt="QQ" className="w-7 h-7 object-contain" />
|
|
<span className="text-xs mt-1.5">QQ</span>
|
|
</div>
|
|
|
|
<div
|
|
onClick={handleWxClick}
|
|
onKeyDown={e => {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
handleWxClick()
|
|
}
|
|
}}
|
|
role="button"
|
|
tabIndex={0}
|
|
className="flex flex-col items-center justify-center py-2 text-white border-b border-white/15 hover:bg-white/10 transition-colors cursor-pointer"
|
|
>
|
|
<img src={wxImg} alt="微信" className="w-7 h-7 object-contain" />
|
|
<span className="text-xs mt-1.5">微信</span>
|
|
</div>
|
|
|
|
<div
|
|
className="relative flex flex-col items-center justify-center py-2 text-white border-b border-white/15 hover:bg-white/10 transition-colors cursor-pointer"
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-haspopup="true"
|
|
aria-expanded={activePopup === "gzh"}
|
|
onMouseEnter={() => setActivePopup("gzh")}
|
|
onMouseLeave={() => setActivePopup(null)}
|
|
onFocus={() => setActivePopup("gzh")}
|
|
onBlur={() => setActivePopup(null)}
|
|
onKeyDown={e => {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
setActivePopup(prev => (prev === "gzh" ? null : "gzh"))
|
|
}
|
|
}}
|
|
>
|
|
<img src={gzh} alt="公众号" className="w-7 h-7 object-contain" />
|
|
<span className="text-xs mt-1.5">公众号</span>
|
|
{activePopup === "gzh" && (
|
|
<div className="absolute right-full mr-3 bottom-0 bg-white rounded-lg shadow-xl p-4 w-48 text-center border border-gray-100">
|
|
<img
|
|
src="/img/ewm.png"
|
|
alt="公众号二维码"
|
|
className="w-full aspect-square object-contain"
|
|
/>
|
|
<p className="text-orange-500 text-xs mt-2">
|
|
实时响应 在线时间 8:30-23:00
|
|
</p>
|
|
<p className="text-orange-500 text-xs">
|
|
关注公众号可获取免费的到期提醒服务
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div
|
|
className="relative flex flex-col items-center justify-center py-2 text-white border-b border-white/15 hover:bg-white/10 transition-colors cursor-pointer"
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-haspopup="true"
|
|
aria-expanded={activePopup === "tel"}
|
|
onMouseEnter={() => setActivePopup("tel")}
|
|
onMouseLeave={() => setActivePopup(null)}
|
|
onFocus={() => setActivePopup("tel")}
|
|
onBlur={() => setActivePopup(null)}
|
|
onKeyDown={e => {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
setActivePopup(prev => (prev === "tel" ? null : "tel"))
|
|
}
|
|
}}
|
|
>
|
|
<img src={phoneImg} alt="电话" className="w-7 h-7 object-contain" />
|
|
<span className="text-xs mt-1.5">电话</span>
|
|
{activePopup === "tel" && (
|
|
<div className="absolute right-full mr-3 bottom-0 bg-white rounded-lg shadow-xl p-4 w-48 text-center border border-gray-100">
|
|
<p className="font-bold text-lg text-gray-800">400 800 9925</p>
|
|
<p className="text-sm text-gray-600">实时接通</p>
|
|
<p className="text-xs text-gray-500 mt-1">
|
|
电话值班时间 8:30-23:00
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
|
|
className="flex flex-col items-center justify-center py-2 text-white hover:bg-white/10 transition-colors"
|
|
>
|
|
<img src={topImg} alt="回到顶部" className="w-7 h-7 object-contain" />
|
|
<span className="text-xs mt-1.5">回到顶部</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* ========== 移动端：底部折叠面板 ========== */}
|
|
<div className="md:hidden fixed bottom-0 left-0 right-0 z-50">
|
|
{/* 折叠面板 */}
|
|
<div
|
|
className={cn(
|
|
"bg-white shadow-2xl rounded-t-2xl transition-all duration-300 ease-in-out",
|
|
isExpanded ? "max-h-[80vh]" : "max-h-14",
|
|
)}
|
|
>
|
|
{/* 拖拽条*/}
|
|
<div
|
|
onClick={() => setIsExpanded(!isExpanded)}
|
|
className="flex flex-col items-center justify-center py-2.5 cursor-pointer hover:bg-gray-50 transition-colors rounded-t-2xl"
|
|
>
|
|
<div className="w-10 h-1 bg-gray-300 rounded-full" />
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<span className="text-xs text-gray-500">
|
|
{isExpanded ? "收起" : "联系我们"}
|
|
</span>
|
|
{isExpanded ? (
|
|
<ChevronDown className="w-4 h-4 text-gray-400" />
|
|
) : (
|
|
<ChevronUp className="w-4 h-4 text-gray-400" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 展开内容 */}
|
|
<div
|
|
className={cn(
|
|
"overflow-hidden transition-all duration-300",
|
|
isExpanded ? "max-h-[70vh] opacity-100" : "max-h-0 opacity-0",
|
|
)}
|
|
>
|
|
<div className="px-4 pb-6 pt-2 space-y-3">
|
|
{/* QQ */}
|
|
<div
|
|
onClick={handleQQClick}
|
|
className="flex items-center gap-4 p-3 bg-blue-50 rounded-xl hover:bg-blue-100 transition-colors cursor-pointer"
|
|
>
|
|
<div className="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
|
|
<img
|
|
src={qqImg}
|
|
alt="QQ"
|
|
className="w-6 h-6 object-contain"
|
|
/>
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium text-gray-800">QQ客服</p>
|
|
<p className="text-xs text-gray-500">点击立即咨询</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 微信 */}
|
|
<div
|
|
onClick={handleWxClick}
|
|
className="flex items-center gap-4 p-3 bg-green-50 rounded-xl hover:bg-green-100 transition-colors cursor-pointer"
|
|
>
|
|
<div className="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center">
|
|
<img
|
|
src={wxImg}
|
|
alt="微信"
|
|
className="w-6 h-6 object-contain"
|
|
/>
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium text-gray-800">微信客服</p>
|
|
<p className="text-xs text-gray-500">点击立即咨询</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 公众号 */}
|
|
<div
|
|
onClick={() =>
|
|
setActivePopup(activePopup === "gzh" ? null : "gzh")
|
|
}
|
|
className="flex items-center gap-4 p-3 bg-purple-50 rounded-xl hover:bg-purple-100 transition-colors cursor-pointer"
|
|
>
|
|
<div className="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center">
|
|
<img
|
|
src={gzh}
|
|
alt="公众号"
|
|
className="w-6 h-6 object-contain"
|
|
/>
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium text-gray-800">公众号</p>
|
|
<p className="text-xs text-gray-500">点击查看二维码</p>
|
|
</div>
|
|
<ChevronUp
|
|
className={cn(
|
|
"w-5 h-5 text-purple-500 transition-transform",
|
|
activePopup === "gzh" ? "rotate-180" : "",
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
{/* 公众号二维码展开 */}
|
|
{activePopup === "gzh" && (
|
|
<div className="p-4 bg-gray-50 rounded-xl text-center">
|
|
<img
|
|
src="/img/ewm.png"
|
|
alt="公众号二维码"
|
|
className="w-40 h-40 mx-auto object-contain"
|
|
/>
|
|
<p className="text-orange-500 text-xs mt-2">
|
|
实时响应 在线时间 8:30-23:00
|
|
</p>
|
|
<p className="text-orange-500 text-xs">
|
|
关注公众号可获取免费的到期提醒服务
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* 电话 */}
|
|
<div
|
|
onClick={() =>
|
|
setActivePopup(activePopup === "tel" ? null : "tel")
|
|
}
|
|
className="flex items-center gap-4 p-3 bg-orange-50 rounded-xl hover:bg-orange-100 transition-colors cursor-pointer"
|
|
>
|
|
<div className="w-10 h-10 rounded-full bg-orange-500 flex items-center justify-center">
|
|
<img
|
|
src={phoneImg}
|
|
alt="电话"
|
|
className="w-6 h-6 object-contain"
|
|
/>
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium text-gray-800">电话客服</p>
|
|
<p className="text-xs text-gray-500">点击查看号码</p>
|
|
</div>
|
|
<ChevronUp
|
|
className={cn(
|
|
"w-5 h-5 text-orange-500 transition-transform",
|
|
activePopup === "tel" ? "rotate-180" : "",
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
{/* 电话展开 */}
|
|
{activePopup === "tel" && (
|
|
<div className="p-4 bg-gray-50 rounded-xl text-center">
|
|
<p className="font-bold text-2xl text-gray-800">
|
|
400 800 9925
|
|
</p>
|
|
<p className="text-sm text-gray-600 mt-1">实时接通</p>
|
|
<p className="text-xs text-gray-500 mt-1">
|
|
电话值班时间 8:30-23:00
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* 回到顶部 */}
|
|
<button
|
|
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
|
|
className="flex items-center justify-center gap-2 w-full p-3 bg-gray-100 rounded-xl hover:bg-gray-200 transition-colors"
|
|
>
|
|
<ArrowUp className="w-4 h-4 text-gray-600" />
|
|
<span className="text-sm text-gray-600">回到顶部</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|