sfms3.0-uniapp/src/mycomponents/scan/winComScan.vue

<!--扫描组件-->
<template>
  <view>
    <view class="pop_tab">
      <view class="tab_info">
        <view class="conbox">
          <textarea inputmode="none" v-model="scanMsg" trim="all" maxlength="1000" style="margin-left: 5px; width: 90%" :focus="boxfocus" :placeholder="placeholderValue" @focus="getfocus" @blur="losefocus" @input="handelScanMsg" :cursor="cursorIndex"></textarea>
        </view>

        <view class="uni-flex uni-row space-between u-col-center">
          <view class="uni-flex">
            <button class="clean_scan_btn" @click="clearScanValue()">清空</button>
            <button class="scan_btn" @click="clickScanMsg()">扫描</button>
          </view>
        </view>
      </view>

      <view style="width: 100%">
        <view style="width: 100%" v-if="scanList.length > 0 && isShowHistory">
          <view class="uni-flex uni-row space-between u-col-center">
            <view class="" style="padding: 10rpx"> 历史记录 </view>
            <view class="" style="padding-right: 10rpx">
              <u-icon :name="expendIcon" size="35rpx" @click="expands()"></u-icon>
            </view>
          </view>
          <u-line class="line_color" style="padding-top: 10rpx; padding-bottom: 20rpx"></u-line>
          <scroll-view scroll-y="true" class="scroll-view" v-if="expand && scanList.length > 0" style="height: 70px">
            <view class="uni-flex u-col" v-for="(item, index) in scanList" :key="index">
              <view style="width: 100%; max-height: 100px">
                <view class="uni-flex u-row space-between u-col-center" @click="showItem(item)">
                  <view class="text_ellipsis" style="padding: 15rpx">
                    {{ item }}
                  </view>
                  <view class="">
                    <u-icon name="arrow-right"></u-icon>
                  </view>
                </view>
                <u-line class="line_color"></u-line>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
    <com-message ref="comMessageRef" />
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, onMounted, nextTick, watch } from 'vue'
import { getLabelInfo } from '../../common/label.js'

const props = defineProps({
  placeholder: {
    type: String,
    default: '请扫描标签'
  },
  clearResult: {
    type: Boolean,
    default: true
  },
  boxFocus: {
    type: Boolean,
    default: true
  },
  isShowHistory: {
    type: Boolean,
    default: true
  },
  headerType: {
    type: String,
    default: 'HPQ' // HLB   HMQ   HCQ HPQ
  }
})

const scanMsg = ref('')
const boxfocus = ref(false)
const placeholderValue = ref('')
const scanResult = ref({})
const scanList = ref([])
const expand = ref(true)
const expendIcon = ref('arrow-down')
const cursorIndex = ref(0)
const comMessageRef = ref('')
placeholderValue.value = `请扫描${props.placeholder}`
onMounted(() => {
  boxfocus.value = true
  // uni.hideKeyboard()

  // // #ifdef H5
  // if (document.querySelector('textarea') != null) {
  //   document.querySelector('textarea').setAttribute('inputmode', 'none')
  // }
  // // #endif
  // hide()
  // document.querySelector('textarea').setAttribute('inputmode', 'none')
})
// 监视属性
watch(
  () => props.placeholder,
  (val) => {
    placeholderValue.value = `请扫描${val}`
  }
)
const hide = () => {
  // #ifdef APP-PLUS
  // 只是解决软键盘的闪现
  const interval = setInterval(function () {
    uni.hideKeyboard() // 隐藏软键盘
  }, 5)
  setTimeout(() => {
    clearInterval(interval)
  }, 1000)
  // #endif
}
const getValue = () => {
  return scanMsg.value
}
const setValue = (val) => {
  scanMsg.value = val
}
const clearScanValue = () => {
  scanMsg.value = ''
  getfocus()
}
const clickScanMsg = () => {
  scanMsg.value += '\n'
  handelScanMsg()
}
const handelScanMsg = () => {
  // 点击了回车
  const index = scanMsg.value.indexOf('\n')
  if (index >= 0) {
    // that.scanMsg = 'HPQ;V1.0;ICE115F11161AG;PP20230427000027;B20230427002;Q50';
    setTimeout(() => {
      losefocus()
      const content = scanMsg.value.trim()
      if (content == '') {
        getfocus()
        comMessageRef.value.showErrorMessage('扫描内容为空,请重新扫描', (res) => {
          if (res) {
            scanMsg.value = ''
            getfocus()
          }
        })
        return
      }
      if (props.isShowHistory) {
        scanList.value.unshift(content)
      }
      getLabelInfo(content, props.headerType, (callback) => {
        // uni.hideLoading();
        const scanResult = callback
        if (scanResult.success) {
          clear()
          // that.getfocus();//不能自动获取焦点
          emit('getResult', scanResult)
        } else {
          clear()
          comMessageRef.value.showErrorMessage(scanResult.message, (res) => {
            if (res) {
              getfocus()
            }
          })
        }
      })
    }, 500)
  }
}
const getfocus = () => {
  nextTick((r) => {
    boxfocus.value = true
  })
  hide()
}
const losefocus = () => {
  nextTick((r) => {
    boxfocus.value = false
  })
}
const clear = () => {
  cursorIndex.value = 0
  scanMsg.value = ''
}
const iconClick = (type) => {
  emit('clearResult', scanMsg.value)
}
const expands = () => {
  expand.value = !expand.value
  expendIcon.value = expand.value == true ? 'arrow-down' : 'arrow-up'
}
const scanClick = () => {
  handelScanMsg()
}
const cancelClick = () => {
  clear()
  getfocus()
}
const showItem = (item) => {
  comMessageRef.value.showErrorMessage(item, (res) => {
    if (res) {
    }
  })
}
const scanQRCode = () => {
  uni.scanCode({
    onlyFromCamera: true,
    success: (res) => {
      scanMsg.value = res.result
      emit('getResult', res.result)
      // console.log('扫描二维码成功,结果:' + res.result);
    },
    fail: (res) => {
      showItem(`扫描出现错误:${res.result}`)
      console.log(`扫描出现错误:${res.result}`)
    }
  })
}

// 传递给父类
const emit = defineEmits(['getResult', 'clearResult'])
defineExpose({
  getfocus,
  handelScanMsg,
  clearScanValue,
  clear,
  clickScanMsg,
  losefocus
})
</script>
<script module="textarea" lang="renderjs">
// onMounted(() => {
// 	document.querySelector('textarea').setAttribute('inputmode', 'none')
// })
//
</script>

<style scoped lang="scss"></style>