ebike-ui/ebike-maintenance/pages/common/batchscancode.vue

<template>
  <camera
    mode="scanCode"
    device-position="back"
    style="width: 100%; height: 100vh"
    @scancode="scanCode"
    :flash="flash"
    :initdone="(isInitDone = true)"
  >
    <view class="cameraUI" v-if="isInitDone">
      <image
        class="scanBox"
        :src="
          isOnlyBarCode === true
            ? imgPath + 'static/scan/BarCodeScan.png'
            : imgPath + 'static/scan/scan.png'
        "
        mode="widthFix"
      >
        <image
          class="scanEffect"
          :src="imgPath + 'static/scan/scan-effect.png'"
          mode="aspectFill"
        ></image>
      </image>
      <view class="control">
        <view
          :class="['flashLight', { flashOpen: flash === 'on' }]"
          @tap="swithFlash"
          hover-class="flashClick"
        >
          <image
            :src="
              flash === 'off'
                ? imgPath + 'static/scan/flash_close.png'
                : imgPath + 'static/scan/flash_open.png'
            "
          >
          </image>
        </view>
      </view>
    </view>
  </camera>
  <view>
    <uni-popup ref="message" type="message">
      <uni-popup-message
        type="success"
        :message="code"
        :duration="1000"
      ></uni-popup-message>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useScanCodeStore } from "@/stores/scancode.js";
import config from "@/utils/config";
import { showMessage } from "../../utils/tools";
const imgPath = config.imgPath;
import { callOperateApi } from "@/utils/api.js";
const { isOnlyBarCode } = defineProps({
  isOnlyBarCode: {
    type: Boolean,
    default: false,
  },
});

const type = ref("");
const scanType = ref("");
const isInitDone = ref(false);
const flash = ref("off");
const message = ref(null);
const code = ref(null);
let lastTime = null;

onLoad((options) => {
  if (options.type) {
    type.value = options.type;
    scanType.value = options.scanType;
  }
});

const swithFlash = () => {
  flash.value = flash.value === "off" ? "on" : "off";
  uni.vibrateShort();
};

const scancode = useScanCodeStore();
const scanCode = (res) => {
  const { result } = res.detail;
  if (scanType.value == "bjrk") {
    let componentType = "";
    let componentCode = "";
    if (type.value == "inBattery") {
      componentType = "262711452730000";
      componentCode = result;
    } else if (type.value == "inHelmet") {
      componentType = "262711452730001";
      componentCode = result;
    } else if (type.value == "inEcu") {
      componentType = "262711452730008";
      const arrCode = result.split(" ");
      const imei = arrCode[0].replace("IMEI:", "");
      const sn = arrCode[1].replace("SN:", "");
      componentCode = sn;
    }
    const param = {
      componentType,
      componentCode,
      isNew: true,
    };
    callOperateApi("ebikeComponent/validateComponentExistence", param).then(
      (res) => {
        if (res.code == 200) {
          if (res.data) {
            uni.showToast({
              icon: "error",
              title: "部件编号[" + componentCode + "]已有入库记录！",
            });
          } else {
            const now = Date.now();
            console.log("1111111111111111111", now - lastTime, result);
            if (lastTime && now - lastTime < 1000) return;
            lastTime = Date.now();
            if (!scancode.code.includes(result)) {
              code.value = result;
              scancode.addCode(result, type.value);
              message.value.open();
              uni.vibrateShort();
            } else if (now - lastTime < 2000) {
              uni.showToast({
                icon: "error",
                title: "重复扫码，请返回或扫描下一个",
              });
              uni.vibrateShort();
            }
          }
        } else {
          uni.showToast({
            icon: "error",
            title: res.message,
          });
        }
      }
    );
  } else if (scanType.value == "bjgh") {
    let componentType = "";
    let componentCode = "";
    if (type.value == "inBattery") {
      componentType = "262711452730000";
      componentCode = result[0];
    } else if (type.value == "inHelmet") {
      componentType = "262711452730001";
      componentCode = result[0];
    } else if (type.value == "inEcu") {
      componentType = "262711452730008";
      const arrCode = result.split(" ");
      const imei = arrCode[0].replace("IMEI:", "");
      const sn = arrCode[1].replace("SN:", "");
      componentCode = sn;
    }
    const param = {
      componentType,
      componentCode,
      isNew: false,
    };
    callOperateApi("ebikeComponent/validateComponentExistence", param).then(
      (res) => {
        if (res.code == 200) {
          if (res.data) {
            uni.showToast({
              icon: "error",
              title: "部件编号[" + componentCode + "]已有入库记录！",
            });
          } else {
            const now = Date.now();
            console.log("1111111111111111111", now - lastTime, result);
            if (lastTime && now - lastTime < 1000) return;
            lastTime = Date.now();
            if (!scancode.code.includes(result)) {
              code.value = result;
              scancode.addCode(result, type.value);
              message.value.open();
              uni.vibrateShort();
            } else if (now - lastTime < 2000) {
              uni.showToast({
                icon: "error",
                title: "重复扫码，请返回或扫描下一个",
              });
              uni.vibrateShort();
            }
          }
        } else {
          uni.showToast({
            icon: "error",
            title: res.message,
          });
        }
      }
    );
  } else {
    const now = Date.now();
    console.log("1111111111111111111", now - lastTime, result);
    if (lastTime && now - lastTime < 1000) return;
    lastTime = Date.now();
    if (!scancode.code.includes(result)) {
      code.value = result;
      scancode.addCode(result, type.value);
      message.value.open();
      uni.vibrateShort();
    } else if (now - lastTime < 2000) {
      uni.showToast({
        icon: "error",
        title: "重复扫码，请返回或扫描下一个",
      });
      uni.vibrateShort();
    }
  }
};
</script>

<style lang="less" scoped>
.cameraUI {
  width: 750rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .scanBox {
    width: 530rpx;
    display: block;
    position: relative;

    .scanEffect {
      position: absolute;
      left: 50%;
      top: 5%;
      width: 595rpx;
      height: 86rpx;
      transform: translateX(-50%);
      z-index: 1;
      animation: scan 1.5s ease-in-out infinite;
    }
  }

  .BarCodeScanEffect {
    top: 30%;
    animation: BarCodeScan 1.5s ease-in-out infinite;
  }

  @keyframes scan {
    0% {
      top: 5%;
      opacity: 0;
    }

    20% {
      opacity: 1;
    }

    80% {
      opacity: 1;
    }

    100% {
      top: 70%;
      opacity: 0;
    }
  }

  .control {
    margin-top: 80rpx;
    height: 110rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .flashLight {
      width: 90rpx;
      height: 90rpx;
      background: rgba(74, 74, 74, 0.8);
      box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 60%;
        height: 60%;
      }
    }

    .flashOpen {
      backdrop-filter: blur(6px);
      background: rgba(255, 255, 255, 0.5);
    }

    .flashClick {
      transition: all 0.1s ease-in-out 0s;
      transform: scale(1.2);
    }
  }
}
</style>