接口处理

src/components/user-center/PaymentMethod.vue

@@ -1,31 +1,3 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { Button } from '@/components/ui/button'
-
-interface PaymentOption {
-  label: string
-  value: number | string
-}
-
-const props = defineProps<{
-  methods: any[]
-}>()
-
-const list = computed(() =>
-  props.methods.map((item) => ({
-    label: item.name,
-    value: item.id,
-  }))
-)
-
-// 当前选中的值，默认选中第一个
-const selectedValue = ref<number | string>(props.methods[0]?.id || 1)
-
-const handleSelect = (value: number | string) => {
-  selectedValue.value = value
-}
-</script>
-
 <template>
   <div>
     <div class="bg-[#A8FF53] px-6 pt-7 font-sans text-black">
@@ -57,16 +29,18 @@ const handleSelect = (value: number | string) => {
     </div>
     <div class="px-6 pt-[55px]">
       <h2 class="mb-1 text-center text-2xl font-bold">订单信息</h2>
-      <div class="ml-[11px] pt-[22px] text-[16px] font-semibold">365天套餐</div>
+      <div class="ml-[11px] pt-[22px] text-[16px] font-semibold">
+        {{ selectedPlan?.days }}天套餐
+      </div>
       <div class="ml-[11px] flex items-center justify-between pt-[22px] text-[16px] font-semibold">
         <div>订单金额</div>
-        <div>USD 44.99</div>
+        <div>USD {{ selectedPlan?.price }}</div>
       </div>
     </div>
     <div class="px-6 pt-[85px] pb-[23px]">
       <Button
         @click="$emit('pay', selectedValue)"
-        class="h-[50px] w-full rounded-[32px] border-none bg-black text-[16px] font-black text-white hover:bg-black/90"
+        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]"
       >
         立即支付
       </Button>
@@ -74,6 +48,35 @@ const handleSelect = (value: number | string) => {
   </div>
 </template>
 
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Button } from '@/components/ui/button'
+
+interface PaymentOption {
+  label: string
+  value: number | string
+}
+
+const props = defineProps<{
+  methods: any[]
+  selectedPlan: any
+}>()
+
+const list = computed(() =>
+  props.methods.map((item) => ({
+    label: item.name,
+    value: item.id,
+  })),
+)
+
+// 当前选中的值，默认选中第一个
+const selectedValue = ref<number | string>(props.methods[0]?.id || 1)
+
+const handleSelect = (value: number | string) => {
+  selectedValue.value = value
+}
+</script>
+
 <style scoped>
 /* 如果需要特殊的斜体感，可以在这里微调 */
 span {