ebike-ui/ebike-user/pages/user/scan/inputcode.vue

<template>
  <div
    style="
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      background: white;
    "
  >
    <div class="divInfo">
      <div class="divTitle">请输入车辆二维码下方6位编号开锁</div>
      <div>
        <input
          :focus="focus"
          @input="changeInput"
          type="number"
          maxlength="6"
          style="height: 0; width: 0"
        />
      </div>
      <div class="divImgP">
        <image class="divImg" :src="`${imgPath}static/userui/scan/bike.png`" />
      </div>
      <div class="divData">
        <div
          class="divDataTab"
          v-for="(item, index) in inputData"
          :key="index"
          @click="clickTab"
        >
          {{ item }}
        </div>
      </div>

      <div class="divBottom">
        <image
          style="width: 60px; height: 60px"
          :src="`${imgPath}static/userui/scan/light.png`"
        />
        <div style="font-size: 12px; color: gray" @click="onTorch">
          轻触点亮
        </div>
        <div
          :class="(btnDis ? 'divBtnDis ' : '') + 'divBtn'"
          @click="createRide"
        >
          确认
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {
  showModelMessage,
  getUrlParams,
  jkcBaseDecode,
} from "@/utils/tools.js";
import { callOrdereApi } from "@/utils/api.js";
import config from "@/utils/config";
import { addOrder } from "@/utils/usermap.js";

const imgPath = config.imgPath;
const len = 6;
const oUser = JSON.parse(jkcBaseDecode(uni.getStorageSync("wechat_user")));
const inputData = ref(new Array(len).fill(""));
const focus = ref(true);
const btnDis = ref(true);
let data = null;

function changeInput(e) {
  const { value } = e.detail;
  const arrVal = value.split("");
  const arrData = [];
  for (let i = 0; i < len; i++) {
    arrData[i] = arrVal[i] || "";
  }
  data = value;
  inputData.value = arrData;
  if (arrVal.length == 6) {
    btnDis.value = false;
  }
}

function clickTab() {
  focus.value = true;
}

// 打开闪光灯
function onTorch() {
  try {
    var os = plus.os.name;
    if ("iOS" == os) {
      // 获取iOS设备的默认摄像头设备
      var device = plus.ios.invoke(
        "AVCaptureDevice",
        "defaultDeviceWithMediaType:",
        "vide"
      );
      // 锁定设备配置
      plus.ios.invoke(device, "lockForConfiguration:", null);
      // 设置手电筒模式为打开
      plus.ios.invoke(device, "setTorchMode:", 1);
      // 设置闪光灯模式为打开
      plus.ios.invoke(device, "setFlashMode:", 1);
      // 解锁设备配置
      plus.ios.invoke(device, "unlockForConfiguration");
    } else {
      // 获取安卓系统的主Activity
      var main = plus.android.runtimeMainActivity();
      // 获取摄像头服务
      var camera = main.getSystemService("camera");
      // 获取摄像头ID列表
      var ids = plus.android.invoke(camera, "getCameraIdList");
      for (var i = 0; i < ids.length; i++) {
        // 获取摄像头特性
        var c = plus.android.invoke(camera, "getCameraCharacteristics", ids[i]);
        // 检查闪光灯是否可用
        var available = plus.android.invoke(
          c,
          "get",
          plus.android.getAttribute(c, "FLASH_INFO_AVAILABLE")
        );
        // 检查摄像头是否为后置摄像头
        var facing = plus.android.invoke(
          c,
          "get",
          plus.android.getAttribute(c, "LENS_FACING")
        );
        if (null != facing && 1 == facing) {
          // 打开后置摄像头的手电筒
          plus.android.invoke(camera, "setTorchMode", ids[i], true);
        }
      }
    }
  } catch (e) {
    console.error("error @onTorch!!", e);
  }
}

//订单
function createRide() {
  addOrder(data, (res) => {});
}
</script>

<style scoped>
.divInfo {
  text-align: center;
}

.divTitle {
  margin-top: 40px;
  font-size: 14px;
  color: #000;
  font-weight: bold;
}

.divImgP {
  position: absolute;
  left: 0px;
  right: 0px;
  height: 120px;
  top: 60px;
  background: white;
  z-index: 100000;
  display: flex;
  justify-content: center;
}

.divImg {
  width: 220px;
  height: 100px;
  margin: 20px 0px;
}

.divData {
  display: flex;
  justify-content: space-evenly;
  position: relative;
  top: 130px;
}

.divDataTab {
  width: 28px;
  height: 40px;
  border: 1px solid #80808038;
  border-radius: 5px;
  background: #f5f2f2b8;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.divBottom {
  position: relative;
  margin-top: 150px;
  text-align: center;
}

.divBtnDis {
  pointer-events: none;
  background: #b9b7b7 !important;
  opacity: 0.3;
}

.divBtn {
  background: #61d246;
  margin-top: 10px;
  line-height: 35px;
  border-radius: 5px;
  color: white;
}
</style>