master/pages/my/messageList/messageList.vue

<template>
	<view class="page">
		<view class="list-box">
			<view class="notHave" v-if="isShow" style="transform: translateX(-50%);
			left: 50%;
			position: fixed;
			top: 350px;">
					暂时还未有信息
				</view>
			<view v-else class="item" v-for="(it,index) in messageList" :key="index"
				@click="toDetail(it.MessageContent,it.MessageInfo.MessageId)">
				<view class="info">
					<view class="title">
						{{it.MessageContent.Title}}
					</view>
					<view class="desc">
						{{it.MessageContent.BodyText}}
					</view>
				</view>
				<view class="isRead" style="background: red;" v-if="it.MessageInfo.IsRead === 0">
					未读
				</view>
				<view class="isRead" style="background: #009e00;" v-else>
					已读
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import request from '@/utils/request.js'
	export default {
		data() {
			return {
				messageList: [],
				isAdmin: false,
				baseUrl: 'https://www.dygxq-es.cn',
				isShow:false
			}
		},
		onShow() {
			this.getUser()
			this.getNoticeTell()
		},
		methods: {
			// 获取用户信息
			getUser() {
				if (uni.getStorageSync('user')) {
					let userCode = uni.getStorageSync("user")
					console.log(userCode)
					if (userCode.userInfo.userId === 'admin') {
						this.isAdmin = true
					}
					console.log('用户已登录！')
				} else {
					uni.showToast({
						title: '请登录',
						icon: 'none',
						duration: 1500
					})
					// setTimeout(() => {
					// 	uni.reLaunch({
					// 		url: '/pages/login/index'
					// 	})
					// })
				}
			},
			// 获取消息通知
			getNoticeTell() {
				request({
					url: '/api/extend/demo/GetMyMessage',
					method: 'get',
					data: {}
				}).then(res => {
					console.log('通知列表', res)
					if (res.code == 200) {
						this.messageList = res.data
						if(this.messageList.length == 0){
							this.isShow = true
						}else{
							this.isShow = false
						}
					}
				})
			},
			// 获取消息通知
			getAdminNoticeTell() {
				request({
					url: '/api/extend/demo/GetMessageList',
					method: 'get',
					data: {}
				}).then(res => {
					console.log('通知列表', res)
					if (res.code == 200) {
						this.messageList = res.data
						if(this.messageList.length == 0){
							this.isShow = true
						}else{
							this.isShow = false
						}
					}
				})
			},
			// 跳转到消息详情
			toDetail(it, id) {
				let link = JSON.parse(it.bodyJson)
				// let id = it.Id
				console.log('link', link.link)
				// uni.navigateTo({
				// 	url:link.link + `?data=${JSON.stringify(link.reid)}`
				// })
				// this.API.updateInfo({MessageId:id}).then(res=>{
				// 	console.log("修改已读",res)
				// 	if(res.code == 200){
				// 		console.log('成功修改')
				// 		uni.navigateTo({
				// 			url:link.link + `?data=${JSON.stringify(link.reid)}`
				// 		})
				// 	}
				// })
				request({
					url: `/api/extend/demo/UpdateIsReadEnd?MessageId=${id}`,
					method: 'put',
					data: {}
				}).then(res => {
					console.log("修改已读", res)
					if (res.code == 200) {
						console.log('成功修改')
						if (link.type === '公文办理通知') {
							this.download(link.link)
						} else {
							uni.navigateTo({
								url: link.link + `?data=${JSON.stringify(link.reid)}`
							})
						}
						if (link.type === '公文办理通知') {
							this.download(link.link)
						} else if (link.type === '表单填报通知') {
							uni.navigateTo({
								url: link.link + `?id=${link.reid}`
							})
						} else {
							uni.navigateTo({
								url: link.link + `?data=${JSON.stringify(link.reid)}`
							})
						}
					}
				})
			},
			download(it) {
				uni.downloadFile({
					url: this.baseUrl + it, //下载地址接口返回
					success: (data) => {
						if (data.statusCode === 200) {
							//文件保存到本地
							uni.saveFile({
								tempFilePath: data.tempFilePath, //临时路径
								success: function(res) {
									uni.showToast({
										icon: 'none',
										mask: true,
										title: '文件已保存：' + res.savedFilePath, //保存路径
										duration: 3000,
									});
									setTimeout(() => {
										//打开文档查看
										uni.openDocument({
											filePath: res.savedFilePath,
											success: function(res) {
												// console.log('打开文档成功');
											}
										});
									}, 3000)
								}
							});
						}
					},
					fail: (err) => {
						that.loadelshow = false
						console.log(err);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '失败请重新下载',
						});
					},
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100vh;
		background-color: #f3f3f3;
	}
	.list-box {
		width: 96%;
		margin: 0 auto;
		overflow-y: scroll;
	}
	.item {
		width: 100%;
		background-color: white;
		border-radius: 30rpx;
		padding: 30rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.info {
			display: flex;
			flex-direction: column;
			// align-items: center;
			.title {
				font-size: 36rpx;
				font-weight: bold;
			}
			.desc {
				// width: 400rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-left: 20rpx;
			}
		}
		.isRead {
			color: red;
			margin-right: 10rpx;
			padding: 6rpx 18rpx;
			border-radius: 5px;
			color: #f3f3f3;
		}
	}
</style>