workflow-mobile/pages/home/home.vue

<template>
	<view class="home page-bg-color u-rela">
		<view class="banner">
			<banner/>
		</view>
		<u-card margin="30rpx 0" padding="10" :border-radius="0" :border="false" :show-foot="false">
			<view class="" slot="head">
				<u-icon name="list-dot" class="u-margin-right-10 text"></u-icon>
				<text class="text">业务服务</text>
			</view>
			<u-grid slot="body" :col="4" :border="false">
				<u-grid-item :key="index" v-for="(menu, index) in menuList" @click="handleMenuClick(menu)">
					<u-image :class="{gray: menu.forbidClick}" width="64rpx" height="64rpx" :src="menu.icon"></u-image>
					<view class="menu-text text">{{menu.title}}</view>
				</u-grid-item>
			</u-grid>
		</u-card>
		<u-card margin="30rpx 0" padding="10" :border-radius="0" :border="false" :show-foot="false" title-size="28">
			<view class="" slot="head">
				<u-icon name="calendar-fill" class="u-margin-right-10 text"></u-icon>
				<text class="text">日程安排</text>
			</view>
			<calendar slot="body" mode="date"></calendar>
		</u-card>
		
	</view>
</template>

<script>
	import banner from './banner/index.vue'
	import calendar from './calendar/calendar.vue'
	export default {
		data() {
			return {
				show: true,
				menuList: [
					{
						title: '发起流程',
						icon: require('@/static/images/workflow/start.png'),
						options: {
							type: 'start'
						}
					},
					{
						title: '我发起的',
						icon: require('@/static/images/workflow/myLanuch.png'),
						options: {
							type: 'myLaunch'
						}
					},
					{
						title: '我的待办',
						icon: require('@/static/images/workflow/todo.png'),
						options: {
							type: 'todo'
						}
					},
					{
						title: '我的已办',
						icon: require('@/static/images/workflow/done.png'),
						options: {
							type: 'done'
						}
					},
					{
						title: '请假申请',
						forbidClick: true,
						icon: require('@/static/images/menu/leave.png')
					},
					{
						title: '采购申请',
						forbidClick: true,
						icon: require('@/static/images/menu/buy.png')
					},
					{
						title: '企业内训',
						forbidClick: true,
						icon: require('@/static/images/menu/train.png')
					},
					{
						title: '邮件通知',
						forbidClick: true,
						icon: require('@/static/images/menu/email.png')
					}
				]
			};
		},
		components: {
			banner,
			calendar
		},
		methods: {
			handleMenuClick(menu) {
				if(!menu.forbidClick) {
					this.openPage(menu.options)
				}
			},
			/**
			 * 打开工作流页面
			 */
			openPage(options) {
				uni.navigateTo({
					url: `/pages/workflowTask/index?type=${options.type}`
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: unset;
	}
	.home {
		&-bg-color {
			top: 0;
			left: 0;
			width: 100%;
			height: 560rpx;
		}
		.text {
			font-weight: 400;
			font-size: $main-font-size;
		}
		.menu-text {
			margin-top: 5rpx;
		}
		.gray {
			filter: grayscale(100%);
		}
	}
</style>