vist_go_uniApp/pagesA/task/edit.vue

<template>
	<view class="container">
		<!-- 导航栏 -->
		<custom-navbar title="访客申请" :showBack="true"></custom-navbar>

		<!-- 表单内容 -->
		<view class="form-container">
			<!-- 第一块：对接人信息 -->
			<view class="section">
				<view class="section-title">
					<image class="title-icon" src="/static/images/person.png" mode="aspectFit"></image>
					对接人信息
				</view>
				<view class="form-item" @tap="showDepartmentPicker" style="z-index: 999;">
					<text class="label">所属部门</text>
					<view class="input-wrapper" @tap="showDepartmentPicker">
						<text class="placeholder" v-if="!formData.department">请选择所属部门</text>
						<text v-else>{{ formData.department }}</text>
						<uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
					</view>
				</view>
				<view class="form-item">
					<text class="label">员工姓名</text>
					<input class="input" v-model="formData.employeeName" placeholder="请输入员工姓名"
						placeholder-style="color: #c0c4cc" />
				</view>
			</view>

			<!-- 第二块：访问信息 -->
			<view class="section">
				<view class="section-title">
					<image class="title-icon" src="/static/images/calendar.png" mode="aspectFit"></image>
					访问信息
				</view>
				<view class="form-item">
					<text class="label">访问事由</text>
					<input class="input" v-model="formData.visitReason" placeholder="请输入访问事由"
						placeholder-style="color: #c0c4cc" />
				</view>
				<view class="form-item">
					<text class="label">到访时间</text>
					<uni-datetime-picker type="datetime" v-model="formData.visitTime" @change="onVisitTimeChange"
						:clear-icon="false" placeholder="请选择到访时间" format="YYYY-MM-DD HH:mm" :hide-second="true">
						<view class="input-wrapper">
							<text class="placeholder" v-if="!formData.visitTime">请选择到访时间</text>
							<text v-else>{{ formData.visitTime }}</text>
							<uni-icons type="calendar" size="16" color="#c0c4cc"></uni-icons>
						</view>
					</uni-datetime-picker>
				</view>
				<view class="form-item">
					<text class="label">访客姓名</text>
					<input class="input" v-model="formData.visitorName" placeholder="请输入访客姓名"
						placeholder-style="color: #c0c4cc" />
				</view>
				<view class="form-item">
					<text class="label">访客单位</text>
					<input class="input" v-model="formData.visitorCompany" placeholder="请输入访客单位"
						placeholder-style="color: #c0c4cc" />
				</view>
				<view class="form-item">
					<text class="label">手机号</text>
					<input class="input" v-model="formData.visitorPhone" placeholder="请输入手机号"
						placeholder-style="color: #c0c4cc" type="number" />
				</view>
			</view>

			<!-- 第三块：随行人员 -->
			<view class="section">
				<view class="section-title">随行人员</view>
				<view class="accompany-list">
					<view class="accompany-item" v-for="(item, index) in formData.accompanyPersons" :key="index">
						<view class="form-item">
							<text class="label">随行人员</text>
							<input class="input" v-model="item.name" placeholder="请输入随行人员姓名"
								placeholder-style="color: #c0c4cc" />
						</view>
						<view class="form-item">
							<text class="label">手机号</text>
							<input class="input" v-model="item.phone" placeholder="请输入手机号"
								placeholder-style="color: #c0c4cc" type="number" />
						</view>
						<view class="delete-btn" v-if="formData.accompanyPersons.length > 1"
							@click="removeAccompany(index)">
							<uni-icons type="trash" size="18" color="#ff4757"></uni-icons>
						</view>
					</view>
				</view>
				<view class="add-accompany-btn" @click="addAccompany">
					<uni-icons type="plus" size="16" color="#007aff"></uni-icons>
					<text>添加随行人员</text>
				</view>
			</view>

			<!-- 第四块：使用车辆 -->
			<view class="section">
				<view class="vehicle-header">
					<view class="section-title">
						<image class="title-icon" src="/static/images/cart.png" mode="aspectFit"></image>
						使用车辆
					</view>
					<switch :checked="formData.useVehicle" @change="onVehicleChange" color="#007aff" />
				</view>

				<view v-if="formData.useVehicle" class="vehicle-content">
					<view class="form-item">
						<text class="label">接客时间</text>
						<uni-datetime-picker type="datetime" v-model="formData.pickupTime" @change="onPickupTimeChange"
							:clear-icon="false" placeholder="请选择接客时间" format="YYYY-MM-DD HH:mm" :hide-second="true">
							<view class="input-wrapper">
								<text class="placeholder" v-if="!formData.pickupTime">请选择接客时间</text>
								<text v-else>{{ formData.pickupTime }}</text>
								<uni-icons type="calendar" size="16" color="#c0c4cc"></uni-icons>
							</view>
						</uni-datetime-picker>
					</view>
					<view class="form-item">
						<text class="label">接客地点</text>
						<input class="input" v-model="formData.pickupLocation" placeholder="请输入接客地点"
							placeholder-style="color: #c0c4cc" />
					</view>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-container">
			<button class="submit-btn" @click="submitForm">提交</button>
		</view>

		<!-- 部门选择器 -->
		<uni-popup ref="departmentPopup" type="bottom" style="z-index: 999;">
			<view class="picker-container">
				<view class="picker-header">
					<text @click="$refs.departmentPopup.close()">取消</text>
					<text class="picker-title">选择所属部门</text>
					<text @click="confirmDepartment">确定</text>
				</view>
				<picker-view class="picker-view" :value="departmentIndex" @change="onDepartmentChange">
					<picker-view-column>
						<view class="picker-item" v-for="(item, index) in departments" :key="index">
							{{ item }}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>

		<!-- 提交成功弹框 -->
		<uni-popup ref="successPopup" type="center" :mask-click="false">
			<view class="success-popup">
				<view class="popup-content">
					<view class="success-icon">
						<uni-icons type="checkmarkempty" size="60" color="#52c41a"></uni-icons>
					</view>
					<view class="popup-title">申请提交成功</view>
					<view class="popup-message">您的申请已成功提交，请关注公众号即时查询审核结果</view>
					<view class="popup-buttons">
						<button class="cancel-btn" @click="closeSuccessPopup">取消</button>
						<button class="follow-btn" @click="showQRCode">关注</button>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 二维码弹框 -->
		<uni-popup ref="qrcodePopup" type="center" :mask-click="false">
			<view class="qrcode-popup">
				<view class="qrcode-content">
					<view class="qrcode-title">扫描二维码关注公众号</view>
					<view class="qrcode-image" @click="previewQRCode">
						<image src="/static/images/qrcode.png" mode="aspectFit"></image>
						<view class="preview-tip">
							<uni-icons type="search" size="16" color="#fff"></uni-icons>
							<text>点击查看大图</text>
						</view>
					</view>
					<view class="qrcode-tip">扫描上方二维码，关注公众号获取审核结果</view>
					<button class="qrcode-close-btn" @click="closeQRCode">我知道了</button>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '', // 从上一页传递过来的参数
				formData: {
					department: '',
					employeeName: '',
					visitReason: '',
					visitTime: '',
					visitorName: '',
					visitorCompany: '',
					visitorPhone: '',
					accompanyPersons: [{
						name: '',
						phone: ''
					}],
					useVehicle: false,
					pickupTime: '',
					pickupLocation: ''
				},
				// 部门假数据
				departments: [
					'技术部',
					'市场部',
					'人事部',
					'财务部',
					'运营部',
					'产品部',
					'设计部',
					'客服部'
				],
				departmentIndex: [0],
				tempDepartmentIndex: [0]
			}
		},
		onLoad(options) {
			// 获取传递过来的参数
			if (options.type) {
				this.type = options.type;
			}
		},
		methods: {
			// 显示部门选择器
			showDepartmentPicker() {
				this.$refs.departmentPopup.open();
			},

			// 部门选择改变
			onDepartmentChange(e) {
				this.tempDepartmentIndex = e.detail.value;
			},

			// 确认选择部门
			confirmDepartment() {
				this.departmentIndex = [...this.tempDepartmentIndex];
				this.formData.department = this.departments[this.departmentIndex[0]];
				this.$refs.departmentPopup.close();
			},

			// 到访时间改变
			onVisitTimeChange(e) {
				this.formData.visitTime = e;
			},

			// 接客时间改变
			onPickupTimeChange(e) {
				this.formData.pickupTime = e;
			},

			// 获取当前日期时间
			getCurrentDatetime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hour = String(now.getHours()).padStart(2, '0');
				const minute = String(now.getMinutes()).padStart(2, '0');
				return `${year}-${month}-${day} ${hour}:${minute}`;
			},

			// 添加随行人员
			addAccompany() {
				this.formData.accompanyPersons.push({
					name: '',
					phone: ''
				});
			},

			// 删除随行人员
			removeAccompany(index) {
				if (this.formData.accompanyPersons.length > 1) {
					this.formData.accompanyPersons.splice(index, 1);
				}
			},

			// 车辆开关改变
			onVehicleChange(e) {
				this.formData.useVehicle = e.detail.value;
				if (!this.formData.useVehicle) {
					// 关闭车辆使用时清空相关信息
					this.formData.pickupTime = '';
					this.formData.pickupLocation = '';
				}
			},


			// 手机号格式校验
			validatePhone(phone) {
				const phoneRegex = /^1[3-9]\d{9}$/;
				return phoneRegex.test(phone);
			},

			// 表单验证
			validateForm() {
				if (!this.formData.department) {
					uni.showToast({
						title: '请选择所属部门',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.employeeName) {
					uni.showToast({
						title: '请输入员工姓名',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.visitReason) {
					uni.showToast({
						title: '请输入访问事由',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.visitTime) {
					uni.showToast({
						title: '请选择到访时间',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.visitorName) {
					uni.showToast({
						title: '请输入访客姓名',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.visitorCompany) {
					uni.showToast({
						title: '请输入访客单位',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.visitorPhone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return false;
				}

				// 校验访客手机号格式
				if (!this.validatePhone(this.formData.visitorPhone)) {
					uni.showToast({
						title: '请输入正确的手机号格式',
						icon: 'none'
					});
					return false;
				}

				// 验证随行人员信息
				for (let i = 0; i < this.formData.accompanyPersons.length; i++) {
					const person = this.formData.accompanyPersons[i];
					if (person.name && !person.phone) {
						uni.showToast({
							title: `请输入第${i + 1}个随行人员的手机号`,
							icon: 'none'
						});
						return false;
					}
					if (!person.name && person.phone) {
						uni.showToast({
							title: `请输入第${i + 1}个随行人员的姓名`,
							icon: 'none'
						});
						return false;
					}
					// 校验随行人员手机号格式
					if (person.phone && !this.validatePhone(person.phone)) {
						uni.showToast({
							title: `第${i + 1}个随行人员手机号格式不正确`,
							icon: 'none'
						});
						return false;
					}
				}

				// 验证车辆使用信息
				if (this.formData.useVehicle) {
					if (!this.formData.pickupTime) {
						uni.showToast({
							title: '请选择接客时间',
							icon: 'none'
						});
						return false;
					}
					if (!this.formData.pickupLocation) {
						uni.showToast({
							title: '请选择接客地点',
							icon: 'none'
						});
						return false;
					}
				}

				return true;
			},

			// 提交表单
			submitForm() {
				if (!this.validateForm()) {
					return;
				}

				// 过滤空的随行人员
				const validAccompanyPersons = this.formData.accompanyPersons.filter(person =>
					person.name && person.phone
				);

				const submitData = {
					...this.formData,
					accompanyPersons: validAccompanyPersons,
					type: this.type
				};

				console.log('提交数据:', submitData);

				// TODO: 这里调用后端接口提交数据
				// this.submitToServer(submitData);

				// 显示提交成功弹框
				this.$refs.successPopup.open();
			},

			// 关闭成功弹框
			closeSuccessPopup() {
				this.$refs.successPopup.close();
				// 返回上一页
				uni.navigateBack();
			},

			// 显示二维码
			showQRCode() {
				this.$refs.successPopup.close();
				this.$refs.qrcodePopup.open();
			},

			// 关闭二维码弹框
			closeQRCode() {
				this.$refs.qrcodePopup.close();
				// 返回上一页
				uni.navigateBack();
			},

			// 预览二维码
			previewQRCode() {
				uni.previewImage({
					urls: ['/static/images/qrcode.png'],
					current: 0
				});
			},

			// 提交到服务器的方法（预留）
			async submitToServer(data) {
				// 这里是后端接口调用的预留方法
				// try {
				//     const response = await this.$request.post('/api/visit/apply', data);
				//     return response;
				// } catch (error) {
				//     console.error('提交失败:', error);
				//     throw error;
				// }
			}
		}
	}
</script>

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

	.form-container {
		padding: 20rpx;
	}

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

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
	}

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

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		position: relative;

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

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

	.input {
		flex: 1;
		height: 70rpx;
		padding: 0 20rpx;
		background-color: #f8f8f8;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333;
	}

	.input-wrapper {
		flex: 1;
		height: 70rpx;
		padding: 0 20rpx;
		background-color: #f8f8f8;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.placeholder {
		color: #c0c4cc;
		font-size: 28rpx;
	}

	.accompany-list {
		.accompany-item {
			position: relative;
			padding: 20rpx;
			background-color: #f8f8f8;
			border-radius: 8rpx;
			margin-bottom: 20rpx;

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

			.form-item {
				margin-bottom: 20rpx;

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

	.delete-btn {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border-radius: 50%;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.add-accompany-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		background-color: #f8f9fa;
		border: 2rpx dashed #c0c4cc;
		border-radius: 8rpx;
		color: #909399;
		font-size: 28rpx;

		text {
			margin-left: 10rpx;
		}
	}

	.vehicle-header {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;

		.section-title {
			flex: 1;
			margin-bottom: 0;
			margin-left: 15rpx;
		}
	}

	.vehicle-content {
		padding-top: 20rpx;
		border-top: 1rpx solid #eee;
	}

	.submit-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);
	}

	.submit-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, #ff6b35 0%, #ff9500 100%);
		border-radius: 44rpx;
		border: none;
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
	}

	.picker-container {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
	}

	.picker-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;

		text {
			color: #007aff;
			font-size: 28rpx;
		}
	}

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

	.picker-view {
		height: 400rpx;
	}

	.picker-item {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		font-size: 28rpx;
		color: #333;
	}

	// 提交成功弹框样式
	.success-popup {
		.popup-content {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 60rpx 40rpx 40rpx;
			width: 560rpx;
			text-align: center;
		}

		.success-icon {
			margin-bottom: 30rpx;
		}

		.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: 50rpx;
		}

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

			button {
				flex: 1;
				height: 80rpx;
				border-radius: 40rpx;
				font-size: 28rpx;
				border: none;
			}

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

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

	// 二维码弹框样式
	.qrcode-popup {
		.qrcode-content {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 50rpx 40rpx;
			width: 560rpx;
			text-align: center;
		}

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

			.qrcode-image {
				width: 400rpx;
				height: 400rpx;
				margin: 0 auto 30rpx;
				border: 1rpx solid #eee;
				border-radius: 12rpx;
				overflow: hidden;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.preview-tip {
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					height: 60rpx;
					background: rgba(0, 0, 0, 0.5);
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 24rpx;

					text {
						margin-left: 10rpx;
					}
				}

				&:active {
					opacity: 0.8;
				}
			}

		.qrcode-tip {
			font-size: 26rpx;
			color: #999;
			margin-bottom: 40rpx;
			line-height: 1.5;
		}

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