H5_module/components/nav-bar/index.vue

<template>
	<view :style="[mainStyle]">
		<view class="Tabbar savepadding">
			<!-- v-if="distribution.distributionIsOpen == 1" -->
			<view v-for="(item, index) in list" :key="index"
				:class="'tab-item fflex' + (list.length == 3?' tab-item3':'')" @tap="jumpUrl(item)">
				<!-- @tap="goUrl(item.click)" -->
				<image class="nav_icon11 image" v-if="channel === item.channel"
					:src="item.selectedIconPathOn?(picUrlss+about.mainIconPath+item.selectedIconPathOn): item.selectedIconPath">
				</image>
				<image class="nav_icon11 image" v-else
					:src="item.iconPathOn?(picUrlss+about.mainIconPath+item.iconPathOn): item.iconPath"></image>
				<view :class="channel === item.channel ? 'active' : ''">
					{{ item.text }}
					<text class="dots-cart" v-if="count > 0 && item.channel === 'cart'">{{ count }}</text>
				</view>
			</view>

			<!-- <view v-else v-for="(item, indx) in listNHH" :key="indx" 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-cart" v-if="count > 0 && item.channel === 'cart'">{{ count }}</text>
				</view>
			</view> -->
		</view>
		<view class="savepadding" style="height:115rpx"></view>
		<update-userinfo :update-info="isUpdateInfo" :update-mobile="isUpdateMobile" v-if="isShowUpdate"
			@closeUpdate="closeUpdate"></update-userinfo>
	</view>
</template>

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

	export default {
		data() {
			return {
				mainStyle: app.globalData.mainStyle,
				picUrlss: req.public.picUrls,
				bottomBlankHeignt: app.globalData.isIPhoneX ? 68 : 0,
				iconSrc: req.public.iconSrc,
				about: {},
				distribution: '', //分销配置
				list: [], //有合伙人
				listNHH: [], //无合伙人
				count: '',
				isShowUpdate: false,
				isUpdateInfo: false,
				isUpdateMobile: false
			};
		},

		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();
			}
		},

		async mounted() {
			this.distribution = req.getStorage('distribution');
			if (req.getStorage('configRes')) {
				this.about = JSON.parse(req.getStorage('configRes'));
			}
			console.log('mounted', this.about)
			this.isReady = true;
			await this.getTab();
			await this.getCount();
		},

		methods: {
			getCount() {
				let from = {};
				from.purchaseType = 1;
				return new Promise((resolve, reject) => {
					req.getRequest('/api/purchase/count', from, res => {
						this.count = res;
						this.$forceUpdate();
						resolve();
					});
				})
			},

			// 获取tab导航
			getTab() {
				req.setStorage('cartTab', false);
				console.log('数据>>>>>>>getTab>>>>>>>>>>');
				return new Promise((resolve, reject) => {
					req.tab.map((it) => {
						if (this.about.solution_name && this.about.solution_name != ' ') {
							if (it.name == this.about.solution_name) {
								this.list = it.list.filter(it => it.show == true);
								this.list.map(ittx => {
									if (ittx.channel == 'cart') {
										req.setStorage('cartTab', true);
									}
								});
							}

						} else {
							if (it.name == 'default') {
								this.list = it.list.filter(it => it.show == true);
							}
						}
					})
					this.$forceUpdate();
					resolve();
				})
			},

			// 排序
			compare(property) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value1 - value2;
				};
			},
			jumpUrl(item) {
				if (this.channel == item.channel) {
					return false;
				}
				// #ifdef MP-WEIXIN
				if (req.getStorage('isShowUpdateMobile') && req.getStorage('isShowUpdateInfo')) {
					uni.$emit('tabClick', item.channel)
				} else if (this.getUpdate()) {
					uni.$emit('tabClick', item.channel)
				}
				// #endif
				// #ifndef MP-WEIXIN
				uni.$emit('tabClick', item.channel)
				// #endif

			},
			getUpdate() {
				let userInfos = req.getStorage('userInfo')
				if (!req.getStorage('isShowUpdateMobile') && !userInfos.mobile) {
					console.log('没有手机号')
					this.isShowUpdate = true;
					this.isUpdateMobile = true;
					req.setStorage('isShowUpdateMobile', true)
					return false;
				}
				if (!req.getStorage('isShowUpdateInfo') && (!userInfos.avatar || userInfos.avatar.indexOf(
						'thirdwx.qlogo') > -1 || userInfos.nickName.indexOf('用户') > -1)) {
					console.log('没有昵称')
					this.isShowUpdate = true;
					this.isUpdateInfo = true;
					req.setStorage('isShowUpdateInfo', true)
					return false;
				}
				return true;
			},
			closeUpdate() {
				this.isShowUpdate = false
				this.isUpdateInfo = false;
				this.isUpdateMobile = false;
			},
			/**
			 * 跳转
			 */
			goUrl: function(e) {
				// console.log(e)
				if (e == 'goShop') {
					this.goShop();
				}
				if (e == 'goHome') {
					this.goHome();
				}
				if (e == 'goSort') {
					this.goSort();
				}
				if (e == 'goLive') {
					this.goLive();
				}
				if (e == 'goCart') {
					this.goCart();
				}
				if (e == 'goMerchant') {
					this.goMerchant();
				}
				if (e == 'goPartner') {
					this.goPartner();
				}
				if (e == 'goService') {
					this.goService();
				}
				if (e == 'goUser') {
					this.goUser();
				}
			},
			goHome: function() {
				if (this.channel === 'home') return;
				app.globalData.switchTab('pages/index/index_zehuiyun');
			},
			goSort: function() {
				if (this.channel === 'sort') return;
				app.globalData.switchTab('pages/sort/sort');
			},
			goLive: function() {
				if (this.channel === 'live') return;
				app.globalData.switchTab('service/live/live');
			},
			goCart: function() {
				if (this.channel === 'cart') return;
				app.globalData.switchTab('pages/cart/cart');
			},
			goMerchant: function() {
				if (this.channel === 'merchant') return;
				app.globalData.switchTab('pages/merchant/index');
			},
			goPartner: function() {
				if (this.channel === 'partner') return;
				app.globalData.switchTab('pages/partner/index');
			},
			goService: function() {
				if (this.channel === 'service') return;
				app.globalData.switchTab('pages/service/index');
			},
			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');
			}
		}
	};
</script>
<style>
	@import './index.css';
</style>