giftlaw/pages/record-detail/record-detail.vue

<template>
	<view class="content">
		<image src="https://aliyunoss.hn12301.net/learnlaw/gift_zt_bj.jpg" mode="widthFix" style="width:750rpx;position:absolute;top:0;left:0;z-index:-1;"></image>
		<view class="page-body">
			<view class="loading-box" v-if="detailList.length === 0 && !loadError">
				<u-loading mode="circle" size="40"></u-loading>
				<text class="loading-text">加载中...</text>
			</view>
			<view class="loading-box" v-if="loadError">
				<text class="error-text">{{ loadError }}</text>
				<button class="retry-btn" @tap="fetchDetail">重新加载</button>
			</view>
			<template v-if="detailList.length > 0">
				<view class="detail-item" v-for="(item, i) in detailList" :key="item.id">
					<view class="detail-index" :class="item.is_correct ? 'correct' : 'wrong'">
						<text class="detail-index-text">{{ i + 1 }}</text>
					</view>
					<view class="detail-body">
						<text class="detail-q">{{ item.tiku_question_content }}</text>
						<view class="detail-answer-row">
							<text class="detail-label">你的答案：</text>
							<text class="detail-value" :class="item.is_correct ? 'text-correct' : 'text-wrong'">{{ item.user_answer }}</text>
						</view>
						<view class="detail-answer-row" v-if="!item.is_correct">
							<text class="detail-label">正确答案：</text>
							<text class="detail-value text-correct-answer">{{ item.tiku_correct_answer }}</text>
						</view>
						<view class="tips" v-if="item.tips">
							<text class="tips-label">解析</text>
							<text class="tips-text">{{ item.tips }}</text>
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				resultId: 0,
				detailList: [],
				loadError: ''
			}
		},
		onLoad(options) {
			this.resultId = options.resultId
			this.fetchDetail()
		},
		methods: {
			fetchDetail() {
				if (!this.resultId) {
					this.loadError = '缺少记录ID'
					return
				}
				this.loadError = ''
				this.$u.api.getUserHistResultDetail({
					resultId: this.resultId,
					userId: uni.getStorageSync('userIdGift'),
					wenjuanId: 1003
				}).then(res => {
					if (res.code === 0 && Array.isArray(res.Data) && res.Data.length) {
						this.detailList = res.Data
					} else {
						this.loadError = res.msg || '数据异常'
					}
				}).catch(err => {
					console.error('获取答题详情失败', err)
					this.loadError = '网络请求失败'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #7CC6EB;
	}

	.content {
		position: relative;
		min-height: 100vh;
		min-height: 100dvh;
	}

	.page-body {
		position: relative;
		z-index: 1;
		min-height: 100vh;
		min-height: 100dvh;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.detail-item {
		background: rgba(255,255,255,0.95);
		border-radius: 20rpx;
		padding: 28rpx;
		margin-bottom: 20rpx;
		display: flex;
		box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
	}

	.detail-index {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		margin-right: 16rpx;
		margin-top: 2rpx;
	}

	.detail-index.correct {
		background: linear-gradient(135deg, #52c41a, #73d13d);
		box-shadow: 0 2rpx 8rpx rgba(82,196,26,0.3);
	}

	.detail-index.wrong {
		background: linear-gradient(135deg, #f5222d, #ff4d4f);
		box-shadow: 0 2rpx 8rpx rgba(245,34,45,0.3);
	}

	.detail-index-text {
		font-size: 20rpx;
		font-weight: 700;
		color: #fff;
	}

	.detail-body {
		flex: 1;
		min-width: 0;
	}

	.detail-q {
		font-size: 26rpx;
		color: #333;
		line-height: 1.5;
		display: block;
		margin-bottom: 10rpx;
	}

	.detail-answer-row {
		display: flex;
		align-items: baseline;
		margin-top: 4rpx;
	}

	.detail-label {
		font-size: 22rpx;
		color: #999;
		flex-shrink: 0;
	}

	.detail-value {
		font-size: 24rpx;
		font-weight: 500;
	}

	.text-correct {
		color: #52c41a;
	}

	.text-wrong {
		color: #f5222d;
	}

	.text-correct-answer {
		color: #52c41a;
	}

	.tips {
		background: rgba(255, 247, 237, 0.95);
		border-radius: 12rpx;
		padding: 20rpx;
		margin-top: 16rpx;
		border-left: 6rpx solid #FD5401;
	}

	.tips-label {
		font-size: 24rpx;
		font-weight: 600;
		color: #FD5401;
		display: block;
		margin-bottom: 6rpx;
	}

	.tips-text {
		font-size: 24rpx;
		color: #666;
		line-height: 1.5;
	}

	.loading-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.loading-text {
		font-size: 28rpx;
		color: #fff;
		margin-top: 20rpx;
	}

	.error-text {
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		display: block;
	}

	.retry-btn {
		margin-top: 30rpx;
		width: 240rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: rgba(255, 255, 255, 0.9);
		color: #FD5401;
		border: none;
		border-radius: 36rpx;
		font-size: 28rpx;
	}
</style>