shop4.3.57/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">
                            <!-- 同城配送 -->
                            <template v-if="order.send_type == 2">
                                <view class="dir-left-nowrap cross-center city-service">
                                    <image class="head" src="/static/image/icon/deliveryman.png"></image>
                                    <template v-if="deItem.city_name && deItem.city_mobile">
                                        <view class="info-box dir-top-nowrap box-grow-1">
                                            <view class="info-label">配送员</view>
                                            <view class="info">{{deItem.city_name}} {{deItem.city_mobile}}</view>
                                        </view>
                                        <view class="icon-box">
                                            <app-jump-button open_type="tel" :number="deItem.city_mobile">
                                                <image class="icon" src="/static/image/icon/store-tel.png"></image>
                                            </app-jump-button>
                                        </view>
                                        <!-- 第三方配送才有地图信息 -->
                                        <view v-if="deItem.send_type == 1" class="icon-box">
                                            <app-jump-button open_type="navigate" :url="'/pages/order/city-map/city-map?express_id=' + deItem.id">
                                                <image class="icon" src="/static/image/icon/see-location.png"></image>
                                            </app-jump-button>
                                        </view>
                                    </template>
                                    <template v-else>
                                        <view class="await-man">等待分配骑手</view>
                                    </template>
                                </view>
                            </template>
                            <!-- 快递配送 -->
                            <template v-else>
                                <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">
                                            <view v-for="express_no in deItem.expressNumList" :key="index">{{express_no}}</view>
                                        </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>
                            </template>
                        </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>

export default {
    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 && this.order.send_type != 2) {
                let express_no = expressInfo.expressNumList.join(",");
                return `/pages/order/express-detail/express-detail?express=${expressInfo.express}&customer_name=${expressInfo.customer_name}&express_no=${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};
    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-top: #{20rpx};
    }
}

.city-service {
    width: 100%;
    margin-bottom: 10#{rpx};

    .await-man {
        margin-left: #{12rpx};
        font-size: #{28rpx};
        color:#666666;
    }

    .info-box {
        margin-left: #{12rpx};

        .info-label {
            margin-bottom: #{10rpx};
            color: #999999;
            font-size: #{28rpx};
        }
        .info {
            color: #666666;
        }
    }

    .head {
        width: #{75rpx};
        height: #{75rpx};
    }

    .icon-box {
        padding: 0 #{40rpx};
        border-left: #{2rpx} solid #e2e2e2;

        .icon {
            width: #{45rpx};
            height: #{45rpx};
        }
    }
}
</style>