youngee_b_api/pages/mycenter/message.vue

<template>
	<view style="position: relative;">
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view style="margin-top: 160rpx;"></view>
		<view v-for="item in messageList">
			<view class="message-list-cell">
				<view class="message-list-cell-left">
					<image :src="item.icon_url" style="height: 70rpx;width: 70rpx"></image>
					<view class="message-list-cell-left-txt">
						<p style="font-weight: 600;margin-bottom: 10rpx;">{{item.project_name}}</p>
						<p>{{item.message_content}}</p>
					</view>
				</view>
				<view class="message-list-cell-right">
					<image src="../../static/img/delete.png" style="height: 50rpx;width: 50rpx"
						@click="delMessage(item)"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	export default {
		components: {
			mvBar,
		},
		data() {
			return {
				messageTextList: [],
				messageIconList: [
					"https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-success.png",
					"https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-notice.png",
					"https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-error.png",
					"https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/icon-warning.png"
				],
				messageList: [],
				mysNavConfig: {
					/* 开启单页显示首页图标 */
					isHome: true,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "通知",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "normal", // 100 - 700
					},
					btnType: "type2",
					onLeftClick: "/pages/mycenter/mycenter",
					/* type2 按钮 */
					type2Config: {
						// 左图标
						leftPath: "/static/img/png2.png",
						// 右图标
						rightPath: "/static/img/png4.png",
						// 圆角
						radius: "40rpx",
					},
				},
			}
		},
		async onShow() {
			// 显示加载中
			uni.showLoading({
				title: '加载中'
			});
			await this.getInfoList();
			await this.getMessage();
			uni.hideLoading();
			this.setRead();
		},

		onLoad() {},
		methods: {
			getInfoList() {
				return this.$http.get('/youngee/c/g/get-info-tables')
					.then(res => {
						this.messageTextList = res.data.data.MessageInfo
					})
			},
			getMessage() {
				return this.$https.get('/youngee/c/t/g/get-message')
					.then(res => {
						this.messageList = res.data.data
						if (this.messageList !== null) {
							for (let i = 0; i < this.messageList.length; ++i) {
								let messageId = this.messageList[i].message_id
								let messageType = this.messageList[i].message_type
								this.messageList[i].message_content = this.messageTextList[messageId - 1].text
								this.messageList[i].icon_url = this.messageIconList[messageType - 1]
							}
						}
					})
			},
			setRead() {
				return this.$https.post('/youngee/c/t/p/set-message-read')
					.then(res => {})
			},
			async delMessage(item) {
				// 在前端消息列表中删除该消息
				var i = this.messageList.indexOf(item)
				this.messageList.splice(i, 1)

				// 调用后端接口将该消息设为已读
				return this.$https.post('/youngee/c/t/p/delete-message', {
					message_id: item.id
				}).then(res => {})

			}
		}
	}
</script>

<style lang="scss" scoped>
	p {
		font-size: 32rpx;
	}

	.message-list-cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 5rpx;
		padding: 30rpx;
		box-shadow: 0 0 5px rgba(0, 0, 0, .1);
	}

	.message-list-cell-left {
		display: flex;
		align-items: center;
	}

	.message-list-cell-left-txt {
		margin-left: 20rpx;
	}
</style>