code-storage.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <template>
  2. <view class="container">
  3. <view class="main-content">
  4. <view class="input-group">
  5. <u-input :customStyle="customStyle" :placeholder-style="placeholderStyle" v-model="form.isbn"
  6. placeholder="扫描/输入ISBN" border="surround" />
  7. <u-button :customStyle="customStyle" type="info" color="#a4adb3" @click="handleBarcode(form.isbn)"
  8. text="确定" />
  9. </view>
  10. </view>
  11. <view class="fixed-bottom">
  12. <u-button size="large" type="success" @click="scanCode" text="扫码" class="scan-button" />
  13. </view>
  14. </view>
  15. </template>
  16. <script setup>
  17. import {
  18. reactive,
  19. ref,
  20. onUnmounted
  21. } from 'vue';
  22. import {
  23. onLoad,
  24. onShow
  25. } from '@dcloudio/uni-app'
  26. const placeholderStyle = "font-size:32rpx"
  27. const customStyle = reactive({
  28. height: '90rpx'
  29. })
  30. const form = ref({
  31. "isbn": ""
  32. })
  33. let barcodeLock = false
  34. let lastBarcode = ''
  35. let lastBarcodeAt = 0
  36. const BARCODE_DEBOUNCE_MS = 2000
  37. function scanCode() {
  38. uni.scanCode({
  39. success: (res) => {
  40. form.value.isbn = res.result;
  41. handleBarcode(res.result)
  42. },
  43. fail: (err) => {
  44. uni.$u.toast('扫码失败')
  45. }
  46. });
  47. }
  48. //isbn正则校验是否符合
  49. function checkIsbn(isbn) {
  50. const isbn13Regex = /^(?:97[89]-?\d{1,5}-?\d{1,7}-?\d{1,6}-?\d)$/;
  51. if (isbn13Regex.test(isbn)) {
  52. return true;
  53. }
  54. return false;
  55. }
  56. function handleBarcode(code) {
  57. if (!code) return uni.$u.toast('请输入ISBN')
  58. const now = Date.now()
  59. if (barcodeLock) return
  60. if (code === lastBarcode && now - lastBarcodeAt < BARCODE_DEBOUNCE_MS) return
  61. // 验证ISBN格式
  62. if (!checkIsbn(code)) {
  63. return uni.$u.ttsModule.speak('不是正确的ISBN码')
  64. }
  65. barcodeLock = true
  66. uni.$u.http.post('/activation/bookActivationInfo/queryBookBasicByIsbn/' + code).then(res => {
  67. if (res.code == 200) {
  68. uni.setStorageSync('bookInfo', res.data)
  69. uni.navigateTo({
  70. url: '/pages/index/wms/code-storage-add?isbn=' + encodeURIComponent(code)
  71. })
  72. form.value.isbn = ""
  73. lastBarcode = code
  74. lastBarcodeAt = Date.now()
  75. } else {
  76. uni.$u.toast('未找到该书籍')
  77. }
  78. }).finally(() => {
  79. barcodeLock = false
  80. })
  81. }
  82. // #ifdef APP-PLUS
  83. const { unregister } = uni.$u.useEventListener((e) => {
  84. form.value.isbn = e.barcode
  85. handleBarcode(e.barcode)
  86. });
  87. // #endif
  88. onUnmounted(() => {
  89. // #ifdef APP-PLUS
  90. unregister();
  91. // #endif
  92. });
  93. </script>
  94. <style lang="scss" scoped>
  95. .main-content {
  96. padding: 20px;
  97. gap: 20px;
  98. }
  99. .input-group {
  100. display: flex;
  101. gap: 10px;
  102. margin-bottom: 30rpx;
  103. :deep(.u-button) {
  104. width: 160rpx
  105. }
  106. .u-input {
  107. background-color: #fff;
  108. }
  109. }
  110. .scan-button {
  111. width: 100%;
  112. }
  113. </style>