vava_buy_official/src/views/FAQ/index.vue

<template>
  <div class="question-container">
    <!-- 顶部横幅 -->
    <div class="question-banner">
      <h1>常见问题</h1>
      <p>我们将在这里为您解答所有疑问</p>

      <!-- 搜索框 -->
      <div class="question__search-box">
        <input
          type="text"
          v-model="searchQuery"
          placeholder="请输入您的问题关键词..."
          @keyup.enter="searchQuestions"
        />
        <button @click="searchQuestions">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            fill="currentColor"
            viewBox="0 0 16 16"
          >
            <path
              d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
            />
          </svg>
          搜索
        </button>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="question-main__container width-1200">
      <!-- 左侧导航 -->
      <div class="question-sidebar">
        <div
          v-for="category in categories"
          :key="category.id"
          class="category-item"
          :class="{ active: activeCategory === category.id }"
          @click="changeCategory(category.id)"
        >
          {{ category.name }}
          <span class="count">{{ category.count }}个问题</span>
        </div>
      </div>

      <!-- 右侧内容 -->
      <div class="question-content">
        <template v-if="!currentQuestion">
          <!-- 搜索结果提示 -->
          <div v-if="searchResults.length > 0" class="search-results">
            <h3>搜索结果 ({{ searchResults.length }}条)</h3>
            <div
              v-for="item in searchResults"
              :key="item.id"
              class="question-item"
              @click="showQuestionDetail(item)"
            >
              {{ item.title }}
            </div>
          </div>

          <!-- 问题列表 -->
          <div v-else class="question-list">
            <h2>{{ getCategoryName(activeCategory) }}</h2>

            <div
              v-for="question in filteredQuestions"
              :key="question.id"
              class="question-item"
              @click="showQuestionDetail(question)"
            >
              <div class="question-title">
                {{ question.title }}
                <div v-if="question.isHot" class="question-tag hot-tag">热门</div>
                <div v-if="question.isNew" class="question-tag new-tag">新</div>
              </div>
              <div class="question-preview">{{ question.preview }}</div>
            </div>
          </div>
        </template>

        <!-- 问题详情 -->
        <div v-else class="question-detail">
          <div class="detail-header">
            <h2>{{ currentQuestion.title }}</h2>
            <div class="meta">
              <span>更新于 {{ formatDate(currentQuestion.updateTime) }}</span>
              <span>阅读 {{ currentQuestion.views }} 次</span>
            </div>
          </div>

          <div class="detail-content" v-html="currentQuestion.content"></div>

          <div class="detail-footer">
            <button class="back-btn" @click="backToList">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="currentColor"
                viewBox="0 0 16 16"
              >
                <path
                  fill-rule="evenodd"
                  d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"
                />
              </svg>
              返回列表
            </button>

            <!-- <div class="feedback">
              <span>这篇回答对您有帮助吗？</span>
              <button class="feedback-btn yes">有帮助</button>
              <button class="feedback-btn no">没帮助</button>
            </div> -->
          </div>
        </div>
      </div>
    </div>

    <!-- 联系客服 -->
    <div class="contact-section width-1200">
      <h3>没有找到您需要的答案？</h3>
      <p>我们的客服团队随时为您服务</p>
      <div class="contact-methods">
        <div class="contact-method">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            fill="currentColor"
            viewBox="0 0 16 16"
          >
            <path
              d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"
            />
          </svg>
          <div>
            <strong>电话支持</strong>
            <p>400-888-9999</p>
            <p>周一至周日 9:00-18:00</p>
          </div>
        </div>

        <div class="contact-method">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            fill="currentColor"
            viewBox="0 0 16 16"
          >
            <path
              d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z"
            />
          </svg>
          <div>
            <strong>电子邮件</strong>
            <p>support@example.com</p>
            <p>我们会在24小时内回复</p>
          </div>
        </div>

        <div class="contact-method">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            fill="currentColor"
            viewBox="0 0 16 16"
          >
            <path
              d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"
            />
          </svg>
          <div>
            <strong>在线客服</strong>
            <p>点击右下角"在线咨询"</p>
            <p>工作时间实时沟通</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 问题分类
const categories = ref([
  { id: 1, name: '账号问题', count: 12 },
  { id: 2, name: '支付问题', count: 8 },
  { id: 3, name: '订单问题', count: 15 },
  { id: 4, name: '产品使用', count: 23 },
  { id: 5, name: '售后服务', count: 7 },
  { id: 6, name: '其他问题', count: 5 },
])

// 模拟问题数据
const questions = ref([
  {
    id: 101,
    categoryId: 1,
    title: '如何注册账号？',
    preview: '详细说明注册账号的步骤和注意事项...',
    content: `
      <h3>注册账号步骤</h3>
      <ol>
        <li>点击网站右上角的"注册"按钮</li>
        <li>填写您的手机号码或电子邮箱</li>
        <li>设置登录密码（6-20位字符，包含字母和数字）</li>
        <li>输入收到的验证码</li>
        <li>阅读并同意用户协议</li>
        <li>点击"立即注册"完成注册</li>
      </ol>
      <p><strong>注意事项：</strong></p>
      <ul>
        <li>请使用常用手机号或邮箱，以便接收重要通知</li>
        <li>密码请勿设置过于简单</li>
        <li>如未收到验证码，请检查垃圾邮件或60秒后重新获取</li>
      </ul>
    `,
    updateTime: '2023-05-15',
    views: 1245,
    isHot: true,
    isNew: false,
  },
  {
    id: 102,
    categoryId: 1,
    title: '忘记密码怎么办？',
    preview: '密码找回的几种方法和步骤说明...',
    content: `
      <h3>找回密码方法</h3>
      <p>如果您忘记了密码，可以通过以下方式找回：</p>
      
      <h4>方法一：通过手机找回</h4>
      <ol>
        <li>在登录页面点击"忘记密码"</li>
        <li>选择"通过手机找回"</li>
        <li>输入注册时使用的手机号码</li>
        <li>获取并输入短信验证码</li>
        <li>设置新密码并确认</li>
      </ol>
      
      <h4>方法二：通过邮箱找回</h4>
      <ol>
        <li>在登录页面点击"忘记密码"</li>
        <li>选择"通过邮箱找回"</li>
        <li>输入注册时使用的邮箱地址</li>
        <li>登录邮箱查收重置密码邮件</li>
        <li>点击邮件中的链接设置新密码</li>
      </ol>
      
      <p>如果以上方法都无法解决您的问题，请联系客服人员。</p>
    `,
    updateTime: '2023-06-02',
    views: 876,
    isHot: true,
    isNew: false,
  },
  {
    id: 201,
    categoryId: 2,
    title: '支持哪些支付方式？',
    preview: '介绍平台目前支持的支付渠道...',
    content: `
      <h3>支持的支付方式</h3>
      <p>我们目前支持以下支付方式：</p>
      
      <div class="payment-method">
        <h4>1. 在线支付</h4>
        <ul>
          <li>微信支付</li>
          <li>支付宝</li>
          <li>银联在线支付</li>
          <li>Apple Pay</li>
        </ul>
      </div>
      
      <div class="payment-method">
        <h4>2. 银行卡支付</h4>
        <p>支持以下银行的储蓄卡和信用卡：</p>
        <ul>
          <li>中国工商银行</li>
          <li>中国建设银行</li>
          <li>中国银行</li>
          <li>招商银行</li>
          <li>交通银行等主流银行</li>
        </ul>
      </div>
      
      <p><strong>注意：</strong>部分银行可能有支付限额，请以银行规定为准。</p>
    `,
    updateTime: '2023-04-28',
    views: 1532,
    isHot: false,
    isNew: false,
  },
  {
    id: 301,
    categoryId: 3,
    title: '如何查询订单状态？',
    preview: '订单状态查询的几种途径和方法...',
    content: `
      <h3>查询订单状态</h3>
      <p>您可以通过以下方式查询订单状态：</p>
      
      <h4>方法一：网站查询</h4>
      <ol>
        <li>登录您的账号</li>
        <li>点击右上角"我的订单"</li>
        <li>在订单列表中找到相应订单</li>
        <li>点击"查看详情"查看订单状态</li>
      </ol>
      
      <h4>方法二：手机APP查询</h4>
      <ol>
        <li>打开APP并登录</li>
        <li>点击底部导航栏"我的"</li>
        <li>选择"我的订单"</li>
        <li>查看相应订单状态</li>
      </ol>
      
      <h4>方法三：联系客服查询</h4>
      <p>如果您无法通过以上方式查询，可以联系客服提供订单号查询。</p>
      
      <p><strong>常见订单状态说明：</strong></p>
      <ul>
        <li><span class="status waiting">待付款</span> - 订单已生成，等待支付</li>
        <li><span class="status paid">已支付</span> - 付款成功，等待处理</li>
        <li><span class="status shipped">已发货</span> - 商品已发出</li>
        <li><span class="status completed">已完成</span> - 订单交易完成</li>
        <li><span class="status cancelled">已取消</span> - 订单已取消</li>
      </ul>
    `,
    updateTime: '2023-05-20',
    views: 2104,
    isHot: true,
    isNew: true,
  },
])

// 当前选中的分类ID
const activeCategory = ref(1)

// 当前查看的问题详情
const currentQuestion = ref(null)

// 搜索查询词
const searchQuery = ref('')

// 搜索结果
const searchResults = ref([])

// 获取当前分类下的问题
const filteredQuestions = computed(() => {
  return questions.value.filter((q) => q.categoryId === activeCategory.value)
})

// 获取分类名称
const getCategoryName = (id) => {
  const category = categories.value.find((c) => c.id === id)
  return category ? category.name : '所有问题'
}

// 切换分类
const changeCategory = (categoryId) => {
  activeCategory.value = categoryId
  currentQuestion.value = null
  searchResults.value = []
}

// 显示问题详情
const showQuestionDetail = (question) => {
  currentQuestion.value = question
}

// 返回问题列表
const backToList = () => {
  currentQuestion.value = null
}

// 搜索问题
const searchQuestions = () => {
  if (!searchQuery.value.trim()) {
    searchResults.value = []
    return
  }

  const query = searchQuery.value.toLowerCase()
  searchResults.value = questions.value.filter((q) => {
    return q.title.toLowerCase().includes(query) || q.preview.toLowerCase().includes(query)
  })
  currentQuestion.value = null
}

// 格式化日期
const formatDate = (dateString) => {
  const options = { year: 'numeric', month: 'long', day: 'numeric' }
  return new Date(dateString).toLocaleDateString('zh-CN', options)
}
</script>

<style scoped lang="less">
.question-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
  margin: 0 auto 50px;
  margin: 0 auto 3.125rem;
}

.width-1200 {
  padding: 0 15px 60px;
  padding: 0 0.9375rem 3.75rem;
}

.question-banner {
  width: 100%;
  background: linear-gradient(135deg, #1976d2, var(--color-active));
  background: var(--color-active);
  background: rgba(0, 0, 0, 1);
  color: white;
  padding: 40px 15px;
  padding: 2.5rem 0.9375rem;
  text-align: center;
  margin-bottom: 30px;
  margin-bottom: 1.875rem;

  h1 {
    font-size: 40px;
    font-size: 2.5rem;
    margin-bottom: 10px;
    margin-bottom: 0.625rem;
  }

  p {
    font-size: 1.125rem;
    margin-bottom: 25px;
    margin-bottom: 1.5625rem;
    opacity: 0.9;
  }
}

.question__search-box {
  width: 100%;
  max-width: 600px;
  max-width: 37.5rem;
  margin: 0 auto;
  display: flex;

  input {
    flex: 1;
    padding: 12px 15px;
    padding: 0.75rem 0.9375rem;
    border: none;
    border-radius: 4px 0 0 4px;
    border-radius: 0.25rem 0 0 0.25rem;
    font-size: 1rem;
    color: #333;
  }

  button {
    padding: 0 20px;
    padding: 0 1.25rem;
    background: var(--color-active);
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    border-radius: 0 0.25rem 0.25rem 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    gap: 0.5rem;
    font-weight: 500;
    letter-spacing: 2px;
  }
}

.question-main__container {
  display: flex;
  gap: 30px;
  gap: 1.875rem;

  .question-sidebar {
    width: 250px;
    width: 15.625rem;
    width: 250px;
    width: 15.625rem;
    flex-shrink: 0;

    .category-item {
      padding: 12px 15px;
      padding: 0.75rem 0.9375rem;
      border-left: 4px solid transparent;
      border-left: 0.25rem solid transparent;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      margin-bottom: 0.3125rem;
      border-radius: 4px;
      border-radius: 0.25rem;
    }

    .category-item:hover {
      background: #f5f5f5;
    }

    .category-item.active {
      border-left-color: var(--color-active);
      background: #e3f2fd;
      font-weight: bold;
    }

    .count {
      color: #757575;
      font-size: 0.9rem;
    }

    .category-item.active .count {
      color: var(--color-active);
    }
  }

  .question-content {
    flex: 1;
    background: white;
    border-radius: 8px;
    border-radius: 0.5rem;
    padding: 18px;
    padding: 1.125rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .search-results {
    h3 {
      font-size: 20px;
      font-size: 1.25rem;
      margin-bottom: 15px;
      margin-bottom: 0.9375rem;
      color: #1976d2;
    }
  }

  .question-list {
    h2 {
      font-size: 24px;
      font-size: 1.5rem;
      margin-bottom: 20px;
      margin-bottom: 1.25rem;
      padding-bottom: 10px;
      padding-bottom: 0.625rem;
      border-bottom: 1px solid #eee;
    }
  }

  .question-item {
    padding: 15px;
    padding: 0.9375rem;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
  }

  .question-item:hover {
    background: #f9f9f9;
  }

  .question-title {
    font-weight: bold;
    margin-bottom: 8px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
    gap: 0.625rem;
  }

  .question-preview {
    color: #666;
    font-size: 0.9375rem;
  }

  .question-tag {
    height: 20px;
    padding: 0 10px;
    line-height: 20px;
    color: white;
    font-size: 0.75rem;
    border-radius: 12px;
    border-radius: 0.75rem;
  }

  .hot-tag {
    background: #ff5722;
  }

  .new-tag {
    background: #4caf50;
  }

  .question-detail {
    .detail-header {
      margin-bottom: 24px;
      margin-bottom: 1.5rem;
      padding-bottom: 15px;
      padding-bottom: 0.9375rem;
      border-bottom: 1px solid #eee;

      h2 {
        font-size: 24px;
        font-size: 1.8rem;
        margin-bottom: 10px;
        margin-bottom: 0.625rem;
      }

      .meta {
        display: flex;
        gap: 15px;
        gap: 0.9375rem;
        color: #757575;
        font-size: 15px;
        font-size: 0.9375rem;
      }
    }

    .detail-footer {
      margin-top: 36px;
      margin-top: 2.25rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 20px;
      padding-top: 1.25rem;
      border-top: 1px solid #eee;

      .back-btn {
        background: #f5f5f5;
        border: none;
        padding: 8px 15px;
        padding: 0.5rem 0.9375rem;
        border-radius: 4px;
        border-radius: 0.25rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 5px;
        gap: 0.3125rem;
      }

      .back-btn:hover {
        background: #eee;
      }

      /* .feedback {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .feedback span {
        color: #757575;
      }

      .feedback-btn {
        padding: 5px 12px;
        border-radius: 4px;
        border: 1px solid #ddd;
        cursor: pointer;
      }

      .feedback-btn.yes {
        background: #e8f5e9;
        color: #2e7d32;
      }

      .feedback-btn.no {
        background: #ffebee;
        color: #c62828;
      } */
    }
  }
}

.contact-section {
  margin-top: 32px;
  margin-top: 2rem;
  text-align: center;
  padding: 30px;
  padding: 1.875rem;
  background: #f9f9f9;
  // border-radius: 8px;
  // border-radius: 0.5rem;

  h3 {
    font-size: 24px;
    font-size: 1.5rem;
    margin-bottom: 10px;
    margin-bottom: 0.625rem;
  }

  p {
    color: #666;
    margin-bottom: 25px;
    margin-bottom: 1.5625rem;
  }

  .contact-methods {
    display: flex;
    justify-content: center;
    gap: 30px;
    gap: 1.875rem;
    flex-wrap: wrap;
  }

  .contact-method {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    gap: 0.9375rem;
    text-align: left;
    max-width: 300px;
    max-width: 18.75rem;
    padding: 15px;
    padding: 0.9375rem;
    background: white;
    border-radius: 8px;
    border-radius: 0.5rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    svg {
      color: #1976d2;
      margin-top: 3px;
    }

    strong {
      display: block;
      margin-bottom: 5px;
    }

    p {
      margin: 3px 0;
      font-size: 0.9375rem;
      color: #666;
    }
  }
}
</style>

<style>
/* 富文本内容样式 */
.detail-content h3,
.detail-content h4 {
  margin: 25px 0 15px;
  margin: 1.5625rem 0 0.9375rem;
  color: #333;
}

.detail-content h3 {
  font-size: 1.5rem;
}

.detail-content h4 {
  font-size: 1.25rem;
}

.detail-content p {
  margin: 15px 0;
  margin: 0.9375rem 0;
  line-height: 1.6;
}

.detail-content ol,
.detail-content ul {
  margin: 15px 0;
  margin: 0.9375rem 0;
  padding-left: 30px;
  padding-left: 1.875rem;
}

.detail-content li {
  margin: 0.5rem 0;
}

.payment-method {
  margin: 20px 0;
  margin: 1.25rem 0;
}

.status {
  display: inline-block;
  padding: 2px 6px;
  padding: 2px 0.375rem;
  border-radius: 3px;
  font-size: 0.875rem;
}

.status.waiting {
  background: #fff3e0;
  color: #e65100;
}

.status.paid {
  background: #e3f2fd;
  color: #1565c0;
}

.status.shipped {
  background: #e8f5e9;
  color: #2e7d32;
}

.status.completed {
  background: #f1f8e9;
  color: #558b2f;
}

.status.cancelled {
  background: #ffebee;
  color: #c62828;
}
</style>


<style lang="less" scoped>
@import url('./css/styles@1200.less');
@import url('./css/styles@1024.less');
@import url('./css/styles@768.less');
</style>