或者

<div id="order-tracking-app"></div>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
const { useState } = React;

function OrderTrackingApp() {
const [trackingNumber, setTrackingNumber] = useState('');
const [orderNumber, setOrderNumber] = useState('');
const [trackingDetails, setTrackingDetails] = useState(null);
const [error, setError] = useState('');
const [正在加载，setLoading] = useState(false);

const fetchData = async (url) => {
设置加载状态(true);
setError('');
setTrackingDetails(null);

const shopUrl = Shopify.shop;
const fullUrl = `https://${shopUrl}/apps/proxy${url}`;

尝试 {
const response = await fetch(fullUrl, {
标题：{
'ngrok-skip-browser-warning': '69420',
'Accept': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
}
});
如果 (!response.ok) {
throw new Error(`HTTP 错误！状态：${response.status}`);
}
const data = await response.json();
如果 (data.error) {
setError(data.error);
} 别的 {
设置跟踪详情(数据)；
}
} catch (err) {
console.error('获取错误：', err);
setError('获取信息时出错，请重试。');
} 最后 {
设置加载状态为false；
}
};

const handleSubmit = async (e, type) => {
e.preventDefault();
const value = type === 'tracking' ? trackingNumber : orderNumber;
if (!value.trim()) {
setError(`请输入有效的 ${type === 'tracking' ? 'tracking' : 'order'} 号。`);
返回;
}
const encodedValue = encodeURIComponent(value);
await fetchData(`/${type === 'tracking' ? 'checkstatus' : 'orderTracking'}/${encodedValue}`);
};

返回 （
<div className="max-w-2xl mx-auto p-6 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl shadow-lg">
<h1 className="text-4xl font-extrabold text-center text-indigo-800 mb-8">订单跟踪</h1>
<div className="space-y-6">
<form onSubmit={(e) => handleSubmit(e, 'tracking')} className="flex flex-col sm:flex-row gap-4">
<输入
type="text"
值={跟踪号码}
onChange={(e) => setTrackingNumber(e.target.value)}
占位符="输入追踪号码"
className="flex-1 p-3 border border-indigo-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
/>
<button type="submit" className="w-full sm:w-auto bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition duration-300 ease-in-out transform hover:-translate-y-1">
追踪
</button>
</form>
<form onSubmit={(e) => handleSubmit(e, 'order')} className="flex flex-col sm:flex-row gap-4">
<输入
type="text"
值={订单号}
onChange={(e) => setOrderNumber(e.target.value)}
占位符="请输入订单号"
className="flex-1 p-3 border border-indigo-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
/>
<button type="submit" className="w-full sm:w-auto bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 transition duration-300 ease-in-out transform hover:-translate-y-1">
按订单追踪
</button>
</form>
</div>
{loading && <p className="text-center text-indigo-600 mt-6 animate-pulse">正在加载...</p>}
{error && <p className="text-center text-red-600 mt-6 bg-red-100 p-3 rounded-lg">{error}</p>}
{trackingDetails && (
<div className="mt-8 bg-white p-6 rounded-xl shadow-md border border-indigo-100">
<h2 className="text-2xl font-bold mb-4 pb-2 border-b-2 border-indigo-200 text-indigo-800">追踪详情</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<p><span className="font-semibold text-indigo-700">状态：</span> <span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded">{trackingDetails.stage}</span></p>
<p><span className="font-semibold text-indigo-700">描述：</span> {trackingDetails.description}</p>
<p><span className="font-semibold text-indigo-700">上次更新时间：</span> {new Date(trackingDetails.time_utc).toLocaleString()}</p>
{trackingDetails.tracking_id ? (
<p><span className="font-semibold text-indigo-700">追踪 ID：</span> {trackingDetails.tracking_id}</p>
): (
<p><span className="font-semibold text-indigo-700">订单号：</span> {trackingDetails.order_number}</p>
)}
<p><span className="font-semibold text-indigo-700">承运商：</span> {trackingDetails.carrier || 'N/A'}</p>
{trackingDetails.tracking_url && (
<p className="col-span-full">
<span className="font-semibold text-indigo-700">追踪网址：</span>
<a href={trackingDetails.tracking_url} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline ml-1 inline-flex items-center">
查看详细跟踪信息
<svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</a>
</p>
)}
</div>
</div>
)}
</div>
）；
}

ReactDOM.render(<OrderTrackingApp />, document.getElementById('order-tracking-app'));
</script>