| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- <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>
|