fjrcloud-community-app/pages/public/community/dynamics.vue

<!-- 社区动态页面 -->
<template>
  <s-layout title="社区动态" navbar="inner">
    <view class="community-dynamics-page">
      <!-- Tab 切换栏 -->
      <view class="tab-bar">
        <view 
          class="tab-item" 
          v-for="(tab, index) in tabList" 
          :key="index"
          :class="{ active: currentTab === index }"
          @tap="switchTab(index)"
        >
          <text class="tab-text">{{ tab }}</text>
          <view class="tab-indicator" v-if="currentTab === index"></view>
        </view>
      </view>

      <!-- 动态列表 -->
      <view class="dynamics-list">
        <view 
          class="dynamics-item" 
          v-for="(item, index) in dynamicsList" 
          :key="index"
          @tap="goDetail(item)"
        >
          <!-- 封面图 -->
          <image class="item-cover" :src="item.cover" mode="aspectFill" />
          
          <!-- 内容区 -->
          <view class="item-content">
            <text class="item-title">{{ item.title }}</text>
            <view class="item-footer">
              <text class="item-views">{{ item.views }}</text>
              <text class="item-date">{{ item.date }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="dynamicsList.length === 0">
        <text class="empty-text">暂无数据</text>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// Tab 列表
const tabList = ref(['全部', '物业', '业委会', '社区']);
const currentTab = ref(0);

// 动态列表
const dynamicsList = ref([
  {
    id: 1,
    title: '社区动态标题xxxx操作手册--如何邀请访客',
    cover: '/static/img/guest.png',
    views: '1.2万播放',
    date: '2021/02/21'
  },
  {
    id: 2,
    title: '社区动态标题xxxx操作手册--如何邀请访客',
    cover: '/static/img/guest.png',
    views: '1.2万播放',
    date: '2021/02/21'
  },
  {
    id: 3,
    title: '社区动态标题xxxx操作手册--如何邀请访客',
    cover: '/static/img/guest.png',
    views: '1.2万播放',
    date: '2021/02/21'
  },
  {
    id: 4,
    title: '社区动态标题xxxx操作手册--如何邀请访客',
    cover: '/static/img/guest.png',
    views: '1.2万播放',
    date: '2021/02/21'
  }
]);

// 页面加载
onLoad((options) => {
  if (options.tab) {
    currentTab.value = parseInt(options.tab);
  }
  loadDynamicsList();
});

// 切换 Tab
function switchTab(index) {
  currentTab.value = index;
  loadDynamicsList();
}

// 加载动态列表
async function loadDynamicsList() {
  // TODO: 调用API获取动态列表
  // const { code, data } = await DynamicsApi.getDynamicsList({ tab: currentTab.value });
  // if (code === 0) {
  //   dynamicsList.value = data.list || [];
  // }
}

// 跳转详情
function goDetail(item) {
  uni.navigateTo({
    url: `/pages/public/community/dynamics-detail?id=${item.id}`
  });
}
</script>

<style lang="scss" scoped>
/* 页面容器 */
.community-dynamics-page {
  min-height: 100vh;
  background-color: #F5F5F5;
}

/* Tab 切换栏 */
.tab-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #FFFFFF;
  padding: 24rpx 0;
  position: sticky;
  top: 0;
  z-index: 10;

  .tab-item {
    position: relative;
    padding: 8rpx 16rpx;

    .tab-text {
      font-size: 30rpx;
      color: #999999;
      transition: all 0.3s;
    }

    &.active .tab-text {
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
    }

    .tab-indicator {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 48rpx;
      height: 6rpx;
      background: linear-gradient(90deg, #FF7F69 0%, #FC5A5D 100%);
      border-radius: 3rpx;
    }
  }
}

/* 动态列表 */
.dynamics-list {
  padding: 24rpx 32rpx;
}

/* 动态项 */
.dynamics-item {
  display: flex;
  background-color: #FFFFFF;
  border-radius: 24rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

  .item-cover {
    width: 240rpx;
    height: 180rpx;
    border-radius: 16rpx;
    flex-shrink: 0;
  }

  .item-content {
    flex: 1;
    margin-left: 24rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .item-title {
      font-size: 30rpx;
      font-weight: 500;
      color: #333333;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .item-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .item-views {
        font-size: 24rpx;
        color: #999999;
      }

      .item-date {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
}

/* 空状态 */
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;

  .empty-text {
    font-size: 28rpx;
    color: #999999;
  }
}
</style>