crmcard/pages/room/sysnotice.vue

<template>
	<view>
		<uni-menubar title="系统通知" />
		<view class="page-container">
			<block v-for="item in list" :index="item.id">
				<view class="card">
					<tm-avatar custom-class="card-img" :src="item.avatar">
						<template v-slot:dot>
							<tm-badges v-if="item.is_read != 1" label="1" dot></tm-badges>
						</template>
					</tm-avatar>
					<view class="card-main">
						<view class="card-main-top">
							<view class="card-main-title">系统消息</view>
							<view class="card-main-date">{{item.create_time}}</view>
						</view>
						<view class="card-main-message">{{item.content}}</view>
						<view class="card-tags"></view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				param: {
					page: 1,
				}
			};
		},
		onLoad() {
			this.$tm.request.get('user/sysnotice', this.param).then(res => {
				this.list = res.data.list
			})
		},
		onReachBottom() {
			this.param.page++
			this.$tm.request.get('user/sysnotice', this.param).then(res => {
				this.list = this.list.concat(res.data.list)
			})
		}
	}
</script>

<style lang="scss">
	.page-container {
		display: flex;
		flex-direction: column;
		padding: 30rpx 40rpx;
	}

	.card {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		width: 100%;
		margin-bottom: 10px;
	}

	.card-img {
		border-radius: 100%;
		background: #fff;
		margin-right: 40rpx;
	}

	.card-main {
		flex: 1;
		padding: 0 30rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		border-radius: 7px;
		line-height: 28rpx;
		position: relative;
	}

	.card-main-top {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #eee;
		justify-content: space-between;
	}

	.card-main-title {
		font-size: 28rpx;
	}

	.card-main-date {
		font-size: 24rpx;
		color: #585858;
	}

	.card-main-message {
		font-size: 26rpx;
		color: #585858;
		padding: 20rpx 0;
		line-height: 40rpx;
	}

	.card-tags {
		position: absolute;
		border: 5px solid transparent;
		border-right-color: #fff;
		left: -20rpx;
		top: 40rpx;
	}
</style>