cytx_mp/pages/message/detail.vue

<template>
	<view class="page">
		<view v-if="msg" class="card">
			<!-- 顶部：图标 + 标题 + 标签 -->
			<view class="header-row">
				<text class="header-icon">📢</text>
				<text class="header-title">{{ headerTitle }}</text>
				<view class="tag" :class="tagClass">
					{{ tagText }}
				</view>
			</view>

			<!-- 大标题 -->
			<view class="main-title">{{ mainTitle }}</view>
			<view class="time">{{ msg.create_time }}</view>

			<!-- 正文 -->
			<view class="body">
				<text class="greeting">尊敬的{{ msg.patient_name || '' }}：</text>
				<text class="body-text" v-if="msg.type === 1">{{ auditApprovedText }}</text>
				<text class="body-text" v-else-if="msg.type === 2">您于 {{ formatDate(msg.create_time) }} 提交的个人资料经审核未通过。</text>
				<text class="body-text" v-else-if="msg.type === 3">您的样品已经寄回，请注意查收。</text>
				<text class="body-text" v-else-if="msg.type === 4 && !msg.reason">您的送检信息修改申请已审核通过，请前往送检信息页面重新提交。</text>
				<text class="body-text" v-else-if="msg.type === 4">您的送检信息修改申请未通过。</text>
				<text class="body-text" v-if="msg.type === 2">请根据以下原因修改后重新提交。</text>
			</view>

			<view v-if="msg.type === 1" class="receiver-box">
				<view class="receiver-title">送检信息</view>
				<view class="receiver-tip">{{ sampleSendTip }}</view>
				<view class="receiver-row">
					<text class="receiver-label">收件地址</text>
					<text class="receiver-value">{{ sampleReceiverInfo.address || '—' }}</text>
				</view>
				<view class="receiver-row">
					<text class="receiver-label">收件人</text>
					<text class="receiver-value">{{ sampleReceiverInfo.receiver || '—' }}</text>
				</view>
				<view class="receiver-row">
					<text class="receiver-label">电话</text>
					<text class="receiver-value">{{ sampleReceiverInfo.phone || '—' }}</text>
				</view>
			</view>

			<!-- 驳回原因 -->
			<view v-if="(msg.type === 2 || msg.type === 4) && msg.reason" class="reason-box">
				<text class="reason-label">{{ msg.type === 4 ? '审核原因：' : '驳回原因：' }}</text>
				<text class="reason-text">{{ msg.reason }}</text>
			</view>

			<view v-if="msg.type === 3" class="return-box">
				<text class="return-label">回寄物流单号</text>
				<text class="return-no">{{ returnTrackingNo || '—' }}</text>
			</view>

			<!-- 操作按钮 -->
			<view v-if="msg.type === 1" class="btn-area">
				<u-button text="复制送检信息" @click="copySampleReceiverInfo" color="#0E63E3" size="large" />
			</view>
			<view v-if="msg.type === 2" class="btn-area">
				<u-button text="重新提交资料" @click="goMyInfo" color="#0E63E3" size="large" />
			</view>
			<view v-if="msg.type === 3" class="btn-area">
				<u-button text="复制单号" @click="copyReturnTrackingNo" color="#0E63E3" size="large" />
			</view>
			<view v-if="msg.type === 4" class="btn-area">
				<u-button text="查看送检信息" @click="goSampleInfo" color="#0E63E3" size="large" />
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { get } from '@/utils/request.js'

const msg = ref(null)
const auditApprovedText = '您提交的肠愈同行患者关爱项目资料已审核通过，请于7天内在小程序-个人中心-送检信息中提交相关信息。'
const sampleSendTip = '样本请发顺丰到付，血液样本需要联系顺丰快递员加冰袋。'
const sampleReceiverInfo = computed(() => (msg.value && msg.value.sample_receiver_info) || {})
const returnTrackingNo = computed(() => (msg.value && msg.value.reason) || '')
const tagText = computed(() => {
	if (!msg.value) return ''
	if (msg.value.type === 1) return '已通过'
	if (msg.value.type === 3) return '已寄回'
	if (msg.value.type === 4) return msg.value.reason ? '未通过' : '已通过'
	return '已驳回'
})
const headerTitle = computed(() => {
	if (!msg.value) return ''
	if (msg.value.type === 3) return '回寄信息'
	if (msg.value.type === 4) return '送检信息通知'
	return '审核通知'
})
const tagClass = computed(() => {
	if (!msg.value) return ''
	if (msg.value.type === 1) return 'tag-success'
	if (msg.value.type === 3) return 'tag-return'
	if (msg.value.type === 4) return msg.value.reason ? 'tag-fail' : 'tag-success'
	return 'tag-fail'
})
const mainTitle = computed(() => {
	if (!msg.value) return ''
	if (msg.value.type === 1) return '资料已审核通过'
	if (msg.value.type === 3) return '样品已经寄回'
	if (msg.value.type === 4) return msg.value.reason ? '送检修改申请未通过' : '送检修改申请已通过'
	return '您提交的资料未通过审核'
})

onLoad(async (options) => {
	if (!options.id) return
	try {
		const res = await get('/api/mp/messageDetail', { id: options.id })
		msg.value = res.data
	} catch (e) {
		if (e && e.msg) uni.showToast({ title: e.msg, icon: 'none' })
	}
})

const formatDate = (dateStr) => {
	if (!dateStr) return ''
	const d = new Date(dateStr)
	return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`
}

const goMyInfo = () => {
	uni.navigateTo({ url: '/pages/myinfo/myinfo' })
}

const goSampleInfo = () => {
	uni.navigateTo({ url: '/pages/sample-info/sample-info' })
}

const copySampleReceiverInfo = () => {
	const info = sampleReceiverInfo.value
	const text = [
		`收件地址：${info.address || ''}`,
		`收件人：${info.receiver || ''}`,
		`电话：${info.phone || ''}`
	].join('\n')
	uni.setClipboardData({
		data: text,
		success: () => uni.showToast({ title: '已复制', icon: 'success' })
	})
}

const copyReturnTrackingNo = () => {
	if (!returnTrackingNo.value) return uni.showToast({ title: '暂无单号', icon: 'none' })
	uni.setClipboardData({
		data: returnTrackingNo.value,
		success: () => uni.showToast({ title: '单号已复制', icon: 'success' })
	})
}
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background: #f4f4f5;
	padding: 24rpx;
}

.card {
	background: #fff;
	border-radius: 10rpx;
	padding: 36rpx 32rpx;
	border: 1rpx solid #ebeef5;
}

.header-row {
	display: flex;
	align-items: center;
	gap: 12rpx;
	margin-bottom: 28rpx;
}

.header-icon {
	font-size: 32rpx;
}

.header-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
}

.tag {
	font-size: 22rpx;
	padding: 4rpx 16rpx;
	border-radius: 6rpx;

	&.tag-success {
		background: #f6ffed;
		color: #52c41a;
		border: 1rpx solid #b7eb8f;
	}

	&.tag-fail {
		background: #fff2f0;
		color: #f5222d;
		border: 1rpx solid #ffa39e;
	}

	&.tag-return {
		background: #f0f5ff;
		color: #0e63e3;
		border: 1rpx solid #adc6ff;
	}
}

.main-title {
	font-size: 36rpx;
	font-weight: 700;
	color: #222;
	line-height: 1.4;
}

.time {
	font-size: 26rpx;
	color: #999;
	margin-top: 12rpx;
	margin-bottom: 36rpx;
}

.body {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.greeting {
	font-size: 30rpx;
	color: #333;
}

.body-text {
	font-size: 30rpx;
	color: #333;
	line-height: 1.7;
}

.reason-box {
	margin-top: 36rpx;
	background: #f0f5ff;
	border-left: 6rpx solid #0e63e3;
	border-radius: 8rpx;
	padding: 28rpx 24rpx;
}

.reason-label {
	font-size: 28rpx;
	font-weight: 600;
	color: #f5222d;
	display: block;
	margin-bottom: 12rpx;
}

.reason-text {
	font-size: 28rpx;
	color: #555;
	line-height: 1.7;
}

.return-box {
	margin-top: 36rpx;
	background: #f0f5ff;
	border-left: 6rpx solid #0e63e3;
	border-radius: 8rpx;
	padding: 28rpx 24rpx;
}

.return-label {
	font-size: 28rpx;
	font-weight: 600;
	color: #303133;
	display: block;
	margin-bottom: 12rpx;
}

.return-no {
	font-size: 34rpx;
	font-weight: 600;
	color: #0e63e3;
	line-height: 1.5;
}

.receiver-box {
	margin-top: 36rpx;
	background: #fafafa;
	border: 1rpx solid #ebeef5;
	border-radius: 8rpx;
	padding: 28rpx 24rpx;
}

.receiver-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 20rpx;
}

.receiver-tip {
	font-size: 26rpx;
	color: #fa541c;
	line-height: 1.6;
	background: #fff7e6;
	border: 1rpx solid #ffd591;
	border-radius: 8rpx;
	padding: 16rpx 20rpx;
	margin-bottom: 20rpx;
}

.receiver-row {
	display: flex;
	gap: 20rpx;
	margin-bottom: 14rpx;

	&:last-child {
		margin-bottom: 0;
	}
}

.receiver-label {
	width: 120rpx;
	flex-shrink: 0;
	font-size: 26rpx;
	color: #909399;
}

.receiver-value {
	flex: 1;
	font-size: 26rpx;
	color: #303133;
	line-height: 1.6;
}

.btn-area {
	margin-top: 48rpx;
}
</style>