hs_hzl_uniapp_ml/components/classify-1/classify-1.vue

<template>
	<view class="classify">
		<view v-if="0 === list.length" style="margin: 0 auto;padding: 50rpx;color: #a8a8a8;">
			暂无数据
		</view>
		<view class="classify-li" v-for="(item, index) in list" :key="index" @click="downLoad(item.link)">
			<img class="classify-li__img" :src="url+item.imgPath" alt=""></img>
			<view class="classify-li__text" >
				{{item.text}}
				<span v-if="item.count > 0 && item.count > 0" class="hs-hzl-app-count count">
					{{item.count}}
				</span>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: 'Classify1',
		props: {
			list: {
				type: Array,
				default: () => []
			},
			url: {
				type: String,
			}
		},
		data() {
			return {
				baseURL: uni.$BASE_URL
			}
		},
		onLoad() {
			this.$goto({
				url: '../../pages/integral/index'
			})
		},
		methods: {
			// 打开自定义链接
			openCustomLink(link = '') {
				console.log(`link: ${link}`)
			},
			downLoad(item) {

				if (item === '../../pageApp/hr/leave') {
					uni.requestSubscribeMessage({
						tmplIds: ['qgp7iG6xTRm4JewW8N46nXJT-E6xorFn2hZ2V7gD8wY'],
						success(res) {}
					})
				}
				if (item === '../../pageA/salary/salary') {
					uni.requestSubscribeMessage({
						tmplIds: ['SSsS8EV9dfv-CC7-w_JUKYnfEuWm6FiGL_eED8hf80Q'],
						success(res) {}
					})
				}
				if (item === '../../pageApp/my/MyApproval') {
					uni.requestSubscribeMessage({
						tmplIds: ['Toomi1XWGMzNxOCoPX1rRNj7gLuykgszEzUstXaAp9c'],
						success(res) {}
					})
				}

				//this.$router.push('/pageA/integral/index')
				uni.removeStorageSync('approval')
				if (0 < item.indexOf("../page")) {
					uni.navigateTo({
						url: item
					})
				} else
				if (item) {
					let url = encodeURIComponent(item)
					uni.navigateTo({
						url: '../../pages/home/myWebView?url=' + url
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.classify {
		display: flex;
		justify-content: flex-start;
		flex-flow: row wrap;
		padding: 14upx 24upx 8rpx;
	
		.classify-li {
			flex: 0 0 20%;
			position: relative;

			&__img {
				display: block;
				width: 70upx;
				height: 70upx;
				margin: 0 auto;
			}

			&__text {
				font-size: 24upx;
				display: block;
				color: #5a5a5a;
				text-align: center;
				margin: 8upx 8upx 14upx 0;
			}
		}
	}

	.hs-hzl-app-count {
		text-align: center;
		font-size: 20rpx;
		font-weight: bold;
		color: #FFFFFF;
		background-color: #ff0000;
		width: 35rpx;
		height: 35rpx;
		border-radius: 50%;
		position: absolute;
	}

	.count {
		bottom: 110rpx;
		left: 70rpx;
		padding: 0px 0 2rpx 2rpx;
	}
</style>