xinelu-applet-ui/pages/message/message.vue

<template>
	<view class="app">
		<view class="item" @tap="gonotice(listone,'通知公告')">
			<image src="../../static/pages/tongzhi.png" mode=""></image>
			<view class="title">
				通知公告
			</view>
			<view class="" v-if='listone'>
				<view class="time">
					{{listone.sendTime}}
				</view>
				<view class="text">
					{{listone.content}}
				</view>
				<view class="nostatus" v-if="listone.unreadCount>0">
				</view>
			</view>
		</view>
		<view class="item" @tap="gonotice(listtwo,'健康推送')">
			<image src="../../static/pages/jiankang.png" mode=""></image>
			<view class="title">
				健康推送
			</view>
			<view class="" v-if='listtwo'>
				<view class="time">
					{{listtwo.sendTime}}
				</view>
				<view class="text">
					{{listtwo.content}}
				</view>
				<view class="nostatus" v-if="listtwo.unreadCount>0">
				</view>
			</view>
		</view>
		<view class="item" @tap="gonotice(listfour,'服务推送')">
			<image src="../../static/pages/fuwu.png" mode=""></image>
			<view class="title">
				服务推送
			</view>
			<view class="" v-if='listfour'>
				<view class="time">
					{{listfour.sendTime}}
				</view>
				<view class="text">
					{{listfour.content}}
				</view>
			</view>
			<view class="nostatus" v-if="listfour.unreadCount>0">
			</view>
		</view>
		<view class="item" v-for="item in listthree" v-if="listthree.length>0" @tap='goseekadvicefrom(item)'>
			<image src="../../static/docHead.png" mode=""></image>
			<view class="title">
				{{item.senderName}}
			</view>
			<view class="time">
				{{item.sendTime}}
			</view>
			<view class="text">
				{{item.content}}
			</view>
			<view class="nostatus" v-if="item.unreadCount>0">
			</view>
		</view>
	</view>
</template>
<script>
	import {
		detail,
	} from '@/api/pages/homepage/homepage.js'
	import {
		getMegVoList
	} from '@/api/pages/message/index.js'
	export default {
		data() {
			return {
				listone: null,
				listtwo: null,
				listthree: [],
				listfour: null,
			};
		},
		onShow() {
			this.info();
		},
		methods: {
			//gonotice
			gonotice(item, title) {
				uni.navigateTo({
					url: `/pagesC/notice/notice?item=${JSON.stringify(item)}&title=${title}`
				})
			},
			//前往聊天
			goseekadvicefrom(item) {
				const list = {
					id: item.consultationId,
					patientId: item.recipientId,
					patientName: item.recipientName,
					doctorId: item.senderId,
					doctorName: item.senderName,
				}
				uni.navigateTo({
					url: `/pagesC/seekadvicefrom/seekadvicefrom?item=${JSON.stringify(list)}`
				})
			},
			info() {
				detail(uni.getStorageSync('userinfo').cardNo).then(res => {
					if (res.code == 200 && res.data && res.data.crowdsNo) {
						var obj = {
							crowdNoList: res.data.crowdsNo.split(','),
							userType: 0,
							recipientId: uni.getStorageSync('patientId'),
							senderId: uni.getStorageSync('patientId'),
						}
						getMegVoList(obj).then(res => {
							this.listthree = []
							this.listone = null
							this.listtwo = null
							this.listfour = null
							res.data.forEach(e => {
								e.readStatus = Number(e.readStatus)
								e.messageType = Number(e.messageType)
								if (Number(e.messageCategory) == 1) {
									this.listone = e
								}
								if (Number(e.messageCategory) == 2) {
									this.listtwo = e
								}
								if (Number(e.messageCategory) == 3) {
									this.listthree.push(e)
								}
								if (Number(e.messageCategory) == 4) {
									this.listfour = e
								}
							})
						})
					}
				})
			},
		},
		onReachBottom() { //上滑加载
		},
		onPullDownRefresh() { //下拉刷新
			this.info();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);

		},
	}
</script>

<style lang="scss">
	.app {
		background-color: #fff;
		width: 96%;
		margin: 20rpx auto;

		.item {
			height: 150rpx;
			position: relative;
			border-bottom: 2rpx solid #E6E6E6;

			.nostatus {
				width: 15rpx;
				height: 15rpx;
				background: #F10100;
				border-radius: 50%;
				position: absolute;
				right: 20rpx;
				bottom: 25%;
			}

			.time {
				position: absolute;
				right: 20rpx;
				top: 20%;
				font-size: 20rpx;
				color: #999999;
			}

			.text {
				width: calc(100% - 200rpx);
				position: absolute;
				left: 150rpx;
				bottom: 20%;
				font-size: 24rpx;
				color: #999999;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			image {
				width: 90rpx;
				height: 90rpx;
				position: absolute;
				top: 50%;
				left: 30rpx;
				transform: translateY(-50%);
			}

			.title {
				position: absolute;
				top: 20%;
				left: 150rpx;
				font-size: 32rpx;
			}
		}
	}
</style>