cxc-szcx-uniapp/pages/tab/office.vue

<template>
	<view :class="{'gray':store.isgray==1}">
		<view class="nav"></view>
		<view class="placeholder"></view>
		<!-- 		<view class="drag" v-if="listorder?.length">  //20240929 yzq 注释 这部分是拖拽组件
			<view class="title">
				{{ listtitle}}
			</view>
			<l-drag :list="listorder" @change="change" :column="4" gridHeight="100px">
				<template #grid="{active, content}">
					<view class="inner f-col aic" :class="{'active': active}" @click="jump(content.path)">
						<view class="img f-row aic">
							<image :src="`../../static/office/${content.meta.icon}.png`" mode=""></image>
						</view>
						<view class="text">
							{{content?.meta.title}}
						</view>
					</view>
				</template>
			</l-drag>
		</view> -->
		<view class="title f-col aic" style="padding-top: 30rpx;" v-if="!listorder?.length&&!arr?.length">
			暂无权限，请联系管理员！
		</view>

		<view class="content">
			<view class="list" v-if="arr?.length">
				<view class="item" v-for="item,i in arr" :key="i">
					<view class="title">
						{{item.meta.title}}
					</view>
					<view class="info_box f-row aic">
						<view class="info f-col aic" @click="jump(e.path)" v-for="e,i in item.children" :key="i">
							<view class="img f-row aic">
								<image :src="`../../static/office/${e.meta.icon}.png`"></image>
							</view>
							<view class="text">
								{{e.meta.title}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		beforeJump
	} from '@/utils/index.js';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getUserPermissionApi
	} from '@/api/login.js';
	import {
		useStore
	} from '@/store';
	const store = useStore();

	const list = new Array(7).fill(0).map((v, i) => i);
	// 拖拽后新的数据
	const newList = ref([])
	const change = v => newList.value = v

	const res = wx.getSystemInfoSync();
	const statusHeight = res.statusBarHeight; //状态栏高度
	const cusnavbarheight = (statusHeight + 44) + "px";
	const jump = (url) => {
		beforeJump(url, () => {
			uni.navigateTo({
				url
			})
		})
	}
	onLoad(() => {
		getUserPermission()
	})
	const arr = ref([])
	const listorder = ref([]) //拖动排序传递数据
	const listtitle = ref([]) //拖动排序的title
	const getUserPermission = () => {
		getUserPermissionApi({
			token: store.token,
			type: 'mobile'
		}).then((res) => {
			if (res.success) {
				let data = res.result.menu
				data.map(item => item.children = item?.children.filter(e => e?.meta?.icon))
				data = data.filter(item => item?.children?.length)
				listtitle.value = data[0]?.meta?.title
				// arr.value = data.slice(1, data?.length)
				arr.value = data;
				listorder.value = data.slice(0, 1)[0]?.children
			}
		}).catch((err) => {
			console.log(err);
		})
	}
</script>

<style lang="scss" scoped>
	.drag {
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
		border-radius: 16rpx;
		margin: 24rpx 30rpx 0 30rpx;

		.title {
			font-size: 28rpx;
			color: #333333;
			padding: 30rpx 0 0 30rpx;
		}
	}

	.inner {
		image {
			width: 98rpx;
			height: 98rpx;
			background-color: #efefef;
		}

		.text {
			font-size: 28rpx;
			color: #333333;
			margin-top: 20rpx;
		}
	}

	.placeholder {
		height: v-bind(cusnavbarheight);
	}

	.nav {
		width: calc(100% - 60rpx);
		padding: 0 30rpx;
		height: v-bind(cusnavbarheight);

		font-size: 24rpx;
		color: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background-image: url('../../static/my/navbg.png');
		background-repeat: no-repeat;
		background-size: 750rpx 458rpx;
	}

	.content {
		padding: 0 30rpx 20rpx 30rpx;
	}

	.list {
		margin-bottom: 24rpx;

		.item {
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
			border-radius: 16rpx;
			padding: 30rpx 0;
			margin-top: 24rpx;

			.title {
				font-size: 28rpx;
				color: #333333;
				padding-left: 30rpx;
			}
		}

		image {
			width: 98rpx;
			height: 98rpx;
		}

		.info_box {
			flex-wrap: wrap;

			.info {
				margin-top: 40rpx;
				width: 25%;

				.text {
					font-size: 28rpx;
					color: #333333;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>