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)">
							<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)">
							<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'
					}
				],
				// 巡检管理
				patrolMenuList: [{
						icon: require('@/static/icons/patrol-manage-icon.svg'),
						name: '巡检记录',
						url: 'pages/patrolManagement/patrolRecord/patrolRecord',
						width: '29px',
						height: '31px'
					},
					{
						icon: require('@/static/icons/device-error-records-icon.svg'),
						name: '设备异常记录',
						url: 'pages/patrolManagement/deviceAbnormalRecords/deviceAbnormalRecords',
						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', '');
									this.$u.vuex('vuex_user', {});
									this.$u.vuex('vuex_isLogin', false);
									this.jumpPage('pages/login/login')
								} else {
									this.$refs.uToast.show({
										loading: true,
										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({
							loading: true,
							message: res.msg || '获取今日概况失败!',
							type: 'error'
						})
					}
				})
			},
			/**
			 * 跳转页面
			 * @param { String } url
			 * @param { Object } params
			 */
			jumpPage(url, params) {
				uni.$u.route({
					url,
					params
				})
			}
		}
	}
</script>

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