hanye-website/pages/faq/index.vue

<template>
  <div class="py-8">
    <div class="container-custom">
      <h1 class="text-3xl font-bold mb-8">{{ $t('faq.title') }}</h1>
      
      <div class="mb-8">
        <div class="relative">
          <input 
            type="text" 
            v-model="searchQuery" 
            :placeholder="$t('faq.searchPlaceholder')" 
            class="w-full px-4 py-3 border border-gray-300 rounded-md pl-10 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          <div class="absolute left-3 top-3 text-gray-400">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
        </div>
      </div>
      
      <ErrorBoundary :error="error">
        <div v-if="isLoading" class="flex justify-center py-12">
          <!-- 加载中 -->
          <div class="animate-spin h-8 w-8 border-4 border-blue-500 rounded-full border-t-transparent"></div>
        </div>
        
        <div v-else>
          <div v-if="filteredFaqs.length === 0" class="bg-yellow-50 border border-yellow-200 text-yellow-800 p-4 rounded-md">
            没有找到匹配的问题，请尝试其他关键词。
          </div>
          
          <div v-else class="space-y-6">
            <div v-for="faq in filteredFaqs" :key="faq.id" class="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
              <div class="p-6">
                <NuxtLink :to="`/faq/${faq.id}`" class="block">
                  <h2 class="text-xl font-semibold mb-2 text-blue-700 hover:text-blue-800">{{ faq.question }}</h2>
                  <p class="text-gray-600 line-clamp-2">{{ faq.answer }}</p>
                  <div class="mt-4 flex items-center text-blue-600">
                    <span class="text-sm font-medium">阅读全文</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                  </div>
                </NuxtLink>
              </div>
            </div>
          </div>
        </div>
      </ErrorBoundary>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * FAQ列表页面
 * 展示所有常见问题并支持搜索
 */
import { ref, computed, onMounted } from 'vue';
import { useErrorHandler } from '~/composables/useErrorHandler';

// FAQ接口定义
interface Faq {
  id: number;
  question: string;
  answer: string;
  category: string;
}

const { error, isLoading, wrapAsync } = useErrorHandler();
const faqs = ref<Faq[]>([]);
const searchQuery = ref('');

/**
 * 根据搜索条件过滤FAQ
 */
const filteredFaqs = computed(() => {
  if (!searchQuery.value.trim()) return faqs.value;
  
  const query = searchQuery.value.toLowerCase();
  return faqs.value.filter(faq => 
    faq.question.toLowerCase().includes(query) || 
    faq.answer.toLowerCase().includes(query)
  );
});

/**
 * 加载FAQ数据
 */
async function loadFaqs() {
  await wrapAsync(async () => {
    // 模拟API请求延迟
    await new Promise(resolve => setTimeout(resolve, 500));
    
    // 模拟数据，实际项目中应从API获取
    faqs.value = [
      {
        id: 1,
        question: '如何使用产品？',
        answer: '我们的产品设计简单直观，开箱即用。首先，打开包装并检查所有配件是否齐全。然后，按照说明书的步骤进行安装。如有任何问题，可以观看我们网站上的视频教程或联系客服。',
        category: '使用指南'
      },
      {
        id: 2,
        question: '产品有哪些保修政策？',
        answer: '我们为所有产品提供1年的标准保修服务，覆盖制造缺陷和材料问题。部分高端产品可享受最长3年的延长保修服务。保修期内，我们提供免费维修或更换服务。请注意，人为损坏、不当使用或自行拆卸不在保修范围内。',
        category: '售后服务'
      },
      {
        id: 3,
        question: '如何进行退换货？',
        answer: '购买后30天内，如产品未使用且包装完好，可申请无理由退换货。请保留原始包装和购买凭证，联系我们的客服团队安排退换事宜。退款将在收到退回产品并确认状态后的7个工作日内处理。',
        category: '售后服务'
      },
      {
        id: 4,
        question: '产品支持哪些操作系统？',
        answer: '我们的软件产品兼容Windows 10/11、macOS 10.15及以上版本、iOS 14及以上版本和Android 10及以上版本。硬件产品与大多数现代设备兼容，具体请查看产品详情页的技术规格部分。',
        category: '技术支持'
      },
      {
        id: 5,
        question: '如何联系客服？',
        answer: '您可以通过多种方式联系我们的客服团队：拨打服务热线400-123-4567（工作日9:00-18:00）；发送邮件至support@example.com（24小时内回复）；在官网使用在线客服（工作日9:00-20:00）；或填写联系表单，我们会尽快与您联系。',
        category: '联系方式'
      },
      {
        id: 6,
        question: '是否提供国际配送服务？',
        answer: '是的，我们提供国际配送服务，覆盖大部分国家和地区。国际订单的配送时间通常为7-15个工作日，具体取决于目的地和当地海关情况。国际订单可能产生额外的关税和进口费用，这些费用需由收件人承担。',
        category: '配送信息'
      }
    ];
    
    return faqs.value;
  });
}

// 页面加载时获取FAQ数据
onMounted(() => {
  loadFaqs();
});

// SEO优化
useHead({
  title: '常见问题 - Hanye',
  meta: [
    { name: 'description', content: '浏览我们的常见问题解答，获取产品使用指南、技术支持和售后服务等相关信息。' }
  ]
});
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}
</style>