运单查询

liukangdong

2024-10-09 6eef22c164b57c435f27f6f5e4b9d2a67300e8e9

运单查询

 h5/pages.json

@@ -447,6 +447,13 @@
            {
                "navigationBarTitleText" : "入园须知"
            }
        },
        {
            "path" : "pages/waybill/waybillDetail",
            "style" : 
            {
                "navigationBarTitleText" : "运单查询"
            }
        }

    ],

    "subPackages": [


 h5/pages/waybill/waybillDetail.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,207 @@
<template>

    <view class="main_app">

        <image src="@/static/driver/wuliuche_bg@2x.png" class="main_bg"></image>

        <view class="form_wrap">

            <view class="item">

                <view class="label">合同编号</view>

                <view class="line">

                    <view class="input_wrap"><input v-model="param.aa" placeholder="请输入合同编号" placeholder-class="place" type="text" /></view>

                </view>

            </view>
            <view class="item">
                <view class="label">需方编号</view>
                <view class="line">
                    <view class="input_wrap"><input v-model="param.aa" placeholder="请输入合同中需方编号" placeholder-class="place" type="text" /></view>
                </view>
            </view>
            <view class="item">
                <view class="label">验证码</view>
                <view class="line">
                    <view class="input_wrap"><input v-model="param.aa" placeholder="请输入验证码" placeholder-class="place" type="text" /></view>
                    <image src="" class="auth_code" mode=""></image>
                </view>
            </view>
            <view class="query">查询</view>

        </view>

        <view class="title">查询结果</view>
        <view class="drive_info">
            <view class="title">合同编号</view>
            <view class="line">
                <view class="label">运输车辆</view>
                <view class="val">11</view>
            </view>
            <view class="line">
                <view class="label">司机信息</view>
                <view class="val">11</view>
            </view>
            <view class="line">
                <view class="label">车辆位置</view>
                <view class="val">11</view>
            </view>
        </view>
        <view class="drive_info">
            <view class="title">物流信息</view>
            <view class="item">
                <view class="h2">
                    <view class="icon_wrap"><image src="@/static/driver/ic_mostarted.png" class="icon"></image></view>
                    <view class="text">到达卸货地</view>
                </view>
                <view class="time">202422222222</view>
                <view class="separate"></view>
            </view>
            <view class="item">
                <view class="h2 h1">
                    <view class="icon_wrap"><image src="@/static/driver/ic_dangqian.png" class="icon"></image></view>
                    <view class="text">到达卸货地</view>
                </view>
                <view class="time">202422222222</view>
                <view class="separate separate_ac"></view>
            </view>
            <view class="item">
                <view class="h2">
                    <view class="icon_wrap"><image src="@/static/driver/ic_mostarted.png" class="icon"></image></view>
                    <view class="text">到达卸货地</view>
                </view>
                <view class="time">202422222222</view>
                <view class="separate"></view>
            </view>
        </view>
    </view>

</template>



<script>

    export default {

        data() {

            return {

                param: {}

            };

        }

    }

</script>



<style lang="scss" scoped>

    .form_wrap {
        width: 690rpx;
        height: 646rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(39,155,170,0.16);
        border-radius: 16rpx;
        padding: 10rpx 30rpx;
        margin-bottom: 40rpx;
        .item{
            height: 154rpx;
            padding: 30rpx 0 8rpx;
            border-bottom: 1rpx solid #E5E5E5;
            .label{}
            .line{
                display: flex;
                .input_wrap{
                    padding: 18rpx 0;
                    flex: 1;
                    .place{
                        color: #999999;
                        font-size: 28rpx;
                    }
                }
                .auth_code{
                    width: 160rpx;
                    height: 64rpx;
                    border: 2px solid;
                }
            }
        }
        .query{
            width: 630rpx;
            height: 88rpx;
            background: $uni-color-primary;
            border-radius: 44rpx;
            margin-top: 40rpx;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30rpx;
        }
    }

    .main_app{
        padding-top: 218rpx;
        .title{
            font-weight: 500;
            font-size: 32rpx;
            margin-bottom: 30rpx;
        }
        .drive_info{
            background: #F7F7F7;
            border-radius: 16rpx;
            padding: 30rpx;
            margin-bottom: 20rpx;
            .line{
                display: flex;
                margin-bottom: 24rpx;
                .label{
                    color: #666666;
                    margin-right: 40rpx;
                }
                .val{
					
                }
            }
            .item{
                position: relative;
                color: #999999;
                margin-bottom: 30rpx;
                .h2{
                    display: flex;
                    align-items: center;
                    height: 48rpx;
                    .icon_wrap{
                        width: 48rpx;
                        margin-right: 30rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        .icon{
                            width: 24rpx;
                            height: 24rpx;
                            position: relative;
                            z-index: 2;
                        }
                    }
                }
                .h1{
                    .icon_wrap{
                        .icon{
                            width: 48rpx;
                            height: 48rpx;
                        }
                    }
                }
                .time{
                    padding-left: 78rpx;
                    font-size: 24rpx;
                    margin-top: 6rpx;
                }
                .separate{
                    height: calc( 100% );
                    width: 2rpx;
                    border: 2rpx dashed red;
                    position: absolute;
                    left: 22rpx;
                    top: 24rpx;
                    z-index: 1;
                }
                .separate_ac{
                    top: 48rpx;
                }
            }
        }
    }

    .main_bg {
        position: absolute;
        left: 0;
        top: 0;

        width: 100%;
        z-index: -1;
        color: #222222;

    }

</style>

 h5/static/driver/ic_dangqian.png

 h5/static/driver/ic_mostarted.png

 h5/static/driver/wuliuche_bg@2x.png