cfc/cfc-frontend/components/CircleDetail.vue

<template>
  <view class="circle-overlay" v-if="visible" @tap="$emit('close')">
    <view class="circle-modal" @tap.stop>
      <view class="circle-modal-header">
        <view class="circle-modal-icon-wrap">
          <text class="circle-modal-icon">{{ typeIcon(circleType) }}</text>
        </view>
        <text class="circle-modal-name">{{ circleName }}</text>
        <text class="circle-modal-source">{{ sourceLabel(circleSource) }}</text>
      </view>

      <view class="circle-modal-body">
        <view class="circle-modal-section">
          <text class="circle-modal-section-title">圈子成员 ({{ memberCount }}人)</text>
          <view class="circle-modal-members">
            <text class="circle-modal-members-placeholder">成员列表加载中...</text>
          </view>
        </view>
      </view>

      <view class="circle-modal-footer">
        <button
          v-if="!isMember"
          class="circle-btn circle-btn-join"
          @tap="$emit('join', circleId)">加入圈子</button>
        <button
          v-else
          class="circle-btn circle-btn-leave"
          @tap="$emit('leave', circleId)">退出圈子</button>
        <button
          class="circle-btn circle-btn-close"
          @tap="$emit('close')">关闭</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CircleDetail',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    circle: {
      type: Object,
      default: function() { return {} }
    },
    isMember: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    circleId: function() {
      return this.circle && this.circle.id || null
    },
    circleName: function() {
      return this.circle && this.circle.name || '未知圈子'
    },
    circleType: function() {
      return this.circle && this.circle.type || 'topic'
    },
    circleSource: function() {
      return this.circle && this.circle.matchSource || ''
    },
    memberCount: function() {
      return this.circle && this.circle.memberCount || 0
    }
  },
  methods: {
    typeIcon: function(type) {
      var map = {
        activity: '\u{1F3AF}',
        ability: '\u{1F9E0}',
        health: '\u{1F4AA}',
        product: '\u{1F6CD}',
        provider: '\u{1F468}\u200D\u{1F3EB}',
        topic: '\u{1F4AC}',
        hobby: '\u{1F3A8}'
      }
      return map[type] || '\u{1F30D}'
    },
    sourceLabel: function(source) {
      var map = {
        activity: '源于共同活动',
        assessment: '源于共同测评',
        health_report: '源于健康状况',
        product: '源于共同商品',
        teacher: '源于同一规划师',
        article: '源于共同阅读',
        game: '源于共同游戏'
      }
      return map[source] || '源于共同兴趣'
    }
  }
}
</script>

<style scoped>
.circle-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.circle-modal {
  width: 600rpx;
  max-height: 80vh;
  background: #fff;
  border-radius: 24rpx;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.circle-modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 30rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.circle-modal-icon-wrap {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  background: #FFF7ED;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}
.circle-modal-icon {
  font-size: 44rpx;
}
.circle-modal-name {
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}
.circle-modal-source {
  font-size: 24rpx;
  color: #999;
}
.circle-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20rpx 30rpx;
}
.circle-modal-section {
  margin-bottom: 20rpx;
}
.circle-modal-section-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #666;
  margin-bottom: 12rpx;
  display: block;
}
.circle-modal-members {
  min-height: 60rpx;
}
.circle-modal-members-placeholder {
  font-size: 24rpx;
  color: #ccc;
}
.circle-modal-footer {
  padding: 20rpx 30rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
}
.circle-btn {
  width: 100%;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
}
.circle-btn:active {
  opacity: 0.8;
}
.circle-btn-join {
  background: #F97316;
  color: #fff;
}
.circle-btn-leave {
  background: #fff;
  color: #FF4444;
  border: 2rpx solid #FF4444;
}
.circle-btn-close {
  background: #f5f5f5;
  color: #999;
}
</style>