factory_mp/pages/index/index.vue

<template>
	<view class="container container1">
		<image src="/static/banner_c.png" mode="widthFix" style="width:100%"></image>
		<uni-section :title="welTitle" type="circle" titleFontSize="15px" titleColor="#0000CD"
		 @click="goUserInfo">
			<template v-slot:right>
				<span style="color:gray">{{currentDate}}</span>
			</template>
		</uni-section>
		<view style="height: 12rpx;"></view>
		<uni-row :gutter="12">
			<uni-col :span="12" style="border-radius: 20upx;">
				<navigator class="middleNavigator" url="../wf/index?category=duty">
					<span>待办</span>
					<span class="numSpan">{{duty_count}}</span>
				</navigator>
			</uni-col>
			<uni-col :span="12">
				<navigator class="middleNavigator" url="../wf/index?category=owner">
					<span>我的</span>
					<span class="numSpan">{{owner_count}}</span>
				</navigator>
			</uni-col>
		</uni-row>
		<view style="height: 12rpx;"></view>
		<uni-section title="发起申请" type="line">
			<div v-for="group in wfOptions" :key="group.category">
				<div style="padding-left:10px;color: #606266;">{{ group.category }}</div>
				<uni-grid :column="5" :show-border="false" :square="false">
					<uni-grid-item v-for="(item ,index) in group.items" :index="index" :key="index">
						<view class="grid-item-box" @click="pageEnter(item)">
							<image class="image" :src="item.icon_path?item.icon_path:'/static/yuding.png'" mode="aspectFill" />
							<text class="text">{{item.name}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</div>
		</uni-section>
	</view>
</template>

<script>
	import tool from "../../utils/tools.js";
	import { auth } from '@/utils/auth.js'
	export default {
		data() {
			return {
				welTitle: "",
				imageSrc:"",
				currentDate: tool.getTodayDate(),
				wfOptions: [],
				duty_count: 0,
				owner_count: 0
			}
		},
		mounted() {
			this.initWelTitle();
			this.getWfOptions();
		},
		onShow() {
			// #ifdef MP-WEIXIN
			uni.hideHomeButton()
			// #endif
			this.getTicketCount();
		},
		methods: {
			getTicketCount() {
				this.$api.getTicket({category:"duty", page:1, page_size:1}).then(res=>{
					this.duty_count = res.count;
				})
				this.$api.getTicket({category:"owner", page:1, page_size:1}).then(res=>{
					this.owner_count = res.count;
				})
			},
			getWfOptions() {
				let permissions = auth.getPermissions();
				const groups = {};
				this.$api.getWorkflow({ page: 0 }).then((res) => {
					res.forEach((item) => {
						if(item.key && permissions.includes(item.key)) {
							let cate = item.cate;
							if (!cate){cate="未分组"}
							if (!groups[cate]) {
								groups[cate] = [];
							}
							groups[cate].push(item);
						}
					})
					// 转换为数组形式，便于模板遍历
				this.wfOptions =  Object.keys(groups).map(category => ({
					category,
					items: groups[category]
				}));
				});
			},
			initWelTitle() {
				let userInfo = uni.getStorageSync("userInfo")
				let name = userInfo.name;
				this.welTitle = `欢迎您, ${name}!`
			},
			goUserInfo() {
				uni.navigateTo({
					url: "/pages/system/userInfo"
				})
			},
			pageEnter(item){
				const viewPath = item.view_path;
				let view_path = item.view_path2?item.view_path2:item.view_path;
				uni.navigateTo({
					url:`/pages${view_path}?mode=add`
				})
			}
		}
	}
</script>
<style lang="scss">
	.container1{
		background-color: rgba(255,255,255,0);
	}
	.image {
		width: 60upx;
		height: 60upx;
		padding: 5upx;
		border-radius: 20upx;
		background-color: #2979ff;
	}

	.text {
		font-size: 24upx;
		margin-top: 10upx;
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}
	.middleNavigator{
		padding: 28rpx;
		background-color: white;
		display: flex;
		justify-content : space-between;
		border-radius: 10upx;
	}
	.numSpan{
		color: #2979ff;
		font-size: 36rpx; 
		font-weight: bold;
		margin-left: 24rpx;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>