<template>  
 | 
    <view class="main_app"> 
 | 
        <view class="title_wrap"> 
 | 
            <view class="name" v-if="driverInfo.realname || driverInfo.username">{{ driverInfo.realname || driverInfo.username }},欢迎登录~</view> 
 | 
            <view class="name" v-else>请先登录</view> 
 | 
            <view class="btn" @click="loginOut">{{ 
 | 
                driverInfo.realname || driverInfo.username ? "账号解绑" : "去登录" 
 | 
            }}</view> 
 | 
        </view>  
 | 
        <view class="head_wrap">  
 | 
            <view class="search_box">  
 | 
                <image src="@/static/ic_search@2x.png" class="search" mode=""></image>  
 | 
                <input type="text" placeholder-class="placeholder9" v-model="param.transportCode" placeholder="搜索运输单号" @confirm="handleQuery" />  
 | 
            </view>  
 | 
        </view>  
 | 
        <!--  -->  
 | 
        <scroll-view scroll-y="true" class="scroll_Y" @scrolltolower="scrolltolower">  
 | 
            <view class="main_list">  
 | 
                <view class="item" v-for="item,index in list" :key="index">  
 | 
                    <view class="head">  
 | 
                        <view class="code">运输单号:{{item.transportCode}}</view>  
 | 
                        <view class="status" v-if="item.logisticsStatus == 0">待执行</view> 
 | 
                        <view class="status" v-if="item.logisticsStatus == 1">执行中(在途)</view> 
 | 
                        <view class="status" v-if="item.logisticsStatus == 2">完成(到货)</view>  
 | 
                    </view>  
 | 
                    <view class="content">  
 | 
                        <view class="line">  
 | 
                            <view class="la">物资类型:</view>  
 | 
                            <view class="val">{{item.materialType == 1 ? '成品' : '托盘'}}</view>  
 | 
                        </view>  
 | 
                        <view class="line">  
 | 
                            <view class="la">发货地:</view>  
 | 
                            <view class="val">{{item.startCityName || '-'}}</view>  
 | 
                        </view>  
 | 
                        <view class="line">  
 | 
                            <view class="la">到货地:</view>  
 | 
                            <view class="val">{{item.endCityName || '-'}}</view>  
 | 
                        </view>  
 | 
                    </view>  
 | 
                    <view class="footer">  
 | 
                        <view class="time">{{item.receiveDate}}</view>  
 | 
                        <view class="detail" @click="handleDetail(item)">查看详情</view>  
 | 
                    </view>  
 | 
                </view>  
 | 
                <view v-if="list.length === 0" style="text-align: center">  
 | 
                    <image src="@/static/empty.png" style="width: 320rpx; margin: 120px auto 0" mode="widthFix" />  
 | 
                    <view class="placeholder9 fs24">暂无数据</view>  
 | 
                </view>  
 | 
            </view>  
 | 
        </scroll-view>  
 | 
  
 | 
    </view>  
 | 
</template>  
 | 
  
 | 
<script>  
 | 
    import {  
 | 
        putTaskList, 
 | 
        logoutPost, 
 | 
        getUserInfo  
 | 
    } from '@/api'  
 | 
    import dayjs from 'dayjs';  
 | 
    export default {  
 | 
        data() {  
 | 
            return {  
 | 
                param: { 
 | 
                     
 | 
                },  
 | 
                list: [],  
 | 
                page: 1,  
 | 
                total: 0,  
 | 
  
 | 
                driverInfo: {}  
 | 
  
 | 
            };  
 | 
        },  
 | 
        onLoad(options) { 
 | 
            this.driverInfo = uni.getStorageSync('driverInfo') || {}  
 | 
            this.getList()  
 | 
        },  
 | 
        methods: {  
 | 
            handleQuery() {  
 | 
                this.page = 1  
 | 
                this.list = []  
 | 
                this.getList()  
 | 
            },  
 | 
            handleDetail(item) {  
 | 
                uni.navigateTo({  
 | 
                    url: '/pages/wdata/detail?id=' + item.id  
 | 
                })  
 | 
            },  
 | 
            scrolltolower() {  
 | 
                const {  
 | 
                    total,  
 | 
                    list  
 | 
                } = this  
 | 
                if (list.length < total) {  
 | 
                    this.page = this.page + 1  
 | 
                    this.getList()  
 | 
                } else {  
 | 
                    this.showToast('暂无更多数据')  
 | 
                }  
 | 
            },  
 | 
            getList() {  
 | 
                const {  
 | 
                    param,  
 | 
                    page  
 | 
                } = this  
 | 
                putTaskList({  
 | 
                    parameters: {  
 | 
                        ...param, 
 | 
                        driverTel: this.driverInfo.username  
 | 
                    },  
 | 
                    pager: {  
 | 
                        rows: 30,  
 | 
                        page  
 | 
                    }  
 | 
                }).then(res => {  
 | 
                    if (res.data && res.data.rows) {  
 | 
                        this.list = [...this.list, ...res.data.rows]  
 | 
                        this.total = res.data.totalCount  
 | 
                    }  
 | 
                })  
 | 
            }, 
 | 
            loginOut() { 
 | 
                logoutPost({ 
 | 
                    isH5: 1 
 | 
                }).then(res => { 
 | 
                    this.$store.commit('empty') 
 | 
                    setTimeout(() => { 
 | 
                        let str = 'https://atwl.ahzyssl.com/zhyq_h5/#/pages/wdata/home' 
 | 
                        window.location.href = str 
 | 
                    }, 300) 
 | 
                }) 
 | 
            }  
 | 
        }  
 | 
    }  
 | 
</script>  
 | 
  
 | 
<style lang="scss">  
 | 
    page {  
 | 
        background: #F7F7F7;  
 | 
    } 
 | 
    .main_app{ 
 | 
        display: flex; 
 | 
        flex-direction: column; 
 | 
        overflow: hidden; 
 | 
        padding: 10rpx 30rpx 0; 
 | 
    } 
 | 
    .title_wrap { 
 | 
        display: flex; 
 | 
        justify-content: space-between; 
 | 
        align-items: center; 
 | 
        background-color: #fff; 
 | 
        margin: -10rpx -30rpx 0; 
 | 
        padding: 20rpx 30rpx 6rpx; 
 | 
        height: 90rpx; 
 | 
        .name { 
 | 
            font-weight: 600; 
 | 
            font-size: 34rpx; 
 | 
            color: #222222; 
 | 
        } 
 | 
     
 | 
        .btn { 
 | 
            width: 144rpx; 
 | 
            height: 56rpx; 
 | 
            border-radius: 36rpx; 
 | 
            border: 1rpx solid #B2B2B2; 
 | 
            font-size: 26rpx; 
 | 
            color: #666666; 
 | 
            display: flex; 
 | 
            justify-content: center; 
 | 
            align-items: center; 
 | 
        } 
 | 
    }  
 | 
    .head_title{ 
 | 
        color: $uni-color-primary; 
 | 
        text-decoration-line: underline; 
 | 
        margin-top: 20rpx; 
 | 
    }  
 | 
    .head_wrap {  
 | 
        display: flex;  
 | 
        align-items: center;  
 | 
        width: 750rpx;  
 | 
        background-color: #fff;  
 | 
        margin: 0 -30rpx;  
 | 
        padding: 12rpx 30rpx;  
 | 
  
 | 
        .search_box {  
 | 
            flex: 1;  
 | 
            width: 572rpx;  
 | 
            height: 76rpx;  
 | 
            background: #F7F7F7;  
 | 
            border-radius: 38rpx;  
 | 
            padding-left: 30rpx;  
 | 
            display: flex;  
 | 
            align-items: center;  
 | 
  
 | 
            input {  
 | 
                flex: 1;  
 | 
                height: 60rpx;  
 | 
            }  
 | 
  
 | 
            .search {  
 | 
                width: 28rpx;  
 | 
                height: 28rpx;  
 | 
                margin-right: 16rpx;  
 | 
            }  
 | 
        }  
 | 
  
 | 
        .right {  
 | 
            display: flex;  
 | 
            align-items: center;  
 | 
            margin-left: 30rpx;  
 | 
  
 | 
            image {  
 | 
                width: 28rpx;  
 | 
                height: 28rpx;  
 | 
            }  
 | 
        }  
 | 
    }  
 | 
  
 | 
    .scroll_Y {  
 | 
        background-color: #f7f7f7;  
 | 
        height: calc(100vh - 220rpx); 
 | 
        margin-top: 20rpx;  
 | 
        .main_list {  
 | 
            width: 750rpx;  
 | 
            margin: 0 -30rpx;  
 | 
            padding: 0rpx 30rpx 20rpx;  
 | 
  
 | 
            .item {  
 | 
                border-radius: 8rpx;  
 | 
                margin-bottom: 20rpx;  
 | 
                padding: 0 30rpx;  
 | 
                background-color: #fff;  
 | 
  
 | 
                .head {  
 | 
                    display: flex;  
 | 
                    justify-content: space-between;  
 | 
                    align-items: center;  
 | 
                    padding: 0 30rpx;  
 | 
                    width: 690rpx;  
 | 
                    height: 84rpx;  
 | 
                    margin: 0 -30rpx;  
 | 
                    background: linear-gradient(270deg, #FEFEFF 0%, #E1F7FE 100%);  
 | 
  
 | 
                    .code {  
 | 
                        font-weight: 500;  
 | 
                        font-size: 32rpx;  
 | 
                        color: #222222;  
 | 
                    }  
 | 
  
 | 
                    .status {  
 | 
                        color: $uni-color-primary;  
 | 
                    }  
 | 
                }  
 | 
  
 | 
                .content {  
 | 
                    padding: 20rpx 0rpx;  
 | 
                    border-bottom: 1rpx solid #E5E5E5;  
 | 
                    margin-bottom: 20rpx;  
 | 
  
 | 
                    .line {  
 | 
                        display: flex;  
 | 
                        margin-bottom: 16rpx;  
 | 
                        font-size: 26rpx;  
 | 
  
 | 
                        .la {  
 | 
                            color: #666666;  
 | 
                        }  
 | 
  
 | 
                        .val {}  
 | 
  
 | 
                        &:nth-last-child(1) {  
 | 
                            margin-bottom: 0;  
 | 
                        }  
 | 
                    }  
 | 
                }  
 | 
  
 | 
                .footer {  
 | 
                    display: flex;  
 | 
                    justify-content: space-between;  
 | 
                    align-items: center;  
 | 
                    font-size: 26rpx;  
 | 
                    color: #999999;  
 | 
                    padding-bottom: 20rpx;  
 | 
  
 | 
                    .detail {  
 | 
                        width: 168rpx;  
 | 
                        height: 60rpx;  
 | 
                        background: #FFFFFF;  
 | 
                        border-radius: 30rpx;  
 | 
                        border: 1rpx solid $uni-color-primary;  
 | 
                        color: $uni-color-primary;  
 | 
                        display: flex;  
 | 
                        align-items: center;  
 | 
                        justify-content: center;  
 | 
                        font-size: 26rpx;  
 | 
  
 | 
                    }  
 | 
                }  
 | 
            }  
 | 
        }  
 | 
    }  
 | 
  
 | 
  
 | 
    .modal {  
 | 
        .modal_title {  
 | 
            height: 112rpx;  
 | 
            display: flex;  
 | 
            align-items: center;  
 | 
            justify-content: center;  
 | 
            font-weight: 500;  
 | 
            font-size: 32rpx;  
 | 
            color: #222222;  
 | 
        }  
 | 
  
 | 
        .line {  
 | 
            display: flex;  
 | 
            justify-content: space-between;  
 | 
            align-items: center;  
 | 
            font-size: 30rpx;  
 | 
            height: 98rpx;  
 | 
            padding: 0 28rpx;  
 | 
            border-bottom: 1rpx solid #E5E5E5;  
 | 
  
 | 
            .val {  
 | 
                display: flex;  
 | 
                justify-content: flex-end;  
 | 
                flex: 1;  
 | 
  
 | 
                input {  
 | 
                    text-align: right;  
 | 
                    width: 100%;  
 | 
                }  
 | 
            }  
 | 
        }  
 | 
  
 | 
        .btns {  
 | 
            display: flex;  
 | 
            justify-content: space-between;  
 | 
            padding: 30rpx;  
 | 
  
 | 
            .btn {  
 | 
                width: 336rpx;  
 | 
                height: 88rpx;  
 | 
                border-radius: 44rpx;  
 | 
                border: 1rpx solid $uni-color-primary;  
 | 
                color: $uni-color-primary;  
 | 
                display: flex;  
 | 
                justify-content: center;  
 | 
                align-items: center;  
 | 
                font-size: 32rpx;  
 | 
            }  
 | 
  
 | 
            .sub {  
 | 
                background-color: $uni-color-primary;  
 | 
                color: #fff;  
 | 
            }  
 | 
        }  
 | 
    }  
 | 
</style> 
 |