1

李

2026-04-29 d36e6b733fbc7f1b4a7fd942740b5e14b74e7147

 src/views/cryptos/Recharge/rechargeList.vue

@@ -68,6 +68,38 @@
            <span class="deposit-detail-address-text">{{ selectedChain.address }}</span>
            <img :src="copyImg" alt="copy" class="deposit-detail-copy-btn" @click="copyAddress" />
          </div>

          <!-- 充值后提交截图凭证 -->
          <div class="deposit-voucher">
            <div class="deposit-voucher-title">{{ $t('付款凭证（上传支付详情截图）') }}</div>
            <p class="deposit-voucher-desc">{{ $t('desc2') }}</p>
            <div class="deposit-voucher-upload">
              <van-uploader
                v-model="fileList"
                accept="image/*"
                :max-count="1"
                :before-read="beforeRead"
                :after-read="afterRead"
              />
            </div>
            <div class="deposit-voucher-amount">
              <div class="deposit-voucher-label">{{ $t('充币数量') }}</div>
              <input
                v-model="rechargeAmount"
                type="text"
                class="deposit-voucher-input"
                :placeholder="$t('请输入充币数量')"
                inputmode="decimal"
              />
            </div>
            <button
              class="deposit-submit-btn"
              :disabled="submitting"
              @click="submitVoucher"
            >
              {{ submitting ? $t('uploading') : $t('提交凭证') }}
            </button>
          </div>
        </div>
      </div>
    </template>
@@ -104,13 +136,14 @@
import assetsHead from '@/components/Transform/assets-head/index.vue';
import { HOST_URL } from '@/config';
import Axios from '@/service/recharge.js';
import { _uploadImage } from '@/service/upload.api.js';
import copyImg from '@/assets/imgs/new/copy.png';

const COINS = [
  { symbol: 'usdt', name: 'USDT' },
  { symbol: 'usdc', name: 'USDC' },
  { symbol: 'btc', name: 'BTC' },
  { symbol: 'eth', name: 'ETH' },
  // { symbol: 'usdc', name: 'USDC' },
  // { symbol: 'btc', name: 'BTC' },
  // { symbol: 'eth', name: 'ETH' },
];

export default {
@@ -127,6 +160,10 @@
      showNetworkSheet: false,
      isForeign: false,
      copyImg,
      fileList: [],
      rechargeAmount: '',
      session_token: '',
      submitting: false,
    };
  },
  computed: {
@@ -169,7 +206,79 @@
    onSelectChain(chain) {
      this.selectedChain = chain;
      this.showNetworkSheet = false;
      this.fileList = [];
      this.rechargeAmount = '';
      this.$nextTick(() => this.drawQR());
      this.getRechargeToken();
    },
    getRechargeToken() {
      Axios.getRechargeToken()
        .then((res) => {
          this.session_token = res?.session_token || '';
        })
        .catch(() => {});
    },
    beforeRead(file) {
      const types = ['image/jpeg', 'image/jpg', 'image/gif', 'image/bmp', 'image/png'];
      if (!types.includes(file.type)) {
        showToast(this.$t('上传图片只能是JPG、JPEG、gif、bmp、PNG格式!'));
        return false;
      }
      return true;
    },
    afterRead(file) {
      file.status = 'uploading';
      file.message = this.$t('uploading');
      _uploadImage(file)
        .then((data) => {
          file.status = 'success';
          file.message = this.$t('uploadSuccess');
          file.resURL = data;
          showToast(this.$t('uploadSuccess'));
        })
        .catch(() => {
          file.status = 'failed';
          file.message = this.$t('uploadFailed');
          showToast(this.$t('uploadFailed'));
        });
    },
    submitVoucher() {
      if (!this.fileList.length || !this.fileList[0].resURL) {
        showToast(this.$t('uploadImgPay'));
        return;
      }
      const amount = (this.rechargeAmount || '').trim();
      if (!amount) {
        showToast(this.$t('请输入充币数量'));
        return;
      }
      const numReg = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
      if (!numReg.test(amount)) {
        showToast(this.$t('请输入数字'));
        return;
      }
      this.submitting = true;
      Axios.rechargeApply({
        session_token: this.session_token,
        amount,
        from: this.selectedChain?.address || '',
        blockchain_name: this.selectedChain?.blockchain_name || '',
        coin: this.selectedSymbol,
        channel_address: this.selectedChain?.address || '',
        tx: '',
        img: this.fileList[0].resURL,
      })
        .then(() => {
          this.submitting = false;
          showToast(this.$t('申请已提交'));
          this.$router.push({ path: '/cryptos/recharge/rechargeSubmit', query: { title: this.$t('充值') } });
        })
        .catch((err) => {
          this.submitting = false;
          if (err?.code === 'ECONNABORTED') showToast(this.$t('网络超时！'));
          else showToast(err?.msg || this.$t('提交失败'));
          this.getRechargeToken();
        });
    },
    drawQR() {
      if (!this.selectedChain || !this.selectedChain.address || !this.$refs.qrcodeCanvas) return;
@@ -463,4 +572,70 @@
  flex-shrink: 0;
  object-fit: contain;
}

/* 充值凭证上传 */
.deposit-voucher {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #f0f0f0;
}
.deposit-voucher-title {
  font-size: 28px;
  color: #333;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.deposit-voucher-desc {
  font-size: 24px;
  color: #9b9b9b;
  line-height: 1.5;
  margin-bottom: 1rem;
}
.deposit-voucher-upload {
  margin-bottom: 1rem;
}
.deposit-voucher-upload :deep(.van-uploader__upload) {
  background: #f5f5f5;
  border: 1px dashed #ddd;
  border-radius: 0.5rem;
}
.deposit-voucher-amount {
  margin-bottom: 1rem;
}
.deposit-voucher-label {
  font-size: 26px;
  color: #9b9b9b;
  margin-bottom: 0.5rem;
}
.deposit-voucher-input {
  width: 100%;
  height: 2.75rem;
  padding: 0 1rem;
  font-size: 28px;
  color: #333;
  background: #f5f5f5;
  border: none;
  border-radius: 0.5rem;
  outline: none;
  box-sizing: border-box;
}
.deposit-voucher-input::placeholder {
  color: #9b9b9b;
}
.deposit-submit-btn {
  width: 100%;
  height: 3.25rem;
  margin-top: 0.5rem;
  border: none;
  border-radius: 0.5rem;
  background: linear-gradient(90deg, #a443cf, #5e2bc8);
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  cursor: pointer;
}
.deposit-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
</style>