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

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,
-      areaHeight: 0,
+      showQrcodePopup: false,
       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: '收货地址', page: '/pages/address/address' },
-        { title: '常见问题', page: '/pages/faq/faq' }
-      ]
+        { title: '我的订单', action: 'order' },
+        { title: '常见问题', action: '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) {
-        uni.showToast({title:'功能开发中', icon:'none'});
+      switch (item.action) {
+        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>