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" :title="title" :autoBack="true" :placeholder="true" :leftIcon="leftIcon"
			rightIcon="calendar" bgColor="#f5f5f5" :fixed="true" @rightClick="show" @leftClick="back">
		</u-navbar>
		<u-tabbar 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 {
				value: 0,
				title: '',
				logo: '',
				nav: [],
				canBack: false,
				leftIcon: '',
				content: {
					show : false,
					value: '',
				}
			};
		},
		activated() {
			this.init();
		},
		mounted() {
			this.init();
			const pages = getCurrentPages();
			if (pages.length > 0) {
				this.canBack = pages.length > 1;
				const page = pages[pages.length - 1].route;
				if (page == 'pages/source/home') {
					this.leftIcon = '';
					this.value = 0;
					uni.setStorage({
						key: 'nav',
						data: 0,
					});
				} else if (page == 'pages/source/cate') {
					this.leftIcon = '';
					this.value = 1;
					uni.setStorage({
						key: 'nav',
						data: 1,
					});
				} else {
					this.leftIcon = 'arrow-left';
				}
			}
			this.load();
		},
		methods: {
			init() {
				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;
			},
			back() {
				if (!this.canBack) {
					var item = this.nav[0];
					this.Dever.goTabbar(item)
				}
			},
			go(value) {
				this.value = value;
				uni.setStorage({
					key: 'nav',
					data: this.value,
					success: (res) => {
						var item = this.nav[this.value];
						this.Dever.goTabbar(item)
					}
				});

			}
		}
	};
</script>

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