明树Git Lab

Skip to content

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

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

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