xinli/xinlidsj/pages/assessment/detail.vue

<template>
	<view class="page" :class="{ big: isH5 }">
		<view class="panel">
			<view class="title">测评详情</view>
			<view class="subtitle">测评ID：{{ assessmentId || '—' }}</view>
		</view>

		<view v-if="loading" class="placeholder">加载中...</view>
		<view v-else>
			<view v-if="errorMsg" class="panel">
				<view class="error">{{ errorMsg }}</view>
			</view>

			<view v-else class="panel">
				<view class="section-title">基础信息</view>
				<view class="kv">
					<view class="kv-item"><text class="k">量表</text><text class="v">{{ a.scaleName || a.scaleId || '—' }}</text></view>
					<view class="kv-item"><text class="k">状态</text><text class="v">{{ statusText(a.status) }}</text></view>
					<view class="kv-item"><text class="k">用户</text><text class="v">{{ a.userName || a.nickName || a.userId || '—' }}</text></view>
					<view class="kv-item"><text class="k">开始时间</text><text class="v">{{ formatTime(a.startTime) }}</text></view>
					<view class="kv-item"><text class="k">提交时间</text><text class="v">{{ formatTime(a.submitTime) }}</text></view>
					<view class="kv-item"><text class="k">耗时(秒)</text><text class="v">{{ a.completeTime == null ? '—' : a.completeTime }}</text></view>
				</view>

				<view class="section-title">受测人信息</view>
				<view class="kv">
					<view class="kv-item"><text class="k">姓名</text><text class="v">{{ a.assesseeName || '—' }}</text></view>
					<view class="kv-item"><text class="k">性别</text><text class="v">{{ a.assesseeGender || '—' }}</text></view>
					<view class="kv-item"><text class="k">年龄</text><text class="v">{{ a.assesseeAge == null ? '—' : a.assesseeAge }}</text></view>
					<view class="kv-item"><text class="k">电话</text><text class="v">{{ a.assesseePhone || '—' }}</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getAssessment } from '../../api/psychology/assessment'

	export default {
		data() {
			return {
				isH5: false,
				loading: false,
				errorMsg: '',
				assessmentId: '',
				a: {}
			}
		},
		onLoad(options) {
			try {
				const info = uni.getSystemInfoSync()
				const p = info ? (info.uniPlatform || info.platform) : ''
				this.isH5 = p === 'web' || p === 'h5'
			} catch (e) {
				this.isH5 = false
			}
			this.assessmentId = options && options.assessmentId ? options.assessmentId : ''
			if (!this.assessmentId) {
				this.errorMsg = '缺少 assessmentId'
				return
			}
			this.fetchDetail()
		},
		methods: {
			fetchDetail() {
				this.loading = true
				this.errorMsg = ''
				return getAssessment(this.assessmentId)
					.then((res) => {
						this.loading = false
						const data = res && res.data ? res.data : null
						if (!data || data.code !== 200) {
							this.errorMsg = (data && data.msg) ? data.msg : '加载失败'
							return
						}
						this.a = data.data || {}
					})
					.catch((e) => {
						this.loading = false
						this.errorMsg = e && e.message ? e.message : '网络错误'
					})
			},
			statusText(status) {
				const map = { '0': '进行中', '1': '已完成', '2': '已作废', '3': '已暂停' }
				return map[String(status)] || '未知'
			},
			formatTime(val) {
				if (!val) return '—'
				try {
					const d = new Date(val)
					if (isNaN(d.getTime())) return '—'
					const y = d.getFullYear()
					const m = String(d.getMonth() + 1).padStart(2, '0')
					const day = String(d.getDate()).padStart(2, '0')
					const hh = String(d.getHours()).padStart(2, '0')
					const mm = String(d.getMinutes()).padStart(2, '0')
					return `${y}-${m}-${day} ${hh}:${mm}`
				} catch (e) {
					return '—'
				}
			}
		}
	}
</script>

<style>
	.page { min-height: 100vh; padding: 32rpx; box-sizing: border-box; background: #f6f7fb; }
	.page.big {
		padding: 14rpx 14rpx 120rpx;
		background-image:
			radial-gradient(1100rpx 520rpx at 50% 14%, rgba(43, 107, 255, 0.30) 0%, rgba(6, 16, 40, 0.0) 65%),
			linear-gradient(180deg, rgba(5, 11, 24, 0.90) 0%, rgba(8, 20, 45, 0.85) 42%, rgba(6, 16, 40, 0.92) 100%),
			url('/static/bg.png');
		background-size: auto, auto, cover;
		background-position: center, center, center;
		background-repeat: no-repeat, no-repeat, no-repeat;
	}
	.panel { background: #fff; border-radius: 20rpx; padding: 24rpx; border: 1px solid rgba(0,0,0,0.05); margin-bottom: 24rpx; }
	.page.big .panel,
	.page.big .placeholder {
		border: 1px solid rgba(116, 216, 255, 0.22);
		background: linear-gradient(180deg, rgba(10, 18, 38, 0.75) 0%, rgba(5, 10, 22, 0.55) 100%);
		box-shadow: 0 12rpx 24rpx rgba(0, 0, 0, 0.35);
	}
	.title { font-size: 36rpx; font-weight: 700; color: #1f2329; }
	.subtitle { margin-top: 10rpx; font-size: 24rpx; color: #646a73; line-height: 36rpx; }
	.section-title { margin-top: 18rpx; font-size: 28rpx; font-weight: 700; color: #1f2329; }
	.kv-item { display: flex; justify-content: space-between; padding: 12rpx 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
	.kv-item:last-child { border-bottom: 0; }
	.k { color: #8f959e; font-size: 24rpx; }
	.v { color: #1f2329; font-size: 24rpx; font-weight: 700; }
	.placeholder { height: 240rpx; border-radius: 20rpx; background: #fff; border: 1px dashed rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; color: #8f959e; font-size: 24rpx; }
	.error { font-size: 24rpx; color: #ff4d4f; line-height: 36rpx; }
	.page.big .title,
	.page.big .section-title,
	.page.big .v { color: rgba(235, 248, 255, 0.92); }
	.page.big .subtitle,
	.page.big .k,
	.page.big .placeholder { color: rgba(201, 242, 255, 0.65); }
	.page.big .placeholder { border-style: solid; }
	.page.big .kv-item { border-bottom-color: rgba(116, 216, 255, 0.12); }
</style>