zh_order_food_xcx/pages-my/info-centre.vue

<template>
	<view class="flex-common-css bgc-f">
		<Nav title="消息中心" titleColor="#333" bgckgroundBox='#fff'></Nav>
		<scroll-view :scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
			<view class="content-box box-border-box">
				<view class="item-box align-items-center flex-justify-space mb-52" @click="goToUrl(1)">
					<view class="left align-items-center">
						<image class="left-img mr-20" src="@/static/img/my/pl.png" mode=""></image>
						<view class="">
							<view class="fs-32 fc-0 fw-600">
								评论
							</view>
							<view class="fs-28 fc-9 p-t-4" v-if="infoNumOne>0">
								你有新的评论，速去查看~
							</view>
						</view>
					</view>
					<view class="right b-rad-200 bgc-FB3D03 fs-24 fc-f" v-if="infoNumOne>0">
						{{infoNumOne >= 99?'99+':infoNumOne}}
					</view>
				</view>
				<view class="item-box align-items-center flex-justify-space mb-52" @click="goToUrl(2)">
					<view class="left align-items-center">
						<image class="left-img mr-20" src="@/static/img/my/dz.png" mode=""></image>
						<view class="">
							<view class="fs-32 fc-0 fw-600">
								点赞
							</view>
							<view class="fs-28 fc-9 p-t-4" v-if="infoNumTwo>0">
								你有新的点赞，速去查看~
							</view>
						</view>
					</view>
					<view class="right b-rad-200 bgc-FB3D03 fs-24 fc-f" v-if="infoNumTwo>0">
						{{infoNumTwo >= 99?'99+':infoNumTwo}}
					</view>
				</view>
				<view class="item-box align-items-center flex-justify-space mb-52" @click="goToUrl(3)">
					<view class="left align-items-center">
						<image class="left-img mr-20" src="@/static/img/my/xtxx.png" mode=""></image>
						<view class="">
							<view class="fs-32 fc-0 fw-600">
								系统消息
							</view>
							<view class="fs-28 fc-9 p-t-4" v-if="infoNumThree>0">
								刚刚错过了公告，速去查看~
							</view>
						</view>
					</view>
					<view class="right b-rad-200 bgc-FB3D03 fs-24 fc-f" v-if="infoNumThree>0">
						{{infoNumThree >= 99?'99+':infoNumThree}}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				infoNumOne: 0,
				infoNumTwo: 1,
				infoNumThree: 100
			};
		},
		onLoad(data) {},
		mounted() {},
		methods: {
			goToUrl(type) {
				if(type === 1) {
					// 评论
					uni.navigateTo({
						url: '/pages-my/comment'
					})
				}else if(type === 2) {
					// 点赞
					uni.navigateTo({
						url: '/pages-my/praise'
					})
				}else {
					// 系统消息
				}
			},
			scrolltolower() {
				console.log('触底');
			},
		},
	}
</script>

<style lang="scss" scoped>
.content-box{
	padding: 32rpx 32rpx 0;
}
.left-img{
	width: 112rpx;
	height: 112rpx;
}
.right{
	padding: 0 10rpx;
	height: 32rpx;
	line-height: 32rpx;
}
</style>