169 lines
4.6 KiB
Vue
169 lines
4.6 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 地图区域 -->
|
||
<view class="map-container">
|
||
<map
|
||
id="deliveryMap"
|
||
:latitude="latitude"
|
||
:longitude="longitude"
|
||
:markers="markers"
|
||
:polyline="polyline"
|
||
:include-points="points"
|
||
style="width: 100%; height: 110%"
|
||
>
|
||
</map>
|
||
</view>
|
||
|
||
<!-- 物流信息 -->
|
||
<view class="info-card">
|
||
<view class="info-row">
|
||
<text class="info-label">运单号</text>
|
||
<view>
|
||
<text class="info-value">YD999999</text>
|
||
<img
|
||
class="copy-btn"
|
||
@click="copyNumber"
|
||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png"
|
||
alt="复制"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="info-label">收件人</text>
|
||
<text class="info-value">
|
||
小王
|
||
<text>1388888888</text>
|
||
</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="info-label">车牌号</text>
|
||
<text class="info-value">京ALN233</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 物流时间轴 -->
|
||
<view class="timeline">
|
||
<!-- 已签收 -->
|
||
<view class="timeline-item active">
|
||
<view class="timeline-dot"></view>
|
||
<view class="timeline-line"></view>
|
||
<view class="timeline-content">
|
||
<view class="timeline-status">已签收</view>
|
||
<view class="timeline-desc">您的订单已被签收，感谢您的支持</view>
|
||
<view class="timeline-time">2021-04-16 20:30:24</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 派送中 -->
|
||
<view class="timeline-item">
|
||
<view class="timeline-dot"></view>
|
||
<view class="timeline-line"></view>
|
||
<view class="timeline-content">
|
||
<view class="timeline-status">派送中</view>
|
||
<view class="timeline-desc">您的订单正在派送中</view>
|
||
<view class="timeline-desc">
|
||
<view
|
||
>配送司机：小王
|
||
<text class="detail-item-phone">1388888888</text>
|
||
</view>
|
||
</view>
|
||
<view class="timeline-desc">
|
||
<text>车牌号：京ALN233</text>
|
||
</view>
|
||
<view class="timeline-time">2021-04-16 20:06:24</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 仓库处理 -->
|
||
<view class="timeline-item">
|
||
<view class="timeline-dot"></view>
|
||
<view class="timeline-line"></view>
|
||
<view class="timeline-content">
|
||
<view class="timeline-status">仓库处理中</view>
|
||
<view class="timeline-desc">拣货完成</view>
|
||
<view class="timeline-time">2021-04-16 20:30:24</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 已下单 -->
|
||
<view class="timeline-item">
|
||
<view class="timeline-dot"></view>
|
||
<view class="timeline-line"></view>
|
||
<view class="timeline-content">
|
||
<view class="timeline-status">已下单</view>
|
||
<view class="timeline-desc">您提交了订单，预计2020-04-29送达</view>
|
||
<view class="timeline-time">2021-04-16 20:30:24</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 坐标
|
||
latitude: 39.90469,
|
||
longitude: 116.40717,
|
||
|
||
// 地图标记点
|
||
markers: [
|
||
{
|
||
id: 1,
|
||
latitude: 39.90469,
|
||
longitude: 116.40717,
|
||
title: "目的地",
|
||
iconPath: "/static/destination.png",
|
||
width: 36,
|
||
height: 36,
|
||
},
|
||
{
|
||
id: 2,
|
||
latitude: 39.915,
|
||
longitude: 116.42,
|
||
title: "当前位置",
|
||
iconPath: "/static/current.png",
|
||
width: 40,
|
||
height: 40,
|
||
},
|
||
],
|
||
|
||
// 配送路线
|
||
polyline: [
|
||
{
|
||
points: [
|
||
{ latitude: 39.915, longitude: 116.42 },
|
||
{ latitude: 39.91, longitude: 116.415 },
|
||
{ latitude: 39.907, longitude: 116.41 },
|
||
{ latitude: 39.90469, longitude: 116.40717 },
|
||
],
|
||
color: "#07C160",
|
||
width: 6,
|
||
dottedLine: false,
|
||
},
|
||
],
|
||
|
||
// 地图显示区域
|
||
points: [
|
||
{ latitude: 39.876, longitude: 116.435 },
|
||
{ latitude: 39.886, longitude: 116.395 },
|
||
],
|
||
};
|
||
},
|
||
methods: {
|
||
copyNumber() {
|
||
uni.setClipboardData({
|
||
data: "YD999999",
|
||
success: () => {
|
||
uni.showToast({ title: "运单号已复制", icon: "success" });
|
||
},
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style> |