修改自定义tabar

components/OrderQrCode/index.vue

 <template>
 	<div>
-		<u-popup :show="show" :round="10"  mode="bottom" @close="close" :safeAreaInsetBottom="false">
-			<view class="bigBox" :style="{'height':'1380rpx'}">
+		<u-popup :show="show"  :round="10"  mode="bottom" @close="close" :safeAreaInsetBottom="false">
+			<view class="bigBox" :style="{'height':'90vh'}">
 				<div class="order_flow" >
 					<div class="code">取单码 {{ orderInfo.orderNum }}</div>
 					<!-- <image mode="scaleToFill" :src="qrCode" class="qr_code"></image> -->

components/menuAssembly/index.vue

 <template>
 	<view class="page-body">
-		<scroll-view class="nav-left" :class="[buied?'buiedcss':'',shopCarFlag?'shopCarcss':'' ]" scroll-y :scroll-top="scrollLeftTop" scroll-with-animation>
+		<scroll-view class="nav-left" :style="[heightStyle]" :class="[shopCarFlag?'shopCarcss':'' ]" scroll-y :scroll-top="scrollLeftTop" scroll-with-animation>
 			<view class="nav-left-item" v-for="item in classifyData" @click="categoryClickMain(item.id)" :key="item.id"
 				:class="item.id == categoryId ? 'active' : ''">
 				<span>{{ item.name }}</span>
 				<view :class="item.id == categoryId ? 'active-line' : ''"></view>
 			</view>
 		</scroll-view>
-		<scroll-view class="nav-right" :class="[buied?'buiedcss':'',shopCarFlag?'shopCarcss':'' ]" scroll-y :scroll-top="scrollTop" @scroll="scroll" @touchstart="openScroll"
+		<scroll-view class="nav-right" :style="[heightStyle]" :class="[shopCarFlag?'shopCarcss':'' ]" scroll-y :scroll-top="scrollTop" @scroll="scroll" @touchstart="openScroll"
 			scroll-with-animation>
 			<view v-for="category in classifyData" :id="category.id" :key="category.id" class="box">
 				<view :style="loads" class="right-title">{{ category.name }}</view>
@@ -52,6 +52,9 @@ export default {
 	props:['buied'],
 	data() {
 		return {
+			heightStyle: {
+				'--scroll-height': 0
+			},
 			Utils,
 			classifyData: [],
 			categoryId: '',
@@ -60,18 +63,28 @@ export default {
 			scrollTop: 0,
 			scrolled: true,
 			goods:[],
-			shopCarFlag:false
+			shopCarFlag:false,
+			taBarHeight:0
 		}
 	},
 	watch:{
 		goods(val){
 			this.shopCarFlag = val.length>0
+		},
+		buied(val) {
+			if(val){
+				this.heightStyle['--scroll-height'] = (this.taBarHeight+293)+'rpx'
+			}
 		}
 	},
 	created() {
 		$EventBus.$off('updateCar');
 	},
 	mounted(){
+		this.$nextTick(()=>{
+			this.taBarHeight = uni.getStorageSync('taBarHeight')
+			this.heightStyle['--scroll-height'] = (this.taBarHeight)+'rpx'
+		})
 		this.goods = uni.getStorageSync('shopCarInfo') || [];
 		$EventBus.$on('updateCar', () => {
 			this.goods = uni.getStorageSync('shopCarInfo') || [];
@@ -378,8 +391,9 @@ export default {
 	width: 160rpx;
 	background: #fff;
 	border-right: 2rpx solid #EEEEEE;
-	height: calc(100vh - 376rpx);
+	height: calc(100vh - var(--scroll-height));
 	overflow: auto;
+	// background: var(--header-color);
 }
 
 .nav-left-item {
@@ -400,7 +414,7 @@ export default {
 
 .nav-right {
 	box-sizing: border-box;
-	height: calc(100vh - 376rpx);
+	height: calc(100vh - var(--scroll-height));
 	overflow: auto;
 	padding-top: 50rpx;
 	width: 585.21rpx;

components/shopCar/shopCar.vue

@@ -64,7 +64,7 @@
 			</view>
 
 		</u-popup>
-		<view class="end" v-if="goods.length">
+		<view class="end" v-if="goods.length" :style="{'bottom':shopCar+'rpx'}">
 			<view @click.stop="openShopCar" class="end-left">
 				<view style="display:flex">
 					<view class="car-img">
@@ -101,13 +101,16 @@ export default {
 			goods: [],//购物车商品信息
 			loginInfo: "",
 			imgPath: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F82%2F40%2F596fa6dc00bb4_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633499781&t=d37222e32213957ddbdd01d62e071309',
-			Utils
+			Utils,
+			shopCar:0
 		}
 	},
 	created() {
 		$EventBus.$off('updateCar');
 	},
 	mounted() {
+		this.shopCar = uni.getStorageSync('shopCar')
+		console.log(this.shopCar)
 		if(!this.userms){
 			User.wxLoginAndGetOpenid(true).then(loginInfo=>{
 				this.loginInfo = loginInfo
@@ -118,6 +121,7 @@ export default {
 			this.goods = uni.getStorageSync('shopCarInfo') || [];
 		});
 	},
+	
 	methods: {
 		// 切换购物车列表显示隐藏
 		openShopCar() {
@@ -477,11 +481,10 @@ export default {
 	height: 92rpx;
 	background-color: rgb(253, 253, 253);
 	position: fixed;
-	bottom: 0;
 	left: 0;
 	box-shadow: 0px -4px 8px 0px rgba(102, 102, 102, 0.1);
 	display: flex;
-	z-index: 10075;
+	z-index: 1024;
 	align-items: center;
 
 	&-left {

components/tabBar/tabBar copy.vue

+ 
+<template>
+		<view class="tabbar">
+			<view class="navigator">
+				<view class="navigator-item" v-for="(item,index) in tabBar.list" :key="item.pagePath"
+					@click="switchTab(index)">
+						<img :src="item.iconPath" class="icon" v-if="selectedIndex !== index">
+						<img :src="item.selectedIconPath" class="icon" v-else>
+						<text :class="['item-text',{'text-active':selectedIndex === index}]">{{item.text}}</text>
+				</view>
+			</view>
+		</view>
+	</view>
+
+</template>
+<script>
+	export default {
+    props:['select'],
+	watch:{
+		select(val){
+     		 this.selectedIndex = Number(val)
+		}
+	},
+    mounted(){
+    //   console.log(this.select)
+    //   this.selectedIndex = Number(this.select)
+      // this.selectedIndex = 0
+      // const url = uni.getStorageSync('url')
+			// const nowUrl = this.tabBar.list.findIndex(item => url === item.pagePath)
+      // this.selectedIndex = nowUrl
+      // console.log(nowUrl)
+    },
+		data() {
+			return {
+				selectedIndex: 0,
+				showselected: false,
+				tabBar: {
+					list: [
+            {
+               "iconPath": "/static/imgs/caidanweixuanzhong.png",
+               "selectedIconPath": "/static/imgs/caidanxuanzhong.png",
+               "pagePath": "pages/menu/menu",
+               "text": "菜单"
+             },
+             {
+               "iconPath": "/static/imgs/dingdanweixuanzhong.png",
+               "selectedIconPath": "/static/imgs/dingdanxuanzhong.png",
+               "pagePath": "pages/order/order",
+               "text": "订单"
+             },
+             {
+               "iconPath": "/static/imgs/wodeweixuanzhong.png",
+               "selectedIconPath": "/static/imgs/wodexuanzhong.png",
+               "pagePath": "pages/mine/mine", 
+               "text": "我的"
+             }
+					]
+				},
+			}
+		},
+		// beforeCreate() {
+		// 	this.__path__ = this.$route.path
+		// },
+		methods: {
+			switchTab(index, item) {
+				this.$emit('changeIndex',index)
+			}
+		},
+	}
+</script>
+ 
+<style>
+	.tabbar {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		height: 100rpx;
+		z-index: 999;
+		background: #F5F5F5;
+		border-top: 2rpx solid #eee;
+	}
+ 
+	.navigator {
+		display: flex;
+		justify-content: space-between;
+		width: 85%;
+		margin: 0 auto;
+		padding: 20rpx;
+	}
+ 
+	.navigator-item {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		width: 50rpx;
+		height: 100%;
+	}
+ 
+	.item-text {
+		margin-top: 6rpx;
+		color: #777E86;
+		font-size: 24rpx;
+	}
+ 
+	.text-active {
+		color: #2E92FD !important;
+	}
+ 
+	.icon {
+		width: 20px;
+		height: 20px;
+	}
+</style>
\ No newline at end of file

components/tabBar/tabBar.vue

+ 
 <template>
-  <!-- Tab -->
-  <u-tabbar zIndex="10075" v-model="selectedTabbar" :border="false" inactive-color="#000000" height="50"
-    active-color="#006ECF" :fixed="true" :safeAreaInsetBottom="true" @change="beforeSwitch">
-    <u-tabbar-item v-for="(item, index) in list" :key="item.text" :text="item.text" 
-      :icon="selectedTabbar == index ? item.activeIcon : item.icon"></u-tabbar-item>
-  </u-tabbar>
+		<view class="tabbar" :style="{'padding-bottom':BottomSafeHeight+'px'}">
+			<view class="navigator">
+				<view class="navigator-item" v-for="(item,index) in tabBar.list" :key="item.pagePath"
+					@click="switchTab(index,item)">
+						<img :src="item.iconPath" class="icon" v-if="selectedIndex !== index">
+						<img :src="item.selectedIconPath" class="icon" v-else>
+						<text :class="['item-text',{'text-active':selectedIndex === index}]">{{item.text}}</text>
+				</view>
+			</view>
+		</view>
+	</view>
+
 </template>
 <script>
-
-export default {
-  data() {
-    return {}
-  },
-  props: ['selectedTabbar'],
-  computed: {
-    list() {
-      // tabbar List
-      return this.$store.state.list;
-    }
-  },
-  methods: {
-    //点击tab
-
-    beforeSwitch(index) {
-   
-      uni.switchTab({ url: this.list[index].pagePath });
-      return true;
-    }
-  }
-}
+	export default {
+    props:['select'],
+    mounted(){
+		this.BottomSafeHeight = uni.getStorageSync('BottomSafeHeight')||10
+		uni.setStorageSync("taBarHeight",(this.BottomSafeHeight+376))
+		uni.setStorageSync("shopCar",this.BottomSafeHeight==10?120:(this.BottomSafeHeight+288)/2)
+		uni.setStorageSync("orderBottom",(this.BottomSafeHeight+150))
+    	this.selectedIndex = Number(this.select)
+    },
+		data() {
+			return {
+				selectedIndex: 0,
+				showselected: false,
+				BottomSafeHeight:0,
+				tabBar: {
+					list: [
+            {
+               "iconPath": "/static/imgs/caidanweixuanzhong.png",
+               "selectedIconPath": "/static/imgs/caidanxuanzhong.png",
+               "pagePath": "pages/menu/menu",
+               "text": "菜单"
+             },
+             {
+               "iconPath": "/static/imgs/dingdanweixuanzhong.png",
+               "selectedIconPath": "/static/imgs/dingdanxuanzhong.png",
+               "pagePath": "pages/order/order",
+               "text": "订单"
+             },
+             {
+               "iconPath": "/static/imgs/wodeweixuanzhong.png",
+               "selectedIconPath": "/static/imgs/wodexuanzhong.png",
+               "pagePath": "pages/mine/mine", 
+               "text": "我的"
+             }
+					]
+				},
+			}
+		},
+		// beforeCreate() {
+		// 	this.__path__ = this.$route.path
+		// },
+		methods: {
+			switchTab(index, item) {
+				let url = '/' + item.pagePath
+        	uni.switchTab({
+				    url
+				  })
+        return
+			}
+		},
+	}
 </script>
-
+ 
 <style>
+	.tabbar {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		height: 100rpx;
+		z-index: 999;
+		background: #FFFFFF;
+		border-top: 2rpx solid #FFFFFF;
+	}
+ 
+	.navigator {
+		display: flex;
+		justify-content: space-around;
+		width: 85%;
+		margin: 0 auto;
+		padding: 20rpx;
+	}
+ 
+	.navigator-item {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		width: 50rpx;
+		height: 100%;
+	}
+ 
+	.item-text {
+		margin-top: 12rpx;
+		color: #777E86;
+		font-size: 24rpx;
+	}
+ 
+	.text-active {
+		color: #2E92FD !important;
+	}
+ 
+	.icon {
+		width: 40rpx;
+		height: 40rpx;
+	}
 </style>
\ No newline at end of file

main.js

@@ -14,32 +14,17 @@ import User from '@/request/user';
 // main.js
 import initToast from "@/components/bocft-toast/initToast.js"
 import showToast from "@/components/bocft-toast/bocft-toast.vue"
+import taBar from "@/components/tabBar/tabBar.vue"
 
 initToast(Vue);
 Vue.component('show-toast',showToast);
+Vue.component('taBar',taBar);
 
 
 Vue.use(uView);
 Vue.prototype.$utils = utils;
 Vue.prototype.setPrice = (price) => price && Number(price).toFixed(2);
 
-
-// #ifdef MP-WEIXIN
-Vue.mixin({
-  methods:{
-      setTabBarIndex(index) {
-          if (typeof this.$mp.page.getTabBar === 'function' &&
-          this.$mp.page.getTabBar()) {
-              this.$mp.page.getTabBar().setData({
-                  selected: index
-              })
-          }
-      }
-  }
-})
-// #endif
-
-
 Vue.prototype.loginByPhoneNumber = (e) => {
   if (e.detail.errMsg == 'getPhoneNumber:ok') {
     User.getPhoneNumber(e);

menuSubPackage/pages/goodsDetail/goodsDetail.vue

@@ -441,6 +441,7 @@ export default {
 			height: 48rpx;
 			margin-right: 32rpx;
 			line-height: 48rpx;
+			min-width: 120rpx;
 
 
 			.default {

pages.json

@@ -94,7 +94,7 @@
     "backgroundColor": "#ffffff"
   },
   "tabBar": {
-    "custom": false,
+    "custom": true,
     "color": "#999999",
     "selectedColor": "#003AE9",
     "iconWidth": "30rpx",

pages/app/app.vue

+<template>
+  <view>
+    <Menu v-if="selectIndex===0"></Menu>
+    <Order v-else-if="selectIndex===1"></Order>
+    <Mine  v-else-if="selectIndex===2"></Mine>
+	<taBar :select="selectIndex" @changeIndex="acceptIndex"></taBar>
+  </view>
+</template>
+
+<script>
+import Menu from '../menu/menu.vue'
+import Mine from '../mine/mine.vue'
+import Order from '../order/order.vue'
+export default {
+    components:{
+        Menu,
+        Mine,
+        Order
+    },
+    data(){
+        return {
+            selectIndex: 0
+        }
+    },
+    methods:{
+        acceptIndex(e){
+            console.log(e)
+            this.selectIndex = e
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

pages/menu/menu.vue

@@ -45,7 +45,6 @@
 				<view class="barCode-dis">点击二维码取单</view>
 			</view>
 		</view>
-		<ShopCar ref="shopbar" />
 		<MenuAssembly ref="MenuAssembly" @getallNum="getallNum" :buied="buied"/>
 		<u-picker @cancel="show = false" :show="show" :immediateChange="true" ref="uPicker" :columns="columns"
 			@confirm="confirm" keyName="name" @change="changeHandler"></u-picker>
@@ -53,6 +52,8 @@
 		<canvas class="canvas-code" canvas-id="myQrcode2"
 			style="background:#fff;width: 200px;height: 200px; display:block; left:-800rpx;position:absolute;" />
 		<show-toast ref="toast"/>
+		<taBar select="0"></taBar>
+		<ShopCar ref="shopbar" />
 	</view>
 </template>
 <script>

pages/mine/mine.vue

@@ -68,7 +68,7 @@
 				</view>
 			</view>
 		</view>
-
+		<taBar select="2"></taBar>
 	</view>
 </template>
 

pages/order/order.vue

@@ -15,7 +15,7 @@
 			<view  class="empty_text">——您还未登录，请先登录——</view>
 			<button class="empty_button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">去品尝</button>
 		</view>
-		<view class="orders">
+		<view class="orders" :style="{'padding-bottom':orderBottom+'rpx'}">
 			<view class="order_item" v-for="item in list" :key="item.id" @click="openInfo(item)">
 				<view class="order_header">
 					<view>
@@ -65,6 +65,7 @@
 			</view>
 		</view>
 		<show-toast ref="toast"/>
+		<taBar select="1"></taBar>
 	</view>
 </template>
 
@@ -89,12 +90,17 @@ export default {
 			empty: false,
 			list: [],
 			loginInfo:"",
-			Utils
+			Utils,
+			orderBottom:0
 		}
 	},
 	onShow() {
-		this.getList()
+		// this.getList()
 	},
+	mounted() {
+		this.orderBottom = uni.getStorageSync('orderBottom')
+		this.getList()
+	},	
 	computed: {
 		userms() {
 			return this.$store.getters.Authorization;

request/user/index.js

@@ -21,6 +21,7 @@ export default {
         callback && callback(1, params);
       },
       fail: function (res) {
+        console.log(res)
 		const params = uni.getStorageSync('location');
         callback && callback(0, params);
       },