pet/pages/pets/add-record.vue

<template>
	<view class="add-record-container">
		<u-navbar title="添加记录" left-icon="arrow-left" @left-click="goBack"></u-navbar>
		
		<u-form :model="recordForm" ref="recordFormRef" :rules="rules" label-width="120">
			<u-card :padding="20" margin="20">
				<u-form-item label="记录类型" prop="type" required>
					<u-radio-group v-model="recordForm.type" placement="row">
						<u-radio label="日常" name="daily"></u-radio>
						<u-radio label="喂食" name="feeding"></u-radio>
						<u-radio label="健康" name="health"></u-radio>
						<u-radio label="其他" name="other"></u-radio>
					</u-radio-group>
				</u-form-item>
				
				<u-form-item label="记录日期" prop="date" required>
					<u-input v-model="recordForm.date" placeholder="请选择日期" readonly @click="showDatePicker = true"></u-input>
				</u-form-item>
				
				<u-form-item label="记录内容" prop="content" required>
					<u-textarea v-model="recordForm.content" placeholder="记录宠物的状态、行为或其他信息..." maxlength="500" :count="true"></u-textarea>
				</u-form-item>
				
				<u-form-item label="添加照片" prop="photos">
					<view class="photo-section">
						<view class="photo-list">
							<view class="photo-item" v-for="(photo, index) in recordForm.photos" :key="index">
								<image :src="photo" mode="aspectFill" @click="previewImage(photo)"></image>
								<u-icon name="close-circle-fill" color="#ff4757" size="16" @click="removePhoto(index)"></u-icon>
							</view>
							<view class="add-photo-btn" @click="choosePhotos" v-if="recordForm.photos.length < 9">
								<u-icon name="camera" size="24" color="#999"></u-icon>
								<text class="add-text">添加照片</text>
							</view>
						</view>
					</view>
				</u-form-item>
			</u-card>
		</u-form>
		
		<view class="submit-section">
			<u-button type="primary" text="保存记录" @click="submitForm" :loading="loading"></u-button>
		</view>
		
		<!-- 日期选择器 -->
		<u-datetime-picker 
			:show="showDatePicker" 
			v-model="selectedDate"
			mode="date"
			@confirm="confirmDate"
			@cancel="showDatePicker = false">
		</u-datetime-picker>
	</view>
</template>

<script>
export default {
	data() {
		return {
			petId: '',
			loading: false,
			showDatePicker: false,
			selectedDate: new Date().getTime(),
			recordForm: {
				type: 'daily',
				date: this.formatDate(new Date()),
				content: '',
				photos: []
			},
			rules: {
				type: [
					{
						required: true,
						message: '请选择记录类型',
						trigger: 'change'
					}
				],
				date: [
					{
						required: true,
						message: '请选择记录日期',
						trigger: 'blur'
					}
				],
				content: [
					{
						required: true,
						message: '请输入记录内容',
						trigger: 'blur'
					}
				]
			}
		}
	},
	onLoad(options) {
		this.petId = options.petId
	},
	methods: {
		formatDate(date) {
			return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
		},
		
		goBack() {
			uni.navigateBack()
		},
		
		confirmDate(e) {
			const date = new Date(e.value)
			this.recordForm.date = this.formatDate(date)
			this.showDatePicker = false
		},
		
		choosePhotos() {
			const remainingCount = 9 - this.recordForm.photos.length
			uni.chooseImage({
				count: remainingCount,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.recordForm.photos.push(...res.tempFilePaths)
				},
				fail: (err) => {
					console.error('选择图片失败', err)
				}
			})
		},
		
		removePhoto(index) {
			this.recordForm.photos.splice(index, 1)
		},
		
		previewImage(src) {
			uni.previewImage({
				urls: this.recordForm.photos,
				current: src
			})
		},
		
		submitForm() {
			this.$refs.recordFormRef.validate().then(valid => {
				if (valid) {
					this.saveRecord()
				}
			}).catch(errors => {
				console.log('表单验证失败', errors)
			})
		},
		
		saveRecord() {
			this.loading = true
			
			const recordData = {
				...this.recordForm,
				id: Date.now(),
				petId: this.petId,
				createTime: new Date().toISOString()
			}
			
			// 模拟保存到本地存储
			setTimeout(() => {
				try {
					let records = uni.getStorageSync('petRecords') || []
					records.unshift(recordData) // 最新记录在前
					uni.setStorageSync('petRecords', records)
					
					this.loading = false
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
					
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} catch (error) {
					this.loading = false
					uni.showToast({
						title: '保存失败',
						icon: 'error'
					})
				}
			}, 1000)
		}
	}
}
</script>

<style lang="scss" scoped>
.add-record-container {
	background-color: #f8f9fa;
	min-height: 100vh;
}

.photo-section {
	.photo-list {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		
		.photo-item {
			position: relative;
			width: 150rpx;
			height: 150rpx;
			
			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
			
			/deep/ .u-icon {
				position: absolute;
				top: -8rpx;
				right: -8rpx;
			}
		}
		
		.add-photo-btn {
			width: 150rpx;
			height: 150rpx;
			border: 2rpx dashed #ddd;
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 10rpx;
			
			.add-text {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
}

.submit-section {
	padding: 40rpx 30rpx;
}

/deep/ .u-form-item {
	margin-bottom: 30rpx;
}
</style>