xiangqinxiangmu/LiangZhiYUMao/pages/matchmaker-workbench/audit-records.vue

<template>
	<view class="audit-records">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack"></view>
			<text class="header-title">撮合成功通知</text>
			<view class="placeholder"></view>
		</view>

		<scroll-view scroll-y class="content" @scrolltolower="loadMore">
			<!-- 加载中 -->
			<view v-if="loading && records.length === 0" class="loading-container">
				<text>加载中...</text>
			</view>
			
			<!-- 记录列表 -->
			<view v-else-if="records.length > 0" class="record-list">
				<view 
					v-for="record in records" 
					:key="record.id" 
					class="record-item"
					:class="{ unread: !record.isRead && (record.auditStatus === 1 || record.auditStatus === 2) }"
					@click="openDetail(record)"
				>
					<!-- 状态标签 -->
					<view class="status-tag" 
						:class="{
							'status-pending': record.auditStatus === 0,
							'status-success': record.auditStatus === 1,
							'status-fail': record.auditStatus === 2,
							'status-checking': record.auditStatus === 3
						}">
						{{ getStatusText(record.auditStatus) }}
					</view>
					
					<!-- 未读红点 -->
					<view v-if="!record.isRead && (record.auditStatus === 1 || record.auditStatus === 2)" class="unread-dot"></view>
					
					<!-- 记录内容 -->
					<view class="record-content">
						<view class="record-title">
							<text class="couple-names">{{ record.maleRealName }} & {{ record.femaleRealName }}</text>
							<text class="case-type">{{ record.caseType === 1 ? '订婚' : '结婚' }}</text>
						</view>
						<view class="record-summary">
							<text v-if="record.auditStatus === 0">您提交的撮合成功案例正在等待审核</text>
							<text v-else-if="record.auditStatus === 3">您的案例正在核实中，请耐心等待</text>
							<text v-else-if="record.auditStatus === 1">
								恭喜！审核通过，获得{{ record.pointsReward || 0 }}积分
								<text v-if="record.cashReward > 0">+{{ record.cashReward }}元现金</text>
								奖励
							</text>
							<text v-else-if="record.auditStatus === 2">审核未通过：{{ record.auditRemark || '未说明原因' }}</text>
						</view>
						<view class="record-time">{{ formatTime(record.createdAt) }}</view>
					</view>
				</view>
				
				<!-- 加载更多 -->
				<view v-if="loading" class="loading-more">
					<text>加载中...</text>
				</view>
				<view v-else-if="!hasMore" class="no-more">
					<text>没有更多了</text>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view v-else class="empty-container">
				<view class="empty-icon">📋</view>
				<text class="empty-text">暂无审核记录</text>
				<text class="empty-hint">提交撮合成功案例后，审核进度将在这里显示</text>
			</view>
		</scroll-view>

		<!-- 详情弹窗 -->
		<uni-popup ref="detailPopup" type="center">
			<view class="detail-popup" v-if="currentRecord">
				<view class="popup-header">
					<text class="popup-title">审核详情</text>
					<view class="close-btn" @click="closeDetail">×</view>
				</view>
				
				<view class="popup-content">
					<!-- 状态 -->
					<view class="detail-status" 
						:class="{
							'status-pending': currentRecord.auditStatus === 0,
							'status-success': currentRecord.auditStatus === 1,
							'status-fail': currentRecord.auditStatus === 2,
							'status-checking': currentRecord.auditStatus === 3
						}">
						<view class="status-icon" v-if="currentRecord.auditStatus !== 2">
							<text v-if="currentRecord.auditStatus === 0">⏳</text>
							<text v-else-if="currentRecord.auditStatus === 3">🔍</text>
							<text v-else-if="currentRecord.auditStatus === 1">✅</text>
						</view>
						<text class="status-text">{{ getStatusText(currentRecord.auditStatus) }}</text>
					</view>
					
					<!-- 案例信息 -->
					<view class="detail-section">
						<view class="section-title">案例信息</view>
						<view class="info-row">
							<text class="info-label">男方姓名</text>
							<text class="info-value">{{ currentRecord.maleRealName }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">女方姓名</text>
							<text class="info-value">{{ currentRecord.femaleRealName }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">案例类型</text>
							<text class="info-value">{{ currentRecord.caseType === 1 ? '订婚' : '结婚' }}</text>
						</view>
						<view class="info-row" v-if="currentRecord.caseDate">
							<text class="info-label">成功日期</text>
							<text class="info-value">{{ currentRecord.caseDate }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">提交时间</text>
							<text class="info-value">{{ formatTime(currentRecord.createdAt) }}</text>
						</view>
					</view>
					
					<!-- 审核通过：显示奖励 -->
					<view v-if="currentRecord.auditStatus === 1" class="detail-section reward-section">
						<view class="section-title">🎉 奖励信息</view>
						<view class="reward-content">
							<view class="reward-item" v-if="currentRecord.pointsReward > 0">
								<text class="reward-icon">🏆</text>
								<text class="reward-text">积分奖励：+{{ currentRecord.pointsReward }}积分</text>
							</view>
							<view class="reward-item" v-if="currentRecord.cashReward > 0">
								<text class="reward-icon">💰</text>
								<text class="reward-text">现金奖励：+{{ currentRecord.cashReward }}元</text>
							</view>
							<view class="reward-status">
								<text v-if="currentRecord.rewardStatus === 1" class="issued">奖励已发放</text>
								<text v-else class="pending">奖励待发放</text>
							</view>
						</view>
					</view>
					
					<!-- 审核失败：显示原因 -->
					<view v-if="currentRecord.auditStatus === 2" class="detail-section fail-section">
						<view class="section-title">审核未通过</view>
						<view class="fail-reason">
							<text>{{ currentRecord.auditRemark || '未说明具体原因，如有疑问请联系客服' }}</text>
						</view>
						<view class="fail-hint" @click="goToResubmit">
							<text>您可以修改后重新提交审核</text>
							<text class="resubmit-link">去提交 ></text>
						</view>
					</view>
					
					<!-- 待审核/核实中 -->
					<view v-if="currentRecord.auditStatus === 0 || currentRecord.auditStatus === 3" class="detail-section pending-section">
						<view class="section-title">{{ currentRecord.auditStatus === 0 ? '⏳ 等待审核' : '🔍 核实中' }}</view>
						<view class="pending-hint">
							<text v-if="currentRecord.auditStatus === 0">您的案例已提交，工作人员将尽快审核，请耐心等待</text>
							<text v-else>工作人员正在核实您的案例信息，请保持电话畅通</text>
						</view>
					</view>
					
					<!-- 审核时间 -->
					<view v-if="currentRecord.updatedAt" class="detail-section">
						<view class="info-row">
							<text class="info-label">审核时间</text>
							<text class="info-value">{{ formatTime(currentRecord.updatedAt) }}</text>
						</view>
					</view>
				</view>
				
				<view class="popup-footer">
					<button class="confirm-btn" @click="closeDetail">我知道了</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import api from '@/utils/api.js'

export default {
	data() {
		return {
			loading: false,
			records: [],
			currentRecord: null,
			matchmakerId: null,
			pageNum: 1,
			pageSize: 20,
			hasMore: true
		}
	},
	
	onLoad() {
		this.loadMatchmakerInfo()
	},
	
	onShow() {
		// 页面显示时刷新列表
		if (this.matchmakerId) {
			this.refreshList()
		}
	},
	
	methods: {
		goBack() {
			uni.navigateBack()
		},
		
		async loadMatchmakerInfo() {
			try {
				const userInfo = uni.getStorageSync('userInfo')
				if (userInfo && userInfo.userId) {
					const matchmakerInfo = await api.matchmaker.getByUserId(userInfo.userId)
					if (matchmakerInfo) {
						this.matchmakerId = matchmakerInfo.matchmakerId || matchmakerInfo.matchmaker_id || null
						if (this.matchmakerId) {
							this.loadRecords()
						} else {
							uni.showToast({ title: '未找到红娘信息', icon: 'none' })
						}
					}
				}
			} catch (e) {
				console.error('获取红娘信息失败', e)
				uni.showToast({ title: '获取红娘信息失败', icon: 'none' })
			}
		},
		
		async loadRecords() {
			if (this.loading || !this.hasMore) return
			
			this.loading = true
			try {
				const res = await api.successCaseUpload.getAuditRecords(
					this.matchmakerId, 
					null, // 不筛选状态，显示全部
					this.pageNum, 
					this.pageSize
				)
				
				const pageData = res?.records || res?.data?.records || []
				const total = res?.total || res?.data?.total || 0
				
				if (this.pageNum === 1) {
					this.records = pageData
				} else {
					this.records = [...this.records, ...pageData]
				}
				
				this.hasMore = this.records.length < total
				this.pageNum++
				
			} catch (e) {
				console.error('加载审核记录失败', e)
				uni.showToast({ title: '加载失败', icon: 'none' })
			} finally {
				this.loading = false
			}
		},
		
		refreshList() {
			this.pageNum = 1
			this.hasMore = true
			this.records = []
			this.loadRecords()
		},
		
		loadMore() {
			if (this.hasMore && !this.loading) {
				this.loadRecords()
			}
		},
		
		async openDetail(record) {
			this.currentRecord = record
			this.$refs.detailPopup.open()
			
			// 如果是已审核完成且未读，标记为已读
			if ((record.auditStatus === 1 || record.auditStatus === 2) && !record.isRead) {
				try {
					await api.successCaseUpload.markAsRead(record.id)
					// 更新本地状态
					record.isRead = 1
				} catch (e) {
					console.error('标记已读失败', e)
				}
			}
		},
		
		closeDetail() {
			this.$refs.detailPopup.close()
			this.currentRecord = null
		},
		
		// 跳转到重新提交审核页面
		goToResubmit() {
			if (!this.currentRecord) return
			// 关闭弹窗
			this.$refs.detailPopup.close()
			// 跳转到提交页面，携带记录ID用于回显数据
			uni.navigateTo({
				url: `/pages/matchmaker-workbench/success-case-upload?resubmitId=${this.currentRecord.id}`
			})
		},
		
		getStatusText(status) {
			const statusMap = {
				0: '待审核',
				1: '审核通过',
				2: '审核失败',
				3: '核实中'
			}
			return statusMap[status] || '未知'
		},
		
		// getStatusClass 方法已移除，改用内联对象语法
		
		formatTime(timeStr) {
			if (!timeStr) return ''
			const date = new Date(timeStr)
			const now = new Date()
			const diff = now - date
			
			// 一分钟内
			if (diff < 60000) {
				return '刚刚'
			}
			// 一小时内
			if (diff < 3600000) {
				return Math.floor(diff / 60000) + '分钟前'
			}
			// 今天
			if (date.toDateString() === now.toDateString()) {
				return date.getHours() + ':' + String(date.getMinutes()).padStart(2, '0')
			}
			// 昨天
			const yesterday = new Date(now)
			yesterday.setDate(yesterday.getDate() - 1)
			if (date.toDateString() === yesterday.toDateString()) {
				return '昨天 ' + date.getHours() + ':' + String(date.getMinutes()).padStart(2, '0')
			}
			// 更早
			const month = date.getMonth() + 1
			const day = date.getDate()
			return `${month}-${day} ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`
		}
	}
}
</script>

<style lang="scss" scoped>
.audit-records {
	min-height: 100vh;
	background: linear-gradient(180deg, #fff1f7 0%, #f6ebff 45%, #fbf7ff 75%, #ffffff 100%);
	display: flex;
	flex-direction: column;
}

/* 顶部导航栏 */
.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 25rpx 30rpx;
	padding-top: calc(25rpx + env(safe-area-inset-top));
	background: transparent;

	.back-btn {
		width: 70rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(240, 240, 240, 0.5);
		border-radius: 50%;
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>');
		background-size: 40rpx 40rpx;
		background-repeat: no-repeat;
		background-position: center;
	}

	.header-title {
		font-size: 38rpx;
		font-weight: bold;
		color: #333;
	}

	.placeholder {
		width: 70rpx;
	}
}

.content {
	flex: 1;
	padding: 20rpx 24rpx;
	box-sizing: border-box;
}

/* 记录列表 */
.record-list {
	padding-bottom: 40rpx;
}

.record-item {
	background: #ffffff;
	border-radius: 24rpx;
	padding: 28rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
	position: relative;
	
	&.unread {
		background: linear-gradient(135deg, #fff8fb 0%, #fef5ff 100%);
		border: 2rpx solid rgba(233, 30, 99, 0.15);
	}
}

/* 状态标签 */
.status-tag {
	position: absolute;
	top: 0;
	left: 28rpx;
	padding: 6rpx 16rpx;
	border-radius: 0 0 12rpx 12rpx;
	font-size: 22rpx;
	font-weight: 500;
	
	&.status-pending {
		background: #fff3e0;
		color: #f57c00;
	}
	
	&.status-success {
		background: #e8f5e9;
		color: #43a047;
	}
	
	&.status-fail {
		background: #ffebee;
		color: #e53935;
	}
	
	&.status-checking {
		background: #e3f2fd;
		color: #1976d2;
	}
}

/* 未读红点 */
.unread-dot {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	width: 16rpx;
	height: 16rpx;
	background: #e91e63;
	border-radius: 50%;
}

/* 记录内容 */
.record-content {
	padding-top: 30rpx;
}

.record-title {
	display: flex;
	align-items: center;
	margin-bottom: 12rpx;
	
	.couple-names {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-right: 16rpx;
	}
	
	.case-type {
		font-size: 24rpx;
		color: #9c27b0;
		background: #f3e5f5;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
	}
}

.record-summary {
	font-size: 26rpx;
	color: #666;
	line-height: 1.5;
	margin-bottom: 12rpx;
}

.record-time {
	font-size: 24rpx;
	color: #999;
}

/* 加载状态 */
.loading-container,
.empty-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 100rpx 0;
	color: #999;
	font-size: 28rpx;
}

.empty-icon {
	font-size: 80rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	font-size: 32rpx;
	color: #666;
	margin-bottom: 12rpx;
}

.empty-hint {
	font-size: 26rpx;
	color: #999;
}

.loading-more,
.no-more {
	text-align: center;
	padding: 30rpx 0;
	color: #999;
	font-size: 26rpx;
}

/* 详情弹窗 */
.detail-popup {
	width: 650rpx;
	background: #ffffff;
	border-radius: 24rpx;
	overflow: hidden;
}

.popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
	
	.popup-title {
		font-size: 34rpx;
		font-weight: 600;
		color: #333;
	}
	
	.close-btn {
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		color: #999;
	}
}

.popup-content {
	padding: 30rpx;
	max-height: 70vh;
	overflow-y: auto;
}

/* 详情状态 */
.detail-status {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30rpx;
	border-radius: 16rpx;
	margin-bottom: 30rpx;
	
	&.status-pending {
		background: #fff3e0;
	}
	
	&.status-success {
		background: #e8f5e9;
	}
	
	&.status-fail {
		background: #ffebee;
	}
	
	&.status-checking {
		background: #e3f2fd;
	}
	
	.status-icon {
		font-size: 60rpx;
		margin-bottom: 12rpx;
	}
	
	.status-text {
		font-size: 32rpx;
		font-weight: 600;
	}
}

/* 详情区块 */
.detail-section {
	margin-bottom: 30rpx;
	
	.section-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 16rpx;
		padding-bottom: 12rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
}

.info-row {
	display: flex;
	justify-content: space-between;
	padding: 12rpx 0;
	
	.info-label {
		font-size: 26rpx;
		color: #999;
	}
	
	.info-value {
		font-size: 26rpx;
		color: #333;
	}
}

/* 奖励区块 */
.reward-section {
	background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
	padding: 24rpx;
	border-radius: 16rpx;
	
	.section-title {
		border-bottom: none;
		padding-bottom: 0;
	}
}

.reward-content {
	.reward-item {
		display: flex;
		align-items: center;
		padding: 12rpx 0;
		
		.reward-icon {
			font-size: 36rpx;
			margin-right: 12rpx;
		}
		
		.reward-text {
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
		}
	}
	
	.reward-status {
		margin-top: 16rpx;
		text-align: center;
		
		.issued {
			color: #43a047;
			font-size: 26rpx;
		}
		
		.pending {
			color: #f57c00;
			font-size: 26rpx;
		}
	}
}

/* 失败区块 */
.fail-section {
	background: #fff5f5;
	padding: 24rpx;
	border-radius: 16rpx;
	
	.section-title {
		border-bottom: none;
		padding-bottom: 0;
		color: #e53935;
	}
	
	.fail-reason {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
		padding: 12rpx 0;
	}
	
	.fail-hint {
		font-size: 24rpx;
		color: #999;
		margin-top: 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.resubmit-link {
			color: #9c27b0;
			font-weight: 500;
		}
	}
}

/* 待审核区块 */
.pending-section {
	background: #f5f5f5;
	padding: 24rpx;
	border-radius: 16rpx;
	
	.section-title {
		border-bottom: none;
		padding-bottom: 0;
	}
	
	.pending-hint {
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
	}
}

/* 弹窗底部 */
.popup-footer {
	padding: 20rpx 30rpx 30rpx;
	
	.confirm-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, #e91e63 0%, #9c27b0 100%);
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 500;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
	}
}
</style>