feat: 为多个页面添加底部tabBar适配布局

为文章列表、公告列表、品牌页、优惠券页、案例页、文件列表、商品搜索、积分商品列表、分销相关页面以及订单列表页添加了动态底部内边距样式，根据tabBar是否存在适配页面底部空间，同时统一添加自定义底部导航组件

pages_order/list.vue

@@ -18,10 +18,10 @@
 		</view>
 
 		<!-- #ifdef MP -->
-		<mescroll-uni ref="mescroll" @getData="getListData" top="176rpx" v-if="storeToken">
+		<mescroll-uni ref="mescroll" @getData="getListData" top="176rpx" v-if="storeToken" :style="orderListPageStyle">
 			<!-- #endif -->
 			<!-- #ifndef MP -->
-			<mescroll-uni ref="mescroll" @getData="getListData" top="196rpx" v-if="storeToken">
+			<mescroll-uni ref="mescroll" @getData="getListData" top="196rpx" v-if="storeToken" :style="orderListPageStyle">
 				<!-- #endif -->
 				<block slot="list">
 					<view class="order-list" v-if="orderList.length > 0">
@@ -161,7 +161,12 @@
 		<!-- #endif -->
 
 		<ns-login ref="login"></ns-login>
-		<loading-cover ref="loadingCover"></loading-cover>		
+		<loading-cover ref="loadingCover"></loading-cover>
+
+		<!-- 底部tabBar -->
+		<view id="tab-bar">
+			<diy-bottom-nav></diy-bottom-nav>
+		</view>
 	</view>
 </template>
 
@@ -443,6 +448,11 @@ export default {
 		mpOrderList() {
 			if (!this.orderList[this.status]) return;
 			return this.orderList[this.status].list || [];
+		},
+		orderListPageStyle() {
+			return this.$util.objToStyle({
+				paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
+			});
 		}
 	},
 	watch: {

pages_promotion/fenxiao/goods_list.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="content" :style="themeColor">
-		<mescroll-uni ref="mescroll" @getData="getGoodsList">
+		<mescroll-uni ref="mescroll" @getData="getGoodsList" :style="fenxiaoGoodsListPageStyle">
 			<block slot="list">
 				<view class="goods-list"
 					:style="{ backgroundImage: 'url(' + $util.img('public/uniapp/fenxiao/promote/promote_bg.png') + ')' }">
@@ -126,6 +126,11 @@
 
 		<!-- 隐私弹窗 -->
 		<privacy-popup ref="privacyPopup"></privacy-popup>
+
+		<!-- 底部tabBar -->
+		<view id="tab-bar">
+			<diy-bottom-nav></diy-bottom-nav>
+		</view>
 	</view>
 </template>
 
@@ -134,7 +139,14 @@ import list from './public/js/goods_list.js';
 import fenxiaoWords from 'common/js/fenxiao-words.js';
 
 export default {
-	mixins: [list, fenxiaoWords]
+	mixins: [list, fenxiaoWords],
+	computed: {
+		fenxiaoGoodsListPageStyle() {
+			return this.$util.objToStyle({
+				paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
+			});
+		}
+	}
 };
 </script>
 

pages_promotion/fenxiao/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<view :style="themeColor">
 		<view class="fenxiao-index"
-			:style="{ background: 'url(' + $util.img('public/uniapp/fenxiao/index/commissionFission-background.png') + ')', backgroundRepeat: 'no-repeat', backgroundSize: '100%' }">
+			:style="fenxiaoIndexPageStyle">
 			<block v-if="info.fenxiao_id > 0">
 				<!-- 头部 -->
 				<view class="fenxiao-index-header" :class="{ 'not-level': !levelList.length }">
@@ -256,6 +256,11 @@
 				</view>
 			</uni-popup>
 		</view>
+
+		<!-- 底部tabBar -->
+		<view id="tab-bar">
+			<diy-bottom-nav></diy-bottom-nav>
+		</view>
 	</view>
 </template>
 
@@ -573,6 +578,17 @@ export default {
 				level.task_num = level.upgrade_type == 1 ? 1 : level.task.length;
 				return level;
 			}
+		},
+		fenxiaoIndexPageStyle() {
+			const style = {
+				paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
+			};
+			if (this.$util && this.$util.img) {
+				style.background = 'url(' + this.$util.img('public/uniapp/fenxiao/index/commissionFission-background.png') + ')';
+				style.backgroundRepeat = 'no-repeat';
+				style.backgroundSize = '100%';
+			}
+			return this.$util.objToStyle(style);
 		}
 	}
 };

pages_promotion/fenxiao/order.vue

@@ -7,7 +7,7 @@
 				</view>
 			</block>
 		</view>
-		<mescroll-uni ref="mescroll" @getData="getData" top="90" class="member-point" :size="8" v-if="storeToken">
+		<mescroll-uni ref="mescroll" @getData="getData" top="90" class="member-point" :size="8" v-if="storeToken" :style="fenxiaoOrderPageStyle">
 			<view class="goods_list" slot="list">
 				<view class="order-list">
 					<view class="order-item" v-for="(orderItem, orderIndex) in orderList" :key="orderIndex"
@@ -92,6 +92,11 @@
 
 		<ns-login ref="login"></ns-login>
 		<loading-cover ref="loadingCover"></loading-cover>
+
+		<!-- 底部tabBar -->
+		<view id="tab-bar">
+			<diy-bottom-nav></diy-bottom-nav>
+		</view>
 	</view>
 </template>
 
@@ -129,6 +134,13 @@ export default {
 			subMemberId: ''
 		};
 	},
+	computed: {
+		fenxiaoOrderPageStyle() {
+			return this.$util.objToStyle({
+				paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
+			});
+		}
+	},
 	mixins: [fenxiaoWords],
 	onLoad(option) {
 		if (option.type != undefined) this.selectId = option.type;

pages_promotion/point/goods_list.vue

@@ -44,7 +44,7 @@
 			</view>
 		</view>
 
-		<mescroll-uni top="180" @getData="getData" ref="mescroll" :size="10">
+		<mescroll-uni top="180" @getData="getData" ref="mescroll" :size="10" :style="pointGoodsListPageStyle">
 			<block slot="list">
 				<view class="list-wrap">
 					<view class="goods-list double-column" v-if="goodsList.length">
@@ -127,8 +127,13 @@
 			</view>
 		</uni-drawer>
 
-		<!-- 隐私弹窗 -->
+		<!-- 隐私弹窗 -->
 		<privacy-popup ref="privacyPopup"></privacy-popup>
+
+		<!-- 底部tabBar -->
+		<view id="tab-bar">
+			<diy-bottom-nav></diy-bottom-nav>
+		</view>
 	</view>
 </template>
 
@@ -159,6 +164,13 @@ export default {
 			point: 0,
 		};
 	},
+	computed: {
+		pointGoodsListPageStyle() {
+			return this.$util.objToStyle({
+				paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
+			});
+		}
+	},
 	onLoad(options) {
 		this.categoryId = options.category_id || 0;
 		this.keyword = options.keyword || '';

pages_promotion/point/list.vue

@@ -22,7 +22,7 @@
 		<view class="point-navbar-block" :style="{ height: menuButtonBounding.bottom + 'px' }"></view>
 		<!-- #endif -->
 
-		<scroll-view scroll-y="true" class="point-scroll-view" @scrolltolower="getData">
+		<scroll-view scroll-y="true" class="point-scroll-view" @scrolltolower="getData" :style="pointListPageStyle">
 			<view class="point-wrap" :style="{ 'background-position-y': -menuButtonBounding.bottom + 'px' }">
 				<view class="head-box">
 					<view class="account-content">
@@ -255,6 +255,11 @@
 
 		<!-- 隐私弹窗 -->
 		<privacy-popup ref="privacyPopup"></privacy-popup>
+
+		<!-- 底部tabBar -->
+		<view id="tab-bar">
+			<diy-bottom-nav></diy-bottom-nav>
+		</view>
 	</view>
 </template>
 <script>
@@ -293,6 +298,13 @@ export default {
 			newestGame: null
 		};
 	},
+	computed: {
+		pointListPageStyle() {
+			return this.$util.objToStyle({
+				paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
+			});
+		}
+	},
 	onLoad(option) {
 		setTimeout(() => {
 			if (!this.addonIsExist.pointexchange) {

pages_tool/article/list.vue

@@ -1,6 +1,6 @@
 <template>
 	<view :style="themeColor">
-		<mescroll-uni @getData="getData" ref="mescroll">
+		<mescroll-uni @getData="getData" ref="mescroll" :style="articleListPageStyle">
 			<block slot="list">
 				<view class="article-wrap" v-if="list.length">
 					<ns-adv keyword="NS_ARTICLE" class-name="adv-wrap"></ns-adv>
@@ -28,6 +28,11 @@
 
 		<!-- 隐私弹窗 -->
 		<privacy-popup ref="privacyPopup"></privacy-popup>
+
+		<!-- 底部tabBar -->
+		<view id="tab-bar">
+			<diy-bottom-nav></diy-bottom-nav>
+		</view>
 	</view>
 </template>
 
@@ -38,6 +43,13 @@ export default {
 			list: []
 		};
 	},
+	computed: {
+		articleListPageStyle() {
+			return this.$util.objToStyle({
+				paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
+			});
+		}
+	},
 	onShow() {
 		this.setPublicShare();
 	},

pages_tool/cases/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view>
-    <view class="about w100">
+    <view class="about w100" :style="casesPageStyle">
       <view class="list_cotact padding-top">
         <view class="container">
           <block v-for="(item, index) in dataList" :key="index">
@@ -82,6 +82,11 @@
         <video class="adaptive-video" autoPauseIfNavigate="true" autoPauseIfOpenNative="true" autoplay="false" enableAutoRotation="true" id="myVideo" :src="video_url" controls="true"></video>
       </view>
     </uni-popup>
+
+    <!-- 底部tabBar -->
+    <view id="tab-bar">
+      <diy-bottom-nav></diy-bottom-nav>
+    </view>
   </view>
 </template>
 
@@ -104,6 +109,13 @@ export default {
       video_url: ""
     };
   },
+  computed: {
+    casesPageStyle() {
+      return this.$util.objToStyle({
+        paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
+      });
+    }
+  },
   onLoad() {
     this.init();
   },

pages_tool/files/list.vue

@@ -7,7 +7,7 @@
         <text class="iconfont icon-sousuo3" @tap="search"></text>
       </view>
     </view>
-    <mescroll-uni ref="mescroll" top="100" @getData="getData">
+    <mescroll-uni ref="mescroll" top="100" @getData="getData" :style="fileListPageStyle">
       <view slot="list">
         <block v-if="list.length > 0">
           <view class="article-wrap">
@@ -36,6 +36,11 @@
       </view>
     </mescroll-uni>
     <privacy-popup ref="privacyPopup"></privacy-popup>
+
+    <!-- 底部tabBar -->
+    <view id="tab-bar">
+      <diy-bottom-nav></diy-bottom-nav>
+    </view>
   </view>
 </template>
 
@@ -49,6 +54,13 @@ export default {
       keyword: ''
     }
   },
+  computed: {
+    fileListPageStyle() {
+      return this.$util.objToStyle({
+        paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
+      });
+    }
+  },
   onLoad(options) {
     if (options.category_id > 0) {
       this.category_id = options.category_id

pages_tool/goods/brand.vue

@@ -1,6 +1,6 @@
 <template>
 	<view :data-theme="themeStyle">
-		<mescroll-uni @getData="getBrandList" ref="mescroll" size="20">
+		<mescroll-uni @getData="getBrandList" ref="mescroll" size="20" :style="brandPageStyle">
 			<block slot="list">
 				<ns-adv keyword="NS_BRAND" class-name="adv-wrap"></ns-adv>
 				<view class="brand-content" v-if="brandList.length > 0">
@@ -18,6 +18,11 @@
 
 		<!-- 隐私弹窗 -->
 		<privacy-popup ref="privacyPopup"></privacy-popup>
+
+		<!-- 底部tabBar -->
+		<view id="tab-bar">
+			<diy-bottom-nav></diy-bottom-nav>
+		</view>
 	</view>
 </template>
 
@@ -29,6 +34,13 @@ export default {
 			siteId: 0
 		};
 	},
+	computed: {
+		brandPageStyle() {
+			return this.$util.objToStyle({
+				paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
+			});
+		}
+	},
 	onLoad(options) {
 		if (options.site_id) this.siteId = options.site_id;
 	},

pages_tool/goods/coupon.vue

@@ -12,7 +12,7 @@
 			</view>
 		</view>
 
-		<mescroll-uni ref="mescroll" top="100" @getData="getMemberCouponList">
+		<mescroll-uni ref="mescroll" top="100" @getData="getMemberCouponList" :style="couponListPageStyle">
 			<block slot="list">
 				<view class="coupon-listone">
 					<view class="item" v-for="(item, index) in list" :key="index" @click="liClick(item, index)"
@@ -75,6 +75,11 @@
 
 		<!-- 隐私弹窗 -->
 		<privacy-popup ref="privacyPopup"></privacy-popup>
+
+		<!-- 底部tabBar -->
+		<view id="tab-bar">
+			<diy-bottom-nav></diy-bottom-nav>
+		</view>
 	</view>
 </template>
 
@@ -90,6 +95,13 @@ export default {
 			mpShareData: null //小程序分享数据
 		};
 	},
+	computed: {
+		couponListPageStyle() {
+			return this.$util.objToStyle({
+				paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
+			});
+		}
+	},
 	onLoad(option) {
 		setTimeout(() => {
 			if (!this.addonIsExist.coupon) {

pages_tool/goods/search.vue

@@ -1,6 +1,6 @@
 <template>
 	<view :style="themeColor">
-		<view class="content">
+		<view class="content" :style="searchPageStyle">
 			<view class="cate-search">
 				<view class="search-box" @click="search()" @tap.stop="search()">
 					<input class="uni-input" maxlength="50" v-model="inputValue" confirm-type="search" @focus="inputFocus" focus @confirm="search()" @click="search()" @tap="search()" :placeholder="searchWords ? searchWords : ''" />
@@ -41,6 +41,10 @@
 				</view>
 			</view>
 		</view>
+		<!-- 底部tabBar -->
+		<view id="tab-bar">
+			<diy-bottom-nav></diy-bottom-nav>
+		</view>
 	</view>
 </template>
 
@@ -58,6 +62,13 @@
 				isAllHistory: false
 			};
 		},
+		computed: {
+			searchPageStyle() {
+				return this.$util.objToStyle({
+					paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
+				});
+			}
+		},
 		onLoad(options) {
 			if (options.keyword) this.inputValue = options.keyword;
 			uni.getStorageSync('search') ? '' : uni.setStorageSync('search', []);

pages_tool/notice/list.vue

@@ -1,6 +1,6 @@
 <template>
 	<view :style="themeColor">
-		<mescroll-uni @getData="getData" ref="mescroll">
+		<mescroll-uni @getData="getData" ref="mescroll" :style="noticeListPageStyle">
 			<block slot="list">
 				<view class="notice-list" v-if="dataList.length">
 					<view class="notice-item" @click="jumpDetail(item.id)" v-for="(item, index) in dataList"
@@ -22,6 +22,11 @@
 
 		<!-- 隐私弹窗 -->
 		<privacy-popup ref="privacyPopup"></privacy-popup>
+
+		<!-- 底部tabBar -->
+		<view id="tab-bar">
+			<diy-bottom-nav></diy-bottom-nav>
+		</view>
 	</view>
 </template>
 
@@ -32,6 +37,13 @@ export default {
 			dataList: []
 		};
 	},
+	computed: {
+		noticeListPageStyle() {
+			return this.$util.objToStyle({
+				paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
+			});
+		}
+	},
 	onShow() {
 		this.setPublicShare();
 	},