dnyAppTruck/pages/index/workTable.vue

<template>
  <view class="wrap">
    <view class="orderMonitor">
      <u-row class="userinfo-topbox" gutter="16" justify="center">
        <u-col  text-align="left" style="margin: 1px;">
          <view style="color: #CCFFFF;padding-left: 30rpx">{{ driverName }}</view>
          <view style="color: #CCFFFF;padding-left: 30rpx">{{ defaultTruckCode }}</view>
        </u-col>
      </u-row>
    </view>
    <view class="workbench-title">常用应用</view>
    <view class="toolbar">
      <u-grid class="grid" :col="4" :border="false">
        <u-grid-item @click="navTo('/pages/feedback/scancodeCar')" :index="0">
          <view class="home-icon icon-color02">
            <i class="iconfont icon-cangpeitubiao_huanhuorukutuihuoruku"></i>
          </view>
          <view class="grid-text">扫码装车</view>
        </u-grid-item>
        <u-grid-item @click="navTo('/pages/feedback/print')" :index="1">
          <view class="home-icon icon-color02">
            <i class="iconfont icon-fahuo"></i>
          </view>
          <view class="grid-text">支线交接</view>
        </u-grid-item>
        <u-grid-item @click="navTo('/pages/feedback/signOrderCode')" :index="2">
          <view class="home-icon icon-color02">
            <i class="iconfont icon-kechengfankui"></i>
          </view>
          <view class="grid-text">扫码签收</view>
        </u-grid-item>
      </u-grid>
    </view>
    <view class="workbench-title">查询统计</view>
    <view class="toolbar">
      <u-grid class="grid" :col="4" :border="false">
        <u-grid-item @click="navTo('/pages/order/recordOrder')" :index="0">
          <view class="home-icon icon-color01">
            <i class="iconfont icon-lishigongdan"></i>
          </view>
          <view class="grid-text">签收记录</view>
        </u-grid-item>
        <u-grid-item @click="navTo('/pages/order/freightOrder')" :index="1">
          <view class="home-icon icon-color01">
            <i class="iconfont icon-tongji2"></i>
          </view>
          <view class="grid-text">运费查询</view>
        </u-grid-item>
      </u-grid>
    </view>

  </view>
</template>

<script>
import request from '@/common/libs/request.js';

export default {

  data() {
    return {
      driverName:"",
      defaultTruckCode: "",
      orderData: [],
      cardData: "",
      listData: {
        total: 0,
        page: 1,
        pageSize: 20
      },
    }
  },
  mounted: function (option) {
    this.initData()
    uni.setNavigationBarTitle({
      title:'工作台'
    })
  },

  methods: {
    initData() {
      let _that = this;
      request.httpPost("/dnyDriver/getDriverInfo", {}).then(res => {
        // console.log("res33333",res);
        if (res.httpCode == 200) {
          uni.setStorageSync("idDefaultTruck", res.data.idDefaultTruck);
          _that.defaultTruckCode = res.data.defaultTruckCode;
          _that.driverName = res.data.driverName;
        } else {
          uni.showToast({
            title: res.msg,
            icon: "error"
          })
        }
      });
    },
    navTo(url) {
      uni.navigateTo({
        url: url
      });
    },
    pullDownRefresh: function() {
      this.initData();
    }
  }
}
</script>

<style lang="scss">
.orderMonitor {
  height: 190 upx;
  border-radius: 4 upx;
  color: #F0F0F0;
  // background-image: linear-gradient(to right, #ffffff 0%, #ffffff 100%);
  background-image: linear-gradient(to right, #006699 0%, #6699CC 100%);
  border: #ffffff;
  padding: 16 upx;
  margin: 16 upx;
  box-shadow: 4 upx 4 upx 6 upx rgba(102, 153, 204, 0.4);
}

.userinfo-topbox {
  padding: 4px 8px;
  color: #000000;

  .number {
    font-size: 14px;
    font-weight: bold;
    color: #FF9900;
  }
}

.userinfo-infobox {
  color: #000000;
  background-image: linear-gradient(to right, #CCCCCC 0%, #CCCCCC 100%);

  .number {
    font-size: 12px;
  }
}

.wrap {
  background: #FFFFFF;

  .search {
    padding: 20 rpx 20 rpx 0;
    background: #f8f8f8;
    height: 105 rpx;
  }

  .scroll-list {
    height: calc(100vh - var(--window-top) - var(--window-bottom) - 105rpx); // 105rpx 为 .search 的高度
    width: 100%;

    .loadmore {
      padding: 30 rpx;
    }
  }

  .box {
    padding-bottom: 10 rpx;

    .item {
      margin: 0 20 rpx 20 rpx;
      padding: 8 rpx 20 rpx;
      border-radius: 20 rpx;
      box-sizing: border-box;
      background-color: #fff;
      font-size: 28 rpx;

      .title {
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        padding-left: 15 rpx;
        align-items: center;

        .text {
          margin: 0 20 rpx;
          font-size: 35 rpx;
          font-weight: bold;
        }

      }
    }

  }

  .list {

    .u-cell-item-box {

      .u-swipe-content {
        width: 750 rpx;
      }

      .u-cell_title {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        min-width: 655 rpx;
      }

      .u-border-bottom:last-child:after {
        border-bottom: 0;
      }
    }
  }

  .form {
    display: flex;
    flex-direction: column;
    padding: 20 rpx 30 rpx;

    .u-cell-item-box {
      border-radius: 20 rpx;
    }
  }

  .form-footer {
    display: flex;
    margin: 10 rpx;
    padding-bottom: 30 rpx;

    .btn {
      flex: 1;
      margin: 20 rpx;
    }
  }

  .u-cell-box {

    .u-cell {
      font-size: 30 rpx;
    }

    .u-cell_title {
      font-size: 30 rpx;
    }

    .u-cell__left-icon-wrap {
      margin-right: 18 rpx;
    }
  }
}

.workbench-title {
  font-size: 38rpx;
  font-weight: bold;
  color: #333333;
  padding: 15rpx 44rpx;
  display: inline-block;

}


.grid {

  .grid-icon {
    color: #666;
  }

  .grid-text {
    font-size: 24 rpx;
    padding: 15 rpx;
    color: #202328;
  }
}

.toolbar {

  background-color: #fff;
  padding-bottom: 30rpx;
}
</style>