vist_go_uniApp/pagesA/task/detail.vue

<template>
	
	<!-- 任务详情 -->
	<view class="container">
		<!-- 状态标签 -->
		<view class="status-bar" :class="getStatusBarClass(visitDetail.status)">
			<text class="status-text">{{ visitDetail.status }}</text>
		</view>

		<!-- 详情内容 -->
		<view class="detail-container">
			<!-- 对接信息 -->
			<view class="section">

				<view class="section-title">
					<image class="title-icon" src="/static/images/person.png" mode="aspectFit"></image>
					<view class="title">
						对接信息
					</view>
				</view>
				<view class="info-item">
					<text class="label">所属部门</text>
					<text class="value">{{visitDetail.department}}</text>
				</view>
				<view class="info-item">
					<text class="label">员工姓名</text>
					<text class="value">{{visitDetail.employeeName}}</text>
				</view>
			</view>

			<!-- 访问信息 -->
			<view class="section">
				<view class="section-title">
					<image class="title-icon" src="/static/images/calendar.png" mode="aspectFit"></image>
					<view class="title">
						访问信息
					</view>
				</view>
				<view class="info-item">
					<text class="label">访问事由</text>
					<text class="value">{{visitDetail.visitReason}}</text>
				</view>
				<view class="info-item">
					<text class="label">到访时间</text>
					<text class="value">{{visitDetail.visitTime}}</text>
				</view>
				<view class="info-item">
					<text class="label">访客姓名</text>
					<text class="value">{{visitDetail.visitorName}}</text>
				</view>
				<view class="info-item">
					<text class="label">访客单位</text>
					<text class="value">{{visitDetail.visitorCompany}}</text>
				</view>
				<view class="info-item">
					<text class="label">手机号</text>
					<text class="value">{{visitDetail.visitorPhone}}</text>
				</view>
			</view>

			<!-- 随行人员 -->
			<view class="section" v-if="visitDetail.accompanyPersons && visitDetail.accompanyPersons.length > 0">
				<view class="section-title">
					<image class="title-icon" src="/static/images/person.png" mode="aspectFit"></image>
					<view class="title">
						随行人员
					</view>
				</view>
				<view class="accompany-list">
					<view class="info-item" v-for="(person, index) in visitDetail.accompanyPersons" :key="index">
						<text class="label">随行人员{{index + 1}}</text>
						<view class="accompany-info">
							<text class="value">{{person.name}}</text>
							<text class="phone">{{person.phone}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 使用车辆 -->
			<view class="section" v-if="visitDetail.useVehicle">
				<view class="section-title">
					<image class="title-icon" src="/static/images/cart.png" mode="aspectFit"></image>
					<view class="title">
						车辆信息
					</view>
					<text class="vehicle-number">{{visitDetail.vehicleNumber}}</text>
				</view>
				<view class="info-item">
					<text class="label">接客时间</text>
					<text class="value">{{visitDetail.pickupTime}}</text>
				</view>
				<view class="info-item">
					<text class="label">接客地点</text>
					<text class="value">{{visitDetail.pickupLocation}}</text>
				</view>
			</view>
		</view>

		<!-- 操作按钮 - 仅待审核状态显示 -->
		<view class="action-container" v-if="visitDetail.status === '待审核'">
<!--			<view class="action-container">-->
			<button class="reject-btn" @click="handleReject">拒绝</button>
			<button class="approve-btn" @click="handleApprove">通过</button>
		</view>

		<!-- 确认弹框 -->
		<uni-popup ref="confirmPopup" type="center">
			<view class="confirm-popup">
				<view class="popup-content">
					<view class="popup-title">{{confirmAction === 'approve' ? '确认通过' : '确认拒绝'}}</view>
					<view class="popup-message">
						{{confirmAction === 'approve' ? '确定要通过这个访问申请吗？' : '确定要拒绝这个访问申请吗？'}}
					</view>
					<view class="popup-buttons">
						<button class="cancel-btn" @click="cancelAction">取消</button>
						<button class="confirm-btn"
							@click="confirmAction === 'approve' ? approveVisit() : rejectVisit()">
							确定
						</button>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 结果提示弹框 -->
		<uni-popup ref="resultPopup" type="center">
			<view class="result-popup">
				<view class="popup-content">
					<view class="result-icon" :class="resultType">
						<uni-icons :type="resultType === 'success' ? 'checkmarkempty' : 'closeempty'" size="60"
							:color="resultType === 'success' ? '#52c41a' : '#ff4757'"></uni-icons>
					</view>
					<view class="popup-title">{{resultTitle}}</view>
					<view class="popup-message">{{resultMessage}}</view>
					<button class="close-btn" @click="closeResultPopup">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		updateVisitInfo
	} from '@/config/api.js';

	export default {
		data() {
			return {
				visitId: '',
				visitDetail: {
					id: '',
					department: '',
					employeeName: '',
					visitReason: '',
					visitTime: '',
					visitorName: '',
					visitorCompany: '',
					visitorPhone: '',
					status: '',
					useVehicle: false,
					vehicleNumber: '',
					pickupTime: '',
					pickupLocation: '',
					accompanyPersons: []
				},
				confirmAction: '', // 'approve' 或 'reject'
				resultType: '', // 'success' 或 'error'
				resultTitle: '',
				resultMessage: ''
			}
		},
		onLoad(options) {
			if (options.id) {
				this.visitId = options.id;
				this.getVisitDetail();
			}
		},
		methods: {
			// 获取状态栏样式类
			getStatusBarClass(status) {
				const statusClassMap = {
					'待访问': 'status-bar-pending-visit',
					'已访问': 'status-bar-visited',
					'待审核': 'status-bar-pending-review',
					'已拒绝': 'status-bar-rejected'
				};
				return statusClassMap[status] || 'status-bar-default';
			},

			// 获取访问详情
			getVisitDetail() {
				// 从缓存中获取数据
				const visitData = uni.getStorageSync('visitDetailData');
				
				if (visitData) {
					// 解析随行人员数据
					let accompanyPersons = [];
					if (visitData.accPerson) {
						try {
							const accPersonData = typeof visitData.accPerson === 'string' ? JSON.parse(visitData.accPerson) : visitData.accPerson;
							if (Array.isArray(accPersonData)) {
								accompanyPersons = accPersonData.map(person => ({
									name: person.name || person.accName || '',
									phone: person.phone || person.accTel || ''
								}));
							}
						} catch (error) {
							console.error('解析随行人员数据失败:', error);
						}
					}
					
					// 设置详情数据
					this.visitDetail = {
						id: visitData.id,
						department: visitData.visDept || '', // 访客单位作为部门
						employeeName: visitData.employeeName,
						visitReason: visitData.visitReason,
						visitTime: visitData.visitDate,
						visitorName: visitData.visitorName,
						visitorCompany: visitData.visitorCompany,
						visitorPhone: visitData.visitorPhone,
						status: visitData.status,
						useVehicle: visitData.useVehicle || false,
						vehicleNumber: visitData.vehicleNumber || '',
						pickupTime: visitData.pickupTime || '',
						pickupLocation: visitData.pickupLocation || '',
						accompanyPersons: accompanyPersons
					};
					
					// 清除缓存
					uni.removeStorageSync('visitDetailData');
				}
			},

			// 处理拒绝
			handleReject() {
				this.confirmAction = 'reject';
				this.$refs.confirmPopup.open();

			},

			// 处理通过
			handleApprove() {
				this.confirmAction = 'approve';
				this.$refs.confirmPopup.open();

			},

			// 取消操作
			cancelAction() {
				this.$refs.confirmPopup.close();
				this.confirmAction = '';
			},

		// 确认通过
		async approveVisit() {
			this.$refs.confirmPopup.close();

			uni.showLoading({
				title: '处理中...'
			});

			try {
				// 调用接口，状态改为 0=待访问（通过）
				const response = await updateVisitInfo({
					id: this.visitDetail.id,
					visitStatus: '0'
				});

				uni.hideLoading();

				if (response && response.code === 200) {
					// 实时更新本地状态
					this.visitDetail.status = '待访问';
					
					// 强制页面刷新
					this.$forceUpdate();

					// 显示成功提示
					this.resultType = 'success';
					this.resultTitle = '审核通过';
					this.resultMessage = '访问申请已通过，访客将收到通知';
					this.$refs.resultPopup.open();

					// 通知 visitor.vue 刷新列表
					uni.$emit('refreshVisitList');
					
					console.log('审核通过，状态已更新为:', this.visitDetail.status);
				} else {
					uni.showToast({
						title: response.msg || '操作失败',
						icon: 'none'
					});
				}
			} catch (error) {
				uni.hideLoading();
				console.error('审核通过失败:', error);
				uni.showToast({
					title: '操作失败，请重试',
					icon: 'none'
				});
			}

		},

		// 确认拒绝
		async rejectVisit() {
			this.$refs.confirmPopup.close();

			uni.showLoading({
				title: '处理中...'
			});

			try {
				// 调用接口，状态改为 3=已拒绝
				const response = await updateVisitInfo({
					id: this.visitDetail.id,
					visitStatus: '3'
				});

				uni.hideLoading();

				if (response && response.code === 200) {
					// 实时更新本地状态
					this.visitDetail.status = '已拒绝';
					
					// 强制页面刷新
					this.$forceUpdate();

					// 显示成功提示
					this.resultType = 'success';
					this.resultTitle = '审核完成';
					this.resultMessage = '访问申请已拒绝，访客将收到通知';
					this.$refs.resultPopup.open();

					// 通知 visitor.vue 刷新列表
					uni.$emit('refreshVisitList');
					
					console.log('审核拒绝，状态已更新为:', this.visitDetail.status);
				} else {
					uni.showToast({
						title: response.msg || '操作失败',
						icon: 'none'
					});
				}
			} catch (error) {
				uni.hideLoading();
				console.error('拒绝访问失败:', error);
				uni.showToast({
					title: '操作失败，请重试',
					icon: 'none'
				});
			}

		},

			// 关闭结果弹框
			closeResultPopup() {
				this.$refs.resultPopup.close();
				// 返回上一页
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 140rpx;
	}

	// 状态栏样式
	.status-bar {
		margin: 20rpx;
		padding: 20rpx 30rpx;
		border-radius: 12rpx;
		text-align: center;
		
		.status-text {
			font-size: 32rpx;
			font-weight: 600;
		}

		&.status-bar-pending-visit {
			background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.2) 100%);
			border: 2rpx solid rgba(76, 175, 80, 0.3);
			
			.status-text {
				color: #4CAF50;
			}
		}

		&.status-bar-visited {
			background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.2) 100%);
			border: 2rpx solid rgba(33, 150, 243, 0.3);
			
			.status-text {
				color: #2196F3;
			}
		}

		&.status-bar-pending-review {
			background: linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(255, 152, 0, 0.2) 100%);
			border: 2rpx solid rgba(255, 152, 0, 0.3);
			
			.status-text {
				color: #FF9800;
			}
		}

		&.status-bar-rejected {
			background: linear-gradient(135deg, rgba(244, 67, 54, 0.1) 0%, rgba(244, 67, 54, 0.2) 100%);
			border: 2rpx solid rgba(244, 67, 54, 0.3);
			
			.status-text {
				color: #F44336;
			}
		}

		&.status-bar-default {
			background: linear-gradient(135deg, rgba(158, 158, 158, 0.1) 0%, rgba(158, 158, 158, 0.2) 100%);
			border: 2rpx solid rgba(158, 158, 158, 0.3);
			
			.status-text {
				color: #999;
			}
		}
	}

	.detail-container {
		padding: 20rpx;
	}

	.section {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		padding: 30rpx;
	}

	.section-title {

		margin-bottom: 30rpx;
		display: flex;
		align-items: center;

	}

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

	.title-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 15rpx;
	}

	.vehicle-number {
		font-size: 28rpx;
		color: #666;
		font-weight: normal;
		margin-left: auto;
	}

	.info-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 24rpx;

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

	.label {
		width: 160rpx;
		font-size: 28rpx;
		color: #666;
		flex-shrink: 0;
		line-height: 1.5;
	}

	.value {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
		word-break: break-all;
	}

	.accompany-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;

		.value {
			font-size: 28rpx;
			color: #333;
		}

		.phone {
			font-size: 24rpx;
			color: #666;
		}
	}

	.action-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
		display: flex;
		gap: 20rpx;
	}

	.reject-btn,
	.approve-btn {
		flex: 1;
		height: 88rpx;
		border-radius: 44rpx;
		border: none;
		font-size: 32rpx;
		font-weight: 600;
	}

	.reject-btn {
		background-color: #fff;
		color: #ff4757;
		border: 2rpx solid #ff4757;
	}

	.approve-btn {
		background: #39833b;
		color: #fff;
	}

	// 弹框样式
	.confirm-popup,
	.result-popup {
		.popup-content {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 60rpx 40rpx 40rpx;
			width: 560rpx;
			text-align: center;
		}

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

		.popup-message {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
			margin-bottom: 40rpx;
		}
	}

	.popup-buttons {
		display: flex;
		gap: 20rpx;

		.cancel-btn,
		.confirm-btn {
			flex: 1;
			height: 80rpx;
			border-radius: 40rpx;
			font-size: 28rpx;
			border: none;
		}

		.cancel-btn {
			background-color: #f5f5f5;
			color: #666;
		}

		.confirm-btn {
			background: linear-gradient(135deg, #ff6b35 0%, #ff9500 100%);
			color: #fff;
		}
	}

	.result-icon {
		margin-bottom: 30rpx;

		&.success {
			// success icon styling handled by uni-icons color
		}

		&.error {
			// error icon styling handled by uni-icons color  
		}
	}

	.close-btn {
		width: 100%;
		height: 80rpx;
		background: linear-gradient(135deg, #ff6b35 0%, #ff9500 100%);
		border-radius: 40rpx;
		color: #fff;
		font-size: 28rpx;
		border: none;
	}
</style>