更新

MrShi

2025-03-12 69a1b3bf45738f048361ee4ccb6bdc64fce35720

 h5/pages/wdata/list.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,362 @@
<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>