cfc/cfc-frontend/pages/discover/circle-feed.vue

<template>
  <view class="feed-page">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-back" @tap="goBack">
        <text class="nav-back-icon">‹</text>
      </view>
      <text class="nav-title">{{ circleName }}</text>
      <view class="nav-placeholder"></view>
    </view>

    <!-- 圈子信息卡 -->
    <view class="circle-header-card" @tap="showMemberList">
      <view class="ch-avatar">{{ (circleName || '?').substring(0,1) }}</view>
      <view class="ch-info">
        <text class="ch-name">{{ circleName }}</text>
        <text class="ch-meta">{{ memberCount }} 位成员 · 点击查看详情</text>
      </view>
      <text class="ch-arrow">›</text>
    </view>

    <!-- 发布框 -->
    <view class="post-input-card" @tap="openPostEditor">
      <text class="pi-icon">✍️</text>
      <text class="pi-placeholder">分享今天的打卡或想法...</text>
    </view>

    <!-- 动态列表 -->
    <scroll-view class="feed-scroll" scroll-y :refresher-enabled="true" :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
      <view v-if="posts.length === 0 && !loading" class="empty-state">
        <text class="empty-icon">📭</text>
        <text class="empty-text">暂无动态，快来发第一条吧</text>
      </view>
      <view v-for="post in posts" :key="post.id" class="feed-item">
        <!-- 作者信息 -->
        <view class="feed-author">
          <view class="fa-avatar">{{ getAvatarText(post) }}</view>
          <view class="fa-info">
            <text class="fa-name">{{ getMemberName(post) }}</text>
            <text class="fa-time">{{ formatTime(post.createdAt) }}</text>
          </view>
          <text class="fa-type-badge" :class="'type-' + post.type">{{ typeLabel(post.type) }}</text>
        </view>

        <!-- 文字内容 -->
        <view class="feed-content" v-if="post.content">
          <text class="fc-text">{{ post.content }}</text>
        </view>

        <!-- 图片 -->
        <view class="feed-images" v-if="post.imageUrls && post.imageUrls.length > 0">
          <image
            v-for="(img, idx) in post.imageUrls"
            :key="idx"
            :src="img"
            mode="aspectFill"
            class="feed-img"
            @tap="previewImage(post.imageUrls, idx)"
          />
        </view>

        <!-- 操作栏 -->
        <view class="feed-actions">
          <view class="fa-item" :class="{ 'fa-active': post.liked }" @tap="toggleLike(post)">
            <text class="fa-icon">{{ post.liked ? '❤️' : '🤍' }}</text>
            <text class="fa-count">{{ post.likeCount || 0 }}</text>
          </view>
          <view class="fa-item" @tap="openCommentInput(post)">
            <text class="fa-icon">💬</text>
            <text class="fa-count">{{ post.commentCount || 0 }}</text>
          </view>
          <view class="fa-item" @tap="sharePost(post)">
            <text class="fa-icon">↗️</text>
            <text class="fa-count">分享</text>
          </view>
        </view>

        <!-- 评论列表 -->
        <view class="feed-comments" v-if="post.comments && post.comments.length > 0">
          <view class="comment-item" v-for="(c, idx) in post.comments.slice(0, 3)" :key="idx">
            <text class="c-name">{{ getMemberNameById(c.memberId) }}</text>
            <text class="c-text">{{ c.content }}</text>
          </view>
          <text class="more-comments" v-if="post.commentCount > 3" @tap="loadMoreComments(post)">查看全部 {{ post.commentCount }} 条评论</text>
        </view>

        <!-- 评论输入框（展开时） -->
        <view class="comment-input-area" v-if="post.showCommentInput">
          <input class="ci-input" placeholder="写评论..." v-model="post.commentText" @confirm="submitComment(post)" />
          <text class="ci-send" @tap="submitComment(post)">发送</text>
        </view>
      </view>
      <view class="loading-more" v-if="loadingMore">
        <text class="lm-text">加载中...</text>
      </view>
      <view class="end-hint" v-if="!hasMore && posts.length > 0">
        <text class="eh-text">— 没有更多了 —</text>
      </view>
      <view class="bottom-space"></view>
    </scroll-view>

    <!-- 发帖弹窗 -->
    <view class="modal-mask" v-if="showPostModal" @tap="closePostModal">
      <view class="modal-content" @tap.stop>
        <view class="modal-header">
          <text class="modal-title">发布动态</text>
          <text class="modal-close" @tap="closePostModal">✕</text>
        </view>
        <view class="type-selector">
          <view class="type-opt" :class="{ 'type-active': postType === t.value }" v-for="t in postTypes" :key="t.value" @tap="postType = t.value">
            <text class="to-icon">{{ t.icon }}</text>
            <text class="to-label">{{ t.label }}</text>
          </view>
        </view>
        <textarea class="post-textarea" placeholder="分享你的想法..." v-model="postContent" maxlength="500" />
        <view class="modal-footer">
          <button class="btn-publish" :disabled="!postContent.trim()" @tap="publishPost">发布</button>
        </view>
      </view>
    </view>

    <!-- 成员列表弹窗 -->
    <view class="modal-mask" v-if="showMemberModal" @tap="showMemberModal = false">
      <view class="modal-content modal-members" @tap.stop>
        <view class="modal-header">
          <text class="modal-title">圈子成员</text>
          <text class="modal-close" @tap="showMemberModal = false">✕</text>
        </view>
        <view class="member-list">
          <view class="member-item" v-for="m in members" :key="m.id">
            <view class="mi-avatar">{{ (m.nickname || '?').substring(0,1) }}</view>
            <text class="mi-name">{{ m.nickname || '未知成员' }}</text>
            <text class="mi-role" v-if="m.role === 'admin'">管理员</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getCircleFeed, getCircleMembers, createCirclePost, toggleCircleLike, addCircleComment, getCircleComments } from '@/utils/api.js'
import { parseDate } from '@/utils/format.js'

export default {
  data: function() {
    return {
      circleId: null,
      circleName: '',
      memberCount: 0,
      posts: [],
      loading: true,
      refreshing: false,
      loadingMore: false,
      hasMore: true,
      page: 1,
      pageSize: 10,
      showPostModal: false,
      showMemberModal: false,
      members: [],
      postType: 'text',
      postContent: '',
      postTypes: [
        { value: 'text', label: '文字', icon: '📝' },
        { value: 'checkin', label: '打卡', icon: '✅' },
        { value: 'diet', label: '饮食', icon: '🥗' },
        { value: 'exercise', label: '运动', icon: '🏃' },
        { value: 'sleep', label: '睡眠', icon: '😴' },
        { value: 'water', label: '饮水', icon: '💧' },
        { value: 'mood', label: '心情', icon: '😊' }
      ]
    }
  },
  onLoad: function(options) {
    this.circleId = options.circleId ? parseInt(options.circleId) : null
    this.circleName = options.name || '圈子'
    if (options.memberCount) this.memberCount = parseInt(options.memberCount)
    if (this.circleId) {
      this.loadFeed()
      this.loadMembers()
    }
  },
  methods: {
    goBack: function() {
      uni.navigateBack()
    },
    loadFeed: function() {
      var self = this
      self.loading = true
      getCircleFeed({ circleId: self.circleId, page: self.page, size: self.pageSize }).then(function(res) {
        if (res.code === 200 && Array.isArray(res.data)) {
          if (self.page === 1) {
            self.posts = res.data
          } else {
            self.posts = self.posts.concat(res.data)
          }
          self.hasMore = res.data.length >= self.pageSize
        }
      }).catch(function() {}).finally(function() {
        self.loading = false
        self.refreshing = false
        self.loadingMore = false
      })
    },
    loadMembers: function() {
      var self = this
      var memberId = uni.getStorageSync('currentChildId') || ''
      getCircleMembers(self.circleId, memberId).then(function(res) {
        if (res.code === 200 && Array.isArray(res.data)) {
          self.members = res.data
        }
      }).catch(function() {})
    },
    onRefresh: function() {
      this.page = 1
      this.hasMore = true
      this.loadFeed()
    },
    loadMore: function() {
      if (this.loadingMore || !this.hasMore) return
      this.page++
      this.loadingMore = true
      this.loadFeed()
    },
    openPostEditor: function() {
      var memberId = uni.getStorageSync('currentChildId') || ''
      if (!memberId) {
        uni.showToast({ title: '请先登录', icon: 'none' })
        return
      }
      this.postContent = ''
      this.postType = 'text'
      this.showPostModal = true
    },
    closePostModal: function() {
      this.showPostModal = false
    },
    publishPost: function() {
      var self = this
      var memberId = uni.getStorageSync('currentChildId') || ''
      if (!memberId) return
      if (!self.postContent.trim()) return
      createCirclePost({
        circleId: self.circleId,
        memberId: memberId,
        memberType: 'child',
        type: self.postType,
        content: self.postContent.trim()
      }).then(function(res) {
        if (res.code === 200) {
          self.showPostModal = false
          self.page = 1
          self.hasMore = true
          self.loadFeed()
          uni.showToast({ title: '发布成功', icon: 'success' })
        } else {
          uni.showToast({ title: res.message || '发布失败', icon: 'none' })
        }
      }).catch(function() {
        uni.showToast({ title: '发布失败，请重试', icon: 'none' })
      })
    },
    toggleLike: function(post) {
      var self = this
      var memberId = uni.getStorageSync('currentChildId') || ''
      if (!memberId) return
      toggleCircleLike({
        circleId: self.circleId,
        postId: post.id,
        memberId: memberId,
        memberType: 'child'
      }).then(function(res) {
        if (res.code === 200) {
          post.liked = res.data && res.data.liked
          post.likeCount = res.data && res.data.likeCount
        }
      }).catch(function() {})
    },
    openCommentInput: function(post) {
      post.showCommentInput = !post.showCommentInput
      if (post.showCommentInput && !post.comments) {
        var self = this
        var memberId = uni.getStorageSync('currentChildId') || ''
        if (!memberId) return
        getCircleComments({ postId: post.id }).then(function(res) {
          if (res.code === 200) {
            post.comments = res.data || []
          }
        }).catch(function() {})
      }
    },
    submitComment: function(post) {
      var self = this
      var memberId = uni.getStorageSync('currentChildId') || ''
      if (!memberId || !post.commentText.trim()) return
      addCircleComment({
        circleId: self.circleId,
        postId: post.id,
        memberId: memberId,
        memberType: 'child',
        content: post.commentText.trim()
      }).then(function(res) {
        if (res.code === 200) {
          post.commentText = ''
          post.commentCount = (post.commentCount || 0) + 1
          if (!post.comments) post.comments = []
          post.comments.push(res.data)
        }
      }).catch(function() {})
    },
    loadMoreComments: function(post) {
      // TODO: load all comments
    },
    sharePost: function(post) {
      uni.showToast({ title: '分享功能开发中', icon: 'none' })
    },
    showMemberList: function() {
      this.showMemberModal = true
    },
    previewImage: function(images, index) {
      uni.previewImage({ current: images[index], urls: images })
    },
    getAvatarText: function(post) {
      return 'A'
    },
    getMemberName: function(post) {
      return '我'
    },
    getMemberNameById: function(memberId) {
      for (var i = 0; i < this.members.length; i++) {
        if (this.members[i].memberId === memberId) {
          return this.members[i].nickname || '未知'
        }
      }
      return '未知成员'
    },
    formatTime: function(timeStr) {
      if (!timeStr) return ''
      var d = parseDate(timeStr)
      if (!d) return ''
      var h = d.getHours().toString()
      if (h.length < 2) h = '0' + h
      var m = d.getMinutes().toString()
      if (m.length < 2) m = '0' + m
      return h + ':' + m
    },
    typeLabel: function(type) {
      var map = {
        text: '文字', checkin: '打卡', diet: '饮食',
        exercise: '运动', sleep: '睡眠', water: '饮水', mood: '心情'
      }
      return map[type] || type
    },
    onScrollToLower: function() {
      this.loadMore()
    }
  }
}
</script>

<style scoped>
.feed-page {
  min-height: 100vh;
  background: #F5F7FA;
}
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding-top: env(safe-area-inset-top);
  background: #FFFFFF;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1rpx solid #f0f0f0;
}
.nav-back {
  width: 80rpx;
  display: flex;
  align-items: center;
  padding-left: 24rpx;
}
.nav-back-icon {
  font-size: 48rpx;
  color: #333;
}
.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}
.nav-placeholder { width: 80rpx; }

/* 圈子信息卡 */
.circle-header-card {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  padding: 24rpx 32rpx;
  margin-bottom: 16rpx;
}
.ch-avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8C42, #FFB366);
  color: #fff;
  font-size: 32rpx;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}
.ch-info { flex: 1; }
.ch-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  display: block;
}
.ch-meta {
  font-size: 22rpx;
  color: #999;
  margin-top: 4rpx;
  display: block;
}
.ch-arrow { font-size: 36rpx; color: #ccc; }

/* 发布框 */
.post-input-card {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  padding: 24rpx 32rpx;
  margin-bottom: 16rpx;
}
.pi-icon { font-size: 40rpx; margin-right: 20rpx; }
.pi-placeholder { font-size: 28rpx; color: #bbb; }

/* 滚动区域 */
.feed-scroll {
  height: calc(100vh - 400rpx);
}

/* 动态项 */
.feed-item {
  background: #FFFFFF;
  margin-bottom: 16rpx;
  padding: 24rpx 32rpx;
}
.feed-author {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}
.fa-avatar {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #E3F2FD;
  color: #1976D2;
  font-size: 24rpx;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
  flex-shrink: 0;
}
.fa-info { flex: 1; display: flex; flex-direction: column; }
.fa-name { font-size: 26rpx; font-weight: 600; color: #333; }
.fa-time { font-size: 20rpx; color: #999; margin-top: 2rpx; }
.fa-type-badge {
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  background: #FFF0E0;
  color: #FF8C42;
}

/* 内容 */
.feed-content { margin-bottom: 16rpx; }
.fc-text { font-size: 28rpx; color: #333; line-height: 1.7; }
.feed-images { display: flex; flex-wrap: wrap; margin-bottom: 16rpx; }
.feed-img {
  width: 220rpx;
  height: 220rpx;
  border-radius: 12rpx;
  margin-right: 12rpx;
  margin-bottom: 12rpx;
}

/* 操作栏 */
.feed-actions {
  display: flex;
  border-top: 1rpx solid #f5f5f5;
  padding-top: 16rpx;
}
.fa-item {
  display: flex;
  align-items: center;
  margin-right: 40rpx;
}
.fa-icon { font-size: 32rpx; margin-right: 6rpx; }
.fa-count { font-size: 22rpx; color: #999; }
.fa-active .fa-icon { transform: scale(1.1); }

/* 评论 */
.feed-comments { margin-top: 16rpx; padding-top: 16rpx; border-top: 1rpx solid #f5f5f5; }
.comment-item { display: flex; margin-bottom: 8rpx; }
.c-name { font-size: 24rpx; color: #FF8C42; font-weight: 600; margin-right: 8rpx; }
.c-text { font-size: 24rpx; color: #666; }
.more-comments { font-size: 22rpx; color: #999; margin-top: 8rpx; }
.comment-input-area {
  display: flex;
  align-items: center;
  margin-top: 12rpx;
  padding-top: 12rpx;
  border-top: 1rpx solid #f5f5f5;
}
.ci-input {
  flex: 1;
  background: #F5F5F5;
  border-radius: 30rpx;
  padding: 12rpx 20rpx;
  font-size: 26rpx;
  margin-right: 16rpx;
}
.ci-send { font-size: 26rpx; color: #FF8C42; font-weight: 600; }

/* 加载状态 */
.loading-more, .end-hint { text-align: center; padding: 24rpx 0; }
.lm-text, .eh-text { font-size: 24rpx; color: #ccc; }
.empty-state { text-align: center; padding: 120rpx 0; }
.empty-icon { font-size: 80rpx; display: block; margin-bottom: 16rpx; }
.empty-text { font-size: 26rpx; color: #ccc; }
.bottom-space { height: 40rpx; }

/* 弹窗 */
.modal-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal-content {
  width: 100%;
  max-height: 80vh;
  background: #FFFFFF;
  border-radius: 32rpx 32rpx 0 0;
  padding: 32rpx;
  overflow-y: auto;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}
.modal-title { font-size: 32rpx; font-weight: 600; color: #333; }
.modal-close { font-size: 32rpx; color: #999; }
.type-selector {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20rpx;
}
.type-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16rpx 24rpx;
  margin-right: 16rpx;
  margin-bottom: 16rpx;
  background: #F5F5F5;
  border-radius: 16rpx;
  border: 2rpx solid transparent;
}
.type-active { border-color: #FF8C42; background: #FFF0E0; }
.to-icon { font-size: 36rpx; margin-bottom: 6rpx; }
.to-label { font-size: 22rpx; color: #666; }
.post-textarea {
  width: 100%;
  height: 200rpx;
  background: #F8F8F8;
  border-radius: 16rpx;
  padding: 20rpx;
  font-size: 28rpx;
  line-height: 1.6;
  box-sizing: border-box;
}
.modal-footer { margin-top: 20rpx; }
.btn-publish {
  background: linear-gradient(135deg, #FF8C42, #FFB366);
  color: #fff;
  border: none;
  border-radius: 40rpx;
  font-size: 30rpx;
  font-weight: 600;
  padding: 24rpx 0;
}
.btn-publish[disabled] { opacity: 0.4; }

/* 成员列表 */
.modal-members { max-height: 60vh; }
.member-list { }
.member-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}
.mi-avatar {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #E3F2FD;
  color: #1976D2;
  font-size: 24rpx;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
}
.mi-name { font-size: 26rpx; color: #333; flex: 1; }
.mi-role { font-size: 20rpx; color: #FF8C42; background: #FFF0E0; padding: 4rpx 12rpx; border-radius: 12rpx; }
</style>