fjrcloud-community-app/pages/index/index.vue

<!-- 智慧社区首页 - 严格还原蓝湖设计图 -->
<template>
  <view class="home-page">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 顶部小区选择器 -->
    <view class="community-selector">
      <text class="community-name" @tap="showCommunityPicker">{{ communityName }}</text>
      <text class="arrow-down">▼</text>

      <!-- 未认证 -->
      <text v-if="!isHouseAuth" class="not-auth" @tap="goCheck">未认证!请点击认证房屋!</text>
      <!-- 已认证但未选择房屋 -->
      <text v-else-if="!hasSelectedHouse" class="not-auth" @tap="goCheck">请选择房屋</text>
      <!-- 已认证且已选择房屋 -->
      <text v-else class="house-address" @tap="goCheck">{{ houseAddress }}</text>
    </view>

    <!-- Banner卡片 -->
    <view class="banner-card">
      <swiper 
        class="banner-swiper" 
        :indicator-dots="true" 
        :autoplay="true" 
        :interval="3000" 
        :circular="true"
        indicator-color="rgba(255, 127, 105, 0.3)"
        indicator-active-color="#FF7F69"
      >
        <swiper-item v-for="(item, index) in bannerList" :key="index" @tap="handleBannerTap(item)">
          <view class="banner-content">
            <view class="banner-text">
              <text class="banner-title">{{ item.title }}</text>
              <text class="banner-subtitle">{{ item.subtitle }}</text>
            </view>
            <image class="banner-icon" :src="item.icon" mode="aspectFit"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 功能入口网格 4x2 -->
    <view class="function-grid">
      <view 
        class="grid-item" 
        v-for="(item, index) in functionList" 
        :key="index"
        @tap="handleFunctionTap(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="notice-bar" @tap="goNotice">
      <view class="notice-tag">通知</view>
      <text class="notice-text">{{ noticeTitle || '暂无通知' }}</text>
      <image class="right-icon" src="/static/img/right-icon.png" mode="aspectFit" />
    </view>

    <!-- 法律小课堂 + 小区治理 -->
    <view class="info-cards">
      <view class="info-card card-purple" @tap="goLawClass">
        <text class="card-title">法律小课堂</text>
        <text class="card-desc">法律进小区平安伴邻里</text>
      </view>
      <view class="info-card card-orange" @tap="goCommunityGov">
        <text class="card-title">小区治理</text>
        <text class="card-desc">共治共管幸福家园</text>
      </view>
    </view>

    <!-- 小区活动 -->
    <view class="activity-section">
      <view class="section-header" @tap="goActivityList">
        <text class="section-title">小区活动</text>
        <view class="more-icon-wrapper">
          <image class="right-icon" src="/static/img/right-icon-black.png" mode="aspectFit" />
        </view>
      </view>
      
      <!-- 活动卡片 -->
      <view class="activity-card" @tap="goActivityDetail">
        <image class="activity-cover" src="/static/img/guest.png" mode="aspectFill"></image>
        <view class="activity-info">
          <view class="activity-location">
            <view class="location-tag">
              <image class="location-img" src="/static/img/me-icon7.png" mode="aspectFit" />
            </view>
            <text class="location-text">福清市音西街道融侨馨苑1号楼下</text>
          </view>
          <view class="activity-date">
            <text class="date-label">报名日期：</text>
            <text class="date-value">2025/06/30-2025/07/01</text>
          </view>
          <view class="activity-date">
            <text class="date-label">活动日期：</text>
            <text class="date-value">2025/07/05 12:00-2025/07/05 18:00</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

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

// 状态栏高度
const statusBarHeight = ref(0);

// 用户信息
const userStore = sheep.$store('user');
const userInfo = computed(() => userStore.userInfo || {});

// 小区房屋树
const communityTree = ref([]);
// 当前选中的小区名称（优先下拉选择，其次用户信息）
const selectedCommunityName = ref('');

// 当前小区名称
const communityName = computed(() => {
  return selectedCommunityName.value || userInfo.value.currentCommunityName || '请选择小区';
});

// 是否已完成房屋认证（根据 currentHouseId 判断）
const isHouseAuth = computed(() => {
  return !!userInfo.value.currentHouseId;
});

// 是否已选择房屋（currentHouseId 不为空）
const hasSelectedHouse = computed(() => {
  return !!userInfo.value.currentHouseId;
});

// 当前房屋地址
const houseAddress = computed(() => {
  return userInfo.value.currentHouseAddress || '';
});

// 通知数据
const noticeTitle = ref('');

// 查询最新通知
const fetchNotice = async () => {
  const { code, data } = await NoticeApi.getPage({ pageNo: 1, pageSize: 1 });
  if (code === 0 && data && data.list && data.list.length > 0) {
    noticeTitle.value = data.list[0].title;
  }
};

// Banner轮播数据
const bannerList = ref([]);

// 查询Banner列表
const fetchBannerList = async () => {
  const { code, data } = await NoticeApi.getBannerList(1);
  if (code === 0 && data && data.length > 0) {
    bannerList.value = data.map((item) => ({
      id: item.id,
      title: item.name,
      subtitle: '',
      icon: item.picUrl,
      url: item.url,
    }));
  }
};

// 功能入口列表（静态配置已注释，改为接口动态获取）
/*
const functionListStatic = [
  { label: '工作计划', icon: '/static/img/Group_1.png', bgGradient: 'linear-gradient(35deg, #FF7F69 0%, #FC5A5D 100%)', path: '/pages/sub/community/dynamics' },
  { label: '业主投票', icon: '/static/img/Group_2.png', bgGradient: 'linear-gradient(35deg, #52C41A 0%, #36AD1A 100%)', path: '/pages/sub/community/daily' },
  { label: '收益公示', icon: '/static/img/Group_3.png', bgGradient: 'linear-gradient(35deg, #FFA940 0%, #FA8C16 100%)', path: '/pages/sub/income/index' },
  { label: '在线缴费', icon: '/static/img/Group_4.png', bgGradient: 'linear-gradient(35deg, #4096FF 0%, #1890FF 100%)', path: '' },
  { label: '报事报修', icon: '/static/img/Group_5.png', bgGradient: 'linear-gradient(35deg, #69B1FF 0%, #4096FF 100%)', path: '' },
  { label: '物业人员', icon: '/static/img/Group_6.png', bgGradient: 'linear-gradient(35deg, #9254DE 0%, #722ED1 100%)', path: '/pages/sub/staff/index' },
  { label: '业委会组织', icon: '/static/img/Group_7.png', bgGradient: 'linear-gradient(35deg, #7B61FF 0%, #597EF7 100%)', path: '' },
  { label: '更多服务', icon: '/static/img/Group_8.png', bgGradient: 'linear-gradient(35deg, #36CFC9 0%, #13C2C2 100%)', path: '' },
];
*/
const functionList = 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%)',
];

// 查询功能入口列表
const fetchFunctionList = async () => {
  const { code, data } = await NoticeApi.getMiniAppConfigList(1);
  if (code === 0 && data && data.length > 0) {
    functionList.value = data.map((item, index) => ({
      label: item.name,
      icon: item.icon,
      path: item.url,
      bgGradient: bgGradientPresets[index % bgGradientPresets.length],
    }));
  }
};

onLoad(() => {
  // 获取状态栏高度
  const systemInfo = uni.getSystemInfoSync();
  statusBarHeight.value = systemInfo.statusBarHeight || 0;
  // 加载小区房屋树
  fetchCommunityTree();
  // 加载最新通知
  fetchNotice();
  // 加载Banner
  fetchBannerList();
  // 加载功能入口
  fetchFunctionList();
});

onShow(() => {
  // 每次进入首页刷新用户信息，确保小区房屋信息最新
  if (userStore.isLogin) {
    userStore.getInfo();
  }
});

// 获取小区房屋树
const fetchCommunityTree = async () => {
  const { code, data } = await MemberHouseApi.getCommunityTree();
  if (code === 0 && data && data.length > 0) {
    communityTree.value = data;
    // 默认展示第一个小区名称
    selectedCommunityName.value = data[0].communityName;
  }
};

// 级联选择小区和房屋
const showCommunityPicker = () => {
  if (!communityTree.value.length) {
    uni.showToast({ title: '暂无小区数据', icon: 'none' });
    return;
  }

  // 第一级：选择小区
  const communityNames = communityTree.value.map((item) => item.communityName);
  uni.showActionSheet({
    itemList: communityNames,
    success: (communityRes) => {
      const selectedCommunity = communityTree.value[communityRes.tapIndex];
      selectedCommunityName.value = selectedCommunity.communityName;

      // 第二级：选择房屋
      const houses = selectedCommunity.houses || [];
      if (houses.length > 0) {
        const houseNames = houses.map((item) => item.fullAddress || `${item.buildingNo}${item.unitNo}${item.roomNo}`);
        uni.showActionSheet({
          itemList: houseNames,
          success: async (houseRes) => {
            const selectedHouse = houses[houseRes.tapIndex];
            // 调用切换房屋接口
            const switchRes = await MemberHouseApi.switchHouse({
              memberHouseId: selectedHouse.memberHouseId,
              houseId: selectedHouse.houseId,
              communityId: selectedCommunity.communityId,
            });
            if (switchRes.code === 0) {
              // 切换成功后刷新用户信息
              await userStore.getInfo();
              uni.showToast({ title: '切换成功', icon: 'success' });
            }
          }
        });
      }
    }
  });
};

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

// 通知
const goNotice = () => {
  uni.navigateTo({ url: '/pages/sub/notice/list' });
};

// 跳转登录页
const goLogin = () => {
  uni.navigateTo({ url: '/pages/index/login-page' });
};

const goCheck = () => {
  if (!isHouseAuth.value) {
    // 未认证/未选择房屋，跳转认证表单
    uni.navigateTo({ url: '/pages/index/check-page' });
  } else {
    // 已认证且已选择房屋，跳转切换房号页面
    uni.navigateTo({ url: '/pages/index/switch-house' });
  }
};

// 法律小课堂
const goLawClass = () => {
  uni.navigateTo({ url: '/pages/sub/knowledge/classroom?tab=0', fail: (err) => { console.error('跳转失败', err); } });
};

// 小区治理
const goCommunityGov = () => {
  uni.navigateTo({ url: '/pages/sub/knowledge/classroom?tab=1', fail: (err) => { console.error('跳转失败', err); } });
};

// 活动列表
const goActivityList = () => {
  uni.navigateTo({ url: '/pages/sub/activity/list' });
};

// 活动详情
const goActivityDetail = () => {
  uni.navigateTo({ url: '/pages/sub/activity/detail?id=1' });
};

// Banner点击跳转
const handleBannerTap = (item) => {
  if (!item.url) return;
  // 外部链接用webview打开
  if (item.url.startsWith('http')) {
    uni.navigateTo({ url: `/pages/public/webview?url=${encodeURIComponent(item.url)}` });
  } else {
    // 内部页面直接跳转
    uni.navigateTo({ url: item.url });
  }
};
</script>

<style lang="less">
// 页面容器
.home-page {
  min-height: 100vh;
  background-color: #F5F7FA;
  padding-bottom: 120rpx;
}

// 状态栏占位
.status-bar {
  width: 100%;
  background-color: #F5F7FA;
}

// 小区选择器
.community-selector {
  display: flex;
  align-items: center;
  padding: 20rpx 32rpx;
  
  .community-name {
    font-size: 36rpx;
    font-weight: 600;
    color: #333333;
    font-family: 'PingFang SC', sans-serif;
  }
  
  .arrow-down {
    font-size: 20rpx;
    color: #999999;
    margin-left: 8rpx;
  }

  .not-auth{
    margin-left:30rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 24rpx;
    font-family: 'PingFang SC', sans-serif;
  }

  .house-address {
    margin-left: 30rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 24rpx;
    color: #666666;
    font-family: 'PingFang SC', sans-serif;
  }
}

// Banner卡片
.banner-card {
  height: 298rpx;
  margin: 0 24rpx 24rpx;
  padding: 45.8rpx 38rpx;
  background-color: #FFFFFF;
  border-radius: 38rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  
  .banner-swiper {
    width: 100%;
    height: 100%;
    
    .banner-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx;
      height: 100%;
      
      .banner-text {
        flex: 1;
        
        .banner-title {
          display: block;
          font-size: 44rpx;
          font-weight: 600;
          color: #333333;
          margin-bottom: 12rpx;
          font-family: 'PingFang SC', sans-serif;
        }
        
        .banner-subtitle {
          display: block;
          font-size: 24rpx;
          color: #999999;
          font-family: 'PingFang SC', sans-serif;
        }
      }
      
      .banner-icon {
        width: 160rpx;
        height: 160rpx;
      }
    }
  }
}

// 功能入口网格
.function-grid {
  margin: 0 24rpx 24rpx;
  padding: 24rpx 16rpx;
  //background-color: #FFFFFF;
  border-radius: 24rpx;
  display: flex;
  flex-wrap: wrap;
  // box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  
  .grid-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24rpx;
    
    .icon-wrapper {
      width: 88rpx;
      height: 88rpx;
      border-radius: 34rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12rpx;
      
      .icon-img {
        // width: 48rpx;
        // height: 48rpx;
        width: 100%;
        height: 100%;
      }
    }
    
    .icon-label {
      font-size: 24rpx;
      color: #333333;
      font-family: 'PingFang SC', sans-serif;
    }
  }
}

// 通知栏
.notice-bar {
  margin: 0 24rpx 50rpx;
  padding: 20rpx 24rpx;
  background-color: #FFF0E5;
  border-radius: 19rpx;
  display: flex;
  align-items: center;
  
  .notice-tag {
    height: 40rpx;
    font-family: YouSheBiaoTiYuan, YouSheBiaoTiYuan;
    font-weight: 400;
    font-size: 31rpx;
    color: #333333;
    text-align: center;
    font-style: normal;
    text-transform: none;
    flex-shrink: 0;
    margin-right: 16rpx;
  }
  
  .notice-text {
    flex: 1;
    min-width: 0;
    font-size: 26rpx;
    color: #666666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'PingFang SC', sans-serif;
  }
  
  .right-icon {
    width: 24rpx;
    height: 24rpx;
    margin-left: 8rpx;
    flex-shrink: 0;
  }
}

// 信息卡片（法律小课堂 + 小区治理）
.info-cards {
  margin: 0 24rpx 38rpx;
  display: flex;
  gap: 16rpx;
  
  .info-card {
    flex: 1;
    padding: 22rpx;
    border-radius: 16rpx;
    min-height: 140rpx;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    
    .card-title {
      // font-size: 30rpx;
      // font-weight: 600;
      // color: #FFFFFF;
      // margin-bottom: 8rpx;
      // font-family: 'PingFang SC', sans-serif;

      height: 36rpx;
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-weight: 500;
      font-size: 31rpx;
      color: #FFFFFF;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-bottom: 13rpx;
    }
    
    .card-desc {
      // font-size: 22rpx;
      // color: rgba(255, 255, 255, 0.85);
      // font-family: 'PingFang SC', sans-serif;

      height: 61rpx;
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-weight: 400;
      font-size: 23rpx;
      color: #E8E6FF;
      line-height: 34rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    
    &.card-purple {
      background: url('/static/img/home-left.png') no-repeat right bottom, linear-gradient(135deg, #9254DE 0%, #722ED1 100%);
      background-size: 180rpx auto, 100% 100%;
    }
    
    &.card-orange {
      background: url('/static/img/home-right.png') no-repeat right bottom, linear-gradient(135deg, #FFA940 0%, #FA8C16 100%);
      background-size: 180rpx auto, 100% 100%;
    }
  }
}

// 小区活动
.activity-section {
  margin: 0 24rpx;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
      font-family: 'PingFang SC', sans-serif;
    }
    
    .more-icon-wrapper {
      width: 42rpx;
      height: 42rpx;
      background: rgba(208, 199, 194, 0.27);
      border-radius: 71rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .right-icon {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
  
  .activity-card {
    background-color: #FFFFFF;
    border-radius: 31rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
    padding: 19rpx;
    
    .activity-cover {
      width: 100%;
      height: 320rpx;
      border-radius: 31rpx;
    }
    
    .activity-info {
      padding: 24rpx;
      
      .activity-title {
        display: block;
        font-size: 30rpx;
        font-weight: 600;
        color: #333333;
        margin-bottom: 16rpx;
        font-family: 'PingFang SC', sans-serif;
      }
      
      .activity-location {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        
        .location-tag {
          width: 53rpx;
          height: 59rpx;
          background: #FF9F7F;
          border-radius: 8rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20rpx;
          flex-shrink: 0;
          transform: skewX(-15deg);
          
          .location-img {
              width: 25rpx;
              height: 25rpx;
              transform: skewX(15deg);
              filter: brightness(0) invert(1);
            }
        }
        
        .location-text {
          flex: 1;
          min-width: 0;
          font-size: 30rpx;
          color: #666666;
          font-family: 'PingFang SC', sans-serif;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      
      .activity-date {
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;
        
        .date-label {
          font-size: 24rpx;
          color: #999999;
          font-family: 'PingFang SC', sans-serif;
        }
        
        .date-value {
          font-size: 24rpx;
          color: #666666;
          font-family: 'PingFang SC', sans-serif;
        }
      }
    }
  }
}
</style>