ErectionPlatform/pages/taskList/taskList.vue

<template>
	<u-navbar title="工作台" placeholder border=true leftIcon=''></u-navbar>
	<view class="mabox" v-for="item in tablist" :key="item.name">
		<view class="boxtitl">
			{{item.name}}
		</view>
		<view class="minboxlist">
			<view @click="gopathpage(ite.router)" v-for="ite in item.minilist" :key="ite.name">
				<image mode="widthFix" :src="ite.icon"></image>
				<view>{{ite.name}}</view>
			</view>
		</view>
	</view>
	<tips ref="tip"></tips>
	<!-- <Tabber checkstate='home'></Tabber> -->
</template>

<script lang="ts" setup>
	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app'

	import { getImageCache } from '@/utils/cacheimg.js'
	import { listtype } from '@/interfaces/home/index'
	import { reactive, toRefs, ref } from "vue";
	// import { appMenuroutes } from '@/api/user.js';

	const tip = ref(null)
	let details = reactive<listtype>({
		tablist: [

		]
	})
	function gopathpage(path : string) {
		uni.navigateTo({
			url: path
		})
	}

	onShow(() => {
		// updateApp()

		// print()
	})
	onLoad(() => {
		init()
	})

	onPullDownRefresh(() => {
		const timer = setTimeout(() => {
			// 关闭刷新动画
			uni.stopPullDownRefresh()
			clearTimeout(timer)
		}, 500)
	})

	async function init() {
		let tabber = uni.getStorageSync('taskMenu')
		console.log('tabber :>> ', tabber);
		if (tabber) {
			details.tablist = tabber
			return
		}
		let res = {}
		console.log(res, '-------------');
		console.log('刷新后')
		if (res.code == 200) {
			//读取并处理缓存图标并把菜单写入缓存
			getimgcache(res.data)

		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}

	async function getimgcache(data) {
		console.log('data :>> ', data);

		let maxarr = []
		// 首页菜单
		if (!data[0]) return
		for (let item of data[0].children) {
			let arr = {
				type: 1,
				name: item.name,
				minilist: []
			}
			for (let ite of item.children) {

				let result = null;
				if (ite.source != null) {
					result = await getImageCache(ite.source)
				}

				let obj = {
					icon: result,
					name: ite.name,
					router: ite.path
				}
				arr.minilist.push(obj)
			}
			maxarr.push(arr)
		}

		uni.setStorageSync('homerouter', maxarr)

		const _taskArr = []
		// 任务菜单
		for (let item of data[1].children) {
			let arr = {
				type: 1,
				name: item.name,
				minilist: []
			}

			if (item.children) {
				for (let ite of item.children) {

					console.log('getImageCache(ite.source) :>> ', getImageCache(ite.source));

					let result = null;
					if (ite.source != null) {
						result = await getImageCache(ite.source)
					}

					let obj = {
						icon: result,
						name: ite.name,
						router: ite.path
					}
					arr.minilist.push(obj)
				}

			} else {
				console.log('getImageCache(item.source) :>> ', getImageCache(item.source));

				let result = null;
				if (item.source != null) {
					result = await getImageCache(item.source)
				}

				let obj = {
					icon: result,
					name: item.name,
					router: item.path
				}
				arr.minilist.push(obj)
			}

			_taskArr.push(arr)
		}
		uni.setStorageSync('taskMenu', _taskArr)
		details.tablist = _taskArr
		console.log(details.tablist);
	}

	const { tablist } = toRefs(details)
</script>

<style lang="scss">
	.mabox {
		display: flex;
		flex-direction: column;
		// padding: 10upx 0;
		box-sizing: border-box;
		width: 686upx;
		margin: auto;
		background-color: #ffffff;
		margin-bottom: 10upx;
		margin-top: 10upx;
		border-radius: 10upx;
		box-shadow: 0rpx 2rpx 10rpx 0rpx #e2e2e380;

		.boxtitl {
			font-size: 30upx;
			font-weight: 500;
			margin-bottom: 10upx;
			// margin-left: 10upx;
			border-bottom: 2upx solid #EEEEEE;
			padding: 20upx;
			// padding-bottom: 0upx;
			color: #092C4D;
		}

		.minboxlist {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			// justify-content: space-between;
			padding: 10upx 0;

			>view {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 15upx;

				>image {
					width: 100upx;
				}

				>view {
					font-size: 26upx;
				}
			}
		}
	}
</style>