iot-wap/dist/wap/assets/Index3-9e732855.js

import { d as defineComponent, r as ref, a as computed, b as createElementBlock, e as createBaseVNode, c as createVNode, f as withCtx, k as createBlock, B as unref, C as createCommentVNode, j as openBlock, s as createTextVNode, _ as _export_sfc } from "./index-5e4623ce.js";
import { B as Button } from "./index-b1054607.js";
import { s as showNotify, F as Fi, k as ki } from "./vue-qrcode-reader-d831402f.js";
import { I as Icon } from "./index-487cde8c.js";
import "./use-route-726f0d0b.js";
import "./index-217c49a0.js";
import "./mount-component-2b0f7b23.js";
import "./use-scope-id-0b5b8615.js";
import "./index-eef3af38.js";
import "./on-popup-reopen-c5ca1603.js";
const _hoisted_1 = {
  key: 0,
  style: { "height": "100vh", "width": "100vw", "display": "flex", "flex-direction": "column", "overflow": "hidden" }
};
const _hoisted_2 = { style: { "padding": "10px 16px", "line-height": "0", "align-items": "center", "display": "flex", "justify-content": "space-between" } };
const _hoisted_3 = { style: { "flex-grow": "1", "border-top": "1px solid #eee", "box-sizing": "border-box" } };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "Index3",
  emits: ["success"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const visiable = ref(true);
    const open = () => {
      visiable.value = true;
    };
    const stop = () => {
      visiable.value = false;
    };
    const onClose = () => {
      stop();
    };
    const emit = __emit;
    const onScanPicture = () => {
      const inputNode = document.querySelector("input[name]");
      inputNode.click();
      console.log(inputNode);
    };
    const result = ref("");
    function onDetect(detectedCodes) {
      console.log(detectedCodes);
      result.value = JSON.stringify(detectedCodes.map((code) => code.rawValue));
      emit("success", result.value);
      stop();
    }
    const selectedConstraints = ref({ facingMode: "environment" });
    const defaultConstraintOptions = [
      { label: "rear camera", constraints: { facingMode: "environment" } },
      { label: "front camera", constraints: { facingMode: "user" } }
    ];
    const constraintOptions = ref(defaultConstraintOptions);
    async function onCameraReady() {
      const devices = await navigator.mediaDevices.enumerateDevices();
      const videoDevices = devices.filter(({ kind }) => kind === "videoinput");
      constraintOptions.value = [
        ...defaultConstraintOptions,
        ...videoDevices.map(({ deviceId, label }) => ({
          label: `${label} (ID: ${deviceId})`,
          constraints: { deviceId }
        }))
      ];
      error.value = "";
    }
    function paintOutline(detectedCodes, ctx) {
      for (const detectedCode of detectedCodes) {
        const [firstPoint, ...otherPoints] = detectedCode.cornerPoints;
        ctx.strokeStyle = "red";
        ctx.beginPath();
        ctx.moveTo(firstPoint.x, firstPoint.y);
        for (const { x, y } of otherPoints) {
          ctx.lineTo(x, y);
        }
        ctx.lineTo(firstPoint.x, firstPoint.y);
        ctx.closePath();
        ctx.stroke();
      }
    }
    function paintBoundingBox(detectedCodes, ctx) {
      for (const detectedCode of detectedCodes) {
        const {
          boundingBox: { x, y, width, height }
        } = detectedCode;
        ctx.lineWidth = 2;
        ctx.strokeStyle = "#007bff";
        ctx.strokeRect(x, y, width, height);
      }
    }
    function paintCenterText(detectedCodes, ctx) {
      for (const detectedCode of detectedCodes) {
        const { boundingBox, rawValue } = detectedCode;
        const centerX = boundingBox.x + boundingBox.width / 2;
        const centerY = boundingBox.y + boundingBox.height / 2;
        const fontSize = Math.max(12, 50 * boundingBox.width / ctx.canvas.width);
        ctx.font = `bold ${fontSize}px sans-serif`;
        ctx.textAlign = "center";
        ctx.lineWidth = 3;
        ctx.strokeStyle = "#35495e";
        ctx.strokeText(detectedCode.rawValue, centerX, centerY);
        ctx.fillStyle = "#5cb984";
        ctx.fillText(rawValue, centerX, centerY);
      }
    }
    const trackFunctionOptions = [
      { text: "nothing (default)", value: void 0 },
      { text: "outline", value: paintOutline },
      { text: "centered text", value: paintCenterText },
      { text: "bounding box", value: paintBoundingBox }
    ];
    const trackFunctionSelected = ref(trackFunctionOptions[1]);
    const barcodeFormats = ref({
      aztec: false,
      code_128: false,
      code_39: false,
      code_93: false,
      codabar: false,
      databar: false,
      databar_expanded: false,
      data_matrix: false,
      dx_film_edge: false,
      ean_13: false,
      ean_8: false,
      itf: false,
      maxi_code: false,
      micro_qr_code: false,
      pdf417: false,
      qr_code: true,
      rm_qr_code: false,
      upc_a: false,
      upc_e: false,
      linear_codes: false,
      matrix_codes: false
    });
    const selectedBarcodeFormats = computed(() => {
      return Object.keys(barcodeFormats.value).filter((format) => barcodeFormats.value[format]);
    });
    const error = ref("");
    function onError(err) {
      error.value = `[${err.name}]: `;
      if (err.name === "NotAllowedError") {
        error.value += "you need to grant camera access permission";
      } else if (err.name === "NotFoundError") {
        error.value += "no camera on this device";
      } else if (err.name === "NotSupportedError") {
        error.value += "secure context required (HTTPS, localhost)";
      } else if (err.name === "NotReadableError") {
        error.value += "is the camera already in use?";
      } else if (err.name === "OverconstrainedError") {
        error.value += "installed cameras are not suitable";
      } else if (err.name === "StreamApiNotSupportedError") {
        error.value += "Stream API is not supported in this browser";
      } else if (err.name === "InsecureContextError") {
        error.value += "Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.";
      } else {
        error.value += err.message;
      }
      showNotify({ type: "danger", message: error.value });
    }
    __expose({
      open,
      stop
    });
    return (_ctx, _cache) => {
      const _component_van_button = Button;
      const _component_van_icon = Icon;
      return visiable.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
        createBaseVNode("div", _hoisted_2, [
          createBaseVNode("div", null, [
            createVNode(_component_van_button, {
              plain: "",
              icon: "photo-o",
              type: "primary",
              size: "small",
              onClick: onScanPicture
            }, {
              default: withCtx(() => _cache[0] || (_cache[0] = [
                createTextVNode("打开图片")
              ])),
              _: 1
            })
          ]),
          createBaseVNode("div", null, [
            createVNode(_component_van_icon, {
              name: "close",
              size: "30",
              onClick: onClose
            })
          ])
        ]),
        createBaseVNode("div", _hoisted_3, [
          visiable.value ? (openBlock(), createBlock(unref(Fi), {
            key: 0,
            onDetect,
            capture: null
          })) : createCommentVNode("", true),
          visiable.value ? (openBlock(), createBlock(unref(ki), {
            key: 1,
            constraints: selectedConstraints.value,
            track: trackFunctionSelected.value.value,
            formats: selectedBarcodeFormats.value,
            onError,
            onDetect,
            onCameraOn: onCameraReady
          }, null, 8, ["constraints", "track", "formats"])) : createCommentVNode("", true)
        ])
      ])) : createCommentVNode("", true);
    };
  }
});
const Index3_vue_vue_type_style_index_0_scoped_e6e53448_lang = "";
const Index3 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e6e53448"]]);
export {
  Index3 as default
};