cfc/cfc-frontend/components/PearlDiagram.vue

<template>
  <view class="pearl-section">
    <view class="pearl-header">
      <text class="pearl-title">我的珍珠圈</text>
      <text class="pearl-discover-btn" @click="$emit('discover')">发现新圈子</text>
    </view>

    <view v-if="circles && circles.length > 0" class="pearl-scroll-wrap">
      <scroll-view class="pearl-scroll" scroll-x enable-flex>
        <view class="pearl-scroll-inner">
          <view
            class="pearl-item"
            v-for="item in circles"
            :key="item.id"
            @click="$emit('circleClick', item)">
            <view class="pearl-icon-wrap">
              <text class="pearl-icon">{{ typeIcon(item.type) }}</text>
            </view>
            <text class="pearl-name">{{ item.name }}</text>
            <text class="pearl-count">{{ item.memberCount || 0 }}人</text>
          </view>
          <view class="pearl-add-item" @click="$emit('discover')">
            <view class="pearl-add-icon-wrap">
              <text class="pearl-add-icon">+</text>
            </view>
            <text class="pearl-add-label">发现更多</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <view v-else class="pearl-empty">
      <text class="pearl-empty-text">暂无圈子</text>
      <text class="pearl-empty-action" @click="$emit('discover')">去发现新圈子</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PearlDiagram',
  props: {
    circles: {
      type: Array,
      default: function() { return [] }
    },
    isLoggedIn: {
      type: Boolean,
      default: false
    }
  },
  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}'
    }
  }
}
</script>

<style scoped>
.pearl-section {
  margin: 20rpx 20rpx 0;
}
.pearl-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}
.pearl-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}
.pearl-discover-btn {
  font-size: 24rpx;
  color: #F97316;
  font-weight: 500;
}
.pearl-scroll {
  white-space: nowrap;
  overflow: hidden;
}
.pearl-scroll-inner {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
  padding: 8rpx 0 16rpx;
}
.pearl-item {
  flex-shrink: 0;
  width: 160rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.pearl-item:active {
  opacity: 0.8;
}
.pearl-icon-wrap {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: #FFF7ED;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}
.pearl-icon {
  font-size: 36rpx;
}
.pearl-name {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
  text-align: center;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 140rpx;
}
.pearl-count {
  font-size: 20rpx;
  color: #999;
  margin-top: 4rpx;
}
.pearl-add-item {
  flex-shrink: 0;
  width: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 8rpx;
}
.pearl-add-item:active {
  opacity: 0.7;
}
.pearl-add-icon-wrap {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  border: 2rpx dashed #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}
.pearl-add-icon {
  font-size: 36rpx;
  color: #ccc;
}
.pearl-add-label {
  font-size: 22rpx;
  color: #999;
}
.pearl-empty {
  background: #fff;
  border-radius: 16rpx;
  padding: 40rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.pearl-empty-text {
  font-size: 26rpx;
  color: #ccc;
}
.pearl-empty-action {
  font-size: 26rpx;
  color: #F97316;
  font-weight: 500;
}
</style>