xihaigou/pages/user/messageCenter.vue

<template>
	<view class="content">
		<view class="iconmessage-box" v-for="(item,index) in messageDate"  v-if="item.messageDetail" @click="navTo(index)">
			<view class="box-left">
				<view class="img">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="box-title">
					<view class="title">
						{{item.title}}
					</view>
					<view class="detail">
						{{item.messageDetail.content}}
					</view>
				</view>
			</view>
			<view class="box-right">
				<view class="time">
					{{item.messageDetail.add_time}}
				</view>
				<view class="tishi" v-if="item.messageDetail.status!=1">
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getMessage} from '@/api/index.js' 
	export default {
		data() {
			return {
				number:1,
				messageDate: [{
						img: '../../static/user/message01.png',
						title: '系统消息',
						messageDetail: {},

					},
					{
						img: '../../static/user/message02.png',
						title: '新增下线',
						messageDetail: {},

					},
					{
						img: '../../static/user/message03.png',
						title: '佣金通知',
						messageDetail: {},

					},
					{
						img: '../../static/user/message04.png',
						title: '发货通知',
						messageDetail: {},

					},
					{
						img: '../../static/user/message05.png',
						title: '打怪通知',
						messageDetail: {},
					}
				]
			};
		},
		onLoad() {
			this.getMessage()
		},
		onShow() {
			this.getMessage()
		},
		computed:{
			
		},
		methods:{
			navTo(index){
				let obj = this
				obj.number+=index
				uni.navigateTo({
					url:'./messageList?id='+obj.number
				})
			},
			getMessage(){
				getMessage().then(res=>{
					// this.messageDetail =res.data
					this.messageDate[0].messageDetail = res.data.xt
					this.messageDate[1].messageDetail = res.data.xx
					this.messageDate[2].messageDetail = res.data.yj
					this.messageDate[3].messageDetail = res.data.fh
					this.messageDate[4].messageDetail = res.data.dg
					console.log(res,'res');
				})
			}
		}
	}
</script>

<style lang="scss">
	page,
		.content {
			padding: 0;
			margin: 0;
			width: 100%;
			height: 100%;
			background: #f3f3f3;
		}
	
		.iconmessage-box {
			width: 750rpx;
			display: flex;
			justify-content: space-between;
			padding: 20rpx 30rpx;
	
			.box-left {
	display: flex;
	
				.img {
					margin: 10rpx 25rpx 10rpx 0;
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					overflow: hidden;
	
					image {
						width: 100%;
						height: 100%;
					}
				}
	
				.box-title {
					display: flex;
					width: 350rpx;
					flex-direction: column;
	
					.title {
						font-size: 34rpx;
						font-weight: 500;
	
					}
	
					.detail {
						font-size: 24rpx;
						color: #909090;
					}
				}
			}
	
			.box-right {
				
				display: flex;
				flex-direction: column;
				// justify-content: flex-end;
				.time {
					margin: 10rpx 0;
					font-size: 24rpx;
				color: #909090;
				}
	
				.tishi {
					margin-left: auto;
					width: 15rpx;
					height: 15rpx;
					border-radius: 50%;
					background-color: red;
					margin-right:  30rpx;
					
					
				
				}
			}
		}
</style>