Skip to content

W
wangxiaolu-sfa-ui
提交 e5dbabfa authored 作者: lidongxu's avatar lidongxu
浏览文件
操作

feat(other/logistics): 新增：物流查看页面

暂时静态的，用的固定数据把页面样式写出来了
上级 75517254
隐藏空白字符变更
内嵌 并排
正在显示 包含 237 行增加 和 11 行删除
index.html
浏览文件 @ e5dbabfa
......@@ -3,11 +3,18 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="/favicon.ico">
<title><%= systemConfig.title %></title>
<meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1">
<meta name="renderer"
content="webkit">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon"
href="/favicon.ico">
<title>
<%= systemConfig.title
%>
</title>
<style>
html,
body,
......@@ -198,11 +205,21 @@
}
</style>
<!-- 飞书SDK -->
<script src="https://lf-scm-cn.feishucdn.com/lark/op/h5-js-sdk-1.5.34.js" type="text/javascript"></script>
<% if (systemConfig.env !== 'development') { %>
<script src="https://lf-scm-cn.feishucdn.com/lark/op/h5-js-sdk-1.5.34.js"
type="text/javascript"></script>
<!-- 腾讯地图 SDK -->
<script src="https://map.qq.com/api/gljs?v=1.exp&key=EOGBZ-US2RW-YF5RC-OKB5O-R6BUK-2LFVS"></script>
<% if
(systemConfig.env
!=='development'
)
{
%>
<!-- 飞书控制台调试 -->
<script src='https://sf1-scmcdn-cn.feishucdn.com/obj/feishu-static/op/fe/devtools_frontend/remote-debug-0.0.1-alpha.6.js'></script>
<% } %>
<script
src='https://sf1-scmcdn-cn.feishucdn.com/obj/feishu-static/op/fe/devtools_frontend/remote-debug-0.0.1-alpha.6.js'></script>
<% }
%>
</head>
<body>
......@@ -215,7 +232,8 @@
<div class="load_title">正在加载系统资源，请耐心等待</div>
</div>
</div>
<script type="module" src="/src/main.js"></script>
<script type="module"
src="/src/main.js"></script>
</body>
</html>
\ No newline at end of file
src/router/index.js
浏览文件 @ e5dbabfa
......@@ -80,6 +80,12 @@ export const constantPCRoutes = [
meta: { title: '个人中心', icon: 'user' }
}
]
},
// 物流信息页面
{
path: '/logistics',
component: () => import('@/views/other/logistics'),
name: 'logistics'
}
]
// 移动端 公共路由
......@@ -131,7 +137,6 @@ export const constantMobileRoutes = [
]
}
]
// PC端 动态路由，基于用户权限动态去加载（一级的是靠网页里配置动态请求的，二级路由页面）
export const dynamicRoutes = [
{
......
src/views/other/logistics/index.vue 0 → 100644
浏览文件 @ e5dbabfa
<template>
<div class="app">
<div class="container">
<p class="order">
<span>单号：{{ orderId }}</span>
</p>
<div class="wrap">
<el-timeline>
<el-timeline-item v-for="(activity, index) in activities"
:key="index"
:timestamp="activity.timestamp"
:type="index === 0 && 'primary'"
:hollow="true"
:class="{ 'current': index === 0 }">
{{ activity.content }}
</el-timeline-item>
</el-timeline>
<div class="map-container">
<div id="map-container"
style="width:100%; height:400px;"></div>
</div>
</div>
</div>
</div>
</template>
<script setup>
const data = {
"code": "1000",
"data": {
"purchaseTraceList": [
{
"traceDetails": [
{
"operateCode": "-265",
"operateDetailCode": "-265",
"operateName": "华悦薇",
"operateRemark": "司机已到达提货地-江苏 无锡市",
"operateTime": "2025-07-03 11:01:11",
"operateTitle": "已到达装货地"
},
{
"operateCode": "-640",
"operateDetailCode": "-640",
"operateName": "华悦薇",
"operateRemark": "司机开始装车",
"operateTime": "2025-07-03 11:01:11",
"operateTitle": "配送员完成揽收"
},
{
"operateCode": "-1880",
"operateDetailCode": "-1880",
"operateName": "华悦薇",
"operateRemark": "车辆已经到达“无锡锡山TC”",
"operateTime": "2025-07-03 12:18:29",
"operateTitle": "经停"
},
{
"operateCode": "-170",
"operateDetailCode": "-170",
"operateName": "孙永杰",
"operateRemark": "无锡锡山TC已收货(11箱、76.70kg、0.70方)",
"operateTime": "2025-07-03 20:12:34",
"operateTitle": "分拣中心收货"
},
{
"operateCode": "16",
"operateDetailCode": "16",
"operateName": "孙永杰",
"operateRemark": "订单已在无锡锡山TC出发，目的地：武汉新洲TC",
"operateTime": "2025-07-04 02:39:27",
"operateTitle": "分拣发货"
},
{
"operateCode": "-450",
"operateDetailCode": "-450",
"operateName": "孙永杰",
"operateRemark": "您的快件已发车",
"operateTime": "2025-07-04 02:39:29",
"operateTitle": "封车"
},
{
"operateCode": "16",
"operateDetailCode": "16",
"operateName": "程瑶",
"operateRemark": "订单已在武汉新洲TC出发，目的地：郑州TC",
"operateTime": "2025-07-05 02:05:33",
"operateTitle": "分拣发货"
},
{
"operateCode": "-450",
"operateDetailCode": "-450",
"operateName": "程瑶",
"operateRemark": "您的快件已发车",
"operateTime": "2025-07-05 02:05:34",
"operateTitle": "封车"
},
{
"operateCode": "-170",
"operateDetailCode": "-170",
"operateName": "maxiaodong14",
"operateRemark": "郑州TC已收货(11箱，批次号JDV021786083827002)",
"operateTime": "2025-07-05 10:09:25",
"operateTitle": "分拣中心收货"
},
{
"operateCode": "-300",
"operateDetailCode": "-300",
"operateName": "梁龙龙",
"operateRemark": "司机已到达目的城市-河南 郑州市，请您准备签收",
"operateTime": "2025-07-06 13:53:54",
"operateTitle": "运输车辆到达"
},
{
"operateCode": "150",
"operateDetailCode": "150",
"operateName": "梁龙龙",
"operateRemark": "订单已完成配送，感谢您选择京东物流！",
"operateTime": "2025-07-06 13:54:38",
"operateTitle": "站点收款"
}
],
"waybillNo": "JDV021786083827"
}
]
},
"message": "成功",
"requestId": "1751961953930"
}
const activities = ref(data.data.purchaseTraceList[0].traceDetails.map(o => ({
content: o.operateRemark,
timestamp: o.operateTime
})))
const orderId = ref(data.data.purchaseTraceList[0].waybillNo)
onMounted(() => {
//定义地图中心点坐标
var center = new TMap.LatLng(39.984120, 116.307484)
//定义map变量，调用 TMap.Map() 构造函数创建地图
var map = new TMap.Map(document.getElementById('map-container'), {
center: center,//设置地图中心点坐标
zoom: 17.2, //设置地图缩放级别
// pitch: 43.5, //设置俯仰角
// rotation: 45 //设置地图旋转角度
});
})
</script>
<style lang="scss"
scoped>
.app {
background-color: #efefef;
.container {
padding: 10px 20px;
width: 80%;
margin: 0 auto;
background-color: white;
min-height: 100vh;
}
.order {
background-color: #f5f5f5;
padding: 15px;
span {
color: #1890ff; // 蓝色文字
padding: 5px 12px;
border: 1px solid #1890ff;
border-radius: 8px;
}
}
.wrap {
display: flex;
gap: 20px;
padding: 0 50px;
margin-top: 30px;
.el-timeline {
flex: 1;
max-width: 600px;
margin: 0;
.current {
:deep(.el-timeline-item__content),
:deep(.el-timeline-item__timestamp) {
color: #1890ff;
}
}
}
.map-container {
flex: 1;
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论