lh-mobile/pages/home/iconItem.vue

<template>
	<view>
		<view class="padding text-center">
			<block v-if="item.text && item.text != 0">
				<uni-badge class="uni-badge-left-margin" :text="item.text" absolute="rightTop" :offset="[-3, -3]"
					size="small" :custom-style="customStyle">
					<image :src="item.icon" style="width:28px;height:28px;">
						<view class="cu-tag badge margin-top-sm" style="margin-left:1.2em" v-if="getTtemDotInfo(item)">
							<block v-if="getTtemDotInfo(item)">{{getTtemDotInfo(item)}}</block>
						</view>
					</image>
				</uni-badge>
			</block>
			<block v-else>
				<image :src="item.icon" style="width:28px;height:28px;">
					<view class="cu-tag badge margin-top-sm" style="margin-left:1.2em" v-if="getTtemDotInfo(item)">
						<block v-if="getTtemDotInfo(item)">{{getTtemDotInfo(item)}}</block>
					</view>
				</image>
			</block>
			<view class="margin-top-xs">{{item.title}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				customStyle: {
					backgroundColor: '#dd524d',
					color: '#fff'
				}
			}
		},
		methods: {
			getTtemDotInfo(item) {
				if (item.page === 'annotationList' && this.msgCount > 0) {
					return this.msgCount
				}
				return '';
			},
		}
	}
</script>

<style scoped lang="scss">
</style>