crm-xcx/pages/index/index.vue

<template>
	<view class="home-page">
		<view class="message-box flex white-wrap" @click="handleGONext('custome')" v-if="custome.Total>0">
			<image class="icon" src="../../static/icon-1.png" mode="aspectFill"></image>
			<text style="flex: 1;margin-right: 5px;" class="van-ellipsis">{{custome.Message}}</text>
			<van-tag round type="danger" color="#FF4444">{{custome.Total}}</van-tag>
		</view>
		<view class="message-box flex white-wrap" @click="handleGONext('contract')" v-if="contract.Total>0">
			<image class="icon" src="../../static/icon-2.png" mode="aspectFill"></image>
			<text style="flex: 1;margin-right: 5px;" class="van-ellipsis">{{contract.Message}}</text>
			<van-tag round type="danger" color="#FF4444">{{contract.Total}}</van-tag>
		</view>
		<view class="message-box flex white-wrap" @click="handleGONext('seal')" v-if="seal.Total>0">
			<image class="icon" src="../../static/icon-3.png" mode="aspectFill"></image>
			<text style="flex: 1;margin-right: 5px;" class="van-ellipsis">{{seal.Message}}</text>
			<van-tag round type="danger" color="#FF4444">{{seal.Total}}</van-tag>
		</view>
	</view>
	
</template>

<script>
	import {apiMessageCount} from '@/api/message.js'
	export default {
		data() {
			return {
				custome:null,
				contract:null,
				seal:null
			}
		},
		onShow() {
			this.getMessage()
		},
		onPullDownRefresh() {
			this.getMessage()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			}, 500);
		},
		
		methods: {
			// 跳转消息列表
			handleGONext(e){
				uni.navigateTo({
					url:'../../pages-todomessages/list/list?type='+e
				})
			},
			
			//获取消息数据
			async getMessage(){
				const res=await apiMessageCount()
				if(res.code===200){
					this.custome=res.data.CompanyMessage
					this.contract=res.data.ContractMessage
					this.seal=res.data.SealMessage
				}
			}
		}
	}
</script>

<style lang="scss">
	.message-box{
		padding: 20rpx 34rpx;
		align-items: center;
		border-bottom: 1rpx solid #f5f5f5;
		font-size: 16px;
		.icon{
			width: 102rpx;
			height: 102rpx;
			margin-right: 34rpx;
			flex-shrink: 0;
		}
	}
</style>