new-uniapp-h5/components/the/the-tabbar.vue

<template>
	<view>
		<view class="tabbar">
			<view :class="['item', index === select_index ? 'checked' : '']" v-for="(item, index) of tabbar" :key="index"
				@click="goUrl(item)">
				<image v-if="index === select_index" :src="item.pic_url_on" mode="aspectFill"></image>
				<image v-else :src="item.pic_url" mode="aspectFill"></image>
				<view :style="{ '--font_size': '12px' }" class="name">{{ item.name }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	getTabbarIndex
} from "@/utils/app";
export default {
	name: 'the-tabbar',
	components: {},
	data() {
		return {
			select_index: 0,
			status: false,
			templateList: null,
			loading: true,
			vibrateShort: false
		};
	},
	computed: {
		cartNum() {
			return this.$store.getters.cartNum;
		},
		tabbar() {
			const tabImage = this.$store.state.$Gimage.tab || {}
			return [
				{
					name: "首页",
					link: "pages/index/index",
					pic_url: tabImage.index,
					pic_url_on: tabImage.index_active,
				},
				{
					name: "我的",
					link: "pages/my/my",
					pic_url: tabImage.user,
					pic_url_on: tabImage.user_active,
				},
			]
		}
	},
	created() {
		this.getTemplate();
		// console.log('this.$store.getters.cartNum11111111111111111', this.$store.getters.cartNum)
	},
	methods: {
		async getTemplate() {
			uni.showLoading({
				title: "请稍等",
				mask: true,
			});
			try {
				const res = await this.$api.diy.showTemplate({
					type: 2
				});
				uni.hideLoading();
				if (res.code) return uni.$u.toast(res.message);
				this.status = res.data ? res.data.data[0].status : 0;
				this.templateList = res.data.data[0];

				if (res.data.data[0].vibrateShort) {
					this.vibrateShort = true
				}

				this.getTabbar();
				this.loading = false
			} catch (e) {
				uni.hideLoading();
				throw new Error(e);
			}
		},
		goUrl(item) {
			// uni.setStorageSync("sharePage", item);

			// #ifdef MP
			if (this.vibrateShort) {
				uni.vibrateShort({
					success: function () {
						console.log('success');
					}
				});
			}
			// #endif

			uni.switchTab({
				url: `/${item.link}`,
			});
		},
		goDiyUrl(item) {
			uni.setStorageSync("sharePage", item);
			this.toLinkUrl(item.link)
		},
		getTabbar() {
			// this.select_index =
			this.getTabbarIndex();
		},
		getTabbarIndex() {

			const routes = getCurrentPages(),
				last = routes[routes.length - 1]
			// var static_index = 0
			var that = this
			// console.log(last.$page.fullPath, 'lastlastlast')
			// console.log(this.status, 'this.status')

			if (this.status) {
				this.templateList.list.forEach((item, index) => {
					if (last.$page.fullPath == item.link.link) {
						that.select_index = index
					}
				})
			} else {
				this.tabbar.forEach((item, index) => {
					if (last.$page.fullPath == '/' + item.link) {
						that.select_index = index
					}
				})
			}
			// return static_index;
		},
	},
	onReachBottom() { },
	onPullDownRefresh() { },
}
</script>

<style scoped lang="scss">
.tabbar {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 9;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
	background: #fff;
	padding-bottom: 0;
	padding-bottom: calc(constant(safe-area-inset-bottom));
	padding-bottom: calc(env(safe-area-inset-bottom));
	box-shadow: 0 0.3125rem 1.25rem 0px rgba(166, 199, 251, 0.12);

	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 25%;
		height: 100rpx;
		position: relative;

		.box {
			position: absolute;
			top: 0;
			right: 36rpx;
		}

		&.checked {
			.name {
				color: #f0250e;
			}
		}
	}

	image {
		display: block;
		width: 40rpx;
		height: 40rpx;
	}

	.name {
		height: 40rpx;
		line-height: 40rpx;
		font-size: var(--font_size);
		color: #666;
	}
}
</style>