yoga-manager-ui/src/components/SeeAdsComponent.vue

<template>
  <el-dialog title="扫描解锁" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
    <p>使用微信扫描下方二维码，观看完广告获取验证码</p>
    <p class="red f13">注：如果第一次扫码未弹出广告，请重新扫码进入</p>
    <div class="flex-center">
      <el-image class="qr-code"
        :src="'data:image/png;base64,'+ miniImg"
        fit="fill"
      ></el-image>
      <el-input v-model="qrCode" class="left-input"/>
      <el-button @click="asyncOk" class="right-btn" type="primary" :disabled="!qrCode">提交</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {getMiniWechatImg, judgeQrCode} from "@/api/ums/member";
import {mapGetters} from "vuex";

export default {
  computed: {
    ...mapGetters(['roles'])
  },
  data() {
    return {
      open: false,
      miniImg: null,
      qrCode: null
    }
  },
  methods: {
    initMiniWechatImg() {
      getMiniWechatImg({scene: 2}).then(res => {
        this.miniImg = res.data
      })
    },
    show() {
      //如果是管理员的账号进入，直接过滤
      if (this.roles.includes("admin")) {
        this.$emit("confirmOk", true)
        return
      }
      this.initMiniWechatImg()
      this.open = true
    },
    async asyncOk(){
      const res = await judgeQrCode({code: this.qrCode}).then(res=>{
        return res.data
      })
      if (res) {
        this.open = false
      } else {
        this.$message.error('验证码错误')
      }
      this.$emit("confirmOk", res)
    }
  }
}
</script>

<style lang="stylus">
.qr-code
  min-width 150px
  height 150px
  margin 20px 20px 20px 0
.left-input
  .el-input__inner
    border-radius 4px 0 0 4px !important
.right-btn
  border-radius 0 4px 4px 0 !important
</style>