MiniPrograms/subpkg/mine/messagelist.vue

<template>
	<view class="page_view">
		<top-return :color="'#FFF'" text="个人通知"></top-return>
		<view class="bg_card"></view>
		<view class="card_view" style="margin-top: 140rpx;">
			<view class="card_item" style="width: 100%;" v-for="(item,index) in userData.msgList" :key="index">
				<view class="card_title" style="margin-right: 10rpx;">
					<view class="t-icon t-icon-tongzhihuotixing"></view>
					<view class="title" style="margin-left: 20rpx;font-weight: 400;">{{item.title}}</view>
					<view class="subtitle" style="margin-left: auto;font-size: 24rpx;">{{item.msgTime}}</view>
				</view>
				<view class="title" style="margin: 0 30rpx;font-size: 28rpx;">{{item.content}}</view>
				<image class="msg_poster" :src="item.image" mode="scaleToFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		computed: {
			...mapState('m_parent', ['userData'])
		},
		data() {
			return {};
		},
		onLoad() {
			// 延时
			// uni.$u.sleep(1500).then(() => {
			// 	this.loading = false
			// })
		},
		methods: {
			...mapMutations('m_parent', ['updateUserData']),
			//删除信息
			deleteMsg(index) {
				let msgList = this.userData.msgList
				let data = msgList.splice(index, 1)
				this.updateUserData(data)
			}
		}
	}
</script>

<style lang="scss">
	.msg_poster{
		margin: 20rpx auto;
		width: 94%;
		height: 300rpx;
		border-radius: 20rpx;
	}
	.t-icon{
		width: 40rpx;
		height: 40rpx;
	}
</style>