jnpf_app/pages/apply/menu/index.vue

<template>
	<view class="menu-v">
		<view class="search-box u-m-b-20">
			<u-search :placeholder="$t('app.apply.pleaseKeyword')" v-model="keyword" height="72" :show-action="false"
				@change="search" bg-color="#f0f2f6" shape="square" style="width: 100%;">
			</u-search>
		</view>
		<mescroll-body ref="mescrollRef" @down="downCallback" :down="downOption" :sticky="false" @up="upCallback"
			:up="upOption" :bottombar="false" @init="mescrollInit" :top="mescrollTop">
			<view class="workFlow-list">
 			<view class="caption u-line-1">业务表单</view>
 			<view class="u-flex u-flex-wrap item-container">
 			  <view class="item u-flex-col u-col-center" 
 			        v-for="(item, i) in menuList" 
 			        :key="item.id"  
 			        @click="handelClick(item)">
 			    <!-- 渲染图标 -->
 			    <view class="item-icon" :style="{ background: item.iconBackground || '#008cff' }">
						<!-- 使用 iconify-icon 渲染 ep 系列图标 -->
						<iconify-icon 
							:icon="item.icon" 
							color="#ffffff"    
							width="24"        
							height="24"
						></iconify-icon>
				</view>
 			    <!-- 渲染名称 -->
 			    <text class="u-font-24 u-line-1 item-text">{{item.name}}</text>
 			  </view>
 			</view>
</view>
		</mescroll-body>
	</view>
</template>
<script>
	import {
		getChildList
	} from "@/api/apply/apply.js";
	import {
		getMenuData
	} from "@/api/index/index";
	import resources from "@/libs/resources.js";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		useUserStore
	} from '@/store/modules/user'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				mescrollTop: 0,
				menuList: [],
				downOption: {
					use: true,
					auto: true,
				},
				upOption: {
					page: {
						num: 0,
						size: 50,
						time: null,
					},
					empty: {
						use: true,
						icon: resources.message.nodata,
						tip: this.$t('common.noData'),
						fixed: false,
						top: "560rpx",
					},
					textNoMore: this.$t('app.apply.noMoreData'),
				},
				keyword: "",
				fullName: "",
				key: +new Date(),
				listChild: [],
			};
		},
		computed: {
			token() {
				return uni.getStorageSync('token')
			},
			report() {
				return this.define.report;
			},
			pcURL() {
				return this.define.pcURL;
			},
		},
		onShow() {
			this.keyword = "";
			uni.$on('refresh', () => {
				this.menuList = [];
				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				})
			});
		},
		onUnload() {
			uni.$off("updateUsualList");
		},
		methods: {
			handelClick(item) {
				let url = "/pages/apply/dynamicModelList/index?config=" + this.jnpf.base64.encode(JSON.stringify(item))
				uni.navigateTo({
					url,
					fail: () => {
						this.$u.toast("暂无此页面");
					},
				});
			},
			upCallback(keyword) {
				let query = {
					keyword: this.keyword,
				};
				uni.showLoading({
					title: '正在加载',
					mask: true
				})
				getMenuData()
					.then((res) => {
						let list =res?.data || [];
						this.mescroll.endSuccess(list.length);
						this.menuList = list;
						console.log(this.menuList,'menuList---')
						// this.handleProperty(this.list)
						uni.hideLoading()
						this.key = +new Date();
						this.mescroll.endSuccess(this.menuList.length, false);
					}).catch(() => {
						this.mescroll.endSuccess(0);
						this.mescroll.endErr();
					});
			},
			handleProperty(list) {
				const loop = (par) => {
					par.map(o => {
						if (o?.propertyJson) {
							let propertyJson = JSON.parse(o.propertyJson);
							this.$set(o, "iconBackground", propertyJson.iconBackgroundColor || "");
							this.$set(o, "moduleId", propertyJson.moduleId || "");
						}
						if (o?.children && o?.children?.length) loop(o.children)
					})
				}
				loop(list)
			},
			search() {
				this.searchTimer && clearTimeout(this.searchTimer);
				this.searchTimer = setTimeout(() => {
					this.list = [];
					this.menuList = [];
					this.mescroll.resetUpScroll();
				}, 300);
			}
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
	}

	.menu-v {

		.search-box {
			height: 120rpx;
			padding: 0rpx 20rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
		}

		.common-block {
			background-color: #fff;
			margin: 20rpx 0;

			.caption {
				padding: 0 32rpx;
				line-height: 100rpx;
				justify-content: space-between;

				.caption-left {
					font-size: 36rpx;
					font-weight: bold;
				}

				.caption-right {}
			}

			.item {
				margin-bottom: 32rpx;
				width: 25%;

				.item-icon {
					width: 88rpx;
					height: 88rpx;
					margin-bottom: 8rpx;
					line-height: 82rpx;
					text-align: center;
					border-radius: 30rpx;
					color: #fff;
					font-size: 40rpx;

					&.more {
						background: #ececec;
						color: #666666;
						font-size: 50rpx;
					}
				}

				.item-text {
					width: 100%;
					text-align: center;
					padding: 0 16rpx;
				}
			}
		}

		.select-box {
			max-height: 600rpx;

			:deep(.u-drawer-content) {
				height: 100% !important;
			}
		}

		.popupItem {
			height: 400rpx;
			overflow-y: scroll;
			/* #ifdef APP-HARMONY || MP */
			padding-top: 40rpx;
			/* #endif */
		}

		.item {
			.currentItem {
				color: #2979ff;
			}

			.select-item {
				height: 100rpx;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				font-size: 30rpx;
				color: #303133;
				text-align: left;
				position: relative;

				&::after {
					content: " ";
					position: absolute;
					left: 2%;
					top: 0;
					box-sizing: border-box;
					width: 96%;
					height: 1px;
					transform: scale(1, 0.3);
					border: 0 solid #e4e7ed;
					z-index: 2;
					border-bottom-width: 1px;
				}

				.sysName {
					flex: 1;
					overflow: auto;
					min-width: 0;
				}
			}
		}
	}

	.menu-v {
  // 原有样式...

  .workFlow-list {
    background-color: #fff;
    padding: 20rpx;
    margin-bottom: 20rpx;

    // 分类标题样式
    .caption {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      padding: 0 20rpx 20rpx;
      border-bottom: 1px solid #f5f5f5;
    }

    // 项容器（让项横向排列）
    .item-container {
      padding: 20rpx;
    }

    // 单个项的样式
    .item {
      width: 25%; // 一行显示4个（可根据需求调整）
      margin-bottom: 30rpx;
      align-items: center;

      // 图标样式
      .item-icon {
        width: 88rpx;
        height: 88rpx;
        border-radius: 20rpx; // 圆角更美观
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10rpx;
      }

      // 文字样式
      .item-text {
        font-size: 24rpx;
        color: #333;
        text-align: center;
      }
    }
  }
}
</style>