hs_hzl_uniapp_ml/pages/tabbar/wpTabbar.vue

<template>
	<view>
		<view>
			<scroll-view scroll-y="true" scroll-with-animation :style="{'height':height+'px'}">
				<home v-if="pagePath === '/pages/home/index'"></home>
				<integral v-if="pagePath === '/pages/integral/index'"></integral>
				<orderFood v-if="pagePath === '/pages/orderFood/index'"></orderFood>
				<app v-if="pagePath === '/pages/app/index'"></app>
				<user @setType="setType" v-if="pagePath === '/pages/user/index'"></user>
			</scroll-view>
		</view>
		<view id="MyDom" class="wpTabBar" style="background-color: #f6f6f6;">
			<view v-for="(item,index) in tabBarList" class="wp-tab-item" :key="index" @click="tabBarChange(item.url)"
				:style="{'width':tabWidth}">
				<view v-if="item.url === '/pages/app/index'" style="line-height: 0%;">
					<image style="width:90rpx;" v-if="item.url === pagePath" :src="item.selectIcon" mode="aspectFill">
					</image>
					<image style="width:90rpx;" v-else :src="item.icon" mode="aspectFill"></image>
				</view>
				<view v-else style="line-height: 0%;">
					<image v-if="item.url === pagePath" :src="item.selectIcon" mode="aspectFill"></image>
					<image v-else :src="item.icon" mode="aspectFill"></image>
				</view>
				<view class="wp-tab-title">{{item.name}}
					<view v-if="msgNums[index] > 0" class="hs-hzl-count count">
						{{msgNums[index]}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var begin;
	var stop;
	import home from '../../pages/home/index'
	import app from '../../pages/app/index'
	import orderFood from '../../pages/orderFood/index'
	import integral from '../../pages/integral/index'
	import user from '../../pages/user/index'
	export default {
		name: "wp-tabbar",
		components: {
			home,
			app,
			integral,
			orderFood,
			user
		},
		props: {
			i: {
				type: Array,
				default: [0, 0, 0, 0]
			}
		},
		data() {
			return {
				data: [],
				pagePath: '/pages/home/index',
				type: 0,
				msgNums: [0, 0, 0, 0],
				clearItem1: null,
				clearItem2: null,
				clearItem3: null,
				tabBarList: [],
				tabBarListDefault: [{
					name: "首页", // name
					icon: "../../static/img/tab-icon/home.png", // 图标
					selectIcon: "../../static/img/tab-icon/home-active.png", // 选中图标
					url: "/pages/home/index", // 页面路径
				}, {
					name: "预定",
					icon: "../../static/img/tab-icon/order-food.png",
					selectIcon: "../../static/img/tab-icon/order-food-active.png",
					url: "/pages/orderFood/index",
				}, {
					name: "积分",
					icon: "../../static/img/tab-icon/shop.png",
					selectIcon: "../../static/img/tab-icon/shop-active.png",
					url: "/pages/integral/index",
				}, {
					name: "我的",
					icon: "../../static/img/tab-icon/me.png",
					selectIcon: "../../static/img/tab-icon/me-active.png",
					url: "/pages/user/index",
				}],
				// tabbar 栏
				tabBarListML: [{
					name: "首页", // name
					icon: "../../static/img/tab-icon/home.png", // 图标
					selectIcon: "../../static/img/tab-icon/home-active.png", // 选中图标
					url: "/pages/home/index", // 页面路径
				}, {
					name: "预定",
					icon: "../../static/img/tab-icon/order-food.png",
					selectIcon: "../../static/img/tab-icon/order-food-active.png",
					url: "/pages/orderFood/index",
				}, {
					name: "应用",
					icon: "../../static/img/tab-icon/app.png",
					selectIcon: "../../static/img/tab-icon/app-active.png",
					url: "/pages/app/index",
				}, {
					name: "我的",
					icon: "../../static/img/tab-icon/me.png",
					selectIcon: "../../static/img/tab-icon/me-active.png",
					url: "/pages/user/index",
				}],
				tabBarListHSKJ: [{
					name: "首页", // name
					icon: "../../static/img/tab-icon/home.png", // 图标
					selectIcon: "../../static/img/tab-icon/home-active.png", // 选中图标
					url: "/pages/home/index", // 页面路径
				}, {
					name: "应用",
					icon: "../../static/img/tab-icon/app.png",
					selectIcon: "../../static/img/tab-icon/app-active.png",
					url: "/pages/app/index",
				}, {
					name: "我的",
					icon: "../../static/img/tab-icon/me.png",
					selectIcon: "../../static/img/tab-icon/me-active.png",
					url: "/pages/user/index",
				}],
				tabWidth: '25%',
				height: 0
			}
		},
		beforeDestroy() {
			// uni.setStorageSync('refreshStart', 1)
			clearInterval(this.clearItem1)
			clearInterval(this.clearItem3)
		},
		onLoad() {
			this.initView()
			uni.hideTabBar()
			clearInterval(this.clearItem1)
			clearInterval(this.clearItem3)
			let that = this
			this.data = this.tabBarList
			this.clearItem3 = setInterval(() => {
				that.setMark()
			}, 500);
			let mydomHeight
			uni.createSelectorQuery().in(this)
				.select('#MyDom')
				.boundingClientRect(data => {
					mydomHeight = data.height
					uni.setStorageSync('mydomHeight', mydomHeight)
					uni.getSystemInfo({
						success: res => {
							uni.setStorageSync('windowHeight', res.windowHeight)
							that.height = res.windowHeight - uni.getStorageSync('mydomHeight')
						}
					})
				})
				.exec();
		},
		onShow() {
			this.type = uni.getStorageSync("tabType")
		},
		onHide() {},
		methods: {
			initView() {
				let tabType = uni.getStorageSync('tabType')
				if (tabType == 2) {
					this.tabWidth = '25%'
					this.tabBarList = this.tabBarListDefault
				} else if (tabType == 3) {
					this.tabWidth = '25%'
					this.tabBarList = this.tabBarListML
				} else if (tabType == 4) {
					this.tabWidth = '33.33%'
					this.tabBarList = this.tabBarListHSKJ
				} else {
					this.tabWidth = '25%'
					this.tabBarList = this.tabBarListDefault
				}
			},
			setType(type) {
				this.type = type
				this.initView()
				this.$forceUpdate()
			},
			tabBarChange(path) {
				this.toSwitchTab(path)
				uni.hideTabBar()
			},
			async testSend() {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/sendTestMsg',
					method: 'get',
					urlType: this.$getUrlType()
				})
				if (res.code == 200) {

				}
			},
			async msgs() {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/msgs',
					method: 'get',
					urlType: this.$getUrlType()
				})
				if (res.code == 200) {
					uni.removeStorageSync("tabMark")
					uni.removeStorageSync("msgMarkSum")
					uni.setStorageSync("tabMark", res.data)
					uni.setStorageSync("msgMarkSum", res.data.sum)
				}
			},
			sendSocketMessage(msg) {
				uni.sendSocketMessage({
					data: msg
				});
			},
			setMark() {
				let data = uni.getStorageSync("msgData")
				if (!data) {
					this.msgNums = []
					return
				}
				data = JSON.parse(data)
				let appSum = data.m1 + data.m2 + data.m3 + data.m4 + data.m5 + data.m6 + data.m7 + data.m8 + data.m9
				// this.msgNums = []
				let mData = []
				mData.push(appSum)
				mData.push(0)
				if (this.$getUrlType() === 3) {
					mData.push(data.m1 + data.m3 + data.m4 + data.m5 + data.m7+ data.m8)
				} else {
					mData.push(0)
				}
				mData.push(0)
				this.msgNums = mData
			},
			async toSwitchTab(path) {
				this.pagePath = path
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wpTabBar {
		width: 100%;
		height: 130rpx;
		display: flex;
		flex-wrap: wrap;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-top: 20rpx;
		padding-bottom: 30rpx;

		.wp-tab-item {
			width: 33.3%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.wp-tab-title {
				position: relative;
				color: #9d9d9d;
			}

			image {
				width: 50rpx;
				height: 50rpx;
				padding: 0 10rpx;
			}
		}
	}

	.count {
		bottom: 75rpx;
		left: 40rpx;
		font-size: 22rpx;
		padding: 0 0 3rpx 3rpx;
	}
</style>