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;">{{item.createTime}}</text>
		<view class="flex-row mt-08">
			<image :src="item.isRead === '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"
				style="background-color: white;border: 0.6px solid #FFFFFF;box-shadow: 0px 4px 8px 0px rgba(218, 235, 253, 0.21);">
				<text class="font" style="color: #333333;line-height: 60rpx;">{{item.message}}</text>
			</view>
		</view>
	</view>
</template>

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

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

<style>
</style>