parking_operation/pages/index/index.vue

<template>
  <view class="index">
    <view class="index-header">
      <view class="index-header-box">
        <view class="index-header-box-1">
          <view class="left">
            <text>欢迎你！{{ vuex_user.operName }}</text>
          </view>
          <view class="right">
            <u-icon size="21" name="../../static/icons/logout-icon.svg" @click="logout"></u-icon>
          </view>
        </view>
        <view class="index-header-box-2">
          <text>
            普定停车
            <br />运营中心
          </text>
        </view>
      </view>
    </view>
    <view class="index-main">
      <view class="index-main-menu">
        <!-- 数据概览 -->
        <view class="index-main-menu-1">
          <view
            class="menu-item"
            v-for="(item, index) in analysisMenuList"
            :key="index"
            @click="jumpPage(item.url)"
          >
            <view class="menu-item-icon">
              <u-icon size="48" :name="item.icon"></u-icon>
            </view>
            <view class="menu-item-name">
              <text>{{ item.name }}</text>
            </view>
          </view>
        </view>
        <!-- 订单管理 -->
        <!-- <view class="index-main-menu-2">
					<view class="index-main-menu-title">
						<text>订单管理</text>
					</view>
					<view class="menu">
						<view class="menu-item" v-for="(item, index) in orderMenuList" :key="index" @click="jumpPage(item.url, {}, true)">
							<view class="menu-item-icon" :style="{ width: item.width || '30px' }">
								<u--image :src="item.icon" :width="item.width || '30px'"
									:height="item.height || '31px'"></u--image>
							</view>
							<view class="menu-item-name">
								<text>{{ item.name }}</text>
							</view>
						</view>
					</view>
        </view>-->
        <!-- 收费员管理 -->
        <view class="index-main-menu-2">
          <view class="index-main-menu-title">
            <text>收费员管理</text>
          </view>
          <view class="menu">
            <view
              class="menu-item"
              v-for="(item, index) in tollCollectorList"
              :key="index"
              @click="jumpPage(item.url, {}, item.flag)"
            >
              <view class="menu-item-icon" :style="{ width: item.width || '30px' }">
                <u--image
                  :src="item.icon"
                  :width="item.width || '30px'"
                  :height="item.height || '31px'"
                ></u--image>
              </view>
              <view class="menu-item-name">
                <text>{{ item.name }}</text>
              </view>
            </view>
          </view>
        </view>
        <!-- 巡检管理 -->
        <view class="index-main-menu-2">
          <view class="index-main-menu-title">
            <text>巡检管理</text>
          </view>
          <view class="menu">
            <view
              class="menu-item"
              v-for="(item, index) in patrolMenuList"
              :key="index"
              @click="jumpPage(item.url, {}, item.flag)"
            >
              <view class="menu-item-icon" :style="{ width: item.width || '30px', height: '33px' }">
                <u--image
                  :src="item.icon"
                  :width="item.width || '30px'"
                  :height="item.height || '30px'"
                ></u--image>
              </view>
              <view class="menu-item-name">
                <text>{{ item.name }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      todayData: {},
      analysisMenuList: [
        {
          icon: require('@/static/icons/today-overview-icon.svg'),
          name: '今日概况',
          url: 'pages/dataOverview/todayOverview/todayOverview'
        },
        {
          icon: require('@/static/icons/operational-analysis-icon.svg'),
          name: '运营分析',
          url: 'pages/dataOverview/operationalAnalysis/operationalAnalysis'
        },
        {
          icon: require('@/static/icons/statistical-report-icon.svg'),
          name: '统计报表',
          url: 'pages/dataOverview/statisticalReport/statisticalReport'
        }
      ],
      // 订单管理
      orderMenuList: [
        {
          icon: require('@/static/icons/parking-record-icon.svg'),
          name: '停车记录',
          url: 'pages/orderManagement/parkingRecord/parkingRecord',
          width: '28px'
        },
        {
          icon: require('@/static/icons/arrearage-record-icon.svg'),
          name: '欠费记录',
          url: 'pages/orderManagement/arrearageRecord/arrearageRecord'
        },
        {
          icon: require('@/static/icons/collection-record-icon.svg'),
          name: '收款记录',
          url: 'pages/orderManagement/collectionRecord/collectionRecord'
        },
        {
          icon: require('@/static/icons/fee-evasion-record-icon.svg'),
          name: '逃费记录',
          url: 'pages/orderManagement/feeEvasionRecord/feeEvasionRecord',
          width: '39px',
          height: '31px'
        },
        {
          icon: require('@/static/icons/void-record-icon.svg'),
          name: '作废记录',
          url: 'pages/orderManagement/voidRecord/voidRecord',
          height: '31px'
        },
        {
          icon: require('@/static/icons/recovery-record-icon.svg'),
          name: '追缴记录',
          url: 'pages/orderManagement/recoveryRecord/recoveryRecord',
          height: '31px'
        }
      ],
      // 收费员管理
      tollCollectorList: [
        {
          icon: require('@/static/icons/performance-ranking-icon.svg'),
          name: '业绩排名',
          url: 'pages/collectorManagement/performanceRanking/performanceRanking',
          height: '33px'
        },
        {
          icon: require('@/static/icons/performance-analysis-icon.svg'),
          name: '业绩分析',
          url: 'pages/collectorManagement/performanceAnalysis/performanceAnalysis',
          height: '33px',
          width: '33px'
        },
        // {
        //   icon: require('@/static/icons/assessment-ranking-icon.svg'),
        //   name: '考核排名',
        //   url: 'pages/collectorManagement/assessmentRanking/assessmentRanking',
        //   height: '33px',
        //   width: '33px',
        //   flag: true
        // },
        // {
        //   icon: require('@/static/icons/assessment-analysis-icon.svg'),
        //   name: '考核分析',
        //   url: 'pages/collectorManagement/assessmentAnalysis/assessmentAnalysis',
        //   height: '32px',
        //   width: '33px',
        //   flag: true
        // },
        {
          icon: require('@/static/icons/shift-scheduling-icon.svg'),
          name: '排班情况',
          url: 'pages/collectorManagement/shiftScheduling/shiftScheduling',
          height: '30px',
          width: '33px',
          flag: true
        }
      ],
      // 巡检管理
      patrolMenuList: [
        // {
        // 	icon: require('@/static/icons/patrol-manage-icon.svg'),
        // 	name: '巡检记录',
        // 	url: 'pages/patrolManagement/patrolRecord/patrolRecord',
        // 	width: '29px',
        // 	height: '31px',
        // 	flag: true
        // },
        {
          icon: require('@/static/icons/device-error-records-icon.svg'),
          name: '设备异常记录',
          url: 'pages/patrolManagement/deviceAbnormalRecords/deviceAbnormalRecords',
          width: '35px',
          height: '31px'
        },
        {
          icon: require('@/static/icons/emergency-disposal-icon.svg'),
          name: '应急处置记录',
          url: 'pages/patrolManagement/emergencyDisposalRecords/emergencyDisposalRecords',
          width: '35px',
          height: '31px'
        }
      ]
    };
  },
  onLoad() {
    // 为了验证token是否过期
    // this.getTodayData();
  },
  methods: {
    /**
     * 登出操作
     */
    logout() {
      uni.showModal({
        title: '提示',
        content: '你确认退出登录?',
        success: (res) => {
          if (res.confirm) {
            uni.$u.api.logoutApi().then((res) => {
              if (res.code === 200) {
                uni.$u.vuex('vuex_token', '');
                uni.$u.vuex('vuex_user', {});
                uni.$u.vuex('vuex_isLogin', false);
                uni.redirectTo({
                  url: '/pages/login/login'
                });
              } else {
                this.$refs.uToast.show({
                  message: res.msg || '退出登录失败!',
                  type: 'error'
                });
              }
            });
          }
        }
      });
    },
    /**
     * 获取今日概况
     */
    getTodayData() {
      uni.$u.api.todayOverviewApi.getTodayDataApi().then((res) => {
        if (res.code === 200) {
          this.todayData = res.data;
        } else {
          this.$refs.uToast.show({
            message: res.msg || '获取今日概况失败!',
            type: 'error'
          });
        }
      });
    },
    /**
     * 跳转页面
     * @param { String } url
     * @param { Object } params
     */
    jumpPage(url, params, flag) {
      if (flag) {
        // this.$refs.uToast.show({
        // 	message: '功能未开发!',
        // 	type: 'info'
        // })
      } else {
        uni.$u.route({
          url,
          params
        });
      }
    }
  }
};
</script>

<style lang="scss">
page {
  background-color: #efefef;
}
</style>
<style lang="scss" scoped>
@import './index.scss';
</style>