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>
	import {
		messageTotal
	} from "@/api/message.js"
	export default {
		components: {},
		data() {
			return {
				infoNumOne: 0,
				infoNumTwo: 0,
				infoNumThree: 0
			};
		},
		onLoad(data) {},
		mounted() {
			this.messageTotal()
		},
		methods: {
			messageTotal() {
				messageTotal().then((res) => {
					if(res.code == 1) {
						this.infoNumOne = res.data.system_count
						this.infoNumTwo = res.data.remark_count
						this.infoNumThree = res.data.like_count
					}
				})
			},
			goToUrl(type) {
				if (type === 1) {
					// 评论
					uni.navigateTo({
						url: `/pages-my/comment?type=` + 2
					})
				} else if (type === 2) {
					// 点赞
					uni.navigateTo({
						url: `/pages-my/comment?type=` + 3
					})
				} else {
					// 系统消息
					uni.navigateTo({
						url: `/pages-my/comment?type=` + 1
					})
				}
			},
			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>