Vue.js 神领物流跟踪系统示例 - 前端开发
<!DOCTYPE html>
<html>
<head>
<title>神领物流跟踪系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-input v-model="trackingNumber" placeholder="请输入运单号"></el-input>
<el-button @click="track">查询</el-button>
<div v-if="showResult">
<h3>运单状态：</h3>
<p>{{ status }}</p>
<h3>物流信息：</h3>
<ul>
<li v-for="info in logistics" :key="info">{{ info }}</li>
</ul>
</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
trackingNumber: '',
showResult: false,
status: '',
logistics: []
},
methods: {
track() {
// 在此处调用后端接口查询物流信息
// 假设接口返回的数据为 { status: '已签收', logistics: ['2020-01-01 10:00:00 - 北京 - 已发货', '2020-01-02 10:00:00 - 上海 - 已到达'] }
// 将返回的数据更新到data中的status和logistics属性
this.status = '已签收';
this.logistics = ['2020-01-01 10:00:00 - 北京 - 已发货', '2020-01-02 10:00:00 - 上海 - 已到达'];
this.showResult = true;
}
}
})
</script>
</body>
</html>
<p>在这个示例中，我们使用了 Vue.js 和 Element UI 库。页面上有一个输入框和一个按钮，用户可以输入运单号并点击按钮进行查询。查询后，将显示运单状态和物流信息。</p>
<p>在<code>track</code>方法中，我们可以调用后端接口来查询物流信息。这里为了简化示例，直接将查询结果写入了<code>status</code>和<code>logistics</code>属性中。你可以根据实际情况修改这部分代码，将物流信息的查询逻辑和后端接口对接起来。</p>
原文地址: https://www.cveoy.top/t/topic/pQif 著作权归作者所有。请勿转载和采集!