subject_gxj/xj_project_app/pages/message/detail/index.vue

<script setup>
	import {
		ref
	} from "vue";

	import {
		onLoad,
	} from "@dcloudio/uni-app";

	import {
		readMessage
	} from "@/api/work/message.js";

	let userName = ref(null);
	let content = ref(null);

	function sendRead(id) {
		readMessage({
			id
		})
	};

	onLoad(options => {
		if (options.type === "unread") {
			sendRead(options.id)
		}
		userName = options.userName;
		content = options.content;
	})
</script>

<template>
	<view class="container">
		<page-title>消息详情</page-title>

		<view class="content">
			<view class="card only-card">
				<view class="card-name">
					<view class="card-name-title">
						<text class="card-name-description">接收人</text>
					</view>

					<view class="select-item">
						<view>{{userName}}</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">内容</view>

					<view class="item-textarea">
						<u--textarea v-model="content" maxlength="-1" height='294rpx' disabled></u--textarea>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.clear {
		position: absolute;
		top: 8%;
		right: 4%;
		display: flex;
		font-size: 40rpx;
		font-weight: 500;
		color: #FFF;
	}

	.content {
		position: absolute;
		top: 5%;
		left: 0;
		width: 100%;
		height: 95%;
		padding: 100rpx 4% 0;
		box-sizing: border-box;
		// border-radius: 40rpx 40rpx 0 0;
		background-color: #fff;
	}

	.select-item {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		color: #343437;
	}

	.item-textarea {
		width: 100%;
		min-height: 294rpx;
		padding: 20rpx;
		border: 2rpx solid #D0D9E7;
		border-radius: 20rpx;
	}

	.user-choose {
		width: 666rpx;
		min-height: 688rpx;
		padding: 30rpx 28rpx;

		.user-choose-title {
			display: flex;
			justify-content: space-between;
			width: 100%;
			margin-bottom: 54rpx;
			font-weight: 500;
			color: #3D3D3D;
			font-size: 32rpx;

			.uesr-choose-icon {
				width: 44rpx;
				height: 44rpx;
				background: url("@/static/message-close.svg");
				background-size: 100% 100%;
			}

			.hide {
				background: none;
			}
		}

		.search-item {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			width: 606rpx;
			min-height: 88rpx;
			padding: 26rpx 30rpx;
			margin-bottom: 32rpx;
			font-size: 28rpx;
			border-radius: 20rpx;
			border: 2rpx solid #D0D9E7;

			.search-item-name {
				min-width: 30rpx;
				color: #939AA5;
			}

			.search-item-content {
				color: #3D3D3D;
				text-align: right;
			}

			.swiper-item-content {
				height: 286rpx;
			}
		}

		.search-btn {
			width: 606rpx;
			height: 64rpx;
			margin-top: 50rpx;
			line-height: 64rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 28rpx;
			background: #1869F6;
			border-radius: 16rpx;
		}
	}

	::v-deep .u-popup__content {
		border-radius: 28rpx !important;
	}
</style>