front/components/use-tabbar/use-tabbar.vue

<template>
	<view class="use-tabbar">
		<!--<u-loading-page :loading="pageLoading"></u-loading-page>-->
		<u-navbar v-if="navbar && showNavbar" :title="title" :autoBack="false" :placeholder="true" :leftIcon="leftIcon"
			:rightIcon="rightIcon" bgColor="#f5f5f5" :fixed="true" @rightClick="show" @leftClick="back">
		</u-navbar>
		<u-tabbar height="55" v-if="tabbar && nav.length > 0" :value="value" @change="go" :fixed="true" :placeholder="false" activeColor="#d81e06"
			:safeAreaInsetBottom="true" :fit="true">
			<u-tabbar-item :text="v.name" v-for="(v, k) in nav" :key="k">
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="v.icon" v-if="v.icon"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/tabbar/category.png"
					v-if="!v.icon && v.type == 11"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/tabbar/home.png"
					v-if="!v.icon && v.type == 10"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/tabbar/cart.png"
					v-if="!v.icon && v.type == 2"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/tabbar/user.png"
					v-if="!v.icon && v.type == 1"></image>


				<image class="u-page__item__slot-icon" slot="active-icon" :src="v.icon_select" v-if="v.icon_select">
				</image>
				<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/tabbar/category-active.png"
					v-if="!v.icon && v.type == 11"></image>
				<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/tabbar/home-active.png"
					v-if="!v.icon && v.type == 10"></image>
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="@/static/images/tabbar/cart-active.png" v-if="!v.icon && v.type == 2"></image>
				<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/tabbar/user-active.png"
					v-if="!v.icon && v.type == 1"></image>
			</u-tabbar-item>
		</u-tabbar>
		<u-modal :show="content.show" confirmText="关闭" @close="confirm" @confirm="confirm" :title="title" :closeOnClickOverlay="true">
			<view class="slot-content">
				<u-parse :content="content.value"></u-parse>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		props: {
			navbar: {
				type: Boolean,
				default: true
			},
			tabbar: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				showNavbar: true,
				value: 0,
				title: '',
				logo: '',
				nav: [],
				canBack: false,
				leftIcon: '',
				rightIcon: '',
				content: {
					show : false,
					value: '',
				}
			};
		},
		activated() {
			this.init();
		},
		mounted() {
			this.init();
			this.load();
		},
		methods: {
			init() {
				this.check()
				if (this.Dever.platform == 'weixin' && this.Dever.env == 3) {
					this.showNavbar = false;
				}
				if (this.Dever.env != 5) {
					this.rightIcon = 'calendar'
				}
				uni.getStorage({
					key: 'nav',
					success: (res) => {
						this.value = res.data
					}
				})
			},
			load() {
				this.Dever.config().then(config => {
					this.title = config.n;
					this.nav = config.m;
					if (this.leftIcon == '') {
						uni.setNavigationBarTitle({
							title: this.title,
						});
					}
				});
			},
			show() {
				this.content.show = false;
				this.DeverApi.get(this, 'main.getContent', {noloading:1}, res => {
					this.content.value = res.content;
					this.content.show = true;
				})
			},
			confirm() {
				this.content.show = false;
			},
			check() {
				const pages = getCurrentPages();
				if (pages.length > 0) {
					this.canBack = pages.length > 1;
					const page = pages[pages.length - 1].route;
					const array = ['pages/source/home', 'pages/source/channel', 'pages/user/index']
					if (array.includes(page)) {
						this.leftIcon = '';
					} else {
						this.leftIcon = 'arrow-left';
					}
				}
			},
			back() {
				if (!this.leftIcon) {
					return;
				}
				if (!this.canBack) {
					this.Dever.goTabbar(this.nav, 0)
				} else {
					uni.navigateBack();
				}
			},
			go(value) {
				this.value = value;
				uni.setStorage({
					key: 'nav',
					data: this.value,
					success: (res) => {
						this.Dever.goTabbar(this.nav, this.value)
					}
				});

			}
		}
	};
</script>

<style lang="scss">
	.use-tabbar image {
		width: 48rpx;
		height: 48rpx;
	}
</style>