vist_go_uniApp/pagesA/task/detail.vue

<template>
	<view class="container">

		<!-- 详情内容 -->
		<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 === '待审核'">
			<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>
	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.visitDetail.status = options.status || '待审核';
				this.getVisitDetail();
			}
		},
		methods: {
			// 获取访问详情
			getVisitDetail() {
				// 模拟数据，实际应该调用接口
				const mockDetail = {
					id: this.visitId,
					department: '技术部',
					employeeName: '张河嘉',
					visitReason: '参加业务研究计划',
					visitTime: '2025-08-09',
					visitorName: '安晓伟',
					visitorCompany: '某某某公司',
					visitorPhone: '13012345678',
					status: this.visitDetail.status, // 从上一页传来的状态
					useVehicle: true,
					vehicleNumber: '冀A·12345',
					pickupTime: '2025-08-09 16:30',
					pickupLocation: '石家庄新华区',
					accompanyPersons: [{
							name: '李四',
							phone: '13987654321'
						},
						{
							name: '王五',
							phone: '13876543210'
						}
					]
				};

				this.visitDetail = mockDetail;
			},

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

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

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

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

				// 模拟接口调用
				uni.showLoading({
					title: '处理中...'
				});

				setTimeout(() => {
					uni.hideLoading();

					// 更新状态
					this.visitDetail.status = '待访问';

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

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

				// 模拟接口调用
				uni.showLoading({
					title: '处理中...'
				});

				setTimeout(() => {
					uni.hideLoading();

					// 更新状态
					this.visitDetail.status = '已拒绝';

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

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

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

	.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>