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

pages.json

@@ -11,6 +11,13 @@
       "style": {
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/faq/faq",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "常见问题"
+      }
     }
   ],
   "globalStyle": {

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>

pages/index/index.vue

@@ -55,7 +55,7 @@
         </view>
       </view>
 
-      <!-- 菜单列表（顶部） -->
+      <!-- 菜单列表 -->
       <view class="content-area">
         <view class="menu-list">
           <view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleMenuClick(item)">
@@ -72,6 +72,16 @@
         @prev="handleNavPrev"
         @next="handleNavNext"
       />
+
+      <!-- 公众号二维码弹窗 -->
+      <view v-if="showQrcodePopup" class="qrcode-popup-mask" @click="showQrcodePopup = false">
+        <view class="qrcode-popup-content" @click.stop>
+          <view class="qrcode-popup-title">关注公众号</view>
+          <image class="qrcode-img" src="/static/qrcode.png" mode="aspectFit" />
+          <view class="qrcode-popup-tip">扫码关注获取更多优惠信息</view>
+          <view class="qrcode-popup-close" @click="showQrcodePopup = false">关闭</view>
+        </view>
+      </view>
     </view>
   </view>
 </template>
@@ -84,8 +94,7 @@ export default {
   data() {
     return {
       currentTab: 'home',
-      contentHeight: 0,
+      showQrcodePopup: false,
-      areaHeight: 0,
       productList: [
         { name: '君乐宝450ml悦鲜活', price: '0.01', image: '/static/c1.png' },
         { name: '白红（0.0.0.0-9.9.9）', price: '0.06', image: '/static/c2.png' },
@@ -100,11 +109,15 @@ export default {
         { name: '乐事薯片原味75g', price: '7.50', image: '/static/c6.png' }
       ],
       userInfo: { nickname: '张三', phone: '13812345678' },
+      // 菜单：我的订单、常见问题、联系客服、公众号信息
       menuList: [
-        { title: '我的订单', page: '/pages/order/order' },
+        { title: '我的订单', action: 'order' },
-        { title: '收货地址', page: '/pages/address/address' },
+        { title: '常见问题', action: 'faq' },
-        { title: '常见问题', page: '/pages/faq/faq' }
+        { title: '联系客服', action: 'call' },
-      ]
+        { title: '公众号信息', action: 'qrcode' }
+      ],
+      // 客服电话
+      servicePhone: '13264706088'
     };
   },
   computed: {
@@ -113,15 +126,30 @@ export default {
       return p ? p.substring(0,3) + '****' + p.substring(7) : '';
     }
   },
-  mounted() {},
   methods: {
     switchTab(tab) { this.currentTab = tab; },
     handleOpenDoor() {
       uni.showModal({ title: '开门', content: '确认打开柜门？', success: r => r.confirm && uni.showToast({title:'柜门已打开', icon:'success'}) });
     },
     handleMenuClick(item) {
-      if (item.page) {
+      switch (item.action) {
-        uni.showToast({title:'功能开发中', icon:'none'});
+        case 'order':
+          uni.showToast({ title: '订单功能开发中', icon: 'none' });
+          break;
+        case 'faq':
+          uni.navigateTo({ url: '/pages/faq/faq' });
+          break;
+        case 'call':
+          // 拨打电话
+          uni.makePhoneCall({
+            phoneNumber: this.servicePhone,
+            fail: () => {}
+          });
+          break;
+        case 'qrcode':
+          // 显示公众号二维码弹窗
+          this.showQrcodePopup = true;
+          break;
       }
     },
     handleNavPrev() {
@@ -149,7 +177,7 @@ page { height: 100%; background-color: #fff; }
 .product-name { font-size: 24rpx; color: #333; padding: 10rpx 8rpx 6rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .product-price { font-size: 30rpx; font-weight: bold; color: #e4393c; padding: 0 8rpx 16rpx; }
 
-/* 底部占位：给tab-bar和开门按钮留出空间 */
+/* 底部占位 */
 .bottom-spacer { height: 160rpx; }
 
 /* 底部导航栏 */
@@ -175,4 +203,50 @@ page { height: 100%; background-color: #fff; }
 .menu-item:last-child { border-bottom: none; }
 .menu-text { font-size: 30rpx; color: #333; }
 .menu-arrow { font-size: 28rpx; color: #ccc; }
+
+/* ====== 公众号二维码弹窗 ====== */
+.qrcode-popup-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.55);
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.qrcode-popup-content {
+  width: 560rpx;
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 48rpx 40rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.qrcode-popup-title {
+  font-size: 34rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 32rpx;
+}
+.qrcode-img {
+  width: 400rpx;
+  height: 400rpx;
+  margin-bottom: 24rpx;
+}
+.qrcode-popup-tip {
+  font-size: 26rpx;
+  color: #999;
+  margin-bottom: 32rpx;
+}
+.qrcode-popup-close {
+  font-size: 28rpx;
+  color: #2979ff;
+  padding: 16rpx 60rpx;
+  border: 2rpx solid #2979ff;
+  border-radius: 40rpx;
+}
 </style>

pages/mine/mine.vue

@@ -78,7 +78,7 @@ export default {
       } else if (item.action === 'contact') {
         uni.showModal({
           title: '联系客服',
-          content: '客服电话：400-123-4567',
+          content: '客服电话：13264706088',
           showCancel: false
         });
       }