realty/virgo.wzfrontend/workark_wx/pages/index/index.vue

<template>
	<view class="index-page">
		<view class="index-empty" v-if="!isLogin">
			<uv-empty icon="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/fa57e25b38c442ebb0ba023cace796bb"
				:isImg="true" textSize="28" width="360" text="暂未登录">
				<view class="index-button-box">
					<uv-button type="primary" text="点击登录" size="small" @tap="$navigateTo('/pages/login/login')">
					</uv-button>
				</view>
			</uv-empty>
		</view>
		<view class="index-container" v-else>
			<view class="index-group">
				<view class="group-item" v-for="(item,index) in list" :key="item.id">
					<view class="item-title">{{item.name}}</view>
					<view class="item-content">
						<view class="content-item" v-for="(serve,i) in item.children" :key="serve.id"
							@tap="clickItem(serve)">
							<view class="content-icon" :style="'background: '+serve.iconColor+';'">
								<uv-icon :name="serve.iconName" custom-prefix="custom-icon" color="#fff" size="60">
								</uv-icon>
							</view>
							<view class="content-label">{{serve.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getServeProductList
	} from '@/request/api/workark.js'
	export default {
		data() {
			return {
				isLogin: false,
				list: [],
				arguments: [{
					id: -1,
					name: '财务管理',
					children: [{
						id: -2,
						name: '合同管理',
						iconName: 'hetongguanli',
						iconColor: '#5cc8b4'
					}, {
						id: -3,
						name: '发票管理',
						iconName: 'fapiaoguanli',
						iconColor: '#fd5c54'
					}]
				}]
			}
		},
		onShow() {
			this.isLogin = !!uni.getStorageSync('token');
			if (this.isLogin) this.init();
		},
		methods: {
			async init() {
				let productData = await getServeProductList(-1);
				if (productData.state) {
					this.list = productData.data.concat(this.arguments);
				}
			},
			clickItem(serve) {
				let url = '',
					signUrl = '';
				if (serve.id > 0) {
					url = '/subPages/indexPage/orderList/orderList?productLevelId=' + serve.id + '&productLevelName=' +
						serve.name + '&iconName=' + serve.iconName + '&iconColor=' + serve.iconColor;
					signUrl = '/work/serve/list/' + serve.sign + '/list';
				}
				if (serve.id === -2) {
					url = '/subPages/indexPage/contractList/contractList';
				}
				if (serve.id === -3) {
					url = '/subPages/indexPage/invoiceList/invoiceList';
				}
				if (signUrl) {
					let isRole = JSON.parse(this.$store.getters.user.workarkMenu).filter(node => node === signUrl);
					if (isRole.length === 0) url = '/subPages/indexPage/noPermission/noPermission'
				}
				this.$navigateTo(url);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-page {
		padding: 30rpx 0;

		.index-button-box {
			margin-top: 40rpx;
		}

		.index-empty {
			padding-top: 80rpx;
		}

		.group-item {
			background: #fff;
			margin-bottom: 30rpx;

			&:last-child {
				margin-bottom: 0px;
			}
		}

		.item-title {
			line-height: 88rpx;
			padding: 0 30rpx;
			font-size: 30rpx;
			font-weight: 500;
			border-bottom: 2rpx solid $uv-border-color;
		}

		.item-content {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding-top: 30rpx;
		}

		.content-item {
			width: 25%;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			padding-bottom: 30rpx;
		}

		.content-icon {
			width: 100rpx;
			height: 100rpx;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.content-label {
			color: $uv-content-color;
			margin-top: 10rpx;
			font-weight: 400;
			font-size: 26rpx;
		}
	}
</style>