quick-unpack.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <view class="container">
  3. <view class="main-content">
  4. <view class="input-group">
  5. <u-input v-model="trackingNumber" placeholder="扫描/输入物流单号" border="surround" />
  6. <u-button type="primary" @click="confirmTrackingNumber" text="确定" />
  7. </view>
  8. </view>
  9. <view class="fixed-bottom">
  10. <u-button size="large" type="success" @click="scanCode" text="扫码" class="scan-button" />
  11. </view>
  12. </view>
  13. </template>
  14. <script setup>
  15. import {
  16. ref
  17. } from 'vue';
  18. const trackingNumber = ref('');
  19. function confirmTrackingNumber() {
  20. // Logic to confirm tracking number
  21. }
  22. function scanCode() {
  23. uni.scanCode({
  24. success: (res) => {
  25. trackingNumber.value = res.result;
  26. // 处理扫码结果
  27. console.log('扫码结果:', res.result);
  28. },
  29. fail: (err) => {
  30. console.error('扫码失败:', err);
  31. }
  32. });
  33. }
  34. </script>
  35. <style lang="scss" scoped>
  36. .main-content {
  37. padding: 20px;
  38. gap: 20px;
  39. }
  40. .input-group {
  41. display: flex;
  42. gap: 10px;
  43. margin-bottom: 30rpx;
  44. :deep(.u-button) {
  45. width: 160rpx
  46. }
  47. .u-input {
  48. background-color: #fff;
  49. }
  50. }
  51. </style>