bigdata_WX/pages/server/index.vue

<template>
	<view class="server-page">
		<!-- 状态栏占位 -->
    <view class="device-detail__header">
      <u-icon
        size="36"
        class="arrow-left"
        name="arrow-left"
        @click="goBack"
      ></u-icon>
      更多服务
    </view>

		<!-- 主内容区域 -->
		<view class="content-container">
			<!-- 加载状态 -->
			<view class="loading-container" v-if="loading">
				<u-loading mode="circle" size="80"></u-loading>
				<text class="loading-text">加载中...</text>
			</view>

			<!-- 空数据状态 -->
			<view class="empty-container" v-else-if="menuList.length === 0">
				<image :src="$imageURL + '/bigdata_app/newindex/empty.png'" mode="aspectFit" class="empty-img"></image>
				<text class="empty-text">暂无数据</text>
			</view>

			<!-- 菜单网格 -->
			<view class="menu-grid" v-else>
				<view
					class="menu-item"
					v-for="(item, index) in menuList"
					:key="item.pur_id || index"
				>
					<view class="menu-icon-wrap">
            <text class="menu-name">{{ item.purview_name }}</text>
            <view class="menu-icon-container">
              <view class="menu-icon" v-for="(child, childIndex) in item.children" :key="child.pur_id || childIndex" 
					    @click="handleMenuClick(child)"
            >
                <image :src="child.app_menu_icon || getDefaultIcon(child.icon)" mode="aspectFit" class="app_menu_icon"></image>
                <text class="menu-icon-text">{{ child.purview_name }}</text> 
              </view>
            </view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: true,
			menuList: []
		}
	},
	onLoad() {
		this.getMenuList()
	},
	methods: {
		// 获取菜单列表
		async getMenuList() {
			try {
				this.loading = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=user.login.user_login_info',
					method: 'POST',
					data: {
						is_app: 1
					}
				})
        console.log(res,'resresres')
				if (res.length > 0) {
					// 获取第一层数据
					this.menuList = res.filter(item => item.children && item.children.length > 0)
          console.log(this.menuList,'menuListmenuList')
				}
			} catch (error) {
				console.error('获取菜单列表失败:', error)
				uni.showToast({
					title: '获取菜单失败',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},

		// 获取默认图标
		getDefaultIcon(icon) {
			const iconMap = {
				'forecast': this.$imageURL + '/bigdata_app/newindex/cb.png',
				'sex-lure': this.$imageURL + '/bigdata_app/newindex/cb.png',
				'color-lure': this.$imageURL + '/bigdata_app/newindex/fz.png',
				'control': this.$imageURL + '/bigdata_app/newindex/fz.png',
				'weather': this.$imageURL + '/bigdata_app/newindex/qxyj.png',
				'seedling': this.$imageURL + '/bigdata_app/newindex/base.png',
				'disaster': this.$imageURL + '/bigdata_app/newindex/hj.png',
				'soil': this.$imageURL + '/bigdata_app/newindex/sqyj.png',
				'video': this.$imageURL + '/bigdata_app/newindex/jk.png',
				'irrigate': this.$imageURL + '/bigdata_app/newindex/guangai.png',
				'water': this.$imageURL + '/bigdata_app/newindex/guangai.png',
				'four-mood': this.$imageURL + '/bigdata_app/newindex/base.png',
				'expert': this.$imageURL + '/bigdata_app/newindex/knowledge.png',
				'data': this.$imageURL + '/bigdata_app/newindex/user.png',
				'setting': this.$imageURL + '/bigdata_app/newindex/user.png'
			}
			return iconMap[icon] || this.$imageURL + '/bigdata_app/newindex/base.png'
		},

		// 处理菜单点击
		handleMenuClick(item) {
			console.log('点击菜单:', item)

			// 根据不同的pur_id跳转到不同的页面
			const purId = item.pur_id

			// 虫情监测模块
			if (purId == 36 || purId == 426 || purId == 427 || purId == 44 || purId == 282 || purId == 40 || purId == 428 || purId == 202 || purId == 233) {
        uni.switchTab({
					url: '/pages/equipList2/index',
          success: () => {
            setTimeout(() => {
              uni.$emit('purId',purId);
            }, 50);
          }
				})
			}
			// 四情基地
			else if (purId == 25) {
				uni.navigateTo({
					url: '/pages/fourBase/index'
				})
			}else if(purId == 125){
        uni.navigateTo({
          url: '/pages/expertDiagnosis/index'
        })
      }
			else if (purId == 126) {
				uni.navigateTo({
					url: '/pages/expertDiagnosis/wormcase?name=虫情百科'
				})
			}
			// 用户管理 || purId == 156
			else if (purId == 29) {
				uni.navigateTo({
					url: '/pages/equipMange/index/index'
				})
			}
			else if (purId == 156) {
				uni.navigateTo({
					url: '/pages/afterSale/index'
				})
			}
			// 默认跳转到开发中页面
			else {
				uni.navigateTo({
					url: '/pages/index/developing'
				})
			}
		},

		// 返回上一页
		goBack() {
			uni.navigateBack({
				delta: 1
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.server-page {
	width: 100%;
	min-height: calc(100vh - 112rpx);
  padding-top: 112rpx;
  overflow-y: auto;
  background: linear-gradient(180deg, #D3F4E3 10.82%, #F5F6FA 16.29%, #f5f6fa00 100%), #F5F6FA;
}
.device-detail__header {
  width: 100%;
  font-size: 28rpx;
  color: #999;
  color: #042118;
  font-family: 'Source Han Sans CN VF';
  font-weight: 700;
  position: relative;
  text-align: center;
  .arrow-left {
    position: absolute;
    left: 32rpx;
    margin-right: 12rpx;
  }
}
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
	background-color: #fff;
}

.nav-bar {
	width: 100%;
	background-color: #fff;
	border-bottom: 1px solid #e5e5e5;

	.nav-bar-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 30rpx;

		.nav-back {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.nav-title {
			font-size: 36rpx;
			font-weight: 500;
			color: #333;
		}

		.nav-placeholder {
			width: 60rpx;
		}
	}
}

.content-container {
	padding: 30rpx;
	padding-bottom: 100rpx;
}

.loading-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 200rpx;

	.loading-text {
		margin-top: 30rpx;
		font-size: 28rpx;
		color: #999;
	}
}

.empty-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 200rpx;

	.empty-img {
		width: 300rpx;
		height: 300rpx;
	}

	.empty-text {
		margin-top: 30rpx;
		font-size: 28rpx;
		color: #999;
	}
}

.menu-grid {
	display: grid;
	gap: 30rpx 20rpx;

	.menu-item {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;

		

		.menu-icon-wrap {
			margin-bottom: 16rpx;
      .menu-name{
        color: #333333;
        font-family: "Source Han Sans CN VF";
        font-size: 28rpx;
        font-weight: 700;
      }
      .menu-icon-container{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20rpx;
        margin-top: 20rpx;
      }
      .menu-icon{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
			.app_menu_icon {
				width: 80rpx;
				height: 80rpx;
        margin-bottom: 8rpx;
        &:active {
          transform: scale(0.95);
          opacity: 0.8;
        }
			}
      .menu-icon-text{
        // 超出部分省略号
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #333333;
        text-align: center;
        font-family: "Source Han Sans CN VF";
        font-size: 24rpx;
        font-weight: 400;
      }
		}

		.menu-name {
			font-size: 24rpx;
			color: #333;
			text-align: center;
			line-height: 1.4;
			max-width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}
</style>