cfc/cfc-frontend/pages/discover/components/CircleCard.vue

<template>
  <view class="circle-card" :class="{ compact: compact }" @tap="$emit('click')">
    <view class="circle-card-left">
      <view class="circle-icon-wrap" :style="{ background: iconBg(type) }">
        <text class="circle-icon">{{ typeIcon(type) }}</text>
      </view>
    </view>
    <view class="circle-card-body">
      <text class="circle-name">{{ circle.name }}</text>
      <text class="circle-source">{{ sourceLabel(matchSource) }}</text>
    </view>
    <view class="circle-card-right">
      <text class="circle-count">{{ memberCount }}人</text>
    </view>
  </view>
</template>

<script>
import { BrandColors } from '../../../utils/brand-colors.js'
export default {
  name: 'CircleCard',
  props: {
    circle: {
      type: Object,
      required: true
    },
    compact: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    type: function() {
      return this.circle && this.circle.type || 'topic'
    },
    matchSource: 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}'
    },
    iconBg: function(type) {
      var map = {
        activity: '#E0F7FA',
        ability: BrandColors.tintPurpleSoft,
        health: BrandColors.tintOrangeSoft,
        product: BrandColors.tintGreenSoft,
        provider: '#E3F2FD',
        topic: BrandColors.tintPinkSoft,
        hobby: '#FFF8E1'
      }
      return map[type] || '#F5F5F5'
    },
    sourceLabel: function(source) {
      var map = {
        activity: '源于共同活动',
        assessment: '源于共同测评',
        health_report: '源于健康状况',
        product: '源于共同商品',
        teacher: '源于同一规划师',
        article: '源于共同阅读',
        game: '源于共同游戏'
      }
      return map[source] || '源于共同兴趣'
    }
  }
}
</script>

<style scoped lang="scss">
.circle-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: $app-surface;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  margin-bottom: 12rpx;
}
.circle-card:active {
  opacity: 0.8;
}
.circle-card.compact {
  padding: 12rpx;
  margin-bottom: 0;
}
.circle-card-left {
  margin-right: 16rpx;
}
.circle-icon-wrap {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle-icon {
  font-size: 32rpx;
}
.circle-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.circle-name {
  font-size: 28rpx;
  font-weight: 600;
  color: $facade-text-strong;
}
.circle-source {
  font-size: 22rpx;
  color: $facade-text-muted;
}
.circle-card-right {
  margin-left: 12rpx;
}
.circle-count {
  font-size: 22rpx;
  color: $brand-primary;
  background: $uni-primary-pale;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}
</style>