288 lines
10 KiB
Vue
288 lines
10 KiB
Vue
<template>
|
||
<view class="pad-x100">
|
||
<!-- 头部 -->
|
||
<status-nav :ifReturn="false" navBarTitle="货物" :marginBottom="0"></status-nav>
|
||
<!-- 搜索 -->
|
||
<view class="cargo-search-bg pad-sx35 pad-zy40 radius8 border-box" :style="{top:statusHeight+50+'px'}">
|
||
<view class="cargo-search radius30 border-box flex">
|
||
<image src="/static/icon/icon-search.png" mode="widthFix"></image>
|
||
<input class="input font24" type="text" v-model="coding" placeholder="请输入运单号搜索" placeholder-style="color:#b4b4b4"/>
|
||
<view class="submit-btn background-red font24 flex">确认</view>
|
||
</view>
|
||
</view>
|
||
<!-- 物流信息 -->
|
||
<view class="cargo pad-sx30 pad-zy25 radius8 border-box">
|
||
<view class="cargo-title">
|
||
<title-pull nameTxt="线路信息详细"></title-pull>
|
||
</view>
|
||
<view class="cargo-txt">
|
||
<!-- 收货地址 -->
|
||
<view class="address">
|
||
<view class="txt flex">
|
||
<view class="icon background-red radius100 font24 flex">收</view>
|
||
<view class="title font24">收货地址：{{address}}</view>
|
||
</view>
|
||
<view class="item border-box"></view>
|
||
</view>
|
||
<!-- 已签收 -->
|
||
<view class="cargo-list signed-list">
|
||
<view class="txt flex">
|
||
<view class="icon background-red radius100 flex"><image src="/static/icon/icon-signed.png" mode="widthFix" style="width: 24rpx; height: 23rpx;"></image></view>
|
||
<view class="title font28 bold">已签收</view>
|
||
</view>
|
||
<view class="item pad-sx10 border-box flex" v-for="(item,index) in signed" :key="index">
|
||
<view class="point radius100 background-grey" :class="index==0?'opacity':''"></view>
|
||
<view class="info">
|
||
<view class="cargo-tags font24">{{item.tags}}</view>
|
||
<view class="cargo-time font20 opacity-06">{{item.time}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 待取件 -->
|
||
<view class="cargo-list">
|
||
<view class="txt flex">
|
||
<view class="icon background-grey radius100 flex"><image src="/static/icon/icon-wait.png" mode="widthFix" style="width: 25rpx; height: 24rpx;"></image></view>
|
||
<view class="title font28 bold">待取件</view>
|
||
</view>
|
||
<view class="item pad-sx10 border-box flex" v-for="(item,index) in wait" :key="index">
|
||
<view class="point radius100 background-grey" :class="index==0?'opacity':''"></view>
|
||
<view class="info">
|
||
<view class="cargo-tags font24">{{item.tags}}</view>
|
||
<view class="cargo-time font20 opacity-06">{{item.time}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 派送中 -->
|
||
<view class="cargo-list">
|
||
<view class="txt flex">
|
||
<view class="icon background-grey radius100 flex"><image src="/static/icon/icon-deliver.png" mode="widthFix" style="width: 25rpx; height: 23rpx;"></image></view>
|
||
<view class="title font28 bold">派送中</view>
|
||
</view>
|
||
<view class="item pad-sx10 border-box flex" v-for="(item,index) in deliver" :key="index">
|
||
<view class="point radius100 background-grey" :class="index==0?'opacity':''"></view>
|
||
<view class="info">
|
||
<view class="cargo-tags font24">{{item.tags}}</view>
|
||
<view class="cargo-time font20 opacity-06">{{item.time}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 运输中 -->
|
||
<view class="cargo-list">
|
||
<view class="txt flex">
|
||
<view class="icon background-grey radius100 flex"><image src="/static/icon/icon-transit.png" mode="widthFix" style="width: 29rpx; height: 23rpx;"></image></view>
|
||
<view class="title font28 bold">运输中</view>
|
||
</view>
|
||
<view class="item pad-sx10 border-box flex" v-for="(item,index) in transit" :key="index">
|
||
<view class="point radius100 background-grey" :class="index==0?'opacity':''"></view>
|
||
<view class="info">
|
||
<view class="cargo-tags font24">{{item.tags}}</view>
|
||
<view class="cargo-time font20 opacity-06">{{item.time}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 仓库处理中 -->
|
||
<view class="cargo-list">
|
||
<view class="txt flex">
|
||
<view class="icon background-grey radius100 flex"><image src="/static/icon/icon-handle.png" mode="widthFix" style="width: 27rpx; height: 24rpx;"></image></view>
|
||
<view class="title font28 bold">仓库处理中</view>
|
||
</view>
|
||
<view class="item pad-sx10 border-box flex" v-for="(item,index) in handle" :key="index">
|
||
<view class="point radius100 background-grey" :class="index==0?'opacity':''"></view>
|
||
<view class="info">
|
||
<view class="cargo-tags font24">{{item.tags}}</view>
|
||
<view class="cargo-time font20 opacity-06">{{item.time}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 已下单 -->
|
||
<view class="cargo-list placed-list">
|
||
<view class="txt flex">
|
||
<view class="icon background-grey radius100 flex"><image src="/static/icon/icon-placed.png" mode="widthFix" style="width: 22rpx; height: 22rpx;"></image></view>
|
||
<view class="title font28 bold">已下单</view>
|
||
</view>
|
||
<view class="item pad-sx10 border-box flex" v-for="(item,index) in placed" :key="index">
|
||
<view class="point radius100 background-grey" :class="index==0?'opacity':''"></view>
|
||
<view class="info">
|
||
<view class="cargo-tags font24">{{item.tags}}</view>
|
||
<view class="cargo-time font20 opacity-06">{{item.time}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 底部图片 -->
|
||
<view class="cargo-img pad-sx25 pad-zy20 border-box">
|
||
<image src="/static/public/cargo.jpg" mode="widthFix"></image>
|
||
</view>
|
||
<!-- 尾部 -->
|
||
<foot-tab :current="3"></foot-tab>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import titlePull from '@/components/title/title-pull.vue';
|
||
export default {
|
||
components:{
|
||
titlePull
|
||
},
|
||
data() {
|
||
return {
|
||
screenHeight:uni.getSystemInfoSync().screenHeight,
|
||
statusHeight:uni.getSystemInfoSync().statusBarHeight,
|
||
coding:'',// 订单号
|
||
address:'',// 收货地址
|
||
signed:[],// 已签收
|
||
wait:[],// 待取件
|
||
deliver:[],// 派送中
|
||
transit:[],// 运输中
|
||
handle:[],// 仓库处理中
|
||
placed:[],// 已下单
|
||
}
|
||
},
|
||
onLoad(op) {
|
||
// 查询货物信息
|
||
this.getCargoInfo();
|
||
},
|
||
methods: {
|
||
getCargoInfo(){
|
||
this.address = '四川成都市武侯区人民南路三段1252号';
|
||
this.signed = [{tags:'您的订单已签收，如有疑问您可以联系配送员【周世平，17502809672】确认。感谢您选择货运物流，欢迎再次光临。',time:'2022-08-07 17:05:40'}];
|
||
this.wait = [{tags:'您的订单在【武侯区物流中心】投递完成，请上门提货',time:'2022-08-07 17:05:40'}];
|
||
this.deliver = [{tags:'您的订单正在配送途中（快递员:周世平，电话:17502809672)，请您耐心等待。给您服务的快递员已完成新冠疫苗接种，祝您身体健康。',time:'2022-08-07 17:05:40'}];
|
||
this.transit = [
|
||
{tags:'您的订单已到达京东【成都光华营业部】',time:'2022-08-07 17:05:40'},
|
||
{tags:'您的订单由京东【成都祥福分拣中心】准备送往【成都光华营业部】',time:'2022-08-07 17:05:40'},
|
||
{tags:'您的订单在京东【成都祥福分拣中心】分拣完成',time:'2022-08-07 17:05:40'},
|
||
{tags:'您的订单由京东【成都青白江丰树接货仓】准备送往【成都祥福分拣中心】',time:'2022-08-07 17:05:40'},
|
||
{tags:'您的订单在京东【成都青白江丰树接货仓】分拣完成',time:'2022-08-07 17:05:40'}
|
||
];
|
||
this.handle = [
|
||
{tags:'打包完成',time:'2022-08-07 17:05:40'},
|
||
{tags:'扫描完成',time:'2022-08-07 17:05:40'},
|
||
{tags:'拣货完成',time:'2022-08-07 17:05:40'},
|
||
{tags:'您的订单已经打印完成',time:'2022-08-07 17:05:40'}
|
||
];
|
||
this.placed = [
|
||
{tags:'您的订单已经进入京东成都仓库准备出库',time:'2022-08-07 17:05:40'},
|
||
{tags:'您的订单预计2022-08-06 20:29开始处理，请您耐心等待',time:'2022-08-07 17:05:40'},
|
||
{tags:'温馨提示:您的订单预计8月7日09:00-15:00送达',time:'2022-08-07 17:05:40'},
|
||
{tags:'您提交了订单,请等待系统确认',time:'2022-08-07 17:05:40'}
|
||
];
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.background-red{
|
||
background-color: #da0005;
|
||
}
|
||
.background-grey{
|
||
background-color: #e5e5e5;
|
||
}
|
||
/* 搜索 */
|
||
.cargo-search-bg{
|
||
background-color: #ffffff;
|
||
width: 100%;
|
||
margin-bottom: 20rpx;
|
||
position: sticky;
|
||
left: 0;
|
||
z-index: 9;
|
||
}
|
||
.cargo-search{
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 60rpx;
|
||
border: 2rpx solid #eeeeee;
|
||
overflow: hidden;
|
||
}
|
||
.cargo-search>image{
|
||
width: 25rpx;
|
||
height: 25rpx;
|
||
margin: 0 10rpx 0 20rpx;
|
||
}
|
||
.cargo-search>.input{
|
||
width: calc(100% - 155rpx);
|
||
color: #666666;
|
||
}
|
||
.cargo-search>.submit-btn{
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100rpx;
|
||
height: 100%;
|
||
color: #ffffff;
|
||
border-radius: 0 29rpx 29rpx 0;
|
||
letter-spacing: 4rpx;
|
||
text-indent: 4rpx;
|
||
}
|
||
/* 详细 */
|
||
.cargo{
|
||
background-color: #ffffff;
|
||
}
|
||
.cargo-title{
|
||
margin: 10rpx 0 35rpx;
|
||
}
|
||
.address .icon{
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 42rpx;
|
||
height: 42rpx;
|
||
margin: 0 38rpx 0 10rpx;
|
||
color: #ffffff;
|
||
}
|
||
.address .txt{
|
||
align-items: center;
|
||
height: 42rpx;
|
||
}
|
||
.address .item{
|
||
width: calc(100% - 50rpx);
|
||
height: 61rpx;
|
||
margin-left: 30rpx;
|
||
border-left: 2rpx solid #e5e5e5;
|
||
}
|
||
.cargo-list .txt{
|
||
align-items: center;
|
||
height: 48rpx;
|
||
}
|
||
.cargo-list .icon{
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin: 0 34rpx 0 8rpx;
|
||
color: #ffffff;
|
||
}
|
||
.cargo-list .item{
|
||
width: calc(100% - 46rpx);
|
||
margin-left: 32rpx;
|
||
border-left: 2rpx solid #e5e5e5;
|
||
line-height: 1.5;
|
||
}
|
||
.cargo-list .item:last-child{
|
||
padding-bottom: 42rpx;
|
||
}
|
||
.cargo-list .item .point{
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
margin: 12rpx 53rpx 0 -7rpx;
|
||
}
|
||
.cargo-list .item .info{
|
||
width: calc(100% - 65rpx);
|
||
}
|
||
.cargo-list .item .cargo-time{
|
||
margin-top: 10rpx;
|
||
}
|
||
.placed-list .item:nth-last-of-type(2){
|
||
padding-bottom: 38rpx;
|
||
}
|
||
.placed-list .item:last-child{
|
||
padding-top: 0;
|
||
border-left: 2rpx solid rgba(229,229,229,0);
|
||
margin-top: -18rpx;
|
||
}
|
||
/* 底部图片 */
|
||
.cargo-img{
|
||
width: 100%;
|
||
}
|
||
.cargo-img>image{
|
||
width: 100%;
|
||
}
|
||
</style> |