rating/components/RatingCard/RatingCard.vue

<template>
  <view class="rating-card" @tap="handleCardTap">
    <view class="card-header">
      <image class="item-avatar" :src="FILE_BASE_URL + item.avatarUrl" mode="aspectFill" />
      <text class="item-name">{{ item.name }}</text>
      <view class="rank-tag" v-if="item.rank <= 3">NO.{{ item.rank }}</view>
      <view class="flex-spacer"></view>
      <text class="item-score">{{ item.scoreAvg }}</text>
    </view>
    <view class="quote-box" v-if="item.quote">
      <text class="quote-text">“{{ item.quote }}”</text>
    </view>
    <view class="action-group">
      <view 
        class="action-item" 
        v-for="(action, aIndex) in actions" 
        :key="aIndex" 
        :class="{ active: item.userAction === action.label }"
        @tap.stop="handleAction(action)"
      >
        <view class="action-icon-wrap" :class="'icon-' + action.value">
          <text class="emoji">{{ action.emoji }}</text>
        </view>
        <text class="action-name">{{ action.label }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { FILE_BASE_URL } from "@/utils/constants";

const actions = [
  { label: '拉', value: 'terrible', emoji: '👎', score: 2, scoreType:1 },
  { label: 'NPC', value: 'bad', emoji: '😐', score: 4, scoreType: 2},
  { label: '人上人', value: 'ok', emoji: '🙂', score: 6, scoreType: 3},
  { label: '顶级', value: 'good', emoji: '🔥', score: 8, scoreType: 4},
  { label: '夯', value: 'god', emoji: '👑', score: 10, scoreType: 5 }
];
const props = defineProps({
  item: {
    type: Object,
    required: true,
    default: () => ({})
  }
});

const emit = defineEmits(['item-click', 'action-click']);

const handleCardTap = () => {
  emit('item-click', props.item.id);
};

const handleAction = async (action) => {
  emit('action-click', props.item, action);
};
</script>

<style lang="scss" scoped>
.rating-card {
  background-color: #fff;
  border-radius: 32rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.02);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.item-avatar {
  width: 90rpx;
  height: 90rpx;
  border-radius: 20rpx;
  margin-right: 24rpx;
  background-color: #eee;
}

.item-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #111;
  margin-right: 16rpx;
}

.rank-tag {
  background-color: #eef1ff;
  color: #2953ff;
  font-size: 22rpx;
  font-weight: bold;
  padding: 4rpx 16rpx;
  border-radius: 10rpx;
}

.flex-spacer {
  flex: 1;
}

.item-score {
  font-size: 48rpx;
  font-weight: 900;
  color: #2953ff;
  font-family: 'DIN Alternate', sans-serif;
}

.quote-box {
  background-color: #f9fafe;
  border-radius: 0 20rpx 20rpx 20rpx;
  padding: 24rpx 28rpx;
  margin-bottom: 36rpx;
  border-left: 6rpx solid #c9d4ff;
}

.quote-text {
  font-size: 30rpx;
  color: #555;
  font-style: italic;
  line-height: 1.5;
}

.action-group {
  display: flex;
  justify-content: space-between;
  padding: 0 10rpx;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.action-icon-wrap {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  background-color: #f5f6fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12rpx;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.emoji {
  font-size: 44rpx;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.2s;
}

.action-name {
  font-size: 24rpx;
  color: #999;
}

.action-item.active .action-icon-wrap {
  background-color: #eef1ff;
  transform: scale(1.15);
  box-shadow: 0 8rpx 16rpx rgba(41, 83, 255, 0.15);
}

.action-item.active .emoji {
  filter: grayscale(0%);
  opacity: 1;
}

.action-item.active .action-name {
  color: #2953ff;
  font-weight: bold;
}
</style>