manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/home.vue

<template>
  <div class="w-full h-full" v-loading="isLoading">
    <el-container class="flex flex-row h-full">
      <el-header class="bg-sky-800 leading-10 flex flex-row justify-between">
        <Header></Header>
      </el-header>
      <el-main>
        <router-view v-slot="{ Component }">
          <transition name="router_animate">
            <component :is="Component" />
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import Header from '@/pages/header/header.vue';
import { nextTick, onMounted, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useStore } from '@/store/index'
import { post } from "@/utils/request";
const { userInfo } = storeToRefs(useStore());

declare var wx: any; // wx 小程序对象
declare var window: Window & { WWOpenData: any }; // 如果是 window.WWOpenData
declare var WWOpenData: any; // wx 小程序对象

const isLoading = ref(true);
const agentConfig = () => {
  var isCorpWX = true
  var ua = navigator.userAgent.toLowerCase();
  if (ua.indexOf("wxwork") > 0) {
    isCorpWX = false;
  }
  const curUrl = location.href.split("#")[0];
  post(`/wxcorp/getCorpWXConfig`, { url: curUrl, token: userInfo.value.id }).then(res => {
    wx.config({
      beta: true,
      debug: isCorpWX, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: res.data.appid, // 必填，公众号的唯一标识 
      timestamp: res.data.timestamp, // 必填，生成签名的时间戳 
      nonceStr: res.data.noncestr, // 必填，生成签名的随机串 
      signature: res.data.sign, // 必填，签名，见附录1 
      jsApiList: ['chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'previewFile', 'getLocation', 'agentConfig', 'getLocalImgData']
    });

    wx.ready(() => {
      post(`/wxcorp/getCorpWXAgentConfig`, { url: curUrl, token: userInfo.value.id }).then(res => {
        wx.agentConfig({
          corpid: res.data.corpid, // 必填，企业微信的corpid，必须与当前登录的企业一致
          agentid: res.data.agentid, // 必填，企业微信的应用id （e.g. 1000247）
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
          jsApiList: ['selectExternalContact', 'selectEnterpriseContact', 'openAppManage'], //必填，传入需要使用的接口名称
          success: function (result: any) {
            console.log(result, '请求微信成功')
            console.log(window, 'window')
            //  wx.agentConfig成功回调后，WWOpenData 才会注入到 window 对象上面
            if (window.WWOpenData) {
              window.WWOpenData.bind(document.querySelector('ww-open-data'))
              if (WWOpenData.initCanvas) {
                WWOpenData.initCanvas()
                console.log('我企业微信 canvas 应该执行了吧')
              }
            }
          },
          fail: function (res: any) {
            console.log('查看错误信息', res)
            if (res.errMsg.indexOf('function not exist') > -1) {
              alert('版本过低请升级')
            }
          },
        })
      })
    })
  })
}

onMounted(async () => {
  await nextTick();
  isLoading.value = false;
  if (userInfo.value.userNameNeedTranslate == 1) {
    agentConfig()
  }
});
</script>

<style scoped lang="scss">
.el-main {
  padding: 0;
  flex: 1;
  overflow: auto;
  background: $backColor;
}
</style>