yihuo/pages/express/index.vue

<template>
    <page title="物流信息" ref="pageRef"  nav-color="#fff">
      <view class="wrapper">


        <view v-if="data" class="dataWrapper" style="background: #fff">
            <view class="marginX10 marginT14 padding14 flex-align-between  radius6" style="background: #fff">
                <view>{{data.expName}}</view>
                <view>{{data.number}}</view>
            </view>
            <view class="paddingB20  font2" v-if="data.list && data.list.length > 0">
                <view class="cell" v-for="(item, index) in data.list" :key="item.version">
                    <view class="line" :style="{top: index === 0 ? '50%' : '0', bottom: index === list.length - 1 ? '50%' : '0'}">
                    </view>
                    <view class="translateY" :class="[index === 0 ? 'dot' : 'dot2']"></view>
                    <view class="content">
                        <view class=" font4">{{item.status}}</view>
                        <view class=" font2 paddingT10 flex-align-between">
                            <view style="opacity: 0.5">{{item.time}}</view>
                        </view>
                    </view>
                </view>
            </view>
            <empty v-if="isEmpty" :top="200" />
        </view>
      </view>
    </page>
</template>
<script>
import empty from '@/components/empty'
export default {
    components: { empty },
    data() {
        return {
            data: null,
            isEmpty: false
        }
    },
    onLoad(options) {
        this.type = options.type
        this.tradeNo = options.tradeNo
        this.packageId = options.packageId
    },
    mounted() {
        this.getData(true)
    },
    onPullDownRefresh() {
        this.getData()
    },
    methods: {
        async getData(loading = false) {
            let res = null
            if (this.type == 1) {
                res = await this.$service.mall.express(this.tradeNo, this.packageId, loading)
            } else {
                res = await this.$service.award.express(this.tradeNo, this.packageId, loading)
            }
            this.isEmpty = res && (!res.list || res.list.length === 0)
            this.data = res
            uni.stopPullDownRefresh()
        }
    }
}
</script>
<style>

</style>
<style lang="scss" scoped>
.cell {
    margin: 0 30rpx;
    padding: 15rpx 0;
    position: relative;
    .line {
        position: absolute;
        left: 7rpx;
        width: 2rpx;
        background: #D8D8D8;
    }
    .dot {
        width: 16rpx;
        height: 16rpx;
        border-radius: 8rpx;
        background: #D8D8D8;
        position: absolute;
        left: 0;
    }
    .dot2 {
        width: 14rpx;
        height: 14rpx;
        border-radius: 8rpx;
        border: 2rpx dashed #D8D8D8;
        background: #D8D8D8;
        position: absolute;
        left: 0;
    }
    .content {
        background: #fff;
        padding: 24rpx 0 0 20px;
        border-radius: 8rpx;
    }
}
.wrapper{
  padding: 0 20rpx;
  .dataWrapper{
    background-color: #fff;
    border-radius: 20rpx;
  }
}
</style>