AIGC/demo/frontend/src/components/PaymentModal.vue

<template>
  <el-dialog
    v-model="visible"
    :title="title"
    width="500px"
    class="payment-modal"
    :modal="true"
    :close-on-click-modal="false"
    :close-on-press-escape="true"
    @close="handleClose"
    :show-close="true"
    custom-class="payment-modal-dialog"
    :modal-class="'payment-modal-overlay'"
  >
    <div class="payment-content">
      <!-- 支付方式选择 -->
      <div class="payment-methods">
        <div 
          class="payment-method" 
          :class="{ active: selectedMethod === 'alipay' }"
          @click="selectMethod('alipay')"
        >
          <div class="method-icon alipay-icon">
            <el-icon><CreditCard /></el-icon>
          </div>
          <span>支付宝支付</span>
        </div>
        <div 
          class="payment-method" 
          :class="{ active: selectedMethod === 'paypal' }"
          @click="selectMethod('paypal')"
        >
          <div class="method-icon paypal-icon">
            <el-icon><CreditCard /></el-icon>
          </div>
          <span>PayPal支付</span>
        </div>
      </div>

      <!-- 金额显示 -->
      <div class="amount-section">
        <div class="amount-label">金额</div>
        <div class="amount-value">${{ formatAmount(amount) }}</div>
      </div>

      <!-- 支付宝支付区域 -->
      <div v-if="selectedMethod === 'alipay'" class="alipay-section">
        <div class="alipay-info">
          <div class="alipay-logo">
            <svg width="100" height="32" viewBox="0 0 100 32" fill="none">
              <text x="0" y="24" font-family="Arial" font-size="20" font-weight="bold" fill="#1677FF">支付宝</text>
            </svg>
          </div>
          <p class="alipay-desc">安全便捷的在线支付方式</p>
          <p class="alipay-desc-small">点击下方按钮跳转到支付宝完成支付</p>
        </div>
        <button 
          class="alipay-pay-button" 
          @click="handlePay"
          :disabled="loading"
        >
          <span v-if="!loading">前往支付宝支付</span>
          <span v-else>正在跳转...</span>
        </button>
      </div>

      <!-- PayPal支付按钮区域 -->
      <div v-if="selectedMethod === 'paypal'" class="paypal-section">
        <div class="paypal-info">
          <div class="paypal-logo">
            <svg width="100" height="32" viewBox="0 0 100 32" fill="none">
              <text x="0" y="24" font-family="Arial" font-size="20" font-weight="bold" fill="#0070BA">PayPal</text>
            </svg>
          </div>
          <p class="paypal-desc">安全便捷的国际支付方式</p>
          <p class="paypal-desc-small">点击下方按钮跳转到PayPal完成支付</p>
        </div>
        <button 
          class="paypal-pay-button" 
          @click="handlePay"
          :disabled="loading"
        >
          <span v-if="!loading">前往PayPal支付</span>
          <span v-else>正在跳转...</span>
        </button>
      </div>

      <!-- 底部链接 -->
      <div class="footer-link">
        <a href="#" @click.prevent="showAgreement">《Vionow支付服务条款》</a>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, watch, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { CreditCard } from '@element-plus/icons-vue'
import { createPayment, createAlipayPayment, createPayPalPayment, getPaymentById, getPayPalPaymentStatus } from '@/api/payments'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '标准版会员'
  },
  amount: {
    type: [String, Number],
    default: '32.00'
  },
  orderId: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue', 'pay-success', 'pay-error'])

const router = useRouter()
const visible = ref(false)
const selectedMethod = ref('alipay')
const loading = ref(false)
const currentPaymentId = ref(null)
let paymentPollingTimer = null
let isPaymentStarted = false // 防止重复调用

// 格式化金额，保留两位小数
const formatAmount = (amount) => {
  if (amount === null || amount === undefined) return '0.00'
  return Number(amount).toFixed(2)
}
let lastPlanType = '' // 记录上一次的套餐类型

// 从orderId中提取套餐类型（如 SUB_standard_xxx -> standard）
const getPlanTypeFromOrderId = (orderId) => {
  if (!orderId) return ''
  const parts = orderId.split('_')
  return parts.length >= 2 ? parts[1] : ''
}

// 监听 modelValue 变化
watch(() => props.modelValue, (newVal) => {
  visible.value = newVal
  // 当模态框打开时，检查是否需要创建新订单
  if (newVal) {
    const currentPlanType = getPlanTypeFromOrderId(props.orderId)
    
    // 如果套餐类型变化了，重置paymentId
    if (currentPlanType !== lastPlanType) {
      console.log('套餐变化，重置 paymentId，旧套餐:', lastPlanType, '新套餐:', currentPlanType)
      currentPaymentId.value = null
      lastPlanType = currentPlanType
    } else {
      console.log('同一套餐，复用 paymentId:', currentPaymentId.value)
    }
    
    // 重置状态
    isPaymentStarted = false
  }
  // 关闭时重置标志
  if (!newVal) {
    isPaymentStarted = false
  }
})

// 监听 visible 变化
watch(visible, (newVal) => {
  emit('update:modelValue', newVal)
  // 如果模态框关闭，停止轮询
  if (!newVal) {
    stopPaymentPolling()
  }
})

// 选择支付方式
const selectMethod = async (method) => {
  if (selectedMethod.value !== method) {
    console.log('切换支付方式:', selectedMethod.value, '->', method, '复用 paymentId:', currentPaymentId.value)
    selectedMethod.value = method
    
    // 如果已有支付记录，更新支付方式和描述（复用paymentId）
    if (currentPaymentId.value) {
      try {
        const newDescription = `${props.title} - ${method === 'paypal' ? 'PayPal' : '支付宝'}支付`
        const newMethod = method === 'paypal' ? 'PAYPAL' : 'ALIPAY'
        
        console.log('=== 开始更新支付方式 ===')
        console.log('paymentId:', currentPaymentId.value)
        console.log('newMethod:', newMethod)
        console.log('newDescription:', newDescription)
        
        const response = await fetch(`/api/payments/${currentPaymentId.value}/method`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${localStorage.getItem('token')}`
          },
          body: JSON.stringify({
            method: newMethod,
            description: newDescription
          })
        })
        
        console.log('API响应状态:', response.status)
        const responseData = await response.json()
        console.log('API响应数据:', responseData)
        
        if (response.ok && responseData.success) {
          console.log('✅ 支付方式更新成功，复用paymentId:', currentPaymentId.value)
        } else {
          console.error('❌ 支付方式更新失败:', responseData.message || response.statusText)
        }
      } catch (error) {
        console.error('❌ 更新支付方式异常:', error)
      }
    }
  }
}

// 处理支付
const handlePay = async () => {
  try {
    loading.value = true
    
    // 如果还没有创建支付记录，先创建
    if (!currentPaymentId.value) {
      // 直接使用传入的orderId，不再添加时间戳（Subscription.vue已经处理了）
      const paymentData = {
        orderId: props.orderId,
        amount: props.amount.toString(),
        method: selectedMethod.value === 'paypal' ? 'PAYPAL' : 'ALIPAY',
        description: `${props.title} - ${selectedMethod.value === 'paypal' ? 'PayPal' : '支付宝'}支付`
      }
      
      console.log('=== 创建支付记录 ===')
      console.log('支付数据：', paymentData)
      
      const createResponse = await createPayment(paymentData)
      console.log('创建支付订单响应：', createResponse)
      
      if (createResponse.data && createResponse.data.success) {
        currentPaymentId.value = createResponse.data.data.id
        console.log('支付记录创建成功，ID：', currentPaymentId.value)
      } else {
        throw new Error(createResponse.data?.message || '创建支付记录失败')
      }
    } else {
      // 已有支付记录，确保支付方式和描述与当前选择一致
      try {
        const newDescription = `${props.title} - ${selectedMethod.value === 'paypal' ? 'PayPal' : '支付宝'}支付`
        const newMethod = selectedMethod.value === 'paypal' ? 'PAYPAL' : 'ALIPAY'
        
        await fetch(`/api/payments/${currentPaymentId.value}/method`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${localStorage.getItem('token')}`
          },
          body: JSON.stringify({
            method: newMethod,
            description: newDescription
          })
        })
        console.log('支付方式已同步:', newMethod)
      } catch (e) {
        console.warn('同步支付方式失败，继续支付:', e)
      }
    }
    
    // 根据选择的支付方式处理
    if (selectedMethod.value === 'paypal') {
      await handlePayPalPayment()
    } else {
      await handleAlipayPayment()
    }
    
  } catch (error) {
    console.error('=== 支付流程出错 ===')
    console.error('错误详情：', error)
    console.error('错误响应：', error.response)
    console.error('错误状态：', error.response?.status)
    console.error('错误数据：', error.response?.data)
    
    ElMessage.error(`支付失败：${error.message || '请重试'}`)
    emit('pay-error', error)
  } finally {
    loading.value = false
  }
}

// 处理支付宝支付
const handleAlipayPayment = async () => {
  ElMessage.info('正在创建支付宝支付...')
  
  const paymentId = currentPaymentId.value
  console.log('=== 开始支付宝支付流程 ===')
  console.log('使用已创建的支付ID：', paymentId)
  
  // 创建支付宝支付
  const alipayResponse = await createAlipayPayment({ paymentId })
  console.log('支付宝支付响应：', alipayResponse)
  
  if (alipayResponse.data && alipayResponse.data.success) {
    const responseData = alipayResponse.data.data
    
    // 检查是否是电脑网页支付（返回HTML表单）
    if (responseData.payType === 'PAGE_PAY' && responseData.payForm) {
      console.log('使用电脑网页支付，跳转到支付宝页面')
      ElMessage.success('正在跳转到支付宝支付页面...')
      
      // 创建一个临时的div来渲染表单并自动提交
      const div = document.createElement('div')
      div.innerHTML = responseData.payForm
      document.body.appendChild(div)
      
      // 找到表单并提交
      const form = div.querySelector('form')
      if (form) {
        form.submit()
      } else {
        console.error('未找到支付表单')
        ElMessage.error('支付页面生成失败')
        document.body.removeChild(div)
      }
      return
    }
    
    console.error('支付宝响应格式未知：', responseData)
    ElMessage.error('支付创建失败，请重试')
  } else {
    console.error('支付宝响应失败：', alipayResponse)
    ElMessage.error(alipayResponse.data?.message || '支付创建失败')
    emit('pay-error', new Error(alipayResponse.data?.message || '支付创建失败'))
  }
}

// 处理PayPal支付
const handlePayPalPayment = async () => {
  ElMessage.info('正在创建PayPal支付...')
  
  const paymentId = currentPaymentId.value
  console.log('=== 开始PayPal支付流程 ===')
  console.log('使用已创建的支付ID：', paymentId)
  
  const response = await createPayPalPayment({ paymentId })
  console.log('PayPal支付响应：', response)
  
  if (response.data && response.data.success) {
    const paymentUrl = response.data.paymentUrl
    
    console.log('PayPal支付URL:', paymentUrl)
    ElMessage.success('正在跳转到PayPal支付页面...')
    
    // 跳转到PayPal支付页面
    window.location.href = paymentUrl
  } else {
    console.error('PayPal支付创建失败：', response)
    ElMessage.error(response.data?.message || 'PayPal支付创建失败')
    emit('pay-error', new Error(response.data?.message || 'PayPal支付创建失败'))
  }
}

// 轮询支付状态
const startPaymentPolling = (paymentId) => {
  // 清除之前的轮询
  stopPaymentPolling()
  
  let pollCount = 0
  const maxPolls = 200 // 最多轮询200次（10分钟，每3秒一次）
  const pollInterval = 3000 // 3秒轮询一次，更快响应支付成功
  
  const poll = async () => {
    if (pollCount >= maxPolls) {
      console.log('轮询达到最大次数，停止轮询')
      stopPaymentPolling()
      return
    }
    
    try {
      console.log(`轮询支付状态 (${pollCount + 1}/${maxPolls})，支付ID:`, paymentId)
      const response = await getPaymentById(paymentId)
      console.log('轮询响应:', response.data)
      
      if (response.data && response.data.success) {
        const payment = response.data.data
        // 兼容枚举可能是字符串或对象的情况
        const rawStatus = payment.status
        // 更全面地解析状态：可能是字符串、对象、或者对象的属性
        let status = rawStatus
        if (typeof rawStatus === 'object' && rawStatus !== null) {
          status = rawStatus.name || rawStatus.value || rawStatus.toString()
        }
        // 转为大写以便比较
        const statusUpper = String(status).toUpperCase()
        console.log('支付状态原始值:', rawStatus, '类型:', typeof rawStatus, '解析后:', status, '大写:', statusUpper)
        
        if (statusUpper === 'SUCCESS' || statusUpper === 'COMPLETED') {
          console.log('✅ 支付成功！支付数据:', payment)
          stopPaymentPolling()
          ElMessage.success('支付成功！')
          emit('pay-success', payment)
          // 重置状态，下次购买生成新订单
          currentPaymentId.value = null
          lastPlanType = ''
          // 延迟关闭模态框
          setTimeout(() => {
            visible.value = false
          }, 2000)
          return
        } else if (statusUpper === 'FAILED' || statusUpper === 'CANCELLED') {
          console.log('支付失败或取消')
          stopPaymentPolling()
          ElMessage.warning('支付已取消或失败')
          emit('pay-error', new Error('支付已取消或失败'))
          return
        } else if (statusUpper === 'PROCESSING') {
          console.log('支付处理中...')
          // PROCESSING 状态继续轮询
        } else if (statusUpper === 'PENDING') {
          console.log('支付待处理中（等待支付宝回调）...')
          // PENDING 状态继续轮询
        } else {
          console.log('未知状态:', statusUpper, '继续轮询...')
        }
      } else {
        console.warn('轮询响应失败:', response.data)
      }
      
      // 继续轮询
      pollCount++
      paymentPollingTimer = setTimeout(poll, pollInterval)
    } catch (error) {
      console.error('轮询支付状态失败:', error)
      // 错误时也继续轮询，直到达到最大次数
      pollCount++
      if (pollCount < maxPolls) {
        paymentPollingTimer = setTimeout(poll, pollInterval)
      }
    }
  }
  
  // 开始轮询（等待2秒后开始第一次轮询，更快响应）
  setTimeout(() => {
    poll()
  }, 2000)
}

// 停止轮询支付状态
const stopPaymentPolling = () => {
  if (paymentPollingTimer) {
    clearTimeout(paymentPollingTimer)
    paymentPollingTimer = null
    console.log('已停止轮询支付状态')
  }
}

// 手动检查支付状态
const manualCheckPayment = async () => {
  if (!currentPaymentId.value) {
    ElMessage.warning('请先生成支付二维码')
    return
  }
  
  ElMessage.info('正在查询支付状态...')
  
  try {
    const response = await getPaymentById(currentPaymentId.value)
    
    if (response.data && response.data.success) {
      const payment = response.data.data
      // 兼容枚举可能是字符串或对象的情况
      const rawStatus = payment.status
      // 更全面地解析状态
      let status = rawStatus
      if (typeof rawStatus === 'object' && rawStatus !== null) {
        status = rawStatus.name || rawStatus.value || rawStatus.toString()
      }
      const statusUpper = String(status).toUpperCase()
      console.log('手动查询支付状态原始值:', rawStatus, '类型:', typeof rawStatus, '解析后:', status, '大写:', statusUpper)
      
      if (statusUpper === 'SUCCESS' || statusUpper === 'COMPLETED') {
        stopPaymentPolling()
        ElMessage.success('支付成功！')
        emit('pay-success', payment)
        // 重置状态，下次购买生成新订单
        currentPaymentId.value = null
        lastPlanType = ''
        setTimeout(() => {
          visible.value = false
        }, 1500)
      } else if (statusUpper === 'FAILED' || statusUpper === 'CANCELLED') {
        ElMessage.warning('支付已取消或失败')
      } else {
        ElMessage.info(`支付尚未完成(状态:${statusUpper})，请完成支付后再试`)
      }
    }
  } catch (error) {
    console.error('查询支付状态失败:', error)
    ElMessage.error('查询失败，请稍后重试')
  }
}

// 关闭模态框
const handleClose = () => {
  stopPaymentPolling()
  visible.value = false
}

// 组件卸载时清理轮询
onUnmounted(() => {
  stopPaymentPolling()
})

// 获取支付状态描述
const getStatusDescription = (status) => {
  const statusMap = {
    'PENDING': '待支付 - 等待用户扫码支付',
    'PROCESSING': '处理中 - 支付宝正在处理支付',
    'SUCCESS': '支付成功',
    'COMPLETED': '支付完成',
    'FAILED': '支付失败',
    'CANCELLED': '已取消',
    'REFUNDED': '已退款'
  }
  return statusMap[status] || '未知状态'
}

// 显示协议
const showAgreement = () => {
  router.push('/terms-of-service')
}
</script>

<style scoped>
.payment-modal {
  background: #000000 !important;
}

/* 移除所有可能的白边和边框 */
.payment-modal :deep(.el-dialog),
.payment-modal-dialog,
.payment-modal :deep(.el-dialog.el-dialog--center.payment-modal),
.payment-modal :deep(.el-dialog.el-dialog--center),
.payment-modal.el-dialog.el-dialog--center.payment-modal,
.payment-modal :deep(.el-dialog.el-dialog--center.payment-modal-dialog),
.payment-modal :deep(.payment-modal-dialog.el-dialog.el-dialog--center.payment-modal) {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  border-radius: 12px !important;
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 0 0 0 transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  /* 移除所有可能的白色边框 */
  -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 0 0 0 transparent !important;
  -moz-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 0 0 0 transparent !important;
}

/* 移除所有伪元素可能产生的边框 */
.payment-modal :deep(.el-dialog::before),
.payment-modal :deep(.el-dialog::after),
.payment-modal :deep(.el-dialog__wrapper::before),
.payment-modal :deep(.el-dialog__wrapper::after),
.payment-modal :deep(.el-dialog__body::before),
.payment-modal :deep(.el-dialog__body::after) {
  display: none !important;
  content: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 移除所有可能的白色边框 - 使用更具体的选择器 */
.payment-modal :deep(.el-dialog),
.payment-modal :deep(.el-dialog *) {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

.payment-modal :deep(.el-dialog__body) {
  padding: 0 !important;
  margin: 0 !important;
  background: #000000 !important;
  background-color: #000000 !important;
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 移除对话框内部的所有边框和间隙 */
.payment-modal :deep(.el-dialog) * {
  border-color: transparent !important;
}

/* 确保对话框本身没有任何白色背景或边框 */
.payment-modal :deep(.el-dialog),
.payment-modal :deep(.el-dialog.el-dialog--center.payment-modal),
.payment-modal :deep(.el-dialog.el-dialog--center),
.payment-modal :deep(.payment-modal-dialog),
.payment-modal :deep(.payment-modal-dialog.el-dialog),
.payment-modal :deep(.payment-modal-dialog.el-dialog--center),
.payment-modal :deep(.payment-modal-dialog.el-dialog--center.payment-modal) {
  background-color: #000000 !important;
  background: #000000 !important;
  background-image: none !important;
}

/* 移除所有可能的白色边框 */
.payment-modal :deep(.el-dialog),
.payment-modal :deep(.el-dialog__body) {
  border: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
}

.payment-modal :deep(.el-dialog__header),
.payment-modal :deep(.el-dialog__header.show-close) {
  background: #000000 !important;
  background-color: #000000 !important;
  border: none !important;
  border-bottom: 1px solid #1a1a1a !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-width: 0 !important;
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  border-bottom-color: #1a1a1a !important;
  padding: 20px 24px !important;
  margin: 0 !important;
  color: white !important;
  text-align: left !important;
}

/* 确保 header.show-close 内的所有文字都是白色 */
.payment-modal :deep(.el-dialog__header.show-close),
.payment-modal :deep(.el-dialog__header.show-close *),
.payment-modal :deep(.el-dialog__header.show-close .el-dialog__title),
.payment-modal :deep(.el-dialog__header.show-close .el-dialog__headerbtn) {
  color: white !important;
}

/* 确保关闭按钮区域背景也与模态框一致 */
.payment-modal :deep(.el-dialog__headerbtn),
.payment-modal :deep(.el-dialog__headerbtn.is-close),
.payment-modal :deep(.el-dialog__header .el-dialog__headerbtn) {
  background: transparent !important;
  background-color: transparent !important;
}

.payment-modal :deep(.el-dialog__headerbtn:hover) {
  background: rgba(255, 255, 255, 0.1) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.payment-modal :deep(.el-dialog__wrapper) {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  background: transparent !important;
}

/* 确保 wrapper 内的所有对话框元素背景为黑色 */
.payment-modal :deep(.el-dialog__wrapper .el-dialog),
.payment-modal :deep(.el-dialog__wrapper .el-dialog.el-dialog--center),
.payment-modal :deep(.el-dialog__wrapper .el-dialog.el-dialog--center.payment-modal),
.payment-modal :deep(.el-dialog__wrapper .payment-modal-dialog) {
  background: #000000 !important;
  background-color: #000000 !important;
}

.payment-modal :deep(.el-overlay),
.payment-modal :deep(.payment-modal-overlay),
.payment-modal :deep(.el-overlay.payment-modal-overlay),
.payment-modal :deep(.el-overlay.payment-modal-overlay.el-modal-dialog) {
  background: rgba(0, 0, 0, 0.5) !important;
  border: none !important;
  outline: none !important;
}

/* 确保 el-overlay.payment-modal-overlay.el-modal-dialog 内的对话框背景为黑色 */
.payment-modal :deep(.el-overlay.payment-modal-overlay.el-modal-dialog .el-dialog),
.payment-modal :deep(.el-overlay.payment-modal-overlay.el-modal-dialog .el-dialog.el-dialog--center),
.payment-modal :deep(.el-overlay.payment-modal-overlay.el-modal-dialog .el-dialog.el-dialog--center.payment-modal),
.payment-modal :deep(.el-overlay.payment-modal-overlay.el-modal-dialog .el-dialog__body),
.payment-modal :deep(.el-overlay.payment-modal-overlay.el-modal-dialog .el-dialog__header) {
  background: #000000 !important;
  background-color: #000000 !important;
}

.payment-modal :deep(.el-overlay-dialog) {
  background: rgba(0, 0, 0, 0.5) !important;
  border: none !important;
  outline: none !important;
}

/* 确保 el-overlay-dialog 内的对话框背景为黑色 */
.payment-modal :deep(.el-overlay-dialog .el-dialog),
.payment-modal :deep(.el-overlay-dialog .el-dialog.el-dialog--center),
.payment-modal :deep(.el-overlay-dialog .el-dialog.el-dialog--center.payment-modal),
.payment-modal :deep(.el-overlay-dialog .el-dialog__body),
.payment-modal :deep(.el-overlay-dialog .el-dialog__header) {
  background: #000000 !important;
  background-color: #000000 !important;
}

/* 确保遮罩层没有白边 */
.payment-modal :deep(.el-overlay.is-message-box) {
  background: rgba(0, 0, 0, 0.5) !important;
}

.payment-modal :deep(.el-dialog__title) {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: bold !important;
  font-family: "SimSun", "宋体", serif !important;
  text-align: left !important;
  line-height: 1.5 !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 255, 255, 0.3) !important;
  filter: brightness(1.1) contrast(1.2) !important;
}

.payment-modal :deep(.el-dialog__headerbtn) {
  color: white !important;
}

.payment-modal :deep(.el-dialog__headerbtn:hover) {
  color: white !important;
}

.payment-modal :deep(.el-dialog__headerbtn svg) {
  color: white !important;
  fill: white !important;
}

.payment-content {
  padding: 24px;
  background: #000000 !important;
  background-color: #000000 !important;
  color: white !important;
  margin: 0 !important;
  border: none !important;
  border-width: 0 !important;
  box-sizing: border-box !important;
}

/* 确保 payment-content 内的所有文字都是白色（链接除外） */
.payment-content,
.payment-content *:not(a),
.payment-content p,
.payment-content span,
.payment-content div {
  color: white !important;
}

/* 支付方式选择 */
.payment-methods {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.payment-method {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #1a1a1a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  color: white;
}

.payment-method:hover {
  background: #2a2a2a;
  box-shadow: 0 4px 16px rgba(74, 158, 255, 0.2);
}

.payment-method.active {
  background: linear-gradient(135deg, #4a9eff 0%, #3a8bdf 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(74, 158, 255, 0.3);
}

.method-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1677FF;
}

.paypal-icon {
  color: #0070BA;
}

.payment-method.active .method-icon {
  color: white;
}

.payment-method span {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: white !important;
  line-height: 1.5 !important;
  letter-spacing: 0.3px !important;
}

/* 金额显示 */
.amount-section {
  text-align: center;
  margin-bottom: 24px;
}

.amount-label {
  font-size: 14px !important;
  color: white !important;
  margin-bottom: 8px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.3px !important;
}

.amount-value {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: white !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.5px !important;
}

/* PayPal支付区域 */
.paypal-section {
  text-align: center;
  margin-bottom: 24px;
  padding: 32px 24px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.paypal-info {
  margin-bottom: 24px;
}

.paypal-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.paypal-desc {
  color: white !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  margin: 8px 0 !important;
  line-height: 1.5 !important;
}

.paypal-desc-small {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  margin: 4px 0 !important;
  line-height: 1.5 !important;
}

.paypal-pay-button {
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, #0070BA 0%, #005EA6 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 112, 186, 0.3);
}

.paypal-pay-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #005EA6 0%, #004A85 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 112, 186, 0.4);
}

.paypal-pay-button:active:not(:disabled) {
  transform: translateY(0);
}

.paypal-pay-button:disabled {
  background: #666;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

/* 支付宝支付区域 */
.alipay-section {
  text-align: center;
  margin-bottom: 24px;
  padding: 32px 24px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.alipay-info {
  margin-bottom: 24px;
}

.alipay-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.alipay-desc {
  color: white !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  margin: 8px 0 !important;
  line-height: 1.5 !important;
}

.alipay-desc-small {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  margin: 4px 0 !important;
  line-height: 1.5 !important;
}

.alipay-pay-button {
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, #1677FF 0%, #0958d9 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3);
}

.alipay-pay-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #0958d9 0%, #003eb3 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(22, 119, 255, 0.4);
}

.alipay-pay-button:active:not(:disabled) {
  transform: translateY(0);
}

.alipay-pay-button:disabled {
  background: #666;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

/* 二维码区域 */
.qr-section {
  text-align: center;
  margin-bottom: 24px;
}

.qr-code {
  width: 200px;
  height: 200px;
  margin: 0 auto 16px;
  padding: 0;
  background: #1a1a1a;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  line-height: 0;
}

.qr-code img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  display: block;
  object-fit: contain;
  object-position: center;
  background: #1a1a1a;
  box-sizing: border-box;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.qr-placeholder {
  width: 200px;
  height: 200px;
  background: transparent;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.qr-placeholder svg {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.qr-tip {
  font-size: 12px !important;
  color: white !important;
  line-height: 1.5 !important;
  letter-spacing: 0.2px !important;
  font-weight: 400 !important;
}

/* 操作按钮 */
.action-section {
  margin-bottom: 16px;
}

.pay-button {
  width: 100%;
  padding: 14px;
  background: #4a9eff;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pay-button:hover {
  background: #3a8bdf;
  transform: translateY(-1px);
}

.pay-button:active {
  transform: translateY(0);
}

.pay-button:disabled {
  background: #666;
  cursor: not-allowed;
  transform: none;
}

.pay-button:disabled:hover {
  background: #666;
  transform: none;
}

/* 支付提示 */
.pay-tip {
  text-align: center;
  padding: 20px;
  background: #1a1a1a;
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.pay-tip p {
  margin: 8px 0 !important;
  color: white !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.3px !important;
  font-weight: 400 !important;
}

.tip-small {
  color: white !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.2px !important;
  font-weight: 400 !important;
  opacity: 0.8 !important;
}

/* 底部链接 */
.footer-link {
  text-align: center;
}

.footer-link a {
  color: #4a9eff !important;
  text-decoration: none !important;
  font-size: 12px !important;
  transition: color 0.3s ease !important;
  line-height: 1.5 !important;
  letter-spacing: 0.2px !important;
  font-weight: 400 !important;
}

.footer-link a:hover {
  color: #3a8bdf !important;
}

/* 我已完成支付按钮 */
.check-payment-btn {
  width: 100%;
  padding: 12px 24px;
  margin-top: 16px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.check-payment-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.check-payment-btn:disabled {
  background: #4a4a4a;
  cursor: not-allowed;
  opacity: 0.6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .payment-modal :deep(.el-dialog) {
    width: 90%;
    margin: 0 auto;
  }
  
  .payment-methods {
    flex-direction: column;
  }
  
  .qr-code {
    width: 160px;
    height: 160px;
  }
  
  .qr-placeholder {
    width: 140px;
    height: 140px;
  }
  
  .amount-value {
    font-size: 28px;
  }
}
</style>