常见问题/联系客服/公众号二维码

pages/faq/faq.vue

@@ -0,0 +1,172 @@
+<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: '在首页浏览商品，点击商品卡片选择商品，确认后即可完成购买。支持微信支付和支付宝支付。',
+          expanded: false
+        },
+        {
+          question: '如何开门取货？',
+          answer: '下单成功后，点击首页底部中间的"开门"按钮，柜门会自动打开，取出商品后关闭柜门即可。',
+          expanded: false
+        },
+        {
+          question: '商品质量问题怎么办？',
+          answer: '如发现商品有质量问题，请在24小时内通过"联系客服"反馈，我们会为您办理退款或换货。',
+          expanded: false
+        },
+        {
+          question: '如何查看订单？',
+          answer: '进入"我的"页面，点击"我的订单"可查看所有订单记录，包括待付款、已完成、已退款等状态。',
+          expanded: false
+        },
+        {
+          question: '忘记密码怎么办？',
+          answer: '在登录页面点击"忘记密码"，输入注册手机号，通过短信验证码即可重置密码。',
+          expanded: false
+        },
+        {
+          question: '如何修改收货地址？',
+          answer: '进入"我的"页面，点击"收货地址"，可以新增、编辑或删除收货地址信息。',
+          expanded: false
+        },
+        {
+          question: '支持哪些支付方式？',
+          answer: '目前支持微信支付、支付宝支付两种方式，后续将开通更多支付渠道。',
+          expanded: false
+        },
+        {
+          question: '退款多久到账？',
+          answer: '退款申请审核通过后，微信支付1-3个工作日到账，支付宝1-5个工作日到账，具体以银行处理时间为准。',
+          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>