feat(兑换金币页): 修复苹果端按钮点击触发不了的问题

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": "বিনিময় প্রক্রিয়া চলাকালীন একটি ত্রুটি ঘটেছে। দয়া করে পরে আবার চেষ্টা করুন।",

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.",

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.",

src/views/Wallet/Exchange/ExchangeGoldCoins.vue

@@ -69,12 +69,41 @@
 
         <!-- 兑换按钮 -->
         <div style="display: flex; justify-content: center; margin-top: 10px">
-          <button class="exchange-btn" @click="exchangeCoins" :disabled="!selectedCoin">
+          <button
+            type="button"
+            class="exchange-btn"
+            @click="exchangeCoins"
+            :disabled="!selectedCoin"
+          >
             {{ t('exchange') }}
           </button>
         </div>
       </div>
     </div>
+
+    <div
+      v-if="exchangeConfirmVisible"
+      class="exchange-confirm-overlay"
+      @click="closeExchangeConfirm"
+    >
+      <div class="exchange-confirm-modal" @click.stop>
+        <div class="exchange-confirm-title">{{ t('tips') }}</div>
+        <div class="exchange-confirm-message">{{ exchangeConfirmMessage }}</div>
+        <div class="exchange-confirm-actions">
+          <button type="button" class="exchange-confirm-cancel" @click="closeExchangeConfirm">
+            {{ t('cancel') }}
+          </button>
+          <button
+            type="button"
+            class="exchange-confirm-submit"
+            :disabled="isSubmittingExchange"
+            @click="confirmExchangeCoins"
+          >
+            {{ t('confirm') }}
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -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;