user_mobile_front/src/pages/expressExpress.vue

<template>
    <div>
        <div class="content">
            <div class="jjlist">
                <div class="listinfo">
                    <div class="list_top">
                        <div class="list_top_left">
                            <img src="../assets/images/ad_icon1.png" alt="">
                            <div>
                                <p>寄件号：{{ ObjectVlaue.dispatchNo }}</p>
                                <p>收件人：{{ ObjectVlaue.recipient }} </p>
                                <p>收件人：{{ ObjectVlaue.phone }}</p>
                                <p>创建时间&nbsp：{{ ObjectVlaue.recordDate }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="info">
                <p>部门：{{ ObjectVlaue.departmentId }}</p>
                <p>收件人：{{ ObjectVlaue.recipient }}</p>
                <p>收件人手机：{{ ObjectVlaue.phone }}</p>
                <p>创建时间：{{ ObjectVlaue.recordDate }}</p>
                <p>快件类型：{{ ObjectVlaue.expressType === 1 ? '文件' : '物品' }}</p>
                <p>座位：{{ ObjectVlaue.sendSeat }}</p>
                <p>备注：{{ ObjectVlaue.remark == '' ? '无' : ObjectVlaue.remark }}</p>
            </div>

        </div>
    </div>
</template>

<script>
import { Toast, Dialog } from 'vant'
import { getExpressById } from '../api/index'
export default {
    data() {
        return {
            titlename: "查快递",
            item: {},
            mailDetail: {},//传过来的数据
            id: '',
            ObjectVlaue: {}
        }
    },
    created: function () {
        this.mailDetail = this.$route.query.item
        this.id = this.mailDetail.id
        console.log(this.mailDetail, ' this.mailDetail')
    },
    mounted() {
        this.getFindWithoutInfoById()
    },
    methods: {
        async getFindWithoutInfoById() {
            const res = await getExpressById({ id: this.id })
            this.ObjectVlaue = res.expressInfoById
            console.log(res)
        },
    }
}
</script>

<style scoped lang="less">
.content {
    padding: .2rem .33rem;
    font-size: .3rem;

    >p {
        font-size: .3rem;
        text-align: center;
        margin-bottom: .2rem;
    }

    .info {
        padding: .4rem;
        background: white;
        line-height: 200%;
        color: #666666;

        .pjinfo {
            margin-top: .1rem;
            border-top: .01rem solid #f0efef;
            padding-top: .1rem;
        }
    }

    .jjlist {
        font-size: .3rem;
        color: #999999;

        .listinfo {
            background: white;
            padding: .33rem .33rem .2rem;
            border-radius: .05rem;
            margin-bottom: .2rem;
            position: relative;

            .list_top {
                display: flex;
                justify-content: space-between;

                .list_top_left {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    img {
                        display: inline-block;
                        width: .9rem;
                        height: .9rem;
                        position: relative;
                        top: -.1rem;
                    }

                    div {
                        margin-left: .2rem;
                        display: inline-block;
                        line-height: 150%;

                        p:nth-of-type(1) {
                            font-weight: bold;
                            color: #333;
                        }

                        p:nth-of-type(2) {
                            color: #333;
                        }

                        p:nth-of-type(3) {
                            color: #333;
                        }

                        p:nth-of-type(4) {
                            font-size: .22rem;
                            color: #333;
                        }
                    }
                }

                >p {
                    font-size: .24rem;
                    color: #f5693d;
                    font-weight: bold;
                }
            }

            .fast {
                //background: url(../assets/images/status.png) no-repeat center;
                background-color: #00c4b8;
                background-size: 100% 100%;
                color: white;
                position: absolute;
                bottom: 0px;
                right: 0px;
                width: 1.1rem;
                height: .5rem;
                text-align: center;
                line-height: .5rem;
                font-size: .2rem;
            }

        }
    }
}

/deep/ .van-nav-bar__content {
    .van-nav-bar__title {
        font-size: 16px;
    }
}

/deep/.van-icon-arrow-left::before {
    color: #333;
    font-size: 16px;
}

/deep/.van-nav-bar__text {
    color: #333 !important;
    font-size: 16px;
}
</style>