348 lines
6.7 KiB
Vue
348 lines
6.7 KiB
Vue
<template>
|
||
<navBar :title="'物流信息'"></navBar>
|
||
<view class="logistics-page">
|
||
<!-- 顶部导航 -->
|
||
|
||
<!-- 内容区域 -->
|
||
<scroll-view class="content" scroll-y>
|
||
<!-- 头部基础信息 -->
|
||
<view class="base-info" v-if="hasData">
|
||
<view class="row">
|
||
<text class="label">信息来源：</text>
|
||
<text class="value">{{ logisticsInfo.source }}</text>
|
||
</view>
|
||
<view class="row waybill-row">
|
||
<text class="label">运单编号：</text>
|
||
<text class="value">{{ logisticsInfo.waybillNo }}</text>
|
||
<view class="btn-copy" @click="onCopy">
|
||
复制
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 时间轴 -->
|
||
<view class="timeline" v-if="hasData">
|
||
<view class="left"></view>
|
||
<!-- 左侧日期 -->
|
||
<up-steps current="0" direction="column" dot>
|
||
<up-steps-item :desc="item.context" v-for="(item, index) in logisticsList">
|
||
<template #title>
|
||
<view class="timebox">
|
||
<text class="time">{{ formatDate(item.time) }}</text>
|
||
<text class="date">{{ formatTime(item.time) }}</text>
|
||
</view>
|
||
</template>
|
||
</up-steps-item>
|
||
</up-steps>
|
||
<!-- <view
|
||
v-for="(item, index) in logisticsList"
|
||
:key="index"
|
||
class="timeline-item"
|
||
>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</view> -->
|
||
</view>
|
||
<empty :emptyDesc="'暂无物流信息'" v-else />
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from "vue";
|
||
import navBar from "@/components/navBar/navBar.vue";
|
||
import goodsApi from "@/api/goods_api";
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import empty from "@/components/empty/empty.vue";
|
||
import dayjs from "dayjs";
|
||
const hasData = ref(false);
|
||
onLoad((options) => {
|
||
console.log(options);
|
||
if(options.order_id){
|
||
order_id.value = options.order_id;
|
||
}
|
||
if(options.name){
|
||
logisticsInfo.value.source = options.name;
|
||
}
|
||
getLogisticsInfo();
|
||
});
|
||
const order_id = ref('');
|
||
const logisticsInfo = ref({
|
||
source: "",
|
||
waybillNo: "",
|
||
});
|
||
const getLogisticsInfo = async () => {
|
||
const res = await goodsApi.getOrderTrack({
|
||
order_id: order_id.value,
|
||
});
|
||
if(res.code==200){
|
||
logisticsInfo.value.waybillNo=res.data.nu;
|
||
if(res.data && res.data.data.length > 0){
|
||
hasData.value = true;
|
||
logisticsList.value = res.data.data;
|
||
}else{
|
||
hasData.value = false;
|
||
}
|
||
}
|
||
|
||
};
|
||
const formatDate = (time) => {
|
||
return dayjs(time).format("MM-DD");
|
||
};
|
||
const formatTime = (time) => {
|
||
return dayjs(time).format("HH:mm");
|
||
};
|
||
// 模拟数据，布局参考上传截图
|
||
const logisticsList = ref([
|
||
{
|
||
date: "01-27",
|
||
time: "01:14",
|
||
desc: "您的快件离开【华北转运中心】，已发往【乌鲁木齐转运中心】。预计【01月30日】到达【乌鲁木齐市】，因运输距离较远，预计将在【30日晚上】为您更新快件状态，请您放心！",
|
||
},
|
||
{
|
||
date: "01-27",
|
||
time: "00:17",
|
||
desc: "您的快件已经到达【华北转运中心】。【物流问题无需找商家或平台，请致电（专属热线:95554）更快解决】",
|
||
},
|
||
{
|
||
date: "01-26",
|
||
time: "23:24",
|
||
desc: "您的快件离开【河北省廊坊市固安县】，已发往【华北转运中心】",
|
||
},
|
||
{
|
||
date: "01-26",
|
||
time: "18:31",
|
||
desc: "您的快件在【河北省廊坊市固安县】已揽收，揽收人：邢徐芳（18832637908）【物流问题无需找商家或平台，请致电（专属热线:95554）更快解决】",
|
||
},
|
||
]);
|
||
|
||
const onBack = () => {
|
||
// 使用 uni-app 返回上一页
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
};
|
||
|
||
const onCopy = () => {
|
||
uni.setClipboardData({
|
||
data: logisticsInfo.value.waybillNo,
|
||
success: () => {
|
||
uni.showToast({
|
||
title: "已复制运单号",
|
||
icon: "none",
|
||
});
|
||
},
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.timebox {
|
||
|
||
color: #333333;
|
||
margin-left: -130rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.date{
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
margin-left: 8rpx;
|
||
}
|
||
.time{
|
||
font-size: 28rpx;
|
||
|
||
color: #999999;
|
||
}
|
||
// margin-top: 20rpx;
|
||
}
|
||
.timeline :deep(.u-steps-item__content__desc){
|
||
margin-top: -68rpx;
|
||
}
|
||
.timeline :deep(.u-text__value--tips){
|
||
font-size: 28rpx!important;
|
||
color:#666666!important;
|
||
}
|
||
.logistics-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
background-color: #f7f7f7;
|
||
}
|
||
|
||
.nav-bar {
|
||
height: 44px;
|
||
padding: 0 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-color: #ffffff;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.nav-left,
|
||
.nav-right {
|
||
width: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.nav-back-icon {
|
||
font-size: 18px;
|
||
color: #333333;
|
||
}
|
||
|
||
.nav-title {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
.content {
|
||
flex: 1;
|
||
margin-top: calc(var(--status-bar-height) + 44px);
|
||
}
|
||
|
||
.base-info {
|
||
padding: 16px 16px 12px;
|
||
background-color: #ffffff;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.row:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.label {
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
|
||
}
|
||
|
||
.value {
|
||
font-size: 30rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.waybill-row .value {
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.btn-copy {
|
||
padding: 2px 15px;
|
||
border-radius: 20px;
|
||
border: 1px solid #dddddd;
|
||
background-color: #f8f8f8;
|
||
font-size: 12px;
|
||
color: #666666;
|
||
}
|
||
|
||
.btn-copy-text {
|
||
font-size: 12px;
|
||
color: #666666;
|
||
}
|
||
|
||
.timeline {
|
||
margin-top: 12px;
|
||
padding: 16px 38px 32px;
|
||
background-color: #ffffff;
|
||
display: flex;
|
||
.left{
|
||
|
||
width: 250rpx;
|
||
}
|
||
}
|
||
|
||
.timeline-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.timeline-item + .timeline-item {
|
||
margin-top: 18px;
|
||
}
|
||
|
||
.time-col {
|
||
width: 76rpx;
|
||
text-align: left;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.date {
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.time {
|
||
margin-top: 2px;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.axis-col {
|
||
width: 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.dot {
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
border: 2px solid #e0e0e0;
|
||
background-color: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.dot.active {
|
||
background-color: #00c15b;
|
||
border-color: #00c15b;
|
||
}
|
||
|
||
.dot-icon {
|
||
font-size: 12px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.line {
|
||
flex: 1;
|
||
width: 2px;
|
||
background-color: #00c15b;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.line-gray {
|
||
background-color: #e0e0e0;
|
||
}
|
||
|
||
.content-col {
|
||
flex: 1;
|
||
padding-left: 8px;
|
||
}
|
||
|
||
.desc {
|
||
font-size: 13px;
|
||
line-height: 1.6;
|
||
color: #999999;
|
||
}
|
||
|
||
.desc-active {
|
||
color: #333333;
|
||
}
|
||
</style> |