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 text-gray add-action" v-for="(item, index) in moduleBarInfos" :key="index"
			v-if="item.action === 'add'">
			<button class="cu-btn bg-main-color shadow" :class="'cuIcon-' + item.cuIcon"></button>
			{{item.name}}
		</view>
		<view class="action text-main-color" v-else-if="index === 0">
			<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 class="action text-gray" v-else-if="index > 0">
			<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",
		props: {
			moduleBarInfos: {
				type: Array,
				default: []
			}
		},
		data() {
			return {};
		},
		methods: {

		}
	}
</script>

<style>
</style>