<!--
 * @Author: euzhi
 * @Description: 查看物流
-->
<template>
<view class="appCotent">
<div class="carTime">
    <div class="time__content">
        <div class="time__top">
            <div>
                <image src="@/static/shop/item.jpg" />
            </div>
            <div>
                <div>
                    运输中{{waybillInfo.waybillStatus}}物流最新状态{{waybillInfo.waybillNewDetail}}
                </div>
                <div>
                    物流单号:{{waybillInfo.waybillNo}}
                </div>
                <div class="time__btn btn__one">
                    <span>复制</span>
                </div>
            </div>
        </div>
        <div class="get__car">
            <div class="car__img">
                <image src="@/static/my/git.png" alt="" />
            </div>
            <div class="one__text">
                【收货地址】北京市朝阳区梨园小区2收货地址北京市朝阳区梨园小区2
            </div>
        </div>
		<div v-for="(item,index) in waybillInfo.details">
			<div class="time__list">
				<div class="item">
					<div class="item__img">
						<image src="@/static/my/car-time1.png" alt="" />
					</div>
					<div class="one__text item__title">
						{{item.remark}}
						<div class="time">2020-06-01 12:00:00</div>
					</div>
				</div>
			</div>
		</div>
        
        <div class="time__list">
            <div class="item">
                <div class="item__img">
                    <image src="@/static/my/car-time2.png" alt="" />

                </div>
                <div class="one__text item__title active__title">
                    到达广东深圳公司，快件将很快进行派送
                    <div class="time">2020-06-01 12:00:00 </div>
                </div>
            </div>
        </div>
        <div class="time__list">
            <div class="item">
                <div class="item__img">
                    <image src="@/static/my/car-time1.png" alt="" />

                </div>
                <div class="one__text item__title">
                    在分拨中心广东深圳公司进行卸车扫描
                    <div class="time">2020-06-01 12:00:00 </div>
                </div>
            </div>
        </div>
        <div class="time__list">
            <div class="item">
                <div class="item__img">
                    <image src="@/static/my/car-time1.png" alt="" />

                </div>
                <div class="one__text item__title">
                    在北京市进行下级地点扫描
                    <div class="time">2020-06-01 12:00:00 </div>
                </div>
            </div>
        </div>
    </div>
</div>
</view>
</template>

<script>
export default {
    data() {
        return {
			//订单id
			orderId: '',
			//运单详细信息
			waybillInfo: {},
        }
    },
	methods: {
		//获得订单详情
		getWaybillInfo(){
			let opts = { url: '/app/user/order/waybill/' + this.orderId, method: 'get' };
			this.http.httpTokenRequest(opts, {}).then(res => {
				if (res.data.code == 200) {
					this.waybillInfo = res.data.data
				}
			})
		},
	},
	onLoad(e) {
		this.orderId = e.orderId
	},
	onShow() {
		this.getWaybillInfo()
	},
}
</script>

<style lang="scss" scoped>
.carTime {
    padding: 40rpx 0;

    .time__content {
        padding: 40rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
        border-radius: 20rpx;

        .time__list {
            margin-bottom: 40rpx;

            .item {
                display: flex;
                align-items: center;
                margin: 20rpx 0;

                .item__img {
                    width: 64rpx;
                    height: 64rpx;
                    margin-right: 30rpx;

                    image {
                        width: 64rpx;
                        height: 64rpx;
                    }
                }

                .item__title {
                    font-size: 26rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #999999;

                    >div {
                        font-size: 22rpx;
                        font-family: DIN;
                        font-weight: 500;
                        color: #999999;
                    }
                }

                .active__title {
                    color: #333;
                }
            }
        }

        .time__top {
            display: flex;
            align-items: center;
            position: relative;
            padding-bottom: 40rpx;
            border-bottom: 1rpx solid rgba(0, 0, 0, .1);

            >div:nth-of-type(1) {
                image {
                    width: 110rpx;
                    height: 110rpx;
                    border-radius: 10rpx;
                }
            }

            >div:nth-of-type(2) {
                margin-left: 30rpx;

                >div:nth-of-type(1) {
                    font-size: 34rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #00AD42;
                }

                >div:nth-of-type(2) {
                    font-size: 28rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #999999;
                }

                >div:nth-of-type(3) {
                    position: absolute;
                    font-size: 24rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #999999;
                    border: 1rpx solid #999999;
                    padding: 2rpx 5rpx;
                    display: inline-block;
                    right: 0rpx;
                    bottom: 60rpx;
                    border-radius: 4rpx;
                }
            }
        }

        .get__car {
            display: flex;
            align-items: center;
            margin: 20rpx 0;
            border-bottom: 1rpx solid rgba(0, 0, 0, .1);
            padding-bottom: 20rpx;

            .car__img {
                width: 64rpx;
                height: 64rpx;
                margin-right: 30rpx;

                image {
                    width: 64rpx;
                    height: 64rpx;
                }
            }

            >div:nth-of-type(2) {
                font-size: 32rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #333333;
            }
        }
    }
}
</style>
