pms-iot-vue/src/views/pms/dingding.vue

<template>
  <div v-if="isMobileDevice&&!isDingTalk()" class="loading">跳转处理中...</div>
<!--  <a ref="myLink" :href="href" v-show="false">跳转app</a>-->
<!--  <div v-if="isMobileDevice()&&isDingTalk()" class="wxtip" id="JweixinTip">-->
<!--    <span class="wxtip-icon"></span>-->
<!--  </div>-->
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import * as LoginApi from "@/api/login";
import * as authUtil from "@/utils/auth";

const { push } = useRouter()
const route = useRoute()

// 设备检测
const isMobileDevice = (): boolean => {
  const userAgentInfo = navigator.userAgent;
  const mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod","OpenHarmony"];

  const mobileFlag = mobileAgents.some((mobileAgent) => {
    return userAgentInfo.indexOf(mobileAgent) > 0;
  });

  return mobileFlag;
}

// 判断是否是钉钉环境
const isDingTalk = (): boolean => {
  const userAgent = navigator.userAgent.toLowerCase();
  return userAgent.includes('dingtalk');
}

// 业务路由映射
const businessRoutes: Record<string, string> = {
  'generateInspect': 'InspectOrderWrite',
  'failureReport': 'BpmProcessInstanceDetail',
  'maintainOut': 'BpmProcessInstanceDetail',
  'generateOperation' :'',
  'generateMaintenance' : ''
}

const href = ref('')
const myLink = ref(null);

const clickA = () =>{
  myLink.value.click();
}

onMounted(async () => {
  const { type = '', id = '', userId='', deptId='',createTime='',orderStatus='' } = route.query
  const isValidType = Object.keys(businessRoutes).includes(type as string)
  if (isMobileDevice()) {
    if (type==='generateOperation') {
      window.location.href = 'https://iot.deepoil.cc/deepoil/#/?type=' + type+'&id='+id+'&userId='+userId+'&deptId='+deptId+'&createTime='+createTime+'&orderStatus='+orderStatus;
    }else {
      window.location.href = 'https://iot.deepoil.cc/deepoil/#/?type=' + type+'&id='+id+'&userId='+userId;
    }
    // 移动端跳转deepoil协议
    // try{
    //   const typelower = type.toLowerCase();
    //   window.location.href = `<a>deepoil://${typelower}/${id}</a>`
    // }catch (error) {
    //   alert(error.message)
    // }
    // href.value = 'deepoil://'+type+'/'+id
    // nextTick(()=>{
    //   setTimeout(clickA,1000)
    // })
  } else if (isValidType) {
    const res = await LoginApi.simpleLogin(userId)
    if (!res) {
      return
    }
    authUtil.setToken(res)
    // PC端路由跳转
    if (type === 'generateInspect') {
      push({ name:'InspectOrderWrite', params:{id} })
    }else if(type === 'failureReport') {
      push({
        name: 'BpmProcessInstanceDetail',
        query: {
          id: id
        }
      })
    } else if (type === 'generateMaintain') {
      push({ name: 'MaintainEdit', params: {id } })
    } else if (type === 'maintainOut') {
      push({
        name: 'BpmProcessInstanceDetail',
        query: {
          id: id
        }
      })
    }else if(type === 'generateOperation'){
      push({
        name: 'FillOrderInfo',
        params: { deptId,userId,createTime,id,orderStatus }
      })
    }
  } else {
    // 默认跳转
    push({ name:'Login' })
  }
})

</script>

<style scoped>
.loading {
  text-align: center;
  padding-top: 100px;
  font-size: 16px;
  color: #666;
}
.wxtip {
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
  display: block;
}

.wxtip-icon {
  width: 100%;
  height: 100%;
  background: url(@/assets/imgs/bgzz.png) center center no-repeat;
  background-size: cover; /* 新增样式，使背景图片覆盖整个元素 */
  display: block;
  position: absolute;
}

.wxtip-txt {
  margin-top: 107px;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
}
</style>