Portal/pages/rechargeopr.vue

<template>
  <view class="recharge">
    <u-navbar
      title=""
      bgColor="#000"
      :placeholder="true"
      :fixed="true"
      leftIcon=""
      height="60"
    >
      <view slot="left">
        <text class="navbar-lab">{{ $lang.recharge }}</text>
      </view>
    </u-navbar>
    <view class="content">
      <view class="picker-view" @click="show = true">
        <u-input
          readonly
          :placeholder="$lang.pleaseChoose"
          color="#93979b"
          v-model="type"
          border="none"
        >
          <u--text
            :text="$lang.chooseRecharge"
            slot="prefix"
            margin="0 3px 0 0"
            type="tips"
          ></u--text>
          <u-icon
            slot="suffix"
            name="arrow-down-fill"
            color="#757272"
            size="16"
          ></u-icon>
        </u-input>
      </view>
      <u-picker
        :title="$lang.chooseRecharge"
        closeOnClickOverlay
        :show="show"
        :columns="columns"
        @cancel="close"
        @close="close"
        @confirm="confirm"
      ></u-picker>
      <view class="list">
        <view class="lab">{{ $lang.rechargeWithdrawNetwork }}</view>
        <view class="type">TRC20</view>
      </view>
      <view class="list">
        <view class="lab">{{ $lang.walletAddress }}：</view>
        <view class="box">
          <u-input
            readonly
            :placeholder="$lang.walletAddress"
            fontSize="12px"
            color="#93979b"
            :value="address"
          >
            <template slot="suffix">
              <u-button
                class="btn"
                :text="$lang.copy"
                type="success"
                @click="copyCode"
                color="#e5b932"
              ></u-button>
            </template>
          </u-input>
        </view>
      </view>
      <view class="list qrcode">
        <u--image
          radius="5px"
          :showLoading="true"
          :src="qrcode"
          width="200px"
          height="200px"
          mode="scaleToFill"
        ></u--image>
      </view>
      <view class="list">
        <view class="tip">
          {{ $lang.rechargeTip2 }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import qr from "qr-image";
export default {
  data() {
    return {
      type: "USDT",
      address: "",
      qrcode: "",
      show: false,
      columns: [["USDT"]],
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.app.userInfo,
      $lang: (state) => state.app.lang[state.app.language],
    }),
  },
  onLoad() {
    if (this.userInfo && this.userInfo.pay_channel_address) {
      this.address = this.userInfo.pay_channel_address;
      this.setQrCode();
    }
  },
  methods: {
    confirm(chose) {
      this.type = chose.value[0];
      this.close();
    },
    close() {
      this.show = false;
    },
    setQrCode() {
      const qrcode =
        "data:image/png;base64," +
        uni.arrayBufferToBase64(
          qr.imageSync(this.address, {
            margin: 2,
          })
        );
      this.qrcode = qrcode;
    },
    // 复制链接
    copyCode() {
      uni.setClipboardData({
        data: this.address,
        success: () => {
          uni.showToast({
            title: this.$lang.copySuccessfully,
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.recharge {
  background: #0b1520;
  width: 100%;
  min-height: 100vh;
  .navbar-lab {
    color: #fff;
    font-weight: 500;
    font-size: 18px;
  }
  .content {
    margin: 5px 5px;
    border: 2px solid #947b2b;
    background: #222222;
    box-sizing: border-box;
    padding: 15px;
    .picker-view {
      border: 2px solid #947b2b;
      padding: 8px;
      border-radius: 5px;
    }
    .list {
      font-size: 14px;
      text-align: center;
      &.qrcode {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        margin: 25px 0;
      }
      .lab {
        color: #757272;
        margin: 10px 0;
      }
      .btn {
        height: 30px;
        font-weight: 600;
        color: #0b1520 !important;
      }
      .type {
        width: 70px;
        height: 35px;
        background: #e5b932;
        border-radius: 40px;
        text-align: center;
        line-height: 35px;
        font-weight: 600;
        margin: 10px auto;
      }
      .tip {
        color: #cc4c0e;
        font-size: 13px;
        text-align: justify;
      }
    }
  }
}
</style>