soc_app/src/components/list.vue

<template>
    <div class="resumption" ref="container">
        <van-cell-group>
           <van-field v-model="fileUrl" label="文件地址" placeholder="请输入文件地址" />
           <van-field v-model="type" label="文件名称" placeholder="请输入文件名" />
        </van-cell-group>
        <van-button type="default" @click="openFilePreview">文件预览</van-button>

        <van-button type="primary" @click="useNFC">NFC读取</van-button>
        <van-button type="warning" @click="useCamera(1)">调用相机</van-button>
        <van-button type="danger" @click="useCamera(2)">调用相册</van-button>
    </div>
  </template>
  
  <script>
  import NavBar from '@/components/NavBar';
  import {mapGetters} from "vuex";
  import dayjs from "dayjs";
  export default {
    name: 'resumption',
    components:{NavBar},
    data(){
      return{
        //绑定的日期
        fileUrl:"",
        fileName:null,
        result:null,
        date:'',
        show:false,
        //设置浮动的容器
        container: null,
        //配置子页面路径
        path:'/lz-edit',
  
      }
    },
    created() {
    },
    mounted() {
      window.openNFCScanCallBack = this.openNFCScanCallBack;
      window.openCameraCallBack = this.openCameraCallBack;
    },
    computed:{
    },
    methods:{  
      useCamera(actionType){
          let parms = {};
          if(actionType){
            parms.actionType = actionType;
          }
          let system = this.isAndroidOrIos();
          if(system === 1){
            //android
            // 判断当前环境是是否存在 js桥 'sap'
            const hasSap = window.hasOwnProperty('sap');
            if (hasSap) {
              // 判断是否存在方法 ?preview
              const fun = sap.hasOwnProperty('openCamera');
              if (fun) {
                sap.openCamera(JSON.stringify(parms));
              }
            }
          }

          if(system === 2){
            //ios
            // 判断 ios是否存在方法 preview
            const preview = window.webkit.messageHandlers.hasOwnProperty('openCamera')
            if (preview) {
              window.webkit.messageHandlers.openCamera.postMessage(JSON.stringify(parms))
            }
          }
      },
      openCameraCallBack(data){
        alert(data);
      },
      useNFC(){
        let system = this.isAndroidOrIos();
        const parms = {
            "iOS_SessionType":"0"
        };
        if(system === 1){
          //android
          // 判断当前环境是是否存在 js桥 'sap'
          const hasSap = window.hasOwnProperty('sap');
          if (hasSap) {
            // 判断是否存在方法 ?preview
            const fun = sap.hasOwnProperty('openNFCScan');
            if (fun) {
              sap.openNFCScan(JSON.stringify(parms));
            }
          }
        }

        if(system === 2){
          //ios
          // 判断 ios是否存在方法 preview
          const fun = window.webkit.messageHandlers.hasOwnProperty('openNFCScan')
          if (fun) {
            window.webkit.messageHandlers.openNFCScan.postMessage(JSON.stringify(parms))
          }
        }
      },
      openNFCScanCallBack(data){
        alert(data);
      },
      openFilePreview(){
        let system = this.isAndroidOrIos;
        const parms = {
            "url":this.fileUrl,
            "name":this.fileName
        };
        if(system === 1){
          //android
          // 判断当前环境是是否存在 js桥 'sap'
          const hasSap = window.hasOwnProperty('sap');
          if (hasSap) {
            // 判断是否存在方法 ?preview
            const fun = sap.hasOwnProperty('preview');
            if (fun) {
              sap.preview(JSON.stringify(parms));
            }
          }
        }

        if(system === 2){
          //ios
          // 判断 ios是否存在方法 preview
          const fun = window.webkit.messageHandlers.hasOwnProperty('preview')
          if (fun) {
            window.webkit.messageHandlers.preview.postMessage(JSON.stringify(parms))
          }
        }
      },
      isAndroidOrIos(){
        const urls = navigator.userAgent;
        let isAndroid = urls.indexOf('Android') > -1 || urls.indexOf('Linux') > -1;
        let isIos = !!urls.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        if(isAndroid){
          return 1;
        }
        if(isIos){
          return 2;
        }
      },
    }
  }
  </script>
  <style lang="scss">
 
  </style>