ads_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',
      agentid: '1000065',
      redirect_uri: 'http://amzads.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) {
  console.log('扫码成功')
  try {
    const res = await WeComLogin(query)
    if (res) {
      emitter.emit('scan-wecomLogin', { loginInfo: res })
      console.log('发送跳转')
    }
  } 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 scoped lang="scss">
.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>