special/components/ItemMessage.vue

<template>
	<view class="px-32 mt-24 flex-column" @click="changeReadStatus">
		<text class="w-100p text-center font" style="line-height: 60rpx;color: #9EA5B7;">{{computeTime}}</text>
		<view class="flex-row mt-08">
			<image :src="item.readStatus === '0'?'/static/images/message-un-read.png':'/static/images/message-read.png'"
				style="width: 64rpx;height: 64rpx;" mode="aspectFill"></image>
			<view class="flex-1 ml-24 rounded-8 px-32 py-16 flex-column"
				style="background-color: white;border: 0.6px solid #FFFFFF;box-shadow: 0px 4px 8px 0px rgba(218, 235, 253, 0.21);">
				<text class="font font-weight-bolder"
					style="color: #333333;line-height: 60rpx;">{{item.notice_title}}</text>
				<text class="font" style="color: #333333;line-height: 60rpx;">{{item.notice_content}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import dayjs from 'dayjs'
	import {
		computed
	} from 'vue'

	const emit = defineEmits(['modify'])
	const props = defineProps({
		item: {
			type: Object,
			default () {
				return {}
			}
		},
		index: {
			type: Number,
			default: 0
		}
	})

	const computeTime = computed(() => {
		return dayjs(props.item.create_time).format('YYYY-MM-DD HH:mm:ss')
	})

	const changeReadStatus = () => {
		if (props.item.readStatus === '0') {
			emit('modify', props.item.notice_user_id)
		}
	}
</script>

<style>
</style>