<template>
	<view class="container">
		<u-form ref="formRef" :model="form" :rules="rules" label-width="85px" label-position="top">
			<!-- 物流单号输入 -->
			<u-form-item label="">
				<u-input v-model="form.trackingNumber" placeholder="扫描/输入物流单号" border="surround"
					name="trackingNumber" />
			</u-form-item>

			<!-- 重量输入 -->
			<u-form-item label="重量（kg）">
				<u-input v-model="form.weight" placeholder="请输入重量" border="surround" name="weight" type="number" />
			</u-form-item>

			<!-- 图片上传 -->
			<u-form-item label="上传图片">
				<u-upload v-model="form.images" action="your-upload-url" name="images" :limit="1"
					:max-size="1024 * 1024">
				</u-upload>
			</u-form-item>
		</u-form>

		<!-- 底部按钮 -->
		<view class="fixed-bottom">
			<u-button size="large" type="warning" @click="scanCode" text="扫码" class="scan-button" />
			<u-button size="large" type="success" @click="submitForm" text="提交" class="submit-button" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const formRef = ref(null);
	const form = ref({
		trackingNumber: '',
		weight: '',
		images: []
	});

	const rules = {
		trackingNumber: [{
			required: true,
			message: '请输入物流单号',
			trigger: 'blur'
		}],
		weight: [{
			required: true,
			message: '请输入重量',
			trigger: 'blur'
		}]
	};

	function scanCode() {
		uni.scanCode({
			success: (res) => {
				form.value.trackingNumber = res.result;
			},
			fail: (err) => {
				console.error('扫码失败:', err);
			}
		});
	}

	function submitForm() {
		formRef.value.validate((valid) => {
			if (valid) {
				// 提交表单逻辑
				console.log('表单提交:', form.value);
			} else {
				console.error('表单验证失败');
			}
		});
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>
<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		padding: 20px;
	}
</style>