shanghaipeiwan/pwuniapp/pages/user/help-faq.vue

<template>
  <view class="faq-page" :class="{ 'theme-warm': currentThemeKey === 'warm' }">
    <!-- 顶部标题区 -->
    <view class="faq-header">
      <view class="faq-badge">帮助中心</view>
      <text class="faq-title">常见问题解答</text>
      <text class="faq-meta">点击问题查看解答；如仍有疑问，可联系官方在线客服</text>
    </view>

    <!-- 问答列表 -->
    <scroll-view class="faq-scroll" scroll-y enable-flex>
      <view v-if="isLoading" class="faq-state">
        <text class="state-text">正在加载…</text>
      </view>

      <view v-else-if="faqList.length === 0" class="faq-state">
        <text class="state-text">暂无常见问题，请稍后再试，或联系官方客服。</text>
      </view>

      <view v-else class="faq-list">
        <view
          v-for="(item, idx) in faqList"
          :key="item.id || idx"
          class="faq-item"
          @click="toggle(idx)"
        >
          <view class="faq-q-row">
            <text class="faq-index">{{ idx + 1 }}</text>
            <text class="faq-question">{{ item.question }}</text>
            <text class="faq-arrow" :class="{ open: activeIndex === idx }">›</text>
          </view>
          <view v-if="activeIndex === idx" class="faq-answer-box">
            <text v-if="item.category" class="faq-category">【{{ item.category }}】</text>
            <text class="faq-answer">{{ item.answer }}</text>
          </view>
        </view>
      </view>

      <view class="faq-footer">
        <text class="footer-tip">仍未解决？请在「个人中心 → 官方在线客服」联系我们</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { getCurrentThemeKey, applyThemeToNativeUI } from '@/common/theme.js';
import { getPlatformConfigs } from '@/common/api.js';
import { useShare } from '@/common/share.js';

useShare({
  title: '同城陪伴 · 帮助中心与常见问题解答',
  timelineTitle: '同城陪伴 · 常见问题解答与服务指引',
  path: '/pages/user/help-faq'
});

const currentThemeKey = ref(getCurrentThemeKey());
const isLoading = ref(true);
const faqList = ref([]);
const activeIndex = ref(-1);

const toggle = (idx) => {
  activeIndex.value = activeIndex.value === idx ? -1 : idx;
};

const loadFaq = async () => {
  isLoading.value = true;
  try {
    const res = await getPlatformConfigs();
    const list = (res && res.faq_list) || [];
    faqList.value = Array.isArray(list) ? list : [];
  } catch (e) {
    console.warn('[FAQ] 加载帮助中心配置失败:', e && e.message);
    faqList.value = [];
  } finally {
    isLoading.value = false;
  }
};

onMounted(() => {
  currentThemeKey.value = getCurrentThemeKey();
  applyThemeToNativeUI(currentThemeKey.value);
  loadFaq();
});

onShow(() => {
  currentThemeKey.value = getCurrentThemeKey();
  applyThemeToNativeUI(currentThemeKey.value);
});
</script>

<style lang="scss">
.faq-page {
  min-height: 100vh;
  background-color: #0A0F1D;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.faq-header {
  padding: 40rpx 36rpx 24rpx;
  background: #10172A;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  .faq-badge {
    display: inline-block;
    font-size: 20rpx;
    font-weight: 600;
    color: #10B981;
    background: rgba(16, 185, 129, 0.15);
    padding: 4rpx 16rpx;
    border-radius: 8rpx;
    margin-bottom: 12rpx;
  }

  .faq-title {
    display: block;
    font-size: 38rpx;
    font-weight: 800;
    color: #F8FAFC;
    letter-spacing: 1rpx;
    margin-bottom: 10rpx;
  }

  .faq-meta {
    display: block;
    font-size: 22rpx;
    color: #64748B;
    line-height: 1.5;
  }
}

.faq-scroll {
  flex: 1;
  padding: 28rpx 32rpx calc(60rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.faq-state {
  padding: 80rpx 20rpx;
  display: flex;
  justify-content: center;

  .state-text {
    font-size: 26rpx;
    color: #64748B;
    text-align: center;
    line-height: 1.7;
  }
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.faq-item {
  background: #151D30;
  border-radius: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 28rpx 28rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.25);
}

.faq-q-row {
  display: flex;
  align-items: center;

  .faq-index {
    flex-shrink: 0;
    width: 40rpx;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.15);
    color: #818CF8;
    font-size: 24rpx;
    font-weight: 700;
    margin-right: 16rpx;
  }

  .faq-question {
    flex: 1;
    font-size: 28rpx;
    font-weight: 700;
    color: #F8FAFC;
    line-height: 1.5;
  }

  .faq-arrow {
    flex-shrink: 0;
    margin-left: 12rpx;
    font-size: 40rpx;
    color: #64748B;
    transition: transform 0.2s ease;
    transform: rotate(90deg);

    &.open {
      transform: rotate(-90deg);
      color: #10B981;
    }
  }
}

.faq-answer-box {
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1px solid rgba(255, 255, 255, 0.06);

  .faq-category {
    display: block;
    font-size: 22rpx;
    font-weight: 700;
    color: #818CF8;
    margin-bottom: 8rpx;
  }

  .faq-answer {
    display: block;
    font-size: 26rpx;
    color: #94A3B8;
    line-height: 1.75;
  }
}

.faq-footer {
  margin-top: 36rpx;
  padding: 0 8rpx;

  .footer-tip {
    font-size: 22rpx;
    color: #475569;
    line-height: 1.6;
  }
}

/* 浅色暖阳模式适配 */
.theme-warm {
  background-color: #FAF8F5;

  .faq-header {
    background: #FFFFFF;
    border-bottom-color: #E7E5E4;

    .faq-title {
      color: #1C1917;
    }
    .faq-meta {
      color: #78716C;
    }
  }

  .faq-state .state-text {
    color: #78716C;
  }

  .faq-item {
    background: #FFFFFF;
    border-color: #E7E5E4;
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.04);
  }

  .faq-q-row {
    .faq-question {
      color: #1C1917;
    }
    .faq-arrow {
      color: #A8A29E;
    }
  }

  .faq-answer-box {
    border-top-color: #F5F5F4;

    .faq-category {
      color: #EA580C;
    }
    .faq-answer {
      color: #57534E;
    }
  }

  .faq-footer .footer-tip {
    color: #A8A29E;
  }
}
</style>