1

jhzh

2024-11-13 08ac00389c5ae6166cf916d90cf403d517c29224

 src/page/recharge/rechargePage.vue

@@ -4,30 +4,31 @@
    <div class="mt-30 w-full text-center font-36 textColor">
      {{ symbol.toUpperCase() + " " + $t("充值") }}
    </div>
    <div
      class="pl-30 pr-30 text-center flex flex-col items-center justify-center mt40"
    >
      <div class="pl-30 pr-30 text-center flex flex-col items-center justify-center mt40">
      <div>
        <canvas id="QRcodeCanvas" v-show="!imgshow"></canvas>
        <img :src="img" alt="" v-show="imgshow" class="QRcodeImg" />
            <!-- <img :src="img" alt="" v-show="imgshow" class="QRcodeImg" /> -->
            <img src="../../assets/cz.jpg" alt="" style="width: 300px;height: 300px;" />
      </div>
      <div
         <!-- <div
        class="code-btn btnMain text-center font-26 text-white"
        @click="download('#QRcodeCanvas')"
      >
        {{ $t("保存二维码") }}
      </div>
      </div> -->
    </div>
    <div class="border-light-grey"></div>
    <div class="pl-30 pr-30">
      <div class="flex flex-col items-center justify-center">
        <div class="textColor font-30 mt50" ref="address">{{ address }}</div>
        <div
            <!-- <div
          v-clipboard:copy="address"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
          class="font-26 border-solid-grey text-center code-btn rounded-6 textColor"
        >
        > -->
            <div  @click="onCopy(address)"
               class="font-26 border-solid-grey text-center code-btn rounded-6 textColor">
          {{ $t("复制地址") }}
        </div>
      </div>
@@ -57,17 +58,15 @@
      <div class="mb-60">
        <div class="font-26 textColor">{{ $t("充币数量") }}</div>
        <div>
          <input
            v-model="amount"
            class="input-view w-full font-26 textColor inputBackground"
            :placeholder="$t('请输入充币数量')"
          />
               <input v-model="amount" class="input-view w-full font-26 textColor inputBackground"
                  :placeholder="$t('请输入充币数量')" />
        </div>
      </div>
      <div>
                <div class="font-26 textColor">{{ $t('链名称') }}</div>
                <div class="flex ">
                    <div :class="blockchainIndex == index ? 'borderMain colorMain' : 'border-solid-dark-grey border-r-grey'"
               <div v-if="item.blockchain_name!='ERC20'"
                  :class="blockchainIndex == index ? 'borderMain colorMain' : 'border-solid-dark-grey border-r-grey'"
                        class="mr-20 flex-wrap font-32 text-center name-btn rounded textColor"
                        v-for="(item, index) in chainList" :key="index" @click="changeBlockchain(index)">{{
                            item.blockchain_name }}</div>
@@ -78,15 +77,8 @@
          {{ $t("付款凭证（上传支付详情截图）") }}
        </div>
        <div class="img-box">
          <van-uploader
            accept="image/*"
            style="width: 100%; height: 100%"
            v-model="fileList"
            multiple
            :max-count="1"
            :before-read="beforeRead"
            :after-read="afterRead"
          />
               <van-uploader accept="image/*" style="width: 100%; height: 100%" v-model="fileList" multiple
                  :max-count="1" :before-read="beforeRead" :after-read="afterRead" />
        </div>
      </div>
    </div>
@@ -94,10 +86,7 @@
      <div class="pl-30 pr-30">
        <div class="font-26 mb-27 textColor">{{ $t("重要提示") }}</div>
        <div class="font-28 text-grey" v-html="tip"></div>
        <button
          class="btnMain text-white next-btn font-30 rounded-lg"
          @click="nextBtn"
        >
            <button class="btnMain text-white next-btn font-30 rounded-lg" @click="nextBtn">
          {{ $t("下一步") }}
        </button>
      </div>
@@ -107,16 +96,27 @@

<script>
import QRCode from "qrcode";
import { Icon } from "vant";
   import {
      Icon
   } from "vant";
   import Clipboard from 'clipboard';
import * as imageConversion from "image-conversion";
import { Uploader } from "vant";
   import {
      Uploader
   } from "vant";
import Axios from "@/API/recharge.js";
import axios from "axios";
import assetsHead from "@/components/assets-head";
//import Config from "@/config";
import { BASE_URL } from "@/config";
import { signatureGenerate } from "@/utils/signatureUtil";
import { mapGetters } from "vuex";
   import {
      BASE_URL
   } from "@/config";
   import {
      signatureGenerate
   } from "@/utils/signatureUtil";
   import {
      mapGetters
   } from "vuex";

export default {
  name: "rechargePage",
@@ -193,6 +193,23 @@
          // this.$toast(this.$t(err));
        }
      });
				
            this.clipboard = new Clipboard(this.$refs.copyBtn, {
                  text: () => this.address, // 设置复制的内容
                });
				
                // 监听复制成功和失败事件
                this.clipboard.on('success', (e) => {
                  console.log('复制成功');
                  this.$toast(this.$t("复制成功")); // 如果你使用了 vue-toast
                  e.clearSelection(); // 清除选中的文本
                });
				
                this.clipboard.on('error', (e) => {
                  console.error('复制失败', e);
                  this.$toast(this.$t("复制失败"));
                });
			
  },
  methods: {
    getData() {
@@ -201,8 +218,15 @@
      }).then((res) => {
        console.log(res);
        this.chainList = res.page.elements
               if (this.symbol == "usdt") {
                  this.blockchainIndex = 1;
                  this.address = res.page.elements[1].address;
                  this.blockchain_name = res.page.elements[1].blockchain_name;
               } else {
        this.address = res.page.elements[0].address;
        this.blockchain_name = res.page.elements[0].blockchain_name;
               }

        this.getQRCode();
      });
      // Axios.exchange({}).then((res) => {
@@ -266,8 +290,28 @@
    onClickLeft() {
      this.$router.go(-1);
    },
    onCopy(e) {
         // onCopy(e) {
         //    // const clipboard = new Clipboard(this.$refs.copyBtn);
         //    // clipboard.on('success', (e) => {
         //    //    console.log('复制成功');
         //    //    // this.$toast(this.$t("复制成功"));
         //    //    e.clearSelection();
         //    // });
         //    // clipboard.on('error', (e) => {
         //    //    console.error('复制失败', e);
         //    //    this.$toast(this.$t("复制失败"));
         //    // });
				
         // },
         async onCopy() {
               try {
                 // 使用现代浏览器 API navigator.clipboard.writeText
                 await navigator.clipboard.writeText(this.address);
      this.$toast(this.$t("复制成功"));
               } catch (err) {
                 console.error('复制失败', err);
                 this.$toast(this.$t("复制失败"));
               }
    },
    onError(e) {
      this.$toast(this.$t("复制失败"));
@@ -290,7 +334,10 @@
    },
    //上传完成
    async afterRead(file) {
      const { timestamp, signature } = signatureGenerate();
            const {
               timestamp,
               signature
            } = signatureGenerate();
      const blob = await imageConversion.compressAccurately(file.file, 500);
      const formData = new FormData();
      formData.append("file", blob);
@@ -307,7 +354,8 @@
          if (res.data.code == 0) {
            this.submitImg = res.data.data;
            // this.uploadImgUrl = this.nowUrl+'/wap/public/showimg!showImg.action?imagePath=' + res.data.data;
            this.uploadImgUrl = `${BASE_URL}public/showimg!showImg.action?imagePath=${res.data.data}`;
                     this.uploadImgUrl =
                        `${BASE_URL}public/showimg!showImg.action?imagePath=${res.data.data}`;
            this.$toast(this.$t("上传成功"));
            console.log(this.uploadImgUrl);
          } else {