admin/src/pages/system/verificationManager/qrcodeVerification/index.vue

<template>
  <div class="subPage">
    <div class="flex-h top">
      <div class="flex-item">
        <div>
          <i class="iconfont icon-qrcode"></i>
          <span>1</span>
          <span>请用户出示核销的二维码<br>请将网页输入法切换为英文</span>
        </div>
      </div>
      <div class="flex-item">
        <div>
          <i class="iconfont icon-saoma"></i>
          <span>2</span>
          <span>点击“立即核销”按钮<br>使用扫码枪扫描客户二维码</span>
        </div>
      </div>
      <div class="flex-item">
        <div>
          <i class="iconfont icon-hexiao"></i>
          <span>3</span>
          <span>根据提示进行核销操作</span>
        </div>
      </div>
    </div>
    <div style="text-align:center;margin-top:40px;">
      <el-button type="danger" round @click="centerDialogVisible = true">立即核销</el-button>
    </div>
    <el-dialog
      title="核销"
      :visible.sync="centerDialogVisible"
      width="500px"
      center>
      <div v-if="centerDialogVisible">
        <el-input
          autofocus
          ref="input"
          placeholder="请输入核销码"
          v-model="verificationCode"
          clearable>
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false; verificationCode = '';">取 消</el-button>
        <el-button type="primary" @click="toVerificationList">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      centerDialogVisible: false, // 显隐核销弹窗
      verificationCode: '', // 核销码
    }
  },
  mounted () {
    this.$nextTick(function () { })
  },
  methods: {
    toVerificationList () { // 定向到核销列表
      if (this.verificationCode !== '') {
        this.$router.push({ name: 'qrcodeVerificationList', query: { code: this.verificationCode } })
      } else {
        this.$message({
          message: '核销码为空！',
          type: 'error'
        })
      }
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>