<template>
    <view>
        <!-- 物流状态 start -->
        <view class="state" v-if="logistic.length > 0">
            <view class="take">
                <view class="take-tips">
                    收
                </view>
                <view class="take-text">
                    收货地址：发接口返回绝对是放假客户端上看见发货数据库大黄蜂教科书的浩丰科技
                </view>
            </view>
            <view class="list">
                <!-- v-for="(item, index) in logistic" :key="index" -->
                <view class="list-label">
                    <view class="list-name">
                        <text>发货中</text> 2020-15-12
                    </view>
                    <view class="list-time">
                        华东师范邯郸市科技发货圣诞节客服
                    </view>
                </view>
            </view>
        </view>
        <view class="pack-center" v-else>
            <image src="../../static/icons/store_logistic.png" mode="aspectFill"></image>
            <view>{{message}} </view>
        </view>
    </view>
</template>

<script>
    import { deliverLogistic } from '@/apis/interfaces/store'
    export default {
        data() {
        	return {
        		message : '',
                logistic: ''
        	}
        },
        created() {
            deliverLogistic(this.$Route.query.id).then(res=>{
                console.log(res)
            }).catch(err => {
                this.message = err.message
			})
        },
        methods: {
        	
        }
    }
</script>

<style lang="scss" scoped>
    page {
        background-color: #f6f6f6;
    }
    
    // 物流状态
    .state {
        background-color: $uni-bg-color;
        margin-top: $margin;
        padding: $padding;
        font-size: $title-size-m;
        color: $text-gray;
        .take {
            display: flex;
            padding-bottom: $padding;
            position: relative;
            &::before {
                position: absolute;
                content: '';
                left: $uni-img-size-sm / 3 + 2;
                top: $margin;
                background-color: $uni-text-color-grey;
                width: 2rpx;
                height: 100%;
            }
            .take-tips {
                background-color: $mian-color;
                width: $uni-img-size-sm;
                height: $uni-img-size-sm;
                border-radius: $uni-border-radius-circle;
                font-size: $title-size-sm;
                transform: scale(.9);
                text-align: center;
                color: $uni-text-color-inverse;
                margin-top: 10rpx;
                margin-left: -4rpx;
            }
            .take-text {
                margin-left: $margin;
                line-height: 40rpx;
                margin-top: $margin - 10;
                width: calc(100% - #{$uni-img-size-sm} + #{$margin});
            }
        }
        .list {
            font-size: $title-size-sm;
            .list-label {
                padding-left: $padding * 3;
                padding-bottom: $padding;
                padding-top: $padding - 10;
                position: relative;
                &::after {
                    position: absolute;
                    content: '';
                    left: $uni-img-size-sm / 3 - 4;
                    top: $margin;
                    background-color: $uni-text-color-grey;
                    width: $uni-img-size-sm / 3;
                    height: $uni-img-size-sm / 3;
                    border-radius: $uni-border-radius-circle;
                    z-index: 9;
                }
                &::before {
                    position: absolute;
                    content: '';
                    left: $uni-img-size-sm / 3 + 2;
                    top: $margin;
                    background-color: $uni-text-color-grey;
                    width: 2rpx;
                    height: 100%;
                }
                &:first-child {
                    color: $mian-color;
                }
                &:last-child::before {
                    background-color: $uni-bg-color;
                }
                &:first-child::after {
                    background-color: $mian-color;
                }
                .list-name {
                    margin-bottom: $margin - 10;
                    text {
                        font-weight: 600;
                        padding-right: $padding;
                    }
                }
                .list-time {
                     font-size: $uni-font-size-sm;
                     line-height: 34rpx;
                }
            }
        }
    }
    
    // 暂无订单
    .pack-center {
        text-align: center;
        font-size: $title-size-sm;
        color: $text-gray;
        padding-top: 50%;
        image {
            width: $uni-img-size-lg * 2;
            height:$uni-img-size-lg * 2;
            margin: 0 auto $margin;
        }
    }
</style>
