|
|
@@ -451,16 +451,16 @@ onMounted(async () => {
|
|
|
@click.self="showMembershipDialog = false"
|
|
|
>
|
|
|
<div
|
|
|
- class="bg-surface border border-white/10 rounded-2xl p-6 w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto"
|
|
|
+ class="bg-surface border border-white/10 rounded-2xl p-4 w-full max-w-sm mx-4"
|
|
|
>
|
|
|
- <h3 class="text-xl font-semibold text-white/90 mb-6 text-center">
|
|
|
+ <h3 class="text-lg font-semibold text-white/90 mb-4 text-center">
|
|
|
开通会员
|
|
|
</h3>
|
|
|
|
|
|
<!-- 会员套餐选择 -->
|
|
|
- <div class="space-y-2 mb-4">
|
|
|
+ <div class="space-y-2 mb-3">
|
|
|
<h4 class="text-sm font-medium text-white/70 mb-2">选择套餐</h4>
|
|
|
- <div class="grid grid-cols-1 gap-2">
|
|
|
+ <div class="space-y-2">
|
|
|
<label
|
|
|
v-for="plan in membershipPlans"
|
|
|
:key="plan.key"
|
|
|
@@ -482,16 +482,13 @@ onMounted(async () => {
|
|
|
"
|
|
|
>
|
|
|
<div class="flex justify-between items-center">
|
|
|
- <div>
|
|
|
- <div class="font-medium text-white/90 text-sm">
|
|
|
- {{ plan.label }}
|
|
|
- </div>
|
|
|
- <div class="text-xs text-white/60">{{ plan.duration }}</div>
|
|
|
+ <div
|
|
|
+ class="font-medium text-white/90 text-sm whitespace-nowrap"
|
|
|
+ >
|
|
|
+ {{ plan.label }} - {{ plan.duration }}
|
|
|
</div>
|
|
|
- <div class="text-right">
|
|
|
- <div class="font-semibold text-white/90 text-sm">
|
|
|
- {{ plan.price }}
|
|
|
- </div>
|
|
|
+ <div class="font-semibold text-white/90 text-sm">
|
|
|
+ {{ plan.price }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -500,44 +497,42 @@ onMounted(async () => {
|
|
|
</div>
|
|
|
|
|
|
<!-- 支付方式选择 -->
|
|
|
- <div class="space-y-2 mb-4">
|
|
|
+ <div class="mb-3">
|
|
|
<h4 class="text-sm font-medium text-white/70 mb-2">支付方式</h4>
|
|
|
- <div class="space-y-2">
|
|
|
- <label
|
|
|
- class="flex items-center p-2 border border-white/20 rounded-lg cursor-pointer hover:bg-white/5"
|
|
|
- >
|
|
|
- <input
|
|
|
- v-model="selectedPayment"
|
|
|
- value="alipay"
|
|
|
- type="radio"
|
|
|
- name="payment-method"
|
|
|
- class="sr-only"
|
|
|
- />
|
|
|
- <div class="flex items-center">
|
|
|
- <div
|
|
|
- class="w-8 h-8 bg-blue-500 rounded flex items-center justify-center mr-3"
|
|
|
- >
|
|
|
- <span class="text-white text-sm font-bold">支</span>
|
|
|
- </div>
|
|
|
- <span class="text-white/90">支付宝</span>
|
|
|
+ <label
|
|
|
+ class="flex items-center p-2 border border-white/20 rounded-lg cursor-pointer hover:bg-white/5"
|
|
|
+ >
|
|
|
+ <input
|
|
|
+ v-model="selectedPayment"
|
|
|
+ value="alipay"
|
|
|
+ type="radio"
|
|
|
+ name="payment-method"
|
|
|
+ class="sr-only"
|
|
|
+ />
|
|
|
+ <div class="flex items-center">
|
|
|
+ <div
|
|
|
+ class="w-6 h-6 bg-blue-500 rounded flex items-center justify-center mr-3"
|
|
|
+ >
|
|
|
+ <span class="text-white text-sm font-bold">支</span>
|
|
|
</div>
|
|
|
- </label>
|
|
|
- </div>
|
|
|
+ <span class="text-white/90 text-sm">支付宝</span>
|
|
|
+ </div>
|
|
|
+ </label>
|
|
|
</div>
|
|
|
|
|
|
<!-- 操作按钮 -->
|
|
|
- <div class="flex gap-3 pt-3 border-t border-white/10">
|
|
|
+ <div class="flex gap-2 pt-3 border-t border-white/10">
|
|
|
<button
|
|
|
type="button"
|
|
|
@click="showMembershipDialog = false"
|
|
|
- class="flex-1 px-4 py-2 border border-white/20 text-white/70 rounded-lg hover:bg-white/5 transition"
|
|
|
+ class="flex-1 px-3 py-2 border border-white/20 text-white/70 rounded-lg hover:bg-white/5 transition text-sm"
|
|
|
>
|
|
|
取消
|
|
|
</button>
|
|
|
<button
|
|
|
@click="handleMembershipPurchase"
|
|
|
:disabled="!selectedPlan || isPaymentLoading"
|
|
|
- class="flex-1 px-4 py-2 bg-brand text-slate-900 rounded-lg hover:bg-brand/90 transition disabled:opacity-50 disabled:cursor-not-allowed"
|
|
|
+ class="flex-1 px-3 py-2 bg-brand text-slate-900 rounded-lg hover:bg-brand/90 transition disabled:opacity-50 disabled:cursor-not-allowed text-sm"
|
|
|
>
|
|
|
{{ isPaymentLoading ? "处理中..." : "立即购买" }}
|
|
|
</button>
|
