H5_QiCaiYao/pages_tool/news/message.vue

<template>
	<div class="view">

		<div v-if="id==1">
			<div class="item" v-for="(item,index) in list" @click="toSystemMsg(item.id)">
				<div class="time">{{item.create_time }}</div>
				<div class="card">
					<div class="title" :style="{'--textColor':item.color}">{{item.title}}</div>
					<div class="sub_title">{{item.sub_title}}</div>
					<u-line style="margin: 20rpx 0; "></u-line>
					<div class="bottom">
						<div class="left">详情</div>
						<div class="right"><u-icon name="arrow-right" color="#999999" size="14"></u-icon></div>
					</div>
				</div>
			</div>
		</div>
		<div v-if="id==2">
			<div class="item" v-for="(item,index) in list" @click="toSystemMsg(item.id)">
				<div class="time">{{item.create_time }}</div>
				<div class="card">
					<div class="title" :style="{'--textColor':item.color}">{{item.title}}</div>
					<div class="sub_title">{{item.title}}</div>
					<u-line style="margin: 20rpx 0; "></u-line>
					<div class="bottom">
						<div class="left">详情</div>
						<div class="right"><u-icon name="arrow-right" color="#999999" size="14"></u-icon></div>
					</div>
				</div>
			</div>
		</div>
		<div v-if="id=='news'">
			<view style="display: flex;justify-content: space-between;">
				<view class="">

				</view>
				<view class="allBtn" @click="doMessageStatus('all')">
					全部已读
				</view>
			</view>
			<mescroll-uni ref="mescroll" @getData="getmessageList" top="100rpx">
				<div class="item" v-for="(item,index) in list" slot="list">

					<div class="time">{{item.create_time }}</div>
					<div class="card" @click="doMessageStatus(item.id)">
						<u-badge type="error" :isDot="!item.status" :absolute="true" :offset="['40rpx','20rpx']">
						</u-badge>
						<div class="title">{{item.title}}</div>
						<u-line style="margin: 20rpx 0; "></u-line>
						<div class="sub_title">{{item.content}}</div>
					</div>
				</div>
			</mescroll-uni>
		</div>

	</div>
</template>

<script>
	const timesfm = require('../../common/js/map/message.js')
	console.log(timesfm(1679110264 * 1000), 'timesfm');
	export default {
		data() {
			return {
				list: [],
				id: '',
				data: []
			}
		},
		onLoad(e) {
			this.id = e.id
		},
		onShow() {


			this.$api.sendRequest({
				url: '/api/notice/page',
				data: {
					type_id: this.id
				},
				success: res => {
					console.log(res, 'res');
					this.list = res.data.list
				}
			});

		},
		methods: {
			toSystemMsg(id) {
				uni.navigateTo({
					url: `/pages_tool/news/system_msg?id=${id}`
				})
			},
			getmessageList(mescroll) {
				this.$api.sendRequest({
					url: '/api/notice/messageList',
					data: {

						page: mescroll.num,
						page_size: mescroll.size,
					},
					success: res => {

						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
						} else {
							this.$util.showToast({
								title: msg
							});
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) {
							this.list = []; //如果是第一页需手动制空列表
							this.related_id = 0;
						}
						this.list = this.list.concat(newArr); //追加新数据
					}
				});

			},
			doMessageStatus(id) {

				this.$api.sendRequest({
					url: '/api/notice/doMessageStatus',
					data: {
						id
					},
					success: res => {
						this.$refs.mescroll.refresh();
					}
				});

			}
		},

		filters: {
			time(num) {
				return timesfm(num * 1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.view {
		padding: 0 32rpx 98rpx;

		.item {
			.time {
				padding: 32rpx 0 24rpx 0;
				text-align: center;

				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				color: #999999;
			}

			.card {
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 24rpx 32rpx;
				position: relative;

				.title {
					font-size: 32rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: var(--textColor);
				}

				.sub_title {
					padding-top: 16rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.bottom {
					display: flex;

					.left {
						flex-grow: 1;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #585858;
					}

					.right {}
				}
			}
		}

		.allBtn {
			width: 192rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: linear-gradient(134deg, #80ddff 0%, #35c9ff 100%);
			box-shadow: 0px 4px 12px 0px #cdf3ff;
			border-radius: 23px;
			color: #FFFFFF;
			border: 2rpx solid #FFFFFF;
			border-radius: 50rpx;
			text-align: center;
			margin: 20rpx;

		}
	}
</style>