usky-web-pad/src/pages/door/index.vue

<template>
  <web-view
    v-show="!controlStore.popup.show"
    ref="faceView"
    id="faceView"
    class="faceView"
    src="/static/face/door.html"
    bindmessage="receiveMessage"
    :webview-styles="webviewStyles"
    @message="onMessage"
  >
  </web-view>

  <u-popup :show="controlStore.popup.show" bgColor="#474747" :zIndex="10074">
    <oaPassBody :show="controlStore.popup.show" @change="change" @close="close"></oaPassBody>
  </u-popup>
</template>
<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import config from "@/config";
import { onLoad, onShow, onReady, onHide, onLaunch, onUnload, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject, nextTick, watch } from "vue";
/*----------------------------------接口引入-----------------------------------*/
/*----------------------------------组件引入-----------------------------------*/
import oaPassBody from "@/components/oa-passBody/index";
/*----------------------------------store引入-----------------------------------*/
import { controlStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
const { proxy } = getCurrentInstance();
const controlStore = controlStores();
/*----------------------------------公共变量-----------------------------------*/
const state = reactive({
  version: computed(() => {
    return config.appInfo.version;
  }),
  webviewStyles: {
    width: "100%",
    height: "100%",
  },
});
const { version, webviewStyles } = toRefs(state);

// 初始化
function init() {
  controlStore.initCamera(); //初始化摄像头
  // controlStore.initNfc();//初始化NFC
  controlStore.initData(); //初始化数据
  controlStore.openInterval("door"); //开启门禁数据定时任务
}

// 密码开门组件确认事件
function change(event) {
  if (event == controlStore.form.door.password) {
    controlStore.popup.show = false;
    controlStore.analysisData({ funcName: "点击开门" });
  } else {
    controlStore.popup.show = false;
    proxy.$modal.msg("密码错误");
  }
}

// 密码开门组件关闭事件
function close(event) {
  controlStore.popup.show = event;
}

/**
 * @接收子页面传过来的值
 */
function onMessage(e) {
  controlStore.analysisData(e.detail.data[0]);
}
// #ifdef H5
window.onmessage = function (event) {
  controlStore.analysisData(event.data);
};
// #endif

onLoad((options) => {});

onShow(() => {
  init();
});

onHide(() => {
  controlStore.clearInterval("door"); //关闭门禁数据定时任务
});

onUnload(() => {
  controlStore.clearInterval("door"); //关闭门禁数据定时任务
});
</script>
<style>
.faceView {
  width: 100% !important;
  height: 100% !important;
}

iframe {
  width: 100% !important;
  height: 100% !important;
  border-width: 0;
}
</style>
<style lang="scss" scoped>
:deep() {
  .u-modal {
    width: 20rem !important;

    &__title {
      font-size: 18px !important;
    }
    &__selector-item {
      color: black;
    }

    .slot-content {
      font-size: 16px;
      width: 100%;
    }
  }
}
</style>