Lee
/
shjz-applet
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
shjz-applet/pages/cargo/cargo.vue

288 lines
10 KiB
Vue
Raw Normal View History

lee-0812
2022-08-12 10:25:42 +00:00
<template>
现有接口对接完成
2022-08-18 07:26:31 +00:00
<view class="pad-x100">
lee-0812
2022-08-12 10:25:42 +00:00
<!-- 头部 -->
<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>