明树Git Lab

Skip to content

B
bridata-website-frontend
Commit 6fcef932 authored by yangyajing's avatar yangyajing
Browse files
Options

分享时复制对应地址，增加小程序分享相关功能

parent 2566820f
Show whitespace changes
Inline Side-by-side
Showing with 148 additions and 101 deletions
src/App.jsx
View file @ 6fcef932
......@@ -1823,7 +1823,7 @@ const DataResourceGraph = () => {
};
/* --- 7. Home Section (Aggregator Module) --- */
const HomeSection = ({ setActiveTab, setSelectedScenario }) => {
const HomeSection = ({ setActiveTab, setSelectedScenario, setWechatShare }) => {
return (
<div className="w-full relative animate-fade-in-up">
{/* Hero Content - Title and Slogan */}
......@@ -1850,7 +1850,10 @@ const HomeSection = ({ setActiveTab, setSelectedScenario }) => {
</div>
<h2 className="text-xl md:text-xl font-bold text-white">全链路数据要素价值实现</h2>
</div>
<button onClick={() => setActiveTab('data')} className="text-gray-400 hover:text-[#00FFC2] text-sm flex items-center gap-1 transition-colors group">
<button onClick={() => {
setActiveTab('data');
setWechatShare('data');
}} className="text-gray-400 hover:text-[#00FFC2] text-sm flex items-center gap-1 transition-colors group">
查看更多 <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform"/>
</button>
</div>
......@@ -1899,7 +1902,10 @@ const HomeSection = ({ setActiveTab, setSelectedScenario }) => {
</div>
<h2 className="text-lg md:text-xl font-bold text-white">全行业解决方案</h2>
</div>
<button onClick={() => setActiveTab('scenarios')} className="text-gray-400 hover:text-[#00FFC2] text-sm flex items-center gap-1 transition-colors group">
<button onClick={() => {
setActiveTab('scenarios');
setWechatShare('scenarios');
}} className="text-gray-400 hover:text-[#00FFC2] text-sm flex items-center gap-1 transition-colors group">
查看更多 <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform"/>
</button>
</div>
......@@ -1950,7 +1956,10 @@ const HomeSection = ({ setActiveTab, setSelectedScenario }) => {
<h2 className="text-lg md:text-xl font-bold text-white">明树资讯</h2>
</div>
{/* View More Button for News */}
<button onClick={() => setActiveTab('about')} className="text-gray-400 hover:text-[#00FFC2] text-sm flex items-center gap-1 transition-colors group">
<button onClick={() => {
setActiveTab('about');
setWechatShare('about');
}} className="text-gray-400 hover:text-[#00FFC2] text-sm flex items-center gap-1 transition-colors group">
查看更多 <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform"/>
</button>
</div>
......@@ -2048,7 +2057,10 @@ const HomeSection = ({ setActiveTab, setSelectedScenario }) => {
</div>
</div>
<div className="mt-8 text-center">
<button onClick={() => setActiveTab('about')} className="px-6 py-2 border border-white/10 rounded hover:bg-white/5 hover:border-[#00FFC2] hover:text-[#00FFC2] text-gray-400 text-sm transition-all">
<button onClick={() => {
setActiveTab('about');
setWechatShare('about');
}} className="px-6 py-2 border border-white/10 rounded hover:bg-white/5 hover:border-[#00FFC2] hover:text-[#00FFC2] text-gray-400 text-sm transition-all">
了解更多公司详情
</button>
</div>
......@@ -2072,24 +2084,30 @@ const App = () => {
const [showCopyToast, setShowCopyToast] = useState(false);
const [showNewsTotal, setShownewsTotal] = useState(false);
const [consoleData, setConsoleData] = useState(null);
useEffect(() => {
// 获取地址栏传参，跳转到对应位置
let params = new URL(location.href).searchParams;
let pageType = params.get("pagetype");
pageType && setActiveTab(pageType);
let serviceType = params.get("servicetype");
serviceType && setActiveServiceTab(serviceType);
const handleScroll = () => {
setScrolled(window.scrollY > 50);
};
const setMobileScroll = (id) => {
let element = document.getElementById(id);
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (element && isMobile) {
setTimeout(() => {
window.scrollTo(0, element.offsetTop);
}, 500);
}
};
if (location.hash) {
let hash = location.hash.substring(2);
setMobileScroll(hash);
}
// const setMobileScroll = (id) => {
// let element = document.getElementById(id);
// const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
// if (element && isMobile) {
// setTimeout(() => {
// window.scrollTo(0, element.offsetTop);
// }, 500);
// }
// };
// if (location.hash) {
// let hash = location.hash.substring(2);
// setMobileScroll(hash);
// }
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
......@@ -2109,85 +2127,114 @@ const App = () => {
setActiveTab(id);
setMobileMenuOpen(false);
window.scrollTo({ top: 0, behavior: 'smooth' });
setWechatShare(id);
};
const handleWeChatShare = async (type) => {
if ( type === "scenario" && window.__wxjs_environment === 'miniprogram' || /miniProgram/.test(navigator.userAgent)) {
// 小程序环境中
wx.miniProgram.postMessage({
data: {
type: 'share',
path: '/pages/webview/webview?url=' + encodeURIComponent("http://192.168.12.77:5173/#/yycj"),
timestamp: Date.now()
const getPageURl = (tab, serviceTab) => {
let url = location.origin + "?pagetype=" + tab;
if (tab === "services" && serviceTab) {
url += ("&servicetype=" + serviceTab);
}
})
setConsoleData({
text: "请点击右上角分享"
});
setShowCopyToast(true);
setTimeout(() => {
setShowCopyToast(false);
}, 1500);
} else {
try {
let modalElement = document.getElementById(type + '-modal');
if (!modalElement) {
alert('未找到产品弹窗，请重试！');
return;
}
modalElement = modalElement.cloneNode(true);
const buttons = modalElement.querySelectorAll('button');
buttons.forEach(button => button.remove());
// 临时修改样式避免截图不全2
const rightContent = modalElement.querySelector('.overflow-y-auto');
modalElement.style.overflow = 'visible';
if (rightContent) rightContent.style.overflow = 'visible';
modalElement.classList.remove("animate-fade-in-up", "h-[100dvh]", "md:max-h-[90vh]");
document.body.appendChild(modalElement);
// DOM转Canvas
const canvas = await html2canvas(modalElement);
// 转Blob并复制到剪贴板
canvas.toBlob(async (blob) => {
if (!blob) {
// alert('图片转换失败，请重试！');
return;
}
const clipboardItem = new ClipboardItem({ 'image/png': blob });
await navigator.clipboard.write([clipboardItem]);
return url;
}
const handleShare = async () => {
let url = getPageURl(activeTab, activeServiceTab);
await navigator.clipboard.writeText(url);
setConsoleData({
text: "内容已复制",
subText: "请打开微信，粘贴并发送给好友"
text: "链接已复制到剪切板"
})
setShowCopyToast(true);
setTimeout(() => {
setShowCopyToast(false);
}, 1500);
}, 'image/png', 1.0);
} catch (error) {
console.error('复制失败：', error);
if (error.name === 'NotAllowedError') {
alert('请允许浏览器的剪贴板权限后重试！');
} else if (error.name === 'TypeError') {
alert('您的浏览器不支持此功能，请升级浏览器！');
} else {
alert(`复制失败：${error.message}`);
}
}
}
// if ( type === "scenario" && window.__wxjs_environment === 'miniprogram' || /miniProgram/.test(navigator.userAgent)) {
// // 小程序环境中
// wx.miniProgram.postMessage({
// data: {
// type: 'share',
// path: '/pages/webview/webview?url=' + encodeURIComponent("http://192.168.12.77:5173/#/yycj"),
// timestamp: Date.now()
// }
// })
// setConsoleData({
// text: "请点击右上角分享"
// });
// setShowCopyToast(true);
// setTimeout(() => {
// setShowCopyToast(false);
// }, 1500);
// } else {
// try {
// let modalElement = document.getElementById(type + '-modal');
// if (!modalElement) {
// alert('未找到产品弹窗，请重试！');
// return;
// }
// modalElement = modalElement.cloneNode(true);
// const buttons = modalElement.querySelectorAll('button');
// buttons.forEach(button => button.remove());
// // 临时修改样式避免截图不全2
// const rightContent = modalElement.querySelector('.overflow-y-auto');
// modalElement.style.overflow = 'visible';
// if (rightContent) rightContent.style.overflow = 'visible';
// modalElement.classList.remove("animate-fade-in-up", "h-[100dvh]", "md:max-h-[90vh]");
// document.body.appendChild(modalElement);
// // DOM转Canvas
// const canvas = await html2canvas(modalElement);
// // 转Blob并复制到剪贴板
// canvas.toBlob(async (blob) => {
// if (!blob) {
// // alert('图片转换失败，请重试！');
// return;
// }
// const clipboardItem = new ClipboardItem({ 'image/png': blob });
// await navigator.clipboard.write([clipboardItem]);
// setConsoleData({
// text: "内容已复制",
// subText: "请打开微信，粘贴并发送给好友"
// })
// setShowCopyToast(true);
// setTimeout(() => {
// setShowCopyToast(false);
// }, 1500);
// }, 'image/png', 1.0);
// } catch (error) {
// console.error('复制失败：', error);
// if (error.name === 'NotAllowedError') {
// alert('请允许浏览器的剪贴板权限后重试！');
// } else if (error.name === 'TypeError') {
// alert('您的浏览器不支持此功能，请升级浏览器！');
// } else {
// alert(`复制失败：${error.message}`);
// }
// }
// }
};
const resetWeChatShare = () => {
// 重置分享信息
if ( window.__wxjs_environment === 'miniprogram' || /miniProgram/.test(navigator.userAgent)) {
// 设置移动端分享路径
const setWechatShare = (tab, serviceTab) => {
if (window.__wxjs_environment === 'miniprogram' || /miniProgram/.test(navigator.userAgent)) {
let url = getPageURl(tab, serviceTab);
wx.miniProgram.postMessage({
data: {
type: "default"
type: 'share',
path: '/pages/webview/webview?url=' + encodeURIComponent(url),
timestamp: Date.now()
}
})
}
}
};
// const resetWeChatShare = () => {
// // 重置分享信息
// if ( window.__wxjs_environment === 'miniprogram' || /miniProgram/.test(navigator.userAgent)) {
// wx.miniProgram.postMessage({
// data: {
// type: "default"
// }
// })
// }
// }
// Render Content based on activeTab
......@@ -2373,7 +2420,7 @@ const App = () => {
];
switch (activeTab) {
case 'home':
return <HomeSection setActiveTab={setActiveTab} setSelectedScenario={setSelectedScenario} />;
return <HomeSection setActiveTab={setActiveTab} setSelectedScenario={setSelectedScenario} setWechatShare={setWechatShare} />;
case 'data':
// location.href = "/channel.html";
......@@ -2439,7 +2486,10 @@ const App = () => {
{Object.entries(services).map(([key, service]) => (
<button
key={key}
onClick={() => setActiveServiceTab(key)}
onClick={() => {
setActiveServiceTab(key);
setWechatShare("services", key);
}}
className={`relative px-8 py-4 rounded-t-sm border-t border-x transition-all duration-300 min-w-[180px] flex items-center justify-center gap-3
${activeServiceTab === key
? 'bg-[#1a1c23] border-[#00FFC2]/30 text-white z-10 -mb-[1px] pb-5 shadow-[0_-5px_20px_rgba(0,0,0,0.3)]'
......@@ -2580,7 +2630,7 @@ const App = () => {
<div className="text-gray-500 text-xs">获取详细方案</div>
</div>
</div>
<button onClick={() => handleWeChatShare("product")} className="w-full md:w-auto px-4 md:px-6 py-2.5 md:py-3 bg-[#252830] hover:bg-[#2b2f38] text-white text-xs md:text-sm font-bold border border-white/10 flex items-center justify-center gap-2 hover:border-[#00FFC2] transition-all">
<button onClick={() => handleShare("product")} className="hidden lg:flex w-full md:w-auto px-4 md:px-6 py-2.5 md:py-3 bg-[#252830] hover:bg-[#2b2f38] text-white text-xs md:text-sm font-bold border border-white/10 flex items-center justify-center gap-2 hover:border-[#00FFC2] transition-all">
<MessageCircle className="w-4 h-4 text-[#07C160]" /> 转发至微信
</button>
</div>
......@@ -2817,7 +2867,7 @@ const App = () => {
);
default:
return <HomeSection setActiveTab={setActiveTab} setSelectedScenario={setSelectedScenario} />;
return <HomeSection setActiveTab={setActiveTab} setSelectedScenario={setSelectedScenario} setWechatShare={setWechatShare} />;
}
};
......@@ -2884,10 +2934,7 @@ const App = () => {
</div>
<h3 className="text-lg md:text-2xl font-bold text-white tracking-wide">{selectedScenario.title}</h3>
</div>
<button onClick={() => {
setSelectedScenario(null);
resetWeChatShare();
}} className="p-2 hover:bg-white/10 rounded-full transition-colors">
<button onClick={() => setSelectedScenario(null)} className="p-2 hover:bg-white/10 rounded-full transition-colors">
<X className="w-5 h-5 md:w-6 md:h-6 text-gray-400 hover:text-white" />
</button>
</div>
......@@ -2946,7 +2993,7 @@ const App = () => {
<div className="text-gray-500 text-xs">扫码咨询详细方案</div>
</div>
</div>
<button onClick={() => handleWeChatShare("scenario")} className="w-full md:w-auto px-4 md:px-6 py-2.5 md:py-3 bg-[#252830] hover:bg-[#2b2f38] text-white text-xs md:text-sm font-bold border border-white/10 flex items-center justify-center gap-2 hover:border-[#00FFC2] transition-all">
<button onClick={() => handleShare("scenario")} className="hidden lg:flex w-full md:w-auto px-4 md:px-6 py-2.5 md:py-3 bg-[#252830] hover:bg-[#2b2f38] text-white text-xs md:text-sm font-bold border border-white/10 flex items-center justify-center gap-2 hover:border-[#00FFC2] transition-all">
<MessageCircle className="w-4 h-4 text-[#07C160]" /> 转发至微信
</button>
</div>
......@@ -3006,7 +3053,7 @@ const App = () => {
<div className="text-gray-500 text-xs">扫码咨询详细方案</div>
</div>
</div>
<button onClick={()=> handleWeChatShare("service")} className="w-full md:w-auto px-4 md:px-6 py-2.5 md:py-3 bg-[#252830] hover:bg-[#2b2f38] text-white text-xs md:text-sm font-bold border border-white/10 flex items-center justify-center gap-2 hover:border-[#00FFC2] transition-all">
<button onClick={()=> handleShare("service")} className="hidden lg:flex w-full md:w-auto px-4 md:px-6 py-2.5 md:py-3 bg-[#252830] hover:bg-[#2b2f38] text-white text-xs md:text-sm font-bold border border-white/10 flex items-center justify-center gap-2 hover:border-[#00FFC2] transition-all">
<MessageCircle className="w-4 h-4 text-[#07C160]" /> 转发至微信
</button>
</div>
......@@ -3055,7 +3102,7 @@ const App = () => {
<div className="text-gray-500 text-xs">获取更多资讯</div>
</div>
</div>
<button onClick={() => handleWeChatShare("news")} className="w-full md:w-auto px-4 md:px-6 py-2.5 md:py-3 bg-[#252830] hover:bg-[#2b2f38] text-white text-xs md:text-sm font-bold border border-white/10 flex items-center justify-center gap-2 hover:border-[#00FFC2] transition-all">
<button onClick={() => handleShare("news")} className="hidden lg:flex w-full md:w-auto px-4 md:px-6 py-2.5 md:py-3 bg-[#252830] hover:bg-[#2b2f38] text-white text-xs md:text-sm font-bold border border-white/10 flex items-center justify-center gap-2 hover:border-[#00FFC2] transition-all">
<MessageCircle className="w-4 h-4 text-[#07C160]" /> 分享新闻
</button>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment