1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 |
- <template>
- <div :class="`dx-container${dxStatus ? '' : ' hide'}`">
- <div id="dxCaptcha"/>
- </div>
- </template>
- <script>
- import { loadSrc } from '~/common/utils.js'
- export default {
- data() {
- return {
- dxStatus: false
- }
- },
- computed: {
- locale() {
- return this.$store.state.locale
- }
- },
- mounted() {
- loadSrc(
- /*! captcha.js v1.3.37(275) 2019-06-04 10:16:27 */
- 'https://cdn.dingxiang-inc.com/ctu-group/captcha-ui/index.js',
- 'dxLib',
- 'js'
- ).then(() => {
- this.initDx()
- })
- },
- methods: {
- initDx() {
- if (!window._dx) return
- _dx.hooliCaptcha = _dx.Captcha(document.getElementById('dxCaptcha'), {
- appId: '7e86af4ecb92962ec87a38e6616145b6', //appId,在控制台中“应用管理”或“应用配置”模块获取
- type: 'basic',
- style: 'popup', // 弹出式
- language: this.locale || 'cn',
- success: token => {
- // console.log('dxToken:', token)
- // sessionStorage.setItem('hooliDx', { status: 1, token })
- _dx.hooliCaptcha.hide()
- },
- fail: error => {
- // console.log('error:', error)
- // _dx.hooliCaptcha.reload() // 失败后更换图片
- }
- })
- _dx.hooliCaptcha.on('show', () => {
- this.dxStatus = true
- })
- _dx.hooliCaptcha.on('hide', () => {
- this.dxStatus = false
- })
- // 显示失败
- _dx.hooliCaptcha.on('loadFail', () => {
- // sessionStorage.setItem('hooliDx', { status: 0, error: 'loadFail' })
- })
- }
- }
- }
- </script>
- <style lang="less">
- .dx-container {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 10;
- background: rgba(0, 0, 0, 0.5);
- &.hide {
- display: none !important;
- }
- }
- .dx_captcha_loading_overlay {
- display: none !important;
- }
- </style>
|