crm-xcx/pages/index/index.vue

<template>
	<view class="home-page">
		<van-empty description="暂无数据" :image="require('@/static/empty.png')" v-if="list.length===0&&!loading"/>
		<template v-else>
			<view class="message-box flex white-wrap" @click="handleGONext(item.SourceType)" v-for="item in list" :key="item.SourceType">
				<image class="icon" :src="item.img" mode="aspectFill"></image>
				<text style="flex: 1;margin-right: 5px;" class="van-ellipsis">{{item.Message}}</text>
				<van-tag round type="danger" color="#FF4444" v-if="item.Total>0">{{item.Total}}</van-tag>
			</view>
		</template>
	</view>
	
</template>

<script>
	import {apiMessageCount} from '@/api/message.js'
	import {shareData} from '@/utils/config.js'
	export default {
		data() {
			return {
				list:[],
				loading:false
			}
		},
		onShow() {
			this.getMessage()
		},
		onPullDownRefresh() {
			this.getMessage()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			}, 500);
		},
		onShareAppMessage() {
			return shareData
		},
		
		methods: {
			// 跳转消息列表
			handleGONext(e){
				uni.navigateTo({
					url:'../../pages-todomessages/list/list?type='+e
				})
			},
			
			//获取消息数据
			async getMessage(){
				this.loading=true
				const res=await apiMessageCount()
				this.loading=false
				if(res.code===200){
               const imgMap = {
                  1: require('../../static/icon-1.png'),
                  2: require('../../static/icon-2.png'),
                  3: require('../../static/icon-3.png'),
                  5: require('../../static/icon-question.png'),
                  6: require('../../static/icon-comment.png'),
				  10:require('../../static/icon-7.png'),
               }
					this.list=res.data&&res.data.map(item=>{
						let img=imgMap[item.SourceType]
                  
						return {
							...item,
							img
						}
					})
				}
			}
		}
	}
</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>