uni-zhihuikuangshan/pages/tabbar/workbench/workbench.vue

<template>
	<view>
		<!-- 工作台头图 -->
		<view class="top">
			<image :src="header"></image>
		</view>

		<!-- nav -->
		<view class="section">
			<view class="list">
				<view class="item" v-for="(item,index) in nav" :key="index" @click="go_link(item)">
					<view class="icon">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="name">
						<view class="num"
							v-if="item.link.indexOf('http://oa_system.nxjiewei.com:8011/?m=ying&d=we&num=daiban&hideheader=true') != -1 && num_1 > 0">
							{{num_1}}
						</view>
						<view class="num"
							v-if="item.link.indexOf('http://oa_system.nxjiewei.com:8011/?m=ying&d=we&num=todo&hideheader=true') != -1 && num_2 > 0">
							{{num_2}}
						</view>

						<view class="name_title">{{item.title}}</view>
						<view class="sub_title">{{item.sub_title}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="section" v-for="(item,index) in module" :key="index">
			<view class="title">
				<view class="icon">
					<image :src="item.icon" mode=""></image>
				</view>
				<view class="text">{{item.title}}</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item_2,index_2) in item.children" :key="index_2" @click="go_link(item_2)">
					<view class="icon">
						<image :src="item_2.icon" mode=""></image>
					</view>
					<view class="name">
						<view class="name_title">{{item_2.title}}</view>
						<view class="sub_title">{{item_2.sub_title}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		goToLink
	} from "@/common/common.js"
	export default {
		data() {
			return {
				// 当前煤矿编码
				mine_code: "",

				// 头部图片
				header: "",
				nav: [],
				module: [],

				num_1: 0,
				num_2: 0
			};
		},
		onLoad() {
			// 初始化当前煤矿编码
			this.mine_code = uni.getStorageSync('mine_code')

			this.get_workbench_index()
		},
		onShow() {
			this.get_workflow_todo_query()
		},
		methods: {
			// 获取基础数据
			get_workbench_index() {
				this.$api.workbench_index({

				}).then((res) => {
					// console.log(res.data.data)
					this.header = res.data.data.header
					this.nav = res.data.data.nav
					this.module = res.data.data.module
				})
			},

			// 获取消息提醒数量
			get_workflow_todo_query() {
				this.$api.workflow_todo_query({
					staff_num: uni.getStorageSync('user').staff_num,
					query_type: 2
				}).then((res) => {

					this.num_1 = res.data.content.data
					
					this.$api.workflow_todo_query({
						staff_num: uni.getStorageSync('user').staff_num,
						query_type: 1
					}).then((res) => {
					
						this.num_2 = res.data.content.data
						
						let num = this.num_1 + this.num_2
						
						// if(num > 0){
						// 	uni.setTabBarBadge({
						// 		index: 2,
						// 		text: '' + num + ''
						// 	})
						// }
						
					})
				})
			},
			go_link(item) {
				// console.log(item)
				goToLink(item, this.mine_code)
			},
			
		},

	}
</script>


<style lang="scss">
	page {
		background-color: #F2FAF7;
		margin-bottom: 20rpx;
	}

	.top {
		image {
			width: 750rpx;
			height: 270rpx;
			display: block;
		}
	}

	.section {
		margin-top: 20rpx;
		background-color: #FFFFFF;

		padding: 25rpx;

		.title {
			display: flex;
			align-items: center;
			height: 90rpx;

			.icon {
				margin-right: 20rpx;

				image {
					width: 50rpx;
					height: 50rpx;
					display: block;
				}
			}

			.text {
				font-weight: 700;
				font-size: 34rpx;
			}
		}

		.list {
			margin-top: 30rpx;
			width: 700rpx;
			overflow: hidden;

			.item {

				float: left;
				margin-bottom: 30rpx;

				width: 350rpx;

				display: flex;
				align-items: center;
				height: 140rpx;

				.icon {
					margin-bottom: 10rpx;

					image {
						width: 90rpx;
						height: 90rpx;
						display: block;
					}


				}

				.name {
					position: relative;

					margin-left: 20rpx;

					.num {
						z-index: 10;
						position: absolute;
						top: -10rpx;
						right: -50rpx;

						width: 40rpx;
						text-align: center;
						line-height: 40rpx;
						background-color: #F56C6C;
						border-radius: 50%;
						color: #FFF;
						font-size: 26rpx;
					}

					.name_title {
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}

					.sub_title {
						font-size: 24rpx;
						color: #999;
					}
				}
			}

			.item:nth-child(2n) {
				box-sizing: border-box;
				border-left: 1rpx solid #F2FAF7;

				padding-left: 40rpx;

			}

		}
	}
</style>