xps-web-csat-v5/src/views/system/group/user/BindWx.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="30%"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <div class="content-container">
      <el-row type="flex" justify="center" align="middle">
        <div id="qrcodetemplate" ref="qrcodetemplate" style="margin: 5px 0;" />
      </el-row>
      <el-row type="flex" justify="center">
        <span>{{ viewData.note }}</span>
      </el-row>
    </div>
  </el-dialog>
</template>
<script>

import { serverUrl, devServerUrl } from '@/settings'
import QRCode from 'qrcodejs2'
import { mapGetters } from 'vuex'
import { isNotNull } from '@/utils'

export default {
  name: 'BindWx',
  props: {
    title: {
      type: String,
      default: '微信绑定'
    }
  },
  data() {
    return {
      dialogVisible: false,
      userId: undefined,
      code: '',
      viewData: {
        note: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'userData'
    ])
  },
  created() {

  },
  methods: {

    // 外部调用接口
    show(userId, objCode) {
      this.userId = userId
      if (isNotNull(objCode)) {
        this.viewData.note = '已有绑定'
      } else {
        this.viewData.note = '未绑定微信'
      }
      this.dialogVisible = true
      this.drawQrcode()
    },

    // 显示绑定二维码
    drawQrcode() {
      const ocId = this.userData.ocId
      const userId = this.userId

      const baseURL = process.env.NODE_ENV === 'development' ? devServerUrl : serverUrl
      const url = baseURL + '/wx/auth/' + ocId + '/' + userId
      if (!url) {
        this.$message.error('没有生产二维码的参数')
        return
      }
      this.$nextTick(() => {
        this.$refs.qrcodetemplate.innerHTML = ''
        new QRCode('qrcodetemplate', {
          width: 200,
          height: 200,
          text: url.toString()
        })
      })
    }
  }
}
</script>
<style lang="scss">
#qrcodetemplate{
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
</style>