renshou/components/nav-bar/index.vue

<template>
	<view>
		<view class="Tabbar savepadding">
			<view v-for="(item, index) in list" :key="index" class="tab-item" @tap="goUrl(item.click)">
				<image class="nav_icon11 image" :src="channel===item.channel ?item.selectedIconPath:item.iconPath">
				</image>
				<view :class="channel===item.channel?'active':''">{{item.text}}<text class="dots"
						v-if="count > 0&&item.channel==='cart'">{{count}}</text></view>

			</view>
		</view>
		<view class="savepadding" style="height:115rpx"></view>
	</view>

</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	import foot from "./index";

	export default {
		data() {
			return {
				bottomBlankHeignt: app.globalData.isIPhoneX ? 68 : 0,
				iconSrc: req.public.iconSrc,
				about: {},
				list: [],
				count: ""
			};
		},

		components: {
			foot
		},
		props: {
			channel: {
				type: String,
				default: 'home'
			},
			isUpdate: {
				type: Boolean,
				default: false
			},
			productType: {
				type: Number,
				default: 0
			}
		},
		watch: {
			"isUpdate": function(isUpdate) {
				// console.log('需要更新消息', isUpdate);
				if (!this.isReady) return;
				this.getCount();
			}
		},

		mounted() {
			// console.log('ready');
			this.isReady = true;
			this.getCount();
			this.getTab();
		},

		methods: {
			getCount() {
				// console.log(this.productType);
				let from = {};

				if (this.productType == 2) {
					from.purchaseType = 2;
				} else {
					from.purchaseType = 1;
				}

				req.getRequest('/api/purchase/count', from, res => {
					this.setData({
						count: res
					});
				});
			},

			// 获取tab导航
			getTab() {
				// console.log(req.tab); // 过滤关闭的tab

				let data = req.tab.filter(it => it.show == true); // 排序更换位置
				// console.log(data.sort(this.compare('index')))
				this.setData({
					list: data.sort(this.compare('index'))
				}); // console.log(data.sort(this.compare('index')))
			},

			// 排序
			compare(property) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value1 - value2;
				};
			},


			/**
			 * 跳转
			 */
			goUrl: function(e) {
				// console.log(e)
				if (e == "goShop") {
					this.goShop()
				}
				if (e == "goHome") {
					this.goHome()
				}
				if (e == "goSort") {
					this.goSort()
				}
				if (e == "goInteractive") {
					this.goInteractive()
				}
				if (e == "goLive") {
					this.goLive()
				}
				if (e == "goCart") {
					this.goCart()
				}
				if (e == "goUser") {
					this.goUser()
				}
				if (e == "goMatch") {
					this.goMatch()
				}
			},
			goHome: function() {
				if (this.channel === "home") return;
				app.globalData.switchTab('pages/index/index');
			},
			goSort: function() {
				if (this.channel === "sort") return;
				app.globalData.switchTab('pages/sort/sort');
			},
			goInteractive: function() {
				if (this.channel === "interactive") return;
				app.globalData.switchTab('pages/interactive/index');
			},
			goLive: function() {
				if (this.channel === "live") return;
				app.globalData.switchTab('pages/live/live');
			},
			goCart: function() {
				if (this.channel === "cart") return;
				app.globalData.switchTab('pages/cart/cart');
			},
			goUser: function() {
				if (this.channel === "user") return;
				app.globalData.switchTab('pages/user/user');
			},
			goShop: function() {
				if (this.channel === "shop") return;
				app.globalData.switchTab('pages/timelyDelivery/index');
			},
			goMatch: function() {
				if (this.channel === "match") return;
				app.globalData.switchTab('pages/matchList/index');
			}
		}
	};
</script>
<style>
	@import "./index.css";
</style>