fjrcloud-community-app/pages/sub/service/more.vue

<!-- 更多服务 - 模仿首页功能入口网格 -->
<template>
  <s-layout title="更多服务">
    <view class="more-service-page">
      <!-- 标题区 -->
      <view class="page-header">
        <text class="page-subtitle">可在此处查看所有服务哦~</text>
      </view>

      <!-- 功能入口网格 4列自适应 -->
      <view class="service-grid" v-if="serviceList.length > 0">
        <view
          class="grid-item"
          v-for="(item, index) in serviceList"
          :key="index"
          @tap="handleServiceTap(item)"
        >
          <view class="icon-wrapper" :style="{ background: item.bgGradient }">
            <image class="icon-img" :src="item.icon" mode="aspectFit"></image>
          </view>
          <text class="icon-label">{{ item.label }}</text>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-else>
        <text class="empty-text">暂无数据</text>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import NoticeApi from '@/sheep/api/community/notice';

// 服务列表
const serviceList = ref([]);

// 背景色预设（按索引循环使用）
const bgGradientPresets = [
  'linear-gradient(35deg, #FF7F69 0%, #FC5A5D 100%)',
  'linear-gradient(35deg, #52C41A 0%, #36AD1A 100%)',
  'linear-gradient(35deg, #FFA940 0%, #FA8C16 100%)',
  'linear-gradient(35deg, #4096FF 0%, #1890FF 100%)',
  'linear-gradient(35deg, #69B1FF 0%, #4096FF 100%)',
  'linear-gradient(35deg, #9254DE 0%, #722ED1 100%)',
  'linear-gradient(35deg, #7B61FF 0%, #597EF7 100%)',
  'linear-gradient(35deg, #36CFC9 0%, #13C2C2 100%)',
];

// 查询服务列表（position=2）
const fetchServiceList = async () => {
  const { code, data } = await NoticeApi.getMiniAppConfigList(2);
  if (code === 0 && data && data.length > 0) {
    serviceList.value = data.map((item, index) => ({
      label: item.name,
      icon: item.icon,
      path: item.url,
      bgGradient: bgGradientPresets[index % bgGradientPresets.length],
    }));
  }
};

// 服务点击
const handleServiceTap = (item) => {
  const path = item.path ? item.path.trim() : '';
  if (path && path !== '/') {
    uni.navigateTo({ url: path });
  } else {
    uni.showToast({ title: `${item.label}功能开发中`, icon: 'none' });
  }
};

onLoad(() => {
  fetchServiceList();
});
</script>

<style lang="scss" scoped>
.more-service-page {
  min-height: 100vh;
  background-color: #F5F5F5;
  padding: 24rpx;

  .page-header {
    margin-bottom: 32rpx;

    .page-title {
      display: block;
      font-size: 40rpx;
      font-weight: 600;
      color: #333333;
      font-family: 'PingFang SC', sans-serif;
      margin-bottom: 12rpx;
    }

    .page-subtitle {
      display: block;
      font-size: 28rpx;
      color: #999999;
      font-family: 'PingFang SC', sans-serif;
    }
  }

  .service-grid {
    background-color: #FFFFFF;
    border-radius: 24rpx;
    padding: 32rpx 16rpx;
    display: flex;
    flex-wrap: wrap;

    .grid-item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 32rpx;

      .icon-wrapper {
        width: 88rpx;
        height: 88rpx;
        border-radius: 34rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12rpx;

        .icon-img {
          width: 100%;
          height: 100%;
        }
      }

      .icon-label {
        font-size: 24rpx;
        color: #333333;
        font-family: 'PingFang SC', sans-serif;
      }
    }
  }

  .empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120rpx 0;
    background-color: #FFFFFF;
    border-radius: 24rpx;

    .empty-text {
      font-size: 28rpx;
      color: #999999;
      font-family: 'PingFang SC', sans-serif;
    }
  }
}
</style>