concrete-transportation-uniapp-20250821/pages_order/base/addyuan.vue

<template>
	<view class="content">
		<navbar title="推荐员工" leftClick @leftClick="$utils.navigateBack" />
		<view class="form-container">
			<!-- 推荐类型 -->
			<view class="form-item">
				<view class="label">推荐类型</view>
				<view class="type-display">
					<text>{{ recommendType === 'driver' ? '推荐司机' : '推荐老板' }}</text>
				</view>
			</view>
			
			<!-- 姓名 -->
			<view class="form-item">
				<view class="label">{{ recommendType === 'driver' ? '司机姓名' : '老板姓名' }}</view>
				<input 
					v-model="recommendInfo.name" 
					:placeholder="'请输入' + (recommendType === 'driver' ? '司机' : '老板') + '姓名'" 
					class="input"
				/>
			</view>
			
			<!-- 联系电话 -->
			<view class="form-item">
				<view class="label">联系电话</view>
				<input 
					v-model="recommendInfo.phone" 
					placeholder="请输入联系电话" 
					class="input"
					type="number"
					maxlength="11"
				/>
			</view>
			
			<!-- 司机专属字段 -->
			<template v-if="recommendType === 'driver'">
				<!-- 驾驶车型 -->
				<view class="form-item">
					<view class="label">驾驶车型</view>
					<view class="select-value" @click="selectCarType">
						<text v-if="!recommendInfo.carType" class="placeholder">请选择驾驶车型</text>
						<text v-else>{{ recommendInfo.carType }}</text>
						<uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
					</view>
				</view>
				
				<!-- 工作经验 -->
				<view class="form-item">
					<view class="label">工作经验</view>
					<view class="select-value" @click="selectExperience">
						<text v-if="!recommendInfo.experience" class="placeholder">请选择工作经验</text>
						<text v-else>{{ recommendInfo.experience }}</text>
						<uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
					</view>
				</view>
			</template>
			
			<!-- 老板专属字段 -->
			<template v-if="recommendType === 'boss'">
				<!-- 公司名称 -->
				<view class="form-item">
					<view class="label">公司名称</view>
					<input 
						v-model="recommendInfo.companyName" 
						placeholder="请输入公司名称" 
						class="input"
					/>
				</view>
				
				<!-- 业务类型 -->
				<view class="form-item">
					<view class="label">业务类型</view>
					<view class="select-value" @click="selectBusinessType">
						<text v-if="!recommendInfo.businessType" class="placeholder">请选择业务类型</text>
						<text v-else>{{ recommendInfo.businessType }}</text>
						<uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
					</view>
				</view>
			</template>
			
			<!-- 所在地区 -->
			<view class="form-item">
				<view class="label">所在地区</view>
				<view class="address-input" @click="selectLocation">
					<text v-if="!recommendInfo.location" class="placeholder">请选择所在地区</text>
					<text v-else>{{ recommendInfo.location }}</text>
					<uv-icon name="map-pin" size="20" color="#007AFF"></uv-icon>
				</view>
			</view>
			
			<!-- 推荐理由 -->
			<view class="form-item">
				<view class="label">推荐理由</view>
				<textarea 
					v-model="recommendInfo.reason" 
					:placeholder="'请简述推荐' + (recommendType === 'driver' ? '司机' : '老板') + '的理由'" 
					class="textarea"
					maxlength="200"
				></textarea>
			</view>
			
			<!-- 您的联系方式 -->
			<view class="form-item">
				<view class="label">您的联系方式</view>
				<input 
					v-model="recommendInfo.myPhone" 
					placeholder="请输入您的联系电话" 
					class="input"
					type="number"
					maxlength="11"
				/>
			</view>
		</view>
		
		<!-- 推荐说明 -->
		<view class="tip-container">
			<view class="tip-title">推荐说明</view>
			<view class="tip-content">
				<text>• 推荐成功后，平台将联系被推荐人进行沟通</text>
				<text>• 如推荐人成功入驻并产生业务，您将获得丰厚奖励</text>
				<text>• 请确保提供的信息真实有效</text>
				<text>• 感谢您对平台发展的支持</text>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="bottom-buttons">
			<button class="btn-save" @click="submitRecommendation">提交推荐</button>
		</view>
	</view>
</template>

<script>
	import navbar from '@/components/base/navbar.vue'
	
	export default {
		name: 'BaseAddyuan',
		components: {
			navbar
		},
		data() {
			return {
				recommendType: 'driver', // driver 或 boss
				recommendInfo: {
					name: '',
					phone: '',
					carType: '',
					experience: '',
					companyName: '',
					businessType: '',
					location: '',
					reason: '',
					myPhone: ''
				}
			}
		},
		onLoad(options) {
			if (options.type) {
				this.recommendType = options.type;
			}
			uni.setNavigationBarTitle({
				title: this.recommendType === 'driver' ? '推荐司机' : '推荐老板'
			});
		},
		methods: {
			selectCarType() {
				uni.showActionSheet({
					itemList: ['泵车', '搅拌车', '车载泵', '其他'],
					success: (res) => {
						const types = ['泵车', '搅拌车', '车载泵', '其他'];
						this.recommendInfo.carType = types[res.tapIndex];
					}
				});
			},
			selectExperience() {
				uni.showActionSheet({
					itemList: ['1年以下', '1-3年', '3-5年', '5-10年', '10年以上'],
					success: (res) => {
						const experiences = ['1年以下', '1-3年', '3-5年', '5-10年', '10年以上'];
						this.recommendInfo.experience = experiences[res.tapIndex];
					}
				});
			},
			selectBusinessType() {
				uni.showActionSheet({
					itemList: ['混凝土生产', '建筑施工', '设备租赁', '物流运输', '其他'],
					success: (res) => {
						const types = ['混凝土生产', '建筑施工', '设备租赁', '物流运输', '其他'];
						this.recommendInfo.businessType = types[res.tapIndex];
					}
				});
			},
			selectLocation() {
				uni.chooseLocation({
					success: (res) => {
						this.recommendInfo.location = res.address;
					}
				});
			},
			submitRecommendation() {
				// 表单验证
				if (!this.recommendInfo.name) {
					uni.showToast({ 
						title: `请输入${this.recommendType === 'driver' ? '司机' : '老板'}姓名`, 
						icon: 'none' 
					});
					return;
				}
				if (!this.recommendInfo.phone) {
					uni.showToast({ title: '请输入联系电话', icon: 'none' });
					return;
				}
				if (!/^1[3-9]\d{9}$/.test(this.recommendInfo.phone)) {
					uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
					return;
				}
				if (this.recommendType === 'driver' && !this.recommendInfo.carType) {
					uni.showToast({ title: '请选择驾驶车型', icon: 'none' });
					return;
				}
				if (this.recommendType === 'boss' && !this.recommendInfo.companyName) {
					uni.showToast({ title: '请输入公司名称', icon: 'none' });
					return;
				}
				if (!this.recommendInfo.myPhone) {
					uni.showToast({ title: '请输入您的联系方式', icon: 'none' });
					return;
				}
				if (!/^1[3-9]\d{9}$/.test(this.recommendInfo.myPhone)) {
					uni.showToast({ title: '请输入正确的联系方式', icon: 'none' });
					return;
				}
				
				uni.showToast({
					title: '推荐提交成功',
					icon: 'success'
				});
				
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 20rpx;
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 120rpx;
	}
	
	.form-container {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.form-item {
		margin-bottom: 40rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		font-weight: 500;
	}
	
	.type-display {
		height: 80rpx;
		padding: 0 20rpx;
		background-color: #f8f8f8;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #007AFF;
		display: flex;
		align-items: center;
		font-weight: 500;
	}
	
	.input {
		width: 100%;
		height: 80rpx;
		padding: 0 20rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}
	
	.textarea {
		width: 100%;
		height: 120rpx;
		padding: 20rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		font-size: 28rpx;
		box-sizing: border-box;
		resize: none;
	}
	
	.select-value {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		padding: 0 20rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		font-size: 28rpx;
	}
	
	.address-input {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		padding: 0 20rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		font-size: 28rpx;
	}
	
	.placeholder {
		color: #999;
	}
	
	.tip-container {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.tip-title {
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.tip-content {
		display: flex;
		flex-direction: column;
		gap: 15rpx;
		
		text {
			font-size: 26rpx;
			color: #666;
			line-height: 1.5;
		}
	}
	
	.bottom-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #fff;
		border-top: 1rpx solid #f0f0f0;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}
	
	.btn-save {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #007AFF;
		color: #fff;
		border-radius: 40rpx;
		font-size: 32rpx;
		border: none;
	}
</style>