首页 - 样本管理系统

<template>
  <view>
    <u-toast ref="uToast" />
<pre><code>&lt;!-- 滚动通知开始 --&gt;
&lt;view v-if=&quot;notice&quot;&gt;
  &lt;u-notice-bar :text=&quot;notice&quot; mode=&quot;closable&quot; @click=&quot;selectbox(4)&quot; /&gt;
&lt;/view&gt;
&lt;!-- 滚动通知结束 --&gt;

&lt;!-- 首页轮播图开始 --&gt;
&lt;view class=&quot;swiper&quot;&gt;
  &lt;u-swiper
    :list=&quot;swiperlist&quot;
    keyName=&quot;bannerUrl&quot;
    autoplay
    circular
    height=&quot;350rpx&quot;
    indicator
    indicatorMode=&quot;line&quot;
  /&gt;
&lt;/view&gt;
&lt;!-- 首页轮播图结束 --&gt;

&lt;!-- 今日详情开始 --&gt;
&lt;view class=&quot;layout&quot;&gt;
  &lt;view class=&quot;title&quot;&gt;今日详情&lt;/view&gt;
  &lt;view class=&quot;content&quot;&gt;
    &lt;view class=&quot;box1&quot; @click=&quot;selectbox(1)&quot;&gt;
      &lt;view class=&quot;text1&quot;&gt;样本箱&lt;/view&gt;
      &lt;view class=&quot;text2&quot;&gt;
        &lt;text class=&quot;text3&quot;&gt;{{ boxNum }}&lt;/text&gt;
        &lt;text class=&quot;text4&quot;&gt;箱&lt;/text&gt;
      &lt;/view&gt;
    &lt;/view&gt;
    &lt;view class=&quot;box2&quot; @click=&quot;selectbox(2)&quot;&gt;
      &lt;view class=&quot;text1&quot;&gt;样本&lt;/view&gt;
      &lt;view class=&quot;text2&quot;&gt;
        &lt;text class=&quot;text3&quot;&gt;{{ packageNum }}&lt;/text&gt;
        &lt;text class=&quot;text4&quot;&gt;袋&lt;/text&gt;
      &lt;/view&gt;
    &lt;/view&gt;
    &lt;view class=&quot;box3&quot; @click=&quot;selectbox(3)&quot;&gt;
      &lt;view class=&quot;text1&quot;&gt;第三方&lt;/view&gt;
      &lt;view class=&quot;text2&quot;&gt;
        &lt;text class=&quot;text3&quot;&gt;{{ thirdPartyNum }}&lt;/text&gt;
        &lt;text class=&quot;text4&quot;&gt;个&lt;/text&gt;
      &lt;/view&gt;
    &lt;/view&gt;
  &lt;/view&gt;
&lt;/view&gt;
&lt;!-- 今日详情结束 --&gt;

&lt;!-- 常用开始 --&gt;
&lt;view class=&quot;layout myview&quot;&gt;
  &lt;view class=&quot;title&quot;&gt;常用&lt;/view&gt;
  &lt;view class=&quot;content2&quot;&gt;
    &lt;u-grid :border=&quot;false&quot; @click=&quot;commonclick&quot;&gt;
      &lt;u-grid-item v-for=&quot;(item, index) in baseList&quot; :key=&quot;index&quot;&gt;
        &lt;view style=&quot;position: absolute;top: -1rpx;left: 30rpx;&quot; v-if=&quot;index === 1&quot;&gt;
          &lt;u-badge type=&quot;error&quot; numberType=&quot;overflow&quot; max=&quot;10&quot; :value=&quot;messageNum&quot; /&gt;
        &lt;/view&gt;
        &lt;image style=&quot;width: 80rpx;height: 80rpx;&quot; mode=&quot;aspectFill&quot; :src=&quot;item.imgurl&quot; /&gt;
        &lt;text class=&quot;grid-text&quot; style=&quot;margin-bottom: 30rpx;&quot;&gt;{{ item.title }}&lt;/text&gt;
      &lt;/u-grid-item&gt;
    &lt;/u-grid&gt;
  &lt;/view&gt;
&lt;/view&gt;
&lt;!-- 常用结束 --&gt;

&lt;!-- 车辆管理开始 --&gt;
&lt;view class=&quot;layout myview&quot;&gt;
  &lt;view class=&quot;title&quot;&gt;车辆管理&lt;/view&gt;
  &lt;view class=&quot;content2&quot;&gt;
    &lt;u-grid :border=&quot;false&quot; @click=&quot;carclick&quot;&gt;
      &lt;u-grid-item v-for=&quot;(item, index) in carList&quot; :key=&quot;index&quot; v-if=&quot;index !== 1 || license_plate.length !== 0&quot;&gt;
        &lt;image style=&quot;width: 80rpx;height: 80rpx;&quot; mode=&quot;aspectFill&quot; :src=&quot;item.imgurl&quot; /&gt;
        &lt;text class=&quot;grid-text&quot; style=&quot;margin-bottom: 30rpx;&quot;&gt;{{ item.title }}&lt;/text&gt;
      &lt;/u-grid-item&gt;
    &lt;/u-grid&gt;
  &lt;/view&gt;
&lt;/view&gt;
&lt;!-- 车辆管理结束 --&gt;

&lt;!-- 调度管理开始 --&gt;
&lt;view class=&quot;layout myview&quot;&gt;
  &lt;view class=&quot;title&quot;&gt;调度管理&lt;/view&gt;
  &lt;view class=&quot;content2&quot;&gt;
    &lt;u-grid :border=&quot;false&quot; @click=&quot;dispatchclick&quot;&gt;
      &lt;u-grid-item v-for=&quot;(item, index) in dispatchlist&quot; :key=&quot;index&quot; v-if=&quot;expressRoleId &lt; item.role&quot;&gt;
        &lt;image style=&quot;width: 80rpx;height: 80rpx;&quot; mode=&quot;aspectFill&quot; :src=&quot;item.imgurl&quot; /&gt;
        &lt;text class=&quot;grid-text&quot; style=&quot;margin-bottom: 30rpx;&quot;&gt;{{ item.title }}&lt;/text&gt;
      &lt;/u-grid-item&gt;
    &lt;/u-grid&gt;
  &lt;/view&gt;
&lt;/view&gt;
&lt;!-- 调度管理结束 --&gt;

&lt;view style=&quot;height: 30rpx;&quot; /&gt;
</code></pre>
  </view>
</template>
<script>
export default {
  data() {
    return {
      notice: '', //首页滚动消息标题
      swiperlist: [], //首页轮播图
      boxNum: 0, //样本箱数量
      packageNum: 0, //样本袋数量
      thirdPartyNum: 0, //第三方数量
      messageNum: 0, //未读消息数量
      license_plate: [], //车牌判断加油图标显示
      account: uni.getStorageSync('account'),
      expressRoleId: uni.getStorageSync('expressRoleId'),
      baseList: [
        {
          imgurl: '/static/images/client.png',
          title: '客户管理',
          path: '/pages/tabbar1/customer/customer',
        },
        {
          imgurl: '/static/images/message.png',
          title: '消息中心',
          path: '/pages/tabbar1/message/message',
        },
        {
          imgurl: '/static/images/confirmed.png',
          title: '录单查询',
          path: '/pages/tabbar1/record/record',
        },
      ], //常用的数据宫格图
      carList: [
        {
          imgurl: '/static/images/car.png',
          title: '出车检查',
          path: '/pages/tabbar1/checkcar/checkcar',
        },
        {
          imgurl: '/static/images/refuel.png',
          title: '车辆加油',
          path: '/pages/tabbar1/refuel/refuel',
        },
      ], //车辆管理宫格图
      dispatchlist: [
        {
          imgurl: '/static/images/Hospital.png',
          title: '医院派单',
          path: '/pages/tabbar1/dispatch/dispatch',
          role: 1004,
        },
        {
          imgurl: '/static/images/car2.png',
          title: '车辆调度',
          path: '/pages/tabbar1/VehicleDispatch/VehicleDispatch',
          role: 1004,
        },
      ], //调度管理

    };
  },
  methods: {
    location() { //获取定位
      uni.getLocation({
        isHighAccuracy: true, // 开启地图精准定位
        type: 'gcj02', // 地图类型写这个
        success: (res) => {
          console.log(res)
          this.$request.get('/getaddress', {
            location: res.latitude + ',' + res.longitude
          }).then(res => {
            console.log(res)

          })
        }
      })

    },
    selectbox(e) { //点击箱子，进入领取样本箱页面
      if (e == 1) { uni.navigateTo({ url: '/pages/tabbar1/boxs/boxs' }); }
      if (e == 2) { uni.navigateTo({ url: '/pages/tabbar1/samplebag/samplebag' }); }
      if (e == 3) { uni.navigateTo({ url: '/pages/tabbar1/thirdpart/thirdpart' }); }
      if (e == 4) { uni.navigateTo({ url: '/pages/tabbar1/message/message' }); }
    },
    workbenchInfo() { //获取首页数据
      this.$request.post('/app/workbench/workbenchInfo', {}
      ).then(res => {
        console.log('获取首页数据')
        console.log(res.data.data)
        if (res.data.code == 200) {
          this.messageNum = res.data.data.messageNum
          if (this.messageNum > 0) {
            this.notice = '您有' + res.data.data.messageNum + '条新消息!'
          } else {
            this.notice = ''
          }
          this.boxNum = res.data.data.boxNum
          this.packageNum = res.data.data.packageNum
          this.thirdPartyNum = res.data.data.thirdPartyNum

        } else {
          if (res.data.message == '未登录') {
            uni.removeStorageSync('token');
            uni.reLaunch({
              url: '/pages/other/login/login'
            });
          } else {
            this.$refs.uToast.error(res.data.message)
          }

        }
      })

      this.getbanner()

      uni.stopPullDownRefresh(); //停止刷新

    },

    getbanner() { //获取首页轮播图
      if (this.swiperlist.length < 1) {
        this.$request.post('/app/workbench/banner_list', {}
        ).then(res => {
          console.log('获取首页轮播图数据')
          console.log(res.data.data)
          this.swiperlist = res.data.code == 200 ? res.data.data : []
        })
      }
    },

    commonclick(index) { //点击常用宫格中的图标
      uni.navigateTo({
        url: this.baseList[index]['path']
      });
    },

    carclick(index) { //点击车辆管理宫格中的图标
      uni.navigateTo({
        url: this.carList[index]['path']
      });
    },
    dispatchclick(index) { //点击调度管理图标
      uni.navigateTo({
        url: this.dispatchlist[index]['path']
      });
    }
  },

  onPullDownRefresh() { //监听该页面用户下拉刷新事件
    console.log('刷新首页页面数据');
    this.workbenchInfo()
    // this.getbanner()
  },
  onLoad() {
    console.log('首次进入刷新首页页面数据');
    // this.getbanner()
    if (this.account !== 'test' && this.account) {
      this.location()
    }

  },
  onShow() {

    if (!uni.getStorageSync('token')) {
      uni.reLaunch({
        url: '/pages/other/login/login'
      });
    } else {
      this.workbenchInfo()
      if (uni.getStorageSync('license_plate')) {
        this.license_plate = uni.getStorageSync('license_plate')
        console.log(uni.getStorageSync('license_plate'))
      }
    }

  },


};
</script>
<style lang="scss">
  .layout {
    .title {
      margin: 30rpx 30rpx 30rpx 30rpx;
      font-size: 40rpx;
      font-weight: bold;
    }
    .content {
      display: flex;
      justify-content: space-around;

      .box1 {
        width: 200rpx;
        height: 200rpx;
        background-color: #87CEFA;
        border-radius: 15rpx;
        background-image: url('https://img.alicdn.com/imgextra/i1/752202202/O1CN01S9OqZl1S8Yw4n2GMx_!!752202202.png');
        background-size: cover;
      }



      .box2 {
        width: 200rpx;
        height: 200rpx;
        background-color: #70DB93;
        border-radius: 15rpx;
        background-image: url('https://img.alicdn.com/imgextra/i3/752202202/O1CN01aP7l171S8YwACW3xn_!!752202202.png');
        background-size: cover;
      }

      .box3 {
        width: 200rpx;
        height: 200rpx;
        background-color: #FFB6C1;
        border-radius: 15rpx;
        background-image: url('https://img.alicdn.com/imgextra/i4/752202202/O1CN01yb6s2K1S8YvzGIja9_!!752202202.png');
        background-size: cover;
      }

      .text1 {
        font-size: 40rpx;
        color: #FFFFFF;
        text-align: center;
        margin-top: 20rpx;
      }

      .text2 {
        text-align: center;
        .text3 {
          font-size: 80rpx;
          color: #FFFFFF;
        }
        .text4 {
          font-size: 40rpx;
          color: #FFFFFF;
        }
      }



    }

  }
</style>