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

<!--扫描组件-->
<template>
  <!-- <page-meta root-font-size="18px"></page-meta> -->
  <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" style="padding: 10px; color: #3c9cff; font-weight: bold; font-size: 15px">
            {{ customerItemCode }}
          </view>
          <view class="uni-flex">
            <button class="clean_scan_btn" @click="clearScanValue()">清空</button>
            <button class="scan_btn" @click="clickScanMsg()">扫描</button>
          </view>
        </view>
      </view>
    </view>
    <com-message ref="comMessageRef" />
  </view>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance, onMounted, nextTick, watch } from 'vue'

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 customerItemCode = ref('')
const comMessageRef = ref()
onMounted(() => {
  boxfocus.value = true
  uni.hideKeyboard()

  // #ifdef H5
  if (document.querySelector('textarea') != null) {
    document.querySelector('textarea').setAttribute('inputmode', 'none')
  }
  // #endif
  hide()
})
watch(
  () => props.placeholder,
  (val) => {
    placeholderValue.value = `请扫描${val}`
  }
)
placeholderValue.value = props.placeholder
const hide = () => {
  // #ifdef APP-PLUS
  // 只是解决软键盘的闪现
  const interval = setInterval(function () {
    uni.hideKeyboard() // 隐藏软键盘
    console.log('刷新')
  }, 5)
  setTimeout(() => {
    clearInterval(interval)
    console.log('停止刷新')
  }, 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 = () => {
  scanMsg.value.replace('\n', '')
  const index = scanMsg.value.indexOf('\n')

  // if (index >= 0) {
  setTimeout(() => {
    losefocus()
    const content = scanMsg.value.trim()
    if (content == '') {
      getfocus()
      comMessageRef.value.showErrorMessage('扫描内容为空,请重新扫描', (res) => {
        if (res) {
          scanMsg.value = ''
          getfocus()
        }
      })
      return
    }
    const items = scanMsg.value.split('*')
    customerItemCode.value = items[1]
    emit('getResult', customerItemCode.value)
  }, 500)
  // }
}
const getfocus = () => {
  nextTick((r) => {
    boxfocus.value = true
  })
  hide()
}
const losefocus = () => {
  nextTick((r) => {
    boxfocus.value = false
  })
}
const clear = () => {
  if (props.clearResult) {
    cursorIndex.value = 0
    scanMsg.value = ''
  }
}
const iconClick = (type) => {
  emit('clearResult', scanMsgk.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.showMessage(item, (res) => {
    if (res) {
      // this.$refs.modal.cancelClose();
    }
  })
}
const scanQRCode = () => {
  uni.scanCode({
    onlyFromCamera: true,
    success: (res) => {
      scanMsg.value = res.result
      emit('getResult', res.result)
    },
    fail: (res) => {
      showItem(`扫描出现错误:${res.result}`)
      console.log(`扫描出现错误:${res.result}`)
    }
  })
}

// 传递给父类
const emit = defineEmits(['clearResult', 'getResult'])
defineExpose({
  getfocus,
  losefocus
})
</script>

<script module="textarea" lang="renderjs">
export default {
	mounted() {
		document.querySelector('textarea').setAttribute('inputmode', 'none')
	},
}
</script>

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