零售端-店铺底部导航处理

mallApp/src/components/shop-tab-bar/index.vue

@@ -79,7 +79,10 @@ export default {
         shopQuery.hdId = hdId
       }
       if (item.key === 'home') {
-        // 店铺首页跳转功能暂未实现
+        this.$util.pageTo({
+          url: '/pages/home/index',
+          query: shopQuery
+        })
         return
       }
       if (item.key === 'category') {
@@ -100,7 +103,7 @@ export default {
         this.$util.pageTo({
           url: '/pages/home/order',
           type: 4,
-          query: account ? { account } : {}
+          query: Object.assign({}, shopQuery, { shopNav: 1 })
         })
       }
     }

mallApp/src/pages/home/order.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="order-page">
+  <view class="order-page" :class="{ 'order-page--shop-nav': showShopTabBar }">
     <!-- 顶部 Tab + 店铺筛选 -->
     <view class="order-header">
       <view class="order-tabs">
@@ -74,6 +74,14 @@
         </view>
       </view>
     </tui-bottom-popup>
+
+    <!-- 店铺内底部导航：从 shop-tab-bar 进入时展示，替代原生 tabBar -->
+    <shop-tab-bar
+      v-if="showShopTabBar"
+      current="order"
+      :account="shopAccount"
+      :cart-count="cartBadgeCount"
+    />
   </view>
 </template>
 
@@ -81,9 +89,11 @@
 /**
  * 订单 Tab 页（主包）
  * 展示订单状态 Tab、店铺筛选与订单卡片列表
+ * 店铺场景：query.shopNav=1 时隐藏原生 tabBar，改用 shop-tab-bar
  */
 import OrderItem from "@/components/order/order-item.vue";
 import TuiBottomPopup from "@/components/plugin/bottom-popup.vue";
+import ShopTabBar from "@/components/shop-tab-bar/index.vue";
 import { list } from "@/mixins";
 import AppWrapperEmpty from "@/components/app-wrapper-empty";
 import { getList } from "@/api/order";
@@ -93,7 +103,8 @@ export default {
   components: {
     AppWrapperEmpty,
     OrderItem,
-    TuiBottomPopup
+    TuiBottomPopup,
+    ShopTabBar
   },
 
   mixins: [list],
@@ -121,7 +132,11 @@ export default {
       tempHdName: "",
       storePopupShow: false,
       /** 用户花店列表，用于筛选弹窗 */
-      storeList: []
+      storeList: [],
+      /** 是否店铺内导航（shop-tab-bar 跳转带入 shopNav=1） */
+      shopNavMode: false,
+      /** 当前店铺 account，供 shop-tab-bar 跳转使用 */
+      shopAccount: ""
     };
   },
 
@@ -129,6 +144,27 @@ export default {
     /** 弹窗选项：全部店铺 + 花店列表 */
     storeOptions() {
       return [{ id: 0, name: "全部店铺" }].concat(this.storeList);
+    },
+    /** 店铺场景下展示 shop-tab-bar */
+    showShopTabBar() {
+      return this.shopNavMode;
+    },
+    /** 底部 tab 购物车角标（读本地花材购物车缓存） */
+    cartBadgeCount() {
+      const account = this.shopAccount || uni.getStorageSync("account") || "";
+      if (!account) {
+        return 0;
+      }
+      const cached = uni.getStorageSync("selectListcg_hd_" + account);
+      if (!Array.isArray(cached)) {
+        return 0;
+      }
+      let count = 0;
+      cached.forEach((item) => {
+        count += Number(item.bigCount) || 0;
+        count += Number(item.smallCount) || 0;
+      });
+      return count;
     }
   },
 
@@ -150,14 +186,17 @@ export default {
   },
 
   onShow() {
-    // switchTab 无法带 query，从缓存读取跳转参数
+    // switchTab 无法带 query，从缓存读取 shop-tab-bar 写入的参数
     const tabQuery = uni.getStorageSync("switchTabQuery");
+    let queryUpdated = false;
     if (tabQuery) {
       uni.removeStorageSync("switchTabQuery");
-      this.option = Object.assign({}, this.option || {}, tabQuery);
-      if (tabQuery.account) {
-        uni.setStorageSync("account", tabQuery.account);
-      }
+      this.applyPageQuery(tabQuery);
+      queryUpdated = true;
+    }
+    this.syncShopNavBar();
+
+    if (queryUpdated) {
       this.resetList();
       this.init();
     }
@@ -169,7 +208,42 @@ export default {
     }
   },
 
+  onHide() {
+    // 离开页面恢复原生 tabBar，避免影响「首页/我的」等 tab 页
+    uni.showTabBar({ animation: false });
+  },
+
   methods: {
+    /**
+     * 合并页面 query（switchTab 缓存或 onLoad option）
+     * @param {Object} query 路由参数
+     */
+    applyPageQuery(query) {
+      if (!query || typeof query !== "object") {
+        return;
+      }
+      this.option = Object.assign({}, this.option || {}, query);
+      if (query.account) {
+        this.shopAccount = String(query.account);
+        uni.setStorageSync("account", this.shopAccount);
+      }
+      if (query.hdId) {
+        uni.setStorageSync("hdId", Number(query.hdId) || 0);
+      }
+      if (query.shopNav == 1 || query.shopNav === "1") {
+        this.shopNavMode = true;
+      }
+    },
+
+    /** 店铺模式隐藏原生 tabBar，普通 tab 入口则显示原生 tabBar */
+    syncShopNavBar() {
+      if (this.shopNavMode) {
+        uni.hideTabBar({ animation: false });
+      } else {
+        uni.showTabBar({ animation: false });
+      }
+    },
+
     /** 加载用户花店列表，供店铺筛选使用 */
     loadStoreList() {
       return getHdList({ page: 1, pageSize: 100 }).then((res) => {
@@ -243,10 +317,18 @@ export default {
     },
 
     init() {
-      const optionHdId = Number(this.option.hdId || this.option.id || this.option.ghsId || 0);
+      this.applyPageQuery(this.option || {});
+      this.syncShopNavBar();
+
+      if (!this.shopAccount) {
+        this.shopAccount = uni.getStorageSync("account") || "";
+      }
+
+      const opt = this.option || {};
+      const optionHdId = Number(opt.hdId || opt.id || opt.ghsId || 0);
       if (optionHdId > 0) {
         this.hdId = optionHdId;
-        this.hdName = this.option.hdName || this.option.name || "";
+        this.hdName = opt.hdName || opt.name || "";
       }
       this.loadStoreList();
       this.getMyBuy();
@@ -279,6 +361,11 @@ export default {
 .order-page {
   min-height: 100vh;
   background: $backColor;
+  box-sizing: border-box;
+}
+
+.order-page--shop-nav {
+  padding-bottom: $shopTabBarTotalHeight;
 }
 
 .order-header {
@@ -417,6 +504,10 @@ export default {
   padding-bottom: 100upx;
 }
 
+.order-page--shop-nav .pay_list {
+  padding-bottom: 40upx;
+}
+
 .store-popup {
   padding: 0 30upx calc(30upx + env(safe-area-inset-bottom));
 }