优化样式

src/components/user-center/PaymentMethod.vue

@@ -39,10 +39,12 @@
     </div>
     <div class="px-6 pt-[85px] pb-[23px]">
       <Button
+        :disabled="isPaying"
         @click="$emit('pay', selectedValue)"
-        class="h-[50px] w-full rounded-[32px] border-none bg-black text-[16px] font-black text-white transition-all hover:bg-black/90 active:scale-[0.98]"
+        class="h-[50px] w-full rounded-[32px] border-none bg-black text-[16px] font-black text-white transition-all hover:bg-black/90 active:scale-[0.98] disabled:opacity-50"
       >
-        立即支付
+        <Loader2 v-if="isPaying" class="mr-2 h-4 w-4 animate-spin" />
+        {{ isPaying ? '正在支付...' : '立即支付' }}
       </Button>
     </div>
   </div>
@@ -51,6 +53,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { Button } from '@/components/ui/button'
+import { Loader2 } from 'lucide-vue-next'
 
 interface PaymentOption {
   label: string
@@ -60,6 +63,7 @@ interface PaymentOption {
 const props = defineProps<{
   methods: any[]
   selectedPlan: any
+  isPaying?: boolean
 }>()
 
 const list = computed(() =>