consumer-front/src/pages/faq/faq.vue

<template>
  <view class="faq-page">
    <!-- 问题列表 -->
    <scroll-view class="faq-scroll" scroll-y>
      <view class="faq-list">
        <view
          class="faq-item"
          v-for="(item, index) in faqList"
          :key="index"
        >
          <!-- 问题标题（点击展开/收起） -->
          <view class="faq-question" @click="toggleItem(index)">
            <text class="q-text">{{ item.question }}</text>
            <text class="q-arrow" :class="{ expanded: item.expanded }">›</text>
          </view>

          <!-- 答案内容（展开时显示） -->
          <view class="faq-answer" v-if="item.expanded">
            <text class="a-text">{{ item.answer }}</text>
          </view>
        </view>
      </view>

      <view class="bottom-spacer"></view>
    </scroll-view>

    <!-- 底部左右箭头导航条 -->
    <page-nav-bar
      :hasPrev="true"
      :hasNext="false"
      @prev="handleNavPrev"
      @next="handleNavNext"
    />
  </view>
</template>

<script>
import PageNavBar from '@/components/page-nav-bar/page-nav-bar.vue';

export default {
  components: { PageNavBar },
  data() {
    return {
      faqList: [
        {
          question: '如何购买商品？',
          answer: '使用微信或支付宝扫描柜体上的二维码，进入开门页面，如果是首次使用需先进行授权登录与注册，浏览设备中售卖的商品及价格，点击开门，待门锁打开后，拉开门选购商品，关门即完成购买，约1-2分钟内系统将自动识别并完成扣款。',
          expanded: false
        },
        {
          question: '如何查看订单？',
          answer: '进入"我的"页面，点击"我的订单"可查看所有订单记录，包括待付款、已完成、已退款等状态。',
          expanded: false
        },
        {
          question: '支持哪些支付方式？',
          answer: '目前支持微信支付、支付宝支付两种方式，后续将开通更多支付渠道。',
          expanded: false
        },
        {
          question: '退款多久到账？',
          answer: '审核通过后，一般1-3个工作日到账，具体到账时间以支付渠道为准。',
          expanded: false
        }
      ]
    };
  },
  methods: {
    toggleItem(index) {
      this.faqList[index].expanded = !this.faqList[index].expanded;
    },
    handleNavPrev() {
      uni.navigateBack({ fail: () => { uni.switchTab({ url: '/pages/index/index' }); } });
    },
    handleNavNext() {
      uni.showToast({ title: '暂无下一页', icon: 'none' });
    }
  }
};
</script>

<style scoped>
page { height: 100%; background-color: #f5f5f5; }

.faq-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

/* 滚动区域 */
.faq-scroll {
  flex: 1;
  height: 0;
}

/* 问题列表 */
.faq-list {
  padding: 16rpx;
}

.faq-item {
  background: #fff;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
  overflow: hidden;
}

/* 问题标题 */
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 24rpx;
}
.q-text {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  line-height: 1.4;
}
.q-arrow {
  font-size: 32rpx;
  color: #999;
  transition: transform 0.25s;
  flex-shrink: 0;
  margin-left: 12rpx;
}
.q-arrow.expanded {
  transform: rotate(90deg);
}

/* 答案 */
.faq-answer {
  margin: 0 24rpx 24rpx;
  padding: 24rpx;
  background: #f8f9fc;
  border-radius: 10rpx;
}
.a-text {
  font-size: 27rpx;
  color: #666;
  line-height: 1.7;
}

/* 底部占位 */
.bottom-spacer {
  height: 120rpx;
}
</style>