PDA/pages/messgecont/index.vue

<template>
	<view class="message-wrap">
		<view class="empty-mess" v-if="messData.length==0">
			暂无消息
		</view>
		<view class="message-item" v-for="(item,index) in messData" :key="index">
			<view class="item-title">
				<view class="infoTitle">
					<view class="inback"></view>
				</view>
				<p>
					{{item.msgTitle}}
				</p>
			</view>
			<view class="item-mesage" v-html="messItem(item)">
			</view>
			<view class="fot-btn" @click="jumpDetails(item)">
				查看详情
			</view>
		</view>
	</view>
</template>


<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState(['messData'])
		},
		data() {
			return {
				messview: "",
				listData: [{
						title: "拣货提醒",
						message: "您有新的拣货单【出库单号】待处理，请注意及时处理。"
					},
					{
						title: "拣货提醒",
						message: "您有新的拣货单【出库单号】待处理，请注意及时处理。"
					},
					{
						title: "拣货提醒",
						message: "您有新的拣货单【出库单号】待处理，请注意及时处理。"
					},
					{
						title: "拣货提醒",
						message: "您有新的拣货单【出库单号】待处理，请注意及时处理。"
					},
				],
			}
		},
		mounted() {
			this.getMessData({
				spdId: "SPDID",
				msgStas: 0
			});
		},
		methods: {
			...mapActions(['getMessData']),
			messItem(itm) {
				let newMessage = itm.msgText;
				itm.msgColumnList.forEach((item) => {
					newMessage = newMessage.replace(
						item.msgColumnNo,
						`<span style='color:${
				      item.msgColumnColor
				    }'>【${item.msgColumn}】</span>`
					);
				});
				return newMessage;

			},
			jumpDetails(item) {
				this.$http('home.readData', [{
					id: item.id,
					msgStas: "1"
				}], '加载中', true).then((res) => {

				});
				this.$http(item.msgColumnList[0].url, {
					[item.msgColumnList[0].msgKey]: item.msgColumnList[0].msgColumn
				}, '加载中', true).then((res) => {
					if (res.success == true) {
						uni.setStorage({
							key: item.msgColumnList[0].msgRoutePath,
							data: res.data.records[0] || {}
						});
						uni.navigateTo({
							url: `/pages/${item.msgColumnList[0].msgRoutePath}/index`,
							success: function(res) {
								console.log(res, "res")
							}
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body {
		width: 100%;
		height: 100%;
	}

	.message-wrap {
		width: 100%;
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #F1F1F1;

		.empty-mess {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.message-item {
			width: 100%;
			border: 1px solid #ccc;
			border-radius: 10rpx;
			margin-top: 20rpx;
			padding: 10rpx;
			box-sizing: border-box;
			background-color: #fff;
			position: relative;
			padding-bottom: 100rpx;

			.item-title {
				width: 100%;
				height: 100rpx;
				text-align: left;
				color: rgba(16, 16, 16, 1);
				font-size: 32rpx;
				text-align: left;
				font-family: PingFangSC-bold;
				padding-left: 10rpx;
				display: flex;
				align-items: center;

				.infoTitle {
					width: 62rpx;
					height: 62rpx;
					border-radius: 31rpx;
					background-color: rgba(1, 169, 146, 1);
					margin-right: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.inback {
						width: 34.1rpx;
						height: 34.1rpx;
						background: url('../../static/mdtext.svg');
						background-size: 100% 100%;
					}
				}
			}

			.item-mesage {
				width: 100%;
				box-sizing: border-box;
				color: rgba(16, 16, 16, 0.7);
				font-size: 32rpx;
				text-align: left;
				font-family: PingFangSC-regular;
			}

			.fot-btn {
				width: 100%;
				height: 80rpx;
				border-top: 1px solid #ccc;
				position: absolute;
				left: 0;
				bottom: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>