优化组件/更新

pages/permission/secondary_page.vue

@@ -0,0 +1,100 @@
+<template>
+	<view class="container">
+		<view class="row">
+			<view class="header">
+				<text class="t">{{ menus.title }}</text>
+			</view>
+			<view class="menu-wrap">
+				<view class="item" v-for="(val, i) in menus.children" :key="i" @click="to(val)">
+					<image :src="val.miniIcon" mode="aspectFit" class="icon"></image>
+					<view class="info">
+						<view class="title">
+							<text class="t">{{ val.title }}</text>
+						</view>
+						<view class="intro">
+							<text class="t">{{ val.intro || '-' }}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+
+function to(item) {
+	uni.navigateTo({
+		url: item.miniPath
+	});
+}
+
+const menus = ref({});
+
+onLoad(() => {
+	let pathObj = uni.getStorageSync('secondaryPageMenus');
+	pathObj.children = pathObj.children.filter((item) => {
+		return item.miniPath !== '';
+	});
+	console.log(pathObj);
+	menus.value = pathObj;
+});
+</script>
+
+<style>
+page {
+	background-color: #f8f8f8;
+}
+</style>
+<style scoped lang="scss">
+.container {
+	padding: 0 28upx 28upx;
+	.row {
+		.header {
+			padding: 28upx 0;
+			.t {
+				font-size: 32upx;
+				font-weight: bold;
+			}
+		}
+		.menu-wrap {
+			display: grid;
+			grid-template-columns: 1fr;
+			grid-template-rows: auto;
+			grid-column-gap: 28upx;
+			grid-row-gap: 28upx;
+			.item {
+				display: flex;
+				background-color: #fff;
+				padding: 20upx;
+				border-radius: 20upx;
+				.icon {
+					$size: 80upx;
+					width: $size;
+					height: $size;
+					flex-shrink: 0;
+				}
+				.info {
+					display: flex;
+					padding-left: 20upx;
+					flex-direction: column;
+					.title {
+						.t {
+							font-size: 28upx;
+							font-weight: bold;
+						}
+					}
+					.intro {
+						.t {
+							font-size: 28upx;
+							color: #999;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+</style>