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

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

  <u-modal
    :show="controlStore.modal.show"
    title=""
    cancelText="退出应用"
    confirmText="确认"
    :zoom="false"
    :showConfirmButton="true"
    :showCancelButton="true"
    :closeOnClickOverlay="true"
    @confirm="controlStore.modalConfirm()"
    @cancel="controlStore.modalCancel()"
    @close="controlStore.modalClose()"
  >
    <view class="slot-content">
      <u-subsection class="mb20" :list="controlStore.subsection.list" :current="controlStore.subsection.value" @change="controlStore.sectionChange"></u-subsection>

      <view v-if="controlStore.subsection.value == 0">
        <view class="mb10 required">服务器地址</view>
        <view class="mb20">
          <u-input v-model="controlStore.form.linkUrl" placeholder="服务器地址（必填）" border="bottom" style="padding: 6px 0px" />
        </view>

        <view class="mb10">服务器端口</view>
        <view class="mb20">
          <u-input v-model="controlStore.form.port" placeholder="服务器端口（非必填）" border="bottom" style="padding: 6px 0px" />
        </view>
      </view>

      <view v-if="controlStore.subsection.value == 1">
        <view class="mb10">绑定门禁</view>
        <view>
          <u-input
            v-model="controlStore.form.doorName"
            placeholder="门禁（必选）"
            suffixIcon="arrow-right"
            suffixIconStyle="color: #909399"
            border="none"
            disabledColor="transparent"
            disabled
            @click="controlStore.handlePicker('绑定门禁')"
          />
        </view>
      </view>
    </view>
  </u-modal>

  <u-picker
    :show="controlStore.picker.show"
    :columns="controlStore.picker.list"
    :title="'请选择' + controlStore.picker.title"
    keyName="name"
    visibleItemCount="6"
    :defaultIndex="[controlStore.picker.defaultIndex]"
    :closeOnClickOverlay="true"
    @close="controlStore.picker.show = false"
    @cancel="controlStore.picker.show = false"
    @confirm="controlStore.pickerConfirm"
  ></u-picker>
</template>
<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onReady, onHide, onLaunch, onUnload, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject, nextTick, watch } from "vue";
/*----------------------------------接口引入-----------------------------------*/
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { controlStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
const controlStore = controlStores();
/*----------------------------------公共变量-----------------------------------*/
const state = reactive({
  webviewStyles: {
    width: "100%",
    height: "100%",
  },
});
const { webviewStyles } = toRefs(state);

// 初始化
function init() {
  controlStore.pageFunction = ["门禁"];
  controlStore.initCamera();
  controlStore.initNfc();
  controlStore.initData();

  controlStore.handleChildren({
    funcName: "初始化数据",
    data: JSON.stringify(controlStore.form),
  });
}

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

onLoad((options) => {
  setTimeout(() => {
    init();
  }, 500);
});

onShow(() => {});

onUnload(() => {});
</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;
    }
    .slot-content {
      font-size: 16px;
      width: 100%;
    }
  }
}
</style>