From 836a56418f932086e4221cb6c5e6a56f1c0dfecf Mon Sep 17 00:00:00 2001
From: 李 <344137771@qq.com>
Date: Fri, 22 May 2026 15:07:30 +0800
Subject: [PATCH] 1
---
src/views/cryptos/Recharge/rechargeList.vue | 181 ++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 178 insertions(+), 3 deletions(-)
diff --git a/src/views/cryptos/Recharge/rechargeList.vue b/src/views/cryptos/Recharge/rechargeList.vue
index 3880072..92b1f61 100644
--- a/src/views/cryptos/Recharge/rechargeList.vue
+++ b/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>
--
Gitblit v1.9.3