jnpf_app/components/CommonPane/indexSystem.vue

<template>
	<view class="card">
		<view class="card-content">
			<view class="card-tabs u-flex">
				<view class="u-flex card-left">
					<view class="card-title">{{title}}</view>
				</view>
				<view @click="openPage" class="morebtn">更多<u-icon name="arrow-right" class="u-p-r-10"
						color="#666"></u-icon></view>
			</view>
			<view class="card-item">
				<!-- 遍历渲染业务图标 -->
				<view class="item u-flex-col" v-for="(item,index) in cardData" :key="index" @click="clickItem(item)">
					<view class="item-icon" :style="{ background: item.iconBackground || '#008cff' }">
						{{ console.log(imgId[item.id],'imgId[item.id]判断') }}
						{{ console.log(imgId,'imgId') }}
						{{ console.log(item.id,'item.id') }}
						<image v-show="!!imgId[item.id]" class="item-img" :src="`/static/image/${item.id}.png`"></image>
						<!-- 使用 iconify-icon 渲染 ep 系列图标 -->
						<!-- <iconify-icon 
							:icon="item.icon" 
							color="#ffffff"    
							width="24"        
							height="24"
						></iconify-icon> -->
					</view>
					<view class="item-title u-m-t-8">{{item.name}}</view>
				</view>
				<view v-if="showAdd" class="item u-flex-col u-col-center" @click="add">
					<text class="u-font-40 item-icon more">+</text>
					<text class="u-m-t-8 item-title">添加</text>
				</view>
			</view>
			<JnpfEmpty v-if="!cardData.length && type != 'collect' "></JnpfEmpty>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: "我的收藏"
			},
			menuList: {
				type: Array,
				default: () => []
			},
			// flowList: {
			// 	type: Array,
			// 	default: () => []
			// },
			showAdd: {
				type: Boolean,
				default: false
			},
			type: {
				type: String,
				default: "collect"
			},
			flowEnabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				tabList: [{
					name: '应用功能',
					type: 'menu'
				}],
				current: 0,
				cardData: [],
				userInfo: {}
			}
		},
		computed: {
			tabType() {
				return this.tabList[this.current].type
			},
			imgId(){
				return {
					'1963446794006355970' : '动土作业',
					'1963872316314165250' : '动火作业',
					'1964898396173070337' : '有限空间',
					'1964261054499336194' : '临时用电',
					'1964253329070571521' : '高处作业',
					'1964210049770401793' : '吊装作业'
				}
			}
		},
		watch: {
			menuList: {
				handler(val) {
					console.log(this.current,'this.current---')
					this.cardData = this.menuList
				},
				immediate: true
			},
			// flowList: {
			// 	handler(val) {
			// 		console.log(this.current,'this.current---')
			// 		console.log(this.menuList,'this.menuList---')
			// 		// if (this.current == 0) this.cardData = this.menuList
			// 		this.cardData = this.menuList
			// 	},
			// 	immediate: true
			// }
		},
		created() {
			this.userInfo = uni.getStorageSync('userInfo') || {}
			this.handleTabList()
		},
		methods: {
			handleTabList() {
				if (this.flowEnabled) {
					this.tabList.push({
						name: '发起审批',
						type: 'flow'
					})
				}
			},
			tabChange(index) {
				this.current = index;
				// if (this.tabType === 'menu')
				 this.cardData = this.menuList
				// if (this.tabType === 'flow') this.cardData = this.flowList
			},
			clickItem(item) {
				this.$emit('launch', {
					...item,
					tabType: this.tabType
				})
			},
			openPage() {
				this.$emit('openPage', '/pages/apply/menu/index')
			},
			add() {
				let url = this.tabType === 'menu' ? '/pages/apply/allAppApply/index' :
					'/pages/workFlow/allAppWorkFlow/index'
				this.$emit('addApp', url)
			}
		}
	}
</script>

<style lang="scss">
	.card {
		margin-top: 20rpx;

		&-title {
			padding: 0 20rpx;
			color: #303133;
			font-size: 36rpx;
			margin-bottom: 10rpx;
			font-weight: 500;
		}

		&-content {
			width: 100%;
			height: 100%;
			background-color: #fff;
			padding-top: 15rpx;

			.card-tabs {
				width: 100%;
				justify-content: space-between;

				.card-left {}

				.morebtn {
					color: #666;
				}
			}

			.card-item {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;

				.item {
					width: 33.33%;
					padding: 10px;
					justify-content: center;
					align-items: center;
					padding: 30rpx 0;

					.item-icon {
						width: 50px;
						height: 50px;
						/* 关键：改为 flex 布局，让图标居中 */
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						border-radius: 18px;
						font-size: 24px;
						background-color: #f0f2f6;
						/* 移除原有伪类样式，避免干扰 */
						&:before {
							margin: 0;
						}
					}
					.item-img {
						width: 60%;
						height: 60%;
					}

					.more {
						background: #ececec;
						color: #666;
						font-size: 1.5625rem;
						/* 保持添加按钮的居中 */
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.item-title {
						width: 92px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						text-align: center;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>