|
|
@@ -114,11 +114,6 @@
|
|
|
<div class="highlight-box">
|
|
|
<p><strong>核心原理:</strong>肠道菌群被称为人体的"第二基因组"——它们拥有的基因数量是人类自身基因的150倍,编码着人体无法自行完成的代谢功能。肠道菌群的组成和功能状态,直接影响你的免疫、代谢、情绪和认知。</p>
|
|
|
</div>
|
|
|
-
|
|
|
- <div style="text-align:center;margin:1.5rem 0;">
|
|
|
- <img src="../img/ref-screenshots/gut-microbiome-damage.png" alt="肠道菌群失调→肠漏→全身性炎症机制图" style="max-width:100%;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.1);">
|
|
|
- <p style="font-size:0.8rem;color:var(--text-muted);margin-top:0.5rem;">肠道菌群失调→肠漏→全身性炎症——这是菌群检测的核心理论基础</p>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
@@ -176,6 +171,10 @@
|
|
|
<div style="font-size:0.78rem;color:var(--text-muted);margin-top:0.3rem;">文件名: <code>gut-testing-report-sample.png</code> · 显示多样性指数、肠道年龄、屏障功能评分的报告截图</div>
|
|
|
</div>
|
|
|
|
|
|
+ <div style="text-align:center;margin:1.5rem 0;">
|
|
|
+ <img src="../img/product-intro/gut-detail-banner.jpg" alt="肠道菌群精准健康检测专业版 - 全流程介绍" style="max-width:100%;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.1);">
|
|
|
+ <p style="font-size:0.8rem;color:var(--text-muted);margin-top:0.5rem;">专业版检测服务全景——从技术原理到报告解读的一站式服务</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
@@ -191,8 +190,8 @@
|
|
|
</ol>
|
|
|
|
|
|
<div style="text-align:center;margin:1.5rem 0;">
|
|
|
- <img src="../img/ref-screenshots/indicator-diversity-shannon.webp" alt="肠道菌群α多样性荟萃分析——Shannon指数和Simpson指数" style="max-width:100%;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.1);">
|
|
|
- <p style="font-size:0.8rem;color:var(--text-muted);margin-top:0.5rem;">菌群多样性分析示例——Shannon指数是衡量菌群多样性的核心指标</p>
|
|
|
+ <img src="../img/product-intro/gut-kit-2.jpg" alt="样本绑定与寄回流程" style="max-width:100%;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.1);">
|
|
|
+ <p style="font-size:0.8rem;color:var(--text-muted);margin-top:0.5rem;">扫码绑定样本 → 顺丰寄回 → 实验室接收,全程可追踪</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
@@ -300,17 +299,265 @@
|
|
|
<h3>开始了解你的"第二基因组"</h3>
|
|
|
<p>一次检测,全面评估肠道生态。科学干预,从根源管理健康。</p>
|
|
|
<div class="price-box">
|
|
|
- <span class="price">¥1,314</span>
|
|
|
+ <span class="price">¥0.01</span>
|
|
|
<span class="unit">/次</span>
|
|
|
- <span class="orig">原价 ¥1,999</span>
|
|
|
+ <span class="orig">测试价 ¥1,314</span>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <a href="#" class="cta-btn">立即购买</a>
|
|
|
+ <button class="cta-btn" onclick="document.getElementById('orderForm').style.display='flex'">立即购买</button>
|
|
|
<a href="../articles/gut-microbiota-testing.html" class="cta-btn secondary">了解检测详情 →</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+<!-- Order Form Modal -->
|
|
|
+<div id="orderForm" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:1000;align-items:center;justify-content:center;" onclick="if(event.target===this)this.style.display='none'">
|
|
|
+ <div style="background:#fff;border-radius:16px;padding:2rem;max-width:420px;width:90%;position:relative;">
|
|
|
+ <button style="position:absolute;top:12px;right:12px;background:none;border:none;font-size:24px;cursor:pointer;color:#999" onclick="document.getElementById('orderForm').style.display='none'">×</button>
|
|
|
+ <h3 style="margin-bottom:1.2rem;font-size:1.2rem;">肠道菌群基因检测 · 下单</h3>
|
|
|
+ <div style="margin-bottom:1rem">
|
|
|
+ <label style="display:block;font-size:0.85rem;color:var(--text-secondary);margin-bottom:0.3rem">联系人</label>
|
|
|
+ <input id="orderName" type="text" placeholder="请输入您的姓名" style="width:100%;padding:0.6rem 0.8rem;border:1px solid #e2e8f0;border-radius:8px;font-size:0.95rem;box-sizing:border-box">
|
|
|
+ </div>
|
|
|
+ <div style="margin-bottom:1rem">
|
|
|
+ <label style="display:block;font-size:0.85rem;color:var(--text-secondary);margin-bottom:0.3rem">手机号</label>
|
|
|
+ <input id="orderPhone" type="tel" placeholder="请输入手机号" style="width:100%;padding:0.6rem 0.8rem;border:1px solid #e2e8f0;border-radius:8px;font-size:0.95rem;box-sizing:border-box">
|
|
|
+ </div>
|
|
|
+ <div style="margin-bottom:1.2rem;padding:0.8rem;background:#f0fdfa;border-radius:8px;display:flex;justify-content:space-between;align-items:center">
|
|
|
+ <span style="font-size:0.9rem;color:var(--text-secondary)">合计</span>
|
|
|
+ <span style="font-size:1.5rem;font-weight:800;color:#0d9488">¥1,314</span>
|
|
|
+ </div>
|
|
|
+ <button id="payBtn" onclick="submitOrder()" style="width:100%;padding:0.8rem;background:linear-gradient(135deg,#0d9488,#14b8a6);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer">微信支付</button>
|
|
|
+ <p style="font-size:0.75rem;color:var(--text-muted);margin-top:0.8rem;text-align:center">支付由微信支付安全处理 · 未注册用户请先联系客服</p>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script>
|
|
|
+function submitOrder() {
|
|
|
+ var name = document.getElementById('orderName').value.trim();
|
|
|
+ var phone = document.getElementById('orderPhone').value.trim();
|
|
|
+ if (!name) { alert('请输入联系人姓名'); return; }
|
|
|
+ if (!phone || !/^1\d{10}$/.test(phone)) { alert('请输入正确的手机号'); return; }
|
|
|
+
|
|
|
+ var btn = document.getElementById('payBtn');
|
|
|
+ btn.disabled = true;
|
|
|
+ btn.textContent = '提交中...';
|
|
|
+
|
|
|
+ // 生成订单号
|
|
|
+ var orderNo = 'GUT' + Date.now() + Math.random().toString(36).substr(2,4).toUpperCase();
|
|
|
+
|
|
|
+ // 获取openid后进行JSAPI支付
|
|
|
+ var openid = getUrlParam('openid');
|
|
|
+ if (openid) {
|
|
|
+ // 已有openid,直接JSAPI支付
|
|
|
+ doJsapiPay(orderNo, openid);
|
|
|
+ } else if (isWechatBrowser()) {
|
|
|
+ // 微信浏览器内,先跳转OAuth2获取openid
|
|
|
+ fetch('/api/payment/wechat/oauth2-url', {
|
|
|
+ method: 'POST',
|
|
|
+ headers: { 'Content-Type': 'application/json' },
|
|
|
+ body: JSON.stringify({ redirectUri: window.location.href.split('?')[0] + '?orderNo=' + orderNo })
|
|
|
+ })
|
|
|
+ .then(function(r) { return r.json(); })
|
|
|
+ .then(function(data) {
|
|
|
+ if (data.code === 200 && data.data.url) {
|
|
|
+ window.location.href = data.data.url;
|
|
|
+ } else {
|
|
|
+ fallbackNativePay(orderNo);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(function() { fallbackNativePay(orderNo); });
|
|
|
+ } else {
|
|
|
+ // 非微信浏览器,走Native扫码
|
|
|
+ fallbackNativePay(orderNo);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function doJsapiPay(orderNo, openid) {
|
|
|
+ fetch('/api/payment/wechat/create', {
|
|
|
+ method: 'POST',
|
|
|
+ headers: { 'Content-Type': 'application/json' },
|
|
|
+ body: JSON.stringify({
|
|
|
+ orderNo: orderNo,
|
|
|
+ description: '肠道菌群基因检测',
|
|
|
+ amount: 1, // 测试价0.01元
|
|
|
+ openid: openid
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .then(function(r) { return r.json(); })
|
|
|
+ .then(function(data) {
|
|
|
+ if (data.code === 200 && data.data) {
|
|
|
+ if (typeof WeixinJSBridge !== 'undefined') {
|
|
|
+ WeixinJSBridge.invoke('getBrandWCPayRequest', {
|
|
|
+ appId: data.data.appId,
|
|
|
+ timeStamp: data.data.timeStamp,
|
|
|
+ nonceStr: data.data.nonceStr,
|
|
|
+ package: data.data.package,
|
|
|
+ signType: data.data.signType || 'RSA',
|
|
|
+ paySign: data.data.paySign
|
|
|
+ }, function(res) {
|
|
|
+ if (res.err_msg === 'get_brand_wcpay_request:ok') {
|
|
|
+ document.getElementById('orderForm').innerHTML = '<div style="text-align:center;padding:2rem"><div style="font-size:3rem;margin-bottom:0.5rem">✅</div><h3 style="color:#0d9488">支付成功!</h3><p style="color:#999;margin-top:0.5rem">检测套件将在24小时内寄出</p></div>';
|
|
|
+ } else {
|
|
|
+ alert('支付失败: ' + (res.err_msg || ''));
|
|
|
+ document.getElementById('payBtn').disabled = false;
|
|
|
+ document.getElementById('payBtn').textContent = '微信支付';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ alert('请在微信内完成支付');
|
|
|
+ document.getElementById('payBtn').disabled = false;
|
|
|
+ document.getElementById('payBtn').textContent = '微信支付';
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ alert('创建订单失败: ' + (data.message || ''));
|
|
|
+ document.getElementById('payBtn').disabled = false;
|
|
|
+ document.getElementById('payBtn').textContent = '微信支付';
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(function() {
|
|
|
+ alert('网络请求失败');
|
|
|
+ document.getElementById('payBtn').disabled = false;
|
|
|
+ document.getElementById('payBtn').textContent = '微信支付';
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function isWechatBrowser() {
|
|
|
+ return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1;
|
|
|
+}
|
|
|
+
|
|
|
+function getUrlParam(name) {
|
|
|
+ var reg = new RegExp('[?&]' + name + '=([^&]*)');
|
|
|
+ var r = window.location.href.match(reg);
|
|
|
+ return r ? decodeURIComponent(r[1]) : null;
|
|
|
+}
|
|
|
+
|
|
|
+function fallbackNativePay(orderNo) {
|
|
|
+ fetch('/api/payment/wechat/native', {
|
|
|
+ method: 'POST',
|
|
|
+ headers: { 'Content-Type': 'application/json' },
|
|
|
+ body: JSON.stringify({
|
|
|
+ orderNo: orderNo,
|
|
|
+ description: '肠道菌群基因检测',
|
|
|
+ amount: 1,
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .then(function(r) { return r.json(); })
|
|
|
+ .then(function(data) {
|
|
|
+ if (data.code === 200 && data.data && data.data.codeUrl) {
|
|
|
+ document.getElementById('orderForm').style.display = 'none';
|
|
|
+ showQrCode(data.data.codeUrl, orderNo);
|
|
|
+ } else {
|
|
|
+ // 如果Native支付不可用,尝试H5支付
|
|
|
+ tryH5Pay(orderNo);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(function() {
|
|
|
+ // 网络出错时尝试H5支付
|
|
|
+ tryH5Pay(orderNo);
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function tryH5Pay(orderNo) {
|
|
|
+ var btn = document.getElementById('payBtn');
|
|
|
+ btn.textContent = '正在跳转微信支付...';
|
|
|
+
|
|
|
+ fetch('/api/payment/wechat/create', {
|
|
|
+ method: 'POST',
|
|
|
+ headers: { 'Content-Type': 'application/json' },
|
|
|
+ body: JSON.stringify({
|
|
|
+ orderNo: orderNo,
|
|
|
+ description: '肠道菌群基因检测',
|
|
|
+ amount: 1,
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .then(function(r) { return r.json(); })
|
|
|
+ .then(function(data) {
|
|
|
+ if (data.code === 200 && data.data) {
|
|
|
+ // 尝试JSAPI支付(微信浏览器内)
|
|
|
+ if (typeof WeixinJSBridge !== 'undefined') {
|
|
|
+ WeixinJSBridge.invoke('getBrandWCPayRequest', {
|
|
|
+ appId: data.data.appId,
|
|
|
+ timeStamp: data.data.timeStamp,
|
|
|
+ nonceStr: data.data.nonceStr,
|
|
|
+ package: data.data.package,
|
|
|
+ signType: data.data.signType || 'RSA',
|
|
|
+ paySign: data.data.paySign
|
|
|
+ }, function(res) {
|
|
|
+ if (res.err_msg === 'get_brand_wcpay_request:ok') {
|
|
|
+ document.getElementById('orderForm').innerHTML = '<div style="text-align:center;padding:2rem"><div style="font-size:3rem;margin-bottom:0.5rem">✅</div><h3 style="color:#0d9488">支付成功!</h3><p style="color:#999;margin-top:0.5rem">检测套件将在24小时内寄出</p></div>';
|
|
|
+ } else {
|
|
|
+ alert('支付失败: ' + (res.err_msg || '未知错误'));
|
|
|
+ btn.disabled = false;
|
|
|
+ btn.textContent = '微信支付';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ alert('请在微信内打开此页面完成支付');
|
|
|
+ btn.disabled = false;
|
|
|
+ btn.textContent = '微信支付';
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ alert('支付系统暂不可用:' + (data.message || ''));
|
|
|
+ btn.disabled = false;
|
|
|
+ btn.textContent = '微信支付';
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(function() {
|
|
|
+ alert('网络请求失败');
|
|
|
+ btn.disabled = false;
|
|
|
+ btn.textContent = '微信支付';
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function showQrCode(codeUrl, orderNo) {
|
|
|
+ var div = document.createElement('div');
|
|
|
+ div.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:1000;display:flex;align-items:center;justify-content:center';
|
|
|
+ div.onclick = function(e) { if (e.target === this) this.remove(); };
|
|
|
+ div.innerHTML = '<div style="background:#fff;border-radius:16px;padding:2rem;text-align:center;max-width:320px">' +
|
|
|
+ '<h3 style="margin-bottom:0.5rem;font-size:1.1rem;">请使用微信扫码支付</h3>' +
|
|
|
+ '<p style="font-size:0.85rem;color:#999;margin-bottom:1rem">订单号: ' + orderNo + '</p>' +
|
|
|
+ '<div id="qrcode" style="width:200px;height:200px;margin:0 auto 1rem;background:#f5f5f5;display:flex;align-items:center;justify-content:center;border-radius:8px">' +
|
|
|
+ '<canvas id="qrCanvas" width="200" height="200"></canvas>' +
|
|
|
+ '</div>' +
|
|
|
+ '<p style="font-size:0.8rem;color:#999">打开微信「扫一扫」完成支付</p>' +
|
|
|
+ '<button onclick="this.closest(\'div[style]\').remove()" style="margin-top:1rem;padding:0.5rem 2rem;border:1px solid #e2e8f0;border-radius:8px;background:#fff;cursor:pointer">关闭</button>' +
|
|
|
+ '</div>';
|
|
|
+ document.body.appendChild(div);
|
|
|
+
|
|
|
+ // 轮询支付状态
|
|
|
+ var pollTimer = setInterval(function() {
|
|
|
+ fetch('/api/payment/wechat/status', {
|
|
|
+ method: 'POST',
|
|
|
+ headers: { 'Content-Type': 'application/json' },
|
|
|
+ body: JSON.stringify({ orderNo: orderNo })
|
|
|
+ })
|
|
|
+ .then(function(r) { return r.json(); })
|
|
|
+ .then(function(data) {
|
|
|
+ if (data.code === 200 && data.data && data.data.status === 'success') {
|
|
|
+ clearInterval(pollTimer);
|
|
|
+ div.innerHTML = '<div style="background:#fff;border-radius:16px;padding:2rem;text-align:center;max-width:320px">' +
|
|
|
+ '<div style="font-size:3rem;margin-bottom:0.5rem">✅</div>' +
|
|
|
+ '<h3 style="color:#0d9488;font-size:1.2rem;">支付成功!</h3>' +
|
|
|
+ '<p style="font-size:0.85rem;color:#999;margin-top:0.5rem">您的检测订单已提交,检测套件将在24小时内寄出</p>' +
|
|
|
+ '<button onclick="this.closest(\'div[style]\').remove()" style="margin-top:1rem;padding:0.5rem 2rem;background:linear-gradient(135deg,#0d9488,#14b8a6);color:#fff;border:none;border-radius:8px;cursor:pointer">完成</button>' +
|
|
|
+ '</div>';
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(function() {});
|
|
|
+ }, 3000);
|
|
|
+
|
|
|
+ // 30秒后停止轮询
|
|
|
+ setTimeout(function() { clearInterval(pollTimer); }, 120000);
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<!-- 扫码咨询 -->
|
|
|
+<div class="container" style="text-align:center;padding-top:0">
|
|
|
+ <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:0.8rem">扫码咨询,了解更多</p>
|
|
|
+ <img src="../img/yan.png" alt="咨询二维码" style="width:160px;height:160px;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.1);">
|
|
|
+</div>
|
|
|
+
|
|
|
<footer class="site-footer">
|
|
|
<div class="footer-inner">
|
|
|
<p>本检测仅用于健康评估和科研参考,不直接用于临床诊断。如有健康问题,请咨询专业医生。</p>
|