shunfengche-sfd/my/setting/addCar.vue

<template>
	<view class="padding margin" style="background: #fff; border-radius: 16rpx; width: calc(100% - 60rpx);">
		<u-form :model="form" ref="uForm" label-width="160rpx">
			<!-- 车品牌 -->
			<u-form-item label="车品牌" :required="true">
				<u-input v-model="form.carBrand" placeholder="请输入车品牌" />
				<view v-if="errors.carBrand" class="error-tip">车品牌为必填项</view>
			</u-form-item>
		
			<!-- 车牌号 -->
			<u-form-item label="车牌号" :required="true">
				<u-input v-model="form.carPlate" placeholder="请输入车牌号" />
				<view v-if="errors.carPlate" class="error-tip">车牌号为必填项</view>
			</u-form-item>
		
			<!-- 颜色 -->
			<u-form-item label="颜色" :required="true">
				<u-input v-model="form.carColor" placeholder="请输入颜色" />
				<view v-if="errors.carColor" class="error-tip">颜色为必填项</view>
			</u-form-item>
		
			<!-- 座位数 -->
			<u-form-item label="座位数" :required="true">
				<u-input v-model="form.seatNum" placeholder="请输入座位数" />
				<view v-if="errors.seatNum" class="error-tip">座位数为必填项</view>
			</u-form-item>
		
			<!-- 上传图片 -->
			<u-form-item label="上传图片" :required="true">
				<u-upload
					:action="uploadAction"
					:file-list="fileList"
					@on-success="handleUploadSuccess"
					@on-error="handleUploadError"
					:max-count="1"
					:multiple="false"
				></u-upload>
				<view v-if="errors.carPhoto" class="error-tip">请上传车辆图片</view>
			</u-form-item>
		</u-form>
		
		<!-- 提交按钮 -->
		<view class="submit-button">
			<u-button type="primary" @click="submitForm">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据
				form: {
					carId: '', // 车辆ID（用于区分新增和编辑）
					carBrand: '', // 车品牌
					carPlate: '', // 车牌号
					carColor: '', // 颜色
					seatNum: '', // 座位数
					carPhoto: '', // 车辆图片
				},
				// 上传组件配置
				uploadAction: 'http://192.168.50.122:8179/sqx_fast/alioss/upload', // 上传接口地址
				fileList: [], // 已上传的文件列表
				// 错误提示
				errors: {
					carBrand: false,
					carPlate: false,
					carColor: false,
					seatNum: false,
					carPhoto: false, // 新增图片必填错误提示
				},
			};
		},
		onLoad(options) {
			// 如果传入了 item，则进入编辑模式
			if (options.item) {
				const item = JSON.parse(decodeURIComponent(options.item)); // 解析 item
				this.form = { ...item }; // 填充表单数据
				this.fileList = item.carPhoto ? [{ url: item.carPhoto, status: 'success', name: 'carPhoto' }] : [];
				console.log(this.fileList, 'this.fileList');
			}
		},
		methods: {
			// 上传成功回调
			handleUploadSuccess(response) {
				console.log('上传成功', response.data);
				// 将上传成功的文件添加到 fileList
				this.form.carPhoto = response.data; // 保存图片 URL
				this.fileList = response.data
			},
			// 上传失败回调
			handleUploadError(error) {
				console.error('上传失败', error);
				uni.showToast({
					title: '上传失败，请重试',
					icon: 'none',
				});
			},
			// 表单验证
			validateForm() {
				let isValid = true;
				// 重置错误提示
				this.errors = {
					carBrand: false,
					carPlate: false,
					carColor: false,
					seatNum: false,
					carPhoto: false,
				};
				// 检查每个字段是否为空
				if (!this.form.carBrand) {
					this.errors.carBrand = true;
					isValid = false;
				}
				if (!this.form.carPlate) {
					this.errors.carPlate = true;
					isValid = false;
				}
				if (!this.form.carColor) {
					this.errors.carColor = true;
					isValid = false;
				}
				if (!this.form.seatNum) {
					this.errors.seatNum = true;
					isValid = false;
				}
				// 检查是否上传了图片
				if (this.fileList.length === 0) {
					this.errors.carPhoto = true;
					isValid = false;
				}
				return isValid;
			},
			// 提交表单
			submitForm() {
				// 表单验证
				if (!this.validateForm()) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none',
					});
					return;
				}

				// 根据 id 调用不同的接口
				if (this.form.carId) {
					this.updateCar();
				} else {
					this.insertCar();
				}
			},
			// 新增车辆
			insertCar() {
				this.$Request.postT("/app/car/insertCar", this.form).then(res => {
					if (res.code === 0) {
						uni.showToast({
							title: '新增成功',
							icon: 'success',
						});
						uni.navigateBack(); // 返回上一页
					}
				});
			},
			// 编辑车辆
			updateCar() {
				this.$Request.postT("/app/car/updateCar", this.form).then(res => {
					if (res.code === 0) {
						uni.showToast({
							title: '编辑成功',
							icon: 'success',
						});
						uni.navigateBack(); // 返回上一页
					}
				});
			},
		},
	};
</script>

<style scoped>
	.error-tip {
		color: red;
		font-size: 12px;
		margin-top: 4px;
	}
</style>