dingdong-mall/components/custom-bar/module-bar.vue

<template>
	<!-- 底部fixed操作条，包含发布选项，普通文字加icon加标签选项 -->
	<view class="cu-bar tabbar margin-bottom-xl bg-white fixed-bottom-bar">
		<view class="action add-action" 
			v-for="(item, index) in moduleBarInfos" :key="index"
			v-if="item.action === 'add'" 
			:data-cur="item.pageCode"
			:class="[curPageCode===item.pageCode ? 'text-main-color' : 'text-gray']"
			@click="navChange($event, false)">
			<button class="cu-btn shadow bg-main-color"
				:class="['cuIcon-' + item.cuIcon]">
			</button>
			{{item.name}}
		</view>
		<view class="action" v-else 
			:data-cur="item.pageCode"
			:class="curPageCode===item.pageCode ? 'text-main-color' : 'text-gray'" 
			@click="navChange($event, true)">
			<view :class="'cuIcon-' + item.cuIcon">
				<view class="cu-tag badge" v-if="item.countTag">{{item.countTag > 99 ? '99+' : item.countTag}}</view>
			</view>
			{{item.name}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "module-bar",
		emits: ['getCurPageInfo'],
		props: {
			moduleBarInfos: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				curPageCode: ''
			};
		},
		onReady() {
			this.loadData();
		},
		methods: {
			loadData() {
				this.curPageCode = this.moduleBarInfos[0].pageCode;
			},
			navChange(e, isChangeFocus) {
				let cur = e.currentTarget.dataset.cur;
				this.curPageCode = isChangeFocus ? cur : this.curPageCode;
				this.$emit('getCurPageInfo', {
					curPageCode: cur
				});
			}
		}
	}
</script>

<style>
</style>