miniprogram-linejoy/src/components/QuestionCard/index.vue

<template>
    <view class="question-card" :class="{'question-card--answered': question.answeredAt}">
      <view class="question-card__header">
        <view class="question-card__user">
          <image :src="question.playerAvatar" mode="aspectFill" class="question-card__avatar" />
          <text class="question-card__name">{{ question.playerName }}</text>
        </view>
        <view class="question-card__time">{{ formatTime(question.createdAt) }}</view>
      </view>
      <view class="question-card__content">
        {{ question.content }}
      </view>
      <view v-if="question.answeredAt" class="question-card__answer">
        <view class="question-card__answer-label">回答</view>
        <view class="question-card__answer-content">{{ question.answer }}</view>
      </view>
      <view v-else-if="isHost" class="question-card__actions">
        <nut-button size="small" type="primary" @click="onAnswer('是')">是</nut-button>
        <nut-button size="small" type="primary" @click="onAnswer('否')">否</nut-button>
        <nut-button size="small" @click="onAnswer('不相关')">不相关</nut-button>
      </view>
    </view>
  </template>
  
  <script setup lang="ts">
  import { defineProps, defineEmits } from 'vue';
  import type { Question } from '@/types/game';
  import { formatDistanceToNow } from 'date-fns';
  import { zhCN } from 'date-fns/locale';
  
  interface QuestionWithAvatar extends Question {
    playerAvatar: string;
  }
  
  const props = defineProps({
    question: { 
      type: Object as () => QuestionWithAvatar, 
      required: true 
    },
    isHost: { 
      type: Boolean, 
      default: false 
    }
  });
  
  const emit = defineEmits(['answer']);
  
  const formatTime = (date: Date) => {
    return formatDistanceToNow(new Date(date), { 
      addSuffix: true,
      locale: zhCN
    });
  };
  
  const onAnswer = (answer: string) => {
    emit('answer', { 
      questionId: props.question.id, 
      answer 
    });
  };
  </script>
  
  <style lang="scss">
  .question-card {
    background-color: $background-color-light;
    border-radius: $border-radius-small;
    padding: $spacing-base;
    margin-bottom: $spacing-base;
    box-shadow: $shadow-light;
    
    &--answered {
      background-color: $background-color-gray;
    }
    
    &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: $spacing-small;
    }
    
    &__user {
      display: flex;
      align-items: center;
    }
    
    &__avatar {
      width: 24px;
      height: 24px;
      border-radius: $border-radius-circle;
      margin-right: $spacing-mini;
    }
    
    &__name {
      font-size: $font-size-small;
      color: $text-color-primary;
      font-weight: $font-weight-medium;
    }
    
    &__time {
      font-size: $font-size-small;
      color: $text-color-secondary;
    }
    
    &__content {
      font-size: $font-size-base;
      color: $text-color-primary;
      margin-bottom: $spacing-base;
      line-height: $line-height-base;
    }
    
    &__answer {
      background-color: rgba($primary-color, 0.05);
      padding: $spacing-small;
      border-radius: $border-radius-small;
      display: flex;
    }
    
    &__answer-label {
      font-size: $font-size-small;
      color: $primary-color;
      font-weight: $font-weight-medium;
      margin-right: $spacing-small;
    }
    
    &__answer-content {
      font-size: $font-size-small;
      color: $text-color-primary;
    }
    
    &__actions {
      display: flex;
      gap: $spacing-small;
    }
  }
  </style>