weight-modify.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <template>
  2. <view class="container">
  3. <u-form ref="formRef" :model="form" :rules="rules" label-width="85px" label-position="top">
  4. <!-- 物流单号输入 -->
  5. <u-form-item label="">
  6. <u-input v-model="form.trackingNumber" placeholder="扫描/输入物流单号" border="surround"
  7. name="trackingNumber" />
  8. </u-form-item>
  9. <!-- 重量输入 -->
  10. <u-form-item label="重量(kg)">
  11. <u-input v-model="form.weight" placeholder="请输入重量" border="surround" name="weight" type="number" />
  12. </u-form-item>
  13. <!-- 图片上传 -->
  14. <u-form-item label="上传图片">
  15. <u-upload v-model="form.images" action="your-upload-url" name="images" :limit="1"
  16. :max-size="1024 * 1024">
  17. </u-upload>
  18. </u-form-item>
  19. </u-form>
  20. <!-- 底部按钮 -->
  21. <view class="fixed-bottom">
  22. <u-button size="large" type="warning" @click="scanCode" text="扫码" class="scan-button" />
  23. <u-button size="large" type="success" @click="submitForm" text="提交" class="submit-button" />
  24. </view>
  25. </view>
  26. </template>
  27. <script setup>
  28. import {
  29. ref
  30. } from 'vue';
  31. const formRef = ref(null);
  32. const form = ref({
  33. trackingNumber: '',
  34. weight: '',
  35. images: []
  36. });
  37. const rules = {
  38. trackingNumber: [{
  39. required: true,
  40. message: '请输入物流单号',
  41. trigger: 'blur'
  42. }],
  43. weight: [{
  44. required: true,
  45. message: '请输入重量',
  46. trigger: 'blur'
  47. }]
  48. };
  49. function scanCode() {
  50. uni.scanCode({
  51. success: (res) => {
  52. form.value.trackingNumber = res.result;
  53. },
  54. fail: (err) => {
  55. console.error('扫码失败:', err);
  56. }
  57. });
  58. }
  59. function submitForm() {
  60. formRef.value.validate((valid) => {
  61. if (valid) {
  62. // 提交表单逻辑
  63. console.log('表单提交:', form.value);
  64. } else {
  65. console.error('表单验证失败');
  66. }
  67. });
  68. }
  69. </script>
  70. <style>
  71. page {
  72. background-color: #ffffff;
  73. }
  74. </style>
  75. <style scoped>
  76. .container {
  77. display: flex;
  78. flex-direction: column;
  79. padding: 20px;
  80. }
  81. </style>