football/pages/order/express-list/express-list.vue

<template>
    <app-layout>
        <view v-if="is_show" class='express-list-box dir-top-nowrap'>
            <view class="top-box cross-center">
                <view class="title">{{order.detailExpress.length}}个包裹已发出</view>
            </view>
            <view class="express-box" v-for="deItem in order.detailExpress" :key="item.id">
                <app-jump-button
                        :url="getPageUrl(deItem, deItem.expressRelation[0].orderDetail.goods_info.goods_attr.cover_pic)">
                    <view style="width: 100%">
                        <view class="dir-left-nowrap express-item">
                            <view v-if="deItem.send_type == 1" class="dir-top-nowrap box-grow-1 express-info">
                                <view class="dir-left-nowrap item">
                                    <view class="box-grow-0">快递公司：</view>
                                    <view class="box-grow-1">{{deItem.express}}</view>
                                </view>
                                <view class="dir-left-nowrap item">
                                    <view class="box-grow-0">物流单号：</view>
                                    <view class="box-grow-1">{{deItem.express_no}}</view>
                                </view>
                                <view class="dir-left-nowrap item">
                                    <view class="box-grow-0">商家留言：</view>
                                    <view class="box-grow-1">{{deItem.merchant_remark}}</view>
                                </view>
                            </view>
                            <view class="box-grow-1 express-info" v-else>物流信息：{{deItem.express_content}}</view>
                            <view v-if="deItem.send_type == 1" class="cross-center box-grow-0">
                                <app-image width="12rpx" height="22rpx"
                                           imgSrc="/static/image/icon/arrow-right.png"></app-image>
                            </view>
                        </view>
                        <view class="dir-left-wrap">
                            <view class="image" v-for="erItem in deItem.expressRelation" :key="erItem.id">
                                <app-image width="124rpx" height="124rpx"
                                           :imgSrc="erItem.orderDetail.goods_info.goods_attr.cover_pic"></app-image>
                            </view>
                        </view>
                        <view class="goods-num">共{{deItem.goods_num}}件商品</view>
                    </view>
                </app-jump-button>
            </view>
        </view>
    </app-layout>
</template>

<script>
    import AppImage from "../../../components/basic-component/app-image/app-image.vue";
    import AppJumpButton from "../../../components/basic-component/app-jump-button/app-jump-button.vue";

    export default {
        components: {
            AppJumpButton,
            AppImage
        },
        data() {
            return {
                is_show: false,
                orderId: null,
                order: [],
            }
        },
        methods: {
            getOrderDetail() {
                this.$showLoading();
                this.$request({
                    url: this.$api.order.order_express_list,
                    data: {
                        order_id: this.orderId,
                    }
                }).then(response => {
                    this.$hideLoading();
                    this.is_show = true;
                    if (response.code === 0) {
                        this.order = response.data.order;
                    } else {
                        uni.showModal({
                            title: '',
                            content: response.msg,
                            showCancel: false,
                        });
                    }
                }).catch(() => {
                    this.$hideLoading();
                });
            },
            getPageUrl(expressInfo, coverPic) {
                if (expressInfo && expressInfo.send_type == 1) {
                    return `/pages/order/express-detail/express-detail?express=${expressInfo.express}&customer_name=${expressInfo.customer_name}&express_no=${expressInfo.express_no}&cover_pic=${coverPic}`
                } else {
                    return '';
                }
            },
        },
        onLoad(options) {
            this.orderId = options.order_id
            this.getOrderDetail();
        }
    }
</script>

<style lang="scss" scoped>
    .top-box {
        width: 100%;
        height: #{100rpx};
        background: #feeeee;
        margin-bottom: #{20rpx};
        .title {
            margin-left: #{24rpx};
            color: #ff4544;
            font-size: #{28rpx};
        }

    }

    .express-box {
        padding: #{32rpx} #{24rpx} #{20rpx};
        margin-bottom: #{20rpx};
        background: #ffffff;
        .express-info {
            font-size: #{28rpx};
            margin-bottom: #{20rpx};
            color: #353535;
            .item {
                margin-bottom: #{24rpx};
            }
        }
        .goods-num {
            font-size: #{24rpx};
            color: #999999;
            margin: #{20rpx} 0;

        }
        .image {
            margin-right: #{20rpx};
            margin-bottom: #{20rpx};
        }
    }
</style>