concrete-transportation-uniapp-20250821/pages_order/staff/create.vue

<template>
	<view class="content">
		<navbar title="发布订单" leftClick @leftClick="$utils.navigateBack" />
		<view class="form-container">
			<!-- 项目名称 -->
			<view class="form-item">
				<view class="label">项目名称</view>
				<input 
					v-model="orderInfo.projectName" 
					placeholder="请输入项目名称" 
					class="input"
				/>
			</view>
			
			<!-- 工作地址 -->
			<view class="form-item">
				<view class="label">工作地址</view>
				<view class="address-input" @click="selectAddress">
					<text v-if="!orderInfo.workAddress" class="placeholder">请选择工作地址</text>
					<text v-else>{{ orderInfo.workAddress }}</text>
					<uv-icon name="map-pin" size="20" color="#007AFF"></uv-icon>
				</view>
			</view>
			
			<!-- 服务类型 -->
			<view class="form-item">
				<view class="label">服务类型</view>
				<view class="select-value" @click="selectServiceType">
					<text v-if="!orderInfo.serviceType" class="placeholder">请选择服务类型</text>
					<text v-else>{{ orderInfo.serviceType }}</text>
					<uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
				</view>
			</view>
			
			<!-- 工作时间 -->
			<view class="form-item">
				<view class="label">工作时间</view>
				<view class="time-container">
					<view class="time-item" @click="selectStartTime">
						<text v-if="!orderInfo.startTime" class="placeholder">开始时间</text>
						<text v-else>{{ orderInfo.startTime }}</text>
					</view>
					<text class="time-separator">至</text>
					<view class="time-item" @click="selectEndTime">
						<text v-if="!orderInfo.endTime" class="placeholder">结束时间</text>
						<text v-else>{{ orderInfo.endTime }}</text>
					</view>
				</view>
			</view>
			
			<!-- 混凝土方量 -->
			<view class="form-item">
				<view class="label">混凝土方量(m³)</view>
				<input 
					v-model="orderInfo.volume" 
					placeholder="请输入混凝土方量" 
					class="input"
					type="number"
				/>
			</view>
			
			<!-- 预计趟数 -->
			<view class="form-item">
				<view class="label">预计趟数</view>
				<input 
					v-model="orderInfo.tripCount" 
					placeholder="请输入预计趟数" 
					class="input"
					type="number"
				/>
			</view>
			
			<!-- 单价 -->
			<view class="form-item">
				<view class="label">单价(元/趟)</view>
				<input 
					v-model="orderInfo.unitPrice" 
					placeholder="请输入单价" 
					class="input"
					type="number"
				/>
			</view>
			
			<!-- 联系人 -->
			<view class="form-item">
				<view class="label">联系人</view>
				<input 
					v-model="orderInfo.contactName" 
					placeholder="请输入联系人姓名" 
					class="input"
				/>
			</view>
			
			<!-- 联系电话 -->
			<view class="form-item">
				<view class="label">联系电话</view>
				<input 
					v-model="orderInfo.contactPhone" 
					placeholder="请输入联系电话" 
					class="input"
					type="number"
					maxlength="11"
				/>
			</view>
			
			<!-- 备注 -->
			<view class="form-item">
				<view class="label">备注</view>
				<textarea 
					v-model="orderInfo.remark" 
					placeholder="请输入备注信息" 
					class="textarea"
					maxlength="200"
				></textarea>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="bottom-buttons">
			<button class="btn-save" @click="saveOrder">发布订单</button>
		</view>
	</view>
</template>

<script>
	import navbar from '@/components/base/navbar.vue'
	
	export default {
		name: 'StaffCreate',
		components: {
			navbar
		},
		data() {
			return {
				orderInfo: {
					projectName: '',
					workAddress: '',
					serviceType: '',
					startTime: '',
					endTime: '',
					volume: '',
					tripCount: '',
					unitPrice: '',
					contactName: '',
					contactPhone: '',
					remark: ''
				}
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '发布订单'
			});
		},
		methods: {
			selectAddress() {
				uni.chooseLocation({
					success: (res) => {
						this.orderInfo.workAddress = res.address;
					}
				});
			},
			selectServiceType() {
				uni.showActionSheet({
					itemList: ['泵车代驾', '搅拌车代驾', '车载泵代驾'],
					success: (res) => {
						const types = ['泵车代驾', '搅拌车代驾', '车载泵代驾'];
						this.orderInfo.serviceType = types[res.tapIndex];
					}
				});
			},
			selectStartTime() {
				uni.showModal({
					title: '选择开始时间',
					content: '请在日期时间选择器中选择开始时间',
					success: (res) => {
						if (res.confirm) {
							// 模拟选择时间
							const now = new Date();
							this.orderInfo.startTime = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} 08:00`;
						}
					}
				});
			},
			selectEndTime() {
				uni.showModal({
					title: '选择结束时间',
					content: '请在日期时间选择器中选择结束时间',
					success: (res) => {
						if (res.confirm) {
							// 模拟选择时间
							const now = new Date();
							this.orderInfo.endTime = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} 18:00`;
						}
					}
				});
			},
			saveOrder() {
				// 表单验证
				if (!this.orderInfo.projectName) {
					uni.showToast({ title: '请输入项目名称', icon: 'none' });
					return;
				}
				if (!this.orderInfo.workAddress) {
					uni.showToast({ title: '请选择工作地址', icon: 'none' });
					return;
				}
				if (!this.orderInfo.serviceType) {
					uni.showToast({ title: '请选择服务类型', icon: 'none' });
					return;
				}
				if (!this.orderInfo.startTime || !this.orderInfo.endTime) {
					uni.showToast({ title: '请选择工作时间', icon: 'none' });
					return;
				}
				if (!this.orderInfo.contactName) {
					uni.showToast({ title: '请输入联系人', icon: 'none' });
					return;
				}
				if (!this.orderInfo.contactPhone) {
					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;
	}
	
	.form-item {
		margin-bottom: 40rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		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;
	}
	
	.time-container {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}
	
	.time-item {
		flex: 1;
		height: 80rpx;
		padding: 0 20rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}
	
	.time-separator {
		font-size: 28rpx;
		color: #666;
	}
	
	.placeholder {
		color: #999;
	}
	
	.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>