ams_web/src/views/system/login/component/scan.vue

<script lang="ts" setup>
import { onMounted } from 'vue';
import * as ww from '@wecom/jssdk';
import { WeComLogin } from '../api';
import emitter from '/@/utils/emitter';

const props = defineProps({
  isScan: {
    type: Boolean,
    default: false,
  },
});

// 初始化企业微信扫码登录
function initWeComQRCode() {
  ww.createWWLoginPanel({
    el: '#wx_qrcode',
    params: {
      login_type: 'CorpApp',
      appid: 'ww467ec1685e8262e6', // 企业微信企业 ID
      agentid: '1000074', // 应用 AgentID
      redirect_uri: 'http://asset.zositechc.cn/web/', //正式环境网址
      state: 'Wechat',
      scope: 'snsapi_privateinfo',
      redirect_type: 'callback',
    },
    onCheckWeComLogin({ isWeComLogin }) {
      // console.log(isWeComLogin)
    },
    onLoginSuccess({ code }) {
      handleWeComLogin({ code: code, state: 'Wechat' });
    },
    onLoginFail(err) {
      // console.log(err)
    },
  });
}

async function handleWeComLogin(query: any) {
  try {
    const res = await WeComLogin(query);
    if (res) {
      emitter.emit('scan-wecomLogin', { loginInfo: res });
    }
  } catch (error) {
    console.log('error:', error);
  }
}

onMounted(() => {
  if (props.isScan) {
    initWeComQRCode();
  }
});
</script>

<template>
  <div class="login-scan-container">
    <div id="wx_qrcode"></div>
    <!--<div class="font12 mt20 login-msg">{{ $t('message.scan.text') }}</div>-->
  </div>
</template>


<style lang="scss" scoped>
.login-scan-animation {
  opacity: 0;
  animation-name: error-num;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.login-scan-container {
  //padding: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  @extend .login-scan-animation;
  animation-delay: 0.1s;

  :deep(img) {
    margin: auto;
  }

  .login-msg {
    color: var(--el-text-color-placeholder);
    @extend .login-scan-animation;
    animation-delay: 0.2s;
  }
}

:deep(#wx_qrcode iframe) {
  height: 365px;
}
</style>