src/views/received.vue

   1 <style lang="" scoped>
   2   .header {
   3     display: flex;
   4   }
   5   .header p{
   6     text-align: center;
   7     width: 280px;
   8     padding-top: 17px;
   9   }
  10   .panel{
  11     text-align: center;
  12     padding: 38px;
  13   }
  14   #qrcode {
  15     width: 150px;
  16     height: 150px;
  17     margin: 30px auto;
  18   }
  19
  20   .vp-warning {
  21     text-align: center;
  22     width: 100%;
  23     font-size: 12px;
  24   }
  25
  26   .address-text{
  27     cursor: pointer;
  28   }
  29   .footer{
  30     text-align: center;
  31     position: absolute;
  32     bottom: 20px;
  33     width: 100%;
  34     font-size: 12px
  35   }
  36
  37 </style>
  38
  39 <template>
  40   <div class="warp-child bg-gray">
  41     <section class="header bg-header">
  42       <i class="iconfont icon-back" @click="close"></i>
  43       <p>{{ $t('main.receive') }}</p>
  44     </section>
  45
  46     <div class="panel">
  47       <div id="qrcode"></div>
  48       <p>{{$t('receive.address')}}</p>
  49       <span class="color-black font-medium address-text"  :title="addressTitle" :data-clipboard-text="addr">{{addr}}</span>
  50     </div>
  51     <div v-if="netType === 'vapor'" class="vp-warning color-red"> {{$t('receive.vpWarning')}}</div>
  52     <div class="footer color-grey"> {{$t('receive.tips')}}</div>
  53   </div>
  54 </template>
  55
  56 <script>
  57   import QRCode from "qrcodejs2";
  58   import ClipboardJS from "clipboard";
  59   import {  mapGetters } from 'vuex'
  60
  61   export default {
  62   data() {
  63     return {
  64       addr: "111",
  65       qrcode: Object,
  66       clipboard: new ClipboardJS(".address-text"),
  67       addressTitle: this.$t("main.copy")
  68     };
  69   },
  70     computed: {
  71       ...mapGetters([
  72         'currentAccount',
  73         'netType'
  74       ])
  75     },
  76   methods: {
  77     close: function () {
  78       this.$router.go(-1)
  79     },
  80     setupClipboard() {
  81       this.clipboard.on("success", e => {
  82         this.$dialog.show({
  83           type: 'success',
  84           header: this.$t("dialog.header"),
  85           body: this.$t("dialog.copy.success")
  86         });
  87       });
  88       this.clipboard.on("error", e => {
  89         this.$dialog.show({
  90           header: this.$t("dialog.header"),
  91           body: this.$t("dialog.copy.fail")
  92         });
  93       });
  94     },
  95   },
  96   mounted() {
  97     if (this.currentAccount.address != undefined) {
  98       if(this.netType === 'vapor'){
  99         this.addr = this.currentAccount.vpAddress;
 100       }else{
 101         this.addr = this.currentAccount.address;
 102       }
 103       this.qrcode = new QRCode( "qrcode", {
 104         text: this.addr,
 105         width: 150,
 106         height: 150,
 107         colorDark: "#000000",
 108         colorLight: "#ffffff",
 109         correctLevel: QRCode.CorrectLevel.H
 110       });
 111     }
 112     this.setupClipboard();
 113   },
 114   beforeDestroy() {
 115     this.clipboard.destroy();
 116   }
 117 };
 118 </script>