diff --git a/src/locales/bn.json b/src/locales/bn.json index e5b8e5c..9f3e6ac 100644 --- a/src/locales/bn.json +++ b/src/locales/bn.json @@ -141,8 +141,8 @@ "failed_to_load_balance": "ব্যালেন্স লোড করতে ব্যর্থ। দয়া করে আবার চেষ্টা করুন।", "failed_to_load_user_info": "ব্যবহারকারী তথ্য লোড করতে ব্যর্থ", "please_select_coin_amount": "দয়া করে প্রথমে একটি মুদ্রার পরিমাণ নির্বাচন করুন", - "insufficient_balance": "অপর্যাপ্ত ব্যালেন্স। আপনার বর্তমান ব্যালেন্স ${balance}, কিন্তু বিনিময় করার জন্য $${price} প্রয়োজন।", - "confirm_exchange_coins": "আপনি কি $${price} এর জন্য মুদ্রা বিনিময় করতে চান?", + "insufficient_balance": "অপর্যাপ্ত ব্যালেন্স। আপনার বর্তমান ব্যালেন্স ${balance}, কিন্তু বিনিময় করার জন্য ${price} প্রয়োজন।", + "confirm_exchange_coins": "আপনি কি ${price} এর জন্য মুদ্রা বিনিময় করতে চান?", "exchange_success": "${price} এর জন্য মুদ্রা সফলভাবে বিনিময় করা হয়েছে", "exchange_failed": "বিনিময় ব্যর্থ, দয়া করে পরে আবার চেষ্টা করুন।", "exchange_error_occurred": "বিনিময় প্রক্রিয়া চলাকালীন একটি ত্রুটি ঘটেছে। দয়া করে পরে আবার চেষ্টা করুন।", diff --git a/src/locales/en.json b/src/locales/en.json index 4dc902e..49af043 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -141,8 +141,8 @@ "failed_to_load_balance": "Failed to load balance. Please try again.", "failed_to_load_user_info": "Failed to load user information", "please_select_coin_amount": "Please select a coin amount first", - "insufficient_balance": "Insufficient balance. Your current balance is ${balance}, but you need $${price} to exchange.", - "confirm_exchange_coins": "Do you want to exchange coins for $${price}?", + "insufficient_balance": "Insufficient balance. Your current balance is ${balance}, but you need ${price} to exchange.", + "confirm_exchange_coins": "Do you want to exchange coins for ${price}?", "exchange_success": "Successfully exchanged coins for ${price}", "exchange_failed": "Exchange failed, please try again later.", "exchange_error_occurred": "An error occurred during the exchange process. Please try again later.", diff --git a/src/locales/tr.json b/src/locales/tr.json index 06fd50d..03b4608 100644 --- a/src/locales/tr.json +++ b/src/locales/tr.json @@ -141,8 +141,8 @@ "failed_to_load_balance": "Bakiye yüklenemedi. Lütfen tekrar deneyin.", "failed_to_load_user_info": "Kullanıcı bilgisi yüklenemedi", "please_select_coin_amount": "Lütfen önce bir coin miktarı seçin", - "insufficient_balance": "Yetersiz bakiye. Mevcut bakiyeniz ${balance}, ancak değiştirmek için $${price} gerekiyor.", - "confirm_exchange_coins": "$${price} için coin değiştirmek istiyor musunuz?", + "insufficient_balance": "Yetersiz bakiye. Mevcut bakiyeniz ${balance}, ancak değiştirmek için ${price} gerekiyor.", + "confirm_exchange_coins": "${price} için coin değiştirmek istiyor musunuz?", "exchange_success": "${price} için coin başarıyla değiştirildi", "exchange_failed": "Değiştirme başarısız, lütfen daha sonra tekrar deneyin.", "exchange_error_occurred": "Değiştirme işlemi sırasında bir hata oluştu. Lütfen daha sonra tekrar deneyin.", diff --git a/src/views/Wallet/Exchange/ExchangeGoldCoins.vue b/src/views/Wallet/Exchange/ExchangeGoldCoins.vue index be87e9c..f98db82 100644 --- a/src/views/Wallet/Exchange/ExchangeGoldCoins.vue +++ b/src/views/Wallet/Exchange/ExchangeGoldCoins.vue @@ -69,12 +69,41 @@
-
+ +
+
+
{{ t('tips') }}
+
{{ exchangeConfirmMessage }}
+
+ + +
+
+
@@ -98,6 +127,13 @@ const selectedCoin = ref(null) const loading = ref(false) const isLoadingRole = ref(false) const userRole = ref('') +const exchangeConfirmVisible = ref(false) +const pendingExchangeCoin = ref(null) +const isSubmittingExchange = ref(false) + +const exchangeConfirmMessage = computed(() => + t('confirm_exchange_coins', { price: pendingExchangeCoin.value?.price || '' }), +) // 金币选项 const coinOptions = reactive([ @@ -190,37 +226,56 @@ const exchangeCoins = async () => { return } - // 显示确认对话框 - const confirmExchange = confirm(t('confirm_exchange_coins', { price: selectedCoinData.price })) + pendingExchangeCoin.value = selectedCoinData + exchangeConfirmVisible.value = true +} - if (confirmExchange) { - try { - // 调用接口进行兑换 - const response = await userBankExchangeGold({ - coinId: selectedCoinData.id, - amount: selectedCoinData.price, - price: selectedCoinData.price, - }) +const closeExchangeConfirm = () => { + if (isSubmittingExchange.value) return + exchangeConfirmVisible.value = false + pendingExchangeCoin.value = null +} - if (response.status === true || response.errorCode === 0) { - showSuccess(t('exchange_success', { price: selectedCoinData.price })) +const confirmExchangeCoins = async () => { + if (isSubmittingExchange.value) return - // 刷新银行余额 - await fetchBankBalance() - - // 重置选择 - selectedCoin.value = null - } else { - // 接口调用失败 - const errorMessage = response.message || t('exchange_failed') - showError(errorMessage) - } - } catch (error) { - console.error('Exchange error:', error) - showError(t('exchange_error_occurred')) - } + const selectedCoinData = pendingExchangeCoin.value + if (!selectedCoinData) { + exchangeConfirmVisible.value = false + return + } + + isSubmittingExchange.value = true + + try { + // 调用接口进行兑换 + const response = await userBankExchangeGold({ + coinId: selectedCoinData.id, + amount: selectedCoinData.price, + price: selectedCoinData.price, + }) + + if (response.status === true || response.errorCode === 0) { + showSuccess(t('exchange_success', { price: selectedCoinData.price })) + + // 刷新银行余额 + await fetchBankBalance() + + // 重置选择 + selectedCoin.value = null + exchangeConfirmVisible.value = false + pendingExchangeCoin.value = null + } else { + // 接口调用失败 + const errorMessage = response.message || t('exchange_failed') + showError(errorMessage) + } + } catch (error) { + console.error('Exchange error:', error) + showError(t('exchange_error_occurred')) + } finally { + isSubmittingExchange.value = false } - // 如果用户取消，则什么都不做 } // 方法 @@ -353,6 +408,77 @@ onMounted(() => { cursor: not-allowed; } +.exchange-confirm-overlay { + position: fixed; + inset: 0; + z-index: 9999; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; + background-color: rgba(0, 0, 0, 0.55); +} + +.exchange-confirm-modal { + width: 100%; + max-width: 320px; + padding: 18px 16px 16px; + border-radius: 12px; + background-color: #fff; + text-align: center; + box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); +} + +.exchange-confirm-title { + margin-bottom: 8px; + color: rgba(0, 0, 0, 0.8); + font-weight: 800; +} + +.exchange-confirm-message { + margin-bottom: 18px; + color: rgba(0, 0, 0, 0.5); + font-weight: 600; + line-height: 1.5; +} + +.exchange-confirm-actions { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.exchange-confirm-cancel, +.exchange-confirm-submit { + flex: 1; + border: none; + border-radius: 12px; + padding: 10px 12px; + font-weight: 800; + cursor: pointer; +} + +.exchange-confirm-cancel { + border: 1px solid #e6e6e6; + background: #fff; + color: rgba(0, 0, 0, 0.45); +} + +.exchange-confirm-submit { + background: linear-gradient( + 152deg, + rgba(198, 112, 255, 0.8) 7.01%, + rgba(119, 38, 255, 0.8) 92.99% + ); + color: #fff; +} + +.exchange-confirm-submit:disabled { + opacity: 0.65; + cursor: not-allowed; +} + .flipImg { display: block; width: 16px;