ll

liukangdong

2024-12-12 b6d0ad0e7e57a77d1983009494b09aa1da5fbfc4

 h5/pages/staff/index.vue

@@ -1,252 +1,316 @@
<template>
   <view class="main_app">
      <view class="title_wrap">
         <view class="name">某某某，欢迎登录～</view>
         <view class="btn" @click="loginOut">退出登录</view>
      </view>
      <view class="banner_wrap">
         <view class="h1">安泰物流</view>
         <view class="h2">安全重于泰山 服务追求卓越</view>
         <image class="banner" src="../../static/banner.jpg" mode="widthFix"></image>
      </view>
      <view class="title_wrap"><view class="name">业务办理</view></view>
      <view class="container1">
         <view class="left">
            <view class="img_wrap img1" @click="jump('/pages/staff/visitorReport')">
               <image src="@/static/staff/ic_fangkebaobei.png" class="img"></image>
               <view class="h1">访客报备</view>
               <view class="h2">VISITOR REPORTING</view>
            </view>
            <view class="img_wrap img2" @click="jump('/pages/staff/meetingSub')">
               <image src="@/static/staff/ic_yuyuehuiyishi.png" class="img"></image>
               <view class="h1">预约会议室</view>
               <view class="h2">BOOK A MEETING ROOM</view>
            </view>
         </view>
         <view class="right">
            <view class="img_wrap img2" @click="jump('/pages/staff/snapshot')">
               <image src="@/static/staff/ic_yinhuansuipai.png" class="img"></image>
               <view class="h1">隐患随手拍</view>
               <view class="h2">HIDDEN DANGER</view>
            </view>
            <view class="img_wrap img2" @click="jump('/pages/staff/vehicle/index')">
               <image src="@/static/staff/ic_yongcheshenqing.png" class="img"></image>
               <view class="h1">用车申请</view>
               <view class="h2">VEHICLE APPLICATION</view>
            </view>
            <view class="img_wrap img2" @click="jump('/pages/changePassword/changePassword')">
               <image src="@/static/staff/ic_xiugaimima.png" class="img"></image>
               <view class="h1">修改密码</view>
               <view class="h2">CHANGE PASSWORD</view>
            </view>
         </view>
      </view>
      <!--  -->
      <view class="title_wrap"><view class="name">业务查询</view></view>
      <view class="container2">
         <view class="img_wrap" @click="jump('/pages/staff/task/index')">
            <image class="img" src="@/static/staff/ic_renwuzhongxin.png"></image>
            <view class="h1">任务中心</view>
            <view class="h2">TASK CENTER</view>
            <view class="task_num">99+</view>
         </view>
         <view class="img_wrap" @click="jump('/pages/staff/task/index')">
            <image class="img" src="@/static/staff/ic_wodehuiyi.png"></image>
            <view class="h1">我的会议日历</view>
            <view class="h2">MY MEETING CALENDAR</view>
         </view>
         <view class="img_wrap" @click="jump('/pages/staff/sendACar')">
            <image class="img" src="@/static/staff/ic_paichejilu.png"></image>
            <view class="h1">派车记录</view>
            <view class="h2">VEHICLE DISPATCH</view>
         </view>
         <view class="img_wrap" @click="jump('/pages/staff/task/index')">
            <image class="img" src="@/static/staff/ic_huiyishiguanli.png"></image>
            <view class="h1">会议室管理</view>
            <view class="h2">MANAGE MEETING ROOMS</view>
         </view>
      </view>
      <view class="copyright">
         <image src="@/static/logo_s@2x.png" mode="widthFix" />
         <text>安徽安泰物流有限责任公司版权所有</text>
      </view>
   </view>
</template>

<script>
export default {
   data() {
      return {};
   },
   methods: {
      jump(path){
         uni.navigateTo({
            url: path
         });
      },
      loginOut() {
         uni.clearStorageSync()
         uni.redirectTo({
            url: '/pages/login/login'
         })
      },
   }
};
</script>

<style lang="scss" scoped>
.title_wrap {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 24rpx;
   .name {
      font-weight: 500;
      font-size: 34rpx;
      color: #222222;
   }
   .btn {
      width: 144rpx;
      height: 56rpx;
      border-radius: 36rpx;
      border: 1rpx solid #279baa;
      font-size: 26rpx;
      color: #279baa;
      display: flex;
      justify-content: center;
      align-items: center;
   }
}
.main_app {
   padding-top: 12rpx;
}
.banner_wrap {
   padding: 54rpx 44rpx;
   color: #fff;
   position: relative;
   width: 688rpx;
   height: 270rpx;
   margin-bottom: 40rpx;
   .h1 {
      font-weight: bold;
      line-height: 66rpx;
      font-size: 44rpx;
      margin-bottom: 14rpx;
   }
   .banner {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: -1;
   }
}
.container1 {
   display: flex;
   flex-wrap: wrap;
   view {
      width: 336rpx;
   }
   .left {
      margin-right: 18rpx;
   }
   .img_wrap {
      position: relative;
      padding: 24rpx 0rpx 0 28rpx;
      border-radius: 8rpx;
      overflow: hidden;
      .h1 {
         font-weight: 500;
         font-size: 32rpx;
         color: #222222;
         line-height: 48rpx;
         margin-bottom: 4rpx;
      }
      .h2 {
         font-size: 22rpx;
         color: #7b9da1;
         line-height: 34rpx;
      }
      .img {
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         z-index: -1;
      }
   }
   .img1 {
      width: 336rpx;
      height: 296rpx;
      margin-bottom: 16rpx;
   }
   .img2 {
      width: 336rpx;
      height: 140rpx;
      margin-bottom: 16rpx;
   }
}
.container2 {
   display: flex;
   flex-wrap: wrap;
   .img_wrap {
      width: 336rpx;
      height: 140rpx;
      margin-bottom: 16rpx;
      position: relative;
      border-radius: 8rpx;
      overflow: hidden;
      padding: 24rpx 0rpx 0 28rpx;
      &:nth-of-type(2n) {
         margin-left: 18rpx;
      }
      .task_num{
         position: absolute;
         left: 164rpx;
         top: 20rpx;
         width: 60rpx;
         height: 48rpx;
         border-radius: 50%;
         background-color: #fff;
         color: #db534c;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 24rpx
      }
      .h1 {
         font-weight: 500;
         font-size: 32rpx;
         color: #222222;
         line-height: 48rpx;
         margin-bottom: 4rpx;
      }
      .h2 {
         font-size: 22rpx;
         color: #7b9da1;
         line-height: 34rpx;
      }
      .img {
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         z-index: -1;
      }
   }
}
.copyright {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 44rpx;
   font-size: 24rpx;
   color: #666666;
   image {
      width: 40rpx;
      height: 40rpx;
   }
}
</style>
<template>

   <view class="main_app">

      <view class="title_wrap">

         <view class="name" v-if="userInfo.realname">{{ userInfo.realname || "" }}，欢迎登录～</view>

         <view class="name" v-else>请先登录</view>

         <view class="btn" @click="loginOut">{{

            userInfo.realname ? "退出登录" : "去登录"

         }}</view>

      </view>

      <view class="banner_wrap">

         <view class="h1">安泰物流</view>

         <view class="h2">安全重于泰山 服务追求卓越</view>

         <image class="banner" src="../../static/banner.jpg" mode="widthFix"></image>

      </view>

      <view v-if="list1.filter(i => checkAuth(i.auth)).length > 0" class="title_wrap">

         <view class="name">业务办理</view>

      </view>

      <view class="container1">

         <view class="list">

            <block v-for="item in list1" :key="item.name">

               <view v-if="checkAuth(item.auth)" class="item" @click="jump(item.url)">

                  <image :src="item.img" class="icon" />

                  <view class="name">{{ item.name }}</view>

               </view>

            </block>

         </view>

      </view>

      <!--  -->

      <view v-if="list2.filter(i => checkAuth(i.auth)).length > 0" class="title_wrap">

         <view class="name">业务查询</view>

      </view>

      <view class="container2">

         <view class="list">

            <block v-for="item in list2" :key="item.name">

               <view v-if="checkAuth(item.auth)" class="item" @click="jump(item.url)">

                  <image :src="item.img" class="icon" />

                  <view class="name">{{ item.name }}</view>

                  <view v-if="item.name == '任务中心' && taskInfo" class="task_num">{{ taskInfo }}</view>

               </view>

            </block>

         </view>

      </view>

      <view class="copyright">

         <image src="@/static/logo_s@2x.png" mode="widthFix" />

         <text>安徽安泰物流有限责任公司版权所有</text>

      </view>

   </view>

</template>



<script>

   import {

      logoutPost,

      stagingHead,

      wxAuthorize,

      refreshToken,

      app_url

   } from '@/api'

   export default {

      data() {

         return {

            userInfo: uni.getStorageSync('userInfo') || {

               permissions: []

            },

            taskInfo: 0,

            list1: [{

                  name: '访客报备',

                  url: '/pages/staff/visitorReport',

                  img: require('@/static/home/ic_fangkebaobei@3x.png'),

                  auth: 'weixin:menu:visitcar'

               },

               {

                  name: '隐患随手拍',

                  url: '/pages/staff/snapshot',

                  img: require('@/static/home/ic_yinhuansuishoupai@3x.png'),

                  auth: 'weixin:menu:hiddendanger'

               },

               {

                  name: '用车申请',

                  url: '/pages/staff/vehicle/index',

                  img: require('@/static/home/ic_yongcheshenqing@3x.png'),

                  auth: 'weixin:menu:usecar'

               },

               {

                  name: '预约会议室',

                  url: '/pages/staff/meetingSub',

                  img: require('@/static/home/ic_yuyuehuiyishi@3x.png'),

                  auth: 'weixin:menu:meeting'

               },

               {

                  name: '修改密码',

                  url: '/pages/changePassword/changePassword',

                  img: require('@/static/home/ic_xiugaimima@3x.png'),

                  auth: 'weixin:menu:password'

               },

               {

                  name: '我的考勤',

                  url: '/pages/staff/signin',

                  img: require('@/static/home/ic_kaoqin@3x.png'),

                  auth: 'weixin:menu:attendance'

               },

            ],

            list2: [{

                  name: '任务中心',

                  url: '/pages/staff/task/index',

                  img: require('@/static/home/ic_renwuzhongxin@3x.png'),

                  auth: 'weixin:menu:taskcenter'

               },

               {

                  name: '我的会议日历',

                  url: '/pages/staff/meetingCalendar',

                  img: require('@/static/home/ic_wodehuiyi@3x.png'),

                  auth: 'weixin:menu:meetingcalendar'

               },

               {

                  name: '派车记录',

                  url: '/pages/staff/vehicle/sendACar',

                  img: require('@/static/home/ic_paichejilu@3x.png'),

                  auth: 'weixin:menu:usecarrecord'

               },

               {

                  name: '会议室管理',

                  url: '/pages/staff/meetingManager',

                  img: require('@/static/home/ic_huiyishiguanli@3x.png'),

                  auth: 'weixin:menu:meetingmanage'

               }

            ],



         }

      },

      onLoad() {

         const ywinfo = uni.getStorageSync('ywinfo') || {}

         if (ywinfo.ywid && ywinfo.type == 2) {

            setTimeout(() => {

               uni.removeStorageSync('ywinfo')

            }, 500)

            const yw = ywinfo.yw

            if (yw == 1 || yw == 6) {

               this.jump('/pages/staff/meetingDetail?id=' + ywinfo.ywid)

            } else if (yw == 2) {

               this.jump('/pages/staff/task/visitorApprove?id=' + ywinfo.ywid)

            } else if (yw == 3) {

               this.jump('/pages/staff/task/visitorReport?id=' + ywinfo.ywid)

            } else if (yw == 4) {

               this.jump('/pages/staff/task/vDangetAppr?id=' + ywinfo.ywid)

            } else if (yw == 7) {

               this.jump('/pages/staff/task/driver?id=' + ywinfo.ywid)

            } else if (yw == 5) {

               this.jump('/pages/staff/vehicle/index')

            }

         }

      },

      onShow() {

         setTimeout(() => {

            this.getTaskInfo()

         }, 300)

      },

      methods: {

         jump(path) {

            if (path == '/pages/staff/signin') {

               window.open('https://atwl.ahzyssl.com/dps/web/wxAuth/loginV2?oaId=atwl&redirectId=index')

            } else {

               uni.navigateTo({

                  url: path

               })

            }



         },

         checkAuth(str) {

            const permissions = this.userInfo.permissions

            return permissions.indexOf(str) > -1

         },

         loginOut() {

            logoutPost({

               isH5: 1

            }).then(res => {
               this.$store.commit('empty')
               setTimeout(() => {
                  window.location.href = app_url
               }, 300)
            })

         },

         getTaskInfo() {

            stagingHead({

               isDetail: '1'

            }).then(res => {

               this.taskInfo = res.data.noticeWaitNum + res.data.noticeCopyNum

               if (this.taskInfo && this.taskInfo > 99) {

                  this.taskInfo = 99

               }

            })

         },

      }

   }

</script>



<style lang="scss" scoped>

   .title_wrap {

      display: flex;

      justify-content: space-between;

      align-items: center;

      margin-bottom: 24rpx;

      padding-top: 10rpx;



      .name {

         font-weight: 600;

         font-size: 34rpx;

         color: #222222;

      }



      .btn {

         width: 144rpx;

         height: 56rpx;

         border-radius: 36rpx;

         border: 1rpx solid $uni-color-primary;

         font-size: 26rpx;

         color: $uni-color-primary;

         display: flex;

         justify-content: center;

         align-items: center;

      }

   }



   .main_app {

      padding-top: 12rpx;

   }



   .list {

      display: flex;

      width: 100%;

      flex-wrap: wrap;



      .item {

         display: flex;

         flex-direction: column;

         justify-content: center;

         align-items: center;

         width: 25%;

         margin-bottom: 40rpx;

         font-size: 26rpx;

         position: relative;



         image {

            width: 88rpx;

            height: 88rpx;

            margin-bottom: 20rpx;

         }



         .task_num {

            position: absolute;

            top: -10rpx;

            right: 28rpx;

            font-size: 24rpx;

            width: 36rpx;

            height: 36rpx;

            background-color: red;

            color: #fff;

            border-radius: 50%;

            display: flex;

            justify-content: center;

            align-items: center;

         }

      }

   }



   .banner_wrap {

      padding: 54rpx 44rpx;

      color: #fff;

      position: relative;

      width: 688rpx;

      height: 270rpx;

      margin-bottom: 40rpx;



      .h1 {

         font-weight: bold;

         line-height: 66rpx;

         font-size: 44rpx;

         margin-bottom: 14rpx;

      }



      .banner {

         position: absolute;

         top: 0;

         left: 0;

         width: 100%;

         z-index: -1;

      }

   }



   .container1 {

      display: flex;

      flex-wrap: wrap;

      padding: 10rpx 0 10rpx;

   }



   .container2 {

      display: flex;

      flex-wrap: wrap;

   }



   .copyright {

      display: flex;

      align-items: center;

      justify-content: center;

      font-size: 24rpx;

      color: #666666;

      position: fixed;

      width: 100%;

      left: 0;

      bottom: 48rpx;



      image {

         width: 40rpx;

         height: 40rpx;

      }

   }

</style>